Manual Adobe Dreamweaver CS3 (page 2 of 704) (Dutch)

36933

Zoom out

Zoom in

1/704

HANDBOEK

ADOBE

DREAMWEAVER

CS3

Adobe® Dreamweaver® CS3 Handboek voor Windows® en Macintosh

Als bij dit handboek software wordt geleverd waarvoor een gebruiksrechtsovereenkomst geldt, worden dit handboek en de software die erin wordt beschreven, geleverd onder

licentie en mogen de software en het handboek alleen worden gebruikt of gekopieerd in overeenstemming met de bepalingen in de licentie. Behoudens uitzonderingen

voortvloeiende uit licenties, mag niets uit deze publicatie in welke vorm of op welke manier dan ook worden verveelvoudigd, opgeslagen op een gegevensopzoeksysteem of

openbaar gemaakt door middel van elektronische of mechanische kopieën, geluidsdragers of op enigerlei andere wijze zonder voorafgaande schriftelijke toestemming van Adobe

Systems Incorporated. Houd er rekening mee dat op de inhoud van deze handleiding de wet op het auteursrecht van toepassing is, ook als de handleiding niet wordt verstrekt

met software waarvoor een gebruiksrechtovereenkomst geldt.

De inhoud van deze handleiding wordt alleen ter informatie geleverd, kan zonder voorafgaande kennisgeving worden gewijzigd en houdt geen enkele verplichting in voor Adobe

Systems Incorporated. Adobe Systems Incorporated wijst alle verantwoordelijkheid of aansprakelijkheid van de hand voor fouten of onnauwkeurigheden die in de informatieve

inhoud van deze handleiding kunnen voorkomen.

Op bestaande illustraties of afbeeldingen die u in uw project wilt opnemen is mogelijk copyright van toepassing. Ongeoorloofde opname van dergelijk materiaal in uw nieuwe

werk is mogelijk in strijd met de rechten van de houder van het copyright. U wordt aangeraden toestemming te vragen aan de houder van het copyright voor gebruik van het

betreffende werk.

Eventuele bedrijfsnamen in voorbeeldsjablonen dienen slechts om het gebruik van het product te illustreren en zijn fictief.

Adobe, het Adobe-logo, ActionScript, ColdFusion, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, HomeSite, JRun, Photoshop, Shockwave en Version Cue

zijn gedeponeerde handelsmerken of handelsmerken van Adobe Systems Incorporated in de Verenigde Staten en/of andere landen.

ActiveX, Microsoft en Windows zijn gedeponeerde handelsmerken of handelsmerken van Microsoft Corporation in de Verenigde Staten en/of in andere landen. Apple en Mac

OS zijn handelsmerken van Apple Inc., gedeponeerd in de Verenigde Staten en andere landen. Java en Solaris zijn handelsmerken of gedeponeerde handelsmerken van Sun

Microsystems, Inc. in de Verenigde Staten en andere landen. Linux is het gedeponeerde handelsmerk van Linus Torvalds in de Verenigde Staten en andere landen. UNIX is een

handelsmerk in de Verenigde Staten en in andere landen, onder exclusieve licentie van X/Open Company, Ltd. Alle andere handelsmerken zijn het eigendom van de respectieve

eigenaren.

Dit product bevat software die is ontwikkeld door Apache Software Foundation (

http://www.apache.org/). Op Graphics Interchange Format © rust hetauteursrecht, dat eigendom

is van CompuServe Incorporated. GIF(sm) is een servicemerk in eigendom van CompuServe Incorporated. MPEG Layer-3-audiocompressietechnologie in licentie gegeven door

Fraunhofer IIS en Thomson Multimedia (

http://www.mp3licensing.com). U mag de gecomprimeerde MP3-audio niet in de Software gebruiken voor real-time of live

uitzendingen. Als u een MP3-decoder nodig hebt voor real-time of live uitzendingen, bent u verantwoordelijk voor het verkrijgen van een licentie voor deze MP3-technologie.

Spraakcompressie- en -decompressietechnologie in licentie gegeven door Nellymoser, Inc. (

www.nellymoser.com) Flash CS3-video powered by On2 TrueMotion-

http://www.on2.com.DitproductbevatsoftwaredieisontwikkelddoordeOpenSymphony

Group (

http://www.opensymphony.com/) Sorenson SparkTM-videocompressie- en -decompressietechnologie in licentie gegeven door Sorenson Media, Inc.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, Verenigde Staten.

Kennisgeving aan eindgebruikers bij de overheid van de Verenigde Staten De Software en Documentatie zijn “Commercial Items”, zoals gedefinieerd in 48 C.F.R. §2.101,

bestaande uit “commerciële computersoftware” en “documentatie bij commerciële software” zoals genoemd in 48 C.F.R. §12.212 of 48 C.F.R. §227.7202, al naargelang hetgeen

van toepassing is. Conform 48 C.F.R. §12.212 of 48 C.F.R. §§227.7202-1 tot en met §227.7202-4, al naar gelang hetgeen van toepassing is, is aan de eindgebruikers van de

Amerikaanse overheid een licentie voor de commerciële computersoftware en de documentatie bij de commerciële computersoftware verleend (a) alleen als commerciële

artikelen en (b) met alleen de rechten die aan alle eindgebruikers worden verleend overeenkomstig de voorwaarden en bepalingen in dit document. Niet-gepubliceerde rechten

voorbehouden conform de auteursrechtwetten van de Verenigde Staten. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. Voor eindgebruikers bij

de Amerikaanse overheid stemt Adobe er in toe te voldoen aan alle van toepassing zijnde wetten op het gebied van gelijke behandeling inclusief, indien van toepassing, de

voorzieningen van Executive Order 11246, inclusief wijzigingen, Section 402 van de Vietnam Era Veterans Readjustment Assistance Act uit 1974 (38 USC 4212), en Section 503

van de Rehabilitation Act uit 1973, inclusief wijzigingen, en de regelgeving bij 41 CFR Parts 60-1 t/m 60-60, 60-250 en 60-741. De clausule en regels betreffende positieve actie

die zijn opgenomen in de voorafgaande zin zullen worden opgenomen via verwijzing.

iii

Inhoud

Hoofdstuk 1: Aan de slag

Installatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Adobe Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Bronnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Nieuw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

Hoofdstuk 2: Werkruimte

Dreamweaver-werkwijze en -werkruimte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

Werken in het documentvenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

Werkbalken, knoppen, contextmenu's en panelen gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

De werkruimte van Dreamweaver CS3 aanpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

Hoofdstuk 3: Werken met Dreamweaver-sites

Een Dreamweaver-site opzetten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Werken met een visueel overzicht van uw site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Contribute-sites beheren met Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54

Aan bestanden werken zonder een site te deﬁniëren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60

Opties van het tabblad Basis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Hoofdstuk 4: Bestanden maken en beheren

Documenten maken en openen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65

Bestanden en mappen beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74

Bestanden ophalen van en plaatsen op de server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83

Bestanden in- en uitchecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Bestanden synchroniseren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91

Bestanden vergelijken om verschillen op te sporen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92

Bestanden terugdraaien (Contribute-gebruikers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95

Mappen en bestanden op uw site camouﬂeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96

Bestandsgegevens opslaan in ontwerpnotities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Uw site testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101

Hoofdstuk 5: Beheer van elementen en bibliotheken

Over elementen en bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105

Werken met elementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

Een lijst van favoriete elementen maken en beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110

Werken met bibliotheekitems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112

Hoofdstuk 6: Pagina's maken met CSS

Wat zijn CSS-stijlpagina's (Cascading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

CSS maken en beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121

Pagina's met CSS opmaken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140

Werken met labels voor div-elementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156

AP-elementen animeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Hoofdstuk 7: Pagina's opmaken met HTML

Visuele lay-outhulpmiddelen gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166

Inhoud in tabellen presenteren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169

Pagina's opmaken in lay-outmodus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183

Frames gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193

Hoofdstuk 8: Inhoud toevoegen aan pagina's

Werken met pagina's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206

Tekst toevoegen en opmaken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218

Afbeeldingen toevoegen en wijzigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233

Flash-inhoud invoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245

Flash-videoinhoud toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .254

Geluid toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258

Andere mediaobjecten toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259

Hoofdstuk 9: Koppelingen en navigatie

Over koppelingen en navigatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

Koppelingen maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269

Snelmenu's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277

Navigatiebalken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279

Afbeeldingen met hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280

Problemen met koppelingen oplossen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282

Hoofdstuk 10: Pagina's voorvertonen

Pagina's voorvertonen in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .285

Pagina's voorvertonen in mobiele apparaten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286

Hoofdstuk 11: Werken met paginacode

Code schrijven in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288

De codeeromgeving opzetten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293

De codeeromgeving aanpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295

Code schrijven en bewerken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300

Code samenvouwen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309

Code optimaliseren en fouten opsporen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311

Code bewerken in de ontwerpweergave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316

Werken met de kopinhoud van pagina's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321

Werken met include-bestanden op de server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325

Tagbibliotheken beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327

Aangepaste tags importeren in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329

Hoofdstuk 12: JavaScript-gedrag toevoegen

JavaScript-gedrag gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332

Ingebouwd Dreamweaver-gedrag toepassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335

Hoofdstuk 13: Werken met andere toepassingen

Integratie tussen diverse toepassingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .350

Werken met Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351

Werken met Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .357

Werken met Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365

Werken met Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366

Werken met Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368

Hoofdstuk 14: Sjablonen maken en beheren

Over sjablonen van Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .370

Sjablonen en op een sjabloon gebaseerde documenten herkennen . . . . . . . . . . . . . . . . . . . . . . .375

Een Dreamweaver-sjabloon maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .377

Bewerkbare gebieden maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .380

Herhalingsgebieden maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .381

Optionele gebieden gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .383

Bewerkbare tagkenmerken deﬁniëren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386

Een geneste sjabloon maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387

Sjablonen bewerken, bijwerken en verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .390

Sjablooninhoud exporteren en importeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .393

Een sjabloon uit een bestaand document toepassen of verwijderen . . . . . . . . . . . . . . . . . . . . . .394

Inhoud in een op een sjabloon gebaseerd document bewerken . . . . . . . . . . . . . . . . . . . . . . . . . .395

Sjabloonsyntaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398

Voorkeuren voor het schrijven van sjablonen instellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .399

Hoofdstuk 15: XML-gegevens weergeven

Over XML en XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401

XSL-transformaties op de server uitvoeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .408

XSL-transformaties op de client uitvoeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .424

Ontbrekende tekeneenheden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .426

Hoofdstuk 16: Spry-pagina's visueel opbouwen

Over het Spry-framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .428

Spry-objecten toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .428

Werken met het accordeonobject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .430

Werken met het menubalkobject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .432

Werken met het inklapbaar-paneelobject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437

Werken met het object paneel met tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439

Werken met het object tekstveld voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441

Werken met het object tekstgebied voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .446

Werken met het object Validatie selecteren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .449

Werken met het object selectievakje voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .452

Gegevens weergeven met Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .455

Spry-effecten toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .463

Hoofdstuk 17: Voorbereidingen voor het bouwen van dynamische websites

Wat zijn webtoepassingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .467

Een lokale webserver installeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474

Een webtoepassing instellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477

Databaseverbindingen voor ColdFusion-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .483

Databaseverbindingen voor ASP-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .484

Databaseverbindingen voor PHP-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .491

Databaseverbindingen voor ASP.NET-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .492

Databaseverbindingen voor JSP-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .495

Problemen met databaseverbindingen oplossen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .499

Verbindingsscripts verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .504

Hoofdstuk 18: Gegevensbronnen voor webtoepassingen

Een database gebruiken om inhoud op te slaan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .505

Door gebruikers ingediende gegevens verzamelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .506

In sessievariabelen opgeslagen gegevens openen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .508

Hoofdstuk 19: Pagina's dynamisch maken

De werkruimte optimaliseren voor visuele ontwikkeling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512

Dynamische pagina's ontwerpen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .515

Overzicht van dynamische inhoudsbronnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .516

Panelen voor dynamische inhoud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .519

Bronnen met dynamische inhoud deﬁniëren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .521

Dynamische inhoud toevoegen aan pagina's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536

Dynamische inhoud wijzigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540

Databaserecords weergeven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .542

Live-gegevens weergeven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .551

Webservices gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .554

Aangepast servergedrag toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .560

Formulieren maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .570

Hoofdstuk 20: Toepassingen visueel samenstellen

Hoofd- en detailpagina's samenstellen (alle servers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .584

Zoekpagina's en resultatenpagina's maken (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . .593

Een pagina maken voor het doorzoeken van een database (ASP.NET) . . . . . . . . . . . . . . . . . . . . .598

Een pagina voor het invoegen van records maken (alle servers) . . . . . . . . . . . . . . . . . . . . . . . . . . .602

Pagina's maken om een record bij te werken (alle servers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .606

Pagina's maken om een record te verwijderen (alle servers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .611

Pagina's samenstellen met geavanceerde gegevensmanipuleringsobjecten (ColdFusion, ASP,

ASP.NET, JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .618

Een registratiepagina samenstellen (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . .625

Een aanmeldingspagina samenstellen (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . .628

Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben (ColdFusion, ASP,

JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .630

Een map in uw toepassing beveiligen (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .632

ColdFusion-componenten gebruiken (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .633

JavaBeans gebruiken (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .639

Hoofdstuk 21: ASP.NET- en ColdFusion-formulieren maken

ColdFusion MX 7-formulieren maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .641

ASP.NET-formulieren maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .653

ASP.NET DataGrid- en DataList-webbesturingselementen maken . . . . . . . . . . . . . . . . . . . . . . . . .658

Hoofdstuk 22: Taken automatiseren

Taken automatiseren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .665

Hoofdstuk 23: Toegankelijkheid

Dreamweaver en toegankelijkheid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .671

Toegankelijkheidsfuncties in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .672

Pagina's voor toegankelijkheid ontwerpen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .673

Hoofdstuk 24: Sneltoetsen en extensies

Sneltoetsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .675

Extensies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .677

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .678

Hoofdstuk 1: Aan de slag

Hebt u de nieuwe software nog niet geïnstalleerd, lees dan eerst de informatie over de installatie en andere voorbereidende

werkzaamheden. Neem voordat u met de software aan de slag gaat eerst even de tijd om het overzicht te bekijken van de

Help van Adobe en de vele andere bronnen die beschikbaar zijn voor gebruikers. U hebt toegang tot instructievideo's,

insteekmodules, sjablonen, gebruikersgroepen, cursussen, handleidingen, RSS-feeds en nog veel meer.

Installatie

Vereisten

❖ In het Lees mij-bestand dat deel uitmaakt van de software vindt u alle systeemvereisten en aanbevelingen voor uw

Adobe®-software.

De software installeren

1 Sluit alle andere Adobe-toepassingen die op uw computer worden weergegeven.

2 Plaats de installatieschijf in het schijfstation en volg de aanwijzingen op het scherm op.

Opmerking: Zie het Lees mij-bestand op de installatieschijf voor meer informatie.

De software activeren

Als u een licentie voor één gebruiker voor de Adobe-software hebt aangeschaft, wordt u gevraagd de software te activeren.

Dit is een eenvoudige, anonieme procedure die u dient uit te voeren binnen 30 dagen nadat u de software in gebruik hebt

genomen.

Voor meer informatie over productactivering raadpleegt u het Lees mij-bestand op de installatieschijf of gaat u naar de

website van Adobe op www.adobe.com/go/activation_nl.

1 Als het dialoogvenster Activeren nog niet wordt weergegeven, kiest u Help > Activeren.

2 Volg de aanwijzingen op het scherm.

Opmerking: Als u de software wilt installeren op een andere computer, moet u deze eerst deactiveren op uw computer. Kies

Help > Deactiveren.

Registreren

Registreer uw product voor gratis installatie-ondersteuning, berichten voor updates en andere services.

❖ Volg om uw product te registreren de aanwijzingen op het scherm in het dialoogvenster Registratie, dat verschijnt nadat

u de software hebt geïnstalleerd en geactiveerd.

Als u uw product niet meteen registreert, kunt u dit op elk moment doen door te kiezen voor Help > Registratie.

Adobe Help

Adobe Help-cursussen

Documentatie voor uw Adobe-software is beschikbaar in verschillende indelingen.

DREAMWEAVER CS3

Handboek

In-product en LiveDocs Help

De Help in het product geeft toegang tot alle documentatie- en instructiemateriaal dat beschikbaar is op het moment dat

de software wordt verzonden. U kunt de Help weergeven via het menu Help in uw Adobe-product.

LiveDocs Help bevat de volledige inhoud van de Help in uw product, inclusief updates en koppelingen naar aanvullend

instructiemateriaal dat op het web beschikbaar is. Voor bepaalde producten kunt u ook opmerkingen toevoegen aan de

onderwerpen in LiveDocs Help. U vindt de LiveDocs Help voor uw product in het Adobe Help Resource Center op

www.adobe.com/go/documentation_nl.

De meeste versies van de in-product Help en LiveDocs Help bieden u de mogelijkheid om te zoeken binnen de Help-

systemen van meerdere producten. Ook de onderwerpen bevatten vaak koppelingen naar relevante inhoud op het internet

of naar onderwerpen in de Help van een ander product.

U kunt de Help, zowel in het product als op het web, beschouwen als een centrum voor toegang tot extra inhoud en

gebruikersgroepen. De compleetste en bijgewerkte versie van de Help staat altijd op het internet.

Adobe PDF-documentatie

De in-product Help is ook beschikbaar als een PDF die is geoptimaliseerd om te worden afgedrukt. Andere documenten,

zoals installatiehandleidingen en white papers, kunnen ook als PDF's worden geleverd.

Al de PDF-documentatie is beschikbaar via het Adobe Help Resource Center, op www.adobe.com/go/documentation_nl.

Als u de PDF-documentatie die bij uw software wordt geleverd, wilt inzien, kijkt u in de map Documentatie op de

installatie- of programma-dvd.

Gedrukte documentatie

Afgedrukte versies van de Help binnen een product kunnen worden aangeschaft bij de Adobe Store op

www.adobe.com/go/store_nl. U kunt in de Adobe Store ook boeken vinden die door de uitgeverspartners van Adobe zijn

uitgegeven.

Alle producten uit de Adobe Creative Suite® 3 worden geleverd met een afgedrukte workflowhandleiding, en op zichzelf

staande Adobe-producten worden mogelijk geleverd met een afgedrukte basishandleiding.

De Help in het product gebruiken

De in-product Help is beschikbaar via het Help-menu. Klik nadat u de Adobe Help Viewer hebt gestart op Bladeren om de

Help voor extra Adobe-producten die op uw computer zijn geïnstalleerd te raadplegen.

DREAMWEAVER CS3

Handboek

Met deze voorzieningen in de Help hebt u ook toegang tot instructiemateriaal van andere Adobe-producten:

• Onderwerpen kunnen koppelingen bevatten naar de Help-systemen van andere Adobe-producten of naar extra inhoud

op het internet.

• Sommige onderwerpen worden gedeeld door twee of meer producten. Als u bijvoorbeeld een Help-onderwerp ziet met

pictogrammen van Adobe Photoshop® CS3 en Adobe After Effects®, weet u dat het onderwerp een beschrijving bevat van

functies die in beide producten voorkomen of van workflows waarbij beide producten betrokken zijn.

• U kunt zoeken in Help-systemen van meerdere producten.

Als u naar een woordgroep zoekt, zoals "shape tool", plaats ze dan tussen aanhalingstekens om alleen die onderwerpen te

raadplegen die alle woorden in de woordgroep bevatten.

Adobe Help

A. Knoppen Vooruit en Achteruit (koppelingen die eerder zijn bezocht) B. Subonderwerpen die kunnen worden uitgebreid C. Pictogrammen

die een gedeeld onderwerp aangeven D. Knoppen Vorige en Volgende (onderwerpen op volgorde)

Toegankelijkheidsfuncties

De inhoud van Adobe Help is toegankelijk voor mensen met een handicap, zoals een motorische handicap, blindheid en

slechtziendheid. De Help in de producten zelf ondersteunt de volgende standaardfuncties voor toegankelijkheid:

• De gebruiker kan de tekstgrootte wijzigen met standaardopdrachten in een contextmenu.

• Koppelingen zijn onderstreept om gemakkelijk te worden herkend.

• Als een koppelingstekst niet overeenkomt met de titel van het koppelingsdoel, wordt naar de titel verwezen in het

kenmerk Titel van de ankercode. Zo bevatten de koppelingen Volgende en Vorige de titels van de volgende en vorige

onderwerpen.

• Inhoud ondersteunt modus voor hoog contrast.

• Afbeeldingen zonder bijschriften bevatten alternatieve tekst.

• Elk frame heeft een titel die het doel ervan aangeeft.

• Standaard HTML-codes definiëren de structuur van de inhoud voor lezen op het scherm of voor hulpprogramma's die

tekst omzetten in spraak.

• Stijlbladen bepalen de opmaak, zodat er geen lettertypen zijn ingesloten.

DREAMWEAVER CS3

Handboek

Sneltoetsen voor knoppen op de Help-werkbalk (Windows)

Knop Vorige Alt+Pijl-links

Knop Volgende Alt+Pijl-rechts

Afdrukken Ctrl+P

Knop Info Ctrl+I

Menu Bladeren Alt+Pijl-omlaag of Alt+Pijl-omhoog om Help om een andere toepassing weer te geven

Zoekvenster Ctrl+S om het invoegpunt in het zoekvenster te plaatsen

Sneltoetsen voor navigatie door de Help (Windows)

• Druk op Ctrl+Tab (vooruit) of Shift+Ctrl+Tab (achteruit) om van het ene naar het andere deelvenster te gaan.

• Druk op Tab (vooruit) of Shift+Tab (achteruit) om de koppelingen in een deelvenster te doorlopen en om koppelingen

te markeren.

• Druk op Enter om een omlijnde koppeling te activeren.

• Druk op Ctrl+is gelijk aan (=) als u de tekst groter wilt maken.

• Druk op Ctrl+afbrekingsteken om de tekst kleiner te maken.

De juiste Help-documenten kiezen

In de volgende lijst worden de documenten weergegeven die beschikbaar zijn in het menu Help. U kunt deze lijst gebruiken

om na te gaan in welk Help-systeem u een antwoord op uw vraag kunt vinden.

• De Dreamweaver Help (aangeduid met Dreamweaver gebruiken) is bedoeld voor alle gebruikers en biedt uitgebreide

informatie over alle Adobe® Dreamweaver® CS3-functies.

• Dreamweaver uitbreiden, waarin het Dreamweaver-raamwerk en de API (Application Programming Interface) worden

besproken, is bedoeld voor gevorderde gebruikers die uitbreidingsmodules willen bouwen of de Dreamweaver-interface

willen aanpassen.

• In het Dreamweaver API-referentiehandboek worden het API-hulpprogramma en de JavaScript-API beschreven, die

worden gebruikt door gevorderde gebruikers om uitbreidingsmodules te bouwen en de interface aan te passen.

• In de Spry-framework Help wordt beschreven hoe gebruikers Ajax-gegevenssets, widgets en effecten kunnen maken met

het Spry-framework. De Help bevat ook codevoorbeelden en andere hulpmiddelen waarmee gebruikers snel aan de slag

kunnen. Deze documenten zijn niet Dreamweaver-specifiek. Voor Dreamweaver kunt u Dreamweaver gebruiken

raadplegen.

• De ColdFusion Help bestaat uit een verzamelingen boeken in de documentatieset van Macromedia® ColdFusion® van

Adobe (de volledige set is beschikbaar op LiveDocs). Deze Help-documenten zijn bedoeld voor zowel beginnende als

gevorderde ontwikkelaars die geïnteresseerd zijn in ColdFusion.

• Via Referentie krijgt u toegang tot een HTML-handleiding, een servermodelhandleidingen en andere naslagwerken.

Deze zijn bedoeld voor iedereen die meer informatie wil over de codesyntaxis, coderingsconcepten enzovoort.

Bronnen

Adobe Video Workshop

De Video Workshop van de Adobe Creative Suite 3 bevat meer dan 200 trainingsvideo's over een groot aantal verschillende

onderwerpen. Ze zijn bedoeld voor professionals die de Creative Suite 3-producten gebruiken voor het maken van

afdrukken, webpagina's en video's.

DREAMWEAVER CS3

Handboek

U kunt Adobe Video Workshop gebruiken om meer te weten te komen over alle Creative Suite 3-producten. Veel video's

laten zien hoe u Adobe-toepassingen samen moet gebruiken.

Wanneer u Adobe Video Workshop start, kunt u de producten kiezen waarover u meer wilt weten en de onderwerpen

kiezen die u wilt lezen. U kunt details over elke video weergeven om na te gaan welke video's voor u van belang zijn.

Presentatorgroepen

Hiermee nodigt Adobe Systems de groep gebruikers van Adobe-producten uit om knowhow en ervaringen uit te wisselen.

Adobe en lynda.com bieden u handleidingen, handige tips en slimme trucs van vooraanstaande ontwerpers en

ontwikkelaars, zoals Joseph Lowery, Katrin Eismann en Chris Georgenes. U ziet en hoort Adobe-experts zoals Lynn Grillo,

Greg Rewis en Russell Brown. In totaal delen meer dan 30 productexperts hun kennis.

DREAMWEAVER CS3

Handboek

Handleidingen en bronbestanden

Adobe Video Workshop bevat trainingen voor beginners en ervaren gebruikers. Verder bevinden zich hier ook video's over

nieuwe functies en belangrijke technieken. Elke video behandelt één onderwerp en duurt meestal ongeveer 3 tot 5 minuten.

De meeste video's worden geleverd met een geïllustreerde handleiding en bronbestanden, zodat u de gedetailleerde stappen

kunt afdrukken en zelf met de handleiding aan de slag kunt gaan.

Adobe Video Workshop gebruiken

U kunt Adobe Video Workshop openen via de dvd die bij uw Creative Suite 3-product wordt geleverd. Deze is ook online

beschikbaar op www.adobe.com/go/learn_videotutorials_nl. Adobe voegt regelmatig nieuwe video's aan de online Video

Workshop toe, dus neem eens een kijkje om te zien wat er nieuw is.

Dreamweaver CS3-video's

In Adobe Video Workshop worden allerlei uiteenlopende onderwerpen behandeld die betrekking hebben op Adobe

Dreamweaver® CS3, zoals:

• CSS-lay-outs gebruiken en aanpassen

• Actieve elementen gebruiken

• Stijlvormen met CSS

• Problemen met publiceren oplossen

• Rollovers maken

Video's laten u ook zien hoe u Dreamweaver CS3 in combinatie met andere Adobe-software kunt gebruiken:

• Websites ontwerpen met Dreamweaver en Photoshop

• Dreamweaver-sjablonen gebruiken met Contribute®

• Importeren, kopiëren en plakken tussen webtoepassingen

U hebt toegang tot de Adobe Creative Suite 3-videohandleidingen via Adobe Video Workshop

op www.adobe.com/go/learn_videotutorials_nl.

Extra's

U hebt toegang tot allerlei verschillende informatiebronnen waardoor u uw Adobe-software optimaal kunt benutten. Een

aantal van deze hulpmiddelen is tijdens het installatieproces op uw computer geïnstalleerd; aanvullende nuttige

voorbeelden en documenten staan op de schijf met de installatiesoftware of met de inhoud. Online worden unieke extra's

aangeboden door de Adobe Exchange-community op www.adobe.com/go/exchange_nl.

Geïnstalleerde hulpmiddelen

Tijdens de software-installatie wordt een aantal hulpmiddelen in uw toepassingsmap geplaatst. Als u deze bestanden wilt

bekijken, gaat u naar de toepassingsmap op uw computer.

• Windows®: [opstartstation]\Program Files\Adobe\[Adobe-toepassing]

• Mac OS®: [opstartstation]/Applications/[Adobe-toepassing]

De toepassingsmap kan de volgende informatiebronnen bevatten:

Insteekmodules Insteekmodules zijn kleine softwareprogramma's die functies uitbreiden of toevoegen aan uw software.

Zodra u de insteekmodules hebt geïnstalleerd, worden deze als opties weergegeven in het menu Importeren of Exporteren;

alsbestandsindelingenindedialoogvenstersOpenen,OpslaanalsenOrigineelexporterenofalsfiltersindesubmenu’svan

het menu Filter. Een aantal insteekmodules voor speciale effecten wordt bijvoorbeeld automatisch in de map

Insteekmodules in de Photoshop CS3-map geïnstalleerd.

Voorinstellingen Voorinstellingen omvatten een groot aantal verschillende handige gereedschappen, voorkeuren, effecten

en afbeeldingen. Productvoorinstellingen omvatten penselen, kleurstalen, kleurgroepen, symbolen, aangepaste vormen,

afbeeldings- en laagstijlen, patronen, structuren, handelingen, werkruimten en meer. De inhoud van de voorinstellingen

vindt u overal in de gebruikersinterface. Sommige voorinstellingen (zoals penseelbibliotheken voor Photoshop) zijn pas

DREAMWEAVER CS3

Handboek

beschikbaar als u het desbetreffende gereedschap selecteert. Als u bij het maken van een effect of afbeelding niet helemaal

bij nul wilt beginnen, gebruikt u de bibliotheken met voorinstellingen om inspiratie op te doen.

Sjablonen Sjabloonbestanden kunt u vanuit Adobe Bridge CS3 openen en bekijken, of openen vanuit het Welkomstscherm

of direct vanuit het menu Bestanden. Afhankelijk van het product lopen sjabloonbestanden uiteen van briefhoofden,

nieuwsbrieven en websites tot dvd-menu's en videoknoppen. Elk sjabloonbestand is op professionele wijze samengesteld

en laat zien hoe de productfuncties optimaal kunnen worden gebruikt. Sjablonen kunnen een waardevol hulpmiddel zijn

wanneer u een duwtje in de rug nodig hebt bij het starten van een project.

Voorbeelden Voorbeeldbestanden bevatten ingewikkeldere ontwerpen en zijn een uitstekende manier om nieuwe functies

in actie te zien. In deze bestanden wordt getoond welke creatieve mogelijkheden beschikbaar zijn.

Fonts Uw Creative Suite-product wordt geleverd met verschillende OpenType®-fonts en fontfamilies. De fonts worden

tijdens de installatie naar uw computer gekopieerd:

• Windows: [opstartstation]\Windows\Fonts

• Mac OS X: [opstartstation]/Bibliotheek/Fonts

Zie het Lees mij-bestand op de installatie-dvd voor informatie over het installeren van lettertypen.

Dvd-inhoud

De installatie- of inhouds-dvd die met uw product wordt geleverd bevat extra hulpmiddelen voor gebruik met uw software.

De map Extra's bevat productspecifieke bestanden zoals sjablonen, afbeeldingen, voorinstellingen, handelingen,

insteekmodules en effecten, samen met submappen voor Fonts en Stockfotografie. De map Documentatie bevat een PDF-

versie van de Help, technische informatie en andere documenten zoals voorbeeldmodellen, referentiehandleidingen en

informatie over gespecialiseerde functies.

Adobe Exchange

Bezoek voor meer gratis inhoud www.adobe.com/go/exchange_nl, een online groep waar gebruikers duizenden gratis

handelingen, extensies, insteekmodules en andere inhoud voor gebruik met Adobe-producten downloaden en delen.

Bridge Home

Bridge Home, een nieuwe bestemming in Adobe Bridge CS3, biedt gemakkelijk toegang tot actuele informatie over alle

Adobe Creative Suite 3-software. Start Adobe Bridge, klik vervolgens op het pictogram Bridge Home boven aan de het

deelvenster Favorieten om de laatste tips, nieuws en hulpmiddelen voor uw Creative Suite-gereedschappen weer te geven.

Pelletir

Inc

l illu

ore

giat

lla

fac

ilis

at vero

acc

l illu

lore

giat

lla

fac

ilis

at vero

accu

r In

nt c

ate

;

ent

in i

i fa

ritate

Inve

ation

trave

nt le

ctore

us. C

rit

proce

ent

ritate

;

ent

in iis

ritate

Inve

tig

trave

nt lectore

us.

rit

t e

proce

Travel Earth

Best 100 places to see on the planet

in your lifetime

volute

ipsummy

, commy

re eugia-

rud tem

eraes-

exer

n ullutet

Vel: Ad : Vulputate:

CHE

ero

dio

iam

t ad

lorp

m a

agiam

t ad

atin

ero d

che

agaim

et ad e

lla

$25

sum

iam

t ad

eri

vero d

eum nu

lam

$35

VEROS

sucicve

dio

vero d

e s

$15

nul

lam

ero dio

che

aim

d e

lam

eum n

$35

VERO

cicver

o d

ero d

e sum

ullam

o dio

agaime

llam

$35

DREAMWEAVER CS3

Handboek

Opmerking: Bridge Home is mogelijk niet beschikbaar in alle talen.

Adobe Design Center

In het Adobe Design Center vindt u artikelen, inspiratie en aanwijzingen van experts uit de branche, topontwerpers en

uitgeverspartners van Adobe. Maandelijks wordt nieuwe inhoud toegevoegd.

Er zijn honderden handleidingen beschikbaar voor ontwerpproducten en leertips en -technieken, via video's, HTML-

handleidingen en voorbeeldhoofdstukken.

Nieuwe ideeën vormen de kern van Think Tank, Dialog Box en Gallery:

• In de Think Tank-artikelen wordt beschreven hoe hedendaagse ontwerpers omgaan met technologie en wat hun

ervaringen betekenen voor ontwerp, ontwerpprogramma's en de samenleving.

• In Dialog Box delen experts nieuwe ideeën over bewegende afbeeldingen en digitaal ontwerp.

• De Gallery schenkt aandacht aan hoe artiesten ontwerp in beweging overbrengen.

DREAMWEAVER CS3

Handboek

Bezoek Adobe Design Center op www.adobe.com/designcenter.

Adobe Developer Center

Adobe Developer Center biedt voorbeelden, handleidingen, artikelen en groepshulpmiddelen voor ontwikkelaars die met

Adobe-producten krachtige internettoepassingen, websites, mobiele inhoud en andere projecten bouwen. Het Developer

Center bevat ook hulpmiddelen voor ontwikkelaars die insteekmodules voor Adobe-producten ontwikkelen.

Naast voorbeeldcode en handleidingen vindt u er RSS-feeds, online seminars, SDK's, scripthandleidingen en andere

technische hulpmiddelen.

Bezoek Adobe Developer Center op www.adobe.com/go/developer_nl.

Klantondersteuning

Bezoek de Adobe Support-website op www.adobe.com/nl/support voorinformatieoverhetoplossenvanproblemenvoor

uw product en om meer te weten te komen over gratis en niet-gratis technische ondersteuningsopties. Klik op de koppeling

Training voor meer informatie over de boeken van Adobe Press, verschillende cursussen, certificeringsprogramma's voor

Adobe-software en nog veel meer.

Downloads

Bezoek www.adobe.com/go/downloads_nl voor gratis updates, testversies en andere nuttige software. Bovendien biedt de

Adobe Store (op www.adobe.com/go/store_nl) toegang tot duizenden insteekmodules van onafhankelijke ontwikkelaars,

waarmee u taken kunt automatiseren, workflows kunt aanpassen, gespecialiseerde professionele effecten kunt maken en meer.

Adobe Labs

Adobe Labs biedt u de mogelijkheid nieuwe en opkomende technologieën en producten van Adobe uit te proberen en te

evalueren.

Bij Adobe Labs hebt u toegang tot hulpmiddelen zoals deze:

• Pre-release software en technologieën

• Codevoorbeelden en aanbevolen methoden om uw leerproces te versnellen

• Vroege versies van product- en technische documentatie

DREAMWEAVER CS3

Handboek

• Forums, wiki-gebaseerde inhoud en andere gezamenlijke hulpmiddelen voor een betere interactie met de interactie met

gelijkgestemde ontwikkelaars

Adobe Labs moedigt een gezamenlijk software-ontwikkelingsproces aan. In deze omgeving behalen klanten snel

interessante resultaten met nieuwe producten en technologieën. Adobe Labs is ook een forum voor vroegtijdige feedback,

die door het team van ontwikkelaars van Adobe wordt gebruikt om software te maken die voldoet aan de wensen en

verwachtingen van de Adobe-gebruikersgroepen

Bezoek Adobe Labs op www.adobe.com/go/labs_nl.

Gebruikersgroepen

De gebruikersgroepen bieden gebruikers forums, blogs en andere wegen om technologieën, programma's en informatie uit

te wisselen. Gebruikers kunnen vragen stellen en nagaan hoe anderen optimaal gebruikmaken van hun software. Er zijn

gebruikersforums in het Engels, Frans, Duits en Japans. Blogs worden gepubliceerd in een groot aantal verschillende talen.

Bezoek www.adobe.com/nl/communities om deel te nemen aan forums of blogs.

Nieuw

De belangrijkste nieuwe functies van Adobe Dreamweaver CS3

Spry-framework voor Ajax

Met Adobe® Dreamweaver® CS3 kunt u dynamische gebruikersinterfaces visueel vormgeven, ontwikkelen en

implementeren met het Spry-framework voor Ajax. Het Spry-framework voor Ajax is een JavaScript-bibliotheek voor

webontwerpers waarmee ontwerpers visueel aantrekkelijke pagina's kunnen creëren die bezoekers meer te bieden hebben.

In tegenstelling tot andere Ajax-frameworks is het Spry-framework toegankelijk voor zowel ontwerpers als ontwikkelaars

omdat 99% van het framework feitelijk uit HTML bestaat. Zie “Spry-pagina's visueel opbouwen” op pagina 428.

Spry-widgets

Spry-widgets zijn reeds gebouwde, veelgebruikte interfacecomponenten die u naar wens kunt aanpassen met CSS, en die u

vervolgens aan uw webpagina's kunt toevoegen. Met Dreamweaver kunt u een aantal Spry-widgets aan uw pagina's

toevoegen, waaronder XML-gestuurde lijsten en tabellen, accordeon-widgets, interfaces met tabbladen en

formulierelementen met validatie. Zie “Spry-objecten toevoegen” op pagina 428.

Spry-effecten

Met Spry-effecten kunt u op een eenvoudige en elegante wijze uw website fraaier en aantrekkelijker maken. U kunt deze

effecten op vrijwel elk element van een HTML-pagina toepassen. U kunt Spry-effecten toevoegen om elementen uit te

vergroten, te laten krimpen, te laten vervagen of extra nadruk te geven, u kunt met deze effecten de pagina visueel

veranderen gedurende een bepaalde periode en nog veel meer. Zie “Spry-effecten toevoegen” op pagina 463.

Geavanceerde Photoshop CS3-integratie

De integratie van Dreamweaver met Photoshop CS3 is verbeterd. Ontwerpers kunnen nu eenvoudigweg een deel van een

ontwerp selecteren in Photoshop, zelfs als zich dat op meerdere lagen bevindt, en dit deel vervolgens rechtstreeks op een

Dreamweaver-pagina plakken. Dreamweaver heeft een dialoogvenster waarin u opties kunt opgeven voor het

optimaliseren van de afbeelding. Als u de afbeelding op een gegeven moment wilt bewerken, hoeft u slechts te

dubbelklikken op de afbeelding om het oorspronkelijke PSD-bestand met lagen in Photoshop te openen, zodat u dit kunt

bewerken. Zie “Werken met Photoshop” op pagina 357.

DREAMWEAVER CS3

Handboek

Controle van de browsercompatibiliteit

De nieuwe functie voor het controleren van de browsercompatibiliteit in Dreamweaver genereert rapporten voor het

opsporen van CSS-problemen met de weergave in een verscheidenheid aan browsers. In de codeweergave worden

problemen met een vlag gemarkeerd, zodat u precies kunt nagaan wat het probleem is. Nadat u het probleem hebt

geïdentificeerd, kunt u het probleem snel verhelpen als u de oplossing kent, of Adobe CSS Advisor bezoeken als u meer

informatie nodig hebt. Zie “Controleren op problemen met CSS-weergave tussen browsers” op pagina 137.

Adobe CSS Advisor

De Adobe CSS Advisor-website bevat informatie over de meest recente CSS-problemen en kan rechtstreeks vanuit de

gebruikersinterface van Dreamweaver worden geopend tijdens het controleren van de browsercompatibiliteit. CSS Advisor

is meer dan een forum, wiki-pagina of discussiegroep: via CSS Advisor kunt u zelf heel gemakkelijk suggesties doen voor

verbeteringen van bestaande inhoud, nieuwe problemen en eventuele oplossingen melden en andere informatie leveren

waar de hele gemeenschap van CSS-gebruikers van kan profiteren. Zie “Controleren op problemen met CSS-weergave

tussen browsers” op pagina 137.

CSS-lay-outs

In Dreamweaver is een set van vooraf ontworpen CSS-lay-outs opgenomen waarmee u snel een webpagina kunt maken.

Bovendien leert u via de uitgebreide inline commentaren in de code van deze vooraf ontworpen lay-outs snel hoe u het

beste kunt werken met de CSS-paginalay-out. De meeste website-ontwerpen op het web kunnen worden ingedeeld in de

categorieën van lay-outs met één, twee of drie kolommen, elk met een aantal extra elementen (zoals kop- en voetteksten).

Dreamweaver biedt u een uitgebreide lijst van essentiële lay-outontwerpen die u geheel naar eigen behoefte kunt aanpassen.

Zie “Een pagina met een CSS-lay-out maken” op pagina 144.

CSS beheren

Met de functie voor het beheren van CSS kunt u CSS-regels gemakkelijker overbrengen van het ene naar het andere

document, van de kop van een document naar een extern blad, van het ene naar het andere externe CSS-bestand enzovoort.

U kunt ook inline CSS converteren naar CSS-regels en deze regels vervolgens toepassen waar u ze nodig hebt door de regels

eenvoudig te slepen en neer te zetten. Zie “CSS-regels verplaatsen” op pagina 133 en “Inline CSS converteren naar een CSS-

regel” op pagina 134.

Adobe Device Central

Met Adobe Device Central, dat is geïntegreerd met Dreamweaver en ook met de hele familie van Creative Suite 3-

programma's, kunt u gemakkelijker mobiele inhoud maken omdat u via Adobe Device Central snel toegang kunt krijgen

tot essentiële technische specificaties voor elk apparaat en omdat u de tekst en afbeeldingen van uw HTML-pagina kunt

verkleinen, zodat u precies kunt nagaan hoe de pagina eruit zal zien op het apparaat. Zie “Pagina's voorvertonen in mobiele

apparaten” op pagina 286.

Adobe Bridge CS3

U kunt Dreamweaver gebruiken in combinatie met Adobe Bridge CS3 om afbeeldingen en andere elementen gemakkelijk

en systematisch te beheren. Adobe Bridge biedt één centrale locatie van waaruit u toegang hebt tot uw projectbestanden,

toepassingen en instellingen. Bovendien kunt u via Adobe Bridge XMP-metagegevens toevoegen en zoekopdrachten

uitvoeren. Met de functies voor het ordenen en delen van bestanden en de rechtstreekse toegang tot Adobe Stock Photos

die Adobe Bridge u biedt, kunt u de creatieve workflow efficiënter laten verlopen en houdt u al uw projecten, of het nu gaat

om het maken van afdrukken, webpagina's, video's of inhoud voor mobiele telefoons, onder controle. Zie “Werken met

Bridge” op pagina 366.

Hoofdstuk 2: Werkruimte

De werkruimte van Adobe® Dreamweaver® CS3 bevat werkbalken, controlevensters en panelen die u gebruikt bij het

bouwen van webpagina's. U kunt de algemene weergave en de werking van de werkruimte aanpassen.

Dreamweaver-werkwijze en -werkruimte

Overzicht Dreamweaver-werkwijze

U kunt op verschillende manieren te werk gaan om een website te maken. Dit is er een van:

Uw site plannen en opzetten

Bepaal waar de bestanden moeten worden opgeslagen en verdiep u in de vereisten van de site, de profielen van uw publiek

en de doelstellingen van de site. Denk ook na over technische vereisten, zoals gebruikerstoegang, en beperkingen van de

browser, invoegtoepassingen en downloadmogelijkheden. Wanneer u uw gegevens hebt georganiseerd en een structuur

hebt bepaald, kunt u uw site gaan maken. (Zie “Werken met Dreamweaver-sites” op pagina 38.)

Uw sitebestanden organiseren en beheren

In het paneel Bestanden kunt u bestanden en mappen heel eenvoudig toevoegen, verwijderen en van naam veranderen om

de organisatie ervan naar eigen behoefte te wijzigen. Het paneel Bestanden bevat ook veel hulpmiddelen om uw site te

beheren, bestanden over te brengen van en naar een externe server, een proces in te stellen voor het in- en uitchecken van

bestanden om te voorkomen dat bestanden worden overschreven, en bestanden te synchroniseren op uw lokale en externe

sites. Vanuit het middelenpaneel kunt u de elementen in een site eenvoudig organiseren. U kunt de meeste elementen

rechtstreeks van het middelenpaneel naar een Dreamweaver-document slepen. Met Dreamweaver kunt u ook aspecten van

uw Adobe®Contribute®-sites beheren. (Zie “Bestanden en mappen beheren” op pagina 74 en “Beheer van elementen en

bibliotheken” op pagina 105.)

Webpagina's indelen

Kies de indelingstechniek die voor u het beste werkt, of gebruik een combinatie van indelingsopties van Dreamweaver om

uw site vorm te geven. U kunt AP-elementen, CSS-positioneringsstijlen of vooraf gedefinieerde CSS-indelingen van

Dreamweaver gebruiken om uw indeling te maken. Met de tabelgereedschappen kunt u snel pagina's ontwerpen door de

paginastructuur te tekenen en aan te passen. Als u meer elementen tegelijk in een browser wilt weergeven, kunt u uw

documenten indelen met behulp van frames. Tot slot kunt u nieuwe pagina's maken op basis van een Dreamweaver-

sjabloon, waarbij de indeling van deze pagina's automatisch wordt aangepast wanneer de sjabloon verandert. (Zie “Pagina's

maken met CSS” op pagina 117 en “Pagina's opmaken met HTML” op pagina 166.)

Inhoud toevoegen aan pagina's

Voeg elementen en ontwerpelementen toe, zoals tekst, afbeeldingen, rollover-afbeeldingen, afbeeldingen met hyperlinks,

kleuren, films, geluid, HTML-koppelingen, snelmenu's en nog veel meer. Voor elementen, zoals titels en achtergronden,

kunt u ingebouwde functies gebruiken. U kunt rechtstreeks op de pagina typen of inhoud importeren van andere

documenten. Dreamweaver beschikt ook over gedragingen voor het uitvoeren van taken als reactie op specifieke

gebeurtenissen, bijvoorbeeld het valideren van een formulier wanneer de bezoeker op de knop Verzenden klikt, of het

openen van een tweede browservenster wanneer de hoofdpagina klaar is met laden. Tot slot beschikt Dreamweaver over

gereedschappen om de prestaties van de website te optimaliseren en om pagina's te testen op compatibiliteit met

verschillende webbrowsers. (Zie “Inhoud toevoegen aan pagina's” op pagina 206.)

Pagina's maken door ze zelf te coderen

Een andere manier om pagina's te maken, is door ze zelf te coderen. Dreamweaver beschikt over eenvoudig te gebruiken

visuele bewerkingsgereedschappen, maar ook over een geavanceerde codeeromgeving. U kunt een van beide of beide

benaderingen gebruiken om uw pagina's te maken en te bewerken. (Zie “Werken met paginacode” op pagina 288.)

DREAMWEAVER CS3

Handboek

Een webtoepassing instellen voor dynamische inhoud

Veel websites bevatten dynamische pagina's waarmee bezoekers gegevens kunnen bekijken die in databases zijn opgeslagen,

en waarmee sommige bezoekers gewoonlijk nieuwe gegevens aan de databases kunnen toevoegen of bestaande gegevens

kunnen bewerken. Als u dergelijke pagina's wilt maken, moet u eerst een webserver en toepassingsserver instellen, een

Dreamweaver-site maken of wijzigen, en verbinding maken met een database. (Zie “Voorbereidingen voor het bouwen van

dynamische websites” op pagina 467.)

Dynamische pagina's maken

In Dreamweaver kunt u diverse bronnen van dynamische inhoud definiëren, waaronder recordsets die uit databases zijn

gehaald, formulierparameters en JavaBeans-componenten. U kunt de dynamische inhoud gewoon naar de pagina slepen

om deze toe te voegen.

U kunt de pagina instellen om één of meer records tegelijkertijd weer te geven, of om meer dan één pagina met records weer

te geven. U kunt speciale koppelingen toevoegen om van de ene pagina met records naar de volgende (of vorige) te gaan,

en recordtellers maken zodat gebruikers de records kunnen bijhouden. U kunt de toepassing of bedrijfslogica opnemen in

technologieën als Macromedia® ColdFusion® van Adobe® en webdiensten. Voor meer flexibiliteit kunt u aangepaste

servergedragingen en interactieve formulieren maken. (Zie “Pagina's dynamisch maken” op pagina 512.)

Testen en publiceren

Het testen van uw pagina's is een continu proces dat de hele ontwikkelingscyclus voortduurt. Aan het einde van de cyclus

publiceert u de site op een server. Veel ontwikkelaars plannen ook periodiek onderhoud om ervoor te zorgen dat de site

actueel en functioneel blijft. (Zie “Bestanden ophalen van en plaatsen op de server” op pagina 83.)

Overzicht van de indeling van de werkruimte

In de werkruimte van Dreamweaver kunt u documenten en objecteigenschappen bekijken. De werkruimte plaatst ook veel

van de meest gebruikte bewerkingen in werkbalken zodat u uw documenten snel kunt wijzigen.

In Windows® heeft Dreamweaver een geïntegreerde alles-in-een-venster-indeling. In de geïntegreerde werkruimte zijn alle

vensters en panelen geïntegreerd in één groter toepassingsvenster.

A. Invoegbalk B. Werkbalk Document C. Documentvenster D. Paneelgroepen E. Tagkieze r F. Eigenschappencontrole G. Paneel Bestanden

A B C D

DREAMWEAVER CS3

Handboek

Op Mac OS® kan Dreamweaver meerdere documenten weergeven in één venster dat voor elk document een tab heeft.

Dreamweaver kan eveneens een zwevende werkruimte weergeven waarin elk document in zijn eigen venster verschijnt.

Paneelgroepen zijn oorspronkelijk samengebracht in één dok, maar u kunt ze ook loskoppelen, zodat het zelfstandige

vensters worden. Wanneer u vensters verplaatst of van formaat verandert, 'klikken' ze automatisch vast aan elkaar, aan de

zijkanten van het scherm en aan het documentvenster.

A. Invoegbalk B. Werkba lk Do cum ent C. Documentvenster D. Paneelgroepen E. Tag ki ez er F. Eigenschappencontrole G. Paneel Bestanden

Zie www.adobe.com/go/vid0143_nl voor een zelfstudie over het instellen van de Dreamweaver-werkruimte.

Zie ook

“Werkbalken, knoppen, contextmenu's en panelen gebruiken” op pagina 26

“De indeling van de werkruimte kiezen (Windows)” op pagina 32

“De indeling van de werkruimte kiezen (Macintosh)” op pagina 32

“Documenten met tabs weergeven (Macintosh)” op pagina 33

Overzicht van de elementen in de werkruimte

De werkruimte bevat de volgende elementen:

Opmerking: Dreamweaver kent nog vele andere panelen, controles en vensters. Gebruik het menu Venster om panelen,

controles en vensters te openen. Als u een paneel, controlevenster of ander venster dat is gemarkeerd als geopend niet kunt

vinden, selecteert u Venster > Panelen schikken om alle geopende panelen naast elkaar weer te geven.

Het welkomstscherm Hiermeekuntueenonlangsgeopenddocumentopenenofeennieuwdocumentmaken.Vanuithet

welkomstscherm kunt u meer leren over Dreamweaver door een productrondleiding of een zelfstudie te volgen.

De invoegbalk Deze balk bevat knoppen waarmee u diverse typen objecten in een document kunt invoegen, zoals

afbeeldingen, tabellen en AP-elementen. Elk object is een stukje HTML-code waarmee u verschillende kenmerken van het

object kunt instellen. U kunt bijvoorbeeld een tabel invoegen door op de knop Tabel van de invoegbalk te klikken.

Desgewenst kunt u het menu Invoegen in plaats van de invoegbalk gebruiken om objecten in te voegen.

De werkbalk Document Deze balk bevat knoppen met opties voor verschillende weergaven van het documentvenster

(zoals de ontwerpweergave en codeweergave), en knoppen voor verschillende weergave-opties en enkele veelvoorkomende

bewerkingen zoals het weergeven in een browser.

A B C D

E F G

DREAMWEAVER CS3

Handboek

De werkbalk Standaard (Wordt niet weergegeven in de standaardindeling van de werkruimte.) Deze balk bevat knoppen

voor veelgebruikte bewerkingen uit de menu's Bestand en Bewerken: Nieuw, Openen, Opslaan, Alles opslaan, Kopiëren,

Plakken, Ongedaan maken en Opnieuw. Als u de werkbalk Standaard wilt weergeven, selecteert u Beeld > Werkbalken >

Standaard.

De werkbalk Codering (Wordt alleen in de codeweergave weergegeven.) Deze balk bevat knoppen waarmee u veel

standaardcodeerbewerkingen kunt uitvoeren.

De werkbalk Stijl renderen (Is standaard verborgen.) Deze balk bevat knoppen waarmee u kunt zien hoe een ontwerp er in

verschillende mediatypen uitziet als u media-afhankelijke stijlpagina's hebt gebruikt. De balk bevat ook een knop waarmee

u CSS-stijlen kunt in- en uitschakelen.

Het documentvenster In dit venster wordt het huidige document weergegeven terwijl u het maakt en bewerkt.

De eigenschappencontrole Hier kunt u allerlei eigenschappen voor het geselecteerde object of de geselecteerde tekst

bekijken en wijzigen. Elk type object heeft weer andere eigenschappen. In de indeling van de Codewerkruimte wordt de

eigenschappencontrole niet standaard uitgevouwen.

De tagkiezer Deze bevindt zich op de statusbalk, onder in het documentvenster. De tagkiezer toont de hiërarchie van de

tags rondom de huidige selectie. Klik op een tag in de structuur om de tag met alle inhoud te selecteren.

Paneelgroepen Dit zijn gerelateerde panelen die onder één kop zijn gegroepeerd. Als u een paneelgroep wilt uitvouwen,

klikt u op de uitvouwpijl, links van de groepsnaam. Als u een paneelgroep uit een dok wilt losmaken, sleept u de greep aan

de linkerrand van de titelbalk van de groep.

Het paneel Bestanden Hier kunt u bestanden en mappen beheren, ongeacht of ze tot een Dreamweaver-site behoren of zich

op een externe server bevinden. Via het paneel Bestanden hebt u ook toegang tot alle bestanden op uw lokale schijf,

ongeveer zoals in Windows Verkenner (Windows) of de Finder (Macintosh).

Zie ook

“Werken in het documentvenster” op pagina 23

“Werkbalken, knoppen, contextmenu's en panelen gebruiken” op pagina 26

“Over paneelgroepen” op pagina 29

Overzicht van het documentvenster

In het documentvenster wordt het huidige document weergegeven. U kunt een van de volgende weergaven selecteren:

Ontwerpweergave Dit is de ontwerpomgeving voor visuele pagina-indeling, visueel bewerken en snelle

toepassingsontwikkeling. In deze weergave geeft Dreamweaver een volledige bewerkbare, visuele voorstelling van het

document weer, ongeveer zoals hetgeen u ziet wanneer u de pagina in een browser weergeeft. U kunt de ontwerpweergave

configureren om dynamische inhoud weer te geven terwijl u aan het document werkt.

Codeweergave Dit is een codeeromgeving voor het schrijven en bewerken van HTML-, JavaScript-, servertaalcode, zoals

PHP of ColdFusion Markup Language (CFML), en elk ander type code.

Code- en ontwerpweergave In deze weergave ziet u zowel de codeweergave als de ontwerpweergave voor hetzelfde

document in een enkel venster.

Als het documentvenster een titelbalk heeft, bevat de titelbalk de paginatitel en tussen haakjes het pad en de naam van het

bestand. Achter de bestandsnaam plaatst Dreamweaver een sterretje als u wijzigingen hebt aangebracht die nog niet zijn

opgeslagen.

Als het documentvenster in de geïntegreerde werkruimte-indeling (alleen Windows) is gemaximaliseerd, heeft het venster

geen titelbalk. In dat geval worden de paginatitel en het pad en de naam van het bestand weergegeven in de titelbalk van

het hoofdvenster.

Wanneer een documentvenster is gemaximaliseerd, ziet u boven in het documentvenster tabs met daarop de

bestandsnamen van alle geopende documenten. Klik op een tab om naar het desbetreffende document te gaan.

DREAMWEAVER CS3

Handboek

Zie ook

“Werken in het documentvenster” op pagina 23

“Code schrijven in Dreamweaver” op pagina 288

“Live-gegevens weergeven in de ontwerpweergave” op pagina 551

Overzicht van de werkbalk Document

De werkbalk Document bevat knoppen waarmee u snel kunt schakelen tussen de verschillende weergaven van een

document: Codeweergave, ontwerpweergave en een gesplitste weergave met zowel de code- als de ontwerpweergave.

De werkbalk bevat ook enkele veelvoorkomende opdrachten en opties voor de weergave van het document en het

overbrengen van het document tussen de lokale en de externe site.

A. Codeweergave tonen B. Code- en ontwerpweergave tonen C. Ontwerpweergave tonen D. Documenttitel E. Bestandsbeheer

F. Voorvertonen/fouten opsporen in browser G. Ontwerpweergave vernieuwen H. Weergaveopties I. Visuele hulpmiddelen J. Opmaaktags

valideren K. Browsercompatibiliteit controleren

De werkbalk Document bevat de volgende opties:

Codeweergave tonen Hiermee geeft u alleen de codeweergave in het documentvenster weer.

Code- en ontwerpweergave tonen Hiermee splitst u het documentvenster in een codeweergave en een ontwerpweergave.

Wanneer u deze gecombineerde weergave kiest, wordt de optie Ontwerpweergave bovenaan beschikbaar in het menu

We ergave opt ies .

Ontwerpweergave tonen Hiermee geeft u alleen de ontwerpweergave in het documentvenster weer.

Opmerking: Als u met XML-, JavaScript- of CSS-bestanden of andere op code gebaseerde bestandstypen werkt, kunt u de

bestanden niet in de ontwerpweergave bekijken en zijn de knoppen Ontwerp en Splitsen grijs weergegeven.

Documenttitel Hier kunt u een titel voor het document invoeren, die in de titelbalk van de browser wordt weergegeven. Als

het document al een titel heeft, wordt deze in dit veld weergegeven.

Bestandsbeheer Hiermee geeft u het pop-upmenu Bestandsbeheer weer.

Voorvertonen/fouten opsporen in browser Hiermee kunt u het document in een browser bekijken of fouten opsporen.

Selecteer een browser in het pop-upmenu.

Ontwerpweergave vernieuwen Hiermee vernieuwt u de ontwerpweergave van het document nadat u wijzigingen in de

codeweergave hebt aangebracht. Wijzigingen die u in de codeweergave aanbrengt, worden niet automatisch weergegeven

in de ontwerpweergave. Ze worden pas weergegeven nadat u een bepaalde handeling uitvoert, zoals het bestand opslaan of

op deze knop klikken.

Opmerking: Wanneer u de weergave vernieuwt, werkt u ook DOM-afhankelijke (Document Object Model) functies bij, zoals

de mogelijkheid om de openende of afsluitende tags van een codeblok te selecteren.

Weergaveopties Hiermee kunt u opties instellen voor de code- en ontwerpweergave, zoals welke weergave bovenaan moet

staan. De opties in het menu zijn opties voor de huidige weergave: Ontwerpweergave, Codeweergave of beide.

Visuele hulpmiddelen Hiermee kunt u verschillende visuele hulpmiddelen gebruiken om uw pagina's te ontwerpen.

Opmaaktags valideren Hiermee kunt u het huidige document of een geselecteerde tag valideren.

Browsercompatibiliteit controleren Hiermee kunt u controleren of uw CSS compatibel is in de verschillende browsers.

Zie ook

“Werkbalken weergeven” op pagina 26

“De codeeromgeving aanpassen” op pagina 295

A B C D E F G H I J K

DREAMWEAVER CS3

Handboek

“Kopinhoud weergeven en bewerken” op pagina 321

“Visuele lay-outhulpmiddelen gebruiken” op pagina 166

Overzicht van de standaardwerkbalk

Deze werkbalk Standaard bevat knoppen voor veelgebruikte bewerkingen uit de menu's Bestand en Bewerken: Nieuw,

Openen, Opslaan, Alles opslaan, Kopiëren, Plakken, Ongedaan maken en Opnieuw. Gebruik deze knoppen zoals u de

equivalente menu-opdrachten zou gebruiken.

Zie ook

“Werkbalken weergeven” op pagina 26

“Documenten maken en openen” op pagina 65

Statusbalk, overzicht

De statusbalk onder in het documentvenster bevat aanvullende informatie over het document dat u maakt.

A. Tagkieze r B. Selectie C. Handje D. Het gereedschap Zoomen E. Vergroti ng i ns tellen F. Venstergrootte, pop-upmenu G. Documentgrootte

en geschatte downloadtijd

Tagkiezer De tagkiezer toont de hiërarchie van de tags rondom de huidige selectie. Klik op een tag in de structuur om de

tag met alle inhoud te selecteren. Klik op

<body> als u de hele inhoud van het document wilt selecteren. Als u in de tagkiezer

de kenmerken

class of id voor een tag wilt instellen, klikt u met de rechtermuisknop (Windows) of klikt u terwijl u Control

ingedrukt houdt (Macintosh) op de tag en selecteert u een klasse of id in het contextmenu.

Selectie Hiermee schakelt u het Handje (gereedschap) in of uit.

Handje Hiermee kunt u op het document klikken en het in het documentvenster slepen.

Zoomgereedschap en pop-upmenu Vergroting instellen Hiermee kunt u een vergroting voor het document instellen.

Pop-upmenu Venstergrootte (Alleen zichtbaar in de ontwerpweergave.) Hiermee kunt u de grootte van het

documentvenster veranderen in vooraf ingestelde of aangepaste afmetingen.

Documentgrootte en downloadtijd Hiermee geeft u de documentgrootte en downloadtijd voor de pagina weer, inclusief

alle afhankelijke bestanden, zoals afbeeldingen en andere mediabestanden.

Zie ook

“Venstergrootte en verbindingssnelheid instellen” op pagina 25

“In- en uitzoomen” op pagina 215

“De grootte van het documentvenster wijzigen” op pagina 24

“Voorkeuren voor downloadtijd en -grootte instellen” op pagina 216

Overzicht van de invoegbalk

De invoegbalk bevat knoppen voor het maken en invoegen van objecten zoals tabellen, AP-elementen en afbeeldingen. Als

u de aanwijzer over een knop rolt, wordt knopinfo weergegeven met de naam van de knop.

A B C D E F G

DREAMWEAVER CS3

Handboek

De knoppen zijn in verschillende categorieën onderverdeeld. Klik op de tabs langs de invoegbalk om van categorie te

veranderen. Aanvullende categorieën worden weergegeven wanneer het huidige document servercode bevat, zoals ASP- of

CFML-documenten. Wanneer u Dreamweaver start, wordt de laatst gebruikte categorie geopend.

Sommige categorieën bevatten knoppen met pop-upmenu's. Wanneer u een optie in een pop-upmenu selecteert, wordt dit

de standaardactie voor de knop. Als u bijvoorbeeld in het pop-upmenu van de knop Afbeelding de optie Tijdelijke

aanduiding voor afbeelding selecteert, voegt Dreamweaver een tijdelijke aanduiding voor een afbeelding in wanneer u de

volgende keer op de knop Afbeelding klikt. Telkens wanneer u in het pop-upmenu een nieuwe optie selecteert, verandert

de standaardactie voor de knop.

De invoegbalk is in de volgende categorieën onderverdeeld:

De categorie Algemeen Hiermee kunt u de meest algemeen gebruikte objecten, zoals afbeeldingen en tabellen, maken en

invoegen.

De categorie Indeling Hiermee kunt u tabellen, div-tags, frames en Spry-objecten invoegen. U kunt ook uit twee

weergaven voor tabellen kiezen: Standaard (standaard) en Uitgebreide tabellen.

De categorie Formulieren Deze categorie bevat knoppen voor het maken van formulieren en voor het invoeren van

formulierelementen, waaronder Spry-validatieobjecten.

De categorie Gegevens Hiermee kunt u Spry-gegevensobjecten en andere dynamische elementen invoegen, zoals

recordsets, herhaalde gebieden en formulieren voor het invoegen en bijwerken van records.

De categorie Spry Deze categorie bevat knoppen voor het bouwen van Spry-pagina's, met Spry-gegevensobjecten en Spry-

objecten.

De categorie Tekst Hiermee kunt u diverse tekst- en lijstopmaaktags invoegen, zoals b, em, p, h1 en ul.

De categorie Favorieten Hiermeekuntudeknoppenopdeinvoegbalkdieuhetmeestgebruiktopééngemeenschappelijke

plaats groeperen en organiseren.

Server-codecategorieën Deze categorieën zijn alleen beschikbaar voor pagina's die een bepaalde servertaal gebruiken,

waaronder ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP en PHP. Deze categorieën bevatten elk

servercode-objecten die u in de codeweergave kunt invoegen.

Zie ook

“De invoegbalk gebruiken” op pagina 26

“Spry-pagina's visueel opbouwen” op pagina 428

DREAMWEAVER CS3

Handboek

Overzicht van de werkbalk Codering

De werkbalk Codering bevat knoppen waarmee u veel standaardcodeerbewerkingen kunt uitvoeren, zoals het

samenvouwen en uitvouwen van codeselecties, het markeren van ongeldige code, het toepassen en verwijderen van

commentaren, het laten inspringen van code en het invoegen van onlangs gebruikte codefragmenten. De werkbalk

Codering is alleen zichtbaar in de codeweergave en staat verticaal langs de linkerzijde van het documentvenster.

U kunt de werkbalk Codering niet losmaken uit het dok of verplaatsen, maar u kunt deze wel verbergen.

U kunt de werkbalk Codering ook bewerken door knoppen toe te voegen (zoals Tekstterugloop, Verborgen tekens

weergeven en Automatisch inspringen), of knoppen die u niet wilt gebruiken, te verbergen. Daartoe moet u echter het

XML-bestand bewerken dat de werkbalk genereert. Zie Dreamweaver uitbreiden voor meer informatie.

Zie ook

“Werkbalken weergeven” op pagina 26

“Code invoegen met de werkbalk Codering” op pagina 302

Overzicht Werkbalk Stijl renderen

De werkbalk Stijl renderen (die standaard is verborgen) bevat knoppen waarmee u kunt zien hoe een ontwerp er in

verschillende mediatypen uitziet als u media-afhankelijke stijlpagina's hebt gebruikt. De balk bevat ook een knop waarmee

u CSS-stijlen kunt in- en uitschakelen. Als u de werkbalk wilt weergeven, selecteert u Beeld > Werkbalken > Stijl renderen.

Deze werkbalk werkt alleen als uw documenten media-afhankelijke stijlpagina's bevatten. De stijlpagina zou bijvoorbeeld

een inhoudsregel kunnen bevatten voor afdrukmedia en een andere inhoudsregel voor draagbare apparatuur. Zie de

website van het World Wide Web Consortium op www.w3.org/TR/CSS21/media.html voor meer informatie over het

maken van media-afhankelijke stijlpagina's.

Standaard geeft Dreamweaver uw ontwerp weer voor het schermmediatype (waarbij u ziet hoe een pagina wordt

weergegeven op een computerscherm). U kunt de volgende mediatypeweergaven weergeven door op de desbetreffende

knoppen op de werkbalk Stijl renderen te klikken.

Schermmediatype weergeven Bij dit type ziet u hoe de pagina er op een computerscherm uitziet.

Afdrukmediatype weergeven Bij dit type ziet u hoe de pagina er uitziet als deze op papier wordt afgedrukt.

DREAMWEAVER CS3

Handboek

Handheld-mediatype weergeven Bij dit type ziet u hoe de pagina er uitziet op een draagbaar apparaat, bijvoorbeeld een

mobiele telefoon of een BlackBerry-apparaat.

Projectiemediatype weergeven Bij dit type ziet u hoe de pagina er op een projectieapparaat uitziet.

TTY-mediatype weergeven Bij dit type ziet u hoe de pagina er op een teletype-apparaat uitziet.

TV-mediatype weergeven Bij dit type ziet u hoe de pagina er op een televisiescherm uitziet.

Weergave CSS-stijlen schakelen Hiermee kunt u CSS-stijlen in- of uitschakelen. Deze knop werkt onafhankelijk van de

andere mediaknoppen.

Zie www.adobe.com/go/vid0156_nl voor een zelfstudie over het ontwerpen van stijlpagina's voor afdruk- en handheld-

apparaten.

Zie ook

“Werkbalken weergeven” op pagina 26

Overzicht van de eigenschappencontrole

Met de eigenschappencontrole kunt u de meest voorkomende eigenschappen voor het momenteel geselecteerde pagina-

element, zoals tekst of een ingevoegd object, onderzoeken en bewerken. De inhoud van de eigenschappencontrole hangt

af van het geselecteerde element. Als u bijvoorbeeld een afbeelding op uw pagina selecteert, verandert de

eigenschappencontrole en worden de eigenschappen voor de afbeelding weergegeven, zoals het bestandspad naar de

afbeelding, de breedte en hoogte van de afbeelding, de rand rond de afbeelding, enzovoort).

De eigenschappencontrole bevindt zich standaard in de benedenhoek van de werkruimte, maar u kunt deze ook aan de

bovenrand van de werkruimte dokken of er een zwevend paneel van maken.

Zie ook

“Panelen en paneelgroepen in een dok plaatsen of laten zweven” op pagina 30

“De eigenschappencontrole gebruiken” op pagina 28

DREAMWEAVER CS3

Handboek

Overzicht van het bestandenpaneel

Gebruik het paneel Bestanden om de bestanden in de Dreamweaver-site te bekijken en te beheren.

Wanneer u sites, bestanden of mappen in het paneel Bestanden weergeeft, kunt u de grootte van het weergavegebied

veranderen en het paneel Bestanden uitvouwen of samenvouwen. Wanneer het paneel Bestanden is samengevouwen, wordt

de inhoud van de lokale site, de externe site of de testserver als een lijst met bestanden weergegeven. Wanneer het paneel is

uitgevouwen, worden de lokale site en de externe site of de testserver weergegeven. Het paneel Bestanden kan ook een

visueel site-overzicht van de lokale site weergeven.

Voor Dreamweaver-sites kunt u het paneel Bestanden ook aanpassen door de weergave te wijzigen—uw lokale of externe

site—die standaard in het samengevouwen paneel wordt weergegeven.

Zie ook

“Werken met bestanden in het bestandenpaneel” op pagina 77

DREAMWEAVER CS3

Handboek

Overzicht van het paneel CSS-stijlen

Met het paneel CSS-stijlen kunt u de CSS-regels en -eigenschappen volgen die van invloed zijn op het geselecteerde pagina-

element (modus Huidig), of de regels en eigenschappen die van invloed zijn op het gehele document (modus Alles). Met

een knop boven aan het paneel CSS-stijlen kunt u schakelen tussen de twee modi. Via het paneel CSS-stijlen kunt u ook

CSS-eigenschappen wijzigen in zowel de modus Alles als de modus Huidig.

U kunt het formaat van elk van de deelvensters wijzigen door de randen tussen de deelvensters te slepen.

In de modus Huidig bestaat het paneel CSS-stijlen uit drie deelvensters: een deelvenster Samenvatting voor selectie waarin

de CSS-eigenschappen voor de huidige selectie in het document worden weergegeven, een deelvenster Regels waarin de

locatie van geselecteerde eigenschappen (of een trapsgewijze versie van regels voor de geselecteerde tag, afhankelijk van uw

selectie) wordt weergegeven, en een deelvenster Eigenschappen waarin u CSS-eigenschappen kunt bewerken voor de regel

die de selectie definieert.

In de modus Alles bestaat het paneel CSS-stijlen uit twee deelvensters: een deelvenster Alle regels (bovenaan) en een

deelvenster Eigenschappen (onderaan). Het deelvenster Alle regels geeft een lijst van regels weer, zowel die welke zijn

gedefinieerd in het huidige document, als alle regels die zijn gedefinieerd in aan het huidige document gekoppelde

stijlpagina's. In het deelvenster Eigenschappen kunt u CSS-eigenschappen bewerken van elke regel die wordt geselecteerd

in het deelvenster Alle regels.

Alle wijzigingen die u aanbrengt in het deelvenster Eigenschappen, worden onmiddellijk toegepast, waardoor u een

voorbeeld van uw werk kunt zien terwijl u doorwerkt.

Zie ook

“CSS maken en beheren” op pagina 121

Overzicht van zichtbare hulplijnen

Dreamweaver beschikt over verschillende soorten visuele hulplijnen om u te helpen bij het ontwerpen van uw documenten

en om te kunnen inschatten hoe de documenten in browsers worden weergegeven. U kunt dat op een van de volgende

manieren doen:

• U kunt het documentvenster meteen vastklikken op een gewenste venstergrootte om te zien hoe de elementen op de

pagina passen.

• Gebruik een overtrekafbeelding om een ontwerp te dupliceren dat is gemaakt in een illustratie- of

beeldbewerkingstoepassing zoals Adobe® Photoshop® of Adobe® Fireworks®.

DREAMWEAVER CS3

Handboek

• Gebruik linialen en hulplijnen als visueel hulpmiddel om de pagina-elementen exact te positioneren en de grootte ervan

in te stellen.

• Gebruik het raster om AP-elementen (elementen met absolute positie) exact te positioneren en de grootte ervan in te

stellen.

Met rastermarkeringen op de pagina kunt u AP-elementen makkelijker uitlijnen, en wanneer vastklikken is ingeschakeld,

worden AP-elementen automatisch aan het dichtstbij gelegen rasterpunt vastgeklikt wanneer ze worden verplaatst of

wanneer de grootte verandert. (Andere objecten, zoals afbeeldingen en alinea's, worden niet aan het raster vastgeklikt.)

Vastklikken werkt ongeacht of het raster zichtbaar is.

Zie ook

“Visuele lay-outhulpmiddelen gebruiken” op pagina 166

GoLive-gebruikers

Als u eerder met GoLive hebt gewerkt en nu wilt overstappen op Dreamweaver, vindt u een online inleiding over de

werkruimte en werkwijze van Dreamweaver, evenals een uiteenzetting over de manieren waarop u uw sites naar

Dreamweaver kunt migreren. Voor meer informatie gaat u naar www.adobe.com/go/learn_dw_golive_nl.

Werken in het documentvenster

Schakelen tussen weergaven in het documentvenster

U kunt een document weergeven in het documentvenster in de codeweergave, de ontwerpweergave of in de code- en de

ontwerpweergave.

Zie ook

“Overzicht van het documentvenster” op pagina 15

Overschakelen naar de codeweergave

❖

Voer een van de volgende handelingen uit:

• Selecteer Beeld > Code.

• Klik in de werkbalk Document op de knop Codeweergave tonen

Overschakelen naar de ontwerpweergave

❖

Voer een van de volgende handelingen uit:

• Selecteer Beeld > Ontwerp.

• Klik in de werkbalk Document op de knop Ontwerpweergave tonen

Zowel de code- als de ontwerpweergave tonen

❖

Voer een van de volgende handelingen uit:

• Selecteer Beeld > Code en ontwerp.

• Klik in de werkbalk Document op de knop Code- en ontwerpweergaven tonen

Schakelen tussen de codeweergave en de ontwerpweergave

❖

Druk op Ctrl+aanhalingsteken sluiten (`).

Als beide weergaven worden weergegeven in het documentvenster, verlegt u met deze sneltoets de focus van de ene

weergave naar de andere.

DREAMWEAVER CS3

Handboek

Documentvensters trapsgewijs of naast elkaar weergeven

Als u veel documenten tegelijk hebt geopend, kunt u ze trapsgewijs of naast elkaar weergeven.

Zie ook

“De indeling van de werkruimte kiezen (Windows)” op pagina 32

“Documenten met tabs weergeven (Macintosh)” op pagina 33

“Aangepaste werkruimte-indelingen opslaan” op pagina 33

Documentvensters trapsgewijs weergeven

❖

Selecteer Venster > Trapsgewijs.

Documentvensters naast elkaar weergeven

• (Windows) Selecteer Venster > Naast elkaar weergeven of Venster > Onder elkaar weergeven.

• (Macintosh) Selecteer Venster > Naast elkaar.

De grootte van het documentvenster wijzigen

In de statusbalk worden de huidige afmetingen (in pixels) van het documentvenster weergegeven. Als u een pagina wilt

ontwerpen die er bij een bepaalde grootte goed uitziet, kunt u het documentvenster aanpassen aan een van de vooraf

ingestelde formaten, die vooraf ingestelde formaten wijzigen of formaten maken.

Het formaat van het documentvenster wijzigen in een vooraf ingestelde grootte

❖

Selecteer een van de formaten uit het pop-upmenu Venstergrootte onderaan in het documentvenster.

Opmerking: (Alleen Windows) U kunt een documentvenster maximaliseren zodat het venster het volledige documentgebied

van het geïntegreerde venster vult. U kunt de grootte van een documentvenster niet wijzigen als het is gemaximaliseerd.

Het weergegeven vensterformaat komt overeen met de binnenmaten van het browservenster, zonder raden. De grootte van

het scherm staat tussen haakjes. U gebruikt bijvoorbeeld het formaat "536 x 196 (640 x 480, Standaard)" als uw bezoekers

waarschijnlijk Microsoft Internet Explorer of Netscape Navigator in de standaardconfiguratie op een beeldscherm van 640

x 480 gebruiken.

Als u de grootte niet zo nauwkeurig hoeft te wijzigen, kunt u de standaardmethoden voor het wijzigen van het formaat van

schermen van uw besturingssysteem gebruiken, bijvoorbeeld door de rechterbenedenhoek van een venster te slepen.

De waarden wijzigen uit het pop-upmenu Venstergrootte

1 Selecteer Grootten bewerken in het pop-upmenu Venstergrootte.

2 Klik op een van de breedte- of hoogtewaarden in de lijst Venstergrootte en typ een nieuwe waarde.

Als u het documentvenster alleen een specifieke breedte wilt geven (en de hoogte ongewijzigd wilt laten), selecteert u een

hoogtewaarde en verwijdert u deze.

3 Klik op het tekstvak Beschrijving om een beschrijvende tekst bij een bepaalde grootte in te voeren.

DREAMWEAVER CS3

Handboek

Een nieuw formaat toevoegen aan het pop-upmenu Venstergrootte

1 Selecteer Grootten bewerken in het pop-upmenu Venstergrootte.

2 Klik op de lege ruimte onder de laatste waarde in de kolom Breedte.

3 Voer waarden in voor Breedte en Hoogte.

Als u alleen de Breedte of Hoogte wilt instellen, laat u het andere veld leeg.

4 Klik op het veld Beschrijving om een beschrijvende tekst bij het toegevoegde formaat op te geven.

U kunt bijvoorbeeld SVGA of gemiddelde pc typen naast de vermelding voor een beeldscherm van 800 x 600 pixels, of 17

inch. Mac naast de vermelding voor een beeldscherm van 832 x 624 pixels. De meeste beeldschermen kunnen worden

aangepast aan verschillende pixelafmetingen.

Venstergrootte en verbindingssnelheid instellen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Statusbalk in de lijst Categorie aan de linkerkant.

3 Stel vervolgens de volgende opties naar wens in:

Venstergrootten Hiermee kunt u de venstergrootten aanpassen die worden weergegeven in het pop-upmenu van de

statusbalk.

Verbindingssnelheid Hiermee bepaalt u de verbindingssnelheid (in kilobits per seconde) die wordt gebruikt voor het

berekenen van de downloadgrootte. De downloadgrootte van de pagina wordt weergegeven in de statusbalk. Als er een

afbeelding is geselecteerd in het documentvenster, wordt de downloadgrootte van de afbeelding weergegeven in de

eigenschappencontrole.

Zie ook

“Statusbalk, overzicht” op pagina 17

“De grootte van het documentvenster wijzigen” op pagina 24

Rapporten in Dreamweaver

U kunt in Dreamweaver rapporten uitvoeren om te zoeken naar inhoud, problemen op te lossen of inhoud te testen. U kunt

de volgende typen rapporten genereren:

Zoeken Hiermee kunt u zoeken naar tags, kenmerken en specifieke tekst binnen tags.

Validatie Hiermee kunt u controleren op code- of syntaxisfouten.

Doelbrowsercontrole Hiermee kunt u de HTML in uw documenten testen om te zien of deze tags of kenmerken bevat die

niet worden ondersteund door uw doelbrowsers.

Koppelingencontrole Hiermee kunt u verbroken, externe en zwevende koppelingen zoeken en herstellen.

Siterapporten Hiermee kunt u de workflow verbeteren en HTML-kenmerken in uw site testen. In workflowrapporten

vindt u informatie over door wie uitgecheckt, recent gewijzigd en ontwerpnotities. HTML-rapporten bevatten informatie

over combineerbare lettertypetags, toegankelijkheid, ontbrekende Alt-tekst, overbodige geneste tags, verwijderbare lege

tags en documenten zonder naam.

FTP-logboek Hiermee kunt u alle activiteiten weergeven die plaatsvinden tijdens de bestandsoverdracht via FTP.

Fouten op de server opsporen Hiermee kunt u informatie weergeven om fouten op te sporen in een Macromedia®

ColdFusion® van een Adobe®-toepassing.

Zie ook

“Zoeken naar tags, kenmerken of tekst in code” op pagina 306

“Uw site testen” op pagina 101

DREAMWEAVER CS3

Handboek

“Tags valideren” op pagina 313

“Controleren op browsercompatibiliteit” op pagina 313

“Zoeken naar verbroken, externe en zwevende koppelingen” op pagina 282

“Bestanden op een externe server plaatsen” op pagina 85

“Bestanden van een externe server ophalen” op pagina 84

“De ColdFusion-foutopsporing gebruiken (alleen Windows)” op pagina 315

Werkbalken, knoppen, contextmenu's en panelen

gebruiken

Werkbalken weergeven

Met de werkbalken Document en Standaard kunt u bewerkingen die betrekking hebben op documenten of

standaardbewerkingen uitvoeren. Met de werkbalk Codering kunt u snel code invoegen en met de werkbalk Stijl renderen

kunt u uw pagina weergeven zoals deze er uitziet in verschillende mediatypen. U kunt de werkbalken naar behoefte

weergeven of verbergen.

• Selecteer Beeld > Werkbalken en selecteer de werkbalk.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op een van de werkbalken

en selecteer de werkbalk uit het contextmenu.

Opmerking: Als u de werkbalk Codering wilt weergeven in de codecontrole (Venster > Codecontrole), selecteert u de Codering

werkbalk in het pop-upmenu Weergaveopties bovenaan in de codecontrole.

Zie ook

“Overzicht van de werkbalk Document” op pagina 16

“Overzicht van de standaardwerkbalk” op pagina 17

“Overzicht van de werkbalk Codering” op pagina 19

“Overzicht Werkbalk Stijl renderen” op pagina 19

De invoegbalk gebruiken

De invoegbalk bevat knoppen voor het maken en invoegen van objecten zoals tabellen en afbeeldingen. De knoppen zijn

georganiseerd in categorieën.

Zie ook

“Overzicht van de invoegbalk” op pagina 17

“Tags bewerken met tageditors” op pagina 305

“Elementen selecteren en weergeven in het documentvenster” op pagina 211

De invoegbalk verbergen of weergeven

• Selecteer Venster > Invoegen.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op de invoegbalk of op de

werkbalk Document, Standaard of Codering en selecteer vervolgens Invoegbalk.

Opmerking: Als u met bepaalde bestandstypen werkt, zoals XML, JavaScript, Java en CSS, worden de invoegbalk en de optie

voor de ontwerpweergave grijs weergegeven, omdat u in deze codebestanden geen items kunt invoegen.

DREAMWEAVER CS3

Handboek

De knoppen in een bepaalde categorie weergeven

❖

Klik op de categorienamen boven aan de invoegbalk.

Het pop-upmenu voor een knop weergeven

❖

Klik op de pijl-omlaag naast het pictogram van de knop.

invoegbalkcategorieën weergeven als een menu:

❖

Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op een categorietab op

de invoegbalk en kies de opdracht Weergeven als menu.

Invoegbalkcategorieën weergeven als tabs

❖

Klik op de pijl naast de categorienaam aan de linkerkant van de invoegbalk en selecteer vervolgens de optie voor het

weergeven als tabs.

Een object invoegen

1 Selecteer de desbetreffende categorie aan de linkerkant van de invoegbalk.

2 Voer een van de volgende handelingen uit:

• Klik op een objectknop of sleep het pictogram van de knop naar het documentvenster.

• Klik op de pijl op een knop en selecteer een optie in het menu.

Afhankelijk van het object wordt mogelijk een dialoogvenster voor het invoegen van objecten weergegeven, waarin u wordt

gevraagd naar een bestand te bladeren of parameters voor een object op te geven. Het is ook mogelijk dat Dreamweaver

code in het document invoegt, of een tageditor of paneel opent waarin u informatie kunt opgeven voordat de code wordt

ingevoegd.

Voor sommige objecten wordt geen dialoogvenster weergegeven als u het object invoegt in de ontwerpweergave, maar

wordt een tageditor weergegeven als u het object invoegt in de codeweergave. Wanneer u sommige objecten in de

ontwerpweergave invoegt, schakelt Dreamweaver naar de codeweergave voordat het object wordt ingevoegd.

Opmerking: Sommige objecten, zoals benoemde ankers, zijn niet zichtbaar als de pagina wordt weergegeven in een

browservenster. In de ontwerpweergave kunt u pictogrammen weergeven die de locaties van dergelijke onzichtbare objecten

markeren.

Het dialoogvenster voor het invoegen van objecten omzeilen en een leeg plaatsvervangend object invoegen

❖

Houd Control (Windows) of Option (Macintosh) ingedrukt terwijl u op de knop voor het object klikt.

Als u bijvoorbeeld een voorlopige afbeelding wilt invoegen zonder een afbeeldingsbestand op te geven, houdt u Control of

Option ingedrukt terwijl u op de knop Afbeelding klikt.

Opmerking: Met deze procedure kunt u niet alle dialoogvensters voor het invoegen van objecten omzeilen. Voor veel objecten,

zoals navigatiebalken, AP-elementen, Flash-knoppen en framesets, worden geen tijdelijke objecten of objecten met een

standaardwaarde ingevoegd.

Voorkeuren voor de invoegbalk wijzigen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

DREAMWEAVER CS3

Handboek

2 Ga naar de categorie Algemeen van het dialoogvenster Voorkeuren en schakel Dialoogvenster tonen bij het invoegen

van objecten uit om te voorkomen dat er dialoogvensters worden weergegeven wanneer u objecten invoegt zoals

afbeeldingen, tabellen, scripts en kopelementen. U kunt ook Ctrl (Windows) of Option (Macintosh) ingedrukt houden

terwijl u het object maakt.

Als u een object invoegt terwijl deze optie is uitgeschakeld, krijgt het object de standaardwaarden van het kenmerk. Gebruik

de eigenschappencontrole om objecteigenschappen te wijzigen nadat u het object hebt ingevoegd.

Items in de categorie Favorieten van de invoegbalk toevoegen, verwijderen of beheren

1 Selecteer een categorie op de invoegbalk.

2 Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) in het gebied waar de

knoppen worden weergegeven (klik niet met de rechtermuisknop op de categorienaam) en selecteer vervolgens de optie

voor het aanpassen van objecten.

3 Breng de gewenste wijzigingen aan en klik op OK. Als u zich niet in de categorie Favorieten bevindt, selecteert u die

categorie om uw wijzigingen te zien.

• Als u een object wilt toevoegen, selecteert u een object in het paneel Beschikbare objecten aan de linkerkant en klikt u

op de pijl tussen de twee panelen, of dubbelklikt u op het object in het paneel Beschikbare objecten.

Opmerking: U kunt één object tegelijk toevoegen. U kunt geen categorienaam, zoals Algemeen, selecteren om een hele categorie

toe te voegen aan uw lijst met favorieten.

• Als u een object of scheidingsteken wilt verwijderen, selecteert u een object in het paneel Favoriete objecten aan de

rechterkant en klikt u op de knop Verwijder het geselecteerde object uit de lijst Favoriete objecten boven het paneel.

• Als u een object wilt verplaatsen, selecteert u een object in het paneel Favoriete objecten aan de rechterkant en klikt u

vervolgens op de pijl Omhoog of Omlaag boven het paneel.

• Als u een scheidingsteken onder een object wilt plaatsen, selecteert u een object in het paneel Favoriete objecten aan de

rechterkant en klikt u vervolgens op de knop Scheidingsteken toevoegen onder het paneel.

Objecten invoegen met knoppen in de categorie Favorieten

❖

Selecteer de categorie Favorieten van de linkerkant van de invoegbalk en klik vervolgens op de knop voor een van de

favoriete objecten die u hebt toegevoegd.

De eigenschappencontrole gebruiken

Met de eigenschappencontrole kunt u de meest voorkomende eigenschappen voor het momenteel geselecteerde pagina-

element, zoals tekst of een ingevoegd object, onderzoeken en bewerken. De inhoud van de eigenschappencontrole hangt

af van het geselecteerde element.

Opmerking: Gebruik de tagcontrole om de kenmerken die aan de eigenschappen van een bepaalde tag zijn gekoppeld, weer te

geven en te bewerken.

Zie ook

“Overzicht van de eigenschappencontrole” op pagina 20

“Panelen en paneelgroepen in een dok plaatsen of laten zweven” op pagina 30

“Kenmerken wijzigen met de tagcontrole” op pagina 317

De eigenschappencontrole weergeven of verbergen

❖

Selecteer Venster > Eigenschappen.

De eigenschappencontrole uitvouwen of samenvouwen

❖

Klik op de uitvouwpijl in de rechterbenedenhoek van de eigenschappencontrole.

DREAMWEAVER CS3

Handboek

Eigenschappen voor een pagina-element weergeven en wijzigen

1 Selecteer het pagina-element in het documentvenster.

U moet mogelijk de eigenschappencontrole uitvouwen om alle eigenschappen voor het geselecteerde element te kunnen

zien.

2 Wijzig de gewenste eigenschappen in de eigenschappencontrole.

Opmerking: Voor informatie over specifieke eigenschappen selecteert u een element in het documentvenster en klikt u op het

pictogram Help in de rechterbovenhoek van de eigenschappencontrole.

3 Als uw wijzigingen niet onmiddellijk in het documentvenster worden toegepast, gaat u op een van de volgende manieren

te werk om de wijzigingen toe te passen:

• Klik buiten de tekstvelden voor het bewerken van eigenschappen.

• Druk op Enter (Windows) of Return (Macintosh).

• Druk op Tab om naar een andere eigenschap te gaan.

Contextmenu's gebruiken

Via contextmenu's hebt u snel toegang tot de meest gebruikte opdrachten en eigenschappen die betrekking hebben op het

object of venster waarmee u werkt. Contextmenu's bevatten alleen de opdrachten die betrekking hebben op de huidige

selectie.

1 Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt op het object of venster.

2 Selecteer een opdracht in het contextmenu.

Over paneelgroepen

Panelen in Dreamweaver worden gegroepeerd in paneelgroepen. Het geselecteerde paneel binnen een paneelgroep wordt

weergegeven als een tab. Elke paneelgroep kan worden uitgevouwen of samengevouwen en kan samen met andere

paneelgroepen in een dok worden geplaatst of zwevend worden gemaakt.

DREAMWEAVER CS3

Handboek

Paneelgroepen kunnen ook worden gedokt in het geïntegreerde toepassingsvenster (alleen Windows). Hierdoor kunt u

gemakkelijker de panelen gebruiken die u nodig hebt zonder dat de werkruimte vol raakt.

Opmerking: Als een paneelgroep zweeft (niet in een dok is geplaatst), wordt bovenaan in de paneelgroep een smalle lege balk

weergegeven. In deze documentatie wordt met de term "titelbalk van de paneelgroep" verwezen naar het gebied waarin de

naam van de paneelgroep wordt weergegeven, en dus niet naar deze smalle lege balk.

Panelen en paneelgroepen weergeven

U kunt paneelgroepen en panelen naar wens weergeven of verbergen in de werkruimte.

Een paneelgroep uitvouwen of samenvouwen

• Klik op de uitvouwpijl aan de linkerkant van de titelbalk van de paneelgroep .

• Klik op de titel van de paneelgroep als u de paneelgroep wilt samenvouwen.

Een paneelgroep sluiten zodat deze niet meer zichtbaar is op het scherm

❖

Selecteer Paneelgroep sluiten in het menu Opties in de titelbalk van de paneelgroep.

Een paneelgroep of paneel openen die niet zichtbaar is op het scherm

❖

Selecteer een paneelnaam in het menu Venster.

Een vinkje naast een item in het menu Venster geeft aan dat het benoemde item momenteel is geopend (hoewel het

verborgen kan zijn achter andere vensters).

Als u een paneel, controlevenster of ander venster dat is gemarkeerd als geopend niet kunt vinden, selecteert u Venster >

Panelen schikken om alle geopende panelen naast elkaar weer te geven.

Alle paneelgroepen verbergen

❖

Selecteer Venster > Panelen verbergen.

Een paneel binnen een uitgevouwen paneelgroep selecteren

❖

Klik op de naam van het paneel.

Het menu Opties van een paneelgroep weergeven als dat niet wordt weergegeven

❖

Vouw de paneelgroep uit door op de naam of de uitvouwpijl van de paneelgroep te klikken.

Het menu Opties is alleen zichtbaar als de paneelgroep is uitgevouwen.

Sommige opties zijn ook beschikbaar in het contextmenu van de paneelgroep als de groep is samengevouwen. Klik met de

rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op de titelbalk van de paneelgroep om

het contextmenu weer te geven.

Panelen en paneelgroepen in een dok plaatsen of laten zweven

U kunt panelen en paneelgroepen naar wens verplaatsen en ze zo rangschikken dat ze zweven of in een dok worden

geplaatst in de werkruimte.

De meeste panelen kunnen alleen aan de linkerkant of de rechterkant van het documentvenstergebied in de geïntegreerde

werkruimte worden gedokt, terwijl andere (zoals de eigenschappencontrole en de invoegbalk) alleen langs de boven- of

onderrand van het geïntegreerde versie kunnen worden gedokt.

Opmerking: U kunt het paneel Bestanden zwevend maken in de uitgevouwen modus. Klik op de knop

Uitvouwen/samenvouwen—de meest rechtse knop bovenaan in het paneel—om het paneel Bestanden samen te vouwen

voordat u het zwevend maakt. Als u het paneel Bestanden sluit terwijl het zweeft, verdwijnt het uit de interface. U kunt het

terughalen door op F8 te drukken of door Venster > Bestanden te selecteren.

DREAMWEAVER CS3

Handboek

Een paneelgroep uit het dok halen

❖

Sleep de paneelgroep met de greep (aan de linkerkant van de titelbalk van de paneelgroep) totdat de omtrek aangeeft

dat de paneelgroep niet meer in een dok is geplaatst.

Opmerking: Als u de eigenschappencontrole zwevend maakt, wordt de opmaak ervan gewijzigd. Het venster heeft dan geen

greepbalk en titelbalk meer, maar u kunt op een willekeurige plaats in het paneel klikken om het te slepen of weer in een dok te

plaatsen.

Een paneel of paneelgroep minimaliseren of het formaat ervan herstellen

❖

Klik op de onderstreepte paneeltitel om een paneel te minimaliseren. Klik nogmaals als u de volledige grootte wilt

herstellen.

Een paneel of paneelgroep weer in een dok plaatsen

❖

Sleep de paneelgroep bij de titelbalk naar de linker- of rechterzijde van de werkruimte tot u een zwarte omtrek ziet. Laat

de muisknop dan los. Misschien moet u omhoog slepen om de zwarte omtrek te zien zodat u het paneel kunt toevoegen

aan de reeks panelen die al worden weergegeven.

Opmerking: Sommige panelen, zoals de eigenschappencontrole en Resultaten, moeten boven of onder het documentvenster

worden gedokt, dus niet links of rechts.

Een paneelgroep in een dok plaatsen met andere paneelgroepen (zwevende werkruimte) of in het geïntegreerde

venster (alleen Windows)

❖

Sleep de paneelgroep met de greep totdat de omtrek aangeeft dat de groep in een dok is geplaatst.

Een paneel uit het dok van een paneelgroep verwijderen

❖

Selecteer Groeperen met > Nieuwe paneelgroep in het menu Opties in de titelbalk van de paneelgroep.

U kunt een paneel ook uit een dok verwijderen door het uit de paneelgroep te slepen.

Een paneel in het dok van een andere paneelgroep plaatsen

1 Selecteer het paneel dat u wilt verplaatsen door op de tab van het paneel te klikken.

2 Selecteer de doelpaneelgroep in het vervolgmenu Groeperen met van het menu Opties van de paneelgroep.

De naam van de opdracht Groeperen met varieert afhankelijk van de naam van het actieve paneel.

Een zwevende paneelgroep (die niet in een dok is geplaatst) slepen zonder deze in een dok te plaatsen

❖

Sleep de paneelgroep met de balk boven de titelbalk.

Als u een paneelgroep niet sleept met de greep, wordt deze niet in een dok geplaatst.

De grootte en naam van paneelgroepen wijzigen

U kunt het formaat en de naam van paneelgroepen naar wens wijzigen.

De grootte van de paneelgroepen wijzigen

• Voor zwevende panelen wijzigt u het formaat van de set paneelgroepen via slepen, net zoals u zou doen met andere

vensters in uw besturingssysteem.

U kunt bijvoorbeeld het formaatgebied in de rechterbenedenhoek van de set paneelgroepen slepen.

DREAMWEAVER CS3

Handboek

• Voor panelen in een dok sleept u de splitsbalk tussen de panelen en het documentvenster.

Een paneelgroep maximaliseren

• Selecteer Paneelgroep maximaliseren in het menu Opties in de titelbalk van de paneelgroep .

• Dubbelklik ergens in de titelbalk van de paneelgroep.

De naam van een paneelgroep wijzigen

1 Selecteer Naam van paneelgroep wijzigen in het menu Opties in de titelbalk van de paneelgroep.

2 Voer een nieuwe naam in en klik op OK.

Paneelgroepen opslaan

In Dreamweaver kunt u verschillende paneelgroepen opslaan en herstellen zodat u uw werkruimte kunt aanpassen voor

verschillende activiteiten. Als u een werkruimte-indeling opslaat, onthoudt Dreamweaver welke panelen in de specifieke

indeling staan, maar ook andere kenmerken zoals de positie en de grootte van de panelen, of ze samengevouwen of

uitgevouwen zijn, de positie en de grootte van het toepassingsvenster en de positie en de grootte van het documentvenster.

Zie ook

“Aangepaste werkruimte-indelingen opslaan” op pagina 33

De werkruimte van Dreamweaver CS3 aanpassen

De indeling van de werkruimte kiezen (Windows)

U kunt op elk gewenst moment naar een andere werkruimte overschakelen.

❖ Kies Venster > Werkruimtelay-out en selecteer van de volgende werkruimte-indelingen:

Ontwerpfunctie Dit is een geïntegreerde werkruimte met MDI (Multiple Document Interface), waarin alle

documentvensters en panelen zijn geïntegreerd in één groter toepassingsvenster, waarin alle paneelgroepen aan de

rechterkant in een dok zijn geplaatst.

Codeerfunctie Dit is dezelfde geïntegreerde werkruimte als Ontwerpfunctie, maar nu zijn de paneelgroepen aan de

linkerkant in een dok geplaatst, in een indeling die lijkt op die van Adobe® HomeSite® en ColdFusion. Bovendien wordt het

documentvenster standaard weergegeven in de codeweergave.

Opmerking: U kunt in beide indelingen de paneelgroepen aan beide kanten van de werkruimten in een dok plaatsen.

Dubbel scherm Hiermee kunt u een indeling ordenen als u een tweede beeldscherm hebt. Met deze indeling worden alle

panelen op het tweede beeldscherm geplaatst en blijven het documentvenster en de eigenschappencontrole op het eerste

beeldscherm.

De indeling van de werkruimte kiezen (Macintosh)

U kunt op elk gewenst moment naar een andere werkruimte overschakelen.

❖ Kies Venster > Werkruimtelay-out en selecteer van de volgende werkruimte-indelingen:

Standaard Een geïntegreerde werkruimte.

Dubbel scherm Hiermee kunt u een indeling ordenen als u een tweede beeldscherm hebt. Met deze indeling worden alle

panelen op het tweede beeldscherm geplaatst en blijven het documentvenster en de eigenschappencontrole op het eerste

beeldscherm.

DREAMWEAVER CS3

Handboek

Documenten met tabs weergeven (Macintosh)

U kunt meerdere documenten in een enkel documentvenster weergeven door tabs te gebruiken om elk document te

identificeren. U kunt ze ook weergeven als deel van een zwevende werkruimte, waarin elk document in een eigen venster

wordt weergegeven.

Een document met tabs openen in een afzonderlijk venster

❖

Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op de tab en selecteer

de optie voor het verplaatsen naar een nieuw venster in het contextmenu.

Afzonderlijke documenten combineren in vensters met tabs

❖

Selecteer Venster > Combineren als tabs.

De standaardinstelling voor documenten met tabs wijzigen

1 Selecteer Dreamweaver > Voorkeuren en selecteer de categorie Algemeen.

2 Schakel Documenten openen in tabs in of uit en klik op OK.

Als u de voorkeuren in Dreamweaver wijzigt, wordt de weergave van momenteel geopende documenten niet gewijzigd.

Documenten die worden geopend nadat u een nieuwe voorkeur hebt geselecteerd, worden echter weergegeven volgens de

geselecteerde voorkeur.

Aangepaste werkruimte-indelingen opslaan

In Dreamweaver kunt u verschillende paneelsets opslaan en terugzetten zodat u uw werkruimte kunt aanpassen voor

verschillende activiteiten. Als u een werkruimte-indeling opslaat, onthoudt Dreamweaver welke panelen in de specifieke

indeling staan, maar ook andere kenmerken zoals de positie en grootte van de panelen, of ze samengevouwen of

uitgevouwen zijn en de positie en grootte van het toepassingsvenster.

Zie ook

“Over paneelgroepen” op pagina 29

“De indeling van de werkruimte kiezen (Windows)” op pagina 32

Een aangepaste werkruimte-indeling opslaan

1 Rangschik de panelen op de gewenste manier.

2 Selecteer Venster > Werkruimtelay-out > Huidige opslaan.

3 Geef een naam op voor de lay-out en klik op OK.

Naar een andere aangepaste werkruimte-indeling schakelen

❖

Selecteer Venster > Werkruimtelay-out en selecteer de aangepaste lay-out.

De naam van een aangepaste werkruimte-indeling wijzigen of de indeling verwijderen

1 Selecteer Venster > Werkruimtelay-out > Beheren.

2 Selecteer een lay-out en kies een van de volgende mogelijkheden:

• Als u de naam van een lay-out wilt wijzigen, klikt u op de knop Naam wijzigen, typt u een nieuwe naam voor de lay-out

en klikt u op OK.

• Als u een lay-out wilt verwijderen, klikt u op de knop Verwijderen.

Het welkomstscherm verbergen en weergeven

Het welkomstscherm wordt weergegeven wanneer u Dreamweaver start en telkens wanneer geen documenten zijn

geopend. U kunt ervoor kiezen het welkomstscherm te verbergen en het later opnieuw weer te geven. Als het

welkomstscherm is verborgen en er geen documenten zijn geopend, is het documentvenster leeg.

DREAMWEAVER CS3

Handboek

Het welkomstscherm verbergen

❖

Schakel de optie Niet meer weergeven in het welkomstscherm in.

Het welkomstscherm weergeven

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Schakel de optie Welkomstscherm tonen in.

Over het aanpassen van Dreamweaver in systemen met meerdere gebruikers

U kunt Dreamweaver aan uw behoeften aanpassen, zelfs in een multiuser-besturingssysteem als Windows XP of Mac OS X.

Dreamweaver voorkomt dat een aangepaste configuratie van een gebruiker invloed heeft op de aangepaste configuratie van

een andere gebruiker. Hiertoe maakt Dreamweaver een kopie van een aantal configuratiebestanden wanneer u de

toepassing de eerste keer uitvoert in een van de multiuser-besturingssystemen die door de toepassing worden herkend.

Deze gebruikersconfiguratiebestanden worden opgeslagen in een map die u toebehoort.

In Windows XP bijvoorbeeld, worden ze opgeslagen in de map C:\Documents and Settings\gebruikersnaam\Application

Data\Adobe\Dreamweaver 9\Configuration (een map die zich mogelijk in een verborgen map bevindt).

In Mac OS X worden ze opgeslagen in de map Home, met name in Users/gebruikersnaam/Library/Application

Support/Adobe/Dreamweaver 9/Configuration.

Als u Dreamweaver opnieuw installeert of bijwerkt, maakt Dreamweaver automatisch reservekopieën van bestaande

gebruikersconfiguratiebestanden. Als u deze bestanden handmatig hebt aangepast, blijven de wijzigingen dus behouden.

Algemene voorkeuren instellen voor Dreamweaver

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Stel vervolgens de volgende opties naar wens in:

Documenten openen in tabs Hiermee worden alle documenten geopend in één venster met tabs, waarmee u tussen

documenten kunt schakelen (alleen Macintosh).

Welkomstscherm tonen Hiermee wordt het welkomstscherm van Dreamweaver weergegeven als u Dreamweaver start of

als u geen documenten hebt geopend.

Documenten opnieuw openen bij het opstarten Hiermee worden alle documenten geopend die open stonden op het

moment dat u Dreamweaver afsloot. Als deze optie niet is ingeschakeld, geeft Dreamweaver het welkomstscherm of een

leeg scherm weer bij het opstarten (afhankelijk van de instelling voor Welkomstscherm tonen).

Waarschuwen bij het openen van alleen-lezen bestanden Hiermee wordt u gewaarschuwd als u een alleen-lezen

(vergrendeld) bestand opent. Kies of u het bestand wilt ontgrendelen/uitchecken, het bestand wilt bekijken, of de handeling

wilt annuleren.

Koppelingen bijwerken als bestanden worden verplaatst: Hiermee bepaalt u wat er moet gebeuren als u een document

binnen uw site verplaatst, hernoemt of verwijdert. U kunt deze voorkeur zodanig instellen dat koppelingen altijd

automatisch worden bijgewerkt, dat koppelingen nooit worden bijgewerkt, of dat u wordt gevraagd om de koppelingen bij

te werken. (Zie “Koppelingen automatisch bijwerken” op pagina 275.)

Dialoogvenster tonen bij het invoegen van objecten MetdezeoptiebepaaltuofudoorDreamweaverwordtgevraagdom

aanvullende informatie op te geven als u afbeeldingen, tabellen, Shockwave-films en bepaalde andere objecten invoegt met

de invoegbalk of het menu Invoegen. Als deze optie is uitgeschakeld, wordt het dialoogvenster niet weergegeven en moet

u de eigenschappencontrole gebruiken voor het opgeven van de bron voor afbeeldingen, het aantal rijen in een tabel,

enzovoort. Voor rollover-afbeeldingen en Fireworks HTML wordt altijd een dialoogvenster weergegeven als u het object

invoegt, ongeacht de instelling van deze optie. (U kunt deze instelling tijdelijk overschrijven door Control (Windows) of

Command (Macintosh) ingedrukt te houden als u objecten maakt en invoegt.)

Inline dubbel-byte invoer inschakelen Hiermee kunt u dubbel-byte tekst rechtstreeks in het documentvenster invoeren als

u een ontwikkelomgeving of taalkit gebruikt die het werken met dubbel-byte tekst (zoals Japanse tekst) vergemakkelijkt.

Als deze optie is uitgeschakeld, wordt een tekstinvoerscherm weergegeven waarin u dubbel-byte tekst kunt invoeren en

converteren. De tekst wordt na acceptatie in het documentvenster weergegeven.

DREAMWEAVER CS3

Handboek

Na kop overschakelen naar normale alineaopmaak Hiermee geeft u aan dat er een nieuwe alinea wordt gemaakt met een p-

tag als u in de ontwerpweergave aan het einde van een kopalinea op Enter (Windows) of Return (Macintosh) drukt. (Een

kopalinea is een alinea die is gecodeerd met een koptag, zoals

h1 of h2.) Als deze optie is uitgeschakeld en u op Enter of

Return drukt aan het einde van een kopalinea, wordt een nieuwe alinea gemaakt met dezelfde koptag (zodat u meerdere

koppen na elkaar kunt typen en vervolgens de details kunt invoeren).

Meerdere opeenvolgende spaties toestaan Hiermee geeft u aan dat door het typen van twee of meer spaties in een

ontwerpweergave vaste spaties ontstaan die in een browser worden weergegeven als meerdere spaties. (U kunt dan

bijvoorbeeld twee spaties typen tussen zinnen, zoals u op een typemachine kunt doen.) Deze optie is vooral bedoeld voor

mensendiegewendzijnaantypenintekstverwerkers. Alsdezeoptieisuitgeschakeld,wordenmeerderespatiesbehandeld

als één spatie (omdat browsers meerdere spaties behandelen als één spatie).

<strong> en <em> gebruiken in plaats van <b> en <i> Hiermee geeft u aan dat Dreamweaver de tag strong moet

toepassen wanneer u een actie uitvoert waarmee normaliter de tag

b zouwordentoegepast,endatdetagem moet worden

toegepast wanneer u een actie uitvoert waarmee normaliter de tag

i zou worden toegepast. Dergelijke acties zijn

bijvoorbeeld klikken op de knop Vet of Cursief in de eigenschappencontrole voor tekst in de HTML-modus, of Tekst >

Stijl > Vet of Tekst > Stijl > Cursief kiezen Als u de tags

b en i wilt gebruiken in uw documenten, schakelt u deze optie uit.

Opmerking: Het World Wide Web Consortium raadt het gebruik van de tags b en i af. De tags strong en em bevatten meer

semantische gegevens dan de tags

b en i.

CSS gebruiken in plaats van HTML-tags Hiermee geeft u aan dat Dreamweaver CSS-stijlen moet gebruiken in plaats van

HTML-tags als u tekst opmaakt met de eigenschappencontrole. In Dreamweaver wordt tekst standaard opgemaakt met

CSS. Elke keer dat er een lettertype, tekengrootte of kleur wordt gedefinieerd voor een tekstselectie, wordt een nieuwe

document-specifieke stijl gemaakt die vervolgens beschikbaar is in het pop-upmenu Stijl van de eigenschappencontrole.

De enige uitzonderingen zijn voor vet en cursief, waarvoor Dreamweaver HTML-tags gebruikt in plaats van CSS.

Zelfs als het document gekoppeld is aan een externe stijlpagina, worden nieuwe stijldeclaraties in de kop van het document

geschreven en niet in het CSS-bestand.

Van dit algemene gedrag kan in de volgende situaties worden afgeweken:

• Als het document alles al opmaakt met font-tags, gebruikt Dreamweaver font-tagsenwordtdetagbody gewijzigd om

HTML-code te gebruiken.

• Als voor de body-tag van het document HTML is gebruikt voor het instellen van de opmaak van de pagina maar voor de

pagina niet uitsluitend

font-tags zijn gebruikt, gebruikt Dreamweaver toch CSS voor het opmaken van tekst.

Als u deze optie uitschakelt, worden in Dreamweaver HTML-tags als

font gebruikt voor het opmaken van tekst en HTML-

code in de

body-tag voor het instellen van het uiterlijk van de pagina.

Waarschuwen wanneer bewerkbare gebieden binnen de tags <p> of <h1>-<h6> worden geplaatst Hiermee geeft u aan of

eenwaarschuwingsberichtmoetwordenweergegevenalsueenDreamweaver-sjabloonopslaatdateenbewerkbaargebied

heeft binnen een alinea- of koptag. Met dit bericht wordt u gewaarschuwd dat gebruikers niet meer alinea's in het gebied

kunnen maken. Deze optie is standaard ingeschakeld.

Centreren Hiermee geeft u aan of elementen moeten worden gecentreerd met divalign="center" of de tag center als u

op de knop Centreren in de eigenschappencontrole klikt.

Opmerking: Voor deze beide benaderingen geldt dat ze vanaf de specificatie HTML 4.01 officieel verouderd zijn. U moet CSS-

stijlen gebruiken voor het centreren van tekst. Deze beide benaderingen zijn technisch nog wel geldig vanaf de specificatie

XHTML 1.0 Transitional, maar ze zijn niet meer geldig in de specificatie XHTML 1.0 Strict.

Maximumaantal historiestappen Hiermee stelt u het aantal stappen in dat het paneel Historie vasthoudt en weergeeft.

(Voor de behoeften van de meeste gebruikers is de standaardwaarde voldoende.) Als u het opgegeven aantal stappen in het

paneel Historie overschrijdt, worden de oudste stappen gewist. (Zie “Taakautomatisering” op pagina 665 voor meer

informatie.)

DREAMWEAVER CS3

Handboek

Spellingwoordenlijst hiermee worden de beschikbare spellingwoordenlijsten weergegeven. Als een woordenlijst meerdere

dialecten of spellingconventies bevat (zoals Amerikaans-Engels en Brits-Engels), worden de dialecten afzonderlijk

weergegeven in het pop-upmenu Woordenlijst.

Zie ook

“Overzicht van de indeling van de werkruimte” op pagina 13

“Koppelingen automatisch bijwerken” op pagina 275

Lettertypevoorkeuren voor documenten in Dreamweaver instellen

Met de codering van een document wordt bepaald hoe het document wordt weergegeven in een browser. Met de

lettertypevoorkeuren van Dreamweaver kunt u een bepaalde codering weergeven in het gewenste lettertype en de gewenste

tekengrootte. De lettertypen die u selecteert, hebben geen invloed op hoe het document wordt weergegeven in de browser

van een bezoeker. Zie “Documenten maken en openen” op pagina 65 voor informatie over het instellen van een

standaardcodering voor nieuwe documenten.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Lettertypen in de lijst Categorie aan de linkerkant.

3 Selecteer een coderingstype (bijvoorbeeld Westers of Japans) in de lijst Lettertype-instellingen.

Opmerking: U kunt alleen Aziatische talen weergeven als u een besturingssysteem gebruikt dat dubbel-byte lettertypen

ondersteunt.

4 Selecteer een lettertype en een tekengrootte die u voor elke categorie van de geselecteerde codering wilt gebruiken.

Opmerking: In de pop-upmenu's voor lettertypen worden alleen lettertypen weergegeven die op uw computer zijn geïnstalleerd.

Als u bijvoorbeeld een Japanse tekst wilt weergeven, moet u een Japans lettertype hebben geïnstalleerd.

Proportioneel lettertype Het lettertype dat in Dreamweaver wordt gebruikt voor het weergeven van normale tekst

(bijvoorbeeld tekst in alinea's, koppen en tabellen). De standaard is afhankelijk van de lettertypen die op uw computer zijn

geïnstalleerd. Voor de meeste Amerikaanse systemen is de standaard Times New Roman 12 pt. (Medium) op Windows en

Times 12 pt. op Mac OS.

Vast lettertype Het lettertype dat in Dreamweaver wordt gebruikt voor het weergeven van tekst binnen pre-, code-entt-

tags. De standaard is afhankelijk van de lettertypen die op uw computer zijn geïnstalleerd. Voor de meeste Amerikaanse

systemen is de standaard Courier New 10 pt. (Small) op Windows en Monaco 12 pt. op Mac OS.

Codeweergave Het lettertype dat wordt gebruikt voor alle tekst die wordt weergegeven in de codeweergave en de

codecontrole. De standaard is afhankelijk van de lettertypen die op uw computer zijn geïnstalleerd.

Zie ook

“Over het coderen van documenten” op pagina 208

Markeringskleuren aanpassen

Gebruik de markeervoorkeuren om de kleuren aan te passen waarmee sjabloongebieden, bibliotheekitems, tags van derden,

indelingselementen en code in Dreamweaver worden gemarkeerd.

Zie ook

“De kleurkiezer gebruiken” op pagina 214

“De markeringskleur van labels voor div-elementen wijzigen” op pagina 158

DREAMWEAVER CS3

Handboek

Een markeringskleur wijzigen

1 Selecteer Bewerken > Voorkeuren en selecteer de categorie Markeren.

2 Klik naast het object waarvoor u de markeringskleur wilt wijzigen op het kleurvak en gebruik vervolgens de kleurkiezer

om een nieuwe kleur te selecteren, of geef een hexadecimale waarde op.

Markering voor een object activeren of deactiveren

1 Selecteer Bewerken > Voorkeuren en selecteer de categorie Markeren.

2 Schakel naast het object waarvoor u een markeringskleur wilt activeren of deactiveren de optie Tonen in of uit.

Hoofdstuk 3: Werken met Dreamweaver-

sites

Een Adobe® Dreamweaver® CS3-site is een verzameling van alle bestanden en elementen in uw website. U kunt webpagina's

maken op uw computer, deze pagina's uploaden naar een webserver en de site onderhouden door bijgewerkte bestanden

over te brengen nadat u deze hebt opgeslagen. U kunt ook websites bewerken en onderhouden die zijn gemaakt zonder

Dreamweaver.

Een Dreamweaver-site opzetten

Over Dreamweaver-sites

Een website is een set gekoppelde documenten en elementen met gedeelde kenmerken, zoals verwante onderwerpen, een

gelijksoortig ontwerp of een gedeeld doel. Dreamweaver is een programma voor het maken en beheren van sites, dus u kunt

het gebruiken voor het maken van afzonderlijke documenten en volledige websites.

In Dreamweaver wordt met de term 'site' verwezen naar een lokale of externe opslaglocatie voor de documenten die bij een

website horen. Met een Dreamweaver-site kunt u al uw webdocumenten ordenen en beheren, uw site uploaden naar een

webserver, uw koppelingen bijhouden en onderhouden en bestanden beheren en delen. Als u de functies van Dreamweaver

optimaal wilt benutten, moet u een site definiëren.

Opmerking: Voor het definiëren van een Dreamweaver-site, hoeft u alleen maar een lokale map in te stellen. Als u bestanden

wilt overbrengen naar een webserver of als u webtoepassingen wilt ontwikkelen, moet u ook informatie toevoegen voor een

externe site en testserver.

Een Dreamweaver-site bestaat uit maximaal drie onderdelen, of mappen, afhankelijk van uw ontwikkelomgeving en het

type website dat u ontwikkelt:

Lokale hoofdmap Hierin slaat u de bestanden op waaraan u werkt. In Dreamweaver wordt deze map uw "lokale site"

genoemd. Deze map kan op uw lokale computer staan, maar ook op een netwerkserver. Als u rechtstreeks op de server

werkt, worden in Dreamweaver elke keer dat u uw werk opslaat, bestanden geüpload naar de server.

Externe map Hierin slaat u uw bestanden op voor testen, productie, samenwerking, enzovoort. In Dreamweaver wordt

deze map uw "externe site" in het paneel Bestanden genoemd. De externe map staat meestal op de computer waarop de

webserver wordt uitgevoerd.

De lokale en externe map zorgen er samen voor dat u bestanden kunt overbrengen tussen uw lokale vaste schijf en de

webserver, waardoor u gemakkelijker bestanden in uw Dreamweaver-sites kunt beheren.

Testservermap Dit is de map waarin Dreamweaver dynamische pagina's verwerkt.

Zie www.adobe.com/go/vid0145_nl voor een zelfstudie over het definiëren van een Dreamweaver-site.

Over lokale en externe mapstructuur

Als u Dreamweaver wilt gebruiken voor het maken van een verbinding met een externe map, geeft u de externe map op in

de categorie Externe informatie van het dialoogvenster Sitedefinitie. De externe map die u opgeeft (ook wel de 'hostmap'

genoemd), moet overeenkomen met de lokale hoofdmap van uw Dreamweaver-site. (De lokale hoofdmap is de map van

het hoogste niveau van uw Dreamweaver-site.) Externe mappen kunnen, net zoals lokale mappen, elke titel hebben, maar

serviceproviders noemen de externe mappen van het hoogste niveau voor individuele gebruikersaccounts meestal

public_html, pub_html of iets gelijksoortigs. Als u zelf een externe server beheert en zelf een naam kunt kiezen voor de

externe map, is het een goed idee om de lokale hoofdmap en de externe map dezelfde naam te geven.

DREAMWEAVER CS3

Handboek

In het volgende voorbeeld ziet u links een lokale hoofdmap en rechts een externe map. De lokale hoofdmap op de lokale

computer is rechtstreeks toegewezen aan de externe map op de webserver, en niet aan een van de submappen van de externe

map of aan mappen die in de mapstructuur boven de externe map liggen.

Opmerking: In het bovenstaande voorbeeld ziet u één lokale hoofdmap op de lokale computer en één externe map van het

hoogste niveau op de externe webserver. Als u echter een aantal Dreamweaver-sites beheert op uw computer, hebt u evenveel

externe mappen op de externe server nodig. In zo'n geval is het bovenstaande voorbeeld niet van toepassing en maakt u in plaats

daarvan verschillende externe mappen binnen de map public_html, waarna u die toewijst aan de desbetreffende lokale

hoofdmappen op uw lokale computer.

Als u een externe verbinding voor het eerst tot stand brengt, is de externe map op de webserver meestal leeg. Als u

vervolgens met Dreamweaver alle bestanden in uw lokale hoofdmap uploadt, wordt de externe map gevuld met al uw

webbestanden. De mapstructuur van de externe map en die van de lokale hoofdmap moeten altijd hetzelfde zijn. (De

bestanden en mappen in uw lokale hoofdmap moeten dus altijd één op één overeenkomen met de bestanden en mappen

in uw externe map.) Als de structuur van de externe map niet overeenkomt met de structuur van de lokale hoofdmap,

worden in Dreamweaver de bestanden geüpload naar de verkeerde locatie en zijn de bestanden mogelijk niet zichtbaar voor

bezoekers van de site. Daarnaast kunnen paden naar afbeeldingen en koppelingen gemakkelijk worden verbroken als map-

en bestandsstructuren niet gelijk zijn.

Dreamweaver kan geen verbinding maken met de externe map als deze nog niet bestaat. Als u geen speciale map hebt die

fungeert als externe map op de webserver, moet u er een maken of vraagt u aan de beheerder van de server om een map

voor u te maken.

Het dialoogvenster Sites beheren gebruiken

In het dialoogvenster Sites beheren kunt u een nieuwe site maken, een site bewerken, een site dupliceren, een site

verwijderen of de instellingen van een site importeren of exporteren.

1 Selecteer Site > Sites beheren en selecteer een site uit de lijst aan de linkerkant.

2 Klik op een knop om een van de opties te selecteren en klik op Gereed.

Nieuw Hiermee kunt u een nieuwe site maken.

Bewerken Hiermee kunt u een bestaande site bewerken.

Dupliceren Hiermee maakt u een kopie van de geselecteerde site. De kopie wordt weergegeven in het venster met de lijst

met sites.

Verwijderen Hiermee wordt de geselecteerde site verwijderd; u kunt deze actie niet ongedaan maken.

Exporteren Hiermee kunt u de instellingen van een site exporteren als een XML-bestand (*.ste).

Importeren Hiermee kunt u selecteren welk bestand met site-instellingen (*.ste) u wilt importeren.

Zie ook

“Site-instellingen importeren en exporteren” op pagina 48

DREAMWEAVER CS3

Handboek

Een lokale hoofdmap instellen en bewerken

Als u de sitestructuur hebt gepland, moet u een site instellen (definiëren) in Dreamweaver. Ook als u een website wilt

bewerken die niet in Dreamweaver is gemaakt, moet u een site definiëren. Als u een Dreamweaver-site instelt, kunt u alle

documenten ordenen die betrekking hebben op een website.

De lokale hoofdmap is uw werkmap voor de DW-site. Deze map kan op uw lokale computer staan, maar ook op een

netwerkserver.

Als u wilt beginnen met het bewerken van bestanden op uw computer (zonder ze te publiceren), stelt u alleen een lokale

map in en voegt u later informatie over de externe map en de testmap toe.

U kunt met Dreamweaver een bestaande website op uw lokale vaste schijf of een externe site (of een tak van een externe

site) bewerken, ook als de oorspronkelijke site niet met Dreamweaver is gemaakt.

Opmerking: U hoeft geen externe map op te geven als uw lokale hoofdmap zich op het systeem bevindt waarop de webserver

wordt uitgevoerd. Dit houdt in dat de webserver wordt uitgevoerd op uw lokale computer.

1 Selecteer een van de volgende opties:

• Als u een nieuwe site wilt instellen, selecteert u Site > Nieuwe site.

• Als u de instellingen van een bestaande site op uw lokale vaste schijf of een externe site (of een tak van een externe site)

wilt bewerken, ongeacht of deze site is gemaakt in Dreamweaver, selecteert u Site > Sites beheren en klikt u op Bewerken.

Opmerking: Als u geen Dreamweaver-sites hebt gedefinieerd, wordt het dialoogvenster Sitedefinitie weergegeven en hoeft u niet

op Nieuw te klikken.

2 Voer de instellingen in:

• Als u een site wilt instellen met de wizard voor het instellen van sites, klikt u op het tabblad Basis en volgt u de

aanwijzingen.

• Als u rechtstreeks een lokale map, een externe map en een testmap (voor het verwerken van dynamische pagina's) wilt

instellen, klikt u op het tabblad Geavanceerd, selecteert u de categorie Lokale info en stelt u de opties in.

3 Klik op OK en Gereed om de site te maken (deze wordt weergegeven in het paneel Bestanden.)

Zie ook

“Toegang krijgen tot sites, een server en lokale stations” op pagina 80

“Site-instellingen importeren en exporteren” op pagina 48

“Een webtoepassing instellen” op pagina 477

“Relatieve paden instellen voor nieuwe koppelingen” op pagina 272

“Bestanden en mappen beheren” op pagina 74

Opties voor het instellen van een lokale hoofdmap

Als u ervoor kiest de opties voor de lokale hoofdmap rechtstreeks in te stellen in plaats van via het tabblad Basis van het

dialoogvenster Sitedefinitie, klikt u op het tabblad Geavanceerd en voert u de informatie in.

Opmerking: Alleen de eerste twee opties zijn vereist om een werkende site in te stellen op uw computer.

Sitenaam De naam die wordt weergegeven in het paneel Bestanden en het dialoogvenster Sites beheren. De naam wordt

niet weergegeven in de browser.

Lokale hoofdmap De naam van de map op uw lokale vaste schijf waarin u bestanden, sjablonen en bibliotheekitems voor

de site opslaat. Maak een map op uw vaste schijf of klik op het mappictogram om naar de map te bladeren. Als in

Dreamweaver hoofdmapafhankelijke relatieve koppelingen worden herleid, gebeurt dat vanuit deze map.

Lokale bestandenlijst automatisch vernieuwen Hiermee wordt aangegeven of Dreamweaver de lokale lijst elke keer

automatisch moet vernieuwen als u bestanden naar de lokale site kopieert. Als u deze optie uitschakelt, kopieert

Dreamweaver dergelijke bestanden sneller. De weergave Lokaal van het paneel Bestanden wordt dan echter niet

DREAMWEAVER CS3

Handboek

automatisch vernieuwd en u moet op de knop Vernieuwen op de werkbalk van het paneel Bestanden klikken om het paneel

automatisch te vernieuwen.

Standaardmap voor afbeeldingen Het pad naar de map waarin de afbeeldingen worden bewaard die in de site worden

gebruikt. Voer het pad in of klik op het mappictogram om naar de map te bladeren.

Koppelingen ten opzichte van Hiermee wijzigt u het relatieve pad van de koppelingen die u maakt naar andere pagina's in

de site. Dreamweaver maakt voor koppelingen standaard gebruik van documentafhankelijke relatieve paden. Schakel de

optie Hoofdmap van site in om de padinstelling te wijzigen en controleer of u het HTTP-adres hebt opgegeven in de optie

HTTP-adres.

Als u deze instelling wijzigt, wordt het pad van bestaande koppelingen niet geconverteerd. De instelling geldt alleen voor

nieuwe koppelingen die u visueel maakt met Dreamweaver.

Inhoud die is gekoppeld via hoofdmapafhankelijke relatieve paden, wordt niet weergegeven wanneer u documenten

voorvertoont in een lokale browser, tenzij u een testserver hebt ingesteld of de optie Voorvertoning met tijdelijk bestand is

ingeschakeld in Bewerken > Voorkeuren > Voorvertoning in browser. De reden daarvoor is dat browsers de hoofdmap van

sites niet herkennen en servers wel.

HTTP-adres De URL die voor de website wordt gebruikt. Hiermee kan Dreamweaver koppelingen binnen de site verifiëren

waarvoor absolute URL's of hoofdmapafhankelijke relatieve paden worden gebruikt. Dreamweaver gebruikt dit adres ook

om te controleren of hoofdmapafhankelijke relatieve koppelingen zullen werken op de server, waar de hoofdmap wellicht

anders is. Als u bijvoorbeeld een koppeling maakt naar een afbeelding in de map C:op uw vaste schijf (waar de map Sales

is ingesteld als lokale hoofdmap) en de URL van uw site http://www.mysite.com/SalesApp/ is (waar de map SalesApp uw

externe hoofdmap is), voert u de URL in het tekstvak HTTP-adres in om te zorgen dat het pad naar het gekoppelde bestand

op de server /SalesApp/images/ is.

Hoofdlettergevoelige koppelingencontrole gebruiken Hiermee wordt gecontroleerd of het hoofdlettergebruik van de

koppelingen overeenkomt met dat van de bestandsnamen wanneer Dreamweaver koppelingen controleert. Deze optie is

handig voor UNIX-systemen, waar bestandsnamen hoofdlettergevoelig zijn.

Cache inschakelen Hiermee wordt aangegeven of er een lokale cache moet worden gemaakt om de snelheid van

koppelings- en sitebeheertaken te verbeteren. Als u deze optie niet inschakelt, wordt u door Dreamweaver nogmaals

gevraagd of u een cache wilt maken voordat de site wordt gemaakt. Het is raadzaam deze optie in te schakelen, omdat het

paneel Middelen (in de paneelgroep Bestanden) alleen werkt als er een cache is gemaakt.

Een externe map instellen

In deze map slaat u bestanden op voor productie, samenwerking, implementatie of een aantal andere scenario's. De externe

mapstaatmeestalopdecomputerwaaropdewebserverwordtuitgevoerd. Ukuntvoordezemapoptiesinstellendoorde

vragenvandewizardophettabbladBasistebeantwoordenofdoorophettabbladGeavanceerdteklikkenendeinformatie

rechtstreeks in te voeren.

In het paneel Bestanden van Dreamweaver wordt de externe map weergegeven als de externe site. Als u een externe map

instelt, moet u een toegangsmethode voor Dreamweaver selecteren voor het uploaden en downloaden van bestanden naar

uw webserver.

Zie www.adobe.com/go/vid0162_nl voor een zelfstudie over het instellen van een externe map.

Opmerking: Dreamweaver ondersteunt verbindingen met IPv6-servers. Ondersteunde verbindingstypen zijn o.a. FTP, SFTP,

WebDav en RDS. Zie www.ipv6.org/ voor meer informatie.

1 Selecteer Site > Sites beheren.

2 KlikopNieuwenselecteerSiteomeennieuwesiteintestellenofselecteereenbestaandeDreamweaver-siteenklikop

Bewerken.

3 Klik op het tabblad Geavanceerd, selecteer de categorie Externe informatie en selecteer de toegangsmethode die u wilt

gebruiken voor het overbrengen van bestanden tussen lokale en externe mappen.

Geen Laat deze standaardinstelling ongewijzigd als u niet van plan bent uw site te uploaden naar een server.

FTP Gebruik deze instelling als u met FTP verbinding maakt met uw webserver.

DREAMWEAVER CS3

Handboek

Lokaal/Netwerk Gebruik deze instelling voor toegang tot een netwerkmap, of als u bestanden opslaat of uw testserver

uitvoert op uw lokale computer.

RDS (Remote Development Services) Gebruik deze instelling als u verbinding maakt met uw webserver met RDS. Voor

deze toegangsmethode moet uw externe map zich op een computer bevinden waarop Macromedia® ColdFusion® van

Adobe® wordt uitgevoerd.

Microsoft Visual SourceSafe Gebruik deze instelling als u verbinding maakt met uw webserver met Microsoft Visual

SourceSafe. Ondersteuning voor deze methode is alleen beschikbaar voor Windows. Als u deze methode wilt gebruiken,

moet u Microsoft Visual SourceSafe Client versie 6 hebben geïnstalleerd.

WebDAV (Web-based Distributed Authoring and Versioning) Gebruik deze instelling als u verbinding maakt met uw

webserver met het WebDAV-protocol.

Voor deze toegangsmethode moet u een server hebben die dit protocol ondersteunt, zoals Microsoft Internet Information

Server (IIS) 5.0 of een op de juiste manier geconfigureerde installatie van Apache-webserver.

Opmerking: Als u WebDAV selecteert als toegangsmethode en u Dreamweaver gebruikt in een omgeving met meerdere

gebruikers, moet u er ook voor zorgen dat alle gebruikers WebDAV selecteren als toegangsmethode. Als sommige gebruikers

WebDAV selecteren en andere gebruikers andere toegangsmethoden selecteren (bijvoorbeeld FTP), werkt de functie van

Dreamweaver voor het in- en uitchecken van bestanden niet goed, omdat WebDAV een eigen vergrendelingssysteem gebruikt.

Zie ook

“Aan bestanden werken zonder een site te definiëren” op pagina 60

“Bestanden van een externe server ophalen” op pagina 84

“WebDAV gebruiken om bestanden in en uit te checken” op pagina 89

“Toegang krijgen tot sites, een server en lokale stations” op pagina 80

“Bestanden en mappen beheren” op pagina 74

Opties instellen voor FTP-toegang

1 Selecteer Site > Sites beheren.

2 KlikopNieuwenselecteerSiteomeennieuwesiteintestellenofselecteereenbestaandeDreamweaver-siteenklikop

Bewerken.

3 Selecteer het tabblad Geavanceerd en klik op de categorie Externe informatie.

4 Selecteer FTP en voer de hostnaam in van de FTP-host waarnaar u bestanden voor uw website uploadt.

Uw FTP-host is de volledige internetnaam van een computersysteem, bijvoorbeeld ftp.mindspring.com. Voer de volledige

hostnaam in zonder extra tekst. Voeg vooral geen protocolnaam toe vóór de hostnaam.

Opmerking: Als u niet weet wat uw FTP-host is, neemt u contact op met uw webhostingbedrijf.

5 Voer de hostmap van de externe site in, waar u documenten opslaat die zichtbaar zijn voor het publiek.

Als u niet zeker weet wat u moet invoeren als hostmap, neemt u contact op met de beheerder van de server of laat u het

tekstvak leeg. Op sommige servers is de hoofdmap gelijk aan de map waar u aanvankelijk verbinding mee maakt met FTP.

U kunt daar achterkomen door verbinding te maken met de server. Als er een map met een naam als public_html of www

of uw aanmeldnaam wordt weergegeven in de weergave Extern bestand in het paneel Bestanden, dan is dat waarschijnlijk

de map die u moet invoeren in het tekstvak Hostmap.

6 Voer de aanmeldnaam en het wachtwoord in dat u gebruikt voor verbindingen met de FTP-server.

7 Klik op Testen om uw aanmeldnaam en wachtwoord te testen.

8 Standaard wordt uw wachtwoord opgeslagen door Dreamweaver. Schakel de optie Opslaan uit als u liever hebt dat u elke

keer dat u verbinding maakt met de externe server, door Dreamweaver om een wachtwoord wordt gevraagd.

9 Selecteer Passieve FTP gebruiken als bij uw firewallconfiguratie het gebruik van passieve FTP verplicht is.

DREAMWEAVER CS3

Handboek

Met passieve FTP kan uw lokale software de FTP-verbinding opzetten in plaats van dat aan de externe server wordt

gevraagd de verbinding op te zetten. Als u niet zeker weet of u passieve FTP moet gebruiken, raadpleegt u uw

systeembeheerder.

Zie TechNote 15220 op de website van Adobe op www.adobe.com/go/15220_nl voor meer informatie.

10 Selecteer Uitgebreid gegevensverbindingstype gebruiken (voor IPv6) als u een IPv6-FTP-server gebruikt.

Bij de implementatie van versie 6 van het Internet Protocol (IPv6), hebben EPRT en EPSV de FTP-opdrachten PORT en

PASV vervangen. Als u dus probeert verbinding te maken met een IPv6-FTP-server, moet u de opdrachten EPSV

(Extended Passive) en EPRT (Extended Active) gebruiken voor uw gegevensverbinding.

Zie www.ipv6.org/ voor meer informatie.

11 Selecteer Firewall gebruiken als u verbinding maakt met de externe server van achter een firewall.

12 Klik op Firewall-instellingen om uw firewallhost of -poort te bewerken.

13 Selecteer Synchronisatie-informatie bijhouden als u uw lokale en externe bestanden automatisch wilt synchroniseren.

(Deze optie is standaard geselecteerd.)

14 Selecteer Automatisch bestanden uploaden naar de server bij het opslaan als u wilt dat Dreamweaver uw bestand

uploadt naar de externe site als u het bestand opslaat.

15 Selecteer Het in- en uitchecken van bestanden inschakelen als u het systeem voor in- en uitchecken wilt activeren.

16 Klik op OK.

Een verbinding maken of verbreken met een externe map met FTP-toegang

❖

In het paneel Bestanden:

• Klik op Hiermee maakt u verbinding met de externe host op de werkbalk om verbinding te maken.

• Klik op Verbinding verbreken op de werkbalk als u de verbinding wilt verbreken.

Opties instellen voor lokale toegang of netwerktoegang

1 Selecteer Site > Sites beheren.

2 KlikopNieuwenselecteerSiteomeennieuwesiteintestellenofselecteereenbestaandeDreamweaver-siteenklikop

Bewerken.

3 Selecteer het tabblad Geavanceerd, klik op de categorie Externe informatie en selecteer Lokaal/Netwerk.

4 Klik op het mappictogram naast het tekstvak Externe map om naar de map waarin u uw sitebestanden opslaat te

bladeren en deze te selecteren.

5 Selecteer Synchronisatie-informatie bijhouden als u uw lokale en externe bestanden automatisch wilt synchroniseren.

(Deze optie is standaard geselecteerd.)

6 SelecteerAutomatischbestandenuploadennaardeserverbijhetopslaanalsuwiltdatDreamweaveruwbestanduploadt

naar de externe site als u het bestand opslaat.

7 Selecteer Het in- en uitchecken van bestanden inschakelen als u het systeem voor in- en uitchecken wilt activeren.

8 Klik op OK.

Opties instellen voor WebDAV-toegang

1 Selecteer Site > Sites beheren.

2 KlikopNieuwenselecteerSiteomeennieuwesiteintestellenofselecteereenbestaandeDreamweaver-siteenklikop

Bewerken.

3 Selecteer het tabblad Geavanceerd, klik op de categorie Externe informatie en selecteer WebDAV.

4 Voer voor de URL de volledige URL in naar de map op de WebDAV-server waarmee u verbinding wilt maken.

Deze URL bevat het protocol, de poort en de map (als het niet om de hoofdmap gaat). Bijvoorbeeld

http://webdav.mijndomein.net/mijnsite.

DREAMWEAVER CS3

Handboek

5 Voer uw gebruikersnaam en wachtwoord in.

Deze informatie is voor serververificatie en heeft geen betrekking op Dreamweaver. Als u niet zeker bent van uw

gebruikersnaam en wachtwoord, raadpleegt u uw systeembeheerder of webbeheerder.

6 Klik op Testen om uw verbindingsinstellingen te testen.

7 Klik op Opslaan als u wilt dat Dreamweaver elke keer dat u een nieuwe sessie start uw wachtwoord onthoudt.

8 Selecteer Synchronisatie-informatie bijhouden als u wilt dat Dreamweaver uw lokale en externe bestanden automatisch

synchroniseert. (Deze optie is standaard geselecteerd.)

9 SelecteerAutomatischbestandenuploadennaardeserverbijhetopslaanalsuwiltdatDreamweaveruwbestanduploadt

naar de externe site als u het bestand opslaat.

10 Selecteer Het in- en uitchecken van bestanden inschakelen als u het systeem voor in- en uitchecken wilt activeren.

Een verbinding maken of verbreken met een externe map met netwerktoegang

❖

U hoeft geen verbinding te maken met de externe map. U hebt altijd verbinding. Klik op de knop Vernieuwen om uw

externe bestanden weer te geven.

Opties instellen voor RDS-toegang

1 Selecteer Site > Sites beheren.

2 KlikopNieuwenselecteerSiteomeennieuwesiteintestellenofselecteereenbestaandeDreamweaver-siteenklikop

Bewerken.

3 Selecteer het tabblad Geavanceerd, klik op de categorie Externe informatie en selecteer RDS.

4 Klik op de knop Instellingen en geef de volgende informatie op in het dialoogvenster RDS-server configureren:

• Voer de naam in van de hostcomputer waarop uw webserver is geïnstalleerd.

De hostnaam is waarschijnlijk een IP-adres of een URL. Als u niet zeker bent, raadpleegt u uw beheerder.

• Voer het poortnummer in waarmee u verbinding maakt.

• Voer de externe hoofdmap in als de hostmap.

Bijvoorbeeld c:\inetpub\wwwroot\myHostDir\.

• Voer uw RDS-gebruikersnaam en -wachtwoord in.

Opmerking: Deze opties worden mogelijk niet weergegeven als u uw gebruikersnaam en wachtwoord hebt ingesteld in de

beveiligingsinstellingen van de ColdFusion-beheerder.

• Schakel Opslaan in als u wilt dat Dreamweaver uw instellingen onthoudt.

5 Klik op OK om het dialoogvenster RDS-server configureren te sluiten.

6 SelecteerAutomatischbestandenuploadennaardeserverbijhetopslaanalsuwiltdatDreamweaveruwbestanduploadt

naar de externe site als u het bestand opslaat.

7 Selecteer Het in- en uitchecken van bestanden inschakelen als u het systeem voor in- en uitchecken wilt activeren, en

klik op OK.

Toegang via Microsoft Visual SourceSafe instellen

1 Selecteer Site > Sites beheren.

2 KlikopNieuwenselecteerSiteomeennieuwesiteintestellenofselecteereenbestaandeDreamweaver-siteenklikop

Bewerken.

3 Selecteer het tabblad Geavanceerd, klik op de categorie Externe informatie en selecteer Microsoft Visual SourceSafe.

DREAMWEAVER CS3

Handboek

4 Klik op de knop Instellingen en geef de volgende informatie op in het dialoogvenster De Microsoft Visual SourceSafe-

database openen:

• Klik voor het Databasepad op Bladeren om naar de gewenste Visual SourceSafe-database te bladeren of typ het volledige

pad naar het bestand.

Het bestand dat u selecteert wordt het srcsafe.ini-bestand dat wordt gebruikt voor het initialiseren van Visual SourceSafe.

• Voer voor Project het project binnen de Visual SourceSafe-database in dat u wilt gebruiken als de hoofdmap van de

externe site.

• Voer voor Gebruikersnaam en Wachtwoord uw aanmeldingsnaam en wachtwoord voor de geselecteerde database in.

Als u uw gebruikersnaam en wachtwoord niet kent, neemt u contact op met uw systeembeheerder.

• Schakel de optie Opslaan in als u wilt dat Dreamweaver uw instellingen onthoudt.

5 Klik op OK om terug te gaan naar het dialoogvenster Sitedefinitie.

6 SelecteerAutomatischbestandenuploadennaardeserverbijhetopslaanalsuwiltdatDreamweaveruwbestanduploadt

naar de externe site als u het bestand opslaat.

7 Schakel de optie Bestanden uitchecken wanneer ze worden geopend uit als u niet wilt dat Dreamweaver uw bestanden

automatisch downloadt van de server wanneer u het lokale bestand opent.

Problemen met het instellen van de externe map oplossen

De volgende lijst bevat informatie over algemene problemen die u kunt tegenkomen bij het instellen van een externe map

en over hoe u die kunt oplossen:

• De FTP-implementatie van Dreamweaver werkt mogelijk niet goed met bepaalde proxyservers, firewalls met meerdere

niveaus en andere vormen van indirecte servertoegang. Als u problemen hebt met FTP-toegang, vraagt u uw lokale

systeembeheerder om hulp.

• Voor een FTP-implementatie met Dreamweaver, moet u verbinding maken met de hoofdmap van het externe systeem.

Zorg dat u de hoofdmap van het externe systeem opgeeft als de hostmap. Als u de hostmap hebt opgegeven met één

schuine streep (/), moet u mogelijk een relatief pad opgeven vanaf de map waarmee u verbinding maakt en de externe

hoofdmap. Als de externe hoofdmap een map van een hoger niveau is, moet u bijvoorbeeld mogelijk ../../ opgeven voor

de hostmap.

• Gebruik liggende streepjes (_) in plaats van spaties en vermijd zoveel mogelijk het gebruik van speciale tekens in

bestands- en mapnamen. Als bestands- of mapnamen komma's, schuine strepen, punten of aanhalingstekens bevatten,

kan Dreamweaver mogelijk geen site-overzicht maken.

• Als u problemen tegenkomt met lange bestandsnamen, geeft u de bestanden kortere namen. Op Mac OS mogen

bestandsnamen niet langer zijn dan 31 tekens.

• Veel servers gebruiken symbolische koppelingen (UNIX), snelkoppelingen (Windows) of aliassen (Macintosh) om een

map op het ene gedeelte van de server te verbinden met een andere map op een andere locatie. Dergelijk aliassen hebben

doorgaans geen effect op de mogelijkheid om verbinding te maken met de desbetreffende map. Als u echter wel

verbinding kunt maken met één deel van de server maar niet met een ander deel, kan dit veroorzaakt worden door

aliassen die niet overeenkomen.

• Als u een foutbericht krijgt over een put-bewerking op een bestand die niet mogelijk is, heeft de externe map mogelijk

onvoldoende ruimte. Raadpleeg het FTP-logboek voor gedetailleerdere informatie.

Opmerking: In het algemeen geldt dat wanneer er een probleem optreedt met een FTP-overdracht, u het FTP-logboek kunt

raadplegen. Hiervoor selecteert u Venster > Resultaten (Windows) of Site > FTP-logboek (Macintosh) en klikt u vervolgens op

FTP-logboek.

Een testserver instellen

Als u dynamische pagina's wilt ontwikkelen, heeft Dreamweaver de services van een testserver nodig voor het genereren

en weergeven van dynamische inhoud terwijl u werkt. De testserver kan uw lokale computer, een ontwikkelingsserver, een

parkeerserver of een productieserver zijn.

DREAMWEAVER CS3

Handboek

Voordat u een testservermap instelt, moet u een lokale en externe map definiëren. Vaak kunt u de instellingen uw externe

map gebruiken voor uw testserver, omdat dynamische pagina's in de externe map normaal gesproken kunnen worden

verwerkt door een toepassingsserver.

1 Selecteer een van de volgende opties:

• Als u een nieuwe site wilt instellen, selecteert u Site > Nieuwe site.

• Als u de instellingen van een bestaande site op uw lokale vaste schijf of een externe site (of een tak van een externe site)

wiltbewerken,ongeachtofdezesiteisgemaaktinDreamweaver,selecteertuSite>Sitesbeheren,selecteertuuwsiteuit

de lijst en klikt u op Bewerken.

Opmerking: Als u geen Dreamweaver-sites hebt gedefinieerd, wordt het dialoogvenster Sitedefinitie weergegeven en hoeft u niet

op Nieuw te klikken.

2 Selecteer Testserver op het tabblad Geavanceerd van het dialoogvenster Sitedefinitie.

3 Selecteer de servertechnologie die u voor de webtoepassing wilt gebruiken.

4 Accepteer de standaardinstellingen voor de testserver of voer andere instellingen in.

Standaard gaat Dreamweaver ervan uit dat er een toepassingsserver wordt uitgevoerd op hetzelfde systeem als uw

webserver. AlsueenexternemaphebtgedefinieerdindecategorieExterneinformatieinhetdialoogvensterSitedefinitie,

en als er een toepassingsserver wordt uitgevoerd op hetzelfde systeem als de externe map (inclusief uw lokale computer),

accepteert u de standaardinstellingen in de categorie Testserver.

Als u geen externe map hebt gedefinieerd in de categorie Externe informatie, wordt voor de categorie Testserver standaard

de lokale map gebruikt die u hebt gedefinieerd in de categorie Lokale info. U kunt deze instelling alleen ongewijzigd laten

als wordt voldaan aan de volgende twee voorwaarden:

Uw webserver en toepassingsserver worden beide uitgevoerd op uw lokale computer. Dit is bijvoorbeeld het geval als u een

ColdFusion-ontwikkelaar bent en IIS en ColdFusion beide worden uitgevoerd op uw lokale Windows XP-systeem.

Uw lokale hoofdmap is een submap van de thuismap van uw website. Als u bijvoorbeeld IIS gebruikt, is uw lokale hoofdmap

een submap van de map c:\Inetpub\wwwroot\ of de map zelf.

Alsuwlokalehoofdmapgeensubmapvanuwthuismapis,moetudelokalehoofdmapdefiniërenalseenvirtuelemapop

uw webserver.

Opmerking: De toepassingsserver mag op een ander systeem worden uitgevoerd dan uw externe site. Als u in de categorie

Externe informatie bijvoorbeeld Microsoft Visual SourceSafe hebt geselecteerd als toegangsoptie, moet u een andere server

opgeven in de categorie Testserver.

5 Voer in het tekstvak URL-voorvoegsel de URL in die gebruikers in de browser moeten typen om uw webtoepassing te

openen, maar voeg geen bestandsnaam toe.

Het URL-voorvoegsel bestaat uit de domeinnaam en een van de submappen of virtuele mappen van de thuismap van uw

website, maar zonder een bestandsnaam. Als de URL van uw toepassing bijvoorbeeld

www.adobe.com/mijncooletoepassing/start.jsp is, voert u het volgende URL-voorvoegsel in:

www.adobe.com/mijncooletoepassing/.

Als Dreamweaver wordt uitgevoerd op hetzelfde systeem als uw webserver, kunt u een van de localhost-opties gebruiken als

tijdelijke aanduiding voor uw domeinnaam. Als u bijvoorbeeld IIS gebruikt en de URL van uw toepassing

http://boterbloem_pc/mijncooletoepassing/start.jsp is, voert u het volgende URL-voorvoegsel in:

http://localhost/mijncooletoepassing/

Zie het volgende gedeelte voor een lijst met localhost-opties die bij verschillende webservers horen.

6 Klik op OK en vervolgens op Gereed om de nieuwe site toe te voegen aan uw lijst met sites.

Zie ook

“De toepassingsserver kiezen” op pagina 477

“Voorbereidingen voor het bouwen van dynamische websites” op pagina 467

DREAMWEAVER CS3

Handboek

Over het URL-voorvoegsel voor de testserver

U moet een URL-voorvoegsel opgeven, zodat Dreamweaver de services van een testserver kan gebruiken voor het

weergeven van gegevens en voor het maken van verbindingen met databases terwijl u werkt. Dreamweaver gebruikt de

verbinding die tijdens het ontwerpen wordt gemaakt om u nuttige informatie te leveren over de database, zoals de namen

van de tabellen in de database en de namen van de kolommen in de tabellen.

Een URL-voorvoegsel bestaat uit de domeinnaam en een van de submappen of virtuele mappen van de thuismap van uw

website.

Opmerking: De terminologie die in Microsoft IIS wordt gebruikt, kan per server verschillen, maar voor de meeste webservers

gelden dezelfde concepten.

De thuismap De map op de server die is toegewezen aan de domeinnaam van uw site. Stel dat de map die u wilt gebruiken

voor het verwerken van dynamische pagina's c:\sites\company\ is en dat deze map uw thuismap is (deze map is dus

toegewezen aan de domeinnaam van uw site, bijvoorbeeld www.mijnstartsite.com). In dit geval is het URL-voorvoegsel

http://www.mijnstartsite.com/.

Als de map die u wilt gebruiken voor het verwerken van dynamische pagina's een submap van uw thuismap is, voegt u de

submap toe aan de URL. Stel dat uw thuismap c:\sites\bedrijf\ is, de site van uw bedrijf www.mijnstartsite.com is en de map

die u wilt gebruiken voor het verwerken van dynamische pagina's c:\sites\bedrijf\voorraad is. U voert dan het volgende

URL-voorvoegsel in:

http://www.mijnstartsite.com/voorraad/

Als de map die u wilt gebruiken voor het verwerken van dynamische pagina's niet uw thuismap of een van de submappen

daarvan is, moet u een virtuele map maken.

Een virtuele map Een map die zich niet fysiek bevindt binnen de thuismap van de server, hoewel de map wel in de URL

lijkt te staan. Als u een virtuele map wilt maken, geeft u een alias voor het pad van de map op in de URL. Stel dat uw

thuismap c:\sites\bedrijf is, de verwerkingsmap d:\apps\voorraad en u een alias voor deze map maakt met de naam

magazijn. U voert dan het volgende URL-voorvoegsel in:

http://www.mijnstartsite.com/magazijn/

Localhost Verwijst naar de thuismap in uw URL's als de client (meestal een browser, maar in dit geval Dreamweaver) wordt

uitgevoerd op hetzelfde systeem als uw webserver. Stel dat Dreamweaver wordt uitgevoerd op hetzelfde Windows-systeem

als de webserver, uw thuismap c:\sites\bedrijf is en dat u een virtuele map met de naam magazijn hebt gedefinieerd om te

verwijzen naar de map die u wilt gebruiken voor het verwerken van dynamische pagina's. Hieronder ziet u de URL-

voorvoegsels die u dan moet invoeren voor een aantal webservers:

Opmerking: Standaard wordt de ColdFusion MX 7-webserver uitgevoerd op poort 8500, de Apache-webserver op poort 80 en

de Jakarta Tomcat-webserver op poort 8080.

Voor Macintosh-gebruikers die de Apache-webserver uitvoeren, is de persoonlijke thuismap

Users:MijnGebruikersnaam:Sites, waarbij MijnGebruikersnaam de Macintosh-gebruikersnaam is. Als u Mac OS 10.1 of

hoger installeert, wordt er automatisch een alias met de naam ~MijnGebruikersnaam gedefinieerd voor deze map. Uw

standaard URL-voorvoegsel in Dreamweaver is daarom:

http://localhost/~MijnGebruikersnaam/

Als de map die u wilt gebruiken voor het verwerken van dynamische pagina's Users:MijnGebruikersnaam:Sites:voorraad

is, is het URL-voorvoegsel:

http://localhost/~MijnGebruikersnaam/voorraad/

Webserver URL-voorvoegsel

ColdFusion MX 7 http://localhost:8500/magazijn/

IIS http://localhost/magazijn/

Apache (Windows) http://localhost:80/magazijn/

Jakarta Tomcat (Windows) http://localhost:8080/magazijn/

DREAMWEAVER CS3

Handboek

Een bestaande externe website bewerken in Dreamweaver

U kunt met Dreamweaver een bestaande externe site (of een tak van een externe site) naar uw lokale vaste schijf kopiëren

en daar bewerken, ook als de oorspronkelijke site niet met Dreamweaver is gemaakt.

1 Maak een lokale map voor de bestaande site en stel de map in als de lokale map voor de site.

Opmerking: U moet de volledige structuur van de desbetreffende tak van de bestaande externe site lokaal dupliceren.

2 Stel een externe map in en gebruik daarvoor de externe toegangsgegevens van de bestaande site. U moet verbinding

maken met de externe site om de bestanden te downloaden naar uw computer voordat u ze kunt bewerken.

Zorg dat u de juiste hoofdmap kiest voor de externe site.

3 Klik in het paneel Bestanden (Venster > Bestanden) op de knop Externe host (voor FTP-toegang) of op de knop

Vernieuwen (voor netwerktoegang) op de werkbalk om de externe site weer te geven.

4 Bewerk de site:

• Als u met de hele site wilt werken, selecteert u de hoofdmap van de externe site in het paneel Bestanden en klikt u op

Ophalen op de werkbalk om de hele site naar uw lokale vaste schijf te downloaden.

• Als u met slechts één van de bestanden of mappen van de site wilt werken, gaat u in de weergave Extern van het paneel

BestandennaarhetbestandofdemapenkliktuopOphalenopdewerkbalkomdatbestandnaaruwlokalevasteschijf

te downloaden.

Dreamweaver dupliceert automatisch zoveel van de externe sitestructuur als nodig is om het gedownloade bestand in het

juiste gedeelte van de sitehiërarchie te plaatsen. Als u een gedeelte van een site bewerkt, moet u in het algemeen afhankelijke

bestanden, zoals afbeeldingsbestanden, opnemen.

Een Dreamweaver-site verwijderen uit uw lijst met sites

AlsueenDreamweaver-siteenalleinstellingendaarvanverwijdertuituwlijstmetsites,wordendebestandenvandesites

niet verwijderd van uw computer.

1 Selecteer Site > Sites beheren.

2 Selecteer een sitenaam.

3 Klik op Verwijderen, klik op Ja om de site te verwijderen van de lijst of klik op Nee om de sitenaam te laten staan, en klik

vervolgens Gereed.

Site-instellingen importeren en exporteren

U kunt uw site-instellingen exporteren als een XML-bestand dat u later kunt importeren in Dreamweaver. Hierdoor kunt

u sites verplaatsen naar een andere computer of productversie of instellingen delen met andere gebruikers.

Exporteer uw site-instellingen regelmatig, zodat u een back-upexemplaar hebt als er iets met de site gebeurt.

Uw sites exporteren

1 Selecteer Site > Sites beheren.

2 Selecteer een of meer sites waarvan u de instellingen wilt exporteren en klik op Exporteren:

• Als u meer dan één site wilt selecteren, houdt u Control (Windows) of Command (Macintosh) ingedrukt terwijl u op de

sites klikt.

• Als u een reeks sites wilt selecteren, houdt u Shift ingedrukt terwijl u op de eerste en laatste site in de reeks klikt.

3 Blader voor elke site waarvan u de instellingen wilt exporteren naar een locatie waarin u de site wilt opslaan, en klik op

Opslaan. (Dreamweaver slaat de instellingen van elke site op als een XML-bestand, met de bestandsextensie .ste.)

4 Als u een back-up wilt maken van de site-instellingen, selecteert u de eerste optie en klikt u op OK. Dreamweaver slaat

de aanmeldingsgegevens voor de externe server, zoals de gebruikersnaam en het wachtwoord op, maar ook de lokale

padgegevens.

DREAMWEAVER CS3

Handboek

5 Als u uw instellingen wilt delen met andere gebruikers, selecteert u de tweede optie en klikt u op OK. (Dreamweaver

slaat geen informatie op die niet werkt voor andere gebruikers, zoals uw aanmeldingsgegevens voor de externe server en

lokale paden.)

6 Klik op Gereed.

Opmerking: Sla het *.ste-bestand op in de hoofdmap van uw site of op het bureaublad zodat u het gemakkelijk kunt vinden.

Als u niet meer weet waar u het bestand hebt opgeslagen, zoekt u op uw computer naar bestanden met de extensie *.ste.

Sites importeren

1 Selecteer Site > Sites beheren.

2 Klik op Importeren.

3 Blader naar een of meer sites (gedefinieerd in bestanden met de bestandsextensie .ste) waarvan u de instellingen wilt

importeren en selecteer de sites.

Als u meer dan één site wilt selecteren, houdt u Control (Windows) of Command (Macintosh) ingedrukt terwijl u op de

.ste-bestanden klikt. Als u een reeks sites wilt selecteren, houdt u Shift ingedrukt terwijl u op het eerste en laatste bestand

in de reeks klikt.

4 Klik op Openen en vervolgens op Gereed.

Als Dreamweaver de site-instellingen heeft geïmporteerd, worden de sitenamen weergegeven in het dialoogvenster Sites

beheren.

Werken met een visueel overzicht van uw site

Site-overzichten gebruiken

U kunt een lokale map voor een Dreamweaver-site weergeven als een visuele kaart met gekoppelde pictogrammen, die een

site-overzicht wordt genoemd. Gebruik het site-overzicht om nieuwe bestanden toe te voegen aan een Dreamweaver-site of

om koppelingen toe te voegen, te wijzigen of te verwijderen.

In het site-overzicht wordt de structuur van de site tot op twee niveaus diep weergegeven, vanaf de introductiepagina.

Pagina's worden weergegeven als pictogrammen en koppelingen worden weergegeven in de volgorde waarin ze voorkomen

in de broncode.

Voordat u het site-overzicht kunt weergeven, moet u een introductiepagina definiëren voor uw site. De introductiepagina

van de site is het startpunt van het site-overzicht en kan elke pagina in uw site zijn. U kunt wijzigen welke pagina de

introductiepagina is, hoeveel kolommen worden weergegeven, of in de pictogramlabels de bestandsnaam of de paginatitel

wordt weergegeven en of verborgen en afhankelijke bestanden worden weergegeven. (Een afhankelijk bestand is een

afbeeldingsbestand of een bestand met andere niet-HTML-inhoud dat door de browser wordt geladen wanneer de

hoofdpagina wordt geladen.)

Als u in het site-overzicht werkt, kunt u pagina's selecteren, een pagina openen om deze te bewerken, nieuwe pagina's

toevoegen aan de site, koppelingen tussen bestanden maken en paginatitels wijzigen.

Het site-overzicht is ideaal voor het plannen van een sitestructuur. U kunt de gehele structuur van de site instellen en

vervolgens een afbeelding van het site-overzicht maken.

Opmerking: Het site-overzicht heeft alleen betrekking op lokale sites. Als u een overzicht wilt maken van een externe site,

kopieert u de inhoud van de externe site naar een map op uw lokale vaste schijf en gebruikt u vervolgens de opdracht Sites

beheren om de site te definiëren als een lokale site.

Zie ook

“Documenten koppelen in het site-overzicht” op pagina 271

“Een lokale hoofdmap instellen en bewerken” op pagina 40

DREAMWEAVER CS3

Handboek

Een introductiepagina voor een site definiëren of wijzigen

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site in het pop-upmenu (waarin de huidige site of server of

het huidige station wordt weergegeven).

2 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het bestand dat u wilt

instellen als introductiepagina en selecteer Selecteren als introductiepagina.

Opmerking: U kunt de introductiepagina ook instellen in de opties voor Lay-out site-overzicht in het dialoogvenster

Sitedefinitie.

3 Als u de introductiepagina wilt wijzigen, herhaalt u stap 2.

Een site-overzicht weergeven

1 Voer een van de volgende handelingen uit in het paneel Bestanden (Venster > Bestanden):

• Selecteer in het samengevouwen paneel Bestanden de optie Overzichtsweergave in het menu Siteweergave.

• Klik in het uitgevouwen paneel Bestanden op de knop Site-overzicht op de werkbalk en selecteer vervolgens Alleen kaart

(het site-overzicht zonder de lokale bestandsstructuur) of Kaart en bestanden (inclusief de lokale bestandsstructuur).

Opmerking: Als u geen introductiepagina hebt gedefinieerd, of als Dreamweaver geen pagina index.html of index.htm kan

vinden in de huidige site die kan worden gebruikt als introductiepagina, wordt u door Dreamweaver gevraagd om een

introductiepagina in te stellen.

2 Klik op de plus (+)- en min (-)-tekens naast een bestandsnaam om de pagina's weer te geven of te verbergen die onder

het tweede niveau zijn gekoppeld:

• Met tekst die in rood wordt weergegeven, wordt een niet-werkende koppeling aangegeven.

• Met tekst die in blauw wordt weergegeven en die met een wereldbol is gemarkeerd, wordt een bestand op een andere site

of een speciale koppeling (zoals een e-mail- of scriptkoppeling) aangegeven.

• Met een groen vinkje wordt aangegeven dat u het bestand hebt uitgecheckt.

• Met een rood vinkje wordt aangegeven dat iemand anders het bestand heeft uitgecheckt.

• Met het slotpictogram wordt aangegeven dat een bestand alleen-lezen (Windows) of vergrendeld (Macintosh) is.

De lay-out van het site-overzicht wijzigen

Met de opties voor Lay-out site-overzicht kunt u het uiterlijk van het site-overzicht aanpassen.

1 Open op een van de volgende manieren het dialoogvenster Sitedefinitie:

• Selecteer Site > Sites beheren, kies de site en klik op Bewerken.

• Selecteer in het paneel Bestanden de optie Sites beheren uit het menu waarin de huidige site of server of het huidige

station wordt weergegeven, en klik op Bewerken.

2 Selecteer in het dialoogvenster Sitedefinitie de optie Lay-out site-overzicht uit de lijst met categorieën aan de linkerkant

en stel de opties in:

Aantal kolommen Hiermee stelt u het aantal pagina's in dat per rij moet worden weergegeven in het site-overzicht.

Kolombreedte Hiermee stelt u de breedte, in pixels, in van de kolommen van het site-overzicht.

DREAMWEAVER CS3

Handboek

Pictogramlabels Geef op of bij de documentpictogrammen in het site-overzicht de bestandsnaam of paginatitel moet

worden weergegeven.

Bestanden weergeven die zijn gemarkeerd als verborgen Hiermee worden in het site-overzicht HTML-bestanden

weergegeven die u als verborgen hebt gemarkeerd.

Afhankelijke bestanden weergeven Hiermee worden alle afhankelijke bestanden in de sitehiërarchie weergegeven.

3 Klik op OK en vervolgens op Gereed.

Verschillende takken in het site-overzicht weergeven

U kunt de details van een specifiek gedeelte van een site weergeven door een tak de focus van het site-overzicht te maken.

1 Selecteer de pagina die u wilt weergeven.

2 Ga op een van de volgende manieren te werk:

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op het site-overzicht in

selecteer Als hoofdelement weergeven.

• Klik in het standaardpaneel Bestanden (Venster > Bestanden) op het optiemenu in de rechterbovenhoek en selecteer

vervolgens Weergave > Mapopties weergeven > Als hoofdelement weergeven.

Het site-overzicht wordt opnieuw weergegeven in het venster alsof de opgegeven pagina het hoofdelement van de site is. In

het tekstvak Sitenavigatie boven het site-overzicht wordt het pad van de introductiepagina naar de opgegeven pagina

weergegeven. Selecteer een item in het pad en klik er één keer op om het site-overzicht weer te geven vanaf dat niveau.

3 U kunt takken in het site-overzicht uitvouwen en samenvouwen door op de plus (+)- of min (-)-knop van een tak te

klikken.

Meerdere pagina's in het site-overzicht selecteren.

• Ga op een van de volgende manieren te werk:

• Begin in een leeg gedeelte van de weergave en sleep rondom een groep bestanden om ze te selecteren.

• Houdt Control (Windows) of Command (Macintosh) ingedrukt terwijl u klikt om pagina's te selecteren die niet aan

elkaar grenzen.

• Houd Shift ingedrukt terwijl u klikt om een aantal aangrenzende pagina's te selecteren.

Een pagina in het site-overzicht openen om deze te bewerken

❖

Dubbelklik op het bestand, of klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh)

op het bestand, en selecteer vervolgens Openen.

Een bestaand bestand toevoegen aan de site

❖

Sleep het bestand van de Windows Verkenner of de Macintosh Finder naar een bestand in het site-overzicht, of klik met

de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op het bestand in het site-overzicht, en

selecteer vervolgens Koppeling naar bestaand bestand en blader naar het bestand.

Een nieuw bestand maken en een koppeling toevoegen aan het site-overzicht

1 Selecteer een bestand in het site-overzicht of klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt

houdt (Macintosh), en selecteer vervolgens Koppeling naar nieuw bestand.

2 Voer een naam, titel en tekst in voor de koppeling en klik op OK.

Dreamweaver slaat het bestand op in dezelfde map als het geselecteerde bestand. Als u een nieuw bestand toevoegt aan een

verborgen tak, wordt het nieuwe bestand ook verborgen.

DREAMWEAVER CS3

Handboek

De titel van een pagina wijzigen in het site-overzicht

1 Geef paginatitels weer door op het optiemenu in de rechterbovenhoek van het samengevouwen paneel Bestanden te

klikken en Bestand > Naam van weergave wijzigen > Paginatitels weergeven.

2 Selecteer een bestand in het site-overzicht en voer een van de volgende handelingen uit:

• Klik op de titel en voer een nieuwe titel in.

• Klik op het optiemenu in de rechterbovenhoek en selecteer vervolgens Bestand > Naam wijzigen.

3 Typ de nieuwe naam en druk op Enter (Windows) of Return (Macintosh).

Opmerking: Als u in het paneel Bestanden werkt, werkt Dreamweaver alle koppelingen bij naar bestanden waarvan de namen

zijn gewijzigd.

De weergave van het site-overzicht bijwerken nadat u wijzigingen hebt aangebracht

❖

Klik ergens in het site-overzicht om de selectie van bestanden op te heffen en klik op Vernieuwen op de werkbalk van

het paneel Bestanden.

Site-overzichtbestanden weergeven of verbergen

U kunt de lay-out van het site-overzicht wijzigen zodat verborgen en afhankelijke bestanden worden weergegeven of

verborgen. Dit is handig als u belangrijke onderwerpen of inhoud wilt benadrukken en minder belangrijk materiaal geen

nadruk wilt geven.

Als u een bestand wilt verbergen via het site-overzicht, moet u het bestand markeren als verborgen. Als u een bestand

verbergt, worden de koppelingen van het bestand ook verborgen. Als u een bestand weergeeft dat is gemarkeerd als

verborgen, worden het pictogram en de koppelingen zichtbaar in het site-overzicht, maar worden de namen cursief

weergegeven.

Opmerking: Standaard zijn afhankelijke bestanden al verborgen.

Bestanden markeren als verborgen in het site-overzicht

1 Selecteer een of meer bestanden in het site-overzicht.

2 Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens

Koppeling weergeven/verbergen.

De markering opheffen van bestanden die zijn gemarkeerd als verborgen in het site-overzicht

❖

Selecteer een of meer bestanden in het site-overzicht en ga op een van de volgende manieren te werk:

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) in het site-overzicht, en

selecteer vervolgens Koppeling weergeven/verbergen.

• Klik in het samengevouwen paneel Bestanden (Venster > Bestanden) op het optiemenu in de rechterbovenhoek en

selecteer vervolgens Weergave > Opties voor site-overzicht > Bestanden weergeven die zijn gemarkeerd als verborgen.

• Klik in het samengevouwen paneel Bestanden (Venster > Bestanden) op het optiemenu in de rechterbovenhoek en

selecteer vervolgens Weergave > Opties voor site-overzicht > Koppeling weergeven/verbergen.

Verborgen bestanden in het site-overzicht weergeven of verbergen

❖

Klik in het samengevouwen (standaard) paneel Bestanden (Venster > Bestanden) op het optiemenu in de

rechterbovenhoek en selecteer vervolgens Weergave > Opties voor site-overzicht > Bestanden weergeven die zijn

gemarkeerd als verborgen.

DREAMWEAVER CS3

Handboek

Afhankelijke bestanden in het site-overzicht weergeven

1 Klik in het samengevouwen (standaard) paneel Bestanden (Venster > Bestanden) op het optiemenu in de

rechterbovenhoek.

2 Selecteer Weergave > Opties voor site-overzicht > Afhankelijke bestanden tonen.

Het site-overzicht opslaan als een afbeelding

U kunt het site-overzicht opslaan als een afbeelding en de afbeelding weergeven in (of afdrukken vanuit) een

afbeeldingseditor.

1 Klik in het samengevouwen (standaard) paneel Bestanden (Venster > Bestanden) op het optiemenu in de

rechterbovenhoek en selecteer vervolgens Bestand > Site-overzicht opslaan.

2 Typ een naam in het tekstvak Bestandsnaam.

3 Selecteer .bmp of .png in het menu Bestandsnaam.

4 Selecteer een locatie waarin het bestand moet worden opgeslagen, geef een naam op voor de afbeelding en klik op

Opslaan.

Voorkeuren voor de lay-out van het site-overzicht instellen

U kunt het uiterlijk van het site-overzicht aanpassen.

1 Kies Site > Sites beheren en klik op Bewerken.

2 Selecteer op het tabblad Geavanceerd de categorie Lay-out site-overzicht.

3 Voer in het vak Introductiepagina het bestandspad naar de introductiepagina van de site in of klik op het mappictogram

om te bladeren naar het bestand.

De introductiepagina moet zich op de lokale site bevinden. Als u geen introductiepagina opgeeft of als Dreamweaver geen

bestand met de naam index.html of index.htm in de hoofdmap kan vinden, vraagt Dreamweaver u een introductiepagina

te selecteren wanneer u het site-overzicht opent.

4 Selecteer de gewenste opties voor kolommen:

• Typ in het vak Aantal kolommen een getal om op te geven hoeveel pagina's er per rij in het venster met het site-overzicht

moeten worden weergegeven.

• Typ in het vak Kolombreedte een getal om de breedte van de kolommen in pixels in het site-overzicht in te stellen.

5 Geef onder Pictogramlabels op of bij de documentpictogrammen in het site-overzicht de bestandsnaam of paginatitel

moet worden weergegeven.

6 Geef onder Opties op welke bestanden in het site-overzicht moeten worden weergegeven:

• Selecteer Bestanden weergeven die zijn gemarkeerd als verborgen om in het site-overzicht HTML-bestanden weer te

geven die u als verborgen hebt gemarkeerd.

Als een pagina verborgen is, worden de naam en koppelingen van deze pagina cursief weergegeven.

• Selecteer Afhankelijke bestanden weergeven als u alle afhankelijke bestanden in de hiërarchie van de site wilt weergeven.

Een afhankelijk bestand is een afbeeldingsbestand of een bestand met andere niet-HTML-inhoud dat door de browser

wordt geladen wanneer de hoofdpagina wordt geladen.

Zie ook

“Werken met een visueel overzicht van uw site” op pagina 49

DREAMWEAVER CS3

Handboek

Contribute-sites beheren met Dreamweaver

Contribute-sites beheren

In Adobe® Contribute® CS3 wordt een webbrowser gecombineerd met een webpagina-editor. Hiermee kunnen uw collega's

of klanten bladeren naar een pagina in een site die u hebt gemaakt en de pagina bewerken of bijwerken als ze daar

toestemming voor hebben. Contribute-gebruikers kunnen basiswebinhoud, waaronder opgemaakte tekst, afbeeldingen,

tabellen en koppelingen, toevoegen en bijwerken. Contribute-sitebeheerders kunnen beperken wat gewone gebruikers

(geen beheerders) in een site kunnen doen.

Opmerking: In dit onderwerp wordt ervan uitgegaan dat u een Contribute-beheerder bent.

Als de beheerder van de site geeft u niet-beheerders de mogelijkheid pagina's te bewerken door een verbindingssleutel te

maken en deze naar de gebruikers te verzenden (zie de Help van Contribute voor informatie over hoe u dit doet). U kunt

ook met Dreamweaver een verbinding met een Contribute-site instellen, waardoor u of de ontwerpen van de site verbinding

kan maken met de Contribute-site en alle edit-functies van Dreamweaver kan gebruiken.

Contribute voegt functionaliteit toe aan uw website met Contribute Publishing Server (CPS), een set

publicatietoepassingen en hulpmiddelen voor gebruikersbeheer waarmee u Contribute kunt integreren met de

adreslijstservice voor gebruikers van uw organisatie (bijvoorbeeld Lightweight Directory Access Protocol (LDAP) of Active

Directory). Als u uw Dreamweaver-site instelt als een Contribute-site, leest Dreamweaver de beheerinstellingen van

Contribute als u verbinding maakt met de externe site. Als Dreamweaver detecteert dat CPS is ingeschakeld, wordt een deel

van de functionaliteit van CPS overgenomen, zoals het terugdraaien van bestanden en registratie van gebeurtenissen.

U kunt met Dreamweaver verbinding maken met een bestand in een Contribute-site en dit wijzigen. De meeste functies

van Dreamweaver werken hetzelfde met een Contribute-site als met andere sites. Als u Dreamweaver echter gebruikt met

een Contribute-site, wordt de CPS-console automatisch door Dreamweaver gebruikt voor het uitvoeren van bepaalde

bestandsbeheerbewerkingen, zoals het opslaan van meerdere revisies van een document, en het registreren van bepaalde

gebeurtenissen.

Zie de Help bij Contribute voor meer informatie.

Sitestructuur en paginaontwerp voor een Contribute-site

Als u wilt dat Contribute-gebruikers uw website kunnen bewerken, moet u voor de structuur van de site rekening houden

met de volgende punten:

• Houd de sitestructuur eenvoudig. Nest de mappen niet te diep. Groepeer verwante items bij elkaar in een map.

• Stel de juiste lees- en schrijfmachtigingen voor mappen in op de server.

• Voeg indexpagina's toe aan mappen terwijl u die maakt, zodat Contribute-gebruikers worden gestimuleerd nieuwe

pagina's in de juiste mappen te plaatsen. Als Contribute-gebruikers bijvoorbeeld pagina's bijdragen met notulen van

vergaderingen, maakt u een map in de hoofdmap van de site met de naam vergadernotulen en maakt u in die map een

indexpagina. Zet vervolgens op de hoofdpagina van de site een koppeling naar de indexpagina voor vergadernotulen.

Een Contribute-gebruiker kan vervolgens naar die indexpagina gaan en een nieuwe pagina met notulen voor een

bepaalde vergadering maken, gekoppeld vanuit die pagina.

• Geef op de indexpagina van elke map een lijst met koppelingen naar de afzonderlijke inhoudspagina's en documenten

in die map.

• Houd het pagina-ontwerp zo eenvoudig mogelijk en houd leuke opmaak beperkt.

• Gebruik CSS in plaats van HTML-tags en geef uw CSS-stijlen duidelijke namen. Als de Contribute-gebruikers een

standaardset met stijlen in Microsoft Word gebruiken, gebruikt u dezelfde namen voor de CSS-stijlen, zodat Contribute

de stijlen kan toewijzen als een gebruiker informatie uit een Word-document kopieert en in een Contribute-pagina plakt.

• Om te voorkomen dat een CSS-stijl beschikbaar is voor Contribute-gebruikers, wijzigt u de naam van de stijl zodat deze

begint met mmhide_. Als u bijvoorbeeld een stijl met de naam RechtsUitgelijnd gebruikt op een pagina maar u niet wilt

dat Contribute-gebruikers die stijl kunnen gebruiken, wijzigt u de naam van de stijl in mmhide_RechtsUitgelijnd.

Opmerking: U moet mmhide_ toevoegen aan de stijlnaam in de codeweergave. U kunt dit niet toevoegen in het CSS-paneel.

DREAMWEAVER CS3

Handboek

• Gebruik zo weinig mogelijk CSS-stijlen, om de opmaak eenvoudig en rustig te houden.

• Als u include-bestanden op de server gebruikt voor HTML-pagina-elementen, zoals kop- en voetteksten, maakt u een

niet-gekoppelde HTML-pagina die koppelingen bevat naar de include-bestanden. Contribute-gebruikers kunnen die

pagina vervolgens toevoegen aan hun favorieten en ermee naar de include-bestanden bladeren zodat ze deze kunnen

bewerken.

Zie ook

“Een Dreamweaver-sjabloon maken” op pagina 377

“CSS maken en beheren” op pagina 121

“Werken met include-bestanden op de server” op pagina 325

Bestanden overbrengen naar en van een Contribute-site

Contribute gebruikt een systeem dat lijkt op het systeem voor het in- en uitchecken van bestanden van Dreamweaver om

ervoor te zorgen dat maar één gebruiker tegelijk een bepaalde webpagina kan bewerken. Als u Contribute-compatibiliteit

inschakelt in Dreamweaver, wordt het systeem voor het in- en uitchecken van bestanden van Dreamweaver automatisch

ingeschakeld.

Als u bestanden naar en van een Contribute-site wilt overbrengen met Dreamweaver, moet u altijd de opdrachten

Inchecken en Uitchecken gebruiken. Als u in plaats daarvan bestanden overbrengt met de opdrachten PUT en GET,

overschrijft u mogelijk de wijzigingen die een Contribute-gebruiker heeft aangebracht in een bestand.

Als u een bestand incheckt in een Contribute-site, maakt Dreamweaver een back-up van de vorige ingecheckte versie van

het bestand in de map _baks en worden uw gebruikersnaam en een datumstempel toegevoegd aan een Ontwerpnotities-

bestand.

Zie ook

“Bestanden in- en uitchecken” op pagina 87

Contribute-bestands- en mapmachtigingen op de server

Contribute biedt een manier voor het beheren van bestands- en mapmachtigingen voor elke door u gedefinieerde

gebruikersrol. U kunt met Contribute echter niet de onderliggende lees- en schrijfmachtigingen beheren die door de server

aan bestanden en mappen zijn toegewezen. In Dreamweaver kunt u die machtigingen rechtstreeks op de server beheren.

Als een Contribute-gebruiker geen leestoegang op de server heeft voor een afhankelijk bestand, zoals een afbeelding die op

een pagina wordt weergegeven, wordt de inhoud van het afhankelijke bestand niet weergegeven in het Contribute-venster.

Als een gebruiker bijvoorbeeld geen leestoegang heeft voor een map met afbeeldingen, worden de afbeeldingen in die map

in Contribute weergegeven als niet-werkende afbeeldingspictogrammen. Ook worden bijvoorbeeld Dreamweaver-

sjablonenopgeslagenineensubmapvandehoofdmapvandesite,dusalseenContribute-gebruikergeenleestoegangheeft

tot de hoofdmap, kan deze geen sjablonen in die site gebruiken, tenzij u de sjablonen naar een geschikte map kopieert.

Als u een Dreamweaver-site instelt, moet u gebruikers leestoegang op de server geven tot de map /_mm (de submap _mm

van de hoofdmap), de map /Templates en alle mappen die elementen bevatten die ze moeten kunnen gebruiken.

Als u om beveiligingsredenen gebruikers geen toegang kunt geven tot de map /Templates, kunt u Contribute-gebruikers

wel toegang geven tot sjablonen zonder dat ze toegang hebben tot de hoofdmap.

Zie Contribute beheren in de Help bij Contribute voor meer informatie over Contribute-machtigingen.

Speciale Contribute-bestanden

Contribute gebruikt een aantal speciale bestanden die niet bestemd zijn voor weergave aan bezoekers van uw site:

• Het gedeelde instellingenbestand, dat een betekenisloze bestandsnaam met de extensie CSI heeft, staat in een map met

de naam _mm in de hoofdmap van de site en bevat informatie waarmee Contribute de site beheert.

DREAMWEAVER CS3

Handboek

• Oudere versies van bestanden, in mappen met de naam _baks

• Tijdelijke versies van pagina's zodat gebruikers wijzigingen kunnen weergeven

• Tijdelijke vergrendelingsbestanden, waarmee wordt aangegeven dat een bepaalde pagina wordt bewerkt of bekeken

• Ontwerpnotities-bestanden die metagegevens bevatten over de pagina's van de site

In het algemeen moet u deze speciale Contribute-bestanden niet bewerken met Dreamweaver. Dreamweaver beheert ze

automatisch.

Als u niet wilt dat deze speciale Contribute-bestanden op uw openbaar toegankelijke server staan, kunt u een parkeerserver

instellen waarop Contribute-gebruikers aan pagina's kunnen werken. Kopieer die webpagina's vervolgens periodiek van de

parkeerserver naar een productieserver op internet. Als u op deze manier met een parkeerserver werkt, kopieert u alleen

webpagina's naar de productieserver en niet de hierboven genoemde speciale Contribute-bestanden. Kopieer met name

niet de mappen _mm en _baks naar de productieserver.

Opmerking: Zie 'Websitebeveiliging' in de Help bij Contribute voor informatie over het instellen van een server om te

voorkomen dat bezoekers bestanden kunnen zien in mappen die met een liggend streepje (_) beginnen.

Het kan gebeuren dat u speciale Contribute-bestanden handmatig moet verwijderen. Er zijn bijvoorbeeld omstandigheden

denkbaar waarin Contribute de tijdelijke voorbeeldpagina's niet verwijdert als de gebruiker klaar is met het bekijken van

de pagina's. In dat geval moet u die tijdelijke pagina's handmatig verwijderen. Tijdelijke voorbeeldpagina's hebben

bestandsnamen die met TMP beginnen.

Ook kan er onder bepaalde omstandigheden een verouderd vergrendelingsbestand op de server achterblijven. Als dat

gebeurt, moet u het vergrendelingsbestand handmatig verwijderen om ervoor te zorgen dat anderen de pagina kunnen

bewerken.

Een site voorbereiden voor gebruik met Contribute

Als u een bestaande Dreamweaver-site voorbereidt voor Contribute-gebruikers, moet u de Contribute-compatibiliteit

expliciet inschakelen om Contribute-functies te kunnen gebruiken. U wordt hier niet om gevraagd door Dreamweaver. Als

u echter verbinding maakt met een site die is ingesteld als een Contribute-site (en die een beheerder heeft), wordt u door

Dreamweaver gevraagd om de Contribute-compatibiliteit in te schakelen.

Opmerking: Voordat u de Contribute-compatibiliteit kunt inschakelen, moet u ervoor zorgen dat Contribute op dezelfde

computer is geïnstalleerd als Dreamweaver en moet u verbinding maken met de externe site. Als u dat niet doet, kan

Dreamweaver de beheerinstellingen van Contribute niet lezen en kan niet worden bepaald of CPS en terugdraaien zijn

ingeschakeld.

Niet alle verbindingstypen ondersteunen Contribute-compatibiliteit. De volgende beperkingen gelden voor

verbindingstypen:

• Als voor de verbinding met de externe site WebDAV of Microsoft Visual SourceSafe wordt gebruikt, kunt u de

Contribute-compatibiliteit niet inschakelen, omdat dergelijke bronbeheersystemen niet compatibel zijn met de systemen

voor Ontwerpnotities en het in- en uitchecken van bestanden die Dreamweaver gebruikt voor Contribute-bestanden.

• Als u RDS gebruikt voor de verbinding met uw externe site, kunt u de Contribute-compatibiliteit inschakelen, maar moet

u de verbinding aanpassen voordat u deze kunt delen met Contribute-gebruikers.

• Als u uw lokale computer gebruikt als een webserver, moet u de site instellen met een FTP- of netwerkverbinding met

uw computer (in plaats van gewoon een lokaal mappad) om de verbinding te kunnen delen met Contribute-gebruikers.

Als u Contribute-compatibiliteit inschakelt, schakelt Dreamweaver automatisch Ontwerpnotities (inclusief de optie

Ontwerpnotities uploaden om ze met anderen te delen) en het systeem voor het in- en uitchecken van bestanden in.

Als CPS (Contribute Publishing Server) is ingeschakeld op de externe site waarmee u verbinding maakt, verzendt

Dreamweaver elke keer dat u een netwerkbewerking activeert (zoals inchecken, terugdraaien of publiceren van een

bestand) een melding naar de CPS. De CPS registreert deze gebeurtenissen en u kunt het logboek weergeven in de

beheerconsole van de CPS. (Als u CPS uitschakelt, worden deze gebeurtenissen niet geregistreerd.)

Opmerking: CPS wordt ingeschakeld met Contribute. Zie Contribute beheren in de Help bij Contribute voor meer informatie.

1 Selecteer Site > Sites beheren.

DREAMWEAVER CS3

Handboek

2 Selecteer een site, klik op Bewerken en klik op het tabblad Geavanceerd.

3 Selecteer de categorie Contribute in de lijst met categorieën aan de linkerkant en selecteer Compatibiliteit met

Contribute inschakelen.

4 Als er een dialoogvenster wordt weergegeven met de mededeling dat u Ontwerpnotities en Inchecken/uitchecken moet

inschakelen, klikt u op OK.

5 Als u nog geen contactgegevens voor Inchecken/uitchecken hebt opgegeven, typt u uw naam en e-mailadres in het

dialoogvenster en klikt u op OK. In het dialoogvenster Sitedefinitie worden de terugdraaistatus, de CPS-status, het tekstvak

URL van hoofdmap van site en de knop voor het beheren van de website weergegeven.

Als terugdraaien is ingeschakeld in Contribute, hebt u de mogelijkheid eerdere versies van bestanden terug te halen die u

hebt gewijzigd in Dreamweaver.

6 Controleer de URL in het tekstvak URL van hoofdmap van site en corrigeer deze zo nodig. Dreamweaver bouwt een

URL voor de hoofdmap van de site op basis van andere sitedefinitiegegevens die u hebt opgegeven, maar soms klopt de

opgebouwde URL niet helemaal.

7 Klik op de knop Testen om te controleren of u de juiste URL hebt opgegeven.

Opmerking: Als u klaar bent om een verbindingssleutel te verzenden of om beheertaken voor de Contribute-site uit te voeren,

slaat u de overige stappen over.

8 Klik op De site beheren in Contribute.

9 Klik op OK en vervolgens op Gereed.

Zie ook

“Bestanden terugdraaien (Contribute-gebruikers)” op pagina 95

Een Contribute-site beheren met Dreamweaver

Nadat u de Contribute-compatibiliteit hebt ingeschakeld, kunt u met Dreamweaver Contribute starten om sitebeheertaken

uit te voeren.

Opmerking: Contribute moet op dezelfde computer zijn geïnstalleerd als Dreamweaver.

Als beheerder van een Contribute-site kunt u het volgende doen:

• De beheerinstellingen voor de site wijzigen.

Beheerinstellingen van Contribute zijn een verzameling instellingen die gelden voor alle gebruikers van uw website. Met

deze instellingen kunt u Contribute afstemmen zodat gebruikers er beter mee kunnen werken.

• De machtigingen wijzigen die zijn toegewezen aan gebruikersrollen in Contribute.

• Contribute-gebruikers instellen.

Contribute-gebruikers hebben bepaalde informatie over de site nodig om er verbinding mee te kunnen maken. U kunt al

deze informatie verpakken in een bestand dat een verbindingssleutel wordt genoemd en dat u naar alle Contribute-

gebruikers kunt verzenden.

Opmerking: Een verbindingssleutel is niet hetzelfde als een geëxporteerd Dreamweaver-sitebestand.

Voordat u Contribute-gebruikers de verbindingsgegevens geeft die ze nodig hebben voor het bewerken van pagina's, maakt

u met Dreamweaver de basismapstructuur voor uw site en maakt u de sjablonen en CSS-stijlpagina's die nodig zijn voor

de site.

1 Selecteer Site > Sites beheren.

2 Selecteer een site, klik op Bewerken en klik op het tabblad Geavanceerd.

3 Selecteer de categorie Contribute in de lijst met categorieën aan de linkerkant.

4 Klik op de knop De site beheren in Contribute.

Opmerking: Deze knop wordt niet weergegeven als u Contribute-compatibiliteit niet hebt ingeschakeld.

DREAMWEAVER CS3

Handboek

5 Typ desgevraagd het beheerderswachtwoord en klik op OK.

Het dialoogvenster Website beheren wordt geopend.

• Als u beheerinstellingen wilt wijzigen, selecteert u een categorie uit de lijst aan de linkerkant en wijzigt u vervolgens de

gewenste instellingen.

• Als u rolinstellingen wilt wijzigen, klikt u in de categorie Gebruikers en rollen op Rolinstellingen bewerken en wijzigt u

vervolgens de gewenste instellingen.

• Als u een verbindingssleutel wilt verzenden om gebruikers in te stellen, klikt u in de categorie Gebruikers en rollen op

Verbindingssleutel verzenden en voert u vervolgens de wizard voor verbindingen uit.

6 Klik achtereenvolgens op Sluiten, OK en Gereed.

Zie de Help bij Contribute voor meer informatie over beheerinstellingen, het beheren van gebruikersrollen en het maken

van een verbindingssleutel.

Zie ook

“Site-instellingen importeren en exporteren” op pagina 48

Een extern bestand op een Contribute-site verwijderen, verplaatsen of een andere naam

geven

Het verwijderen van een bestand van de externe server die fungeert als host voor een Contribute-site, werkt vrijwel

hetzelfdealshetverwijderenvaneenbestandvandeservervooreenDreamweaver-site.Alsuechtereenbestandverwijdert

van een Contribute-site, wordt u door Dreamweaver gevraagd of u alle oudere versies van het bestand wilt verwijderen. Als

u ervoor kiest de oudere versies te houden, slaat Dreamweaver een kopie van de huidige versie op in de map _baks zodat u

deze later kunt terugzetten.

Het hernoemen van een bestand of het verplaatsen van een bestand naar een andere map in een Contribute-site gaat op

dezelfde manier als in een Dreamweaver-site. In een Contribute-site hernoemt of verplaatst Dreamweaver ook de

gekoppelde eerdere versies van het bestand die zijn opgeslagen in de map _baks.

1 Selecteer het bestand in het paneel Extern van het paneel Bestanden (Venster > Bestanden) en druk vervolgens op

Backspace (Windows) of Delete (Macintosh).

Er wordt een dialoogvenster weergegeven waarin u wordt gevraagd te bevestigen of u het bestand wilt verwijderen.

2 Doe het volgende in dit dialoogvenster:

• Als u alle eerdere versies van het bestand en de huidige versie wilt verwijderen, schakelt u de optie Vorige versies

verwijderen in.

• Als u eerdere versies op de server wilt laten staan, schakelt u de optie Vorige versies verwijderen uit.

3 Klik op Ja om het bestand te verwijderen.

Contribute-gebruikers toegang tot sjablonen geven zonder ze toegang tot de hoofdmap

te geven

In een Contribute-site beheert u onderliggende bestands- en mapmachtigingen rechtstreeks op de server. Als u om

beveiligingsredenen gebruikers geen toegang kunt geven tot de map /Templates, kunt u de sjablonen wel beschikbaar

maken voor gebruikers.

1 Stel de Contribute-site zodanig in dat de hoofdmap de map is die gebruikers als hoofdmap moeten zien.

2 Kopieer de map met sjablonen handmatig van de hoofdmap van de hoofdsite naar de hoofdmap van de Contribute-site.

Gebruik hiervoor het paneel Bestanden.

3 Als u sjablonen voor de hoofdsite hebt bijgewerkt, kopieert u de gewijzigde sjablonen opnieuw naar de desbetreffende

submappen.

DREAMWEAVER CS3

Handboek

Als u deze werkwijze gebruikt, moet u geen hoofdmapafhankelijke relatieve koppelingen gebruiken in de submappen.

Hoofdmapafhankelijke relatieve koppelingen hebben betrekking op de hoofdmap op de server, en niet op de hoofdmap die

u definieert in Dreamweaver. Contribute-gebruikers kunnen geen hoofdmapafhankelijke relatieve koppelingen maken.

Als koppelingen in een Contribute-pagina niet lijken te werken, kan de oorzaak ook een probleem met de

mapmachtigingen zijn, zeker als de koppelingen verwijzen naar pagina's buiten de hoofdmap van de Contribute-gebruiker.

Controleer de lees- en schrijfmachtigingen voor mappen op de server.

Zie ook

“Documentlocaties en -paden” op pagina 267

Problemen met een Contribute-site oplossen

Als een extern bestand in een Contribute-site uitgecheckt lijkt te zijn maar het bestand niet vergrendeld is op de computer

van de gebruiker, kunt u het bestand ontgrendelen zodat gebruikers het kunnen bewerken.

Als u op een knop klikt die betrekking heeft op het beheren van een Contribute-site, controleert Dreamweaver of er

verbinding gemaakt kan worden met uw externe site en of de door u opgegeven URL voor de hoofdmap van de site geldig

is. Als Dreamweaver geen verbinding kan maken of als de URL niet geldig is, wordt een foutbericht weergegeven.

Als de beheerfuncties niet goed werken, is er mogelijk een probleem met de map _mm.

Een bestand in een Contribute-site ontgrendelen

Opmerking: Controleer voordat u deze procedure uitvoert of het bestand echt niet is uitgecheckt. Als u een bestand ontgrendelt

terwijl een Contribute-gebruiker het bewerkt, kunnen meerdere gebruikers het bestand gelijktijdig gaan bewerken.

1 Ga op een van de volgende manieren te werk:

• Open het bestand in het documentvenster en selecteer Site > Uitchecken ongedaan maken.

• Klik in het bestandenpaneel met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh)

en selecteer vervolgens Uitchecken ongedaan maken in het snelmenu.

Er wordt een dialoogvenster weergegeven waarin wordt aangegeven wie het bestand heeft uitgecheckt en waarin u wordt

gevraagd te bevestigen dat u het bestand wilt ontgrendelen.

2 Als dit dialoogvenster wordt weergegeven, klikt u op Ja om de vraag te bevestigen.

Het bestand wordt ontgrendeld op de server.

Verbindingsproblemen voor een Contribute-site oplossen

1 Controleer de URL voor de hoofdmap van de site in de categorie Contribute van het dialoogvenster Sitedefinitie door

die URL te openen in een browser en te kijken of de juiste pagina wordt geopend.

2 Gebruik de knop Testen in de categorie Externe informatie van het dialoogvenster Sitedefinitie om te controleren of u

verbinding kunt maken met de site.

3 Als de URL juist is maar de knop Testen een foutbericht oplevert, raadpleegt u uw systeembeheerder.

Problemen met beheerfuncties van Contribute oplossen

1 Controleer op de server of u lees- en schrijfmachtigingen, en zo nodig uitvoermachtigingen, hebt voor de map _mm.

2 Controleer of de map _mm een gedeeld instellingenbestand met de extensie CSI bevat.

3 Als dit niet het geval is, gebruikt u de wizard voor verbindingen (Windows) of de assistent voor verbindingen

(Macintosh) om een verbinding naar de site te maken en om beheerder van de site te worden. Het gedeelde

instellingenbestand wordt automatisch gemaakt als u beheerder wordt. Zie Contribute beheren in de Help bij Contribute

voor meer informatie over hoe u beheerder van een bestaande Contribute-website kunt worden.

DREAMWEAVER CS3

Handboek

Aan bestanden werken zonder een site te definiëren

Verbinding maken met een FTP-server zonder een site te definiëren

U kunt verbinding maken met een FTP-server om aan uw documenten te werken zonder een Dreamweaver-site te maken.

Als u aan bestanden werkt zonder een Dreamweaver-site te maken, kunt u geen bewerkingen voor de hele site uitvoeren,

zoals het controleren van koppelingen.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw en selecteer FTP- en RDS-servers.

3 Geef een naam voor de serververbinding op in het vak Naam. Dit is de naam die wordt weergegeven in het pop-upmenu

bovenaan in het paneel Bestanden.

4 Selecteer FTP in het menu Type toegang.

5 Voer de hostnaam in van de FTP-host waarnaar u bestanden voor uw website uploadt.

Uw FTP-host is de volledige internetnaam van een computersysteem, bijvoorbeeld ftp.mindspring.com. Voer de volledige

hostnaam in zonder extra tekst. Voeg vooral geen protocolnaam toe vóór de hostnaam.

Opmerking: Als u niet weet wat uw FTP-host is, neemt u contact op met uw internetprovider.

6 Voer de hostmap van de externe site in, waar u documenten opslaat die zichtbaar zijn voor het publiek.

7 Voer de aanmeldnaam en het wachtwoord in dat u gebruikt voor verbindingen met de FTP-server en klik vervolgens op

Testen om uw aanmeldnaam en wachtwoord te testen.

8 Schakel Opslaan in als u wilt dat Dreamweaver uw wachtwoord opslaat. (Als u deze optie niet inschakelt, wordt u elke

keer dat u verbinding maakt met de externe server, door Dreamweaver om een wachtwoord gevraagd.)

9 Selecteer Passieve FTP gebruiken als bij uw firewallconfiguratie het gebruik van passieve FTP verplicht is.

Met passieve FTP kan uw lokale software de FTP-verbinding opzetten in plaats van dat aan de externe server wordt

gevraagd de verbinding op te zetten. Als u niet zeker weet of u passieve FTP moet gebruiken, raadpleegt u uw

systeembeheerder.

10 Selecteer Firewall gebruiken als u verbinding maakt met de externe server van achter een firewall en klik vervolgens

op Firewall-instellingen om uw firewallhost of -poort te bewerken.

11 Selecteer Beveiligde FTP (SFTP) gebruiken voor beveiligde FTP-verificatie en klik op OK.

SFTP maakt gebruik van codering en openbare sleutels voor het beveiligen van een verbinding met uw testserver.

Opmerking: Er moet een SFTP-server worden uitgevoerd op uw server.

12 Klik op OK. In het paneel Bestanden wordt de inhoud weergegeven van de externe servermap waarmee u verbinding

hebt gemaakt. De servernaam wordt weergegeven in het pop-upmenu bovenaan in het paneel.

Zie ook

“Een externe map instellen” op pagina 41

Verbinding maken met een RDS-server zonder een site te definiëren

U kunt verbinding maken met een RDS-server om aan uw documenten te werken zonder een Dreamweaver-site te maken.

Als u aan bestanden werkt zonder een Dreamweaver-site te maken, kunt u geen bewerkingen voor de hele site uitvoeren,

zoals het controleren van koppelingen.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw en selecteer FTP- en RDS-servers.

3 Geef een naam voor de server op in het tekstveld Beschrijving. Dit is de naam die wordt weergegeven in het menu

bovenaan in het paneel Bestanden.

4 Selecteer RDS in het menu Type toegang.

DREAMWEAVER CS3

Handboek

5 Voer de URL in die gebruikers in de browser moeten typen om uw webtoepassing te openen, maar voeg geen

bestandsnaam toe.

Stel dat de URL van uw toepassing www.macromedia.com/mijncooletoepassing/start.jsp is. In dat geval voert u het

volgende URL-voorvoegsel in: www.adobe.com/mijncooletoepassing/.

6 Klik op de knop Instellingen om de toegangsgegevens op te geven.

7 Geef de gegevens op in het dialoogvenster RDS-server configureren en klik op OK.

Zie ook

“Een externe map instellen” op pagina 41

Opties van het tabblad Basis

Opties voor het bewerken van bestanden instellen op het tabblad Basis

De wizard Sitedefinitie heeft drie gedeelten waarmee u een Dreamweaver-site kunt instellen: bestanden bewerken,

bestanden testen en bestanden delen. Afhankelijk van de instellingen die u selecteert, kan een sectie uit meerdere schermen

bestaan. Bovenaan in het dialoogvenster ziet u aan de vetgedrukte sectienaam waar u zich bevindt in het proces. U hoeft

mogelijk niet in alledrie de secties mappen in te stellen. Met de vragen op het tabblad kunt u vaststellen wat u nodig hebt.

Het doel van dit dialoogvenster is om uw Dreamweaver-site een naam te geven en de URL op te geven.

Zie ook

“Over Dreamweaver-sites” op pagina 38

Uw Dreamweaver-site een naam geven

❖

Voer een naam in voor uw Dreamweaver-site.

Geef de URL van uw site op.

❖

Voer de URL (het HTTP-adres) van uw Dreamweaver-site in.

Dreamweaver gebruikt dit adres om te controleren of hoofdmapafhankelijke relatieve koppelingen zullen werken op de

server, waar de hoofdmap wellicht anders is. Als u bijvoorbeeld een koppeling maakt naar een afbeelding in de map

C:\Sales\images\ op uw vaste schijf (waar de map Sales is ingesteld als lokale hoofdmap) en de URL van uw site

http://www.mijnsite.com/SalesApp/ is (waar de map SalesApp uw externe hoofdmap is), voert u de URL in het tekstvak

HTTP-adres in om te zorgen dat het pad naar de gekoppelde afbeelding op de server /SalesApp/images/ is.

Opties voor het bewerken van bestanden instellen (deel 2) op het tabblad Basis

Het doel van dit dialoogvenster is om aan te geven waar u een webtoepassing opbouwt. Een webtoepassing is een

verzameling webpagina's die samenwerken met de gebruiker, met elkaar en met verschillende bronnen op een webserver,

waaronder databases.

Als u een webtoepassing bouwt, moet u de servertechnologie selecteren die op uw webserver wordt uitgevoerd.

1 Selecteer Nee als u niet van plan bent een servertechnologie te gebruiken om een webtoepassing te maken, of selecteer

Ja als u wel van plan bent een servertechnologie te gebruiken om een webtoepassing te maken.

2 Als u Ja hebt geselecteerd, selecteert u een servertechnologie.

U kunt Dreamweaver gebruiken voor het bouwen van webtoepassingen met vijf servertechnologieën: ColdFusion,

ASP.NET, ASP, JSP of PHP. Elk van deze technologieën komt overeen met een documenttype in Dreamweaver. Welke

technologie u kiest voor uw webtoepassing, is afhankelijk van verschillende factoren, waaronder hoe bekend u bent met

verschillende scripttalen en de toepassingsserver die u wilt gebruiken.

DREAMWEAVER CS3

Handboek

Zie ook

“De toepassingsserver kiezen” op pagina 477

Opties voor het bewerken van bestanden instellen (deel 3) op het tabblad Basis

Het doel van dit dialoogvenster is om uw ontwikkelomgeving te selecteren.

1 Selecteer de methode waarmee u tijdens de ontwikkeling aan bestanden werkt.

2 Maak een locatie waarin uw bestanden worden opgeslagen, of klik op het mappictogram om naar de map te bladeren.

Dit is de werkmap voor uw Dreamweaver-site. Het is de plaats waar u de bestanden voor eenDreamweaver-site opslaat

waaraan nog wordt gewerkt. In het paneel Bestanden van Dreamweaver wordt deze map weergegeven als de lokale site.

Zie ook

“Over lokale en externe mapstructuur” op pagina 38

Opties voor het testen van bestanden instellen (URL-voorvoegsel) op het tabblad Basis

Dit dialoogvenster wordt weergegeven als u eerder in het proces een servertechnologie hebt geselecteerd. Het doel van het

dialoogvenster is om een URL-voorvoegsel op te geven, zodat Dreamweaver uw testserver kan gebruiken voor het

weergegeven van gegevens en voor het maken van verbindingen met databases terwijl u werkt. Een URL-voorvoegsel

bestaat uit de domeinnaam en een van de submappen of virtuele mappen van de thuismap van uw website.

1 Voer de URL in die gebruikers in de browser moeten typen om uw webtoepassing te openen, maar voeg geen

bestandsnaam toe.

Stel dat de URL van uw toepassing www.adobe.com/mijncooletoepassing/start.jsp is. In dat geval voert u het volgende

URL-voorvoegsel in: www.adobe.com/mijncooletoepassing/.

Als Dreamweaver wordt uitgevoerd op dezelfde computer als uw webserver, kunt u de term localhost gebruiken als tijdelijke

aanduiding voor uw domeinnaam. Stel dat de URL van uw toepassing boterbloem_pc/mijncooletoepassing/start.jsp is. U

kunt dan het volgende URL-voorvoegsel invoeren: http://localhost/mijncooletoepassing/.

2 Klik op URL testen om te controleren of uw URL werkt.

Zie ook

“Een testserver instellen” op pagina 45

“Over het URL-voorvoegsel voor de testserver” op pagina 47

Opties voor het testen van bestanden instellen (externe toegang) op het tabblad Basis

Het doel van dit dialoogvenster is om een toegangsmethode te selecteren waarmee Dreamweaver toegang heeft tot uw

testserver.

Dreamweaver werkt met een testserver voor het genereren en weergeven van dynamische inhoud terwijl u werkt. De

testserver kan uw lokale computer, een ontwikkelingsserver, een parkeerserver of een productieserver zijn. Wat u kiest,

maakt niet uit, zolang de server maar de dynamische pagina's kan verwerken die u wilt gaan ontwikkelen.

❖ Selecteer een toegangsmethode uit het pop-upmenu en vul de desbetreffende tekstvakken in.

Geen Laat deze standaardinstelling ongewijzigd als u niet van plan bent uw site te uploaden naar een server.

FTP Gebruik deze instelling als u met FTP verbinding maakt met uw webserver.

Lokaal/Netwerk Gebruik deze instelling voor toegang tot een netwerkmap, of als u bestanden opslaat of uw testserver

uitvoert op uw lokale computer.

RDS (Remote Development Services) Gebruik deze instelling als u verbinding maakt met uw webserver met RDS. Voor

deze toegangsmethode moet uw externe map zich op een computer bevinden waarop ColdFusion wordt uitgevoerd.

DREAMWEAVER CS3

Handboek

Microsoft Visual SourceSafe Als u verbinding maakt met uw webserver met Microsoft Visual SourceSafe. Ondersteuning

voor deze methode is alleen beschikbaar voor Windows. Als u deze methode wilt gebruiken, moet u Microsoft Visual

SourceSafe Client versie 6 hebben geïnstalleerd.

WebDAV (Web-based Distributed Authoring and Versioning) Als u verbinding maakt met uw webserver met het WebDAV-

protocol.

Voor deze toegangsmethode moet u een server hebben die dit protocol ondersteunt, zoals Microsoft Internet Information

Server (IIS) 5.0 of een op de juiste manier geconfigureerde installatie van Apache-webserver.

Zie ook

“Een externe map instellen” op pagina 41

Opties voor de instelling van de externe map instellen op het tabblad Basis

Het doel van dit dialoogvenster is om te bepalen of u een externe servermap moet instellen.

Afhankelijke van uw omgeving is dit de map waarin u bestanden opslaat voor testen, samenwerking, productie,

implementatie of een aantal andere scenario's. De externe map staat meestal op de computer waarop de webserver wordt

uitgevoerd.

In het paneel Bestanden van Dreamweaver wordt deze map weergegeven als de externe site. De externe map zorgt ervoor

dat u bestanden kunt overbrengen tussen uw lokale schijf en de webserver, waardoor u gemakkelijke bestanden in uw

Dreamweaver-sites kunt delen en beheren.

❖ Kies of u een externe map wilt instellen door Ja te selecteren om een externe map in te stellen, of Nee om het instellen

van een lokale map over te slaan.

Zie ook

“Over lokale en externe mapstructuur” op pagina 38

Opties voor het delen van bestanden instellen (externe toegang) op het tabblad Basis

Het doel van dit dialoogvenster is om een toegangsmethode te selecteren waarmee Dreamweaver toegang heeft tot uw

testserver.

Dreamweaver werkt met een testserver voor het genereren en weergeven van dynamische inhoud terwijl u werkt. De

testserver kan uw lokale computer, een ontwikkelingsserver, een parkeerserver of een productieserver zijn. Wat u kiest,

maakt niet uit, zolang de server maar de dynamische pagina's kan verwerken die u wilt gaan ontwikkelen.

❖ Selecteer een toegangsmethode uit het pop-upmenu en vul de desbetreffende tekstvakken in.

Geen Laat deze standaardinstelling ongewijzigd als u niet van plan bent uw site te uploaden naar een server.

FTP Gebruik deze instelling als u met FTP verbinding maakt met uw webserver.

Lokaal/Netwerk Gebruik deze instelling voor toegang tot een netwerkmap, of als u bestanden opslaat of uw testserver

uitvoert op uw lokale computer.

RDS (Remote Development Services) Als u verbinding maakt met uw webserver met RDS. Voor deze toegangsmethode

moet uw externe map zich op een computer bevinden waarop ColdFusion wordt uitgevoerd.

Microsoft Visual SourceSafe Als u verbinding maakt met uw webserver met Microsoft Visual SourceSafe. Ondersteuning

voor deze methode is alleen beschikbaar voor Windows. Als u deze methode wilt gebruiken, moet u Microsoft Visual

SourceSafe Client versie 6 hebben geïnstalleerd.

WebDAV (Web-based Distributed Authoring and Versioning) Als u verbinding maakt met uw webserver met het WebDAV-

protocol.

Voor deze toegangsmethode moet u een server hebben die dit protocol ondersteunt, zoals Microsoft Internet Information

Server (IIS) 5.0 of een op de juiste manier geconfigureerde installatie van Apache-webserver.

DREAMWEAVER CS3

Handboek

Zie ook

“Een externe map instellen” op pagina 41

Opties voor het delen van bestanden instellen (inchecken/uitchecken) op het tabblad

Basis

Het doel van dit dialoogvenster is om het systeem voor het inchecken/uitchecken van bestanden in te stellen als u met

anderen samen aan dezelfde bestanden werkt (of als u alleen werkt, maar op meerdere computers).

Als u een bestand uitcheckt, is het niet meer beschikbaar op de server, zodat andere teamleden het bestand niet kunnen

bewerken met Dreamweaver. Als u een bestand incheckt, maakt u het bestand weer beschikbaar voor anderen, zodat zij het

bestand kunnen uitchecken en bewerken.

1 Selecteer Ja in om het in- en uitchecken van bestanden in te schakelen als u in een teamomgeving werkt (of als u alleen

werkt vanaf meerdere computers), of selecteer Nee om het in- en uitchecken van bestanden uit te schakelen.

Deze optie is handig om anderen te laten weten dat u een bestand hebt uitgecheckt om het te bewerken of om uzelf te

waarschuwen wanneer er op een andere computer een recentere versie van een bestand aanwezig is.

2 Selecteer Dreamweaver moet het bestand uitchecken als u wilt dat bestanden automatisch worden uitgecheckt als u ze

opent vanuit het paneel Bestanden, of selecteer de andere optie als u bestanden niet automatisch wilt uitchecken als u ze

opent.

Opmerking: Als u Bestand > Openen gebruikt om een bestand te openen, wordt het bestand niet uitgecheckt, zelfs niet als deze

optie is ingeschakeld.

3 Voer uw naam in.

Uw naam wordt in het paneel Bestanden weergegeven naast alle bestanden die u hebt uitgecheckt. Hierdoor kunnen

teamleden communiceren over het delen van bestanden.

Als u alleen werkt vanaf meerdere computers, kunt u voor elke computer een andere naam voor uitchecken gebruiken

(bijvoorbeeld KeesR-MacThuis en KeesR-PcKantoor) zodat u weet wat de laatste versie van het bestand is, als u vergeten

bent het bestand in te checken.

4 Voer uw e-mailadres in.

Als u hier een e-mailadres invoert, wordt wanneer u een bestand uitcheckt, naast dit bestand uw naam in het

bestandenpaneel als een koppeling (blauw en onderstreept) weergegeven. Als een teamlid op de koppeling klikt, wordt in

het standaard e-mailprogramma van deze persoon een nieuw bericht geopend met uw e-mailadres en een onderwerp dat

correspondeert met de bestands- en sitenaam.

Zie ook

“Bestanden in- en uitchecken” op pagina 87

Opties van het tabblad Basis (overzicht)

Op deze pagina worden de instellingen weergegeven die u voor uw site hebt geselecteerd.

Ga op een van de volgende manier te werk om het instellen van de site te voltooien:

• Klik op de knop Terug om terug te keren naar een eerdere pagina om een instelling te wijzigen.

• Klik op de knop Gereed als u tevreden bent met de instellingen en Dreamweaver de site wilt laten maken.

Als u op Gereed klikt, maakt Dreamweaver de site en wordt de site weergegeven in het paneel Bestanden.

• Klik op de knop Annuleren als u niet wilt dat Dreamweaver de site maakt.

Hoofdstuk 4: Bestanden maken en

beheren

U kunt niet alleen webpagina's maken, maar u kunt ook heel gemakkelijk alle bestanden en andere elementen die tot uw

website behoren, ordenen. U kunt bestanden maken, beheren en synchroniseren, bestanden in- en uitchecken, en testen

hoe uw site in diverse browsers werkt.

Documenten maken en openen

Over het maken van Dreamweaver-documenten

Dreamweaver biedt een flexibele omgeving voor het werken met diverse verschillende webdocumenten. Naast HTML-

documenten kunt u ook diverse soorten tekstdocumenten maken en openen, waaronder ColdFusion Markup Language

(CFML)-, ASP- en JavaScript-documenten en CSS-stijlpagina's (Cascading Style Sheets). Broncodebestanden, zoals Visual

Basic-, .NET-, C#- en Java-bestanden, worden ook ondersteund.

Dreamweaver biedt verscheidene opties voor het maken van een nieuw document. U kunt elk van de volgende documenten

maken:

• Een nieuw, leeg document of een nieuwe, lege sjabloon

• Een document dat is gebaseerd op een van de vooraf ontworpen pagina-indelingen, die worden geleverd bij

Dreamweaver, waaronder 30 op CSS gebaseerde pagina-indelingen

• Een document dat is gebaseerd op een van uw bestaande sjablonen

U kunt ook documentvoorkeuren instellen. Als u bijvoorbeeld vaak werkt met een bepaald type document, kunt u dat als

standaarddocumenttype instellen voor de nieuwe pagina's die u maakt.

U kunt zowel in de ontwerpweergave als de codeweergave gemakkelijk documenteigenschappen definiëren, zoals metatags,

de documenttitel, achtergrondkleuren en verscheidene andere pagina-eigenschappen.

Dreamweaver-bestandstypen

U kunt in Dreamweaver met allerlei verschillende bestandstypen werken. U zult het meest werken met HTML-bestanden.

HTML-bestanden (Hypertext Markup Language) bevatten codetaal die verantwoordelijk is voor de weergave van een

webpagina in een browser. U kunt HTML-bestanden opslaan met de extensie .html of .htm. In Dreamweaver worden

bestanden standaard opgeslagen met de extensie .html.

Hier volgens enkelen andere veelvoorkomende bestandstypen die u kunt gebruiken bij het werken in Dreamweaver:

CSS Cascading Style Sheet-bestanden hebben de extensie .CSS. Deze worden gebruikt om de HTML-inhoud op te maken

en om de positie van de verschillende pagina-elementen te bepalen.

GIF Graphics Interchange Format-bestanden hebben de extensie .GIF. De GIF-indeling is een populaire grafische

webindeling voor cartoons, logo's, afbeeldingen met transparante gebieden en animaties. GIF-bestanden bevatten

maximaal 256 kleuren.

JPEG Joint Photographic Experts Group-bestanden (genoemd naar de organisatie die de indeling heeft gemaakt) hebben

de extensie .JPG en zijn vaak foto's of afbeeldingen met vele kleuren. De JPEG-indeling kan het best worden gebruikt voor

digitale of gescande foto's, afbeeldingen met structuren, afbeeldingen met kleurverloop en afbeeldingen waarvoor meer dan

256 kleuren nodig zijn.

XML Extensible Markup Language-bestanden hebben de extensie .XML. Deze bestanden bevatten gegevens in onbewerkte

vorm die kunnen worden opgemaakt met XSL (Extensible Stylesheet Language).

DREAMWEAVER CS3

Handboek

XSL Extensible Stylesheet Language-bestanden hebben de extensie .XSL of .XSLT. Deze bestanden worden gebruikt om

XML-gegevens die u op een website wilt weergeven, op te maken.

CFML ColdFusion Markup Language-bestanden hebben de extensie .CFM. Deze bestanden worden gebruikt om

dynamische pagina's te maken.

ASPX ASP.NET-bestanden hebben de extensie .ASPX en worden gebruikt om dynamische pagina's te verwerken.

PHP Hypertext Preprocessor-bestanden hebben de extensie .PHP en worden gebruikt om dynamische pagina's te

verwerken.

Zie ook

“XML-gegevens weergeven” op pagina 401

“Toepassingen visueel samenstellen” op pagina 584

“Wat zijn CSS-stijlpagina's (Cascading Style Sheets)” op pagina 117

Een lege pagina maken

U kunt een pagina maken die een vooraf ontworpen CSS-indeling bevat, maar u kunt ook een volledig lege pagina maken

en vervolgens zelf uw eigen indeling maken.

1 Selecteer Bestand > Nieuw.

2 Selecteer in de categorie Lege pagina van het dialoogvenster Nieuw document het type pagina dat u wilt maken in de

kolom Paginatype. Selecteer bijvoorbeeld HTML als u een gewone HTML-pagina wilt maken, selecteer ColdFusion als u

een ColdFusion-pagina wilt maken enzovoort.

3 Als u een nieuwe pagina met een CSS-indeling wilt maken, selecteert u een vooraf ontworpen CSS-indeling in de kolom

Lay-out. Als u dat niet wilt, selecteert u Geen. Op basis van de opties die u hebt geselecteerd, worden er aan de rechterkant

van het dialoogvenster een voorvertoning en een beschrijving van de geselecteerde lay-out weergegeven.

De vooraf ontworpen CSS-indelingen bieden de volgende typen kolommen:

Vast De kolombreedte is opgegeven in pixels. De kolom wordt niet groter of kleiner op basis van de grootte van de browser

of de tekstinstellingen van de bezoeker van de site.

Elastisch De kolombreedte wordt opgegeven in een maateenheid (ems) die relatief is ten opzichte van de grootte van de

tekst. De breedte wordt automatisch aangepast als de bezoeker van de site de tekstinstellingen wijzigt, maar wordt niet

gewijzigd op basis van de grootte van het browservenster.

Liquid De kolombreedte wordt opgegeven als een percentage van de breedte van het browservenster van de bezoeker van

de site. De kolombreedte wordt automatisch aangepast als de bezoeker van de site de browser breder of smaller maakt, maar

wordt niet aangepast als de bezoeker van de site de tekstinstellingen wijzigt.

Hybride Voor kolommen worden de vorige drie opties gecombineerd. In de uit twee hybride kolommen bestaande indeling

heeft een zijbalk aan de rechterkant bijvoorbeeld een hoofdkolom waarvan de grootte wordt aangepast aan de grootte van

het browservenster, en rechts daarvan een elastische kolom waarvan de grootte wordt aangepast aan de tekstinstellingen

van de bezoeker van de site.

4 Selecteer een documenttype in het pop-upmenu DocType. In de meeste gevallen kunt u de standaardoptie gebruiken:

XHTML 1.0 overgang.

Als u een van de XHTML-documenttypedefinities in het menu DocType (DTD) selecteert, wordt de pagina XHTML-

compatibel. U kunt bijvoorbeeld een HTML-document maken dat voldoet aan de XHTML-standaard, door in het menu

de optie XHTML 1.0 overgang of XHTML 1.0 strikt te selecteren. XHTML (Extensible Hypertext Markup Language) is een

herformulering van HTML als een XML-toepassing. Gewoonlijk biedt het gebruik van XHTML u de voordelen van XML,

terwijl tegelijkertijd de compatibiliteit van uw webdocumenten met oudere, hedendaagse en toekomstige browsers is

gegarandeerd.

DREAMWEAVER CS3

Handboek

Opmerking: Als u meer informatie wilt hebben over XHTML, gaat u naar de website van het World Wide Web Consortium

(W3C). Hier vindt u de specificatie voor XHTML 1.1 - op modules gebaseerd XHTML (www.w3.org/TR/xhtml11/) en XHTML

1.0 (www.w3c.org/TR/xhtml1/) en ook XHTML-validatiesites voor bestanden op het web (http://validator.w3.org/) en lokale

bestanden (http://validator.w3.org/file-upload.html).

5 Als u in de kolom Lay-out een CSS-indeling hebt geselecteerd, selecteert u een locatie voor de CSS van de indeling in het

pop-upmenu Layout CSS.

Toevoegen aan kop Hiermee wordt CSS voor de indeling toegevoegd aan de kop van de pagina die u maakt.

Nieuw bestand maken Hiermee voegt u CSS voor de indeling toe aan een nieuw, extern CSS-bestand en koppelt u de

nieuwe stijlpagina aan de pagina die u maakt.

Aan bestaand bestand koppelen Hiermee kunt u een bestaand CSS-bestand opgeven dat reeds de CSS-regels bevat die

nodig zijn voor de indeling. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand

koppelen en selecteer een bestaande CSS-stijlpagina. Deze optie is vooral handig wanneer u dezelfde CSS-indeling (de CSS-

regels die zich in één bestand bevinden) voor meerdere documenten wilt gebruiken.

6 (Optioneel) U kunt ook CSS-stijlpagina's aan uw nieuwe pagina koppelen (los van de CSS-indeling) wanneer u de pagina

maakt. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand koppelen en selecteer een

CSS-stijlpagina.

7 Klik op Voorkeuren als u uw voorkeuren voor het standaarddocument wilt instellen, zoals documenttype, codering en

bestandsextensie.

8 Klik op Meer inhoud ophalen als u Dreamweaver Exchange wilt openen, waarin u meer inhoud voor het pagina-ontwerp

kunt downloaden.

9 Klik op de knop Maken.

10 Sla het nieuwe document op (Bestand > Opslaan).

11 Blader in het dialoogvenster dat wordt weergegeven naar de map waarin u het bestand wilt opslaan.

Het is raadzaam om uw bestand op een Dreamweaver-site op te slaan.

12 Typ in het vak Bestandsnaam een naam voor het bestand.

Gebruik geen spaties en speciale tekens in bestands- en mapnamen en laat een bestandsnaam niet beginnen met een cijfer.

Gebruik vooral geen speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de

namen van bestanden die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden

gewijzigd, waardoor koppelingen naar de bestanden niet meer werken.

Zie ook

“De XHTML-code die Dreamweaver genereert” op pagina 289

“Pagina's met CSS opmaken” op pagina 140

“Standaardocumenttype en -codering instellen” op pagina 70

Een lege sjabloon maken

U kunt het dialoogvenster Nieuw document gebruiken om Dreamweaver-sjablonen te maken. Sjablonen worden standaard

opgeslagen in de map Sjablonen op uw site.

1 Selecteer Bestand > Nieuw.

2 Selecteer in het dialoogvenster Nieuw document de categorie Lege sjabloon.

3 Selecteer het type pagina dat u wilt maken in de kolom Paginatype. Selecteer bijvoorbeeld HTML-sjabloon als u een

gewone HTML-sjabloon wilt maken, selecteer ColdFusion als u een ColdFusion-sjabloon wilt maken enzovoort.

4 Als u een nieuwe pagina met een CSS-indeling wilt maken, selecteert u een vooraf ontworpen CSS-indeling in de kolom

Lay-out. Als u dat niet wilt, selecteert u Geen. Op basis van de opties die u hebt geselecteerd, worden er aan de rechterkant

van het dialoogvenster een voorvertoning en een beschrijving van de geselecteerde lay-out weergegeven.

DREAMWEAVER CS3

Handboek

De vooraf ontworpen CSS-indelingen bieden de volgende typen kolommen:

Vast De kolombreedte is opgegeven in pixels. De kolom wordt niet groter of kleiner op basis van de grootte van de browser

of de tekstinstellingen van de bezoeker van de site.

Elastisch De kolombreedte wordt opgegeven in een maateenheid (ems) die relatief is ten opzichte van de grootte van de

tekst. De breedte wordt automatisch aangepast als de bezoeker van de site de tekstinstellingen wijzigt, maar wordt niet

gewijzigd op basis van de grootte van het browservenster.

Liquid De kolombreedte wordt opgegeven als een percentage van de breedte van het browservenster van de bezoeker van

de site. De kolombreedte wordt automatisch aangepast als de bezoeker van de site de browser breder of smaller maakt, maar

wordt niet aangepast als de bezoeker van de site de tekstinstellingen wijzigt.

Hybride Voor kolommen worden de vorige drie opties gecombineerd. In de uit twee hybride kolommen bestaande indeling

heeft een zijbalk aan de rechterkant bijvoorbeeld een hoofdkolom waarvan de grootte wordt aangepast aan de grootte van

het browservenster, en rechts daarvan een elastische kolom waarvan de grootte wordt aangepast aan de tekstinstellingen

van de bezoeker van de site.

5 Selecteer een documenttype in het pop-upmenu DocType. In de meeste gevallen kunt u de standaardoptie die is

geselecteerd, ongewijzigd laten: XHTML 1.0 overgang.

Als u een van de XHTML-documenttypedefinities in het menu DocType (DTD) selecteert, wordt de pagina XHTML-

compatibel. U kunt bijvoorbeeld een HTML-document maken dat voldoet aan de XHTML-standaard, door in het menu

de optie XHTML 1.0 overgang of XHTML 1.0 strikt te selecteren. XHTML (Extensible Hypertext Markup Language) is een

herformulering van HTML als een XML-toepassing. Gewoonlijk biedt het gebruik van XHTML u de voordelen van XML,

terwijl tegelijkertijd de compatibiliteit van uw webdocumenten met oudere, hedendaagse en toekomstige browsers is

gegarandeerd.

Opmerking: Als u meer informatie wilt hebben over XHTML, gaat u naar de website van het World Wide Web Consortium

(W3C). Hier vindt u de specificatie voor XHTML 1.1 - op modules gebaseerd XHTML (www.w3.org/TR/xhtml11/) en XHTML

1.0 (www.w3c.org/TR/xhtml1/) en ook XHTML-validatiesites voor bestanden op het web (http://validator.w3.org/) en lokale

bestanden (http://validator.w3.org/file-upload.html).

6 Als u in de kolom Lay-out een CSS-indeling hebt geselecteerd, selecteert u een locatie voor de CSS van de indeling in het

pop-upmenu Layout CSS.

Toevoegen aan kop Hiermee wordt CSS voor de indeling toegevoegd aan de kop van de pagina die u maakt.

Nieuw bestand maken Hiermee voegt u CSS voor de indeling toe aan een nieuw, extern CSS-bestand en koppelt u de

nieuwe stijlpagina aan de pagina die u maakt.

Aan bestaand bestand koppelen Hiermee kunt u een bestaand CSS-bestand opgeven dat reeds de CSS-regels bevat die

nodig zijn voor de indeling. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand

koppelen en selecteer een bestaande CSS-stijlpagina. Deze optie is vooral handig wanneer u dezelfde CSS-indeling (de CSS-

regels die zich in één bestand bevinden) voor meerdere documenten wilt gebruiken.

7 (Optioneel) U kunt ook CSS-stijlpagina's aan uw nieuwe pagina koppelen (los van de CSS-indeling) wanneer u de pagina

maakt. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand koppelen en selecteer een

CSS-stijlpagina.

8 Klik op Voorkeuren als u uw voorkeuren voor het standaarddocument wilt instellen, zoals documenttype, codering en

bestandsextensie.

9 Klik op Meer inhoud ophalen als u Dreamweaver Exchange wilt openen, waarin u meer inhoud voor het pagina-ontwerp

kunt downloaden.

10 Klik op de knop Maken.

11 Sla het nieuwe document op (Bestand > Opslaan). Als u nog geen bewerkbare gebieden aan de sjabloon hebt

toegevoegd, wordt er een dialoogvenster weergegeven waarin wordt vermeld dat er geen bewerkbare gebieden in het

document aanwezig zijn. Klik op OK om het dialoogvenster te sluiten.

12 Selecteer in het dialoogvenster Opslaan als sjabloon een site waar de sjabloon moet worden opgeslagen en voeg in het

vak Beschrijving een beschrijving van de sjabloon toe.

DREAMWEAVER CS3

Handboek

13 Typ in het vak Bestandsnaam een naam voor de nieuwe sjabloon. U hoeft geen bestandsextensie aan de naam van de

sjabloon toe te voegen. Wanneer u op Opslaan klikt, wordt de extensie .DWT aan de nieuwe sjabloon toegevoegd en wordt

de sjabloon in de map Sjablonen van uw site opgeslagen.

Gebruik geen spaties en speciale tekens in bestands- en mapnamen en laat een bestandsnaam niet beginnen met een cijfer.

Gebruik vooral geen speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de

namen van bestanden die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden

gewijzigd, waardoor koppelingen naar de bestanden niet meer werken.

Zie ook

“De XHTML-code die Dreamweaver genereert” op pagina 289

“Pagina's met CSS opmaken” op pagina 140

“Sjablonen maken en beheren” op pagina 370

“Een Dreamweaver-site opzetten” op pagina 38

“Standaardocumenttype en -codering instellen” op pagina 70

Een pagina maken op basis van een bestaande sjabloon

U kunt een nieuw document selecteren, voorvertonen en maken vanuit een bestaande sjabloon. U kunt het dialoogvenster

Nieuw document gebruiken om een sjabloon te selecteren vanuit een van uw Dreamweaver-sites. U kunt ook het

middelenpaneel gebruiken om een nieuw document te maken op basis van een bestaande sjabloon.

Zie ook

“Sjablonen maken en beheren” op pagina 370

“Een Dreamweaver-site opzetten” op pagina 38

“Standaardocumenttype en -codering instellen” op pagina 70

Een document maken op basis van een sjabloon

1 Selecteer Bestand > Nieuw.

2 Selecteer in het dialoogvenster Nieuw document de categorie Pagina uit voorbeeld.

3 SelecteerindekolomSitedeDreamweaver-sitemetdesjabloondieuwiltgebruiken.Selecteervervolgenseensjabloon

in de lijst aan de rechterkant.

4 Schakel de optie Pagina bijwerken wanneer sjabloon wordt gewijzigd uit als u niet wilt dat deze pagina telkens wordt

bijgewerkt wanneer u wijzigingen aanbrengt in de sjabloon waarop deze pagina is gebaseerd.

5 Klik op Voorkeuren als u uw voorkeuren voor het standaarddocument wilt instellen, zoals documenttype, codering en

bestandsextensie.

6 Klik op Meer inhoud ophalen als u Dreamweaver Exchange wilt openen, waarin u meer inhoud voor het pagina-ontwerp

kunt downloaden.

7 Klik op Maken en sla het document op (Bestand > Opslaan).

Een document maken vanuit het middelenpaneel

1 Open het middelenpaneel (Venster > Middelen), als dit nog niet geopend is.

2 Klik in het middelenpaneel op het pictogram Sjablonen aan de linkerkant om de lijst met sjablonen op de huidige

site weer te geven.

Als u zojuist de sjabloon hebt gemaakt die u wilt toepassen, moet u mogelijk op de knop Vernieuwen klikken om deze

sjabloon weer te geven.

3 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op de sjabloon die u wilt

toepassen, en selecteer vervolgens Nieuw van sjabloon.

DREAMWEAVER CS3

Handboek

Het document wordt in het documentvenster geopend.

4 Sla het document op.

Een pagina maken op basis van een Dreamweaver-voorbeeldbestand

Bij Dreamweaver worden allerlei verschillende door professionals ontworpen bestanden geleverd met paginalay-outs en

ontwerpelementen. U kunt deze voorbeeldbestanden gebruiken als uitgangspunt voor het ontwerpen van de pagina's van

uw sites. Wanneer u een document maakt op basis van een voorbeeldbestand, maakt Dreamweaver een kopie van het

bestand.

U kunt in het dialoogvenster Nieuw document een voorbeeldbestand voorvertonen en een korte beschrijving lezen van de

ontwerpelementen van een document. In het geval van CSS-stijlpagina's kunt u een vooraf gedefinieerde stijlpagina

kopiëren en deze op uw documenten toepassen.

Opmerking: Als u een document maakt dat is gebaseerd op een vooraf gedefinieerde frameset, wordt alleen de structuur van

de frameset gekopieerd en niet de frame-inhoud. Bovendien moet u elk framebestand afzonderlijk opslaan.

1 Selecteer Bestand > Nieuw.

2 Selecteer in het dialoogvenster Nieuw document de categorie Pagina uit voorbeeld.

3 Selecteer in de kolom Voorbeeldmap de optie CSS Style Sheet, Frameset, Starter Page (Theme) of Starter Page (Basic) en

selecteer vervolgens een voorbeeldbestand in de lijst aan de rechterkant.

4 Klik op de knop Maken.

Het nieuwe document wordt in het documentvenster (ontwerpweergave) weergegeven. Als u CSS Style Sheet hebt

geselecteerd, wordt de CSS-stijlpagina in de codeweergave geopend.

5 Sla het document op (Bestand > Opslaan).

6 Als het dialoogvenster Afhankelijke bestanden kopiëren verschijnt, stelt u de opties in en klikt u vervolgens op Kopiëren

om de elementen naar de geselecteerde map te kopiëren.

Ukuntuweigenlocatievoorafhankelijkebestandenkiezenofdestandaardmaplocatiegebruiken,diedoorDreamweaver

wordt gegenereerd (op basis van de bronnaam van het voorbeeldbestand).

Zie ook

“Wat zijn CSS-stijlpagina's (Cascading Style Sheets)” op pagina 117

“Frame- en framesetbestanden opslaan” op pagina 200

Andere soorten pagina's maken

In de categorie Overige van het dialoogvenster Nieuw document kunt u allerlei verschillende typen pagina's maken die

kunnen worden gebruikt in Dreamweaver, waaronder C#- en VBScript-pagina's en pagina's met alleen tekst.

1 Selecteer Bestand > Nieuw.

2 Selecteer in het dialoogvenster Nieuw document de categorie Overige.

3 Selecteer in de kolom Paginatype het type document dat u wilt maken, en klik op de knop Maken.

4 Sla het document op (Bestand > Opslaan).

Standaardocumenttype en -codering instellen

U kunt opgeven welk documenttype standaard moet worden gebruikt voor een site.

Als de meeste pagina's op uw site pagina's van een specifiek type zijn (zoals ColdFusion-, HTML- of ASP-documenten),

kunt u documentvoorkeuren instellen om ervoor te zorgen dat er automatisch nieuwe documenten van dat specifieke

bestandstype worden gemaakt.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

DREAMWEAVER CS3

Handboek

U kunt ook op de knop Voorkeuren in het dialoogvenster Nieuw document klikken om uw voorkeuren voor nieuwe

documenten in te stellen wanneer u een nieuw document maakt.

2 Klik in de lijst met categorieën aan de linkerkant op Nieuw document.

3 Stel de gewenste voorkeuren in of wijzig deze als dat nodig is en klik op OK om de voorkeuren op te slaan.

Standaarddocument Selecteer een documenttype dat moet worden gebruikt voor de pagina's die u maakt.

Standaardextensie Geef de gewenste bestandsextensie op (.htm of .html) voor de nieuwe HTML-pagina's die u maakt.

Opmerking: Deze optie is uitgeschakeld voor andere bestandstypen.

Standaarddocumenttype (DDT) Selecteer een van de XHTML-documenttypedefinities (DTD) om ervoor te zorgen dat de

nieuwe pagina's voldoen aan de XHTML-standaard. U kunt bijvoorbeeld een HTML-document maken dat voldoet aan de

XHTML-standaard, door in het menu de optie XHTML 1.0 overgang of XHTML 1.0 strikt te selecteren.

Standaardcodering Geef de codering op die moet worden gebruikt als er een nieuwe pagina wordt gemaakt en die ook

moet worden gebruikt als er een document wordt geopend waarvoor geen enkele codering is opgegeven.

Als u Unicode (UTF-8) selecteert als documentcodering, is eenheidscodering niet nodig, omdat UTF-8 zonder problemen

alle tekens kan vertegenwoordigen. Als u een andere documentcodering selecteert, hebt u mogelijk eenheidscodering

nodig voor het vertegenwoordigen van bepaalde tekens. Zie www.w3.org/TR/REC-html40/sgml/entities.html voor meer

informatie over tekeneenheden.

Als u Unicode (UTF-8) selecteert als standaardcodering, kunt u een BOM (Byte Order Mark) in het document opnemen

door de optie Unicode-handtekening (BOM) opnemen te selecteren.

Een BOM bestaat uit de 2 tot 4 bytes aan het begin van een tekstbestand waarmee het bestand kan worden geïdentificeerd

als een Unicode-bestand en waarmee ook de bytevolgorde van de volgende bytes wordt aangegeven. Omdat UTF-8 geen

bytevolgorde heeft, is het toevoegen van een UTF-8 BOM optioneel. Voor UTF-16 en UTF-32 is het verplicht.

Unicode-formulieren Selecteer een van deze opties als u Unicode (UTF-8) als standaardcodering selecteert.

Er zijn vier UNF's. De belangrijkste procedure is normalisatieprocedure C omdat deze het vaakst wordt gebruikt in het

tekenmodel voor internet. Voor de volledigheid biedt Adobe de drie andere UNF's ook aan.

Dialoogvenster Nieuw document tonen wanneer Control+N wordt ingedrukt Schakel deze optie uit (voor Command+N

voor Macintosh) als u wilt dat er automatisch een document van het standaarddocumenttype wordt gemaakt wanneer u

deze toetsencombinatie gebruikt.

In Unicode worden tekens gebruikt die er op het oog precies eender uitzien, maar binnen het document op verschillende

manieren kunnen zijn opgeslagen. De letter 'ë' (e-umlaut) kan bijvoorbeeld worden vertegenwoordigd door één teken, de

e-umlaut, of door twee tekens, de normale Latijnse 'e' plus de umlaut. Een Unicode-combinatieteken is een teken dat samen

met het voorgaande teken wordt gebruikt. In dit geval zou de umlaut dus worden weergegeven boven de Latijnse 'e'. Beide

vormen hebben dezelfde visuele typografie als resultaat, maar voor elke vorm wordt iets anders opgeslagen in het bestand.

Normalisatie is het proces dat ervoor zorgt dat de tekens die in verschillende vormen kunnen worden opgeslagen, allemaal

in een en dezelfde vorm worden opgeslagen. In dit geval betekent dat dat alle 'ë'-tekens in een document zijn opgeslagen

als één e-umlaut of als 'e' plus de umlaut en dat niet beide vormen in één document zijn opgeslagen.

Als u meer informatie wilt hebben over Unicode-normalisatie en de specifieke vormen die kunnen worden gebruikt, gaat

u naar de Unicode-website op www.unicode.org/reports/tr15.

Zie ook

“De XHTML-code die Dreamweaver genereert” op pagina 289

“Over het coderen van documenten” op pagina 208

DREAMWEAVER CS3

Handboek

De standaardbestandsextensie van nieuwe HTML-documenten instellen

U kunt de standaardbestandsextensie instellen voor HTML-documenten die in Dreamweaver worden gemaakt. U kunt

bijvoorbeeld de opdracht geven de extensie .htm of .html te gebruiken voor alle nieuwe HTML-documenten.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

U kunt ook op de knop Voorkeuren in het dialoogvenster Nieuw document klikken om uw voorkeuren voor nieuwe

documenten in te stellen wanneer u een nieuw document maakt.

2 Klik in de lijst met categorieën aan de linkerkant op Nieuw document.

3 Zorg ervoor dat bij Standaarddocumenttype de optie HTML is geselecteerd.

4 Geef in het vak Standaardextensie de bestandsextensie op die moet worden gebruikt voor nieuwe HTML-documenten

die in Dreamweaver worden gemaakt.

Voor Windows kunt u de volgende extensies opgeven: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.

Voor Macintosh kunt u de volgende extensies opgeven: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.

Bestaande documenten openen en bewerken

U kunt bestaande webpagina's of tekstdocumenten, die al dan niet in Dreamweaver zijn gemaakt, openen en in de

ontwerpweergave of codeweergave bewerken.

Als het document dat u opent, een Microsoft Word-bestand is dat als een HTML-document is opgeslagen, kunt u de

opdracht Word-HTML opruimen gebruiken om de extra opmaakcodes die Word in HTML-bestanden invoegt, te

verwijderen.

Als u HTML- of XHTML-codes wilt opruimen die niet door Microsoft Word zijn gegenereerd, gebruikt u de opdracht

HTML opruimen.

U kunt ook tekstbestanden openen die geen HTML bevatten, zoals JavaScript-bestanden, XML-bestanden, CSS-

stijlpagina's of tekstbestanden die in tekstverwerkingsprogramma's of teksteditors zijn opgeslagen.

1 Selecteer Bestand > Openen.

U kunt ook het bestandenpaneel gebruiken om bestanden te openen.

2 Ga naar het bestand dat u wilt openen en selecteer dit bestand.

Opmerking: Het is verstandig om bestanden die u wilt openen en bewerken, op een Dreamweaver-website te plaatsen, in plaats

van deze te openen vanaf een andere locatie.

3 Klik op Openen.

Het document wordt in het documentvenster geopend. JavaScript-bestanden, tekstbestanden en CSS-stijlpagina's worden

standaard in de codeweergave geopend. U kunt het document bijwerken terwijl u in Dreamweaver werkt en alle

wijzigingen in het bestand opslaan.

Zie ook

“Code opschonen” op pagina 312

“Een externe editor openen voor mediabestanden” op pagina 260

“Werken met bestanden in het bestandenpaneel” op pagina 77

“Een lokale hoofdmap instellen en bewerken” op pagina 40

HTML-bestanden uit Microsoft Word opschonen

U kunt documenten die in Microsoft Word als HTML-bestanden zijn opgeslagen, openen en vervolgens de opdracht Word-

HTML opruimen gebruiken om de externe HTML-codes die door Word zijn gegenereerd, te verwijderen. De opdracht

Word-HTML opruimen is beschikbaar voor documenten die als HTML-bestanden zijn opgeslagen in Word 97 of hoger.

DREAMWEAVER CS3

Handboek

De codes die Dreamweaver verwijdert, worden door Word voornamelijk gebruikt om de documenten in Word op te maken

en weer te geven en zijn niet nodig om het HTML-bestand weer te geven. Bewaar een kopie van het oorspronkelijke Word-

bestand (.doc) als reservekopie, want mogelijk kunt u het HTML-bestand niet meer openen in Word nadat u de opdracht

Word-HTML opruimen hebt uitgevoerd.

Als u HTML- of XHTML-codes wilt opruimen die niet door Microsoft Word zijn gegenereerd, gebruikt u de opdracht

HTML opruimen.

1 Sla uw Microsoft Word-document op als een HTML-bestand.

Opmerking: AlsuinWindowswerkt,moetuhetbestandinWordsluitenomtevoorkomendatereenfoutoptreedt,wanthet

bestand kan niet worden gedeeld.

2 Open het HTML-bestand in Dreamweaver.

Als u de HTML-codes wilt zien die door Word zijn gegenereerd, schakelt u over naar de codeweergave (Weergave > Code).

3 Selecteer Opdrachten > Word-HTML opruimen.

Opmerking: Als Dreamweaver niet kan vaststellen welke versie van Word is gebruikt om het bestand op te slaan, selecteert u

de juiste versie in het pop-upmenu.

4 Schakel de gewenste opties voor het opruimen in (en schakel de ongewenste opties uit). De voorkeuren die u opgeeft,

worden als standaardinstellingen voor het opruimen opgeslagen.

Dreamweaver past de opruiminstellingen toe op het HTML-document en er verschijnt een logboek met de aangebrachte

wijzigingen (tenzij u die optie in het dialoogvenster hebt uitgeschakeld).

Alle Word-specifieke opmaakcodes verwijderen Hiermee verwijdert u alle Microsoft Word-specifieke HTML-code,

inclusief XML uit HTML-tags, aangepaste Word-metagegevens en koppelingstags in de kop van het document, XML-

opmaakcodes van Word, voorwaardelijke tags en hun inhoud, en lege alinea's en marges uit stijlen. U kunt elk van deze

opties afzonderlijk selecteren op het tabblad Gedetailleerd.

CSS opruimen Hiermee verwijdert u alle Word-specifieke CSS-stijlen, waaronder inline CSS-stijlen als dat mogelijk is (als

de bovenliggende stijl dezelfde stijleigenschappen heeft), stijlkenmerken die beginnen met 'mso', declaraties van niet-CSS-

stijlen, CSS-stijlkenmerken uit tabellen en alle ongebruikte stijldefinities uit de kop. U kunt deze opties verder aanpassen

op het tabblad Gedetailleerd.

<font>-tags opruimen Hiermee verwijdert u HTML-tags en converteert u de standaardhoofdtekst naar HTML-tekst van

grootte 2.

Onjuist geneste tags corrigeren Hiermee verwijdert u opmaaktags voor lettertypen die door Word zijn ingevoegd buiten

de alinea- en koptags (op blokniveau).

Achtergrondkleur instellen Hier kunt u een hexadecimale waarde invoeren om de achtergrondkleur van uw document in

te stellen. Als u geen achtergrondkleur instelt, krijgt uw HTML-pagina uit Word een grijze achtergrond. De hexadecimale

standaardwaarde is wit.

Bronopmaak toepassen Hiermee past u de opties voor bronopmaak, die u als voorkeuren voor HTML-opmaak en in het

bestand SourceFormat.txt hebt opgegeven, toe op het document.

Logboek tonen bij voltooiing Toont een waarschuwingsvenster met informatie over de wijzigingen die in het document

zijn aangebracht nadat de opschoonbewerking is voltooid.

5 Klik op OK of ga naar het tabblad Gedetailleerd als u de opties voor het verwijderen van alle Word-specifieke

opmaakcodes en het opruimen van CSS-stijlen verder wilt aanpassen en klik vervolgens op OK.

Zie ook

“Code opschonen” op pagina 312

“Microsoft Office-documenten importeren (alleen Windows)” op pagina 225

DREAMWEAVER CS3

Handboek

Bestanden en mappen beheren

Over het beheren van bestanden en mappen

Dreamweaver omvat een paneel Bestanden waarmee u bestanden kunt beheren en van en naar een externe server kunt

overbrengen. Als u bestanden van lokale naar externe sites overbrengt en omgekeerd, worden parallelle bestands- en

mapstructuren gebruikt voor de sites. Als u bestanden overbrengt naar andere sites, maakt Dreamweaver de bijbehorende

mappen als die nog niet bestaan op de site. U kunt de bestanden ook synchroniseren tussen uw lokale en externe sites;

Dreamweaver kopieert bestanden indien nodig in beide richtingen en verwijdert ongewenste bestanden als dat aangewezen is.

Het bestandenpaneel gebruiken

Het bestandenpaneel stelt u in staat om bestanden en mappen te bekijken, ongeacht of ze aan een Dreamweaver-site zijn

gekoppeld of niet, en om standaard onderhoudsbewerkingen voor bestanden uit te voeren, zoals bestanden openen en

verplaatsen.

Opmerking: In vorige versies van Dreamweaver heette het paneel Bestanden het paneel Site.

U kunt het paneel Bestanden verplaatsen indien nodig, en voorkeuren instellen voor het paneel.

Gebruik dit paneel om de volgende taken uit te voeren:

• Toegang krijgen tot sites, een server en lokale stations

• Bestanden en mappen weergeven

• Bestanden en mappen beheren in het paneel Bestanden

• Werken met een visueel overzicht van uw site

Gebruik voor Dreamweaver-sites de volgende opties om bestanden weer te geven of over te brengen:

A. Weergave Bestanden site B. Weergave Testserver C. Weergave Overzicht site D. Pop-upmenu Site E. Verbinding maken/Verbinding

verbreken F. Vernie uw en G. Bestand(en) plaatsen H. Bestand(en) ophalen I. Bestand(en) uitchecken J. Bestand(en) inchecken

K. Synchroniseren L. Uitvouwen/samenvouwen

Opmerking: De knoppen voor Weergave bestanden site, Weergave testserver, Weergave overzicht site en Synchroniseren

verschijnen uitsluitend in het uitgevouwen paneel Bestanden.

Het pop-upmenu Site Hiermee kunt u een Dreamweaver-site selecteren en de bestanden van die site weergeven. U kunt het

menu Site ook gebruiken om alle bestanden op uw lokale schijf te openen, zoals met Windows Verkenner (Windows) of de

Finder (Macintosh).

Weergave Bestanden site Geeftdebestandenstructuurvandeexterneenlokalesitesweerindedeelvenstersvanhetpaneel

Bestanden. (Met een voorkeursinstelling bepaalt u welke site in het linker venster verschijnt en welke in het rechter venster.)

De weergave Bestanden site is de standaard weergave voor het paneel Bestanden.

Weergave Testserver Geeft de mapstructuur van de testserver en de lokale site weer.

Weergave Overzicht site Geeft een grafisch overzicht weer van uw site, gebaseerd op hoe de documenten aan elkaar zijn

gekoppeld. Houd deze knop ingedrukt om Alleen overzicht of Overzicht en bestanden te selecteren in het pop-upmenu.

Het huidige pop-upmenu Geeft uw Dreamweaver-sites weer, alsook de servers waarmee u bent verbonden en geeft toegang

tot uw lokale stations en het bureaublad.

Verbinding maken/Verbinding verbreken (FTP, RDS, WebDAV-protocol en Microsoft Visual SourceSafe) Maakt of

verbreekt de verbinding met een externe site. Dreamweaver verbreekt standaard de verbinding met een externe site als hij

gedurende meer dan 30 minuten niet wordt gebruikt (alleen FTP). Om die tijdslimiet te veranderen, selecteert u Bewerken

> Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh); vervolgens selecteert u Site in de categorielijst aan

de linkerzijde.

ABCD E FGHIJKL

DREAMWEAVER CS3

Handboek

Vernieuwen Hiermee vernieuwt u de lokale en externe mappenlijsten. Gebruik deze knop om de mappenlijsten manueel

te vernieuwen als u Automatisch vernieuwen lijst lokale bestanden of Automatisch vernieuwen lijst externe bestanden hebt

uitgeschakeld in het dialoogvenster Sitedefinitie.

Bestand(en) ophalen Kopieert de geselecteerde bestanden van de externe site naar uw lokale site (en overschrijft daarbij de

bestaande lokale kopie van het bestand, als die er is). Als In- en uitchecken van bestanden inschakelen is ingeschakeld, zijn

de lokale kopieën alleen-lezen; de bestanden blijven beschikbaar op de externe server zodat andere teamleden kunnen

uitchecken.AlsIn-enuitcheckenvanbestandeninschakeleninuitgeschakeld,hebbendebestandskopieënzowellees-als

schrijfrechten.

Opmerking: De bestanden die Dreamweaver kopieert, zijn de bestanden die u in het actieve deelvenster van het paneel

Bestanden selecteert. Als het deelvenster Extern actief is, worden de geselecteerde externe of testserverbestanden naar de lokale

site gekopieerd; als het deelvenster Lokaal actief is, kopieert Dreamweaver de externe of testserverversie van de geselecteerde

lokale bestanden naar de lokale site.

Bestand(en) plaatsen Kopieert de geselecteerde bestanden van de lokale site naar de externe site.

Opmerking: De bestanden die Dreamweaver kopieert, zijn de bestanden die u in het actieve deelvenster van het paneel

Bestanden selecteert. Als het deelvenster Lokaal actief is, worden de geselecteerde lokale bestanden naar de externe site of

testserver gekopieerd; als het deelvenster Extern actief is, kopieert Dreamweaver de lokale versies van de geselecteerde externe

serverbestanden naar de externe site.

Als u een bestand dat nog niet bestaat, op de externe site plaatst en In- en uitchecken van bestanden inschakelen is

ingeschakeld, wordt het bestand aan de externe site toegevoegd als 'uitgecheckt'. Klik op de knop Bestanden inchecken als

u een bestand wilt toevoegen zonder de status uitgecheckt.

Bestand(en) uitchecken Brengt een kopie van het bestand over van de externe server naar uw lokale site (overschrijft de

bestaande lokale kopie van het bestand, als die er is) en markeert het bestand als uitgecheckt op de server. Deze optie is niet

beschikbaar als In- en uitchecken van bestanden inschakelen in het dialoogvenster Sitedefinities is uitgeschakeld voor de

huidige site.

Bestand(en) inchecken Brengt een kopie van het lokale bestand over naar de externe server en stelt het bestand ter

beschikking voor bewerking door anderen. Het lokale bestand wordt alleen-lezen. Deze optie is niet beschikbaar als de

optie In- en uitchecken van bestanden inschakelen in het dialoogvenster Sitedefinities is uitgeschakeld voor de huidige site.

Synchroniseren Synchroniseert de bestanden tussen de lokale en externe mappen.

De knop Uitvouwen/Samenvouwen Hiermee vouwt u het paneel Bestanden uit of samen om een of twee vensters weer te

geven.

Zie ook

“Overzicht van het bestandenpaneel” op pagina 21

“Een externe map instellen” op pagina 41

“Bestanden inchecken in of uitchecken uit een externe map” op pagina 89

“Bestanden op een externe server plaatsen” op pagina 85

“Bestanden van een externe server ophalen” op pagina 84

“Bestanden synchroniseren” op pagina 91

Bestanden en mappen weergeven

U kunt bestanden en mappen weergeven in het paneel Bestanden, ongeacht ze aan een Dreamweaver-site zijn gekoppeld of

niet. Als u sites, bestanden of mappen bekijkt in het paneel Bestanden, kunt u het formaat van de weergavezone wijzigen

en kunt u, voor Dreamweaver-sites het paneel Bestanden uit- of samenvouwen.

Voor Dreamweaver-sites kunt u het paneel Bestanden ook aanpassen door de weergave te wijzigen -uw lokale of externe

site- die standaard in het samengevouwen paneel verschijnt. Of u kunt tussen de inhoudsweergaven overschakelen in het

uitgevouwen paneel Bestanden met de optie Altijd tonen.

DREAMWEAVER CS3

Handboek

Zie ook

“Een externe map instellen” op pagina 41

“Een testserver instellen” op pagina 45

“Werken met een visueel overzicht van uw site” op pagina 49

Het bestandenpaneel openen of sluiten

❖

Selecteer Venster > Bestanden.

Het bestandenpaneel uitvouwen of samenvouwen (alleen voor Dreamweaver-sites)

❖

Klik in het paneel Bestanden (Venster > Bestanden) op de knop Uitvouwen/Samenvouwen op de werkbalk.

Opmerking: AlsuopdeknopUitvouwen/Samenvouwenkliktomhetpaneeluittevouwenterwijlhetineendokisgeplaatst,

wordt het paneel gemaximaliseerd zodat u niet in het documentvenster kunt werken. Om terug te keren naar het

documentvenster, klikt u nogmaals op de knop Uitvouwen/Samenvouwen om het paneel samen te vouwen. Als u op de knop

Uitvouwen/Samenvouwenkliktomhetpaneeluittevouwenwanneerhetnietineendokisgeplaatst,kuntunogsteedsinhet

documentvenster werken. Voor u het paneel terug in een dok kunt plaatsen, moet u het eerst samenvouwen.

AlshetpaneelBestandenissamengevouwen,geefthetdeinhoudvandelokalesite,deexternesiteofdetestserverweerin

devormvaneenbestandenlijst.Alshetisuitgevouwen,geefthetdelokalesiteendeexternesiteofdetestserverweer.Het

paneel Bestanden kan ook een visueel siteoverzicht van de lokale site weergeven.

De grootte van het weergavegebied in het uitgevouwen bestandenpaneel wijzigen

❖

Voer een van de volgende handelingen uit in het paneel Bestanden (Venster > Bestanden), als het paneel is uitgevouwen:

• Versleep de balk tussen de twee weergaven om het weergavegebied van het rechter of linker venster te vergroten of

verkleinen.

• Gebruik de schuifbalken onderaan in het paneel Bestanden om door de inhoud van de weergaven te scrollen.

• Versleep in een siteoverzicht de pijl boven een bestand om de ruimte tussen bestanden aan te passen.

De siteweergave in het bestandenpaneel wijzigen (alleen voor Dreamweaver-sites)

❖

Voer een van de volgende handelingen uit:

• Selecteer in het samengevouwen paneel Bestanden (Venster > Bestanden) Lokale weergave, Externe weergave, Testserver

of Overzichtsweergave in het pop-upmenu Siteweergave.

Opmerking: Lokale weergave staat standaard in het menu Siteweergave.

• Klik in het uitgevouwen paneel Bestanden (Venster > Bestanden) op de knop Bestanden site (voor de externe site),

Testserver of Siteoverzicht in de werkbalk.

A. Bestanden site B. Test ser ve r C. Siteoverzicht

• Als u op de knop Siteoverzicht klikt, kunt u kiezen om het siteoverzicht met sitebestanden weer te geven of uitsluitend

het siteoverzicht.

Opmerking: Voor u een externe server of een testserver kunt weergeven, moet u een externe site of testserver instellen. Voor u

een siteoverzicht kunt weergeven, moet u een introductiepagina instellen.

A B C

DREAMWEAVER CS3

Handboek

Bestanden weergeven buiten een Dreamweaver-site

❖

Navigeer door uw computer met behulp van het pop-upmenu Site, zoals u zou doen als u Windows Verkenner

(Windows) of de Finder (Macintosh) gebruikte.

Werken met bestanden in het bestandenpaneel

U kunt bestanden openen of de naam ervan wijzigen, bestanden toevoegen, verplaatsen of verwijderen, of het paneel

Bestanden vernieuwen nadat u wijzigingen hebt aangebracht.

Voor Dreamweaver-sites kunt u ook bepalen welke bestanden (op de lokale of externe site) werden bijgewerkt sinds de

laatste keer ze werden overgebracht.

Zie ook

“Bestanden synchroniseren” op pagina 91

“Toegang krijgen tot sites, een server en lokale stations” op pagina 80

Een bestand openen

1 Selecteer in het paneel Bestanden (Venster > Bestanden) een site, server of station in het pop-upmenu (waarin de huidige

site of server of het huidige station wordt weergegeven).

2 Ga naar het bestand dat u wilt openen.

3 Voer een van de volgende handelingen uit:

• Dubbelklik op het pictogram van het bestand.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het pictogram van

het bestand en selecteer Openen.

Dreamweaver opent het bestand in het documentvenster.

Een bestand of map maken

1 Selecteer in het paneel Bestanden (Venster > Bestanden) een bestand of map.

Dreamweaver maakt een nieuw bestand of een nieuwe map aan in de geselecteerde map, of in dezelfde map waarin het

geselecteerde bestand staat.

2 Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens

Nieuw Bestand of Nieuwe map.

3 Voer een naam in voor het nieuwe bestand of de nieuwe map.

4 Druk op Enter (Windows) of Return (Macintosh).

Een bestand of map verwijderen

1 Selecteer in het paneel Bestanden (Venster > Bestanden) het bestand dat of de map die u wilt verwijderen.

2 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer

Ver w ijd eren .

De naam van een bestand of map wijzigen

1 Selecteer in het paneel Bestanden (Venster > Bestanden) het bestand of de map waarvan u de naam wilt wijzigen.

2 Voer een van de volgende handelingen uit om de naam van het bestand of de map te activeren:

• Klik op de bestandsnaam, wacht even en klik nogmaals.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het pictogram van

het bestand en selecteer Naam wijzigen.

3 Overschrijf de bestaande naam met de nieuwe naam.

4 Druk op Enter (Windows) of Return (Macintosh).

DREAMWEAVER CS3

Handboek

Een bestand of map verplaatsen

1 Selecteer in het paneel Bestanden (Venster > Bestanden) het bestand dat of de map die u wilt verplaatsen.

2 Voer een van de volgende handelingen uit:

• Kopieer het bestand of de map en plak het/ze op de nieuwe locatie.

• Sleep het bestand of de nam naar de nieuwe locatie.

3 Vernieuw het paneel Bestanden om het bestand of de map op de nieuwe locatie weer te geven.

Het bestandenpaneel vernieuwen

❖

Voer een van de volgende handelingen uit:

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op een bestand of map

en selecteer Vernieuwen.

• (Dreamweaver alleen sites) Klik op de knop Vernieuwen in de werkbalk van het paneel Bestanden (met deze optie

worden beide vensters vernieuwd).

Opmerking: Dreamweaver vernieuwt het paneel Bestanden als u wijzigingen aanbrengt in een andere toepassing; keer

vervolgens terug naar Dreamweaver.

Zoeken naar bestanden op uw Dreamweaver-site

In Dreamweaver kunt u heel gemakkelijk zoeken naar geselecteerde, geopende, uitgecheckte of recentelijk gewijzigde

bestanden op uw site. U kunt ook zoeken naar bestanden die nieuwer zijn op uw lokale of externe site.

Zie ook

“Rapporten gebruiken om uw site te testen” op pagina 102

Zoeken naar een geopend bestand op uw site

1 Open het bestand in het documentvenster.

2 Selecteer Site > Zoeken op de site.

Het bestand wordt door Dreamweaver geselecteerd in het bestandenpaneel.

Opmerking: Alshetgeopendebestandinhetdocumentvenstergeendeeluitmaaktvandehuidigesiteinhetbestandenpaneel,

probeert Dreamweaver vast te stellen tot welke van uw Dreamweaver-sites het bestand behoort. Als het huidige bestand tot

slechts één lokale site behoort, wordt deze site door Dreamweaver in het bestandenpaneel geopend en wordt het bestand

vervolgens gemarkeerd.

Uitgecheckte bestanden op een Dreamweaver-site zoeken en selecteren

❖

Klik in de rechterbovenhoek van het samengevouwen bestandenpaneel (Venster > Bestanden) op het menu Opties en

selecteer vervolgens Bewerken > Uitgecheckte bestanden selecteren.

De bestanden worden door Dreamweaver geselecteerd in het bestandenpaneel.

Zoeken naar een geselecteerd bestand op uw lokale of externe site

1 Selecteer het bestand in de weergave Extern of Lokaal van het bestandenpaneel (Venster > Bestanden).

2 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer Zoeken op

lokale site of Zoeken op externe site (afhankelijk van de plaats waar u het bestand hebt geselecteerd).

Het bestand wordt door Dreamweaver geselecteerd in het bestandenpaneel.

DREAMWEAVER CS3

Handboek

Bestanden zoeken en selecteren die nieuwer zijn op de lokale site dan op de externe site

❖

Klik in de rechterbovenhoek van het samengevouwen bestandenpaneel (Venster > Bestanden) op het menu Opties en

selecteer Bewerken > Nieuwere lokale selecteren.

De bestanden worden door Dreamweaver geselecteerd in het bestandenpaneel.

Bestanden zoeken en selecteren die nieuwer zijn op de externe site dan op de lokale site

❖

Klik in de rechterbovenhoek van het samengevouwen bestandenpaneel (Venster > Bestanden) op het menu Opties en

selecteer Bewerken > Nieuwere externe selecteren.

De bestanden worden door Dreamweaver geselecteerd in het bestandenpaneel.

Zoeken naar recentelijk gewijzigde bestanden op uw site

1 Klik in de rechterbovenhoek van het samengevouwen bestandenpaneel (Venster > Bestanden) op het menu Opties en

selecteer Bewerken > Onlangs gewijzigd selecteren.

2 Voer een van de volgende handelingen uit om de zoekdatums voor het rapport aan te geven:

• Als u in het rapport alle bestanden wilt opnemen die de laatste paar dagen zijn gewijzigd, selecteert u 'Bestanden gemaakt

of gewijzigd in de laatste' en voert u in het tekstvak een getal in.

• Als u in het rapport alle bestanden wilt opnemen die in een specifieke tijdsperiode zijn gewijzigd, klikt u op het

keuzerondje 'Bestanden gemaakt of gewijzigd tussen' en geeft u een datumbereik op.

3 U kunt desgewenst in het tekstvak Gewijzigd door een gebruikersnaam invoeren om uw zoekopdracht te beperken tot

die bestanden die zijn gewijzigd door een specifieke gebruiker binnen het datumbereik dat u hebt opgegeven.

Opmerking: Deze optie is alleen beschikbaar voor rapporten over Contribute-sites.

4 Selecteer een keuzerondje om, indien nodig, aan te geven waar u bestanden die in het rapport worden vermeld, wilt

weergeven:

Lokale computer als de site statische pagina's bevat.

Testserver als de site dynamische pagina's bevat.

Opmerking: Voor deze optie wordt aangenomen dat u een testserver hebt gedefinieerd in het dialoogvenster Sitedefinitie

(XREF). Als u geen testserver hebt gedefinieerd en een URL-voorvoegsel hebt ingevoerd voor deze server, of als u het rapport

voor meer dan één site uitvoert, is deze optie niet beschikbaar.

Andere locatie als u een pad in het tekstvak wilt invoeren.

5 Klik op OK om uw instellingen op te slaan.

Dreamweaver markeert de bestanden die zijn gewijzigd binnen de geselecteerde tijdsperiode, in het bestandenpaneel.

Ongebruikte bestanden opsporen en verwijderen

U kunt zoeken naar bestanden op uw site die niet meer worden gebruikt door andere bestanden, en deze bestanden

vervolgens verwijderen.

1 Selecteer Site > Koppelingen op de hele site controleren.

Dreamweaver controleert alle koppelingen op de site en geeft de verbroken koppelingen weer in het resultatenpaneel.

2 Selecteer Zwevende bestanden in het menu van het paneel Koppelingencontrole.

Alle bestanden zonder inkomende koppelingen worden in Dreamweaver weergegeven. Dit betekent dat er geen bestanden

op uw site aanwezig zijn met koppelingen naar deze bestanden.

3 Selecteer de bestanden die u wilt verwijderen en druk op Delete (Windows) of Command+Delete (Macintosh).

Belangrijk: Hoewel er geen enkel ander bestand op de site een koppeling bevat naar deze bestanden, kunnen bepaalde

weergegeven bestanden een koppeling bevatten naar andere bestanden. Wees daarom voorzichtig bij het verwijderen van

bestanden.

DREAMWEAVER CS3

Handboek

Zie ook

“Het camoufleren van sites in- en uitschakelen” op pagina 96

Toegang krijgen tot sites, een server en lokale stations

U kunt de bestanden en mappen op uw Dreamweaver-sites, en ook bestanden en mappen die geen deel uitmaken van een

Dreamweaver-site, openen, wijzigen en opslaan. U kunt niet alleen toegang krijgen tot Dreamweaver-sites, maar ook tot

een server, een lokaal station of uw bureaublad.

Voordat u toegang kunt krijgen tot een externe server, moet u Dreamweaver zodanig instellen dat het programma met deze

server kan samenwerken.

Opmerking: U kunt bestanden het beste beheren door een Dreamweaver-site te maken.

Zie ook

“Een lokale hoofdmap instellen en bewerken” op pagina 40

Een bestaande Dreamweaver-site openen

❖

Selecteer in het bestandenpaneel (Venster > Bestanden) een site in het menu (waarin de huidige site of server of het

huidige station wordt weergegeven).

Een map openen op een externe FTP- of RDS-server

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een servernaam in het menu (waarin de huidige site of server of

het huidige station wordt weergegeven).

Opmerking: Er worden servernamen weergegeven van servers waarvoor u Dreamweaver zodanig hebt geconfigureerd dat het

programma daarmee kan samenwerken.

2 U kunt nu bestanden op de normale manier openen en bewerken.

Een lokaal station op uw computer openen

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een desktopcomputer, lokaal station of cd-romstation in het

menu (waarin de huidige site of server of het huidige station wordt weergegeven).

2 Ga naar een bestand en voer een van de volgende handelingen uit:

• Bestanden openen in Dreamweaver of een andere toepassing

• Bestandsnamen wijzigen

DREAMWEAVER CS3

Handboek

• Bestanden kopiëren

• Bestanden verwijderen

• Bestanden slepen

Als u een bestand sleept van de ene Dreamweaver-site naar een andere site of naar een map die geen deel uitmaakt van een

Dreamweaver-site, wordt dit bestand doorDreamweaver gekopieerd naar de locatie waar u het bestand neerzet. Als u een

bestand sleept binnen een en dezelfde Dreamweaver-site, wordt het bestand door Dreamweaver verplaatst naar de locatie

waar u het bestand neerzet. Als u een bestand sleept dat geen deel uitmaakt van een Dreamweaver-site, naar een map die

geen deel uitmaakt van een Dreamweaver-site, wordt het bestand doorDreamweaver verplaatst naar de locatie waar u het

bestand neerzet.

Opmerking: Als u een bestand wilt verplaatsen dat standaard door Dreamweaver wordt gekopieerd, houdt u de Shift-toets

(Windows) of de Command-toets (Macintosh) ingedrukt terwijl u sleept. Als u een bestand wilt kopiëren dat standaard door

Dreamweaver wordt verplaatst, houdt u de Control-toets (Windows) of de Option-toets (Macintosh) ingedrukt terwijl u sleept.

Sitevoorkeuren instellen voor het overdragen van bestanden

U kunt voorkeuren selecteren om op te geven hoe de functies voor de overdracht van bestanden in het bestandenpaneel

moeten werken.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer in de lijst aan de linkerkant van het dialoogvenster Voorkeuren de categorie Site.

3 Stel opties in en klik op OK.

Altijd tonen Hiermee kunt u opgeven welke site (extern of lokaal) altijd moet worden weergegeven en in welk deelvenster

van het bestandenpaneel (links of rechts) de lokale of externe bestanden moeten worden weergegeven.

De lokale site wordt standaard aan de rechterkant weergegeven. Het deelvenster dat niet wordt gekozen (standaard het

linkse deelvenster) is het te veranderbare deelvenster: dit deelvenster kan het siteoverzicht of de bestanden in de andere site

(standaard de externe site) weergeven.

Afhankelijke bestanden Hier kunt u opgeven of er een venster met een vraag moet worden weergegeven voor het

overbrengen van afhankelijke bestanden die de browser laadt wanneer deze het HTML-bestand laadt. Afhankelijke

bestanden zijn bestanden waarnaar wordt verwezen in het HTML-bestand, zoals afbeeldingen, externe stijlpagina's en

andere bestanden. Standaard zijn zowel de optie Vragen bij ophalen/uitchecken als de optie Vragen bij plaatsen/inchecken

ingeschakeld.

Het is meestal verstandig om afhankelijke bestanden te downloaden wanneer u een nieuw bestand uitcheckt, maar als de

meest recente versies van de afhankelijke bestanden al op de lokale schijf aanwezig zijn, is het niet nodig om deze bestanden

nogmaals te downloaden. Dit geldt ook voor het uploaden en inchecken van bestanden: niet nodig als de bijgewerkte versies

al op de bestemming aanwezig zijn.

Als u deze opties uitschakelt, worden de afhankelijke bestanden niet overgebracht. Dus als u wilt dat het dialoogvenster

Afhankelijke bestanden altijd wordt weergegeven, zelfs wanneer deze twee opties niet zijn geselecteerd, houdt u Alt

(Windows) of Option (Macintosh) ingedrukt terwijl u de opdracht Ophalen, Plaatsen, Inchecken of Uitchecken kiest.

FTP-verbinding Hiermeekuntubepalenofdeverbindingmetdeexternesitemoetwordenverbrokennadatergedurende

het opgegeven aantal minuten geen activiteiten hebben plaatsgevonden.

FTP-time-out Hier kunt u opgeven hoeveel seconden Dreamweaver mag proberen verbinding te maken met de externe

server.

Als er geen reactie komt van de externe server binnen de opgegeven tijd, wordt er in Dreamweaver een

waarschuwingsvenster weergegeven waarin u op de hoogte wordt gesteld van dit feit.

Opties voor gegevensoverdracht via FTP Hier kunt u bepalen of Dreamweaver de standaardoptie moet selecteren na het

opgegeven aantal seconden wanneer er tijdens de bestandsoverdracht een dialoogvenster verschijnt en de gebruiker niet

reageert.

Firewall-host Hier kunt u het adres opgeven van de proxyserver die u gebruikt om verbinding te maken met externe servers

als uw computer of netwerk zich achter een firewall bevindt.

DREAMWEAVER CS3

Handboek

Als uw computer of netwerk zich niet achter een firewall bevindt, hoeft u hier niets in te vullen. Als uw computer of netwerk

zich achter een firewall bevindt, selecteert u de optie Firewall gebruiken in het dialoogvenster Sitedefinitie.

Firewall-poort

Hier kunt u de poort in uw firewall opgeven die wordt gebruikt om verbinding te maken met de externe

server. Als u verbinding maakt via een andere poort dan poort 21 (de standaardpoort voor FTP), voert u hier het nummer in.

Opties voor plaatsing: Bestanden opslaan voordat ze worden geplaatst Hiermee geeft u aan dat bestanden die nog niet zijn

opgeslagen, automatisch moeten worden opgeslagen voordat ze op de externe site worden geplaatst.

Sites beheren Hiermee opent u het dialoogvenster Sites beheren waarin u een bestaande site kunt bewerken of een nieuwe

site kunt maken.

U kunt bepalen of de typen bestanden die u overbrengt, moeten worden overgebracht in ASCII-vorm (tekst) of in binaire

vorm, door het bestand FTPExtensionMap.txt in de map Dreamweaver/Configuratie (op de Macintosh

FTPExtensionMapMac.txt) aan te passen. Zie Dreamweaver uitbreiden voor meer informatie.

Zie ook

“Een externe map instellen” op pagina 41

Gegevens van bestanden en mappen die in het uitgevouwen bestandenpaneel worden

weergegeven, aanpassen

Als u een Dreamweaver-site in het uitgevouwen bestandenpaneel weergeeft, worden de gegevens van bestanden en mappen

in kolommen weergegeven. U kunt bijvoorbeeld kijken naar het bestandstype of nagaan op welke datum het bestand is

gewijzigd.

U kunt de kolommen aanpassen door een van de volgende handelingen uit te voeren (bepaalde bewerkingen zijn alleen

beschikbaar voor de kolommen die u toevoegt en niet voor de standaardkolommen):

• Kolommen in een andere volgorde plaatsen of opnieuw uitlijnen

• Nieuwe kolommen toevoegen (voor een maximum van 10 kolommen)

• Kolommen verbergen (behalve de kolom met bestandsnamen)

• Kolommen aanwijzen die u wilt delen met alle gebruikers die verbonden zijn met een site

• Kolommen verwijderen (alleen aangepaste kolommen)

• De namen van kolommen wijzigen (alleen aangepaste kolommen)

• Een ontwerpnotitie aan kolommen koppelen (alleen aangepaste kolommen)

De volgorde van kolommen wijzigen

❖

Selecteer een kolomnaam en klik op de pijlknop omhoog of omlaag om de positie van de geselecteerde kolom te wijzigen.

Opmerking: U kunt de positie van elke kolom wijzigen, behalve van de kolom Naam, die altijd de eerste kolom is.

Detailkolommen toevoegen, verwijderen of wijzigen

1 Selecteer Site > Sites beheren.

2 Selecteer een site en klik op Bewerken.

3 Selecteer Kolommen van de bestandsweergave in de lijst Categorie aan de linkerkant.

4 Selecteer een kolom en klik op de plusknop (+) om een kolom toe te voegen of op de minknop (–) om een kolom te

verwijderen.

Opmerking: De kolom wordt onmiddellijk en zonder een vraag om bevestiging verwijderd, dus bedenk goed of u de kolom wilt

verwijderen voordat u op de minknop (–) klikt.

5 Voer in het tekstvak Kolomnaam een naam voor de kolom in.

6 Selecteer een waarde in het menu Koppelen aan ontwerpnotitie of typ uw eigen waarde.

DREAMWEAVER CS3

Handboek

Opmerking: Umoetaaneennieuwekolomeenontwerpnotitiekoppelenomtezorgendatergegevensinhetbestandenpaneel

kunnen worden weergegeven.

7 Selecteer een uitlijning om te bepalen hoe de tekst binnen de kolom moet worden uitgelijnd.

8 Schakel de optie Tonen in of uit om de kolom weer te geven of te verbergen.

9 Selecteer Delen met alle gebruikers van deze site om de kolom te delen met alle gebruikers die met de externe site

verbonden zijn.

Kolommen sorteren op een detailkolom in het bestandenpaneel

❖

Klik op de koptekst van de kolom die u wilt sorteren.

Klik nogmaals op de koptekst om de volgorde waarin Dreamweaver de items in de kolom weergeeft (oplopend of aflopend),

om te draaien.

Bestanden ophalen van en plaatsen op de server

Bestandsoverdracht en afhankelijke bestanden

Als u met anderen samenwerkt, kunt u het in- en uitchecken gebruiken om bestanden uit te wisselen tussen lokale en

externe sites. Als u echter de enige bent die op de externe site werkt, kunt u de opdrachten Ophalen en Plaatsen gebruiken

om bestanden over te brengen zonder ze in of uit te checken.

Wanneer u een document overbrengt van een lokale naar een externe map of andersom via het bestandenpaneel, kunt u

kiezen of u ook de afhankelijke bestanden van het document wilt overbrengen. Afhankelijke bestanden zijn afbeeldingen,

externe stijlpagina's en andere bestanden waarnaar in uw document wordt verwezen en die de browser laadt wanneer deze

het document laadt.

Opmerking: Het is meestal verstandig om afhankelijke bestanden te downloaden wanneer u een nieuw bestand uitcheckt, maar

als de meest recente versies van de afhankelijke bestanden al op de lokale schijf aanwezig zijn, is het niet nodig om deze

bestanden nogmaals te downloaden. Dit geldt ook voor het uploaden en inchecken van bestanden: niet nodig als de bijgewerkte

versies al op de externe site aanwezig zijn.

Bibliotheekitems worden behandeld als afhankelijke bestanden.

Er zijn bepaalde servers die fouten rapporteren wanneer u bibliotheekitems op deze servers plaatst. U kunt deze bestanden

echter camoufleren om te voorkomen dat ze worden overgebracht.

Zie ook

“Bestanden in- en uitchecken” op pagina 87

“Het camoufleren van sites in- en uitschakelen” op pagina 96

Over bestandsoverdracht op de achtergrond

U kunt andere niet-servergerelateerde activiteiten uitvoeren terwijl u bestanden plaatst of ophaalt. Bestandsoverdracht op

de achtergrond werkt voor alle overdrachtprotocols die worden ondersteund door Dreamweaver: FTP, SFTP, LAN,

WebDAV, Microsoft Visual SourceSafe en RDS.

Tot niet-servergerelateerde activiteiten behoren gewone bewerkingen, zoals typen, externe stijlpagina's bewerken, voor de

hele site geldende rapporten genereren en nieuwe sites maken.

Dreamweaver kan onder andere de volgende servergerelateerde activiteiten niet uitvoeren:

• Bestanden plaatsen, ophalen, inchecken en uitchecken

• Het uitchecken ongedaan maken

• Een databaseverbinding maken

DREAMWEAVER CS3

Handboek

• Dynamische gegevens binden

• Live gegevens voorvertonen

• Een webservice invoegen

• Externe bestanden en mappen verwijderen

• Een webpagina voorvertonen in een browser op een testserver

• Een bestand op een externe server opslaan

• Een afbeelding invoegen vanaf een externe server

• Een bestand openen vanaf een externe server

• Bestanden automatisch ophalen bij het opslaan

• Bestanden naar de externe site slepen

• Bestanden knippen, kopiëren of plakken op de externe site

• De weergave Extern vernieuwen

Bestanden van een externe server ophalen

Gebruik de opdracht Ophalen om bestanden van de externe site naar uw lokale site te kopiëren. U kunt het

bestandenpaneel of documentvenster gebruiken om bestanden op te halen.

Dreamweaver maakt een logboek aan van de bestandsactiviteiten tijdens de overdracht. Dit logboek kunt u bekijken en

opslaan.

Opmerking: U kunt bestandsoverdracht op de achtergrond niet uitschakelen. Als het detaillogboek is geopend in het venster

voor de bestandsoverdracht op de achtergrond, kunt u het sluiten om de prestaties te verbeteren.

Dreamweaver legt ook alle activiteiten vast die plaatsvinden tijdens de bestandsoverdracht via FTP. Als er een fout optreedt

wanneer u een bestand overbrengt via FTP, kunt u met behulp van het FTP-logboek van de site vaststellen wat de aard van

het probleem is.

Zie ook

“Bestanden in- en uitchecken” op pagina 87

“Bestanden synchroniseren” op pagina 91

Bestanden ophalen van een externe server met het bestandenpaneel

1 Selecteer in het bestandenpaneel (Venster > Bestanden) de bestanden die u wilt downloaden.

Gewoonlijk selecteert u deze bestanden in de weergave Extern, maar u kunt desgewenst de corresponderende bestanden

ookindeweergaveLokaalselecteren. AlsdeweergaveExternactiefis,kopieertDreamweaverdegeselecteerdebestanden

naar de lokale site. Als de weergave Lokaal actief is, kopieert Dreamweaver de externe versies van de geselecteerde lokale

bestanden naar de lokale site.

Opmerking: Als u alleen die bestanden wilt ophalen waarvan de externe versie recenter is dan de lokale versie, moet u de

opdracht Synchroniseren gebruiken.

2 Voer een van de volgende handelingen uit om het bestand op te halen:

• Klik op de knop Ophalen op de werkbalk van het bestandenpaneel.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het bestand in het

bestandenpaneel en selecteer vervolgens Ophalen in het snelmenu.

3 Klik op Ja in het dialoogvenster Afhankelijke bestanden om de afhankelijke bestanden te downloaden. Als u al beschikt

over lokale kopieën van de afhankelijke bestanden, klikt u op Nee. Standaard worden afhankelijke bestanden niet

gedownload. U kunt deze optie instellen met Bewerken > Voorkeuren > Site.

DREAMWEAVER CS3

Handboek

In Dreamweaver worden de geselecteerde bestanden als volgt gedownload:

• Als u het systeem van in- en uitchecken gebruikt en u een bestand ophaalt, wordt er een lokale alleen-lezen kopie van het

bestand gedownload. Het bestand blijft beschikbaar op de externe site of de testserver, zodat ook andere teamleden het

bestand kunnen uitchecken.

• Als u geen gebruik maakt van in- en uitchecken en u een bestand ophaalt, krijgt u een exemplaar met rechten voor lezen

en schrijven.

Opmerking: Als u met anderen samen aan dezelfde bestanden werkt, moet u de optie Het in- en uitchecken van bestanden

inschakelen niet uitschakelen. Als andere leden van uw team het systeem van in- en uitchecken gebruiken voor de site, kunt u

dat systeem ook het beste gebruiken.

Als u de bestandsoverdracht wilt stoppen, kunt u dat op elk gewenst moment doen met de knop Annuleren in het

statusvenster.

Bestanden ophalen van een externe server via het documentvenster

1 Zorg ervoor dat het document actief is in het documentvenster.

2 Voer een van de volgende handelingen uit om het bestand op te halen:

• Selecteer Site > Ophalen.

• Klik op het pictogram Bestandsbeheer op de werkbalk van het documentvenster en selecteer Ophalen in het menu dat

verschijnt.

Opmerking: Als het huidige bestand geen deel uitmaakt van de huidige site in het bestandenpaneel, probeert Dreamweaver vast

te stellen tot welke lokaal gedefinieerde site het huidige bestand behoort. Als het huidige bestand slechts tot één lokale site

behoort, wordt deze site door Dreamweaver geopend en wordt de bewerking Ophalen uitgevoerd.

Het FTP-logboek weergeven

❖

Klik op het menu Opties in de rechterbovenhoek van het bestandenpaneel en selecteer Weergave > FTP-logboek van site.

Bestanden op een externe server plaatsen

U kunt bestanden van de lokale site op de externe site plaatsen zonder dat daarmee de uitcheckstatus van het bestand wordt

gewijzigd.

Er zijn twee veelvoorkomende situaties waarin u beter de opdracht Plaatsen kunt gebruiken in plaats van Inchecken:

• U werkt niet samen met anderen aan dezelfde bestanden en u maakt geen gebruik van het systeem voor het in- en

uitchecken van bestanden.

• U wilt de huidige versie van het bestand op de server plaatsen, maar u bent van plan om het bestand nog verder te

bewerken.

Opmerking: Als u een bestand plaatst dat nog niet op de externe server aanwezig was en u het systeem voor het in- en

uitchecken van bestanden gebruikt, wordt het bestand naar de externe site gekopieerd en vervolgens uitgecheckt, zodat u verder

kunt gaan met het bewerken van dat bestand.

U kunt het bestandenpaneel of documentvenster gebruiken om bestanden te plaatsen. Dreamweaver maakt een logboek

aan van de bestandsactiviteiten tijdens de overdracht. Dit logboek kunt u bekijken en opslaan.

Dreamweaver legt ook alle activiteiten vast die plaatsvinden tijdens de bestandsoverdracht via FTP. Als er een fout optreedt

wanneer u een bestand overbrengt via FTP, kunt u met behulp van het FTP-logboek van de site vaststellen wat de aard van

het probleem is.

Zie www.adobe.com/go/vid0163_nl voor een zelfstudie over het plaatsen van bestanden op een externe server.

Zie www.adobe.com/go/vid0164_nl voor een zelfstudie over het oplossen van publicatieproblemen.

DREAMWEAVER CS3

Handboek

Zie ook

“Bestanden synchroniseren” op pagina 91

“Over het in- en uitchecken van bestanden” op pagina 87

Bestanden plaatsen op een externe server of testserver via het bestandenpaneel

1 Selecteer in het bestandenpaneel (Venster > Bestanden) de bestanden die u wilt uploaden.

Gewoonlijk selecteert u deze bestanden in de weergave Lokaal, maar u kunt desgewenst de corresponderende bestanden

ook in de weergave Extern selecteren.

Opmerking: U kunt alleen die bestanden plaatsen waarvan de lokale versie recenter is dan de externe versie.

2 Voer een van de volgende handelingen uit om het bestand op de externe server te plaatsen:

• Klik op de knop Plaatsen op de werkbalk van het bestandenpaneel.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het bestand in het

bestandenpaneel en selecteer vervolgens Plaatsen in het snelmenu.

3 Als het bestand nog niet is opgeslagen, wordt er een dialoogvenster weergegeven (mits u deze voorkeur in de categorie

Site van het dialoogvenster Voorkeuren hebt ingesteld) waarin u de kans krijgt het bestand op te slaan voordat u het op de

externeserverplaatst. KlikopJaomhetbestandopteslaanofopNeealsudevorigeopgeslagenversievanhetbestandop

de externe server wilt plaatsen.

Opmerking: Als u het bestand niet opslaat, worden de wijzigingen die u hebt aangebracht nadat u het bestand voor de laatste

keer hebt opgeslagen, niet op de externe server geplaatst. Het bestand blijft echter open, dus u kunt desgewenst de wijzigingen

alsnog opslaan nadat u het bestand op de server hebt geplaatst.

4 Klik op Ja om samen met de geselecteerde bestanden ook de afhankelijke bestanden te uploaden of klik op Nee als u geen

afhankelijke bestanden wilt uploaden. Standaard worden afhankelijke bestanden niet geladen. U kunt deze optie instellen

met Bewerken > Voorkeuren > Site.

Opmerking: Het is meestal verstandig om afhankelijke bestanden te uploaden wanneer u een nieuw bestand incheckt, maar

als de meest recente versies van de afhankelijke bestanden al op de externe server aanwezig zijn, is het niet nodig om deze

bestanden nogmaals te uploaden.

Als u de bestandsoverdracht wilt stoppen, klikt u op Annuleren in het statusvenster. Mogelijk stopt de bestandsoverdracht

niet onmiddellijk.

Er verschijnt een vergrendelingssymbool naast het pictogram van het lokale bestand om aan te geven dat het nu een alleen-

lezen bestand is.

Belangrijk: Als u het actieve bestand incheckt, wordt het bestand mogelijk eerst automatisch opgeslagen voordat het wordt

ingecheckt, afhankelijk van de opties die u hebt ingesteld.

Bestanden op een externe server plaatsen via het documentvenster

1 Zorg ervoor dat het document actief is in het documentvenster.

2 Voer een van de volgende handelingen uit om het bestand te plaatsen:

• Selecteer Site > Plaatsen.

• Klik op het pictogram Bestandsbeheer op de werkbalk van het documentvenster en selecteer Plaatsen in het menu dat

verschijnt.

Opmerking: Als het huidige bestand geen deel uitmaakt van de huidige site in het bestandenpaneel, probeert Dreamweaver vast

te stellen tot welke lokaal gedefinieerde site het huidige bestand behoort. Als het huidige bestand slechts tot één lokale site

behoort, wordt deze site door Dreamweaver geopend en wordt de bewerking Plaatsen uitgevoerd.

DREAMWEAVER CS3

Handboek

Het FTP-logboek weergeven

❖

Klik op het menu Opties in de rechterbovenhoek van het bestandenpaneel en selecteer Weergave > FTP-logboek van site.

De bestandsoverdracht beheren

U kunt de status van de bestandsoverdracht weergeven, plus een lijst van overgebrachte bestanden en het resultaat van de

bestandsoverdracht (de overdracht is gelukt, er zijn bestanden overgeslagen of de overdracht is mislukt). U kunt ook een

logboek opslaan met bestandsactiviteiten.

Opmerking: U kunt in Dreamweaver andere, niet-servergerelateerde activiteiten uitvoeren terwijl u bestanden overbrengt

vanaf of naar een server.

De bestandsoverdracht annuleren

❖

Klik op de knop Annuleren of sluit het dialoogvenster Bestandsactiviteiten op de achtergrond.

Het dialoogvenster Bestandsactiviteiten op de achtergrond verbergen tijdens de bestandsoverdracht

❖

Klik op de knop Verbergen in het dialoogvenster Bestandsactiviteiten op de achtergrond om het te minimaliseren zodat

alleen de kleine knop Logboek onder in het paneel Bestanden zichtbaar is.

Opmerking: U kunt de knop Logboek niet verbergen of verwijderen. Het is een permanent onderdeel van het paneel.

De gegevens weergeven van de laatste keer dat er bestanden zijn overgedragen

1 Klik op de knop Logboek onderaan in het bestandenpaneel om het dialoogvenster Bestandsactiviteiten op de

achtergrond te openen.

2 Klik op de vervolgkeuzepijl Details.

Een logboek opslaan van laatste keer dat er bestanden zijn overgedragen

1 Klik op de knop Logboek onderaan in het bestandenpaneel om het dialoogvenster Bestandsactiviteiten op de

achtergrond te openen.

2 Klik op de knop Logboek opslaan om de gegevens in de vorm van een tekstbestand op te slaan.

U kunt de bestandsactiviteiten weergeven door het logboekbestand in Dreamweaver of elke gewenste tekstverwerker te

openen.

Bestanden in- en uitchecken

Over het in- en uitchecken van bestanden

Als u samen met anderen aan dezelfde bestanden werkt, kunt u bestanden in- en uitchecken vanaf lokale en externe sites.

Als u echter de enige bent die op de externe site werkt, kunt u beter de opdrachten Ophalen en Plaatsen gebruiken om

bestanden over te brengen zonder ze in of uit te checken.

Opmerking: Voor een testserver kunt u wel de opdrachten Ophalen en Plaatsen gebruiken, maar niet het systeem van in- en

uitchecken.

Hetuitcheckenvaneenbestandiseigenlijkhetzelfdealszeggen:“Ikwerknuaanditbestand,dusblijfervanaf!” Wanneer

een bestand is uitgecheckt, wordt de naam van de persoon die dat bestand heeft uitgecheckt in het bestandenpaneel

weergegeven met naast het pictogram van het bestand een rode markering (als een teamlid het bestand heeft uitgecheckt)

of een groene markering (als u het bestand hebt uitgecheckt).

DREAMWEAVER CS3

Handboek

Als u een bestand incheckt, maakt u het bestand weer beschikbaar voor andere teamleden, zodat zij het bestand kunnen

uitchecken en bewerken. Wanneer u een bestand incheckt nadat u het hebt bewerkt, wordt uw lokale versie een alleen-lezen

bestand en verschijnt er een vergrendelingssymbool naast het bestand in het bestandenpaneel om te voorkomen dat u

wijzigingen in het bestand aanbrengt.

Dreamweaver maakt van uitgecheckte bestanden geen alleen-lezen bestanden op de externe server. Als u bestanden

overbrengt met een andere toepassing dan Dreamweaver, kunt u uitgecheckte bestanden overschrijven. In andere

toepassingen dan Dreamweaver is echter het LCK-bestand zichtbaar naast het uitgecheckte bestand in de

bestandshiërarchie om te helpen voorkomen dat uitgecheckte bestanden worden overschreven.

Zie TechNote 15447 op de website van Adobe op www.adobe.com/go/15447_nl voor meer informatie over LCK-bestanden

en als u wilt weten hoe het systeem van in- en uitchecken van bestanden precies werkt.

Zie ook

“Bestanden ophalen van en plaatsen op de server” op pagina 83

Het systeem van in- en uitchecken van bestanden instellen

Voordat u het systeem van in- en uitchecken van bestanden kunt gebruiken, moet u uw lokale site aan een externe server

koppelen.

1 Selecteer Site > Sites beheren.

2 Selecteer een site en klik op Bewerken.

3 Selecteer op het tabblad Geavanceerd de optie Externe informatie in de lijst met categorieën aan de linkerkant.

4 Schakel de optie Het in- en uitchecken van bestanden inschakelen in als u in een teamomgeving werkt (of als u alleen

werkt vanaf meerdere computers). Schakel deze optie uit als u het in- en uitchecken van bestanden voor uw website wilt

uitschakelen.

Deze optie is handig om anderen te laten weten dat u een bestand hebt uitgecheckt om het te bewerken of om uzelf te

waarschuwen wanneer er op een andere computer een recentere versie van een bestand aanwezig is.

Als uw optie voor externe toegang is ingesteld op Microsoft Visual SourceSafe, is dit de enige optie die kunt instellen voor

het in- en uitchecken van bestanden. De overige opties in deze sectie hebben alleen betrekking op de toegangsmethoden

FTP, Lokaal/netwerk, WebDAV en RDS.

Als er geen opties voor in- en uitchecken worden weergegeven, betekent dit dat u geen externe server hebt ingesteld.

5 Schakel de optie Bestanden uitchecken wanneer ze worden geopend in als u wilt dat bestanden automatisch worden

uitgecheckt wanneer u in het bestandenpaneel dubbelklikt op de bestanden om deze te openen.

Als u Bestand > Openen gebruikt om een bestand te openen, wordt het bestand niet uitgecheckt, zelfs niet als deze optie is

ingeschakeld.

6 Stel de resterende opties in:

Naam voor uitchecken De naam voor uitchecken wordt in het bestandenpaneel weergegeven naast bestanden die zijn

uitgecheckt. Zo kunnen teamleden communiceren met de juiste persoon als een bestand dat ze nodig hebben, is

uitgecheckt.

Opmerking: Als u alleen werkt vanaf meerdere computers, kunt u voor elke computer een andere naam voor uitchecken

gebruiken (bijvoorbeeld KeesR-MacThuis en KeesR-PcKantoor) zodat u weet wat de laatste versie van het bestand is, als u

vergeten bent het bestand in te checken.

E-mailadres Als u hier een e-mailadres invoert, wordt wanneer u een bestand uitcheckt, naast dit bestand uw naam in het

bestandenpaneel als een koppeling (blauw en onderstreept) weergegeven. Als een teamlid op de koppeling klikt, wordt in

het standaard e-mailprogramma van deze persoon een nieuw bericht geopend met het e-mailadres van de gebruiker en een

onderwerp dat correspondeert met de bestands- en sitenaam.

DREAMWEAVER CS3

Handboek

Zie ook

“Een externe map instellen” op pagina 41

WebDAV gebruiken om bestanden in en uit te checken

Dreamweaver kan verbinding maken met een server die gebruik maakt van WebDAV (Web-based Distributed Authoring

and Versioning) - een set extensies van het HTTP-protocol waarmee gebruikers in een samenwerkingsverband bestanden

op externe webservers kunnen bewerken en beheren. Zie www.webdav.org voor meer informatie.

1 Definieer, als u dat nog niet hebt gedaan, een Dreamweaver-site met de lokale map die u gebruikt om uw

projectbestanden in op te slaan.

2 Selecteer Site > Sites beheren en dubbelklik in de lijst op uw site.

3 Klik in het dialoogvenster Sitedefinitie op het tabblad Geavanceerd.

4 Klik op de categorie Externe informatie en selecteer in het menu Toegang de optie WebDAV.

5 Geef op hoe Dreamweaver verbinding moet maken met uw WebDAV-server.

6 Selecteer de optie 'Het in- en uitchecken van bestanden inschakelen' en voer de volgende gegevens in:

• Voer in het tekstvak Naam voor uitchecken een naam in waarmee u kunt worden geïdentificeerd door andere teamleden.

• Voer in het tekstvak E-mailadres uw e-mailadres in.

De naam en het e-mailadres worden gebruikt om vast te stellen van wie bestanden op een WebDAV-server zijn. Daarnaast

wordt deze gegevens als contactinformatie weergegeven in het bestandenpaneel.

7 Klik op OK.

Dreamweaver configureert de site voor WebDAV-toegang. Als u de opdracht Inchecken of Uitchecken gebruikt voor een

bestand op de site, wordt het bestand overgebracht met WebDAV.

Opmerking: Het is mogelijk dat WebDAV bestanden met dynamische inhoud, zoals PHP-tags of SSI's, niet correct kan

uitchecken omdat de HTTP GET deze heeft weergegeven wanneer ze worden uitgecheckt.

Bestanden inchecken in of uitchecken uit een externe map

Nadat u het systeem voor het in- en uitchecken van bestanden hebt ingesteld, kunt u bestanden op een externe server in-

en uitchecken via het bestandenpaneel of documentvenster.

Zie ook

“Sitevoorkeuren instellen voor het overdragen van bestanden” op pagina 81

Bestanden uitchecken via het bestandenpaneel

1 Selecteer in het bestandenpaneel (Venster > Bestanden) de bestanden op de externe server die u wilt uitchecken.

Opmerking: U kunt bestanden selecteren in de weergaven Lokaal en Extern, maar niet in de weergave Testserver.

Een rode markering geeft aan dat een ander teamlid het bestand heeft uitgecheckt en een vergrendelingssymbool geeft aan

dat het bestand een alleen-lezen bestand is (Windows) of is vergrendeld (Macintosh).

2 Voer een van de volgende handelingen uit om het bestand uit te checken:

• Klik op de knop Uitchecken op de werkbalk van het bestandenpaneel.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer Uitchecken

in het snelmenu.

3 Klik in het dialoogvenster Afhankelijke bestanden op Ja om samen met de geselecteerde bestanden ook de afhankelijke

bestanden te downloaden of klik op Nee om geen afhankelijke bestanden te downloaden. Standaard worden afhankelijke

bestanden niet gedownload. U kunt deze optie instellen met Bewerken > Voorkeuren > Site.

DREAMWEAVER CS3

Handboek

Opmerking: Het is meestal verstandig om afhankelijke bestanden te downloaden wanneer u een nieuw bestand uitcheckt, maar

als de meest recente versies van de afhankelijke bestanden al op de lokale schijf aanwezig zijn, is het niet nodig om deze

bestanden nogmaals te downloaden.

Een groene markering naast het pictogram van een lokaal bestand geeft aan dat u het bestand hebt uitgecheckt.

Belangrijk: Als u het actieve bestand uitcheckt, wordt de versie van het bestand die is geopend, overschreven door de nieuwe,

uitgecheckte versie.

Bestanden inchecken via het bestandenpaneel

1 Selecteer in het bestandenpaneel (Venster > Bestanden) de nieuwe of uitgecheckte bestanden die u wilt inchecken.

Opmerking: U kunt bestanden selecteren in de weergaven Lokaal en Extern, maar niet in de weergave Testserver.

2 Voer een van de volgende handelingen uit om het bestand of de bestanden in te checken:

• Klik op de knop Inchecken op de werkbalk van het bestandenpaneel.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer Inchecken

in het snelmenu.

3 Klik op Ja om samen met de geselecteerde bestanden ook de afhankelijke bestanden te uploaden of klik op Nee als u geen

afhankelijke bestanden wilt uploaden. Standaard worden afhankelijke bestanden niet geladen. U kunt deze optie instellen

met Bewerken > Voorkeuren > Site.

Opmerking: Het is meestal verstandig om afhankelijke bestanden te uploaden wanneer u een nieuw bestand incheckt, maar

als de meest recente versies van de afhankelijke bestanden al op de externe server aanwezig zijn, is het niet nodig om deze

bestanden nogmaals te uploaden.

Er verschijnt een vergrendelingssymbool naast het pictogram van het lokale bestand om aan te geven dat het nu een alleen-

lezen bestand is.

Belangrijk: Als u het actieve bestand incheckt, wordt het bestand mogelijk eerst automatisch opgeslagen voordat het wordt

ingecheckt, afhankelijk van de opties die u hebt ingesteld.

Een geopend bestand inchecken vanuit het documentvenster

1 Zorg ervoor dat het bestand dat u wilt inchecken, in het documentvenster is geopend.

Opmerking: U kunt slechts één geopend bestand per keer inchecken.

2 Voer een van de volgende handelingen uit:

• Selecteer Site > Inchecken.

• Klik op het pictogram Bestandsbeheer op de werkbalk van het documentvenster en selecteer Inchecken in het menu dat

verschijnt.

Als het huidige bestand geen deel uitmaakt van de actieve site in het bestandenpaneel, probeert Dreamweaver vast te stellen

tot welke lokaal gedefinieerde site het huidige bestand behoort. Als het huidige bestand behoort tot een andere site dan de

site die actief is in het bestandenpaneel, opent Dreamweaver die site en wordt de incheckbewerking uitgevoerd.

Belangrijk: Als u het actieve bestand incheckt, wordt het bestand mogelijk eerst automatisch opgeslagen voordat het wordt

ingecheckt, afhankelijk van de opties die u hebt ingesteld.

Het uitchecken van een bestand ongedaan maken

Als u een bestand uitcheckt en u vervolgens besluit het bestand toch niet te bewerken (of besluit de wijzigingen die u hebt

aangebracht, niet door te voeren), kunt u de uitcheckbewerking ongedaan maken, waarna het bestand weer terugkeert naar

de oorspronkelijke staat.

Als u het uitchecken van een bestand ongedaan wilt maken, voert u een van de volgende handelingen uit:

• Open het bestand in het documentvenster en selecteer Site > Uitchecken ongedaan maken.

• Klik in het bestandenpaneel met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh)

en selecteer vervolgens Uitchecken ongedaan maken in het snelmenu.

DREAMWEAVER CS3

Handboek

De lokale kopie van het bestand wordt een alleen-lezen bestand en eventuele wijzigingen die u hebt aangebracht in het

bestand, gaan verloren.

Bestanden synchroniseren

Bestanden op de lokale en externe site synchroniseren

Nadat u bestanden hebt gemaakt op uw lokale en externe site, kunt u de bestanden op de twee sites synchroniseren.

Opmerking: Als de externe site een FTP-server (in plaats van een netwerkserver) is, wordt FTP gebruikt voor het

synchroniseren van de bestanden.

Voordat u de bestanden op beide sites synchroniseert, kunt u bepalen welke bestanden u wilt plaatsen, ophalen, verwijderen

of negeren. Dreamweaver geeft ook aan welke bestanden zijn bijgewerkt nadat u de synchronisatie hebt voltooid.

Zie ook

“De bestandsoverdracht beheren” op pagina 87

“Bestanden inchecken in of uitchecken uit een externe map” op pagina 89

“Bestanden van een externe server ophalen” op pagina 84

“Bestanden op een externe server plaatsen” op pagina 85

“Bestanden vergelijken om verschillen op te sporen” op pagina 92

Controleren welke bestanden nieuwer zijn op de lokale of externe site zonder te synchroniseren

❖

Voer een van de volgende handelingen uit in het bestandenpaneel:

• Klik op het menu Opties in de rechterbovenhoek en selecteer Bewerken > Nieuwere lokale selecteren of Bewerken >

Nieuwere externe selecteren.

• Klik in het bestandenpaneel met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh)

en selecteer Selecteren > Nieuwere lokale of Selecteren > Nieuwere externe.

Gedetailleerde synchronisatie-informatie over een bepaald bestand weergeven

❖

Klik in het bestandenpaneel met de rechtermuisknop (Windows), of klik terwijl u Control ingedrukt houdt (Macintosh)

op het bestand waarover u informatie wilt weergeven, en selecteer de optie voor het weergeven van synchronisatie-

informatie.

Opmerking: Deze functie is alleen beschikbaar als de optie Synchronisatie-informatie bijhouden in de categorie Extern van het

dialoogvenster Sitedefinitie is geselecteerd.

Uw bestanden synchroniseren

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site in het menu (waarin de huidige site of server of het

huidige station wordt weergegeven).

2 Selecteerdesgewenstspecifiekebestandenofmappenofganaardevolgendestapomdevolledigesitetesynchroniseren.

3 Klik op het menu Opties in de rechterbovenhoek van het bestandenpaneel en selecteer Site > Synchroniseren.

U kunt ook op de knop Synchroniseren bovenaan in het bestandenpaneel klikken om bestanden te synchroniseren.

4 Voer in met menu Synchroniseren een van de volgende handelingen uit:

• Als u de gehele site wilt synchroniseren, selecteert u Volledige site naam van de site.

DREAMWEAVER CS3

Handboek

• Als u alleen geselecteerde bestanden wilt synchroniseren, selecteert u Alleen geselecteerde lokale bestanden (of Alleen

geselecteerde externe bestanden als u op dat moment bestanden hebt geselecteerd in de weergave Extern van het

bestandenpaneel).

5 Geef op in welke 'richting' u de bestanden wilt kopiëren:

Nieuwere bestanden op de externe server plaatsen Hiermee uploadt u alle lokale bestanden die niet op de externe server

aanwezig zijn of die zijn gewijzigd na de laatste uploadactie.

Nieuwere bestanden van de externe server ophalen Hiermee downloadt u alle externe bestanden die niet op de lokale

server aanwezig zijn of zijn gewijzigd na de laatste downloadactie.

Nieuwere bestanden ophalen en plaatsen Hiermeeplaatstudemeestrecenteversiesvanallebestandenopzoweldelokale

als de externe site.

6 Geef op of bestanden op de doelsite waarvoor geen tegenhangers op de bronsite aanwezig zijn, moeten worden

verwijderd. (Dit is niet beschikbaar als u in menu Richting de optie Ophalen en Plaatsen selecteert.)

Als u Nieuwere bestanden op de externe server plaatsen selecteert en u de optie Verwijderen selecteert, worden de

bestanden op uw externe site waarvoor geen corresponderende bestanden op de lokale site aanwezig zijn, verwijderd. Als

u Nieuwere bestanden van de externe server ophalen selecteert, worden de bestanden op uw lokale site waarvoor geen

corresponderende bestanden op de externe site aanwezig zijn, verwijderd.

7 Klik op Voorvertoning.

Opmerking: Voordat u de bestanden kunt synchroniseren, moet u de acties die Dreamweaver uitvoert om deze taak te

verrichten, voorvertonen.

Als de nieuwste versie van elk gekozen bestand al op beide locaties aanwezig is en er niets hoeft te worden verwijderd,

verschijnt er een berichtvenster met de melding dat synchroniseren niet nodig is. Als er wel oudere versies aanwezig zijn,

wordt het dialoogvenster Synchroniseren weergegeven waarin u de geplande acties (plaatsen, ophalen, verwijderen en

negeren) voor deze bestanden kunt wijzigen voordat de synchronisatie wordt uitgevoerd.

8 Controleer de actie die wordt uitgevoerd voor elk bestand.

9 Als u een actie voor een bepaald bestand wilt wijzigen, selecteert u het bestand en klikt u op een van de

actiepictogrammen onderaan in het voorvertoningsvenster.

Vergelijken De actie Vergelijken werkt alleen als u in Dreamweaver een bestandsvergelijkingsprogramma hebt

geïnstalleerd en gespecificeerd. Als het actiepictogram grijs wordt weergegeven (en dus niet beschikbaar is), kan de actie

niet worden uitgevoerd.

Geselecteerde bestanden markeren als Al gesynchroniseerd Metdezeoptiekuntuopgevendatdegeselecteerdebestanden

al zijn gesynchroniseerd.

10 Klik op OK om de bestanden te synchroniseren. U kunt de details van de synchronisatie weergeven of opslaan in een

lokaal bestand.

Bestanden vergelijken om verschillen op te sporen

Lokale en externe bestanden vergelijken om verschillen op te sporen

Dreamweaver kan samenwerken met bestandsvergelijkingsprogramma's om een lokale en externe versie van hetzelfde

bestand, twee verschillende externe bestanden of twee verschillende lokale bestanden met elkaar te vergelijken. Het

vergelijken van de lokale versie en de externe versie is handig als u lokaal werkt aan een bestand en u vermoedt dat de kopie

van datzelfde bestand op de server door iemand anders is gewijzigd. U kunt zonder dat u Dreamweaver hoeft te verlaten

de wijzigingen in het bestand op de externe server weergeven en desgewenst invoegen in uw lokale versie voordat u het

bestand op de server plaatst.

DREAMWEAVER CS3

Handboek

Het vergelijken van twee lokale of twee externe bestanden is ook handig als u bijvoorbeeld meerdere versies van een bestand

hebt bewaard of als u versies van een en hetzelfde bestand andere namen hebt gegeven. Als u bent vergeten welke

wijzigingen u in een bestand hebt aangebracht ten opzichte van een vorige versie, kunt u daar achter komen via een snelle

vergelijking.

Voordat u begint, moet u een bestandsvergelijkingsprogramma van een andere fabrikant op uw computer installeren. Voor

meer informatie over bestandsvergelijkingsprogramma's, gebruikt u een zoekmachine zoals Google Search en zoekt u naar

'bestandsvergelijking' of 'bestandsvergelijkingsprogramma's'. Dreamweaver werkt met de meeste hulpprogramma's van

derden.

Zie ook

“Een lokale hoofdmap instellen en bewerken” op pagina 40

Een bestandsvergelijkingsprogramma specificeren in Dreamweaver

1 Installeer het bestandsvergelijkingsprogramma op dezelfde computer waarop ook Dreamweaver is geïnstalleerd.

2 Open in Dreamweaver het dialoogvenster Voorkeuren door Bewerken > Voorkeuren (Windows) of Dreamweaver >

Voorkeuren (Macintosh) te selecteren, en selecteer vervolgens de categorie Bestand vergelijken.

3 Voer een van de volgende handelingen uit:

• Klik in Windows op de knop Bladeren en selecteer de toepassing waarmee u bestanden kunt vergelijken.

• Klik op de Macintosh op de knop Blader en selecteer de tool of het script waarmee het bestandsvergelijkingsprogramma

kan worden gestart. Selecteer in dit geval niet het bestandsvergelijkingsprogramma zelf.

Opstarttools of -scripts bevinden zich gewoonlijk in de map usr/bin op de Macintosh. Als u bijvoorbeeld FileMerge wilt

gebruiken, gaat u naar usr/bin en selecteert u opendiff, de tool waarmee FileMerge kan worden gestart.

In de volgende tabel worden veelgebruikte bestandsvergelijkingsprogramma's voor de Macintosh en de locatie van hun

opstarttools of -scripts op de vaste schijf weergegeven:

Opmerking: De map usr is gewoonlijk verborgen in Finder. U kunt echter toegang krijgen tot deze map met de knop Bladeren

in Dreamweaver.

Opmerking: Welke resultaten werkelijk worden weergegeven, is afhankelijk van het bestandsvergelijkingsprogramma dat u

gebruikt. Raadpleeg de gebruikershandleiding bij het programma om te weten hoe u de resultaten moet interpreteren.

Twee lokale bestanden vergelijken

U kunt twee bestanden op uw computer met elkaar vergelijken.

1 Klik terwijl u Control (Windows) of Command (Macintosh) ingedrukt houdt in het bestandenpaneel op de twee

bestanden om deze te selecteren.

Alsubestandenbuitendedoorugedefinieerdesitewiltselecteren,selecteertuuwlokaleschijfinhetpop-upmenuaande

linkerkant in het bestandenpaneel en selecteert u vervolgens de gewenste bestanden.

2 Klik met de rechtermuisknop op een van de geselecteerde bestanden en selecteer de optie Lokale bestanden vergelijken

in het snelmenu dat verschijnt.

Opmerking: Als u een muis met slechts één knop hebt, houdt u Control ingedrukt en klikt u op een van de geselecteerde

bestanden.

Het bestandsvergelijkingsprogramma wordt gestart en de twee bestanden worden met elkaar vergeleken.

Programma Selecteer dit opstartbestand

FileMerge usr/bin/opendiff

BBEdit usr/bin/bbdiff

TextWrangler usr/bin/twdiff

DREAMWEAVER CS3

Handboek

Twee externe bestanden vergelijken

U kunt twee bestanden op uw externe server met elkaar vergelijken. U moet een Dreamweaver-site definiëren met

instellingen voor de externe server voordat u deze taak kunt uitvoeren.

1 Selecteer in het pop-upmenu aan de rechterkant van het bestandenpaneel de optie Externe weergave om de bestanden

op de externe server weer te geven.

2 Klik op de twee bestanden terwijl u Control (Windows) of Command (Macintosh) ingedrukt houdt om deze bestanden

te selecteren.

3 Klik met de rechtermuisknop op een van de geselecteerde bestanden en selecteer in het snelmenu dat verschijnt, de optie

Externe bestanden vergelijken.

Opmerking: Als u een muis met slechts één knop hebt, houdt u Control ingedrukt en klikt u op een van de geselecteerde

bestanden.

Het bestandsvergelijkingsprogramma wordt gestart en de twee bestanden worden met elkaar vergeleken.

Een lokaal bestand met een extern bestand vergelijken

U kunt een lokaal bestand vergelijken met een bestand op uw externe server. Hiertoe moet u eerst een Dreamweaver-site

definiëren met instellingen voor de externe server.

❖ Klik in het bestandenpaneel met de rechtermuisknop op een lokaal bestand en selecteer in het snelmenu dat verschijnt,

de optie Vergelijken met externe.

Opmerking: Als u een muis met slechts één knop hebt, houdt u Control ingedrukt en klikt u op het lokale bestand.

Het bestandsvergelijkingsprogramma wordt gestart en de twee bestanden worden met elkaar vergeleken.

Een extern bestand met een lokaal bestand vergelijken

U kunt een extern bestand met een lokaal bestand vergelijken. U moet een Dreamweaver-site definiëren met instellingen

voor de externe server voordat u deze taak kunt uitvoeren.

1 Selecteer in het pop-upmenu aan de rechterkant van het bestandenpaneel de optie Externe weergave om de bestanden

op de externe server weer te geven.

2 Klik met de rechtermuisknop op een bestand in het paneel en selecteer in het snelmenu dat verschijnt, de optie

Vergelijken met lokale.

Opmerking: Als u een muis met slechts één knop hebt, houdt u Control ingedrukt en klikt u op het bestand.

Een geopend bestand met een extern bestand vergelijken

U kunt een bestand dat is geopend in Dreamweaver, vergelijken met zijn tegenhanger op de externe server.

❖ Selecteer Bestand > Vergelijken met externe in het documentvenster.

Het bestandsvergelijkingsprogramma wordt gestart en de twee bestanden worden met elkaar vergeleken.

U kunt ook met de rechtermuisknop op de documenttab boven aan het documentvenster klikken en in het snelmenu de

optie Vergelijken met externe selecteren.

Bestanden vergelijken alvorens ze te plaatsen

Alsueenbestandlokaalbewerktenhetvervolgensprobeertte uploaden naar uw externe server, waarschuwt Dreamweaver

u als de externe versie van het bestand is gewijzigd. U krijgt de mogelijkheid deze twee bestanden te vergelijken voordat u

het bestand uploadt en de externe versie overschrijft.

Voordat u begint, moet u een bestandsvergelijkingsprogramma op uw computer installeren en dit programma in

Dreamweaver specificeren.

1 Nadat u een bestand op een Dreamweaver-site hebt bewerkt, plaatst u het bestand (Site > Plaatsen) op uw externe site.

Als de externe versie van het bestand is gewijzigd, ontvangt u een melding met de mogelijkheid om de verschillen te

bekijken.

DREAMWEAVER CS3

Handboek

2 Als u de verschillen wilt weergeven, klikt u op de knop Vergelijken.

Het bestandsvergelijkingsprogramma wordt gestart en de twee bestanden worden met elkaar vergeleken.

Als u geen bestandsvergelijkingsprogramma hebt gespecificeerd, wordt u gevraagd om een dergelijk programma op te

geven.

3 Nadat u de wijzigingen in het programma hebt bekeken of in uw bestand hebt opgenomen, kunt u verdergaan met de

bewerking Plaatsen of deze bewerking annuleren.

Bestanden vergelijken bij het synchroniseren

U kunt de lokale versies van uw bestanden vergelijken met de externe versies wanneer u de bestanden op uw site

synchroniseert met Dreamweaver.

Voordat u begint, moet u een bestandsvergelijkingsprogramma op uw computer installeren en dit programma in

Dreamweaver specificeren.

1 Klik met de rechtermuisknop op een willekeurige plaats in het bestandenpaneel en selecteer in het snelmenu dat

verschijnt, de optie Synchroniseren.

2 Selecteer de gewenste opties in het dialoogvenster Bestanden synchroniseren en klik op Voorvertoning.

NadatuopVoorvertoninghebtgeklikt,wordteenoverzichtgegevenvandegeselecteerdebestandenendeactiesdietijdens

de synchronisatie worden uitgevoerd.

3 Selecteer in deze lijst elk bestand dat u wilt vergelijken en klik op de knop Vergelijken (het pictogram met de twee kleine

pagina's).

Opmerking: Het bestand moet een tekstbestand zijn, zoals een HTML- of ColdFusion-bestand.

Dreamweaver start het bestandsvergelijkingsprogramma, dat de lokale en externe versies vergelijkt van elk bestand dat u

hebt geselecteerd.

Zie ook

“Bestanden synchroniseren” op pagina 91

Bestanden terugdraaien (Contribute-gebruikers)

Dreamweaver slaat automatisch meerdere versies van een document op wanneer u de compatibiliteit met Adobe Contribute

hebt ingeschakeld.

Opmerking: Contribute moet op de computer zijn geïnstalleerd waarop ook Dreamweaver is geïnstalleerd.

Het terugdraaien van bestanden moet ook in de beheerinstellingen van Contribute zijn ingeschakeld. Zie Contribute

beheren voor meer informatie.

1 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op een bestand in het

bestandenpaneel.

2 Selecteer Vorige pagina.

Als er een vorige versie van de pagina aanwezig is, wordt het dialoogvenster Terugdraaien weergegeven.

3 Selecteer de versie van de pagina waarnaar u wilt terugkeren en klik op Terugdraaien.

Zie ook

“Een site voorbereiden voor gebruik met Contribute” op pagina 56

“Een extern bestand op een Contribute-site verwijderen, verplaatsen of een andere naam geven” op pagina 58

DREAMWEAVER CS3

Handboek

Mappen en bestanden op uw site camoufleren

Over het camoufleren van een site

Door sites te camoufleren kunt u mappen en bestandstypen uitsluiten van bewerkingen, zoals Ophalen en Plaatsen. U kunt

wel afzonderlijke mappen, maar geen afzonderlijke bestanden camoufleren. Als u bestanden wilt camoufleren, moet u een

bestandstype selecteren. Dreamweaver zal vervolgens alle bestanden van dat type camoufleren. Dreamweaver onthoudt uw

instellingen voor elke site, zodat u niet steeds opnieuw instellingen hoeft te selecteren wanneer u aan een site werkt.

Als u bijvoorbeeld werkt aan een grote site en u niet elke dag uw multimediabestanden wilt uploaden, kunt u het

camoufleren gebruiken om uw multimediamap te camoufleren. De bestanden in deze map worden dan uitgesloten van de

bewerkingen die u op de site uitvoert.

U kunt mappen en bestandstypen camoufleren op de externe en de lokale site. Als u mappen en bestanden camoufleert,

worden deze uitgesloten van de volgende bewerkingen:

• De bewerkingen Plaatsen, Ophalen, Inchecken en Uitchecken

• Het genereren van rapporten

• Het zoeken naar nieuwere lokale en externe bestanden

• Het uitvoeren van bewerkingen op de gehele site, zoals het controleren en wijzigen van koppelingen

• Het synchroniseren

• Het werken met de inhoud van het middelenpaneel

• Het bijwerken van sjablonen en bibliotheken

Opmerking: Dreamweaver sluit gecamoufleerde sjablonen en bibliotheekitems alleen uit van de bewerkingen Ophalen en

Plaatsen. Dreamweaver sluit deze items niet uit van batchbewerkingen, omdat deze items anders niet meer overeen zouden

komen met hun instanties.

Het camoufleren van sites in- en uitschakelen

Via sitecamouflage kunt u mappen en bestandstypen op een site uitsluiten van bewerkingen op de hele site, zoals Ophalen

en Plaatsen. Sitecamouflage is standaard ingeschakeld. U kunt het camoufleren permanent uitschakelen of slechts tijdelijk

uitschakelen als u een bewerking op alle bestanden, inclusief de gecamoufleerde bestanden wilt uitvoeren. Wanneer u

sitecamouflage uitschakelt, worden alle gecamoufleerde bestanden weer zichtbaar gemaakt voor bewerkingen. Wanneer u

de sitecamouflage weer inschakelt, worden bestanden die voorheen waren gecamoufleerd, opnieuw gecamoufleerd.

Opmerking: U kunt de optie Alles weer zichtbaar maken gebruiken om de camouflage van alle bestanden op te heffen, maar

hiermee schakelt u het camoufleren niet uit. En het is ook niet mogelijk om alle mappen en bestanden die voorheen

gecamoufleerd waren, in één keer opnieuw te camoufleren. U zult elke map en elk bestandstype apart opnieuw moeten

camoufleren.

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site in het snelmenu (waarin de huidige site of server of het

huidige station wordt weergegeven).

2 Selecteer een bestand of map.

3 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en voer een van de

volgende handelingen uit:

• Selecteer Camoufleren > Camoufleren inschakelen (hef de selectie op als u de optie wilt uitschakelen).

• Selecteer Camoufleren > Instellingen en selecteer Camoufleren in de lijst met categorieën aan de linkerkant van het

tabblad Geavanceerd in het dialoogvenster Sitedefinitie. Schakel Camoufleren inschakelen in of uit en schakel

Bestanden camoufleren die eindigen met, in of uit om het camoufleren in of uit te schakelen voor specifieke

bestandstypen. U kunt in het tekstvak achtervoegsels invoeren of verwijderen van bestanden die u wilt camoufleren of

waarvan u de camouflage wilt opheffen.

4 Klik op OK.

DREAMWEAVER CS3

Handboek

Sitemappen camoufleren of de camouflage opheffen

U kunt specifieke mappen camoufleren, maar u kunt niet alle mappen op een hele site camoufleren. Wanneer u specifieke

mappen camoufleert, kunt u meerdere mappen tegelijk camoufleren.

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site waarvoor sitecamouflage is ingeschakeld in het

snelmenu (waarin de huidige site of server of het huidige station wordt weergegeven).

2 Selecteer de map of mappen die u wilt camoufleren of waarvan u de camouflage wilt opheffen.

3 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer

Camoufleren > Camoufleren of Camoufleren > Weer zichtbaar maken in het snelmenu.

Er verschijnt een rode streep door het mappictogram om aan te geven dat de map is gecamoufleerd, of de rode streep

verdwijnt om aan te geven dat de map niet meer is gecamoufleerd.

Opmerking: U kunt een bewerking op een specifieke gecamoufleerde map uitvoeren door het item in het bestandenpaneel te

selecteren en er een bewerking op uit te voeren. Als u een bewerking rechtstreeks op een bestand of map uitvoert, wordt de

camouflage genegeerd.

Specifieke bestandstypen camoufleren of de camouflage ervan opheffen

U kunt opgeven welke specifieke bestandstypen moeten worden gecamoufleerd, zodat Dreamweaver alle bestanden met

namen die eindigen met een specifiek patroon, camoufleert. U kunt bijvoorbeeld alle bestanden met de extensie .txt

camoufleren. De bestandstypen die u invoert, hoeven echter geen bestandsextensies te zijn, maar kunnen elk willekeurig

patroon aan het einde van een bestandsnaam zijn.

Opmerking: Het is niet mogelijk om een enkel bestand te camoufleren, alleen een map of alle bestanden van een gegeven

bestandstype.

Specifieke bestandstypen binnen een site camoufleren

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site waarvoor sitecamouflage is ingeschakeld in het pop-

upmenu (waarin de huidige site of server of het huidige station wordt weergegeven).

2 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer

Camoufleren > Instellingen.

3 Selecteer de optie 'Bestanden camoufleren die eindigen met' en voer in het tekstvak de bestandstypen in die u wilt

camoufleren.

U kunt bijvoorbeeld

.jpg invoeren om alle bestanden met een naam die eindigt op .jpg, te camoufleren in uw site.

Als u meerdere bestandstypen wilt invoeren, moet u ze van elkaar scheiden met een spatie. Gebruik geen komma of

puntkomma.

4 Klik op OK.

Er verschijnt een rode streep door de bestanden van het door u gekozen type om aan te geven dat deze zijn gecamoufleerd.

Bepaalde programma's maken back-upbestanden die eindigen met een bepaald achtervoegsel, zoals .bak. Dergelijke

bestanden kunt u camoufleren.

Opmerking: U kunt een bewerking op een specifieke gecamoufleerde map uitvoeren door het item in het bestandenpaneel te

selecteren en er een bewerking op uit te voeren. Als u een bewerking rechtstreeks op een bestand of map uitvoert, wordt de

camouflage genegeerd.

De camouflage van specifieke bestandstypen binnen een site opheffen

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site waarvoor sitecamouflage is ingeschakeld in het pop-

upmenu (waarin de huidige site of server of het huidige station wordt weergegeven).

2 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer

Camoufleren > Instellingen.

DREAMWEAVER CS3

Handboek

3 Voer een van de volgende handelingen uit op het tabblad Geavanceerd van het dialoogvenster Sitedefinitie:

• Schakel de optie Bestanden camoufleren die eindigen met, uit om voor alle bestandstypen die in het tekstvak worden

vermeld, de camouflage op te heffen.

• Verwijder specifieke bestandstypen uit het tekstvak om de camouflage voor deze bestandstypen op te heffen.

4 Klik op OK.

De rode streep door de bestanden van het door u gekozen type verdwijnt, waarmee wordt aangegeven dat de camouflage

voor deze bestanden is opgeheven.

De camouflage van alle mappen en bestanden opheffen

U kunt de camouflage voor alle mappen en bestanden op een site in één keer opheffen. Deze actie kan niet ongedaan

wordengemaakt.Hetisnietmogelijkomalleitemsdievoorheenwarengecamoufleerd,nadezeactieinéénkeeropnieuw

te camoufleren. U dient de items allemaal afzonderlijk opnieuw te camoufleren.

Als u voor alle mappen en bestanden tijdelijk de camouflage wilt opheffen en als u deze items vervolgens weer opnieuw wilt

camoufleren, moet u de sitecamouflage uitschakelen.

1 Selecteer in het bestandenpaneel (Venster > Bestanden) een site waarvoor sitecamouflage is ingeschakeld in het menu

(waarin de huidige site of server of het huidige station wordt weergegeven).

2 Selecteer een willekeurig bestand of een willekeurige map op deze site.

3 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) en selecteer

Camoufleren > Alles weer zichtbaar maken.

Opmerking: Met deze stap schakelt u ook de optie Bestanden camoufleren die eindigen met uit in Site > Camoufleren >

Instellingen.

De rode streep door bestands- en mappictogrammen verdwijnt om aan te geven dat de camouflage voor alle bestanden en

mappen op de site is opgeheven.

Bestandsgegevens opslaan in ontwerpnotities.

Over ontwerpnotities

Ontwerpnotitieszijnnotitiesdieumaaktvooreenbestand. Ontwerpnotitieswordengekoppeldaanhetbestandwaarvan

ze een beschrijving bevatten, maar worden in een afzonderlijk bestand opgeslagen. In het uitgevouwen paneel Bestanden

kunt u zien aan welke bestanden ontwerpnotities zijn gekoppeld: er verschijnt een pictogram Ontwerpnotities in de kolom

Notities.

U kunt ontwerpnotities gebruiken om extra informatie over een document bij te houden, zoals de naam van de

afbeeldingsbronbestanden en commentaren over de status van het bestand. Als u bijvoorbeeld een document van de ene

naar de andere site kopieert, kunt u ontwerpnotities voor dat document toevoegen met de opmerking dat het origineel zich

in een map op de andere site bevindt.

U kunt ontwerpnotities ook gebruiken om gevoelige informatie bij te houden die u uit veiligheidsoverwegingen niet in het

document zelf wilt plaatsen, zoals opmerkingen over de berekening van een bepaalde prijs, de totstandkoming van een

configuratie of de marketingfactoren die van invloed waren op een ontwerpbesluit.

Als u een bestand in Adobe® Fireworks® of Flash opent en dit bestand naar een andere indeling exporteert, slaan Fireworks

en Flash automatisch de naam van het oorspronkelijke bronbestand op in een ontwerpnotitiebestand. Als u bijvoorbeeld

het bestand mijnhuis.png in Fireworks opent en exporteert naar mijnhuis.gif, maakt Fireworks een ontwerpnotitiebestand

met de naam mijnhuis.gif.mno. Dit ontwerpnotitiebestand bevat de naam van het oorspronkelijke bestand in de vorm van

een absoluut

bestand: URL. Dus de ontwerpnotitie voor mijnhuis.gif bevat mogelijk de volgende regel:

fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

Een vergelijkbare Flash-ontwerpnotitie kan de volgende regel bevatten:

DREAMWEAVER CS3

Handboek

fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"

Opmerking: Als gebruikers ontwerpnotities willen delen, moeten ze hetzelfde pad naar de hoofdmap van de site definiëren

(bijvoorbeeld sites/assets/orig).

Als u de afbeelding in Dreamweaver importeert, wordt het ontwerpnotitiebestand automatisch samen met de afbeelding

naar uw site gekopieerd. Als u de afbeelding in Dreamweaver selecteert en u opgeeft dat u deze wilt bewerken in Fireworks,

opent Fireworks het oorspronkelijke bestand.

Zie ook

“Een externe editor openen voor mediabestanden” op pagina 260

Ontwerpnotities inschakelen en uitschakelen voor een site.

Ontwerpnotities worden gekoppeld aan een bestand, maar opgeslagen in een afzonderlijk bestand. U kunt ontwerpnotities

gebruiken om extra informatie over een document bij te houden, zoals de naam van de afbeeldingsbronbestanden en

commentaren over de status van het bestand.

U kunt ontwerpnotities voor een site in- en uitschakelen in de categorie Ontwerpnotities van het dialoogvenster

Sitedefinitie. Als u ontwerpnotities inschakelt, kunt u desgewenst opgeven dat u de notities alleen lokaal wilt gebruiken.

1 Selecteer Site > Sites beheren.

2 Selecteer in het dialoogvenster Sites beheren een site en klik vervolgens op Bewerken.

3 Selecteer op het tabblad Geavanceerd van het dialoogvenster Sitedefinitie de categorie Ontwerpnotities in de

categorieënlijst aan de linkerkant.

4 Schakel Ontwerpnotities bijhouden in (schakel deze optie uit als u ontwerpnotities wilt uitschakelen).

5 Als u alle lokale ontwerpnotitiebestanden voor uw site wilt verwijderen, klikt u op Opruimen en vervolgens op Ja. Als

u alle externe ontwerpnotitiebestanden wilt verwijderen, selecteert u Sites > Sites beheren, kiest u uw site, selecteert u

Bewerken en schakelt u in het paneel Externe info het selectievakje Synchronisatie-informatie bijhouden uit.

6 Schakel 'Ontwerpnotities uploaden om ze met anderen te delen' in als u de ontwerpnotities die aan uw site zijn

gekoppeld, met de rest van de documenten wilt uploaden en klik op OK.

• Als u deze optie inschakelt, kunt u ontwerpnotities delen met de rest van uw team. Als u een bestand plaatst of ophaalt,

zal Dreamweaver automatisch het gekoppelde ontwerpnotitiebestand plaatsen of ophalen.

• Als u deze optie niet inschakelt, houdt Dreamweaver ontwerpnotities lokaal bij, maar zal het deze niet automatisch

uploaden samen met uw bestanden. Als u alleen werkt aan een site en u deze optie uitschakelt, zullen de prestaties

verbeteren. Ontwerpnotities worden in dat geval niet overgebracht naar de externe site wanneer u bestanden incheckt of

plaatst, maar u kunt wel lokaal ontwerpnotities voor uw site toevoegen en wijzigen.

Ontwerpnotities koppelen aan bestanden

Ukunteenontwerpnotitiebestandmakenvoorelkdocumentofelkesjabloonopuwsite. Ukuntookontwerpnotitiesvoor

applets, ActiveX-besturingselementen, afbeeldingen, Flash-content, Shockwave-objecten en afbeeldingsvelden in uw

documenten maken.

Opmerking: Als u ontwerpnotities aan een sjabloonbestand toevoegt, nemen documenten die u maakt op basis van de sjabloon,

deze ontwerpnotities niet over.

1 Voer een van de volgende handelingen uit:

• Open het bestand in het documentvenster en selecteer Bestand > Ontwerpnotities.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het bestand in het

bestandenpaneel en selecteer Ontwerpnotities.

Opmerking: Als het bestand zich op een externe site bevindt, moet u het bestand eerst uitchecken of ophalen en moet u

vervolgens het bestand selecteren in de lokale map.

2 Selecteer op het tabblad Basisinformatie een status voor het document in het menu Status.

DREAMWEAVER CS3

Handboek

100

3 Klik op het datumpictogram (boven het tekstvak Notities) om de huidige lokale datum in uw notities in te voegen.

4 Typ uw commentaren in het tekstvak Notities.

5 Schakel het selectievakje Weergeven wanneer het bestand is geopend in om te zorgen dat het ontwerpnotitiebestand

telkens wordt weergegeven wanneer het bestand wordt geopend.

6 Klik op de plusknop (+) op het tabblad Alle informatie om een nieuw sleutel-/waardepaar toe te voegen. Selecteer een

paar en klik op de minknop (–) om het te verwijderen.

U kunt een sleutel bijvoorbeeld

Auteur noemen (in het tekstvak Naam) en de waarde definiëren als Heidi (in het tekstvak

Waarde).

7 Klik op OK om de notitie op te slaan.

Dreamweaver slaat uw notities op in een map met de naam _notes op de locatie waar zich ook het huidige bestand bevindt.

De bestandsnaam is de bestandsnaam van het document met de extensie .mno. Als de bestandsnaam bijvoorbeeld

index.html is, wordt de naam van het bijbehorende ontwerpnotitiebestand index.html.mno.

Zie ook

“Bestanden ophalen van en plaatsen op de server” op pagina 83

“Bestanden inchecken in of uitchecken uit een externe map” op pagina 89

Werken met ontwerpnotities

Nadat u een ontwerpnotitie aan een bestand hebt gekoppeld, kunt u de ontwerpnotitie openen, de status ervan wijzigen of

de notitie verwijderen.

Ontwerpnotities openen die zijn gekoppeld aan een bestand

❖

Voer een van de volgende handelingen uit om de ontwerpnotities te openen:

• Open het bestand in het documentvenster en selecteer Bestand > Ontwerpnotities.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op het bestand in het

bestandenpaneel en selecteer Ontwerpnotities.

• Dubbelklik in de kolom Notities van het bestandenpaneel op het gele pictogram voor ontwerpnotities.

Opmerking: Als u de gele pictogrammen van ontwerpnotities wilt weergeven, kiest u Site > Sites beheren > [de naam van uw

site] > Bewerken > Kolommen van de bestandsweergave op het tabblad Geavanceerd. Selecteer Notities in het lijstpaneel en

kies de optie Tonen. Wanneer u op de knop Uitvouwen op de werkbalk Bestanden klikt om zowel de lokale als de externe site

weer te geven, wordt een kolom Notities op uw lokale site weergegeven met een geel notitiepictogram voor elk bestand dat een

ontwerpnotitie heeft.

Een aangepaste status aan een ontwerpnotitie toewijzen

1 Open ontwerpnotities voor een bestand of object (zie de vorige procedure).

2 Klik op het tabblad Alle informatie.

3 Klik op de plusknop (+).

4 Typ in het veld Naam het woord

status.

5 Typ in het veld Waarde, de status in.

Als de statuswaarde al bestaat, wordt deze vervangen door de nieuwe waarde.

6 Klik op het tabblad Basisinformatie. U ziet dat de nieuwe statuswaarde in het pop-upmenu Status wordt weergegeven.

Opmerking: Er kan slechts één aangepaste waarde tegelijk in het statusmenu aanwezig zijn. Als u deze procedure opnieuw

uitvoert, vervangt Dreamweaver de statuswaarde die u de eerste keer hebt ingevoerd, door de nieuwe statuswaarde die u

invoert.

DREAMWEAVER CS3

Handboek

101

Niet-gekoppelde ontwerpnotities verwijderen van uw site

1 Selecteer Site > Sites beheren.

2 Selecteer de site en klik op Bewerken.

3 Selecteer in het dialoogvenster Sitedefinitie de categorie Ontwerpnotities in de lijst aan de linkerkant.

4 Klik op de knop Opruimen.

Dreamweaver vraagt u te bevestigen dat de ontwerpnotities die niet meer gekoppeld zijn aan een bestand op uw site, moeten

worden verwijderd.

Als u Dreamweaver gebruikt om een bestand te verwijderen waaraan een ontwerpnotitiebestand is gekoppeld, verwijdert

Dreamweaver ook het ontwerpnotitiebestand. Er komen dus gewoonlijk alleen zwevende ontwerpnotitiebestanden voor als

u buiten Dreamweaver een bestand verwijdert of de naam van een bestand wijzigt.

Opmerking: Als u de optie Ontwerpnotities bijhouden uitschakelt voordat u op Opruimen klikt, verwijdert Dreamweaver alle

ontwerpnotities voor uw site.

Uw site testen

Richtlijnen voor het testen van een site

Het is verstandig om uw site eerst lokaal te testen voordat u de site uploadt naar een server, waar de site kan worden bekeken.

(Het is zelfs heel verstandig om de site in de ontwerpfase geregeld te testen en eventuele fouten op te sporen, zodat u

problemen snel kunt onderscheppen en kunt voorkomen dat dezelfde fouten opnieuw worden gemaakt.)

Het is verstandig om te controleren of de pagina's er zo uitzien en zo functioneren als verwacht in de browsers waarvoor ze

bedoeld zijn. Ook moet u nagaan of alle koppelingen werken en of het downloaden van de pagina's niet te lang duurt. U

kunt ook de volledige site testen en problemen in de volledige site opsporen door een siterapport uit te voeren.

Aan de hand van de volgende richtlijnen kunt u zorgen dat bezoekers uw site als gebruikersvriendelijk ervaren:

1. Controleer of uw pagina's goed functioneren in de browsers waarvoor ze bedoeld zijn.

De pagina's moeten ook leesbaar zijn en goed functioneren in browsers die geen stijlen, lagen, insteekmodules of JavaScript

ondersteunen. Voor pagina's die niet goed werken in oudere browsers, kunt u wellicht het gedrag Browser controleren

gebruiken om bezoekers automatisch om te leiden naar een andere pagina.

2. Bekijk uw pagina's in verschillende browsers en op verschillende platforms.

Zo krijgt u de kans om verschillen in lay-out, kleur, lettergrootten en het standaardvensterformaat te ontdekken. Dit zijn

verschillen die niet kunnen worden voorspeld door een doelbrowsercontrole.

3. Controleer uw site op verbroken koppelingen en repareer deze.

Soms wordt het ontwerp van andere sites aangepast of wordt de indeling ervan veranderd waardoor de pagina waarnaar u

verwijst met een koppeling, kan zijn verplaatst of verwijderd. U kunt een koppelingencontrole-rapport uitvoeren om de

koppelingen op uw site te testen.

4. Kijk kritisch naar de bestandsgrootte van uw pagina's en hou in de gaten hoe lang het downloaden ervan duurt.

Bedenkookdateenpaginadiebestaatuitééngrotetabel,inbepaaldebrowserspaszichtbaarwordtvoorbezoekersalsde

tabel volledig is geladen. Grote tabellen kunt u daarom beter verdelen in kleinere tabellen. Als dat niet mogelijk is, kunt u

ook een klein beetje content, zoals een welkomstbericht of een advertentie-banner, buiten de tabel boven aan de pagina

weergeven, zodat gebruikers dit materiaal kunnen bekijken terwijl de tabel wordt gedownload.

5. Voer enkele siterapporten uit om de gehele site te testen en problemen op te lossen.

U kunt de gehele site testen om problemen op te sporen, zoals documenten zonder titel, lege tags en overbodige geneste tags.

DREAMWEAVER CS3

Handboek

102

6. Valideer uw code om tag- of syntaxisfouten op te sporen.

7. Werk de site bij en houd deze bij nadat de site is gepubliceerd.

U kunt uw site op verschillende manieren publiceren, dat wil zeggen live (beschikbaar) maken voor anderen op de server.

Publiceren is een proces dat altijd door gaat. Een belangrijk onderdeel van het proces is het definiëren en implementeren

van een versiebeheersysteem, met de tools van Dreamweaver of via een externe versiebeheertoepassing.

8. Gebruik de discussieforums.

De Dreamweaver-discussieforums vindt u op de website van Adobe op www.adobe.com/go/dreamweaver_newsgroup_nl.

Deze forums vormen een uitstekende bron van informatie over verschillende browsers, platforms enzovoort. U kunt hier

ook technische problemen bespreken en handige tips delen met andere gebruikers van Dreamweaver.

Zie www.adobe.com/go/vid0164_nl voor een zelfstudie over het oplossen van publicatieproblemen.

Zie ook

“Verbroken koppelingen herstellen” op pagina 283

“Koppelingen testen in Dreamweaver” op pagina 277

“Het gedrag Browser controleren toepassen” op pagina 336

“Tags valideren” op pagina 313

“Controleren op browsercompatibiliteit” op pagina 313

Rapporten gebruiken om uw site te testen

U kunt siterapporten uitvoeren en daarmee voor het huidige document, geselecteerde bestanden of de gehele site

informatie verwerven over de workflow of over HTML-kenmerken, zoals toegankelijkheid. U kunt ook de opdracht

Rapporten gebruiken om de koppelingen op uw site te controleren.

Workflowrapporten kunnen de samenwerking tussen leden van een webteam verbeteren. U kunt workflowrapporten

uitvoeren waarin wordt weergegeven wie een bestand heeft uitgecheckt, aan welke bestanden ontwerpnotities zijn

gekoppeld en welke bestanden onlangs zijn gewijzigd. U kunt ontwerpnotitierapporten verder verfijnen door naam-

/waardeparameters op te geven.

Opmerking: U moet een verbinding hebben gedefinieerd met een externe site om de workflowrapporten te kunnen uitvoeren.

Met HTML-rapporten kunt u rapporten compileren en genereren voor verscheidene HTML-kenmerken. U kunt

controleren op combineerbare lettertypetags, toegankelijkheid, ontbrekende Alt-tekst, overbodige geneste tags,

verwijderbare lege tags en documenten zonder naam.

Nadat u een rapport hebt uitgevoerd, kunt u dat rapport opslaan als een XML-bestand. Dit bestand kunt u vervolgens in

een sjablooninstantie, database of spreadsheet importeren en daarna afdrukken of weergeven op een website.

Opmerking: U kunt ook verschillende rapporttypen aan Dreamweaver toevoegen via de Adobe Dreamweaver Exchange-

website.

Zie ook

“Rapporten in Dreamweaver” op pagina 25

“Koppelingen testen in Dreamweaver” op pagina 277

“Extensies toevoegen en beheren in Dreamweaver” op pagina 677

Rapporten uitvoeren om een site te testen

1 Selecteer Site > Rapporten.

DREAMWEAVER CS3

Handboek

103

Als u slechts een toegankelijkheidsrapport voor uw site wilt uitvoeren, selecteert u Bestand > Pagina controleren >

Toegankelijkheid controleren. Het rapport wordt vervolgens in het paneel Siterapporten van de paneelgroep Resultaten

weergegeven.

2 Selecteer waarover u een rapport wilt maken in het pop-upmenu 'Rapport over' en stel de gewenste rapporttypen in die

moeten worden uitgevoerd (workflow of HTML).

U kunt alleen een rapport voor geselecteerde bestanden op de site uitvoeren als u al bestanden hebt geselecteerd in het

bestandenpaneel.

3 Als u een workflowrapport hebt geselecteerd, klikt u op Rapportinstellingen. Als u een ander rapport hebt geselecteerd,

slaat u deze stap over.

Opmerking: Als u meer dan één workflowrapport hebt geselecteerd, moet u op de knop Rapportinstellingen klikken voor elk

rapport. Selecteer een rapport, klik op Rapportinstellingen en voer instellingen in. Herhaal het proces voor de andere

workflowrapporten.

Uitgecheckt door Hiermee maakt u een rapport met alle documenten die zijn uitgecheckt door een specifiek teamlid. Voer

de naam van een teamlid in en klik op OK om terug te keren naar het dialoogvenster Rapporten.

Ontwerpnotities Hiermee maakt u een rapport waarin alle ontwerpnotities voor geselecteerde documenten of voor de site

worden weergegeven. Voer een of meer naam-/waardeparen in en selecteer vervolgens vergelijkingswaarden in de

corresponderende pop-upmenu's. Klik op OK om terug te gaan naar het dialoogvenster Rapporten.

Onlangs gewijzigd Hiermee maakt u een rapport waarin bestanden worden vermeld die gedurende een opgegeven

tijdsperiode zijn gewijzigd. Voer een datumbereik en locatie in voor de bestanden die u wilt bekijken.

4 Als u kiest voor een HTML-rapport, kunt de volgende rapporten selecteren:

Combineerbare geneste lettertypetags Hiermee maakt u een rapport waarin alle geneste lettertypetags worden

weergegeven die kunnen worden gecombineerd om de code op te schonen.

Bijvoorbeeld:

<font color="#FF0000"><font size="4">STOP!</font></font> wordt geretourneerd.

Ontbrekende alt. tekst Maakt een rapport met alle img-tags zonder alternatieve tekst.

Alternatieve tekst is tekst die in plaats van afbeeldingen wordt weergegeven in browsers waarin alleen tekst wordt

weergegeven of in browsers waarin is opgegeven dat afbeeldingen alleen handmatig kunnen worden gedownload.

Schermlezers lezen alternatieve tekst en in bepaalde browsers wordt alternatieve tekst weergegeven als de gebruiker de muis

over een afbeelding beweegt.

Uitgecheckt door Hiermee maakt u een rapport met alle documenten die zijn uitgecheckt door een specifiek teamlid.

Toegankelijkheid Hiermee maakt u een rapport waarin conflicten worden weergegeven tussen uw inhoud en de

toegankelijkheidsrichtlijnen uit sectie 508 van de Amerikaanse Rehabilitation Act uit 1998.

Overbodige geneste tags Hiermee maakt u een rapport waarin geneste tags worden weergegeven die moeten worden

opgeruimd.

Bijvoorbeeld:

<i> The rain <i> in</i> Spain stays mainly in the plain</i> wordt geretourneerd.

Verwijderbare lege tags Hiermee maakt u een rapport met alle lege tags die kunnen worden verwijderd om de HTML-code

op te schonen.

U hebt bijvoorbeeld een item of afbeelding verwijderd in de codeweergave, maar de tags die op het item van toepassing

waren, laten staan.

Naamloze documenten Hiermee maakt u een rapport van alle naamloze documenten die zijn aangetroffen binnen de

geselecteerde parameters. Dreamweaver geeft in dit rapport alle documenten weer met een standaardnaam, een naam die

al bestaat of ontbrekende titeltags.

5 Klik op Uitvoeren om het rapport te maken.

Afhankelijk van het type rapport dat u uitvoert, kan aan u worden gevraagd uw bestand op te slaan, uw site te definiëren of

een map te selecteren (als u dat nog niet hebt gedaan).

Er wordt een lijst met resultaten weergegeven in het paneel Siterapporten (van de paneelgroep Resultaten).

DREAMWEAVER CS3

Handboek

104

Een rapport gebruiken en opslaan

1 Voer een rapport uit (zie de vorige procedure).

2 Voer in het paneel Siterapporten een van de volgende handelingen uit om het rapport weer te geven:

• Klik op de kolomkop waarop u de resultaten wilt sorteren.

U kunt sorteren op bestandsnaam, regelnummer of beschrijving. U kunt ook meerdere rapporten tegelijk uitvoeren en de

verschillende rapporten openhouden.

• Selecteer een willekeurige regel in het rapport en klik op de knop Meer informatie aan de linkerkant van het paneel

Siterapporten voor een beschrijving van het probleem.

De informatie wordt in het paneel Referentie weergegeven.

• Dubbelklik op een willekeurige regel in het rapport om de corresponderende code in het documentvenster weer te geven.

Opmerking: Als u in de ontwerpweergave werkt, verandert Dreamweaver de weergave zo dat het venster wordt gesplitst om

het gerapporteerde probleem in code weer te geven.

3 Klik op Rapport opslaan om het rapport op te slaan.

Als u een rapport opslaat, kunt u dit in een bestaand sjabloonbestand importeren. U kunt het bestand vervolgens in een

database of spreadsheet importeren en daarna afdrukken of het bestand gebruiken om het rapport op een website weer te

geven.

Gebruik nadat u HTML-rapporten hebt uitgevoerd, de opdracht HTML opruimen om eventuele HTML-fouten in de

weergegeven rapporten te corrigeren.

105

Hoofdstuk 5: Beheer van elementen en

bibliotheken

Het middelenpaneel (in dezelfde paneelgroep als het bestandenpaneel) is het belangrijkste hulpmiddel voor het organiseren

van de elementen (middelen) van uw site, inclusief opnieuw bruikbare brokken inhoud (content) die ook wel

'bibliotheekitems' worden genoemd.

Over elementen en bibliotheken

Over elementen

Met Adobe® Dreamweaver® CS3 kunt u de elementen (middelen) bijhouden en bekijken die zijn opgeslagen op uw site, zoals

afbeeldingen, films, kleuren, scripts en koppelingen. Ook kunt een element rechtstreeks slepen om dit in een pagina van

het huidige document in te voegen.

Elementen zijn beschikbaar vanuit verschillende bronnen. Zo kunt u elementen creëren in een toepassing als Adobe®

Fireworks® of Adobe® Flash®, deze ontvangen van een collega en kopiëren vanaf een cd met illustraties of website met

afbeeldingen.

Dreamweaver biedt tevens toegang tot twee speciale typen elementen: bibliotheken en sjablonen. Beide zijn gekoppelde

elementen: wanneer u een bibliotheekitem of sjabloon bewerkt, werkt Dreamweaveralle documenten bij waarin deze

elementen worden gebruikt. Over het algemeen bestaan bibliotheekitems uit kleine ontwerpelementen, zoals het logo of

copyrightgegevens van een site. Voor het aansturen van een groter ontwerpgebied gebruikt u een sjabloon.

Zie ook

“Over sjablonen van Dreamweaver” op pagina 370

Over bibliotheekitems

Een bibliotheek is een speciaal bestand van Dreamweaver met daarin een verzameling afzonderlijke elementen of kopieën

van elementen die u op uw webpagina's kunt plaatsen. De elementen in een bibliotheek worden bibliotheekitems genoemd.

Items die u in een bibliotheek kunt opslaan, kunnen afbeeldingen, tabellen, geluiden en Flash-bestanden omvatten. U kunt

automatisch telkens wanneer u een item bewerkt, alle pagina's met dat item bijwerken.

Stel, u bent bezig met het bouwen van een grote site voor een onderneming die op elke pagina een slogan wil weergeven. U

creëert dan een bibliotheekitem met die slogan en gebruikt dit bibliotheekitem op elke pagina. Als de slogan wordt

gewijzigd, kunt u dit bibliotheekitem wijzigen en automatisch elke pagina bijwerken, waarop dat item wordt gebruikt.

Dreamweaver slaat bibliotheekitems op in een map Bibliotheek binnen de lokale hoofdmap voor elke site. Elke site heeft

zijn eigen bibliotheek.

U kunt een bibliotheekitem maken op basis van elk element in de

body-sectie van een document, inclusief tekst, tabellen,

formulieren, Java-applets, plug-ins, ActiveX-elementen, navigatiebalken en afbeeldingen.

Voor gekoppelde items, bijvoorbeeld afbeeldingen, wordt in de bibliotheek alleen een verwijzing naar het item opgeslagen.

Voor de juiste werking van het bibliotheekitem moet het oorspronkelijke bestand op de opgegeven locatie worden

gehandhaafd.

Toch kan het nog steeds handig zijn om een afbeelding op te slaan in een bibliotheekitem. U kunt bijvoorbeeld een volledige

img-tag opslaan in een bibliotheekitem, zodat u eenvoudig de alt-tekst van een afbeelding of zelfs het src-kenmerk van de

afbeelding kunt wijzigen voor de hele site. (Gebruik deze techniek niet om de kenmerken

width enheigth van een

afbeelding te wijzigen, tenzij u een afbeeldingseditor hebt om de werkelijke grootte van de afbeelding te wijzigen.)

DREAMWEAVER CS3

Handboek

106

Opmerking: Als het bibliotheekitem koppelingen bevat, functioneren de koppelingen mogelijk niet op de nieuwe site. Bovendien

worden afbeeldingen in een bibliotheekitem niet naar de nieuwe site gekopieerd.

Wanneer u een bibliotheekitem gebruikt, voegt Dreamweaver op de webpagina niet het item zelf, maar een koppeling naar

het item in. Dat wil zeggen dat Dreamweaver een kopie van de HTML-broncode voor dat item invoegt in het document en

een HTML-opmerking toevoegt met een verwijzing naar het oorspronkelijke, externe item. Juist deze externe verwijzing

maakt automatisch bijwerken mogelijk.

Wanneer u een bibliotheekitem creëert dat een element bevat waaraan een gedrag van Dreamweaver is gekoppeld, kopieert

Dreamweaver zowel het element als de event handler ervan (het kenmerk dat bepaalt welke gebeurtenis de actie op gang

brengt, zoals

onClick, onLoad of onMouseOver, en welke actie moet worden aangeroepen (wanneer de gebeurtenis zich

voordoet) voor het bibliotheekitembestand. Dreamweaver kopieert de gekoppelde JavaScript-functies niet naar het

bibliotheekitem. Wanneer u het bibliotheekitem in een document invoegt, plaatst Dreamweaver in plaats daarvan

automatisch de juiste JavaScript-functies in de

head-sectie van dat document in (als deze al niet aanwezig zijn).

Opmerking: Als u JavaScript handmatig codeert (dat wil zeggen, als u dit creëert zonder daarbij gedragsvormen van

Dreamweaver te gebruiken), kunt u dit als onderdeel van een bibliotheekitem maken als u het gedrag Call JavaScript gebruikt

om de code uit te voeren. Als u geen Dreamweaver-gedrag gebruikt om de code uit te voeren, wordt de code niet als onderdeel

van het bibliotheekitem bewaard.

Het bewerken van gedragsvormen in bibliotheekitems stelt speciale eisen. Bibliotheekitems kunnen geen stijlpagina's

bevatten, omdat de code voor deze elementen deel uitmaakt van de

head-sectie.

Zie ook

“Gedrag in een bibliotheekitem bewerken” op pagina 115

Werken met elementen

Overzicht van middelenpaneel

Gebruik het middelenpaneel (Venster > Middelen) voor het beheer van elementen op de huidige site. Het middelenpaneel

geeft elementen weer voor de site die is gekoppeld aan het actieve document in het documentvenster.

Opmerking: Voordat elementen worden weergegeven in het middelenpaneel dient u eerst een lokale site te definiëren.

Het middelenpaneel weergegeven met de sitelijst. Pictogrammen voor categorieën staan links, terwijl het voorbeeldgebied boven de lijst staat.

Het middelenpaneel biedt twee manieren voor de weergave van elementen:

Sitelijst Hiermee worden alle elementen op uw site weergegeven, inclusief kleuren en URL's die in de documenten van uw

site worden gebruikt.

DREAMWEAVER CS3

Handboek

107

Lijst Favorieten Hiermee worden alleen de elementen weergegeven, die u expliciet hebt gekozen.

Voor het schakelen tussen deze twee weergaven selecteert u het keuzerondje Sites of Favorieten boven het voorbeeldgebied.

(Deze twee weergaven zijn niet beschikbaar voor de categorieën Sjablonen en Bibliotheek.)

Opmerking: De meeste bewerkingen van het middelenpaneel werken voor beide lijsten hetzelfde. Er zijn echter enkele taken

die u alleen in de lijst Favorieten kunt uitvoeren.

In beide lijsten vallen elementen in een van de volgende categorieën:

Afbeeldingen Afbeeldingsbestanden in de indelingen GIF, JPEG of PNG.

Kleuren Kleuren die worden gebruikt in documenten en stijlpagina's, inclusief kleuren voor tekst, achtergronden en

koppelingen.

URL's Externe koppelingen in documenten voor uw huidige site, inclusief FTP, gopher, HTTP, HTTPS, JavaScript,

e-mail (

mailto) en lokaal bestand (file://) koppelingen.

Flash Bestanden van een willekeurige versie van Adobe Flash. In het middelenpaneel worden alleen SWF-bestanden

(gecomprimeerde Flash-bestanden) weergegeven en geen FLA-bestanden (Flash-bronbestanden).

Shockwave Bestanden van een willekeurige versie van Adobe Shockwave.

Films QuickTime- of MPEG-bestanden.

Scripts JavaScript- of VBScript-bestanden. Scripts in HTML-bestanden (in tegenstelling tot zelfstandige JavaScript- of

VBScript-bestanden) worden niet weergegeven in het middelenpaneel.

Sjablonen Indelingen voor basispagina's die op meerdere pagina's worden gebruikt. Wanneer u sjabloon wordt

gewijzigd, worden tevens automatisch alle pagina's gewijzigd, die hieraan zijn gekoppeld.

Bibliotheekitems Ontwerpelementen die u op meerdere pagina's gebruikt; wanneer u een bibliotheekitem wijzigt,

worden alle pagina's met dat item bijgewerkt.

Opmerking: Voor weergave in het middelenpaneel dient een bestand in een van de volgende categorieën te vallen: Bepaalde

andere typen bestanden worden soms elementen genoemd, maar worden niet in het paneel weergegeven.

Standaard worden elementen in een categorie alfabetisch op naam vermeld, maar u kunt ze ook op type en verschillende

andere criteria. Ook kunt u een voorbeeld van de elementen weergeven en het formaat van de kolommen en het

voorbeeldgebied wijzigen.

Zie ook

“Een lijst van favoriete elementen maken en beheren” op pagina 110

“Werken met bibliotheekitems” op pagina 112

“Een lokale hoofdmap instellen en bewerken” op pagina 40

Een element in het voorbeeldgebied weergeven

❖

Selecteer het element in het middelenpaneel.

Wanneer u bijvoorbeeld een filmelement selecteert, toont het voorbeeldgebied een pictogram. Als u de film wilt bekijken,

klikt u op de knop Afspelen (de groene driehoek) in de rechterbovenhoek van het voorbeeldgebied.

Elementen weergeven in een categorie

❖

Klik op een categoriepictogram aan de linkerzijde van het middelenpaneel.

Elementen sorteren

❖

Klik op een kolomkop.

Als u bijvoorbeeld de lijst van afbeeldingen wilt sorteren (zodat alle GIF-afbeeldingen bij elkaar staan, JPEG-afbeeldingen

bij elkaar staan enzovoort), klikt u op de kolomkop Type.

DREAMWEAVER CS3

Handboek

108

Het formaat van een kolom wijzigen

❖

Sleep de lijn die de twee kolomkoppen scheidt.

Het formaat van het voorbeeldgebied wijzigen

❖

Sleep de scheidingsbalk (tussen het voorbeeldgebied en de lijst van elementen) naar boven of beneden.

Het middelenpaneel vernieuwen

Het samenstellen van de sitelijst neemt mogelijk enkele seconden in beslag omdat Dreamweaver eerst het cachegeheugen

voor de sites moet inlezen.

Bepaalde wijzigingen worden niet onmiddellijk in het middelenpaneel weergegeven. Wanneer u bijvoorbeeld een element

toevoegt aan of verwijdert van de site, worden de wijzigingen pas in het middelenpaneel weergegeven als u de lijst Site

vernieuwt door op de knop Sitelijst vernieuwen te klikken. Als u buiten Dreamweaver een element toevoegt of verwijdert,

bijvoorbeeld via Windows Verkenner of de Finder, dient u het cachegeheugen van de site opnieuw op te bouwen om het

middelenpaneel bij te werken.

Wanneer u het enige exemplaar van een bepaalde kleur of URL op uw site verwijdert of wanneer u een nieuw bestand

opslaat met een nog niet eerder op de site gebruikte kleur of URL, worden de wijzigingen pas zichtbaar in het

middelenpaneel wanneer u de sitelijst vernieuwt.

• Klik op de knop Sitelijst vernieuwen als u de sitelijst handmatig wilt vernieuwen . Dreamweaver creëert het

cachegeheugen van de site of werkt dit zo nodig bij.

• Voor het vernieuwen van de sitelijst en het handmatig opnieuw opbouwen van het cachegeheugen voor de site klikt u

met de rechtermuisknop (Windows) of gebruikt u Command+klik (Macintosh) in de lijst Middelen en selecteert u

Sitelijst vernieuwen.

Een element toevoegen aan een document

U kunt de meeste elementen in een document invoegen door deze in de codeweergave of ontwerpweergave in het

documentvenster te slepen, of door de knop Invoegen van het paneel te gebruiken. U kunt kleuren of URL's invoegen of

deze toepassen op geselecteerde tekst in de ontwerpweergave. (In de ontwerpweergave kunt u ook URL's toepassen op

andere elementen, zoals afbeeldingen.)

1 Plaats in de ontwerpweergave de invoegpositie op de plaats waar het element moet komen.

2 Selecteer links in het middelenpaneel een van de knoppen voor de desbetreffende elementcategorie.

Opmerking: U kunt elke categorie behalve Sjablonen selecteren. Een sjabloon wordt toegepast op een geheel document en kan

niet in een document worden ingevoegd.

3 Selecteer eerst Sites of Favorieten boven aan het paneel en selecteer daarna het element.

Bibliotheekitems hebben geen sitelijst of Favorieten. Sla deze stap over als u een bibliotheekitem invoegt.

4 Voer een van de volgende handelingen uit:

• Sleep het element van het paneel naar het document.

U kunt scripts naar het kopinhoudsgebied van het documentvenster slepen. Als dat gebied niet zichtbaar is, selecteert u

Weergave > Kopinhoud.

• Selecteer het element in het paneel en klik op Invoegen.

Als het ingevoegde element uit een kleur bestaat, wordt deze toegepast op de tekst achter de invoegpositie.

Een kleur toepassen op tekst met behulp van het middelenpaneel

Het middelenpaneel toont de kleuren die u al hebt toegepast op de verschillende elementen, zoals tekst, tabelranden,

achtergronden, enzovoort.

1 Selecteer de tekst in het document.

2 Selecteer in het middelenpaneel de categorie Kleuren .

DREAMWEAVER CS3

Handboek

109

3 Selecteer de gewenste kleur en klik op Toepassen.

Zie ook

“Favoriete elementen toevoegen of verwijderen” op pagina 111

Een URL toepassen op een afbeelding met behulp van het middelenpaneel

1 Selecteer de tekst of de afbeelding.

2 Selecteer in het middelenpaneel de categorie URL's in de weergave Sites of Favorieten, afhankelijk van waar de URL

is opgeslagen.

Opmerking: URL's voor de bestanden van uw site worden standaard opgeslagen in de weergave Sites. De weergave Favorieten

bevat alleen URL's die u daar zelf hebt opgeslagen.

3 Selecteer de URL.

4 Voer een van de volgende handelingen uit:

• Sleep de URL van het paneel naar de selectie in de ontwerpweergave.

• Selecteer de URL en klik op Toepassen.

Elementen selecteren en bewerken

In het middelenpaneel kunt u meerdere elementen tegelijk selecteren. Tevens biedt het een snelle manier om te beginnen

met het bewerken van elementen.

Zie ook

“Een externe editor openen voor mediabestanden” op pagina 260

Meerdere elementen selecteren

1 Selecteer een element in het middelenpaneel.

2 Selecteer de overige elementen op een van de volgende manieren:

• Als u een opeenvolgende reeks elementen wilt selecteren, houdt u Shift ingedrukt terwijl u op de gewenste elementen

klikt.

• Houd Ctrl ingedrukt terwijl u klikt (Windows) of gebruik Command+klik (Macintosh) om een afzonderlijk element aan

de selectie toe te voegen (ongeacht of dit element grenst aan de bestaande selectie). Voor het opheffen van de selectie van

een element gebruikt u opnieuw Ctrl+klik of Command+klik.

Een element bewerken

Wanneer u een element bewerkt in het middelenpaneel, varieert het gedrag naargelang het type element. Bij bepaalde

elementen, zoals afbeeldingen, gebruikt u een externe editor, die automatisch wordt gestart als u voor dat type element een

editor hebt gedefinieerd. U kunt alleen kleuren en URL's in de lijst Favorieten bewerken. Wanneer u sjablonen en

bibliotheekitems bewerkt, brengt u de wijzigingen aan binnen Dreamweaver.

1 Voer een van de volgende handelingen uit in het middelenpaneel:

• Dubbelklik op het element.

• Selecteer het element en klik op de knop Bewerken .

Opmerking: Als het element moet worden bewerkt in een externe editor, maar niet automatisch een editor wordt gestart,

selecteert u Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh). Selecteer de categorie

Bestandstypen/Editors en zorg ervoor dat u voor dat type element een externe editor hebt gedefinieerd.

2 Breng uw wijzigingen aan.

DREAMWEAVER CS3

Handboek

110

3 Als u klaar bent, voert u een van de volgende handelingen uit:

• Als het element bestaat uit een bestand (dus alles behalve een kleur of URL), slaat u dit op (in de editor die u gebruikt)

en sluit u het.

• Als het element bestaat uit een URL, klikt u op OK in het dialoogvenster URL bewerken.

Opmerking: Als het element bestaat uit een kleur, wordt de kleurkiezer automatisch gesloten nadat u de kleur hebt gekozen.

Als u de kleurkiezer wilt afsluiten zonder een kleur te kiezen, drukt u op Esc.

Elementen opnieuw gebruiken op een andere site

Het middelenpaneel toont alle elementen (van herkende typen elementen) op uw huidige site. Als u een element van de

huidigesitewiltgebruikenopeenanderesite,dientuditnaardeanderesitetekopiëren. Ukunteenafzonderlijkelement,

een set afzonderlijke elementen of een complete map Favorieten tegelijk kopiëren.

Voordat u een element van of naar een externe site kunt kopiëren, dient u mogelijk eerst het bestand te zoeken in het paneel

Bestanden, dat correspondeert met een element in het middelenpaneel.

Opmerking: Het paneel Bestanden geeft mogelijk een andere site weer dan de site die wordt weergegeven in het middelenpaneel.

Dit komt omdat het middelenpaneel is gekoppeld aan het actieve document.

Een elementbestand zoeken in het paneel Bestanden

1 Selecteer in het middelenpaneel de categorie van het element dat u wilt zoeken.

2 Klik in het middelenpaneel met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh)

op de naam of het pictogram van het element en selecteer de optie Zoeken op site in het contextmenu.

Opmerking: De optie Zoeken op de site is niet beschikbaar voor kleuren en URL's, die niet overeenkomen met bestanden op de site.

HetpaneelBestandenwordtgeopendenhetelementbestandisgeselecteerd. MetdeopdrachtZoekenopdesitewordthet

bestand gezocht dat overeenkomt met het element zelf; met de opdracht worden geen bestanden gezocht waarin dat

element wordt gebruikt.

Elementen vanuit het middelenpaneel kopiëren naar een andere site

1 Selecteer in het middelenpaneel de categorie van het element dat u wilt kopiëren.

2 Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op een of meer

elementen in de sitelijst of Favorieten. Selecteer Kopiëren naar site en selecteer de naam van de doelsite in het vervolgmenu

met de namen van alle sites die u hebt gedefinieerd.

Opmerking: In de lijst Favorieten kunt u zowel een map Favorieten als afzonderlijke elementen kopiëren.

De elementen worden gekopieerd naar hun overeenkomstige locaties op de doelsite. Dreamweaver creëert indien nodig

nieuwe mappen in de structuur van de doelsite. De elementen worden ook toegevoegd aan de lijst Favorieten van de

doelsite.

Opmerking: Als het door gekopieerde element een kleur of URL betreft, wordt het alleen weergegeven in de lijst Favorieten voor

de doelsite. Omdat kleuren en URL's niet overeenkomen met bestanden, zijn er geen bestanden om naar de andere site te

kopiëren

Een lijst van favoriete elementen maken en beheren

Favoriete elementen beheren

De volledige lijst van alle herkende elementen kan voor bepaalde grote sites erg moeilijk te hanteren worden. U kunt vaak

gebruikte elementen toevoegen aan een lijst Favorieten, gerelateerde elementen groeperen, ze bijnamen geven zodat u weet

waarvoor ze dienen en ze weer gemakkelijk terugzoeken in het middelenpaneel.

DREAMWEAVER CS3

Handboek

111

Opmerking: Favoriete elementen worden niet als afzonderlijke bestanden opgeslagen op uw schijf. Het zijn verwijzingen naar

de elementen in de sitelijst. Dreamweaver houdt bij welke elementen uit de sitelijst moeten worden weergegeven in de lijst

Favorieten.

De meeste bewerkingen in het middelenpaneel zijn in de lijst Favorieten identiek aan die in de sitelijst. Er zijn echter

verschillende taken die u alleen in de lijst Favorieten kunt uitvoeren.

Favoriete elementen toevoegen of verwijderen

U kunt op verschillende manieren elementen toevoegen aan de lijst Favorieten voor uw site in het middelenpaneel.

Het toevoegen van een kleur of een URL aan de lijst Favorieten vergt een extra stap. U kunt geen nieuwe kleuren of URL's

toevoegen aan de sitelijst. De sitelijst bevat alleen elementen die al op uw site worden gebruikt.

Opmerking: Er zijn geen lijsten met favorieten voor sjablonen en bibliotheekitems.

Zie ook

“Overzicht van middelenpaneel” op pagina 106

“De kleurkiezer gebruiken” op pagina 214

Elementen toevoegen aan de lijst Favorieten

Voer een van de volgende handelingen uit:

• Selecteer een of meer elementen in de sitelijst in het middelenpaneel en klik vervolgens op de knop Toevoegen aan

Favorieten .

• Selecteer een of meer elementen in de sitelijst in het middelenpaneel, klik met de rechtermuisknop (Windows) of gebruik

Control+klik (Macintosh) en selecteer vervolgens Toevoegen aan Favorieten.

• Selecteer een of meer elementen in het paneel Bestanden, klik met de rechtermuisknop (Windows) of gebruik

Control+klik (Macintosh) en selecteer vervolgens Toevoegen aan Favorieten. Dreamweaver negeert bestanden die niet

overeenkomen met een categorie in het middelenpaneel.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op een element in de

ontwerpweergave van het documentvenster en selecteer in het contextmenu de opdracht om het element toe te voegen

aan een categorie Favorieten.

Het contextmenu voor tekst bevat de optie Toevoegen aan favoriete kleuren of Toevoegen aan favoriete URL's, afhankelijk

van het feit of de tekst een koppeling bevat. u kunt alleen die elementen toevoegen die overeenkomen met de categorieën

in het middelenpaneel.

Een nieuwe kleur of URL toevoegen aan de lijst Favorieten

1 Selecteer in het middelenpaneel de categorie Kleuren of URL's.

2 Selecteer de optie Favorieten boven aan het paneel.

3 Klik op de knop Nieuwe kleur of Nieuwe URL .

4 Voer een van de volgende handelingen uit:

• Selecteer een kleur met de kleurkiezer en geef de kleur desgewenst een bijnaam.

Als u de kleurkiezer wilt sluiten zonder een kleur te selecteren, drukt u op Esc of klikt u op de grijze balk boven aan de

kleurkiezer.

• Geef een URL en een bijnaam op in het dialoogvenster Nieuwe URL toevoegen en klik vervolgens op OK.

Elementen verwijderen uit de lijst Favorieten

1 Selecteer in het middelenpaneel de optie Favorieten boven aan het paneel.

2 Selecteer een of meer elementen (of een map) in de lijst Favorieten.

3 Klik op de knop Verwijderen uit Favorieten .

DREAMWEAVER CS3

Handboek

112

De elementen worden wel verwijderd uit de lijst Favorieten, maar niet uit de sitelijst. Als u een map Favorieten verwijdert,

worden zowel de map als de gehele inhoud ervan verwijderd.

Een bijnaam voor een favoriet element maken

U kunt bijnamen (bij voorbeeld PaginaAchtergrondKleur in plaats van #999900) geven aan alleen elementen in de lijst

Favorieten. De sitelijst behoudt echter de werkelijke bestandsnamen (of waarden, zoals in het geval van kleuren en URL's).

1 Selecteer in het middelenpaneel (Venster > Middelen) de categorie waarin zich uw element bevindt.

2 Selecteer de optie Favorieten boven aan het paneel.

3 Voer een van de volgende handelingen uit:

• Klik in het middelenpaneel met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh)

op de naam of het pictogram van het element en selecteer Bijnaam bewerken.

• Klik eenmaal op de naam van het element, wacht even en klik nogmaals. (Gebruik geen dubbelklik, aangezien dit de

items opent voor bewerken.)

4 Typ een bijnaam voor het element en druk vervolgens op Enter (Windows) of Return (Macintosh).

Zie ook

“Overzicht van middelenpaneel” op pagina 106

Elementen groeperen in de map Favorieten

Door een element in de map Favorieten te plaatsen, verandert u niet de bestandslocatie van het element op uw harde schijf.

1 Selecteer in het middelenpaneel de optie Favorieten boven aan het paneel.

2 Klik op de knop Nieuwe map Favorieten .

3 Typ een naam voor de map en druk vervolgens op Enter (Windows) of Return (Macintosh).

4 Sleep elementen naar de map.

Werken met bibliotheekitems

Een bibliotheekitem maken

Bibliotheekitems zijn elementen die u opnieuw wilt gebruiken of regelmatig via uw website wilt bijwerken.

Zie ook

“Over bibliotheekitems” op pagina 105

Een bibliotheekitem maken op basis van een selectie

1 Selecteer in het documentvenster een gedeelte van een document, dat u wilt opslaan als bibliotheekitem.

2 Voer een van de volgende handelingen uit:

• Sleep de selectie naar de categorie Bibliotheek .

• Klik op de knop Nieuw bibliotheekitem onder in de categorie Bibliotheek.

• Selecteer Wijzigen > Bibliotheek > Object toevoegen aan bibliotheek.

3 Typ een naam voor het nieuwe bibliotheekitem en druk vervolgens op Enter (Windows) of Return (Macintosh).

Dreamweaver slaat elk bibliotheekitem op als een afzonderlijk bestand (met de extensie .lbi) in de map Bibliotheek in de

lokale hoofdmap van de site.

DREAMWEAVER CS3

Handboek

113

Een leeg bibliotheekitem maken

1 Controleer of er in het documentvenster niets is geselecteerd.

Als er iets is geselecteerd, wordt dit in het nieuwe bibliotheekitem geplaatst.

2 Selecteer in het middelenpaneel de categorie Bibliotheek .

3 Klik op de knop Nieuw bibliotheekitem onder in het paneel.

4 Terwijl het item nog steeds is geselecteerd, geeft u een nieuwe naam ervoor op en drukt u op Enter (Windows) of Return

(Macintosh).

Een bibliotheekitem invoegen in een document

Wanneer u een bibliotheekitem toevoegt aan een pagina, worden zowel de feitelijke inhoud als een verwijzing naar het

bibliotheekitem ingevoegd.

1 Plaats de invoegpositie binnen het documentvenster.

2 Selecteer in het middelenpaneel de categorie Bibliotheek .

3 Voer een van de volgende handelingen uit:

• Sleep een bibliotheekitem van het middelenpaneel naar het documentvenster.

Voorhetinvoegenvanalleendeinhoudvaneenbibliotheekitemzondereenverwijzingnaarhetiteminhetdocumentdrukt

u op Control (Windows) of Optie (Macintosh) terwijl u een item uit het middelenpaneel sleept. Als u op deze manier een

item invoegt, kunt u het item wel in het document bewerken, maar wordt het document niet bijgewerkt wanneer u pagina's

bijwerkt waarop dit bibliotheekitem wordt gebruikt.

• Selecteer een bibliotheekitem en klik op Invoegen.

Bibliotheekitems bewerken en documenten bijwerken

Wanneer u een bibliotheekitem bewerkt, kunt u alle documenten bijwerken, waarin deze elementen worden gebruikt. Als

u ervoor kiest om niet bij te werken, blijven de documenten gekoppeld aan het bibliotheekitem; u kunt deze later bijwerken.

U kunt de naam van items wijzigen om hun verbinding met documenten of sjablonen te verbreken. U kunt items

verwijderen uit de bibliotheek van de site en een ontbrekend bibliotheekitem opnieuw maken.

Opmerking: Het paneel CSS-stijlen is niet beschikbaar wanneer u een bibliotheekitem bewerkt, omdat bibliotheekitems alleen

body-elementen en CSS-code (Cascading Style Sheets) kunnen bevatten die zijn ingevoegd in de kopsectie van een document.

Het dialoogvenster Pagina-eigenschappen is evenmin beschikbaar omdat een bibliotheekitem geen

body-tag of daarbij

behorende kenmerken kan bevatten.

Een bibliotheekitem bewerken

1 Selecteer in het middelenpaneel de categorie Bibliotheek .

2 Selecteer een bibliotheekitem.

3 Klik op de knop Bewerken of dubbelklik op het bibliotheekitem.

Dreamweaver opent een nieuw venster, dat lijkt op het documentvenster, waarin u het bibliotheekitem kunt bewerken. De

grijze achtergrond geeft aan dat u een bibliotheekitem bewerkt in plaats van een document.

4 Breng uw wijzigingen aan en sla deze vervolgens op.

5 Geef aan of de documenten op de lokale site waarin het bibliotheekitem wordt gebruik, moeten worden bijgewerkt.

Selecteer Bijwerken als u onmiddellijk wilt bijwerken. Als u Niet bijwerken selecteert, worden documenten pas bijgewerkt

wanneer u Wijzigen > Bibliotheek > Huidige pagina bijwerken of Pagina's bijwerken selecteert.

Het huidige document bijwerken om de huidige versie van alle bibliotheekitems te gebruiken

❖

Selecteer Wijzigen > Bibliotheek > Huidige pagina bijwerken.

DREAMWEAVER CS3

Handboek

114

De gehele site of alle documenten bijwerken waarin een bepaald bibliotheekitem wordt gebruikt

1 Selecteer Wijzigen > Bibliotheek > Pagina's bijwerken.

2 Geef in het contextmenu Zoeken in op wat moet worden bijgewerkt:

• Voor het bijwerken van alle pagina's op de geselecteerde site om zo de huidige versie van alle bibliotheekitems te

gebruiken, selecteert u eerst Gehele site en vervolgens in het naastgelegen contextmenu de naam van de site.

• Voor het bijwerken van alle pagina's op de huidige site, waarin dat bibliotheekitem wordt gebruikt, selecteert u eerst

Bestanden met en vervolgens in het naastgelegen contextmenu de naam van bibliotheekitem.

3 Controleer in de optie Bijwerken of Bibliotheekitems is geselecteerd.

Voor het tegelijkertijd bijwerken van sjablonen selecteert u ook Sjablonen.

4 Klik op Starten.

Dreamweaver werkt de bestanden bij zoals is aangegeven. Als u de optie Logboek tonen selecteert, genereert Dreamweaver

een rapport waarin naast andere informatie wordt aangegeven of het bijwerken van bestanden is geslaagd.

De naam van een bibliotheekitem wijzigen

1 Selecteer in het middelenpaneel de categorie Bibliotheek .

2 Selecteer het bibliotheekitem, wacht even en klik nogmaals. (Gebruik geen dubbelklik, aangezien dit de items opent

voor bewerken.)

3 Voer een nieuwe naam in.

4 Klik ergens anders of druk op Enter (Windows) of Return (Macintosh).

5 Geef aan of documenten waarin het item wordt gebruikt, al dan niet moeten worden bijgewerkt door Bijwerken of Niet

bijwerken te kiezen.

Een bibliotheekitem verwijderen uit een bibliotheek

Wanneer u een bibliotheekitem verwijdert, verwijdert Dreamweaver het wel uit de bibliotheek, maar verandert de inhoud

niet van documenten waarin het item wordt gebruikt.

1 Selecteer in het middelenpaneel de categorie Bibliotheek .

2 Selecteer het bibliotheekitem.

3 Klik op de knop Verwijderen of druk op de toets Delete en bevestig vervolgens dat u het item wilt verwijderen.

Belangrijk: Als u een bibliotheekitem verwijdert, kunt u niet het niet meer terughalen met de opdracht Ongedaan maken. U

kunt het echter wel opnieuw maken.

Een ontbrekend of verwijderd bibliotheekitem opnieuw maken

1 Selecteer een exemplaar van het item in een van uw documenten.

2 Klik op de knop Opnieuw maken in de eigenschappencontrole (Venster > Eigenschappen).

Markeren van bibliotheekitems aanpassen

U kunt de markeerkleur van bibliotheekitems aanpassen en markeringen weergeven of verbergen door het instellen van de

voorkeuren voor Markeren.

Zie ook

“De kleurkiezer gebruiken” op pagina 214

De markeerkleur van bibliotheekitems wijzigen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer de categorie Markeren in de lijst aan de linkerzijde van het dialoogvenster Voorkeuren.

DREAMWEAVER CS3

Handboek

115

3 Klik op het vak Kleur van bibliotheekitems en selecteer vervolgens een markeerkleur in de kleurkiezer (of geef de

hexadecimale kleurwaarde op in het tekstvak).

4 Selecteer Weergeven om de markeerkleur te tonen in het documentvenster.

5 Klik op OK.

Markering weergeven of verbergen in het documentvenster

❖

Voor het weergeven van markeringen selecteert u Beeld > Visuele hulpmiddelen > Onzichtbare elementen. Voor het

verbergen van markeringen heft u de selectie van Onzichtbare elementen op.

De eigenschappen van een bibliotheekitem bewerken

U kunt de eigenschappencontrole gebruiken om een bibliotheekitem te openen voor bewerken, om een geselecteerd

bibliotheekitem los te koppelen van zijn bronbestand of om een item te overschrijven met het op dat moment geselecteerde

bibliotheekitem.

1 Selecteer een bibliotheekitem in een document.

2 Selecteer een van de volgende opties in de eigenschappencontrole (Venster > Eigenschappen):

Bron Hiermee geeft u de bestandsnaam en de locatie van het bronbestand voor het bibliotheekitem weer. Deze gegevens

kunt u niet bewerken.

Openen Hiermee opent u het bronbestand van het bibliotheekitem om het te bewerken. Dit is gelijk aan het item selecteren

in het middelenpaneel en klikken op de knop Bewerken.

Loskoppelen van origineel Hiermee verbreekt u de koppeling tussen het geselecteerde bibliotheekitem en zijn

bronbestand. U kunt het losgekoppelde item wel bewerken in het document, maar het is geen bibliotheekitem meer en het

wordt dus niet bijgewerkt wanneer u het origineel wijzigt.

Opnieuw maken Hiermee overschrijft u het oorspronkelijke bibliotheekitem met de huidige selectie. Gebruik deze optie

om bibliotheekitems opnieuw te maken als het oorspronkelijke bibliotheekitem ontbreekt of per abuis is verwijderd.

Bibliotheekitems bewerkbaar in een document maken

Als u een bibliotheekitem hebt toegevoegd aan uw document en als u dat item speciaal voor die pagina wilt bewerken, moet

u de koppeling tussen het item in het document en de bibliotheek verbreken. Zodra u een exemplaar van een

bibliotheekitem bewerkbaar hebt gemaakt, wordt dat exemplaar niet bijgewerkt wanneer het bibliotheekitem verandert.

1 Selecteer een bibliotheekitem in het huidige document.

2 Klik op de knop Loskoppelen van origineel in de eigenschappencontrole (Venster > Eigenschappen).

Gedrag in een bibliotheekitem bewerken

Als u het gedrag van een bibliotheekitem wilt bewerken, dient u het item eerst in een document in te voegen en het

vervolgens in dat document bewerkbaar te maken. Nadat u de wijzigingen hebt aangebracht, kunt u het bibliotheekitem

opnieuw maken en het item in de bibliotheek vervangen door het bewerkte item uit uw document.

1 Open een document dat het bibliotheekitem bevat.

Noteer zowel de naam van het bibliotheekitem als de precieze tags die erin staan. U hebt deze gegevens later nodig.

2 Klik op eerst op het bibliotheekitem en vervolgens op de knop Loskoppelen van origineel in de eigenschappencontrole

(Venster > Eigenschappen).

3 Selecteer het element waaraan het gedrag is gekoppeld.

4 Dubbelklik in het paneel Gedrag (Venster > Gedrag) op de actie die u wilt wijzigen.

5 Breng uw wijzigingen aan in het dialoogvenster dat verschijnt en klik vervolgens op OK.

6 Selecteer in het middelenpaneel de categorie Bibliotheek .

7 Leg de precieze naam en het hoofdlettergebruik van het oorspronkelijke bibliotheekitem vast; selecteer het item en klik

vervolgens op de knop Verwijderen.

DREAMWEAVER CS3

Handboek

116

8 Selecteer in het documentvenster alle elementen waaruit het bibliotheekitem bestaat.

Zorg er voor dat u exact dezelfde elementen selecteert, die ook voorkwamen in het oorspronkelijke bibliotheekitem.

9 Selecteer in het middelenpaneel de knop Nieuw bibliotheekitem en geef het nieuwe item dezelfde naam als het item

dat u hebt verwijderd. Gebruik daarbij dezelfde spelling en hetzelfde hoofdlettergebruik.

10 Als u het bibliotheekitem in andere documenten van uw site wilt bijwerken, selecteert u Wijzigen > Bibliotheek >

Pagina's bijwerken.

11 Selecteer in het contextmenu Zoeken in de optie Bestanden met.

12 Selecteer in het aangrenzende contextmenu de naam van het bibliotheekitem dat u zojuist hebt gecreëerd.

13 Zorg ervoor dat voor de optie Bijwerken tevens Bibliotheekitems is geselecteerd en klik vervolgens op Starten.

14 Wanneer het bijwerken is voltooid, klikt u op Sluiten.

Zie ook

“JavaScript-gedrag gebruiken” op pagina 321

117

Hoofdstuk 6: Pagina's maken met CSS

Adobe® Dreamweaver® CS3 bevat veel functies die u helpen Cascading Style Sheets (CSS) te gebruiken voor het maken van

stijlen en pagina-indelingen voor uw webpagina's.

Wat zijn CSS-stijlpagina's (Cascading Style Sheets)

Informatie over CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) bestaan uit een verzameling opmaakregels die het uiterlijk van de inhoud op een webpagina

bepalen. Bij het gebruik van CSS-stijlen voor de opmaak (indeling) van een pagina scheidt men de inhoud van de

presentatie ervan. De inhoud van uw pagina—de HTML-code—bevindt zich in het HTML-bestand, terwijl de CSS-regels

die de presentatie van de code bepalen, zich in een ander bestand (een externe stijlpagina) of in een ander deel van het

HTML-document (doorgaans de kopsectie) bevinden. Door de inhoud te scheiden van de presentatie wordt het veel

gemakkelijker om het uiterlijk van uw site te onderhouden vanaf een centrale locatie, omdat u telkens wanneer u een

wijziging aanbrengt, nu niet elke eigenschap op elke pagina hoeft bij te werken. Het scheiden van de inhoud van de

presentatie leidt ook tot meer eenvoudige en schonere HTML-code, hetgeen weer leidt tot kortere laadtijden in de browser

en een vereenvoudigde navigatie voor mensen met toegankelijkheidsproblemen (bijvoorbeeld bezoekers die schermlezers

gebruiken).

CSS biedt een grote mate van flexibiliteit in en controle over het precieze uiterlijk van uw pagina. Met CSS hebt u controle

over een groot aantal teksteigenschappen, waaronder specifieke lettertypen en tekengroottes, vet, cursief, onderstreept en

tekstschaduwen, tekstkleur en achtergrondkleur, de kleur en onderstreping van koppelingen, en nog veel meer. Bij gebruik

van CSS voor de controle van uw lettertypen kunt u ook zorgen voor een meer consistente afhandeling van uw pagina-

indeling en het uiterlijk in meerdere browsers.

Naast tekstopmaak kunt u CSS ook gebruiken voor de controle over de opmaak en wijze van positioneren van elementen

op blokniveau in een webpagina. Een element op blokniveau is een zelfstandig stuk inhoud dat in HTML doorgaans wordt

gescheiden door een nieuwe regel en visueel wordt opgemaakt als een blok. Zo leidt het gebruik van de labels voor

h1, p en

div in alle gevallen tot elementen op blokniveau op een webpagina. Voor elementen op blokniveau kunt u marges en

randen instellen, terwijl u ze op een specifieke locatie kunt positioneren, ze van een achtergrondkleur kunt voorzien, de

tekst erin kunt laten zweven, enzovoort. Het manipuleren van elementen op blokniveau bestaat in wezen uit de manier

waarop u uw pagina's opmaakt met CSS.

Ga naar www.adobe.com/go/vid0152_nl voor een zelfstudie over Cascading Style Sheets.

Zie ook

“Werken met labels voor div-elementen” op pagina 156

“Pagina's met CSS opmaken” op pagina 140

Informatie over CSS-regels

Een CSS-opmaakregel bestaat uit twee delen—de kiezer en de declaratie (of, in de meeste gevallen, een blok declaraties).

De kiezer is een term (zoals

p, h1,een klassenaam of een id) waarmee het opgemaakte element wordt aangeduid, terwijl het

declaratieblok bepaalt wat de stijleigenschappen zijn. In het volgende voorbeeld is

h1 de kiezer, terwijl alles wat tussen de

accolades (

{}) staat, het declaratieblok is:

h1 {

font-size: 16 pixels;

font-family: Helvetica;

font-weight:bold;

}

DREAMWEAVER CS3

Handboek

118

Een afzonderlijke declaratie bestaat uit twee delen, de eigenschap (zoals font-family) en de waarde (zoals Helvetica). In

de vorige CSS-regel is een bepaalde stijl gemaakt voor de labels

h1:detekstvoorallelabelsh1 die gekoppeld is aan deze stijl,

heeft een grootte van 16 pixels, staat in het lettertype Helvetica en is vet.

De stijl (die afkomstig is van een regel, of een verzameling regels) is ondergebracht op een plaats die anders is dan de

feitelijke tekst die ermee wordt opgemaakt—doorgaans in een externe stijlpagina, of in de kopsectie van een HTML-

document. Op deze manier kan één regel voor de labels

h1 worden toegepast op vele labels tegelijk (en in het geval van

externe stijlpagina's kan de regel worden toegepast op vele labels tegelijk op veel verschillende pagina's). Daarom biedt CSS

een bijzonder eenvoudige manier van bijwerken. Wanneer u een CSS-regel op één plaats bijwerkt, wordt de opmaak van

alle elementen die de gedefinieerde stijl gebruiken, automatisch bijgewerkt naar de nieuwe stijl.

In Dreamweaver kunt u de volgende typen stijlen definiëren:

• Klassestijlen, waarmee u stijleigenschappen kunt toepassen op elk element of alle elementen op de pagina.

• Stijlen voor HTML-tags, waarmee de opmaak voor een bepaalde tag opnieuw definieert, zoals h1. Wanneer u een CSS-

stijl voor de tag

h1 maakt of wijzigt, wordt alle tekst die wordt opgemaakt met behulp van de tag h1, onmiddellijk

bijgewerkt.

• Geavanceerde stijlen, waarmee u de opmaak van een bepaalde combinatie van elementen opnieuw definieert, of zelfs van

andere vormen van kiezers zoals deze zijn toegestaan door CSS (bijvoorbeeld de kiezer

td h2 die wordt toegepast telkens

wanneer een kop

h2 binnen een cel in een tabel voorkomt.) Geavanceerde stijlen kunnen ook de opmaak opnieuw

definiëren van labels die een bepaald

id-kenmerk bevatten (bijvoorbeeld de stijlen die worden gedefinieerd met behulp

van

#mijnStijl, gelden voor alle labels die het kenmerk-waardepaar id="mijnStijl" bevatten).

CSS-regels kunnen zijn ondergebracht op de volgende locaties:

Externe CSS-stijlpagina's Verzamelingen CSS-regels die zijn of worden opgeslagen in een afzonderlijk, extern CSS-bestand

(.css - niet een HTML-bestand). Dit bestand wordt gekoppeld naar een of meer pagina's van een website met behulp van

een koppeling of een regel met @import in de kopsectie van een document.

Interne (of ingebedde) CSS-stijlpagina's Verzamelingen CSS-regels die zijn opgenomen in een tag style in de kopsectie

van een HTML-document.

Inline stijlen (stijlen binnen een regel) Gedefinieerd binnen specifieke vormen van tags door een HTML-document heen.

(Het gebruik van inline stijlen wordt afgeraden.)

Dreamweaver herkent stijlen die in bestaande documenten zijn gedefinieerd, zolang deze voldoen aan de richtlijnen voor

CSS-stijlen. Dreamweaver geeft de meeste toegepaste stijlen ook rechtstreeks weer in de ontwerpweergave. (Het gebruik van

de voorbeeldweergave in een browservenster biedt echter de meest accurate “live”-weergave van de pagina.) Bepaalde CSS-

stijlen worden anders weergegeven in Microsoft Internet Explorer, Netscape, Opera, Apple Safari of andere browsers,

terwijl weer andere stijlen momenteel door geen enkele browser worden ondersteund.

Voor het weergeven van de CSS-naslaggids van O'Reilly, die wordt meegeleverd bij Dreamweaver, selecteert u eerst Help >

Referentie en vervolgens O'Reilly CSS Reference in het pop-upmenu in het paneel Referentie.

Zie ook

“Klassestijlen toepassen, verwijderen of hernoemen” op pagina 132

DREAMWEAVER CS3

Handboek

119

Informatie over CSS-stijlen

De term naast elkaar verwijst naar de manier waarop een browser uiteindelijk stijlen voor specifieke elementen op een

webpagina weergeeft. Drie verschillende bronnen zijn verantwoordelijk voor de stijlen die u op een webpagina ziet: de

stijlpagina die is gemaakt door de auteur van de pagina, de (eventuele) aangepaste stijlselecties van de gebruiker en de

standaard stijl van de browser zelf. In de voorgaande onderwerpen wordt het maken van stijlen voor een webpagina

beschreven als de auteur van zowel de webpagina als de stijlpagina die aan die pagina is gekoppeld. Maar browsers hebben

ook hun eigen standaard stijlpagina's die de weergave van webpagina's opleggen en gebruikers kunnen ook hun browsers

aanpassen door selecties te maken waarmee de weergave van webpagina's wordt aangepast. De uiteindelijke weergave van

een webpagina is het resultaat van het samenkomen (of "trapsgewijs weergeven") van de regels van deze drie bronnen om

de webpagina optimaal weer te geven.

Een veelgebruikt label—het alinealabel, of

<p>-label—illustreert het concept. Browsers hebben standaard stijlpagina's die

het lettertype en de tekengrootte voor alineatekst (dat wil zeggen, tekst die tussen

<p>-labels in de HTML-code staat)

definiëren. In Internet Explorer wordt bijvoorbeeld alle standaardhoofdtekst, met inbegrip van alineatekst, standaard in

Times New Roman, Normale grootte lettertype weergegeven.

Als de auteur van een webpagina kunt u echter een stijlpagina maken die de standaardstijl van de browser voor het

alinealettertype en de alineatekengrootte vervangt. U kunt bijvoorbeeld in uw stijlpagina de volgende regel maken:

p {

font-family: Arial;

font-size: small;

}

Als een gebruiker de pagina laadt, worden de standaardinstelllingen voor de alineatekst van de browser vervangen door het

alinealettertype en de tekengrootte die u als auteur hebt ingesteld.

Gebruikers kunnen selecties maken om de browserweergave optimaal aan te passen voor eigen gebruik. In Internet

Explorer kan de gebruiker bijvoorbeeld Weergave > Tekstgrootte > Grootste selecteren om het paginalettertype uit te

breiden naar een grootte die beter leesbaar is als hij vindt dat het lettertype te klein is. Uiteindelijk (tenminste in dit geval)

vervangt de selectie van de gebruiker zowel de standaardstijlen van de browser voor de alineatekengrootte als de

alineastijlen die door de auteur van de webpagina zijn gemaakt.

Overerving is een ander belangrijk deel van de getrapte versie. Eigenschappen voor de meeste elementen op een webpagina

worden overgeërfd—alinealabels erven bijvoorbeeld bepaalde eigenschappen van het body-label over, labels voor een lijst

met opsommingstekens erven bepaalde eigenschappen van alinealabels over, enzovoort. Bijvoorbeeld wanneer u in uw

stijlpagina de volgende regel maakt:

body {

font-family: Arial;

font-style: italic;

}

Alle alineatekst op uw webpagina (en tekst die eigenschappen overerft van het alinealabel) zal Arial en cursief zijn, omdat

het alinealabel deze eigenschappen van het body-label overerft. U kunt echter specifieker worden met uw regels en stijlen

maken die de standaardformule voor overerving vervangen. Bijvoorbeeld wanneer u in uw stijlpagina de volgende regel

maakt:

body {

font-family: Arial;

font-style: italic;

}

p {

font-family: Courier;

font-style: normal;

}

Alle standaardhoofdtekst zal Arial en cursief zijn, behalve (overgeërfde) alineatekst, die zal worden weergegeven als Courier

normal (niet-cursief). Technisch gezien erft het alinealabel eerst de eigenschappen over die zijn ingesteld voor het body-

label, maar negeert het vervolgens die eigenschappen omdat het zelf haar eigen gedefinieerde eigenschappen heeft. Omdat

pagina-elementen in het algemeen eigenschappen overerven van erboven, veroorzaakt de rechtstreekse toepassing van een

eigenschap op een label met andere woorden altijd een vervanging van de standaardformule voor overerving.

DREAMWEAVER CS3

Handboek

120

De combinatie van alle factoren die hierboven werden besproken en andere factoren zoals CSS-specificiteit (een systeem

dat een verschillend belang geeft aan bepaalde CSS-regels) en de volgorde van CSS-regels, maken uiteindelijk een complexe

getrapte versie waarin items met hogere prioriteiten eigenschappen die lagere prioriteiten hebben vervangen. Voor meer

informatie over de regels die de getrapte versie, overerving en specificiteit bepalen, gaat u naar

www.w3.org/TR/CSS2/cascade.html.

Informatie over tekstopmaak en CSS

Standaard gebruikt Dreamweaver Cascading Style Sheets (CSS) voor de opmaak van tekst. De stijlen die u toepast op de

tekst met behulp van de eigenschappencontrole of menuopdrachten, maken CSS-regels die worden ingebed in de kop van

het huidige document.

U kunt ook het paneel CSS-stijlen gebruiken om CSS-regels en -eigenschappen te maken en te bewerken. Het paneel CSS-

stijlen is een veel robuustere editor dan de eigenschappencontrole en geeft alle voor het huidige document gemaakte CSS-

regels weer, ongeacht of deze regels zijn ingebed in de kop van het document of in een externe stijlpagina. Adobe beveelt

aan dat u het paneel CSS-stijlen (en niet de eigenschappencontrole) als belangrijkste hulpmiddel gebruikt voor het maken

en bewerken van uw CSS. Hierdoor wordt uw code schoner en onderhoudsvriendelijker.

Naast door u gemaakte stijlen en stijlpagina's kunt u ook stijlpagina's gebruiken die zijn meegeleverd bij Dreamweaver, om

stijlen toe te passen op uw documenten.

Ga naar www.adobe.com/go/vid0153_nl voor een zelfstudie over het opmaken van tekst met behulp van CSS.

Zie ook

“Tekst toevoegen en opmaken” op pagina 218

“Informatie over het paneel CSS-stijlen” op pagina 121

“Een nieuwe CSS-regel maken” op pagina 125

Informatie over steno-CSS-eigenschappen

De CSS-specificatie staat toe dat u stijlen maakt met behulp van een verkorte syntaxis die men steno-CSS noemt. Met steno-

CSS kunt u de waarden van verschillende eigenschappen opgeven met behulp van één declaratie. Zo kunt u met de

eigenschap

font de eigenschappen font-style, font-variant, font-weight, font-size, line-height en font-family

instellen voor een enkele regel.

Een belangrijk punt om te onthouden bij het gebruik van steno-CSS is dat aan waarden die worden weggelaten in een steno-

CSS-eigenschap, de standaardwaarde wordt toegewezen. Hierdoor worden pagina's mogelijk incorrect weergegeven

wanneer aan twee of meer CSS-regels dezelfde label wordt toegewezen.

Zo gebruikt de regel voor

h1 hieronder de lange versie van de CSS-syntaxis. Zoals u ziet, is aan de eigenschappen font-

variant

, font-stretch, font-size-adjust en font-style de standaardwaarde toegewezen.

h1 {

font-weight: bold;

font-size: 16pt;

line-height: 18pt;

font-family: Arial;

font-variant: normal;

font-style: normal;

font-stretch: normal;

font-size-adjust: none

}

Maar herschreven als één steno-eigenschap zou dezelfde regel er als volgt kunnen uitzien:

h1 { font: bold 16pt/18pt Arial }

Indien geschreven met behulp van de stenonotatie wordt aan weggelaten waarden automatisch de standaardwaarde

toegewezen. Daarom ontbreken in het vorige stenovoorbeeld de labels

font-variant, font-style, font-stretch en font-

size-adjust

DREAMWEAVER CS3

Handboek

121

Als u op meer dan één locatie stijlen hebt gedefinieerd (bijvoorbeeld zowel ingebed in een HTML-pagina als geïmporteerd

uit een externe stijlpagina) met behulp van zowel de korte als de lange vorm van de CSS-syntaxis, dient u niet te vergeten

dat weggelaten eigenschappen in een stenoregel eigenschappen die expliciet zijn bepaald in een andere regel, kunnen

onderdrukken (of vertrappen).

Dit is dan ook de reden dat Dreamweaver standaard de lange vorm van de CSS-notatie gebruikt. Dit voorkomt mogelijke

problemen die ontstaan wanneer een stenoregel een met de lange versie geschreven regel onderdrukt. Als u een webpagina

die is gecodeerd met steno-CSS-notatie opent in Dreamweaver, dient u niet te vergeten dat Dreamweaver alle nieuwe CSS-

regels maakt met behulp van de lange versie. U kunt opgeven hoe Dreamweaver CSS-regels maakt en bewerkt, door de

voorkeuren voor CSS-bewerkingen te wijzigen in de categorie CSS-stijlen van het dialoogvenster Voorkeuren (Bewerken >

Voorkeuren in Windows; Dreamweaver > Voorkeuren op de Macintosh).

Opmerking: Het paneel CSS-stijlen maakt regels met uitsluitend de lange notatie. Als u een pagina of CSS-stijlpagina maakt

met behulp van het paneel CSS-stijlen, dient u niet te vergeten dat het handmatig coderen van steno-CSS-regels ertoe kan leiden

dat steno-eigenschappen de in de lange versie gemaakte regels kunnen onderdrukken. Gebruik daarom lange-versie CSS-

notatie wanneer u stijlen maakt.

CSS maken en beheren

Informatie over het paneel CSS-stijlen

Met het paneel CSS-stijlen kunt u de CSS-regels en -eigenschappen volgen, die van invloed zijn op het momenteel

geselecteerde pagina-element (modus Huidig), of alle regels en eigenschappen die voor het document beschikbaar zijn

(modus Alles). Met een knop boven aan het paneel kunt u schakelen tussen de twee modi. Via het paneel CSS-stijlen kunt

u ook CSS-eigenschappen wijzigen in zowel de modus Alles als de modus Huidig.

Zie de volgende twee secties over het paneel CSS-stijlen in de modus Huidig en de modus Alles.

Het paneel CSS-stijlen in de modus Huidig

In de modus Huidig bestaat het paneel CSS-stijlen uit drie deelvensters: een deelvenster Samenvatting voor selectie waarin

de CSS-eigenschappen voor de huidige selectie in het document worden weergegeven, een deelvenster Regels waarin de

locatie van geselecteerde eigenschappen (of een getrapte versie van regels voor het label, afhankelijk van uw selectie) wordt

weergegeven, en een deelvenster Eigenschappen waarin u CSS-eigenschappen van de op de selectie toegepaste regel kunt

bewerken.

DREAMWEAVER CS3

Handboek

122

U kunt het formaat van elk van de deelvensters wijzigen door de randen tussen de deelvensters te slepen, terwijl u de grootte

van kolommen kunt wijzigen door het slepen van de kolomscheidingen.

Het deelvenster Samenvatting voor selectie geeft een overzicht van CSS-eigenschappen weer, alsmede hun waarden voor

het op dat moment in het actieve document geselecteerde object. De samenvatting toont de eigenschappen van alle regels

die rechtstreeks op de selectie van toepassing zijn. Alleen ingestelde eigenschappen worden getoond.

De volgende regels maken bijvoorbeeld een klassestijl en een labelstijl (in dit geval een alinea):

.foo{

color: green;

font-family: ‘Arial’;

}

font-family: ‘serif’;

font-size: 12px;

}

Als u in het documentvenster alineatekst met een klassestijl .foo selecteert, worden in het deelvenster Samenvatting voor

selectie de relevante eigenschappen voor beide regels weergegeven, omdat beide regels van toepassing zijn op de selectie.

In dit geval zou het deelvenster Samenvatting voor selectie de volgende eigenschappen vermelden:

font-size: 12px

font-family: ‘Arial’

color: green

Het deelvenster Samenvatting voor selectie schikt eigenschappen in toenemende mate van specificiteit. In het

bovenstaande voorbeeld definieert de labelstijl de tekengrootte, terwijl de klassestijl de lettertypefamilie en de kleur

definieert. (De door de klassestijl gedefinieerde lettertypefamilie onderdrukt de lettertypefamilie die wordt gedefinieerd

door de labelstijl, omdat klassekiezers een hogere specificiteit hebben dan labelkiezers. Raadpleeg

www.w3.org/TR/CSS2/cascade.html voor meer informatie over CSS-specificiteit.)

Het deelvenster Regels toont twee verschillende weergaven—infoweergave of regelweergave—afhankelijk van uw selectie.

In de infoweergave (de standaardweergave) toont het deelvenster de naam van de regel die de geselecteerde CSS-eigenschap

definieert, alsmede de naam van het bestand met die regel. In de regelweergave toont het deelvenster een getrapte versie,

of hiërarchie, van alle regels die direct of indirect van toepassing zijn op de huidige selectie. (De label waarop de regel direct

van toepassing is, staat in de rechterkolom.) U kunt schakelen tussen de twee weergaven door op de knoppen Informatie

tonen en Trapsgewijs tonen in de rechterbovenhoek van het deelvenster Regels te klikken.

Als u in het paneel Samenvatting voor selectie een eigenschap selecteert, verschijnen alle eigenschappen van de

definiërende regel in het paneel Eigenschappen. (De definiërende regel wordt ook geselecteerd in het deelvenster Regels,

als de regelweergave wordt geselecteerd.) Als u bijvoorbeeld een regel hebt met de naam

.maintext die een

lettertypefamilie, tekengrootte en kleur definieert, worden door de selectie van een van deze eigenschappen in het

deelvenster Samenvatting voor selectie zowel alle eigenschappen die zijn gedefinieerd door de regel

.maintext in het

deelvenster Eigenschappen, als de geselecteerde regel

.maintext in het deelvenster Regels weergegeven. (Daarnaast worden

bij selectie van een regel in het deelvenster Regels de eigenschappen van die regel weergegeven in het deelvenster

Eigenschappen.) Vervolgens kunt u het deelvenster Eigenschappen gebruiken om snel uw CSS te wijzigen, ongeacht of deze

is ingebed in het huidige document of is gekoppeld door middel van een gekoppelde stijlpagina Standaard toont het

deelvenster Eigenschappen alleen die eigenschappen die reeds zijn ingesteld, en schikt deze in alfabetische volgorde.

U kunt er ook nog voor kiezen om het deelvenster Eigenschappen te tonen in twee andere weergaven. In de

categorieweergave worden eigenschappen gegroepeerd in categorieën weergegeven, zoals Lettertype, Achtergrond, Blok,

Rand, enzovoort, met ingestelde eigenschappen boven aan elke categorie, weergegeven in blauwe tekst. Bij weergave als lijst

wordt een alfabetische lijst van alle beschikbare eigenschappen weergegeven, waarbij ingestelde eigenschappen bovenaan

worden gerangschikt, weergegeven in blauwe tekst. Als u tussen de verschillende weergaven wilt schakelen, klikt u op de

knop Categorieën weergeven, Lijst weergeven of Alleen ingestelde eigenschappen weergeven in de linkerbenedenhoek van

het deelvenster Eigenschappen.

In alle weergaven worden ingestelde eigenschappen weergegeven in blauw; eigenschappen die niet van belang zijn voor een

selectie, worden weergegeven als met een rode streep doorgehaalde tekst. Als u met de muis over een regel gaat die niet van

belang is, wordt in een melding uitgelegd waarom de eigenschap niet van belang is. Doorgaans is een eigenschap niet van

belang, omdat deze wordt onderdrukt of omdat het geen overgenomen eigenschap is.

DREAMWEAVER CS3

Handboek

123

Alle wijzigingen die u aanbrengt in het deelvenster Eigenschappen, worden onmiddellijk toegepast, waardoor u een

voorbeeld van uw werk kunt zien terwijl u doorwerkt.

Zie ook

“Het deelvenster CSS-stijlen openen” op pagina 124

Het paneel CSS-stijlen in de modus Alles

In de modus Alles bestaat het paneel CSS-stijlen uit twee deelvensters: een deelvenster Alle regels (bovenaan) en een

deelvenster Eigenschappen (onderaan). Het deelvenster Alle regels geeft een lijst van regels weer, zowel die welke zijn

gedefinieerd in het huidige document, als alle regels die zijn gedefinieerd in aan het huidige document gekoppelde

stijlpagina's. In het deelvenster Eigenschappen kunt u CSS-eigenschappen bewerken van elke regel die wordt geselecteerd

in het deelvenster Alle regels.

U kunt het formaat van een van beide deelvensters wijzigen door de randen tussen de deelvensters te slepen, terwijl u de

grootte van kolommen Eigenschappen kunt wijzigen door het slepen van de kolomscheiding ervan.

Als u een regel selecteert in het deelvenster Alle regels, worden alle eigenschappen die in die regel zijn gedefinieerd,

weergegeven in het deelvenster Eigenschappen. Vervolgens kunt u het deelvenster Eigenschappen gebruiken om snel uw

CSS te wijzigen, ongeacht of deze is ingebed in het huidige document of is gekoppeld in een gekoppelde stijlpagina.

Standaard toont het deelvenster Eigenschappen alleen die eigenschappen die eerder zijn ingesteld, en schikt deze in

alfabetische volgorde.

U kunt ervoor kiezen om het deelvenster Eigenschappen te tonen in twee andere weergaven. In de categorieweergave

worden eigenschappen gegroepeerd in categorieën weergegeven, zoals Lettertype, Achtergrond, Blok, Rand, enzovoort,

met ingestelde eigenschappen boven aan elke categorie. Bij weergave als lijst wordt een alfabetische lijst van alle beschikbare

eigenschappen weergegeven, waarbij ingestelde eigenschappen bovenaan worden gerangschikt. Als u tussen de

verschillende weergaven wilt schakelen, klikt u op de knop Categorieën weergeven, Lijst weergeven of Alleen ingestelde

eigenschappen weergeven in de linkerbenedenhoek van het deelvenster Eigenschappen. In alle weergaven worden

ingestelde eigenschappen weergegeven in blauw.

Alle wijzigingen die u aanbrengt in het deelvenster Eigenschappen, worden onmiddellijk toegepast, waardoor u een

voorbeeld van uw werk kunt zien terwijl u doorwerkt.

Zie ook

“Het deelvenster CSS-stijlen openen” op pagina 124

DREAMWEAVER CS3

Handboek

124

Knoppen en weergaven in het paneel CSS-stijlen

In zowel de modus Alles als de modus Huidig bevat het paneel CSS-stijlen drie knoppen, waarmee u de weergave in het

deelvenster Eigenschappen (het onderste deelvenster) kunt wijzigen:

A. Categorieweergave B. Lijstweergave C. Ingestelde eigenschappen

Categorieweergave Hiermee verdeelt u de door Dreamweaver ondersteunde CSS-eigenschappen in acht categorieën:

lettertype (font), achtergrond (background), blok (block), rand (border), vak (box), lijst (list), positionering (positioning)

en extensies (extensions). De eigenschappen van elke categorie staan vermeld in een lijst die u uitvouwt of samenvouwt

door op de knop Plus (+) naast de naam van elke categorie te klikken. Ingestelde eigenschappen staan (in blauw) boven aan

de lijst.

Lijstweergave Hiermee geeft u alle door Dreamweaver ondersteunde CSS-eigenschappen weer in alfabetische volgorde.

Ingestelde eigenschappen staan (in blauw) boven aan de lijst.

Ingestelde eigenschappen Hiermee geeft u alleen die eigenschappen weer, die zijn ingesteld. Ingestelde eigenschappen is

de standaardweergave.

In zowel de modus Alles als de modus Huidig bevat het paneel CSS-stijlen ook de volgende knoppen:

A. Stijlpagina koppelen B. Nieuwe CSS-regel C. Stijl bewerken D. CSS-regel verwijderen

Stijlpagina koppelen Hiermee opent u het dialoogvenster Externe stijlpagina koppelen. Selecteer een externe stijlpagina

die u koppelt aan of importeert in uw huidige document.

Nieuwe CSS-regel Hiermee opent u een dialoogvenster waarin u het type te maken stijl selecteert—bijvoorbeeld, het

maken van een klassestijl, het opnieuw definiëren van een HTML-tag of het definiëren van een CSS-kiezer.

Stijl bewerken Hiermee opent u een dialoogvenster waarin u de stijlen in het huidige document of in een externe

stijlpagina kunt bewerken.

CSS-regel verwijderen Hiermee verwijdert u de geselecteerde regel of eigenschap uit het paneel CSS-stijlen en verwijdert

de opmaak uit elk element waarop deze werd toegepast. (Klasse- of id-eigenschappen waarnaar door die stijl wordt

verwezen, worden echter niet verwijderd.) Met de knop CSS-regel verwijderen kunt u ook een gekoppelde CSS-stijlpagina

afkoppelen (of "de koppeling verbreken").

Klik met de rechtermuisknop (Windows) of of terwijl u Control ingedrukt houdt (Macintosh) in het paneel CSS-stijlen om

een contextmenu te openen met opties voor het werken met CSS-stijlpaginaopdrachten.

Het deelvenster CSS-stijlen openen

U gebruikt het paneel CSS-stijlen voor het bekijken, maken, bewerken en verwijderen van CSS-stijlen, alsmede voor het

koppelen van externe stijlpagina's aan documenten.

❖ Ga op een van de volgende manieren te werk:

• Selecteer Venster > CSS-stijlen.

• Druk op Shift+F11.

• Klik op de knop CSS in de eigenschappencontrole.

A B C

BA C D

DREAMWEAVER CS3

Handboek

125

Voorkeuren voor CSS-stijlen instellen

Met voorkeuren voor CSS-stijlen bepaalt u de manier waarop Dreamweaver de code schrijft, waarmee CSS-stijlen worden

gedefinieerd. CSS-stijlen kunnen in een bepaalde vorm van "steno" worden geschreven, waarmee bepaalde mensen

gemakkelijker kunnen werken. Sommige oudere versies van browsers interpreteren de steno echter niet op de juiste wijze.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer CSS-stijlen in de

lijst Categorie.

2 Stel de opties voor CSS-stijlen in, die u wilt toepassen:

Bij het maken van CSS-regels steno gebruiken voor Hiermee selecteert u welke CSS-stijleigenschappen Dreamweaver

in steno schrijft.

Bij het bewerken van CSS-regels steno gebruiken voor Hiermee bepaalt u of Dreamweaver bestaande stijlen in steno

herschrijft.

Selecteer Als in het origineel steno wordt gebruikt om alle stijlen te handhaven zoals ze zijn.

Selecteer Volgens bovenstaande instellingen om stijlen te herschrijven in steno voor de eigenschappen die u selecteerde bij

Steno gebruiken voor.

Bij het dubbelklikken in het CSS-paneel Hiermee selecteert u gereedschap voor het bewerken van CSS-regels.

3 Klik op OK.

Een nieuwe CSS-regel maken

U kunt een CSS-regel maken om de opmaak van HTML-tags of van een door het kenmerk class aangeduide reeks tekst te

automatiseren.

1 Plaats de invoegpositie in het document en ga vervolgens op een van de volgende manieren te werk om het

dialoogvenster Nieuwe CSS-regel te openen:

• Selecteer Tekst > CSS-stijlen > Nieuw.

• Klik in het paneel CSS-stijlen (Venster > CSS-stijlen) op de knop Nieuwe CSS-regel (+) rechtsonder in het paneel.

2 Definieer het type CSS-stijl dat u wilt maken:

• Voor het maken van een eigen stijl die als een kenmerk class kanwordentoegepastopeentekstbereikof-blok,selecteert

u de optie Klasse en geeft u vervolgens een naam voor de stijl op in het vak Naam.

Opmerking: klassenamen moeten beginnen met een punt en kunnen elke combinatie van letters en cijfers bevatten

(bijvoorbeeld, .mijnkop1). Als u aan het begin geen punt opgeeft, geeft Dreamweaver deze automatisch voor u op.

• Voor het opnieuw definiëren van de standaardopmaak van een specifieke HTML-tag selecteert u de optie Tag en geeft u

vervolgens een HTML-tag op in het tekstvak Tag of selecteert u er een in het pop-upmenu.

• Voor het definiëren van de opmaak van een bepaalde combinatie van tags of voor alle tags met een specifiek kenmerk Id

selecteert u de optie Geavanceerd en geeft u vervolgens in het tekstvak Kiezer een of meer HTML-tags op of selecteert u

er één in het pop-upmenu. De in het pop-upmenu beschikbare kiezers (ook wel pseudoklassekiezers genoemd) zijn

a:active, a:hover, a:link en a:visited.

3 Selecteer de locatie waar de stijl zal worden gedefinieerd, en klik vervolgens op OK:

• Als u de stijl wilt plaatsen in een stijlpagina die al aan het document is gekoppeld, selecteert u de stijlpagina.

• Als u een externe stijlpagina wilt maken, selecteert u Nieuw stijlpaginabestand.

• Als u de stijl wilt inbedden in het huidige document, selecteert u Alleen dit document.

4 Selecteer in het dialoogvenster CSS-regeldefinitie de stijlopties die u wilt instellen voor de nieuwe CSS-regel. Zie de

volgende sectie voor meer informatie.

5 Wanneer u klaar bent met het instellen van de stijleigenschappen, klikt u op OK.

Opmerking: Door op OK te klikken zonder stijlopties in te stellen ontstaat er een nieuwe, lege regel.

DREAMWEAVER CS3

Handboek

126

CSS-eigenschappen instellen

U kunt eigenschappen definiëren voor CSS-regels zoals lettertype voor tekst, achtergrondafbeelding en -kleur, spatiërings-

en lay-outeigenschappen, alsmede het uiterlijk van lijstelementen. Maak eerst een nieuwe regel en stel vervolgens een of

meer van de volgende eigenschappen in.

Eigenschappen van CSS-typen definiëren

U gebruikt het type Categorie in het dialoogvenster CSS-regeldefinitie om de basisinstellingen voor lettertype en type voor

een CSS-stijl te definiëren.

1 Open het paneel CSS-stijlen (Shift + F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer Type in het dialoogvenster CSS-regeldefinitie en stel vervolgens de stijleigenschappen in.

Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:

Font Hiermee stelt u de lettertypefamilie (of een reeks families) in voor de stijl. Browsers geven tekst weer in het eerste

lettertype in de reeks, dat op het systeem van de gebruiker is geïnstalleerd. Vermeld voor de compatibiliteit met Internet

Explorer 3.0 eerst een Windows-lettertype. Het kenmerk voor lettertype wordt door beide browsers ondersteund.

Grootte Hiermee definieert u de grootte van de tekst. U kunt een specifieke grootte kiezen door het aantal en de

meeteenheid te selecteren, maar u kunt ook een relatieve grootte kiezen. Pixels werken goed om te verhinderen dat

browsers uw tekst vervormen. Het kenmerk voor grootte wordt door beide browsers ondersteund.

Stijl Hiermee geeft u als lettertypestijl Normaal, Cursief of Scheef op. De standaardinstelling is Normaal. Het kenmerk

voor stijl wordt door beide browsers ondersteund.

Regelhoogte Hiermee stelt u de hoogte van de regel in, waarop de tekst wordt geplaatst. Van oudsher wordt deze instelling

interlinie genoemd. Selecteer Normaal om de regelhoogte van de tekengrootte automatisch te laten berekenen of geef een

exacte waarde op en selecteer een meeteenheid. Het kenmerk voor regelhoogte wordt door beide browsers ondersteund.

Decoratie Hiermee voegt u een onderstreping, een bovenstreep of een doorhaling aan de tekst toe of laat u de tekst

knipperen. De standaardinstelling voor reguliere tekst is None (Geen). De standaardinstelling voor koppelingen is

Underline (Onderstrepen). Wanneer u de instelling voor koppelingen instelt op none (Geen), kunt u de onderstreping

verwijderen uit koppelingen door een speciale klasse te definiëren. Het kenmerk voor decoratie wordt door beide browsers

ondersteund.

Dikte Hiermee past u een specifieke of relatieve hoeveelheid vet toe op het lettertype. De waarde Normaal is gelijk aan 400;

de waarde Vet is gelijk aan 700. Het kenmerk voor dikte wordt door beide browsers ondersteund.

Variant Hiermee stelt u de variant voor kleinkapitalen in voor tekst. Dreamweaver geeft dit kenmerk niet weer in het

documentvenster. Het kenmerk voor variant wordt wel ondersteund door Internet Explorer, maar niet door Navigator.

Hoofdletter/kleine letter Hiermee zet u de eerste letter van elk woord in de selectie om in een hoofdletter, of stelt u de tekst

in op uitsluitend hoofdletters of uitsluitend kleine letters. Het kenmerk voor hoofdletter/kleine letter wordt door beide

browsers ondersteund.

Kleur Hiermee stelt u de kleur van de tekst in. Het kenmerk voor kleur wordt door beide browsers ondersteund.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Eigenschappen voor CSS-stijlachtergronden definiëren

Gebruik de categorie Achtergrond van het dialoogvenster CSS-regeldefinitie om de achtergrondinstellingen voor een CSS-

stijl te definiëren. U kunt de achtergrondeigenschappen toepassen op elk element op een webpagina. Maak bijvoorbeeld

een stijl die een achtergrondkleur of achtergrondafbeelding aan elk pagina-element toevoegt, bijvoorbeeld achter tekst, een

tabel, de pagina, enzovoort. U kunt ook de positionering van een achtergrondafbeelding instellen.

1 Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer in het dialoogvenster CSS-regeldefinitie eerst Achtergrond en stel vervolgens de stijleigenschappen in.

DREAMWEAVER CS3

Handboek

127

Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:

Achtergrondkleur Hiermee stelt u de achtergrondkleur voor het element in. Het kenmerk voor achtergrondkleur wordt

door beide browsers ondersteund.

Achtergrondafbeelding Hiermee stelt u de achtergrondafbeelding voor het element in. Het kenmerk voor

achtergrondafbeelding wordt door beide browsers ondersteund.

Herhalen Hiermee bepaalt u of, en hoe, de achtergrondafbeelding wordt herhaald. Het kenmerk voor herhaling wordt

door beide browsers ondersteund.

• Als u kiest voor Geen herhaling, wordt de afbeelding slechts één maal bij het begin van het element weergegeven.

• Bij Herhalen wordt de afbeelding horizontaal en verticaal als een betegeling achter het element weergegeven.

• Met de opties Herhalen-x en Herhalen-y wordt respectievelijk een horizontale en verticale reeks afbeeldingen

weergegeven. Afbeeldingen worden dusdanig bijgesneden dat deze passen binnen de grenzen van het element.

Opmerking: Gebruik de eigenschap Herhalen om de label

body opnieuw te definiëren en een achtergrondafbeelding in te

stellen, die niet wordt herhaald of als een betegeling wordt weergegeven.

Bijlage Hiermee bepaalt u of de achtergrondafbeelding is vastgezet op de oorspronkelijke positie of met de inhoud mee

verschuift. Vergeet niet dat bepaalde browsers de optie Vast behandelen als Schuiven. Dit wordt wel ondersteund door

Internet Explorer, maar niet door Netscape Navigator.

Horizontale positie en Verticale positie Hiermee geeft u de aanvankelijke positie van de achtergrondafbeelding op in

verhouding tot het element. Hiermee kunt u een achtergrondafbeelding uitlijnen op het midden van de pagina, zowel

verticaal als horizontaal. Als de eigenschap voor bijlage is ingesteld op Vast, is de positie relatief ten opzichte van het

documentvenster, niet ten opzichte van het element. Dit kenmerk wordt wel ondersteund door Internet Explorer, maar niet

door Netscape Navigator.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Eigenschappen voor CSS-stijlblokken definiëren

U kunt de categorie Blok van het dialoogvenster CSS-regeldefinitie gebruiken om instellingen voor spatiëring en uitlijning

voor labels en eigenschappen te definiëren.

1 Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer Blok in het dialoogvenster CSS-regeldefinitie en stel vervolgens een van de volgende stijleigenschappen in.

(Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)

Woordspatiëring Hiermee stelt u de spatiëring tussen woorden in. Voor het instellen van een bepaalde waarde selecteert

u Waarde in het pop-upmenu en geeft u vervolgens een numerieke waarde op. Selecteer in het tweede pop-upmenu een

meeteenheid (bijvoorbeeld, pixel, punten, enzovoort).

Opmerking: U kunt wel negatieve waarden opgeven, maar de weergave is afhankelijk van de browser. Dreamweaver geeft dit

kenmerk niet weer in het documentvenster.

Letterspatiëring Hiermee vergroot of verkleint u de ruimte tussen letters of lettertekens. Voor het verkleinen van de ruimte

tussen lettertekens geeft u een negatieve waarde op, bijvoorbeeld (-4). Instellingen voor letterspatiëring onderdrukken

instellingen voor uitgelijnde tekst. Het kenmerk voor letterspatiëring wordt ondersteund door Internet Explorer 4 en hoger,

en Netscape Navigator 6.

Verticale uitlijning Hiermee geeft u de verticale uitlijning op van het element, waarop deze wordt toegepast. Dreamweaver

geeft dit kenmerk alleen in het documentvenster weer wanneer het wordt toegepast op de label

<img>.

Tekstuitlijning Hiermee stelt u in hoe de tekst wordt uitgelijnd binnen het element. Het kenmerk voor tekstuitlijning wordt

door beide browsers ondersteund.

Tekst laten inspringen Hiermeegeeftuophoeverdeeersteregeltekstinspringt. Ukunteennegatievewaardegebruiken

om een uitspringing te maken, maar de weergave is afhankelijk van de browser. Dreamweaver geeft dit kenmerk alleen in

DREAMWEAVER CS3

Handboek

128

het documentvenster weer wanneer de label wordt toegepast op elementen op blokniveau. Het kenmerk voor tekst laten

inspringen wordt door beide browsers ondersteund.

Witruimte Hiermee bepaalt u hoe binnen het element met witruimte wordt omgesprongen. Selecteer uit de volgende drie

opties: Bij Normaal wordt witruimte samengevouwen; bij Pre wordt witruimte behandeld alsof de tekst is omgeven door de

labels

pre (d.w.z. alle witruimte, inclusief spaties, tabs en regeleinden, wordt gerespecteerd); via Nowrap geeft u op dat de

tekst alleen omloopt wanneer een label

br wordt gesignaleerd. Dreamweaver geeft dit kenmerk niet weer in het

documentvenster. Het kenmerk voor witruimte wordt ondersteund door Netscape Navigator en Internet Explorer 5.5.

Weergave Hiermee geeft u aan of een element wordt weergegeven, en hoe het wordt weergegeven. Met de optie Geen

wordt de weergave uitgeschakeld van een element waaraan de optie is toegewezen.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Eigenschappen voor CSS-stijlvakken definiëren

Gebruik de categorie Kader van het dialoogvenster CSS-regeldefinitie om instellingen te definiëren voor labels en

eigenschappen waarmee u de plaatsing van elementen op de pagina bepaalt.

U kunt instellingen bij het toepassen van instellingen voor opvulling en marges toepassen op afzonderlijke zijkanten van

een element, of u kunt de instelling Allemaal hetzelfde gebruiken om dezelfde instelling toe te passen op alle zijkanten van

een element.

1 Open het paneel CSS-stijlen (Shift + F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer in het dialoogvenster CSS-regeldefinitie de optie Kader en stel een van de volgende stijleigenschappen in. (Laat

de eigenschap leeg als deze niet belangrijk is voor de stijl.)

Breedte en Hoogte Hiermee stelt u de breedte en hoogte van het element in.

Zweven Hiermee bepaalt u aan welke zijde andere elementen, zoals tekst, AP Div-elementen, tabellen, enzovoort, binnen

een element gaan zweven. Zoals gebruikelijk, lopen andere elementen om het zwevende element heen. Het kenmerk voor

zweven wordt door beide browsers ondersteund.

Wissen Hiermee bepaalt u aan welke zijkanten AP-elementen niet zijn toegestaan. Als een AP-element voorkomt aan de

gewiste zijde, wordt het element met de gewiste instelling eronder geplaatst. Het kenmerk voor wissen wordt door beide

browsers ondersteund.

Opvulling Hiermee bepaalt u de hoeveelheid ruimte tussen de inhoud van een element en de rand ervan (of de marge

ervan, als er geen rand is). Schakel de selectie van de optie Allemaal hetzelfde uit om de opvulling van afzonderlijke

zijkanten van het element in te stellen.

Allemaal hetzelfde Hiermee stelt u dezelfde eigenschappen voor opvulling in voor de zijkanten boven, rechts, onder en

links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

Marge Hiermee bepaalt u de hoeveelheid ruimte tussen de rand van een element (of de opvulling ervan, als er geen rand

is) en een ander element. Dreamweaver geeft dit kenmerk alleen weer in het documentvenster, wanneer het wordt

toegepast op elementen op blokniveau (alinea's, koppen, lijsten, enzovoort). Schakel de selectie van de optie Allemaal

hetzelfde uit om de marge van afzonderlijke zijkanten van het element in te stellen.

Allemaal hetzelfde Hiermee stelt u dezelfde eigenschappen voor marge in voor de zijkanten boven, rechts, onder en links

van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Eigenschappen voor CSS-stijlranden definiëren

Gebruik de categorie Rand van het dialoogvenster CSS-regeldefinitie om instellingen, zoals breedte, kleur en stijl, te

bepalen voor de randen om elementen.

1 Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.

DREAMWEAVER CS3

Handboek

129

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer in het dialoogvenster CSS-regeldefinitie de optie Rand en stel een van de volgende stijleigenschappen in. (Laat

de eigenschap leeg als deze niet belangrijk is voor de stijl.)

Stijl Hiermee bepaalt u het uiterlijk van de stijl van de rand. De manier waarop de stijl eruitziet, is afhankelijk van de

browser. Dreamweaver geeft in het documentvenster alle stijlen weer als effen of ononderbroken. Het kenmerk voor stijl

wordt door beide browsers ondersteund. Schakel de selectie van de optie Allemaal hetzelfde uit om de stijl van de rand van

afzonderlijke zijkanten van het element in te stellen.

Allemaal hetzelfde Hiermee stelt u dezelfde eigenschappen voor de stijl van de rand in voor de zijkanten boven, rechts,

onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

Breedte Hiermee bepaalt u de dikte van de rand van het element. Het kenmerk voor breedte wordt door beide browsers

ondersteund. Schakel de selectie van de optie Allemaal hetzelfde uit om de dikte van de rand van afzonderlijke zijkanten

van het element in te stellen.

Allemaal hetzelfde Hiermee stelt u dezelfde eigenschappen voor de dikte van de rand in voor de zijkanten boven, rechts,

onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

Kleur Hiermee bepaalt u de kleur van de rand. U kunt de kleur van elke zijkant afzonderlijk instellen, maar de weergave

ervan is afhankelijk van de browser. Schakel de selectie van de optie Allemaal hetzelfde uit om de kleur van de rand van

afzonderlijke zijkanten van het element in te stellen.

Allemaal hetzelfde Hiermee stelt u dezelfde eigenschappen voor de kleur van de rand in voor de zijkanten boven, rechts,

onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Eigenschappen voor CSS-stijllijsten definiëren

De categorie Lijst van het dialoogvenster CSS-regeldefinitie bepaalt instellingen van lijsten, zoals type en grootte van

opsommingstekens, voor de labels voor lijsten.

1 Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer in het dialoogvenster CSS-regeldefinitie de optie Lijst en stel een van de volgende stijleigenschappen in. (Laat

de eigenschap leeg als deze niet belangrijk is voor de stijl.)

Typ Hiermee bepaalt u het uiterlijk van opsommingstekens of getallen. Type wordt ondersteund door beide browsers.

Afbeelding opsommingsteken Hiermee geeft u een eigen afbeelding voor opsommingstekens op. Klik op Bladeren

(Windows) of Kies (Macintosh) om via bladeren een afbeelding te zoeken of typ het pad naar de afbeelding.

Positie Hiermee bepaalt u of de tekst van een lijstitem omloopt en inspringt (buiten), of dat de tekst omloopt naar de

linkermarge (binnen).

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Eigenschappen voor CSS-stijlpositionering definiëren

De stijleigenschappen voor Positionering bepalen hoe de aan de geselecteerde CSS-stijl gekoppelde inhoud wordt

gepositioneerd op de pagina.

1 Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer in het dialoogvenster CSS-regeldefinitie de optie Positionering en stel vervolgens de gewenste

stijleigenschappen in.

DREAMWEAVER CS3

Handboek

130

Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:

Typ Hiermee bepaalt u als volgt hoe de browser het geselecteerde element gaat positioneren:

• Absoluut plaatst de inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Plaatsing, relatief ten

opzichte van het dichtstbijzijnde absoluut of relatief gepositioneerde bovenliggende element, of, als er geen absoluut of

relatief gepositioneerd bovenliggende element is, in de linkerbovenhoek van de pagina.

• Relatief plaatst het blok inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Plaatsing, relatief ten

opzichte van de positie van het blok in de tekststroom van het document. Als u een element bijvoorbeeld een relatieve

positie en coördinaten voor boven en links van elke 20 px (pixels) geeft, verschuift het element 20 pixels naar rechts en

20 pixels naar onder vanaf zijn normale positie in de stroom. Elementen kunnen ook relatief worden gepositioneerd,

met of zonder coördinaten voor boven, links, rechts of onder, om een context te bepalen voor absoluut gepositioneerde

onderliggende elementen.

• Vast plaatst de inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Plaatsing, relatief ten opzichte

van de linkerbovenhoek van de browser. Terwijl de gebruiker via schuiven door de pagina bladert, blijft de inhoud vast

op die positie.

• Statisch plaatst de inhoud op de plaats ervan in de tekststroom. Dit is de standaardpositie van alle positioneerbare

HTML-elementen.

Zichtbaarheid Hiermee bepaalt u de aanvankelijke weergavetoestand van de inhoud. Als u geen eigenschap voor

zichtbaarheid opgeeft, krijgt de inhoud standaard de waarde van de bovenliggende label. De standaardzichtbaarheid van de

label body is zichtbaar. Selecteer een van de volgende zichtbaarheidsopties:

• Overnemen (standaard) neemt de zichtbaarheidseigenschap van het bovenliggende element van de inhoud over.

• Zichtbaar geeft de inhoud altijd weer, ongeacht de waarde van het bovenliggende element.

• Verborgen verbergt de inhoud, ongeacht de waarde van het bovenliggende element.

Z-index Hiermee bepaalt u de stapelvolgorde van de inhoud. Elementen met een hogere Z-index verschijnen boven

elementen met een lagere Z-index (of die met helemaal geen index). Waarden kunnen positief of negatief zijn. (Als uw

inhoud absoluut is gepositioneerd, is het eenvoudiger om de stapelvolgorde te wijzigen met behulp van het paneel AP-

elementen.

Overloop Hiermee bepaalt u wat er gebeurt als de inhoud van een container (bijvoorbeeld een element div of p) de grootte

ervan overschrijdt. Deze eigenschappen bepalen hoe met de uitbreiding wordt omgegaan:

• Zichtbaar maaktdecontainerdusdaniggroterdatalleinhouderinzichtbaarwordt.Decontainerwordtnaarbenedenen

naar rechts uitgebreid.

• Verborgen handhaaft de grootte van de container en knipt alle inhoud die er niet in past, af. Er zijn geen schuifbalken

beschikbaar.

• Schuiven voegt schuifbalken toe aan de container, ongeacht of de inhoud de grootte van de container overtreft. Met name

de beschikbaarheid van schuifbalken vermijdt verwarring die het verschijnen en verdwijnen van schuifbalken in een

dynamische omgeving zou kunnen veroorzaken. Deze optie wordt niet weergegeven in het documentvenster.

• Auto zorgt ervoor dat schuifbalken alleen verschijnen wanneer de inhoud van de container de grenzen ervan

overschrijdt. Deze optie wordt niet weergegeven in het documentvenster.

Plaatsing Hiermee bepaalt u de locatie en de grootte van het blok inhoud. Hoe de browser de locatie interpreteert, is

afhankelijk van de instelling voor Type. Waarden voor grootte worden onderdrukt als de inhoud van het blok inhoud de

opgegeven grootte overschrijdt.

De standaardeenheden voor locatie en grootte zijn pixels. U kunt echter ook de volgende eenheden opgeven: pc (pica's),

pt (punten), in (inches), mm (millimeters), cm (centimeters), (ems), (exs) of % (percentage van de waarde van het

bovenliggende element). De afkortingen moeten zonder spatie op de waarde volgen: bijvoorbeeld

3mm.

Uitknippen Hiermee bepaalt u het gedeelte van de inhoud, dat zichtbaar is. Als u een gebied voor uitknippen opgeeft, kunt

u toegang ertoe krijgen met een scripttaal zoals JavaScript en de eigenschappen manipuleren om speciale effecten te maken,

zoals sluitereffecten. Deze sluitereffecten kunnen worden ingesteld met behulp van het gedrag Eigenschap wijzigen.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

DREAMWEAVER CS3

Handboek

131

Eigenschappen voor CSS-stijlextensies definiëren

Extensies, stijleigenschappen inclusief filters, paginascheiding en opties voor de aanwijzer.

Opmerking: Er is een aantal andere extensie-eigenschappen beschikbaar in Dreamweaver, maar voor toegang hiertoe dient u

het paneel CSS-stijlen te gebruiken. Een lijst van extensie-eigenschappen is eenvoudig beschikbaar door het paneel CSS-stijlen

te openen (Venster > CSS-stijlen), op de knop Categorieweergave tonen onder aan het paneel te klikken en de categorie

Extensies uit te vouwen.

1 Open het paneel CSS-stijlen (Shift + F11), als dat nog niet geopend is.

2 Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.

3 Selecteer in het dialoogvenster CSS-regeldefinitie de optie Extensies en stel een van de volgende stijleigenschappen in.

(Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)

Pagina-einde Hiermee forceert u een pagina-einde tijdens het afdrukken, hetzij vóór het object, hetzij erna, hetgeen wordt

bepaald door de stijl. Selecteer in het pop-upmenu de optie die u wilt instellen. Deze optie wordt door geen enkele browser

van versie 4.0 ondersteund, maar ondersteuning ervan is mogelijk in toekomstige browsers beschikbaar.

Cursor Hiermee wijzigt u de afbeelding van de muisaanwijzer, wanneer de muisaanwijzer over het door de stijl

gecontroleerde object wordt bewogen. Selecteer in het pop-upmenu de optie die u wilt instellen. Internet Explorer 4.0 en

hoger, alsmede Netscape Navigator 6 ondersteunen dit kenmerk.

Filter Hiermee past u speciale effecten toe op het door de stijl gecontroleerde object, inclusief vervagen en inversie.

Selecteer een effect in het pop-upmenu.

4 Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra

stijleigenschappen in te stellen of klikt u op OK.

Een CSS-regel bewerken

U kunt zowel interne als externe, op een document toegepaste regels bewerken.

Wanneer u een CSS-stijlpagina bewerkt die de tekst in uw document bepaalt, kunt u alle, door die CSS-stijlpagina bepaalde

tekst ogenblikkelijk opnieuw opmaken. Bewerkingen aan een externe stijlpagina hebben invloed op alle documenten die

aan die pagina zijn gekoppeld.

U kunt een externe editor instellen, die moet worden gebruikt voor het bewerken van de stijlpagina's.

Een regel bewerken in het paneel CSS-stijlen (modus Huidig)

1 Open het paneel CSS-stijlen door de selectie van Venster > CSS-stijlen.

2 Klik op de knop Huidige boven aan het paneel CSSstijlen.

3 Selecteer een tekstelement op de huidige pagina om de eigenschappen ervan weer te geven.

4 Ga op een van de volgende manieren te werk:

• Dubbelklik op een eigenschap in het deelvenster Samenvatting voor selectie om het dialoogvenster CSS-regeldefinitie

weer te geven en breng vervolgens uw wijzigingen aan.

• Selecteer een eigenschap in het deelvenster Samenvatting voor selectie en bewerk vervolgens de eigenschap in het

deelvenster Eigenschappen hieronder.

• Selecteer een regel in het deelvenster Regels en bewerk vervolgens de eigenschappen van de regel in het deelvenster

Eigenschappen hieronder.

Opmerking: U kunt het gedrag voor dubbelklikken voor het bewerken van CSS alsmede andere gedragsvormen wijzigen door

het wijzigen van de voorkeuren in Dreamweaver.

Een regel bewerken in het paneel CSS-stijlen (modus Alles)

1 Open het paneel CSS-stijlen door de selectie van Venster > CSS-stijlen.

2 Klik op de knop Alles boven aan het paneel CSS-stijlen.

DREAMWEAVER CS3

Handboek

132

3 Ga op een van de volgende manieren te werk:

• Dubbelklik op een regel in het deelvenster Alle regels om het dialoogvenster CSS-regeldefinitie weer te geven en breng

vervolgens uw wijzigingen aan.

• Selecteer een regel in het deelvenster Alle regels en bewerk vervolgens de eigenschappen van de regel in het deelvenster

Eigenschappen hieronder.

• SelecteereenregelinhetdeelvensterAlleregelsenenklikvervolgens op de knop Stijl bewerken in de rchterbenedenhoek

van het paneel CSS-stijlen.

Opmerking: U kunt het gedrag voor dubbelklikken voor het bewerken van CSS alsmede andere gedragsvormen wijzigen door

het wijzigen van de voorkeuren in Dreamweaver.

De naam van een CSS-kiezer wijzigen

1 Selecteer in het paneel CSS-stijlen (modus Alles) de kiezer die u wilt wijzigen.

2 Klik opnieuw op de kiezer om de naam bewerkbaar te maken.

3 Breng uw wijzigingen aan en druk op Enter (Windows) of Return (Macintosh).

Een eigenschap toevoegen aan een regel

U kunt het paneel CSS-stijlen gebruiken om eigenschappen toe te voegen aan regels.

1 Selecteer in het paneel CSS-stijlen (Venster > CSS) een regel in het paneel Alle regels (modus Alles) of selecteer een

eigenschap in het paneel Samenvatting voor selectie (modus Huidig).

2 Ga op een van de volgende manieren te werk:

• Als de weergave Alleen ingestelde eigenschappen weergeven is geselecteerd in het paneel Eigenschappen, klikt u op de

koppeling Eigenschappen toevoegen en voegt u een eigenschap toe.

• Als de categorieweergave of lijstweergave is geselecteerd in het paneel Eigenschappen, vult u een waarde in voor de

eigenschap die u wilt toevoegen.

Klassestijlen toepassen, verwijderen of hernoemen

Klassestijlen vormen het enige type CSS-stijl dat kan worden toegepast op elke willekeurige tekst in een document,

ongeacht de tags die de tekst bepalen. Alle klassestijlen die zijn gekoppeld aan het huidige document, worden weergegeven

in het paneel CSS-stijlen (met een punt [.] vóór de naam) en in het pop-upmenu Stijl in de eigenschappencontrole voor

tekst.

Zoals u ziet, worden de meeste stijlen onmiddellijk bijgewerkt; u dient echter de voorvertoning van uw pagina in een

browser te gebruiken om te controleren of een stijl werd toegepast zoals verwacht. Wanneer u twee of meer stijlen op

dezelfde tekst toepast, is er mogelijk een conflict tussen de stijlen, hetgeen tot onverwachte resultaten kan leiden.

Bij de voorvertoning van stijlen die zijn gedefinieerd in een externe CSS-stijlpagina dient u niet te vergeten om de stijlpagina

op te slaan om ervoor te zorgen dat de wijzigingen worden weergegeven wanneer u de pagina in een voorvertoning in een

browser ziet.

Zie ook

“Informatie over CSS (Cascading Style Sheets)” op pagina 117

“Informatie over CSS-stijlen” op pagina 119

“Informatie over het paneel CSS-stijlen” op pagina 121

Een CSS-klassestijl toepassen

1 Selecter in het document de tekst waarop u een CSS-stijl wilt toepassen.

Plaats het invoegpunt in een alinea om de stijl toe te passen op de gehele alinea.

Als u een tekstbereik binnen één alinea selecteert, heeft de CSS-stijl alleen invloed op het geselecteerde bereik.

DREAMWEAVER CS3

Handboek

133

Als u de precieze tag wilt opgeven waarop de CSS-stijl moet worden toegepast, selecteert u de tag in de tagkiezer linksonder

in het documentvenster.

2 Voer een van de volgende handelingen uit om een klassestijl toe te passen:

• Selecteer in het paneel CSS-stijlen (Venster > CSS-stijlen) de modus Alles, klik met de rechtermuisklok op de naam van

de stijl die u wilt toepassen, en selecteer Toepassen in het contextmenu.

• Selecteer in de eigenschappencontrole de klassestijl die u wilt toepassen, in het pop-upmenu Stijl.

• Klik in het documentvenster met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op

de geselecteerde tekst, selecteer CSS-stijlen in het snelmenu en selecteer vervolgens de stijl die u wilt toepassen.

• Selecteer Tekstt > CSS-stijlen en selecteer in het submenu de stijl die u wilt toepassen.

Een klassestijl verwijderen uit een selectie

1 Selecteer het object of de tekst waarvan u de stijl wilt verwijderen.

2 Selecteer het object of de tekst waarvan u de stijl wilt verwijderen.

De naam van een klassestijl wijzigen

1 Ga naar het in het CSS-stijlenpaneel en klik met de rechtermuisknop op de CSS-klassestijl waarvan u de naam wilt

wijzigen. Selecteer Naam klasse wijzigen.

U kunt een klasse eveneens een nieuwe naam geven door in het menu van CSS-stijlen de optie Naam klasse wijzigen te

kiezen.

2 Controleer in het dialoogvenster Naam klasse wijzigen of de klasse die u wilt hernoemen is geselecteerd in het pop-

upvenster Naam klasse wijzigen.

3 Typ in het tekstvak Nieuwe naam de nieuwe naam voor de nieuwe klassen en klik op OK.

Als de klasse waaraan u een nieuwe naam wilt geven intern is aan de kop van het huidige document, verandert

Dreamweaver de naam van de klasse en overal waar de klassenaam in het document wordt gebruikt. Als de klasse waaraan

u een nieuwe naam wilt geven, een extern CSS-bestand is, opent Dreamweaver het bestand en verandert het de klassenaam

in het bestand. Dreamweaver start tevens een dialoogvenster Zoeken/Vervangen voor de hele website zodat u in de hele

website kunt zoeken naar alle plaatsen waar de oude klassenaam voorkomt.

CSS-regels verplaatsen

De functies voor beheer van CSS in Dreamweaver maken het voor u gemakkelijker om CSS-regels naar andere plaatsen over

te brengen. U kunt regels van het ene document naar het andere verplaatsen, van de kop van een document naar een externe

stijlpagina, tussen externe CSS-bestanden, enz.

Opmerking: Als de regel die u wilt verplaatsen, in conflict is met een regel in het bestemmingsstijlblad, toont Dreamweaver het

dialoogvenster Regel met dezelfde naam bestaat. Als u besluit om de regel inderdaad te verplaatsen, plaatst Dreamweaver de

verplaatste regel in het bestemmingsstijlblad onmiddellijk naast de regel waarmee het in conflict is.

Zie ook

“Code invoegen met de werkbalk Codering” op pagina 302

CSS-regels verplaatsen naar een nieuwe stijlpagina

1 Ga op een van de volgende manieren te werk:

• Selecteer in het paneel CSS-stijlen de regel of regels die u wilt verplaatsen. Vervolgens klikt u met de rechter muisknop

op de selectie en selecteert u in het menu CSS-regels verplaatsen. Als u meerdere regels wilt selecteren, houdt u tijdens

het klikken van meerdere regels de Control-knop (Windows) of de Command-knop (Macintosh) ingedrukt.

• Selecteer in de codeweergave de regels die u wilt verplaatsen. Vervolgens klikt u met de rechter muisknop op de selectie

en selecteert u in het menu CSS-stijlen> CSS-regels verplaatsen.

Opmerking: De gedeeltelijke selectie van een regel heeft voor resultaat dat de volledige regel opnieuw wordt gelokaliseerd.

DREAMWEAVER CS3

Handboek

134

2 In het dialoogvenster “Verplaatsen naar externe stijlpagina” selecteert u de nieuwe stijlpaginaoptie. Klik vervolgens op OK

3 In het dialoogvenster “Bestand stijlpagina opslaan als” voert u de naam in van de nieuwe stijlpagina. Klik vervolgens op

Opslaan

Wanneer u klikt op Opslaan, slaat Dreamweaver een nieuw stijlblad met de door u geselecteerde regels op en wordt dit als

bijlage aan het huidige document toegevoegd.

UkuntregelstevensverplaatsenmetgebruikvandewerkbalkCodering.DewerkbalkCoderingisuitsluitendbeschikbaar

in de codeweergave.

CSS-regels verplaatsen naar een bestaande stijlpagina

1 Ga op een van de volgende manieren te werk:

• Selecteer in het paneel CSS-stijlen de regel of regels die u wilt verplaatsen. Vervolgens klikt u met de rechter muisknop

op de selectie en selecteert u in het menu CSS-regels verplaatsen. Als u meerdere regels wilt selecteren, houdt u tijdens

het klikken van meerdere regels de Control-knop (Windows) of de Command-knop (Macintosh) ingedrukt.

• Selecteer in de codeweergave de regels die u wilt verplaatsen. Vervolgens klikt u met de rechter muisknop op de selectie

en selecteert u in het menu CSS-stijlen> CSS-regels verplaatsen.

Opmerking: Gedeeltelijke selectie van een regel zal resulteren in verplaatsing van de hele regel.

2 Selecteer in het dialoogvenster Verplaatsen naar extern stijlblad een bestaand stijlblad in het pop-upmenu of blader naar

een bestaand stijlblad en klik op OK.

Opmerking: Het pop-upmenu toont alle stijlbladen die met het huidige document zijn verbonden.

UkuntregelstevensverplaatsenmetgebruikvandewerkbalkCodering.DewerkbalkCoderingisuitsluitendbeschikbaar

in de codeweergave.

CSS-regels opnieuw schikken of verplaatsen door slepen

❖

Selecteer in het paneel CSS-stijlen (modus Alles) een regel en versleep hem naar de gewenste plaats. U kunt regels

selecteren en verslepen om de volgorde van de regels binnen een stijlpagina te wijzigen, of u kunt een regel verplaatsen naar

een andere stijlpagina of naar de kop van een document.

U kunt meer dan een regel tegelijk verplaatsen door de Control-knop (Windows) of de Command-knop (Macintosh)

ingedrukt te houden en meerdere regels te selecteren.

Meerdere regels selecteren vóór het verplaatsen

❖

Houd in het paneel CSS-stijlen de Control-knop (Windows) of de Command-knop (Macintosh) ingedrukt en klik op de

regels die u wilt selecteren.

Inline CSS converteren naar een CSS-regel

In-line sijlen zijn geen aangeraden beste praktijken. U kunt uw CSS schoner en meer geordend maken door inline stijlen te

converteren naar CSS-regels die zich in de koptekst van het document of in een externe stijlpagina bevinden.

1 Selecteer in de codeweergave (Weergave > Code) de hele

2 Klik met de rechter muisknop en selecteer CSS-stijlen> Inline CSS converteren naar regel.

3 Typ in het dialoogvenster Inline CSS conversteren de klassenaam voor de nieuwe regel en ga daarna als volgt te werk:

• Geef een stijlblad op waar de nieuwe CSS-regel moet verschijnen en klik op OK.

• Selecteer de kop van het document als de plaats waar de CSS-regel moet verschijnen en klik op OK

U kunt regels tevens converteren met gebruik van de werkbalk Codering. De werkbalk Codering is uitsluitend beschikbaar

in de codeweergave.

Zie ook

“Code invoegen met de werkbalk Codering” op pagina 302

DREAMWEAVER CS3

Handboek

135

Koppelen naar een externe CSS-stijlpagina

Als u een externe CSS-stijlpagina bewerkt, worden alle aan die CSS-stijlpagina gekoppelde documenten bijgewerkt om deze

bewerkingen door te voeren. U kunt de in een document aangetroffen CSS-stijlen exporteren om zo een nieuwe CSS-

stijlpagina te maken en deze te koppelen aan een externe stijlpagina door de hier gevonden stijlen toe te passen.

U kunt aan uw pagina's elke stijlpagina koppelen, die u maakt of kopieert naar uw site. Daarnaast wordt Dreamweaver

geleverd met kant-en-klare stijlpagina's die automatisch naar uw site kunnen worden verplaatst en kunnen worden

gekoppeld aan uw pagina's.

1 Open het paneel CSS-stijlen op een van de volgende manieren:

• Selecteer Venster > CSS-stijlen.

• Druk op Shift + F11.

2 Klik in het paneel CSS-stijlen op de knop Stijlpagina koppelen. (Deze bevindt zich in de rechterbenedenhoek van het

paneel.)

3 Ga op een van de volgende manieren te werk:

• Klik op Bladeren om naar een externe CSS-stijlpagina te bladeren.

• Typ het pad naar de stijlpagina in het vak Bestand/URL.

4 Selecteer voor Toevoegen als een van de volgende opties:

• Selecteer Koppelen als u een koppeling wilt maken tussen het huidige document en een externe stijlpagina. Hierdoor

maakt u een koppelingslabel

href in de HTML-code en brengt u een verwijzing aan naar de URL waar zich de

gepubliceerde stijlpagina bevindt. Deze methode wordt ondersteund door zowel Microsoft Internet Explorer als

Netscape Navigator.

• U kunt een koppelingslabel niet gebruiken voor het toevoegen van een verwijzing van de ene externe stijlpagina naar de

andere. Als u stijlpagina's wilt nesten, moet u een importinstructie gebruiken. De meeste browsers herkennen tevens

een importinstructie binnen een pagina (i.p.v. gewoon binnen stijlpagina's). Er zijn subtiele verschillen in de manier

waarop conflicterende eigenschappen worden opgelost wanneer er overlappende regels bestaan binnen externe

stijlpagina's die zijn gekoppeld, in vergelijking met die welke naar een pagina zijn geïmporteerd. Selecteer Importeren

als u een externe stijlpagina wilt importeren in plaats van ernaar te koppelen.

5 Geef in het pop-upmenu Media het doelmedium voor de stijlpagina op.

Zie de website van het World Wide Web Consortium op www.w3.org/TR/CSS21/media.html voor meer informatie over

media-afhankelijke stijlpagina's.

6 Klik op de knop Voorvertoning om te controleren of de stijlpagina de gewenste stijlen toepast op de huidige pagina.

Als de toegepaste stijlen niet de stijlen zijn die u verwacht, klikt u op Annuleren om de stijlpagina te verwijderen. De pagina

keert dan terug naar het vorige uiterlijk.

7 Klik op OK.

Zie ook

“Een pagina maken op basis van een Dreamweaver-voorbeeldbestand” op pagina 70

Een CSS-stijlpagina bewerken

Een doorsnee CSS-stijlpagina omvat een of meer regels. U kunt een afzonderlijke regel in een CSS-stijlpagina bewerken

met behulp van het paneel CSS-stijlen of u kunt rechtstreeks in de CSS-stijlpagina werken als dit uw voorkeur heeft.

1 Selecteer in het paneel CSS-stijlen (Venster > CSS-stijlen) de modus Alles.

2 Dubbelklik in het paneel Alle regels op de naam van de stijlpagina die u wilt bewerken.

3 Wijzig in het documentvenster de stijlpagina op de gewenste manier en sla de stijlpagina vervolgens op.

DREAMWEAVER CS3

Handboek

136

CSS-code opmaken

U kunt voorkeuren instellen voor het regelen van de CSS-codeopmaak wanneer u een CSS-regel maakt of bewerkt met

behulp van de Dreamweaver-interface. Bijvoorbeeld: u kunt voorkeuren instellen waardoor alle CSS-eigenschappen op

aparte regels worden geplaatst, blanco regels tussen de CSS-regels worden geplaatst, etc.

Wanneer u voorkeuren instelt voor de CSS-codeopmaak, worden de door u geselecteerde voorkeuren automatisch

toegepast op alle nieuwe CSS-regels die u maakt. Daarnaast kunt u deze voorkeuren eveneens handmatig toepassen op alle

aparte documenten. Dit komt van pas als u een ouder HTML- of CSS-document hebt waarop u opmaak wilt toepassen..

Opmerking: De voorkeuren voor de opmaak voor CSS-codering zijn alleen van toepassing op CSS-regels in externe of

ingebedde stijlbladen (niet op inline stijlen)

Zie ook

“De codeopmaak wijzigen” op pagina 296

Voorkeuren voor CSS-codeopmaak instellen

1 Selecteer Bewerken > Voorkeuren.

2 Selecteer in het dialoogvenster Voorkeuren de categorie Codeopmaak.

3 Klik naast Geavanceerde opmaak op de knop CSS.

4 Selecteer in het dialoogvenster CSS-bronopmaakopties de opties die u wilt laten gelden voor de CSS-broncode. In het

onderstaande voorbeeldvenster wordt een voorbeeld van de CSS weergegeven volgens de opties die u hebt geselecteerd.

Inspringeigenschappen met Dient voor het instellen van de inspringwaarde voor eigenschappen binnen een regel. U kunt

tabs of spaties opgeven.

Iedere eigenschap op een aparte regel Plaatst iedere eigenschap binnen een regel op een aparte regel.

Openingsaccolade op aparte regel Plaatst de openingsaccolade voor een regel op een andere regel dan de kiezer.

Alleen indien meer dan één eigenschap Plaatst regels met één eigenschap op dezelfde regel als de kiezer.

Alle kiezers voor een regel op dezelfde regel Plaatst alle kiezers voor de regel op dezelfde regel.

Blanco regel tussen regels Plaatst een blanco regel tussen de diverse regels.

5 Klik op OK.

Opmerking: Opmaak d.m.v. CSS-code gebruikt tevens de voorkeur voor Regeleindetype die u hebt ingesteld in de categorie

Codeopmaake van het dialoogvenster Voorkeuren.

CSS-code in een CSS-stijlpagina handmatig opmaken

1 Open een CSS-stijlpagina.

2 Selecteer Opdrachten > Bronopmaak toepassen.

De opmaakopties die u hebt ingesteld in de voorkeuren voor de CSS-codeopmaak worden toegepast op het hele document.

Het is niet mogelijk om selecties apart op te maken.

Ingebedde CSS-code handmatig opmaken

1 Open een HTML-pagina met ingebedde CSS in de kop van het document.

2 Selecteer een willekeurig deel van de CSS-code.

3 Selecteer Opdrachten > Bronopmaak toepassen op selectie.

De opmaakopties die u instelt in de voorkeuren voor de CSS-codeopmaak worden toegepast op alle CSS-regels uitsluitend

in de kop van het document.

Opmerking: U kunt Opdrachten > Bronopmaak toepassen selecteren om het hele document op te maken volgens de door u

opgegeven voorkeuren voor codeopmaak.

DREAMWEAVER CS3

Handboek

137

Controleren op problemen met CSS-weergave tussen browsers

De functie BCC (Browser Compatibility Check) dient voor het zoeken naar combinaties van HTML en CSS die problemen

ervaren in bepaalde browsers. Wanneer u een BCC toepast op een geopend bestand, zal Dreamweaver het bestand scannen

en mogelijke problemen met de CSS-weergave rapporteren in het paneel Resultaten. Een vertrouwensclassificatie die wordt

aangegeven door een cirkeltje dat kwart, half of helemaal vol is, duidt op de waarschijnlijkheid van de aanwezigheid van

een bug (een cirkeltje dat 25% gevuld is, duidt op een mogelijk probleem; een volledig gevuld cirkeltje duidt op een

waarschijnlijk probleem). Voor iedere mogelijke bug die wordt gevonden, biedt Dreamweaver tevens een directe koppeling

naar de documentatie over de bug in Adobe CSS Advisor, een website met informatie over bekende problemen met

weergavebugs, en biedt oplossingen voor het repareren ervan.

Als standaardinstelling controleert de BCC-functie op de volgende browsers: Firefox 1.5; Internet Explorer (Windows) 6.0

en 7.0; Internet Explorer (Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 en 9.0; Safari 2.0

Deze functie vervangt de voormalige functie Doelbrowsercontrole (Target Browser Check) maar heeft de CSS-

functionaliteit van die functie behouden. D.w.z. de nieuwe BCC-functie controleert nog steeds de codering in uw

documenten om te zien of er CSS-eigenschappen of -waarden zijn die niet door de doelbrowsers worden ondersteund.

De problemen die zich kunnen voordoen, liggen op drie mogelijke niveaus:

• Een fout duidt op CSS-codering die een ernstig zichtbaar probleem kan veroorzaken in een bepaalde browser, bijv. delen

van een pagina verdwijnen. (Fout is de standaard aanduiding voor browserondersteuningsproblemen; m.a.w. in

sommige gevallen wordt codering met een onbekend effect ook aangeduid als een fout.)

• Een waarschuwing duidt op CSS-codering die niet door een bepaalde browser wordt ondersteund, maar die geen

ernstige weergaveproblemen zal opleveren.

• Een informatiebericht duidt op codering die niet door een bepaalde browser wordt ondersteund, maar die geen zichtbaar

effect heeft.

Controles op browsercompatibiliteit brengen op geen enkele wijze verandering aan in uw documenten

Zie ook

“Tags valideren” op pagina 313

Een browsercompatibiliteitscontrole uitvoeren

❖

Selecteer File > Check Page > Browser Compatibility.

Selecteer het element dat wordt beïnvloed door een aangetroffen kwestie

❖

Dubbeklik op het probleem in het paneel Resultaten

Naar het volgende of vorige gevonden probleem in de code springen

❖

Selecteer Volgend probleem of Vorig probleem uit het menu Controleren of browsercompatibiliteit” in de Document-

werkbalk.

Voor Dreamweaver browsers voor controledoeleinden selecteren

1 Selecteer in het paneel Resultaten (Venster> Resultaten) het tabblad Browsercompatibiliteitcontrole.

2 Klik op de groene pijl in de hoek linksboven van het paneel Resultaten en selecteer Instellingen.

DREAMWEAVER CS3

Handboek

138

3 Selecteer het aankruisvakje naast de browsers die u wilt controleren.

4 Selecteer voor iedere opgegeven browser in het overkomstige pop-upmenu de minimale versie die u wilt controleren.

Bijvoorbeeld: als u wilt controleren of CSS-weergavebugs kunnen verschijnen in Internet Explorer 5.0 en later en Netscape

Navigator 7.0 en later, selecteert u de aankruisvakjes naast de betreffende browsers en selecteert u 5.0 in het pop-upmenu

van Internet Explorer en 7.0 in het pop-upmenu van Netscape.

Een probleem uitsluiten van de browsercompatibiliteitscontrole

1 Voer de test voor browsercompatibiliteit uit.

2 Klik in het paneel Resultaten met de rechter muisknop (Windows) of de Control-knop (Macintosh) op het probleem dat

u van toekomstige controles wilt uitsluiten.

3 Selecteer Probleem negeren in het contextmenu.

De lijst Genegeerde problemen bewerken

1 Selecteer in het paneel Resultaten (Venster> Resultaten) het tabblad Browsercompatibiliteitcontrole.

2 Klik op de groene pijl in de hoek linksboven van het paneel Resultaten en selecteer Lijst genegeerde problemen

bewerken.

3 Zoek in het bestand exceptions.xml naar het probleem dat u uit de lijst Genegeerde problemen wilt verwijderen en

verwijder het.

4 Sla het bestand exceptions.xml op en sluit het.

Een browsercompatibiliteitscontrolerapport opslaan

1 Een browsercompatibiliteitscontrole uitvoeren.

2 Klik op de knop Rapport opslaan aan de linkerkant van het paneel Resultaten.

Houd de muisknop over de knoppen in het paneel Resultaten om voor de knoppen tooltips te zien.

Opmerking: Rapporten worden niet automatisch opgeslagen; als u van een rapport een exemplaar wilt bewaren, volgt u de

bovenstaande procedure om het op te slaan.

Een browsercompatibiliteitscontrolerapport bekijken in een browser

1 Voer de test voor browsercompatibiliteit uit.

2 Klik op de knop Rapport bladeren aan de linkerkant van het paneel Resultaten.

Houd de muisknop over de knoppen in het paneel Resultaten om voor de knoppen tooltips te zien.

Open de website voor Adobe CSS Advisor

1 Selecteer in het paneel Resultaten (Venster> Resultaten) het tabblad Browsercompatibiliteitcontrole.

2 Klik op de koppeling rechtsonder in het paneel.

Design-Time stijlpagina's gebruiken

Met Design-Time stijlbladen kunt u door een CSS-stijlpagina toegepast ontwerp weergeven of verbergen terwijl u in een

Dreamweaver-document werkt. U kunt deze optie bijvoorbeeld gebruiken om het effect van een Macintosh-specifieke of

een Windows-specifieke stijlpagina op te nemen of uit te sluiten, terwijl u een pagina ontwerpt.

Design-Time stijlbladen zijn alleen van toepassing terwijl u in het document werkt; wanneer de pagina wordt weergegeven

in het venster van een browser, worden alleen de stijlen die daadwerkelijk zijn gekoppeld aan of ingebed in het document,

in een browser weergegeven.

Opmerking: U kunt stijlen ook in- of uitschakelen voor een gehele pagina met behulp van de werkbalk Stijl renderen. Als u de

werkbalk wilt weergeven, selecteert u Beeld > Werkbalken > Stijl renderen. De knop Weergave van CSS-stijlen in- of

uitschakelen (de knop uiterst rechts) werkt onafhankelijk van de andere mediaknoppen op de werkbalk.

DREAMWEAVER CS3

Handboek

139

Als u een Design-Time stijlpagina wilt gebruiken, gaat u als volgt te werk.

1 Open het dialoogvenster Design-Time stijlbladen op een van de volgende manieren:

• Klik met de rechtermuisknop in het paneel CSS-stijlen en selecteer in het contextmenu Design-Time.

• Selecteer Tekst > CSS-stijlen > Design-Time.

2 Stel in het dialoogvenster opties in voor het weergeven of verbergen van de geselecteerde stijlpagina:

• Voor het weergeven van een CSS-stijlpagina tijdens de ontwerptijd klikt u op de knop Plus (+) boven Alleen weergeven

tijdens ontwerptijd en bladert u vervolgens in het dialoogvenster Een stijlpagina selecteren naar de CSS-stijlpagina die

u wilt weergeven.

• Voor het verbergen van een CSS-stijlpagina tijdens de ontwerptijd klikt u op de knop Plus (+) boven Verbergen tijdens

ontwerptijd en bladert u vervolgens in het dialoogvenster Een stijlpagina selecteren naar de CSS-stijlpagina die u wilt

verbergen.

• Voor het verwijderen van een stijlpagina uit een van de twee lijsten klikt u op de stijlpagina die u wilt verwijderen, en

klikt u vervolgens op de juiste knop Minus (–).

3 Klik op OK om het dialoogvenster te sluiten.

Het paneel CSS-stijlen wordt mét de namen van geselecteerde stijlpagina's bijgewerkt met een aanduiding "verborgen" of

"ontwerp" om de status van de stijlpagina's te weerspiegelen.

Zie ook

“Overzicht Werkbalk Stijl renderen” op pagina 19

Voorbeeldstijlbladen van Dreamweaver gebruiken

Dreamweaver biedt voorbeeldstijlpagina's die u kunt toepassen op uw pagina's of die u kunt gebruiken als beginpunt voor

het ontwikkelen van uw eigen stijlen.

1 Open het paneel CSS-stijlen op een van de volgende manieren:

• Selecteer Venster > CSS-stijlen.

• Druk op Shift+F11.

2 Klik in het paneel CSS-stijlen op de knop Externe stijlpagina koppelen. (Deze bevindt zich in de rechterbenedenhoek

van het paneel.)

3 klik in het dialoogvenster Externe stijlpagina koppelen op Voorbeeldstijlpagina's.

4 Selecteer in het dialoogvenster Voorbeeldstijlpagina's een stijlpagina in het lijstvak.

Terwijl u stijlpagina's binnen dit lijstvak selecteert, wordt in het paneel Voorvertoning de tekst- en kleuropmaak van de

geselecteerde stijlpagina weergegeven.

5 KlikopdeknopVoorvertoningomdestijlpaginatoetepassenenomtecontrolerenofdestijlpaginadegewenstestijlen

toepast op de huidige pagina.

Als de toegepaste stijlen niet zijn wat u ervan verwacht, selecteert u een andere stijlpagina in de lijst en klikt u op

Voorvertoning om deze stijlen te bekijken.

6 Standaard slaat Dreamweaver de stijlpagina op in een map met de naam CSS net onder de hoofddirectory van de site die

u voor uw pagina hebt gedefinieerd. Als die map niet bestaat, maakt Dreamweaver deze voor u. U kunt het bestand opslaan

op een andere locatie door op Bladeren te klikken en naar een andere map te bladeren.

7 Wanneer u een stijlpagina vindt, waarvan de opmaakregels voldoen aan uw ontwerpcriteria, klikt u op OK.

CSS-stijlpagina's bijwerken op een Contribute-site

Gebruikers van Adobe Contribute kunnen geen wijzigingen aanbrengen in een CSS-stijlblad. Voor het wijzigen van een

stijlpagina voor een Contribute-site gebruikt u Dreamweaver.

1 Bewerk de stijlpagina met behulp van de hulpprogramma's van Dreamweaver voor het bewerken van stijlpagina's.

DREAMWEAVER CS3

Handboek

140

2 Vertel alle gebruikers van Contribute die aan de site werken, om pagina's te publiceren die deze stijlpagina gebruiken, en

om deze pagina's vervolgens opnieuw te bewerken om de nieuwe stijlpagina te bekijken.

U dient de volgende belangrijke factoren in acht te nemen wanneer u stijlpagina's voor een Contribute-site bijwerkt:

• Als u wijzigingen aanbrengt in een stijlpagina terwijl een gebruiker van Contribute een pagina bijwerkt die deze

stijlpagina gebruikt, kan de gebruiker de wijzigingen aan de stijlpagina pas bekijken wanneer de pagina wordt

gepubliceerd.

• Als u een stijl verwijdert uit een stijlpagina, wordt de naam van de stijl name niet verwijderd uit de pagina's die deze

stijlpagina gebruiken, maar aangezien deze stijl niet langer bestaat, wordt deze niet meer weergegeven op de manier die

een gebruiker van Contribute mogelijk verwacht. Als een gebruiker dan ook zegt dat er niets gebeurt wanneer een

bepaalde stijl wordt toegepast, wordt het probleem mogelijk veroorzaakt doordat de stijl is verwijderd uit de stijlpagina.

Pagina's met CSS opmaken

Info over CSS-paginalay-out

Voor de indeling van een CSS-pagina wordt de indeling Cascading Style Sheet gebruikt in plaats van HTML-tabellen of

frames voor het ordenen van de inhoud van een webpagina. Het basiselement van de CSS-lay-out is het label voor het div-

element, een HTML-element dat in de meeste gevallen fungeert als een container voor text, afbeeldingen en andere

paginaelementen. Wanneer u een CSS-lay-out maakt, plaatst u div-elementen op de pagina, voegt u er informatie aan toe

en brengt u ze in bepaalde posities. In tegenstelling tot cellen in een tabel die ergens binnen de rijen of kolommen van een

tabel moeten bestaan, kunnen div-elementen over op een webpagina worden aangebracht U kunt div-elementen absoluut

plaatsen (door de x- en y-coördinaten op te geven) of relatief (door de afstand tot andere paginaelementen op te geven)

Het maken van CSS-lay-outs uit niets kan moeilijk zijn omdat er zoveel manieren bestaan om het te doen. U kunt een

eenvoudige CSS-lay-out met twee kolommen maken door de tekst, marges, vullingen en andere CSS-eigenschappen in te

stellen in bijna een oneindig aantal combinaties. Verder kunnen zich weergaveproblemen voordoen met CSS-lay-outs die

correct worden weergegeven in sommige browsers maar niet in andere. Dreamweaver maakt het samenstellen van pagina’s

met CSS-lay-outs gemakkelijker voor u door te voorzien in meer dan 30 vooraf ontworpen lay-outs die verschillend werken

in verschillende browsers.

Gebruiken van de vooraf ontworpen CSS-lay-outs die bij Dreamweaver worden meegeleverd, is de eenvoudigste manier om

een pagina met een CSS-lay-out te maken. Maar u kunt ook CSS-lay-outs maken met Dreamweaver met elementen die

absoluut zijn gepositioneerd (AP-elementen; Absolutely-Positioned elements). Een AP-element in Dreamweaver is een

HTML-pagina-element—in het bijzonder een

div-label, of een willekeurige andere label—waaraan een absolute positie is

toegewezen. Het nadeel van de AP-elementen van Dreamweaver is echter dat deze absoluut gepositioneerd zijn en daarom

nooit hun positie aanpassen naargelang de grootte van het browservenster.

Geavanceerde gebruikers kunnen eveneens handmatig

div-elementen aanbrengen en er CSS-positiestijlen op toepassen

voor het maken van paginalay-outs.

Zie voor een zelfstudie over het maken van CSS-paginalay-outs www.adobe.com/go/vid0155_nl.

Zie ook

“Werken met labels voor div-elementen” op pagina 156

Info structuur CSS-paginalay-out

Alvorens met deze sectie verder te gaan, dient u bekend te zijn met de basisideeën van CSS.

Het basiselement van de CSS-lay-out is het label voor het div-element, een HTML-element dat in de meeste gevallen

fungeert als een container voor text, afbeeldingen en andere paginaelementen. Het volgende voorbeeld toont een HTML-

paginametdrieapartediv-elementen:ééngroot“containerelement”entweeandereelementen,eenzijvak-elementeneen

element voor de hoofdinformatie binnen het containerelement.

DREAMWEAVER CS3

Handboek

141

A. Containerelement B. Sidebar div C. Element Hoofdinformatie (Main Content)

Hier volgt de codering voor alle drie div-elementen in de HTML:

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus

venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

In het bovenstaande voorbeeld is er geen “stijl” verbonden aan de div-elementen. Als er geen CSS-regels zijn opgegeven,

worden alle div-elementen met hun informatie op de standaard plaats op de pagina aangebracht. Als echter ieder div-

element van een unieke ID is voorzien (zoals in het bovenstaand voorbeeld), kunt u de IDs gebruiken om CSS-regels te

maken zodat deze (als ze worden toegepast) de stijl en de positionering van de div-elementen kunnen wijzigen.

De volgende CSS-regel, die zich in de kop van een document of in een extern CSS-bestand kan bevinden, geeft de stijlregels

voor het eerste div-element (het “containerelement”) op de pagina:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

De #containerregel past een stijl toe op het container-div-element waardoor het een breedte krijgt van 780 pixels, een witte

achtergrond, geen marge (vanaf de linkerkant van de pagina), een vast en zwart kader van 1-pixel en tekst die links is

uitgelijnd. Het resultaat van toepassing van de regel op het container-div-element is als volgt:

DREAMWEAVER CS3

Handboek

142

Container div-label, 780 pixels, geen marge

A. Tekst links uitgelijnd B. Witte achtergrond C. Ononderbroken zwarte rand van 1 pixel

Met de volgende CSS-regel worden stijlregels gemaakt voor de sidebar div-label:

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

Volgens de regel #sidebar krijgt de sidebar div-label een breedte van 200 pixels, een grijze achtergrond, een opvulling boven

en onder van 15 pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. Daarnaast wordt de sidebar

div-label gepositioneerd met float: left—een eigenschap waardoor de sidebar div-label naar de linkerkant van de container

div-label wordt geduwd. Het toepassen van de regel op de sidebar div-label heeft het volgende resultaat:

Sidebar div, links zwevend

A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels

Ten slotte maakt de CSS-regel voor de container div-hoofdlabel de lay-out af:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte

van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div.

Daarnaast zorgt de regel voor een ruimte van 20 pixels aan de rechter-, onder- en linkerkant van de main content-div. Het

toepassen van de regel op de mainContent-div heeft het volgende resultaat:

DREAMWEAVER CS3

Handboek

143

Main Content div, linkermarge van 250 pixels

A. 20 pixels opvulling links B. 20 pixels opvulling rechts C. 20 pixels opvulling onder

De volledige code ziet er zo uit:

<head>

<title>Untitled Document</title>

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

</style>

</head>

<body>

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus

venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</body>

DREAMWEAVER CS3

Handboek

144

Opmerking: Devoorbeeldcodehierboveniseenvereenvoudigdeversievandecodewaarmeedelay-outmettweekolommenen

vastezijbalkwordtgemaaktalsueennieuwdocumentmaaktmetdevoorafontworpenlay-outsdiebijDreamweaverworden

geleverd.

Zie ook

“Wat zijn CSS-stijlpagina's (Cascading Style Sheets)” op pagina 117

Een pagina met een CSS-lay-out maken

Bij het maken van een nieuwe pagina in Dreamweaver kunt u een pagina maken met een CSS-lay-out. Dreamweaver is

beschikbaar met meer dan 300 verschillende CSS-lay-outs waaruit u kunt kiezen. Bovendien kunt u eigen CSS-lay-outs

maken en deze opnemen in de configuratiemap zodat ze verschijnen als lay-outkeuze in het dialoogvenster Nieuw

document.

Dreamweaver CSS-lay-outs worden goed weergegeven in onderstaande browsers: Firefox (Windows en Macintosh) 1.0 en

1.5; Internet Explorer (Windows) 5.5, 6.0, 7.0; Internet Explorer (Macintosh) 5.2; Opera (Windows en Macintosh) 8.0, 9,0;

en Safari 2.0.

Zie ook

“Een lege pagina maken” op pagina 66

“Standaardocumenttype en -codering instellen” op pagina 70

“Koppelen naar een externe CSS-stijlpagina” op pagina 135

Een pagina met een CSS-lay-out maken

1 Selecteer Bestand > Nieuw.

2 In het dialoogvenster Nieuw document selecteert u de categorie Blanco pagina. (Dit is de standaardkeuze.)

3 Als Paginatype selecteert u het soort pagina dat u wenst te maken.

Opmerking: U moet een HTML-paginatype kiezen voor de lay-out. U kunt bijvoorbeeld HTML, ColdFusion®, JSP enzovoort

selecteren. U kunt geen ActionScript™-, CSS-, Library Item-, JavaScript-, XML-, XSLT- of ColdFusion Component-pagina met

een CSS-indeling maken. De paginatypes in Andere categorie van het dialoogvenster Nieuw document kunnen eveneens geen

CSS-paginalay-outs bevatten.

4 Bij Lay-out kiest u de CSS-lay-out die u wenst te gebruiken. U kunt kiezen uit meer dan 30 verschillende lay-outs. Het

venster Beeld toont de lay-out en geeft een korte omschrijving van de gekozen lay-out.

De vooraf ontworpen CSS-indelingen bieden de volgende typen kolommen:

Vast De kolombreedte is opgegeven in pixels. De kolom wordt niet groter of kleiner op basis van de grootte van de browser

of de tekstinstellingen van de bezoeker van de site.

Elastic De kolombreedte wordt opgegeven in een maateenheid (ems) die relatief is ten opzichte van de grootte van de tekst.

De breedte wordt automatisch aangepast als de bezoeker van de site de tekstinstellingen wijzigt, maar wordt niet gewijzigd

op basis van de grootte van het browservenster.

Liquid De kolombreedte wordt opgegeven als een percentage van de breedte van het browservenster van de bezoeker van

de site. De kolombreedte wordt automatisch aangepast als de bezoeker van de site de browser breder of smaller maakt, maar

wordt niet aangepast als de bezoeker van de site de tekstinstellingen wijzigt.

Hybrid Voor kolommen worden de vorige drie opties gecombineerd. De uit twee hybride kolommen bestaande indeling

met een zijbalk aan de rechterkant, heeft bijvoorbeeld een hoofdkolom waarvan de grootte wordt aangepast aan de grootte

van het browservenster, en rechts daarvan een elastische kolom waarvan de grootte wordt aangepast aan de

tekstinstellingen van de bezoeker van de site.

5 Selecteer een documenttype uit het pop-upmenu DocType.

DREAMWEAVER CS3

Handboek

145

6 Selecteer een locatie voor de CSS van de lay-out uit Layout CSS in het pop-upmenu.

Toevoegen aan kop Hiermee wordt CSS voor de indeling toegevoegd aan de kop van de pagina die u maakt.

Nieuw bestand maken Voegt CSS voor de lay-out toe aan een nieuwe externe CSS stylesheet en voegt de nieuwe stylesheet

bij de pagina die u creëert.

Koppeling naar bestaand bestand Hiermee kunt u een bestaand CSS-bestand opgeven dat reeds de CSS-regels bevat die

nodig zijn voor de indeling. Deze optie is vooral handig wanneer u dezelfde CSS-indeling (de CSS-regels die zich in één

bestand bevinden) voor meerdere documenten wilt gebruiken.

7 Ga op een van de volgende manieren te werk:

• Indien u in het pop-upvenster CSS-lay-out hebt gekozen voor Toevoegen aan koptekst (de standaard optie), klikt u op

Maken.

• Indien u in het pop-upvenster CSS-lay-out hebt gekozen voor Nieuw bestand maken, klikt u op Maken en voert u de

naam in van het nieuwe externe bestand in het dialoogvenster Stijlpaginabestand opslaan als.

• Indien u in het pop-upvenster CSS-lay-out het gekozen voor Koppeling met een bestaand bestand, voegt u het externe

bestand toe in het tekstvak CSS-bestand koppelen door op het pictogram Stijlpagina toevoegen te klikken, het

dialoogvenster Externe stijlpagina koppelen in te vullen en op OK te klikken. Wanneer u klaar bent, klikt u in het

dialoogvenster Nieuw document op Maken.

Opmerking: Wanneer u ervoor kiest om de optie Koppelen naar bestaand bestand te gebruiken, moet het bestand dat u

aangeeft reeds de regels bevatten voor het CSS-bestand dat erin zit vervat.

Wanneer u de CSS-lay-out in een nieuw bestand plaatst of koppelt naar een bestaand bestand, Dreamweaver wordt het

bestand automatisch gekoppeld aan de HTML-pagina die u aan het maken bent.

Opmerking: Internet Explorer voorwaardelijk commentaar (conditional comments - CCs), die kan helpen om IE-

weergaveproblemen op te lossen, blijven ingebouwd zitten in de kopregel van de nieuwe CSS-lay-out, ook waneer u kiest voor

een Nieuw extern bestand of een Bestaand extern bestand als locatie voor uw CSS-lay-out.

8 (Optioneel) U kunt ook CSS-stijlpagina's aan uw nieuwe pagina koppelen (los van de CSS-indeling) wanneer u de pagina

maakt. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster Attach CSS file en selecteer een CSS-

stijlpagina.

Eigen CSS-lay-outs toevoegen aan de keuzelijst

1 Maak een HTML-pagina die de CSS-lay-out bevat die u wenst toe te voegen aan de keuzelijst in het dialoogvenster

Nieuw document. De CSS voor de lay-out moet zijn opgenomen in de kopregel van de HTML-pagina.

Om uw eigen CSS-lay-out consistent te houden met de andere lay-outs, die erop betrekking hebben Dreamweaver, moet u

uw HTML-bestand opslaan met een extensie .htm.

2 Voeg de HTML-pagina toe aan de map CS3\Configuration\BuiltIn\Layouts van Adobe Dreamweaver.

3 (Optioneel) Voeg een afdrukvoorbeeld van uw lay-out (bijvoorbeeld een .gif- of een .png-bestand) toe aan de map

CS3\Configuration\BuiltIn\Layouts van Adobe Dreamweaver. De standaard afbeeldingen die bij Dreamweaver zijn

meegeleverd zijn .png-bestanden van 227 pixels breed op 193 pixels hoog.

Geef uw afdrukvoorbeeld dezelfde bestandsnaam als u HTML-bestand zodat u ze gemakkelijk kunt terugvinden. Als u

HTML-bestand bijvoorbeeld mijnLayout.htm is genoemd, sla uw afdrukvoorbeeld dan op onder de naam mijnLayout.png.

4 (Optioneel) Maak een opmerkingenbestand voor uw eigen lay-out door de map

CS3\Configuration\BuiltIn\Layouts\_notes van Adobe Dreamweaver te openen. Kopieer en plak een bestaand

opmerkingenbestand en dezelfde map en hernoem de kopie voor uw eigen lay-out. Zo kunt u bijvoorbeeld het bestand

oneColElsCtr.htm.mno kopiëren en het hernoemen naar mijnLayout.htm.mno.

5 (Optioneel) Nadat u een opmerkingenbestand hebt gemaakt voor uw eigen lay-out, kunt u het bestand openen en geeft

u de lay-outnaam, de omschrijving en het afdrukvoorbeeld aan.

DREAMWEAVER CS3

Handboek

146

Info over AP-elementen in Dreamweaver

Een AP-element (absoluut gepositioneerd element) is een HTML-pagina-element—in het bijzonder een label voor een div-

element of elke andere label—waaraan een absolute positie is toegewezen. AP-elementen kunnen tekst, afbeeldingen of elke

andere inhoud bevatten, die u in de hoofdtekst van een HTML-document kunt plaatsen.

Met Dreamweaver kunt u AP-elementen gebruiken om uw pagina op te maken. U kunt AP-elementen voor en achter elkaar

plaatsen, bepaalde AP-elementen verbergen terwijl andere juist worden weergegeven, en AP-elementen over het scherm

verplaatsen. U kunt een achtergrondafbeelding plaatsen in één AP-element en vervolgens vóór dat eerste AP-element een

tweede AP-element plaatsen, dat tekst met een transparante achtergrond bevat.

AP-elementen bestaan doorgaans uit absoluut gepositioneerde labels voor div-elementen. (Dit is het soort AP-elementen

dat Dreamweaver standaard invoegt. Maar onthoud dat u elk HTML-element (bijvoorbeeld een afbeelding) als AP-element

kunt aanmerken door er een absolute positie aan toe te wijzen. Alle AP-elementen (niet alleen absoluut gepositioneerde

labels voor div-elementen) komen in het paneel AP-elementen te staan.

HTML-code voor AP Div-elementen

Dreamweaver maakt AP-elementen met behulp van de div tag. Als u een AP-element invoegt met behulp van het

gereedschap AP Div tekenen, voegt Dreamweaver de label voor een

div-element in het document in en wijst aan het div-

element een id-waarde toe (standaard apDiv1 voor het eerste div-element dat u invoegt, apDiv2 voor het tweede div-

element dat u invoegt, enzovoort). Later kunt u de naam van het AP Div-element wijzigen in wat u maar wilt, met behulp

van het paneel AP-elementen of de eigenschappencontrole. Dreamweaver gebruikt tevens ingebedde CSS in de kop van het

document voor het positioneren van de AP Div en voor het bepalen van de juiste afmetingen van de AP Div.

Hieronder volgt als voorbeeld HTML-code voor een AP Div-element:

<head>

<title>Sample AP Div Page</title>

<!--

#apDiv1 {

position:absolute;

left:62px;

top:67px;

width:421px;

height:188px;

z-index:1;

}

-->

</style>

</head>

<body>

</div>

</body>

</html>

U kunt eigenschappen van AP Div-elementen (of van elke AP-element) op uw pagina wijzigen, inclusief x- en y-

coördinaten, de z-index (ook wel de stapelvolgorde genoemd) en de zichtbaarheid.

Een AP-laag invoegen

Met Dreamweaver kunt u eenvoudig AP Div-elementen maken en positioneren op uw pagina. Ook kunt u geneste AP Div-

elementen maken.

Wanneer u een AP-div invoegt, toont Dreamweaver standaard een omtrek van het AP-div in de ontwerpweergave en wordt

het blok waarover u de aanwijzer plaatst gemarkeerd. Schakel de opties Omtrek van AP-elementen en Omtrek van CSS-lay-

out uit in het menu Weergave> Visuele hulpmiddelen. Hierdoor schakelt u het visuele hulpmiddel uit waarmee de omtrek

van een AP-div (of een andere AP-element) getoond wordt. Tevens kunt u achtergronden en het kadermodel voor AP-

elementen inschakelen als visueel hulpmiddel tijdens het ontwerpen.

DREAMWEAVER CS3

Handboek

147

Nadat u een AP Div-element hebt gemaakt, kunt u inhoud eraan toevoegen door gewoon uw invoegpositie in het AP Div-

element te plaatsen en vervolgens inhoud toe te voegen zoals u inhoud zou toevoegen aan een pagina.

Zie ook

“AP-elementen selecteren” op pagina 152

“De markeringskleur van labels voor div-elementen wijzigen” op pagina 158

“CSS-lay-outblokken visualiseren” op pagina 158

Eén AP Div-element of meerdere AP Div-elementen na elkaar tekenen

1 Klik in de categorie Lay-out van de invoegbalk op de knop AP-div Tekenen .

2 Voer een van de volgende handelingen uit in het documentvenster:

• Sleep om één AP Div-element te tekenen.

• Sleep de muis terwijl u Control (Windows) of Command (Macintosh) ingedrukt houdt, om meerdere AP Div-

elementen achter elkaar te tekenen.

U kunt nieuwe AP Div-elementen blijven tekenen zolang u de toets Control of Command niet loslaat.

Een AP Div-element invoegen op een bepaalde plaats in het document

❖

Plaats de invoegpositie in het documentvenster en selecteer vervolgens Invoegen > Lay-outobjecten > AP Div.

Opmerking: Deze procedure plaatst de label voor het AP Div-element op de plaats waar u in het documentvenster klikte. De

visuele weergave van het AP Div-element kan op deze manier invloed uitoefenen op andere pagina-elementen (zoals tekst) die

eromheen staan.

De invoegpositie in een AP Div-element plaatsen

❖

Klik op een willekeurige plaats binnen de randen van het AP Div-element.

De randen van het AP Div-element worden gemarkeerd en de selectiegreep wordt weergegeven, maar het AP Div-element

zelf wordt niet geselecteerd.

Randen van AP Div-elementen tonen

❖

Selecteer Beeld > Visuele hulpmiddelen en selecteer Omtrek van AP Div-element of Omtrek van CSS-lay-out.

Opmerking: Het gelijktijdig selecteren van beide opties heeft hetzelfde effect.

Randen van AP Div-elementen verbergen

❖

Selecteer Beeld > Visuele hulpmiddelen and schakel de selectie van zowel Omtrek van AP Div-element als Omtrek van

CSS-lay-out uit.

Werken met geneste AP Div-elementen

Een genest AP Div-element is een AP Div-element waarvan de code is ingesloten in de labels van een ander AP Div-

element. Zo toont de volgende code twee AP Div-elementen die niet zijn genest, en twee AP Div-elementen die wel zijn

genest:

</div>

DREAMWEAVER CS3

Handboek

148

De grafische weergave van een van beide sets AP Div-elementen zou er als volgt kunnen uitzien:

In de eerste set labels voor div-elementen staat het ene div-element boven aan de pagina. In de tweede set staat het div-

element apDiv4 in feite binnen het div-element apDiv3. (U kunt de stapelvolgorde van AP Div-elementen wijzigen in het

paneel AP-elementen.)

Nesten wordt vaak gebruikt om AP Div-elementen samen te groeperen. Een genest AP Div-element wordt met het

bovenliggende AP Div-element verplaatst en kan dusdanig worden ingesteld dat de zichtbaarheid wordt overgenomen van

het bovenliggende element.

U kunt de optie Nesten inschakelen om automatisch te nesten wanneer u een AP Div-element tekent, dat binnen een ander

AP Div-element staat. Als u binnen of over een ander AP Div-element wilt tekenen, dient u de optie Overlappingen

voorkomen uit te schakelen.

Een genest AP Div-element tekenen

1 Controleer of de optie Overlapping van AP-elementen voorkomen niet geselecteerd is in het paneel AP-elementen

(Venster > AP-elementen).

2 Klik in de categorie Lay-out van de invoegbalk op de knop AP-div Tekenen .

3 Sleep in ontwerpweergave van het documentvenster een AP Div-element een bestaand AP Div-element in.

Als Nesten is uitgeschakeld in de voorkeuren van AP-elementen, sleept u met de toets Alt (Windows) of Option

(Macintosh) ingedrukt om een AP Div-element binnen een bestaand AP Div-element te nesten.

Geneste AP Div-elementen kunnen er in verschillende browsers anders uitzien. Als u geneste AP Div-elementen maakt,

controleert u tijdens de ontwerpfase regelmatig hun uiterlijk in verschillende browsers.

Een genest AP Div-element invoegen

1 Zorg ervoor dat Overlappingen voorkomen is uitgeschakeld.

2 Plaats de invoegpositie binnen een bestaand AP Div-element in de ontwerpweergave van het documentvenster en

selecteer vervolgens Invoegen > Lay-outobjecten > AP Div.

Een bestaand AP-element binnen een ander nesten met behulp van het paneel AP-elementen

1 Selecteer Venster > AP-elementen om het paneel AP-elementen te openen.

2 Selecteer een AP-element in het paneel AP-elementen en sleep het AP-element terwijl u Control (Windows) of

Command (Macintosh) ingedrukt houdt, naar het doel-AP-element in het paneel AP-elementen.

3 Laat de muisknop los wanneer de naam van het doel-AP-element wordt gemarkeerd.

AP Div-elementen automatisch nesten bij het tekenen van een AP Div-element binnen een ander AP Div-element

❖

Selecteer de optie Nesten in de voorkeuren van AP-elementen.

DREAMWEAVER CS3

Handboek

149

Voorkeuren van AP-elementen weergeven of instellen

Gebruik de categorie AP-elementen in het dialoogvenster Voorkeuren om de standaardinstellingen op te geven voor

nieuwe AP-elementen die u maakt.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer AP-elementen in de lijst Categorie aan de linkerzijde, geef een van de volgende voorkeuren op en klik

vervolgens op OK.

Zichtbaarheid Hiermee bepaalt u of AP-elementen standaard zichtbaar zijn. De opties zijn default (Standaard), inherit

(Overnemen), visible (Zichtbaar) en hidden (Verborgen).

Breedte en Hoogte Specify a default width and height (in pixels) for AP elements you create using Insert > Layout Objects

> AP Div.

Achtergrondkleur Hiermee bepaalt u de standaardachtergrondkleur. Selecteer een kleur in de kleurkiezer.

Achtergrondafbeelding Hiermee bepaalt u een standaardachtergrondafbeelding. Klik op Bladeren om het

afbeeldingsbestand op uw computer te vinden.

Nesten: Nesten indien gemaakt binnen een absoluut gepositioneerd div-element Hiermee bepaalt u of een AP Div-

element dat u begint te tekenen vanaf een punt binnen de grenzen van een bestaand AP Div-element, een genest AP Div-

element moet zijn. Houd Alt (Windows) of Option (Macintosh) ingedrukt om deze instelling tijdelijk te wijzigen terwijl u

een AP Div-element tekent.

Compatibiliteit met Netscape 4: Formaatcorrectie uitvoeren bij het invoegen van een AP-element Hiermee voegt u

JavaScript-code in in de inhoud van de kop van het document in om een bekend probleem in Netscape 4-browsers op te

lossen, waardoor AP-elementen hun positioneringscoördinaten verliezen wanneer een bezoeker het formaat van het

venster van een browser wijzigt.

Door het JavaScript wordt de pagina opnieuw geladen telkens wanneer het formaat van het browservenster wordt gewijzigd,

waarbij de AP-elementen opnieuw de juiste positie wordt toegewezen. U kunt de JavaScript-code ook handmatig toevoegen

of verwijderen door de selectie van Opdrachten > Oplossen voor formaat wijzigen voor Netscape toevoegen/verwijderen.

Eigenschappen van één AP-element weergeven of instellen

Als u een AP-element selecteert, geeft de eigenschappencontrole AP-elementeigenschappen weer.

1 Selecteer een AP-element.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek als er nog

niets is uitgevouwen, om alle eigenschappen te zien.

3 Stel vervolgens de volgende opties naar wens in:

CSS-p-element Hiermee geeft u een id op voor het geselecteerde AP-element. De id duidt het AP-element aan in het paneel

AP-elementen en in JavaScript-code.

Gebruik alleen standaard alfanumerieke lettertekens; gebruik geen speciale tekens zoals spaties, afbreekstreepjes, slashes of

punten. Elk AP-element moet een eigen unieke id hebben.

Opmerking: De CSS-p-eigenschappencontrole biedt dezelfde opties voor relatief gepositioneerde elementen.

L en T (left (links) en top (boven)) Hiermee geeft u de positie van de linkerbovenhoek van het AP-element op, relatief ten

opzichte van de linkerbovenhoek van de pagina of van het bovenliggende AP-element, indien het is genest.

B en H Hiermee geeft u de breedte en hoogte van het AP-element op.

DREAMWEAVER CS3

Handboek

150

Opmerking: Als de inhoud van het AP-element de opgegeven grootte overschrijdt, wordt de onderrand van het AP-element

(zoals deze wordt weergegeven in de ontwerpweergave in Dreamweaver) uitgestrekt om de volledige inhoud te kunnen bevatten.

(De onderrand wordt niet uitgestrekt wanneer het AP-element in een browser wordt weergegeven, tenzij de eigenschap

Overloop wordt ingesteld op Zichtbaar.)

De standaardeenheid voor positie en grootte is pixels (px). U kunt echter ook de volgende eenheden opgeven: pc (pica's),

pt (punten), in (inches), mm (millimeters), cm (centimeters) of % (percentage van de overeenkomstige waarde van het

bovenliggende AP-element). De afkortingen moeten zonder spatie op de waarde volgen: Bijvoorbeeld, 3mm geeft 3

millimeter aan.

Z-index Hiermee bepaalt u de Z-index, of stapelvolgorde, van het AP-element.

In een browser worden AP-elementen met een hoger nummer vóór AP-elementen met een lager nummer weergegeven.

Waarden kunnen positief of negatief zijn. De stapelvolgorde van AP-elementen kan gemakkelijker worden gewijzigd met

behulp van het paneel AP-elementen, in plaats van specifieke waarden voor de Z-index op te geven.

Vis Hiermee geeft u aan of het AP-element aanvankelijk zichtbaar ("visible") is of niet. Kies een van de volgende opties:

• Met Standaard wordt geen zichtbaarheidseigenschap opgegeven. Wanneer er geen zichtbaarheid is opgegeven,

gebruiken de meeste browsers Overnemen als standaardwaarde.

• Met Overnemen wordt de zichtbaarheidseigenschap van het bovenliggende element van het AP-element gebruikt.

• Met Zichtbaar wordt de inhoud van het AP-element weergegeven, ongeacht de waarde van het bovenliggende element.

• Met Verborgen wordt de inhoud van het AP-element verborgen, ongeacht de waarde van het bovenliggende element.

Gebruik een scripttaal, zoals JavaScript, om de zichtbaarheidseigenschap te bepalen en om de inhoud van AP-elementen

dynamisch weer te geven.

Achtergrondafbeelding Hiermee geeft u een achtergrondafbeelding voor het AP-element op.

Klik op het pictogram voor de map waarnaar u gaat bladeren, en selecteer een afbeeldingsbestand.

Achtergrondkleur Hiermee geeft u een achtergrondkleur van het AP-element op.

Laat deze optie leeg om een transparante achtergrond op te geven.

Klasse Hiermee geeft u de CSS-klasse voor de stijl van het AP-element op.

Overloop Hiermee bepaalt u hoe AP-elementen er in een browser uitzien wanneer de inhoud de opgegeven grootte van het

AP-element overschrijdt.

Met Zichtbaar geeft u aan dat de extra inhoud in het AP-element wordt weergegeven; in feite wordt het AP-element

uitgestrekt om de extra inhoud te kunnen bevatten. Met Verborgen geeft u aan dat de extra inhoud niet in de browser wordt

weergegeven. Met Schuiven geeft u aan dat de browser schuifbalken aan het AP-element moet toevoegen, ongeacht of deze

nodig zijn of niet. Met Auto geeft de browser alleen schuifbalken voor het AP-element weer wanneer dit nodig is (d.z.w.

wanneer de inhoud van het AP-element de grenzen van het element overschrijdt).

Opmerking: De optie

Overloop wordt nogal wisselend in browsers ondersteund.

Uitknippen Hiermee definieert u het zichtbare gebied van een AP-element.

Geef de linker-, boven-, rechter- en ondercoördinaten op om een rechthoek te definiëren in het coördinatengebied van het

AP-element (waarbij wordt geteld vanaf de linkerbovenhoek van het AP-element). Het AP-element wordt "uitgeknipt",

zodat alleen de opgegeven rechthoek zichtbaar is. Als u bijvoorbeeld de inhoud van een AP-element onzichtbaar wilt

maken, met uitzondering van een zichtbare rechthoek in de linkerbovenhoek van het AP-element van 50 pixels breed en

75 pixels hoog, stelt u L (links) in op 0, T (boven) op 0, R (rechts) op 50, en B (onder) op 75.

Opmerking: Hoewel CSS verschillende betekenissen hecht aan "clip" (uitknippen), interpreteert Dreamweaver een "clip" op

dezelfde wijze als de meeste browsers dat doen.

4 Als u een waarde in een tekstvak hebt opgegeven, drukt u op Tab of Enter (Windows) of op Return (Macintosh) om de

waarde toe te passen.

DREAMWEAVER CS3

Handboek

151

Eigenschappen van meerdere AP-elementen weergeven of instellen

Wanneer u twee of meer AP-elementen selecteert, geeft de eigenschappencontrole teksteigenschappen en een subset van de

volledige AP-elementeigenschappen weer, waardoor u verschillende AP-elementen tegelijk kunt wijzigen.

Meerdere AP-elementen selecteren

❖

Houd de Shift-toets ingedrukt tijdens de selectie van AP-elementen.

Eigenschappen van meerdere AP-elementen weergeven en instellen

1 Selecteer meerdere AP-elementen.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek als er nog

niets is uitgevouwen, om alle eigenschappen te zien.

3 Stel een of meer van de volgende eigenschappen van meerdere AP-elementen in:

L en T (left (links) en top (boven)) Hiermee geeft u de positie van de linkerbovenhoek van de AP-elementen aan, relatief ten

opzichte van de linkerbovenhoek van de pagina of van het bovenliggende AP-element, indien het is genest.

B en H Hiermee geeft u de breedte en hoogte van de AP-elementen op.

Opmerking: Als de inhoud van een AP-element de opgegeven grootte overschrijdt, wordt de onderrand van het AP-element

(zoals deze wordt weergegeven in de ontwerpweergave in Dreamweaver) uitgestrekt om de volledige inhoud te kunnen bevatten.

(De onderrand wordt niet uitgestrekt wanneer het AP-element in een browser wordt weergegeven, tenzij de eigenschap

Overloop wordt ingesteld op Zichtbaar.)

De standaardeenheid voor positie en grootte is pixels (px). U kunt echter ook de volgende eenheden opgeven: pc (pica's),

pt (punten), in (inches), mm (millimeters), cm (centimeters) of % (percentage van de overeenkomstige waarde van het

bovenliggende AP-element). De afkortingen moeten zonder spatie op de waarde volgen: Bijvoorbeeld, 3mm geeft 3

millimeter aan.

Vis Hiermee geeft u aan of de AP-elementen aanvankelijk zichtbaar ("visible") zijn of niet. Kies een van de volgende opties:

• Met Standaard wordt geen zichtbaarheidseigenschap opgegeven. Wanneer er geen zichtbaarheid is opgegeven,

gebruiken de meeste browsers Overnemen als standaardwaarde.

• Met Overnemen wordt de zichtbaarheidseigenschap van het bovenliggende element van de AP-elementen gebruikt.

• Met Zichtbaar wordt de inhoud van de AP-elementen weergegeven, ongeacht de waarde van het bovenliggende element.

• Met Verborgen wordt de inhoud van het AP-element verborgen, ongeacht de waarde van het bovenliggende element.

Gebruik een scripttaal, zoals JavaScript, om de zichtbaarheidseigenschap te bepalen en om de inhoud van AP-elementen

dynamisch weer te geven.

Tag Hiermee geeft u de HTML-label op die wordt gebruikt voor het definiëren van de AP-elementen.

Achtergrondafbeelding Hiermee geeft u een achtergrondafbeelding voor de AP-elementen op.

Klik op het pictogram voor de map waarnaar u gaat bladeren, en selecteer een afbeeldingsbestand.

Achtergrondkleur Hiermee geeft u een achtergrondkleur van de AP-elementen op. Laat deze optie leeg om een

transparante achtergrond op te geven.

4 Als u een waarde in een tekstvak hebt opgegeven, drukt u op Tab of Enter (Windows) of op Return (Macintosh) om de

waarde toe te passen.

DREAMWEAVER CS3

Handboek

152

Overzicht van het paneel AP-elementen

U gebruikt het paneel AP-elementen (Venster > AP-elementen) voor het beheer van de AP-elementen in uw document.

Gebruik het paneel AP-elementen om overlappingen te voorkomen, om de zichtbaarheid van AP-elementen te wijzigen,

om AP-elementen te nesten of te stapelen en om een of meer AP-elementen te selecteren.

Opmerking: Een AP-element in Dreamweaver is een HTML-pagina-element—in het bijzonder een

div-label, of een

willekeurige andere label—waaraan een absolute positie is toegewezen. Het paneel AP-elementen geeft geen relatief

gepositioneerde elementen weer.

AP-elementen worden weergegeven als een lijst namen, in de volgorde van de Z-index; standaard staat het eerst gemaakte

AP-element (met een Z-index van 1) onder aan de lijst, terwijl het meest recent gemaakte AP-element boven aan de lijst

staat. U kunt de Z-index van een AP-element echter wijzigen door de plaats ervan in de stapelvolgorde te wijzigen. Als u

bijvoorbeeld acht AP-elementen maakt en als u het vierde AP-element wilt verplaatsen naar de bovenste positie, kunt u dit

element een hoger nummer voor de Z-index geven dan de andere.

AP-elementen selecteren

U kunt een of meerdere AP-elementen selecteren om ze te manipuleren of om hun eigenschappen te wijzigen.

Een AP-element selecteren in het paneel AP-elementen

❖

Klik in het paneel AP-elementen (Venster > AP-elementen) op de naam van het AP-element.

Een AP-element selecteren in het documentvenster

❖

Ga op een van de volgende manieren te werk:

• Klik op de selectiegreep van een AP-element.

Als de selectiegreep niet zichtbaar is, klikt u op een willekeurige plaats binnen het AP-element om de greep zichtbaar te

maken.

• Klik op de rand van een AP-element.

• Druk op Control-Shift (Windows) of Command-Shift (Macintosh) en klik tegelijkertijd binnen een AP-element.

• Klik binnen een AP-element en druk op Control+A (Windows) of Command+A (Macintosh) om de inhoud van het AP-

element te selecteren. Druk opnieuw op Control+A of Command+A om het AP-element te selecteren.

• Klik binnen een AP-element en selecteer de label ervan in de labelkiezer.

Meerdere AP-elementen selecteren

❖

Ga op een van de volgende manieren te werk:

• Houd de Shift-toets ingedrukt en klik in het paneel AP-elementen (Venster > AP-elementen) op twee of meer AP-

elementnamen.

• Houd de Shift-toets ingedrukt en klik in het documentvenster binnen, of op de rand van, twee of meer AP-elementen.

De stapelvolgorde van AP-elementen wijzigen

Gebruik de eigenschappencontrole of het paneel AP-elementen om de stapelvolgorde van AP-elementen te wijzigen. Het

AP-element boven aan de lijst van het paneel AP-elementen staat op de eerste plaats van de stapelvolgorde en verschijnt

vóór de andere AP-elementen.

In HTML-code bepaalt de stapelvolgorde, oftewel de Z-index, van de AP-elementen de volgorde waarin ze een browser

worden binnengetrokken. Hoe hoger de Z-index van een AP-element, des te hoger de plaats van dat AP-element in de

stapelvolgorde. U kunt de Z-index van elk AP-element wijzigen met behulp van het paneel AP-elementen of de

eigenschappencontrole.

De stapelvolgorde van AP-elementen wijzigen met behulp van het paneel AP-elementen

1 Selecteer Venster > AP-elementen om het paneel AP-elementen te openen.

2 Sleep een AP-element naar boven of beneden naar de gewenste stapelvolgorde.

DREAMWEAVER CS3

Handboek

153

Terwijl u het AP-element verplaatst, verschijnt er een lijn die aangeeft waar het AP-element komt te staan. Laat de

muisknop los wanneer de plaatsingslijn op de gewenste plaats in de stapelvolgorde verschijnt.

De stapelvolgorde van AP-elementen wijzigen met behulp van de eigenschappencontrole

1 Selecteer Venster > AP-elementen om het paneel AP-elementen te openen om de huidige stapelvolgorde te bekijken.

2 Selecteer een AP-element in het paneel AP-elementen of in het documentvenster.

3 Typ in de eigenschappencontrole (Venster > Eigenschappen) een getal in het tekstvak Z-index.

• Typ een hoger getal om het AP-element naar een hogere plaats in de stapelvolgorde te verplaatsen.

• Typ een lager getal om het AP-element naar een lagere plaats in de stapelvolgorde te verplaatsen.

AP-elementen tonen en verbergen

Terwijl u in uw document aan het werk bent, kunt u handmatig AP-elementen tonen en verbergen met behulp van het

paneel AP-elementen om te zien hoe de pagina er onder verschillende omstandigheden uit komt te zien.

Opmerking: Het op dat moment geselecteerde AP-element wordt altijd zichtbaar en verschijnt vóór andere AP-elementen

terwijl het is geselecteerd.

Zichtbaarheid van AP-elementen wijzigen

1 Selecteer Venster > AP-elementen om het paneel AP-elementen te openen.

2 Klik in de kolom met het pictogram van het oog om de zichtbaarheid van een AP-element te wijzigen.

• Een open oog betekent dat het AP-element zichtbaar is.

• Een gesloten oog betekent dat het AP-element onzichtbaar is.

• Als er geen pictogram van een oog is, neemt het AP-element doorgaans de zichtbaarheid over van het bovenliggende

element ervan. (Wanneer AP-elementen niet zijn genest, bestaat het bovenliggende element uit het element body van

het document, dat altijd zichtbaar is.)

Ook verschijnt er geen pictogram van een oog als er geen zichtbaarheid is opgegeven (hetgeen in de eigenschappencontrole

wordt weergegeven als Standaard zichtbaarheid).

De zichtbaarheid van alle AP-elementen tegelijk wijzigen

❖

Klik in het paneel AP-elementen (Venster > AP-elementen) op pictogram van een oog in de kop boven aan de kolom.

Opmerking: Via deze procedure kunt alle AP-elementen wel instellen op Zichtbaar of Verborgen, maar niet op Overnemen.

AP-elementen groter of kleiner maken

U kunt een afzonderlijk AP-element groter of kleiner maken, of u kunt meerdere AP-elementen tegelijkertijd groter of

kleiner maken om ze dezelfde hoogte en breedte te geven.

Als de optie Overlappingen voorkomen is ingeschakeld, kunt u een AP-element niet dusdanig groter of kleiner maken dat

het overlapt met een ander AP-element.

Zie ook

“Het lay-outraster gebruiken” op pagina 168

Een AP-element groter of kleiner maken

1 Selecteer in de ontwerpweergave een AP-element.

2 Voer een van de volgende handelingen uit om het AP-element groter of kleiner te maken:

• Als u groter of kleiner wilt maken door middel van slepen, sleept u een willekeurige formaatgreep van het AP-element.

• Als u groter of kleiner wilt maken met één pixel tegelijk, houdt u Control (Windows) of Option (Macintosh) ingedrukt

terwijl u op een pijltoets drukt.

DREAMWEAVER CS3

Handboek

154

Met de pijltoetsen verplaatst u de rechter- en onderrand van het AP-element; met deze methode kunt u de boven- en

linkerrand niet groter of kleiner maken.

• Als u groter of kleiner wilt maken met een ophoging in het magnetische raster, houdt u Shift-Control (Windows) of

Shift-Option (Macintosh) ingedrukt terwijl u op een pijltoets drukt.

• Typ in de eigenschappencontrole (Venster > Eigenschappen) waarden voor breedte (B) en hoogte (H).

Het groter of kleiner maken van een AP-element wijzigt de breedte en hoogte van een AP-element. Hiermee definieert u

dus niet hoeveel van de inhoud van het AP-element zichtbaar is. U kunt het zichtbare gebied binnen een AP-element

definiëren in de voorkeuren.

Meerdere AP-elementen tegelijk groter of kleiner maken

1 Selecteer in de ontwerpweergave twee of meer AP-elementen.

2 Ga op een van de volgende manieren te werk:

• Selecteer Modify > Arrange > Make Same Width or Modify > Arrange > Make Same Height.

De eerste geselecteerde AP-elementen krijgen de breedte of hoogte van het laatste geselecteerde AP-element.

• Geef in de eigenschappencontrole (Venster > Eigenschappen), onder Meerdere CSS-p-elementen, waarden voor breedte

en hoogte op.

De waarden worden toegepast op alle geselecteerde AP-elementen.

AP-elementen verplaatsen

U kunt in de ontwerpweergave AP-elementen op ongeveer dezelfde wijze verplaatsen als het verplaatsen van objecten in de

meeste eenvoudige grafische toepassingen.

Als de optie Overlappingen voorkomen is ingeschakeld, kunt u een AP-element niet dusdanig verplaatsen dat het overlapt

met een ander AP-element.

1 Selecteer in de ontwerpweergave een AP-element of meerdere AP-elementen.

2 Ga op een van de volgende manieren te werk:

• Als u wilt verplaatsen door middel van slepen, sleept u de selectiegreep van het laatst geselecteerde AP-element

(gemarkeerd in zwart).

• Als u in stappen van één pixel wilt verplaatsen, gebruikt u de pijltoetsen.

Houd de Shift-toets ingedrukt terwijl u op een pijltoets drukt om het AP-element met één ophoging van het huidige

magnetische raster tegelijk te verplaatsen.

Zie ook

“Het lay-outraster gebruiken” op pagina 168

AP-elementen uitlijnen

Gebruik de uitlijningsopdrachten voor AP-elementen om een of meer AP-elementen uit te lijnen op de rand van het laatst

geselecteerde AP-element.

Bij het uitlijnen van AP-elementen worden niet-geselecteerde, onderliggende AP-elementen mogelijk ook verplaatst omdat

hun bovenliggende AP-element wordt geselecteerd en verplaatst. Als u dit wilt voorkomen, dient u geen geneste AP-

elementen te gebruiken.

1 Selecteer in de ontwerpweergave het AP-element.

2 Selecteer Wijzigen > Ordenen en selecteer vervolgens een uitlijningsoptie.

Als u bijvoorbeeld Boven selecteert, worden alle AP-elementen dusdanig verplaatst dat hun bovenranden in dezelfde

verticale positie komen als de bovenrand van het laatst geselecteerde AP-element (gemarkeerd in zwart).

DREAMWEAVER CS3

Handboek

155

AP-elementen omzetten naar tabellen

In plaats van het gebruik van tabellen of de lay-outmodus voor het aanbrengen van de lay-out werken sommige

webontwikkelaars liever met AP-elementen. Dreamweaver biedt u de mogelijkheid om eerst de lay-out aan te brengen met

behulp van AP-elementen en deze (desgewenst) om te zetten naar tabellen. Zo moet u uw AP-elementen misschien naar

tabellen converteren als u browsers wilt ondersteunen die ouder zijn dan versie 4.0. Het converteren van AP-elementen naar

tabellen wordt echter ten zeerste afgeraden omdat dit tabellen kan opleveren met een groot aantal lege cellen, om nog maar

te zwijgen over bovenmatig veel code. Als u een paginalay-out nodig hebt waarin tabellen worden gebruikt, kunt u deze

paginalay-out het beste maken met behulp van de in Dreamweaver beschikbare standaardgereedschappen voor de lay-out

van tabellen.

Voor het aanpassen van de lay-out en het optimaliseren van het paginaontwerp kunt u AP-elementen omzetten naar

tabellen en weer terug. (Als u een tabel terug omzet naar AP-elementen, zet Dreamweaver de tabel echter om naar AP Div-

elementen, ongeacht het type AP-element dat u mogelijk op de pagina had vóór de omzetting naar tabellen.) U kunt een

specifieke tabel of een specifiek AP-element op een pagina niet omzetten; u moet AP-elementen omzetten naar tabellen en

tabellen naar AP Div-elementen voor een gehele pagina.

Opmerking: U kunt AP-elementen niet omzetten naar tabellen of tabellen naar AP Div-elementen in een sjabloondocument

of in een document waarop een sjabloon is toegepast. In plaats daarvan maakt u uw lay-out in een niet-sjabloondocument en

zet u het om voordat u het opslaat als een sjabloon.

Omzetten tussen AP-elementen en tabellen

U maakt eerst uw lay-out met behulp van AP-elementen en zet vervolgens de AP-elementen om naar tabellen, zodat uw

lay-out kan worden weergegeven in oudere browsers.

Voordat u omzet naar tabellen, dient u te controleren of er geen AP-elementen overlappen.

AP-elementen omzetten naar een tabel

1 Selecteer Modify > Convert > AP Divs to Table.

2 Geef een van de volgende opties op en klik op OK:

Nauwkeurigst Hiermee maakt u een cel voor elk AP-element, plus eventuele extra cellen die nodig zijn om de ruimte tussen

AP-elementen te handhaven.

Kleinst: Lege cellen samenvouwen Hiermee geeft u op dat de randen van de AP-elementen moeten worden uitgelijnd als

de elementen binnen het opgegeven aantal pixels worden gepositioneerd.

Als u deze optie selecteert, bevat de resulterende tabel minder lege rijen en kolommen, maar komt deze mogelijk niet geheel

overeen met uw lay-out.

Transparante GIF's gebruiken Hiermee vult u de laatste rij van de tabel op met transparante GIF's. Hierdoor wordt ervoor

gezorgd dat de tabel in alle browsers met dezelfde kolombreedte wordt weergegeven.

Als deze optie is ingeschakeld, kunt u de resulterende tabel niet bewerken door de kolommen ervan te slepen. Als deze

optie is uitgeschakeld, bevat de resulterende tabel geen transparante GIF's, maar kan de breedte van de kolommen van

browser tot browser variëren.

Centreren op de pagina Hiermee centreert u de resulterende tabel op de pagina. Als deze optie is uitgeschakeld, begint de

tabel op de linkerrand van de pagina.

Tabellen converteren naar absoluut gepositioneerde div-elementen

1 Selecteer Modify > Convert > Tables to AP Divs.

2 Geef een van de volgende opties op en klik op OK:

Overlapping van AP-elementen voorkomen Hiermee beperkt u de posities van AP-elementen wanneer deze worden

gemaakt, verplaatst en groter of kleiner worden gemaakt, op een dusdanige wijze dat de elementen elkaar niet overlappen.

Paneel AP-elementen weergeven Hiermee wordt het paneel AP-elementen weergegeven.

Raster weergeven en Raster magnetisch maken Hiermee kunt u een raster gebruiken om AP-elementen te positioneren.

DREAMWEAVER CS3

Handboek

156

De tabellen worden omgezet naar AP Div-elementen. Lege cellen worden alleen omgezet naar AP-elementen als ze

achtergrondkleuren hebben.

Opmerking: Pagina-elementen die buiten tabellen vielen, worden ook in AP Div-elementen geplaatst.

Overlapping van AP-elementen voorkomen

Omdat tabelcellen elkaar niet kunnen overlappen, kan Dreamweaver geen tabel uit elkaar overlappende AP-elementen

maken. Als u van plan bent om de AP-elementen in een document om te zetten naar tabellen, gebruikt u de optie

Overlappingen voorkomen om de verplaatsing en positionering van AP-elementen dusdanig te beperken dat AP-elementen

elkaar niet overlappen.

Wanneer deze optie is ingeschakeld, is het niet mogelijk om een AP-element te maken vóór, te verplaatsen of groter of

kleiner te maken over, of te nesten binnen een bestaand AP-element. Als u deze optie activeert nadat u elkaar overlappende

AP-elementen hebt gemaakt, sleept u elk overlappend AP-element om het van andere AP-elementen vandaan te plaatsen.

Dreamweaver repareert niet automatisch bestaande overlappende AP-elementen op de pagina wanneer u de optie

Overlapping van AP-elementen voorkomen hebt ingeschakeld.

Wanneer deze optie en die voor een magnetisch raster zijn ingeschakeld, wordt een AP-element niet op het magnetische

raster uitgelijnd als twee AP-elementen elkaar hierdoor gaan overlappen. In plaats daarvan wordt het magnetisch uitgelijnd

op de rand van het dichtstbijzijnde AP-element.

Opmerking: Door middel van bepaalde acties kunt u AP-elementen elkaar laten overlappen zelfs wanneer de optie

Overlappingen voorkomen is ingeschakeld. Als u een AP-element invoegt met behulp van het menu Invoegen, in de

eigenschappencontrole getallen invoert of AP-elementen opnieuw positioneert door het bewerken van de HTML-broncode, kan

dit leiden tot AP-elementen die elkaar overlappen of zijn genest terwijl deze optie is ingeschakeld. Bij het optreden van

overlappingen sleept u elkaar overlappende AP-elementen in de ontwerpweergave om deze te scheiden.

• Selecteer in het paneel AP-elementen (Venster > AP-elementen) de optie Overlappingen voorkomen.

• Selecteer in het documentvenster de optie Wijzigen > Ordenen > Overlapping van AP-elementen voorkomen.

Werken met labels voor div-elementen

Info over werken met labels voor div-elementen

U kunt paginalay-outs maken door labels voor div-elementen handmatig in te voeren en hierop CSS-positioneringsstijlen

toe te passen. De label voor een

div-element is een label waarmee logische scheidingen binnen de inhoud van een

webpagina worden gedefinieerd. U kunt labels voor

div-elementen gebruiken om blokken inhoud te centreren, om

kolomeffecten te maken, om gebieden met verschillende kleuren aan te brengen en nog veel meer.

Als u niet vertrouwd bent met het gebruik van labels voor

div-elementen en Cascading Style Sheets (CSS) voor het maken

van webpagina's, kunt u een CSS-lay-out maken die is gebaseerd op een van de vooraf gedefinieerde lay-outs die worden

meegeleverd met Dreamweaver. Als u niet graag werkt met CSS, maar wel vertrouwd bent met het gebruik van tabellen,

kunt u ook proberen tabellen te gebruiken.

Opmerking: Dreamweaver behandelt alle labels voor div-elementen met een absolute positie als AP-elementen (absoluut

gepositioneerde elementen), zelfs als u deze labels voor div-elementen niet hebt gemaakt met het gereedschap voor het tekenen

van AP Div-elementen.

Zie ook

“Info over AP-elementen in Dreamweaver” op pagina 146

“Een pagina met een CSS-lay-out maken” op pagina 144

“Inhoud in tabellen presenteren” op pagina 169

DREAMWEAVER CS3

Handboek

157

Labels voor div-elementen invoegen

U kunt labels voor div-elementen gebruiken om CSS-lay-outblokken te maken en deze in uw document te positioneren.

Dit is handig als u een bestaande CSS-stijlpagina met positioneringsstijlen aan uw document hebt gekoppeld. Met

Dreamweaver kunt u snel de label voor een div-element invoegen en bestaande stijlen erop toepassen.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de label voor een

div-element wilt invoegen.

2 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Lay-outobjecten > Div Tag.

• In the Layout category of the Insert bar, click the Insert Div Tag button .

3 Stel vervolgens de volgende opties naar wens in:

Invoegen Hiermee selecteert u de locatie van de label voor het div-element (op de invoegpositie, vóór of na de label, of

vóór of na het begin van de label) alsmede de naam van de label als het geen nieuwe label is.

Klasse Hiermeegeeftudeklassestijlweer,diemomenteelopdelabelwordttoegepast. Alsueenstijlpaginahebtgekoppeld,

worden op die stijlpagina gedefinieerde klassen weergegeven in de lijst. Gebruik dit pop-upmenu voor een van de volgende

handelingen:

• Selecteer de stijl die u wilt toepassen op de label.

• Selecteer Geen om de huidige geselecteerde stijl te verwijderen.

• Selecteer Stijlpagina koppelen om een dialoogvenster te openen, waarin u een externe stijlpagina kunt koppelen.

Div-id Hiermee kunt u de naam wijzigen die is gebruikt om de label voor het div-element aan te duiden. Als u een

stijlpagina hebt gekoppeld, worden op die stijlpagina gedefinieerde id's weergegeven in de lijst. Id's voor blokken die al in

uw document staan, worden niet vermeld.

Opmerking: Dreamweaver geeft een waarschuwing als u dezelfde id als die van een andere label in uw document opgeeft.

CSS bewerken Hiermee opent u het paneel CSS-stijlen.

4 Klik op OK.

De label voor het

div-element wordt als een vak in uw document met de tekst van een tijdelijke aanduiding weergegeven.

Als u de muisaanwijzer over de rand van het vak beweegt, wordt het element door Dreamweaver gemarkeerd.

Als de label voor het

div-element absoluut is gepositioneerd, wordt het een AP-element. (U kunt labels voor div-elementen

die niet absoluut zijn gepositioneerd, bewerken.)

Zie ook

“Info over AP-elementen in Dreamweaver” op pagina 146

“Een pagina met een CSS-lay-out maken” op pagina 144

Labels voor div-elementen bewerken

Nadat u de label voor een div-element hebt ingevoegd, kunt u het element manipuleren of kunt u er inhoud aan toevoegen.

Opmerking: Labels voor div-elementen die absoluut zijn gepositioneerd, worden AP-elementen.

Als u randen toewijst aan div-labels of als u Omtrek van CSS-layout hebt geselecteerd, hebben deze elementen zichtbare

randen. (Omtrek van CSS-lay-out wordt standaard geselecteerd in het menu Beeld > Visuele hulpmiddelen.) Als u de

muisaanwijzer over de label voor een

div-element beweegt, markeert Dreamweaver de label. U kunt de markeerkleur

wijzigen of markeren uitschakelen.

Als u de label voor een

div-element selecteert, kunt u regels hiervoor bekijken en bewerken in het paneel CSS-stijlen. Ook

kunt u inhoud toevoegen aan de label voor een

div-element door gewoon de invoegpositie binnen de label voor het div-

element te plaatsen en vervolgens inhoud toe te voegen op de manier waarop u inhoud toevoegt aan een pagina.

DREAMWEAVER CS3

Handboek

158

Zie ook

“Info over AP-elementen in Dreamweaver” op pagina 146

“Het deelvenster CSS-stijlen openen” op pagina 124

Op de label voor een div-element toegepaste regels weergeven en bewerken

1 Voer een van de volgende handelingen uit om de label voor een div-element te selecteren:

• Klik op de rand van de label voor het div-element.

Let op de markering om de rand te zien.

• Klik binnen de label voor het div-element en druk twee maal op Control+A (Windows) of Command+A (Macintosh).

• Klik binnen de label voor het div-element en selecteer vervolgens de label voor het div-element in de labelkiezer onder

aan het documentvenster.

2 Selecteer Venster > CSS-stijlen om het paneel CSS-stijlen te openen, als dit nog niet is geopend.

Regels die worden toegepast op de label voor het

div-element, worden in het paneel weergegeven.

3 Breng desgewenst wijzigingen aan.

De invoegpositie in de label voor een div-element plaatsen om inhoud toe te voegen

❖

Klik op een willekeurige plaats binnen de randen van de label.

Wijzig de tekst voor de tijdelijke aanduiding in een label voor een div-element

❖

Selecteer de tekst en typ er vervolgens overheen, of druk op Verwijderen.

Opmerking: U kunt inhoud toevoegen aan de label voor het

div-element op dezelfde manier als bij het toevoegen van inhoud

aan een pagina.

De markeringskleur van labels voor div-elementen wijzigen

Wanneer u de muisaanwijzer over de rand van de label voor een div-element beweegt in de ontwerpweergave, markeert

Dreamweaver de randen van de label. U kunt de markeerfunctie desgewenst in- of uitschakelen, of de markeerkleur

wijzigen in het dialoogvenster Voorkeuren.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Markering in de lijst Categorie aan de linkerkant.

3 Maak een van beide volgende wijzigingen en klik op OK:

• Alsudemarkeerkleurvandelabelsvoordiv-elementen wilt wijzigen, klikt u op het kleurvak Bij aanwijzen met muis en

selecteert u vervolgens een markeerkleur met behulp van de kleurkiezer (of geeft u de hexadecimale waarde voor de

markeerkleur op in het tekstvak).

• Als u markeren van de labels voor div-elementen wilt in- of uitschakelen, schakelt u het selectievakje Tonen bij Bij

aanwijzen met muis in respectievelijk uit.

Opmerking: Deze opties zijn van invloed op alle objecten, zoals tabellen, die Dreamweaver markeert wanneer u de

muisaanwijzer over deze objecten beweegt.

CSS-lay-outblokken visualiseren

U kunt CSS-lay-outblokken visualiseren terwijl u in de ontwerpweergave werkt. Een CSS-lay-outblok is een HTML-

pagina-element dat u op een willekeurige plaats op uw pagina kunt positioneren. Meer in het bijzonder is een CSS-lay-

outblok een label voor een

div-element zonder display:inline of een willekeurig ander pagina-element met daarin de

CSS-declaratie

display:block, position:absolute, of position:relative. Hieronder volgen enkele voorbeelden van

elementen die in Dreamweaver als CSS-lay-outblokken worden beschouwd:

• Een label voor een div-element

DREAMWEAVER CS3

Handboek

159

• Een afbeelding, waaraan een absolute of relatieve positie is toegewezen

• De label voor een a-element, waaraan de stijl display:block is toegewezen

• Een alinea, waaraan een absolute of relatieve positie is toegewezen

Opmerking: Ten behoeve van de visuele weergave omvatten CSS-lay-outblokken geen inline elementen (d.w.z. elementen

waarvan de code binnen een regel tekst staat) of enkelvoudige blokelementen zoals alinea's.

Dreamweaver biedt een aantal visuele hulpmiddelen voor de weergave van CSS-lay-outblokken. Zo kunt u omtrekken,

achtergronden en het kadermodel voor CSS-lay-outblokken inschakelen terwijl u ontwerpt. Ook kunt u de knopinfo

weergeven voor de eigenschappen van een geselecteerd CSS-lay-outblok wanneer u de muisaanwijzer over het lay-outblok

beweegt.

De volgende lijst van visuele hulpmiddelen voor CSS-lay-outblokken beschrijft wat Dreamweaver als zichtbaar voor elke

blok weergeeft:

Omtrek van CSS-lay-out Displays the outlines of all CSS layout blocks on the page.

CSS-lay-outachtergronden Displays temporarily assigned background colors for individual CSS layout blocks, and hides

any other background colors or images that normally appear on the page.

Wanneer u het visuele hulpmiddel inschakelt om CSS-lay-outblokachtergronden weer te geven, wijst Dreamweaver

automatisch aan elk CSS-lay-outblok een opvallende achtergrondkleur toe. (Dreamweaver selecteert de kleuren met behulp

van een algoritmisch proces—u kunt de kleuren op geen enkele manier zelf toewijzen.) De toegewezen kleuren zijn visueel

opvallend en zijn ontworpen om u te helpen bij het onderscheiden van verschillende CSS-lay-outblokken.

CSS-lay-outkadermodel Displays the box model (that is, padding and margins) of the selected CSS layout block.

CSS-lay-outblokken weergeven

U kunt desgewenst visuele hulpmiddelen voor CSS-lay-outblokken in- of uitschakelen.

Omtrekken van CSS-lay-outblokken weergeven

❖

Selecteer Beeld > Visuele hulpmiddelen > Omtrek van CSS-lay-out.

Achtergronden van CSS-lay-outblokken weergeven

❖

Selecteer Beeld > Visuele hulpmiddelen > CSS-lay-outachtergronden.

CSS-lay-outblokkadermodellen weergeven

❖

Selecteer Beeld > Visuele hulpmiddelen > CSS-lay-outkadermodel.

Ook hebt u toegang tot opties voor visuele hulpmiddelen voor CSS-lay-outblokken door op de knop Visuele hulpmiddelen

op de werkbalk Documenten te klikken.

Visuele hulpmiddelen gebruiken bij niet-CSS-lay-outblokelementen

U kunt een Design-Time stijlpagina gebruiken om de achtergronden, randen of het kadermodel voor elementen weer te

geven die normaal gesproken niet als CSS-lay-outblokken worden beschouwd. Hiervoor moet u eerst een Design-Time

stijlpagina maken, die het kenmerk

display:block toewijst aan het juiste pagina-element.

1 Maak een externe CSS-stijlpagina door de selectie van Bestand > Nieuw, van Basispagina in de kolom Categorie, van CSS

in de kolom Basispagina en door te klikken op Maken.

2 Maak op de nieuwe stijlpagina regels die het kenmerk

display:block toewijzen aan de pagina-elementen die u als CSS-

lay-outblokken wilt weergeven.

Als u bijvoorbeeld een achtergrondkleur wilt weergeven voor alinea's en lijstitems, maakt u een stijlpagina met de volgende

regels:

DREAMWEAVER CS3

Handboek

160

display:block;

}

li{

display:block;

}

3 Sla het bestand op.

4 Open in de ontwerpweergave de pagina waaraan u de nieuwe stijlen wilt koppelen.

5 Selecteer Tekst > CSS-stijlen > Design-Time.

6 Klik in het dialoogvenster Design-Time stijlbladen op de knop Plus (+) boven het tekstvak Alleen weergeven tijdens

ontwerptijd, selecteer de zojuist gemaakte stijlpagina en klik op OK.

7 Klik op OK om het dialoogvenster Design-Time stijlbladen te sluiten.

De stijlpagina wordt aan uw document gekoppeld. Als u een stijlpagina had gemaakt met behulp van het vorige voorbeeld,

zouden alle alinea's en lijstitems zijn opgemaakt met het kenmerk

display:block, waardoor u visuele hulpmiddelen voor

CSS-lay-outblokken voor alinea's en lijstitems zou hebben kunnen in- of uitschakelen.

Zie ook

“Design-Time stijlpagina's gebruiken” op pagina 138

AP-elementen animeren

Info over het animeren van AP-elementen

Dynamische HTML, oftewel DHTML, verwijst naar de combinatie van HTML met een scripttaal, waarmee u de stijl- of

positioneringseigenschappen van HTML-elementen kunt wijzigen. Tijdlijnen in Dreamweaver gebruiken dynamische

HTML om de eigenschappen van AP-elementen en afbeeldingen in een bepaald tijdsbestek te wijzigen. Gebruik tijdlijnen

om animaties te maken, die geen ActiveX-besturingselementen, insteekmodules of Java-applets nodig hebben (maar wél

JavaScript).

Opmerking: Het woord 'dynamisch' kan in verschillende aan het web gerelateerde contexten verschillende betekenissen hebben.

Verwar Dynamische HTML niet met het idee van een dynamische webpagina, hetgeen inhoudt dat de webpagina dynamisch

wordt gegenereerd door server-side-code voordat deze ter beschikking aan een bezoeker wordt gesteld.

Met tijdlijnen kunt u de positie, grootte, zichtbaarheid en stapelvolgorde van een AP-element wijzigen. (De AP-

elementfuncties van tijdlijnen werken alleen in 4.0 of hogere browsers.) Tijdlijnen zijn ook handig voor andere acties die

u wilt laten optreden nadat een pagina is geladen. Zo kunnen tijdlijnen het bronbestand van een afbeeldingslabel wijzigen,

zodat met het verstrijken van de tijd verschillende afbeeldingen op de pagina worden weergegeven.

Als u de door een tijdlijn gegenereerde JavaScript-code wilt bekijken, opent u de codeweergave van het documentvenster.

The tijdlijncode staat in de functie

MM_initTimelines, binnen in een scripttag in de kopsectie van het document.

Bij het bewerken van de HTML van een document met tijdlijnen moet u ervoor zorgen dat u niets waarnaar een tijdlijn

verwijst, verplaatst, hernoemt of verwijdert.

Zie ook

“Info over AP-elementen in Dreamweaver” op pagina 146

Overzicht van het paneel Tijdlijnen

Het paneel Tijdlijnen toont hoe de eigenschappen van AP-elementen en afbeeldingen met het verstrijken van de tijd

veranderen. Selecteer Venster > Tijdlijnen om het paneel Tijdlijnen te openen.

DREAMWEAVER CS3

Handboek

161

A. Keyframes B. Pop-upmenu Tijdlijnen C. Framenummers D. Gedragskanaal E. Animatiekanaal F. Animatiebalken G. Afspeelkop

Keyframes Definieer frames in een balk waarin u specifieke eigenschappen (zoals positie) voor het object hebt opgegeven.

Dreamweaver berekent tussenwaarden voor frames tussen keyframes in. Kleine cirkels duiden op keyframes.

Gedragskanaal Het gedrag dat moet worden uitgevoerd bij een bepaald frame in de tijdlijn.

Pop-upmenu Tijdlijnen Toont welke tijdlijn van het document wordt weergegeven in het paneel Tijdlijnen.

Animatiekanaal Balken weergeven voor het animeren van AP-elementen en afbeeldingen.

Animatiebalken Toont de duur van de animatie van ieder object. Eén rij kan meerdere balken voor verschillende objecten

bevatten. Verschillende balken kunnen niet hetzelfde object in hetzelfde frame aansturen.

Afspeelkop Toont welk frame van de tijdlijn momenteel in het documentvenster wordt weergegeven.

Framenummers Toont de volgorde van de frames. Het nummer tussen de knoppen Terug en Afspelen is het huidige

framenummer. U kunt de animatieduur bepalen door het instellen van het totaal aantal frames en het aantal frames per

seconde (fps). De standaardinstelling van 15 frames per seconde is een goede gemiddelde snelheid voor gebruik in de

meeste browsers op normale Windows- en Macintosh-systemen.

Opmerking: Grotere snelheden hoeven niet tot betere prestaties te leiden. Browsers spelen altijd elke frame van de animatie af,

zelfs als ze de opgegeven framesnelheid niet halen. De framesnelheid wordt genegeerd als deze groter is dan de browser kan

verwerken.

Contextmenu Bevat diverse opdrachten die verband houden met de tijdlijn.

Afspeelopties

Hieronder staan de afspeelopties voor het bekijken van de animatie.

Terugspoelen Verplaatst de afspeelkop naar het eerste frame in de tijdlijn.

Terug Verplaatst de afspeelkop één frame naar links. Klik op Terug en houd de muisknop ingedrukt om de tijdlijn in

terugwaartse richting af te spelen.

Afspelen Verplaatst de afspeelkop één frame naar rechts. Klik op Afspelen en houd de muisknop ingedrukt om de tijdlijn

in voorwaartse richting af te spelen.

Automatisch afspelen Zorgt dat een tijdlijn automatisch begint te spelen wanneer de huidige pagina wordt geladen in de

browser. Automatisch afspelen koppelt een gedrag aan de label body op de pagina, waarmee de actie Tijdlijn afspelen wordt

uitgevoerd wanneer de pagina wordt geladen.

Lus Zorgt dat de huidige tijdlijn oneindig blijft herhalen zolang de pagina is geopend in een browser. Met Lus voegt u het

gedrag Ga naar tijdlijnframe in het Gedragskanaal in na het laatste frame van de animatie. Dubbelklik op de aanduiding

van het gedrag in het Gedragskanaal om de parameters voor dit gedrag te bewerken en het aantal lussen te wijzigen.

DREAMWEAVER CS3

Handboek

162

Een AP-element animeren met behulp van de tijdlijn

De meest gebruikte soort tijdlijnanimatie omvat de verplaatsing van een AP-element over een pad. Tijdlijnen kunnen

alleen AP-elementen verplaatsen. Voor het verplaatsen van afbeeldingen of tekst maakt u een AP-element met behulp van

de knop AP Div tekenen op de balk Invoegen en voegt u vervolgens afbeeldingen, tekst of een willekeurig ander type inhoud

in in het AP Div-element.

Tijdlijnen kunnen ook andere eigenschappen van AP-elementen en afbeeldingen wijzigen.

1 Verplaats het AP-element naar de plaats waar u dit wilt hebben wanneer de animatie begint.

2 Selecteer Venster > Tijdlijnen.

3 Selecteer het AP-element dat u wilt animeren.

Zorg ervoor dat u het gewenste element hebt geselecteerd. Klik op de aanduiding voor het AP-element of op de

selectiegreep van het AP-element, of gebruik het paneel AP-elementen om een AP-element te selecteren. Wanneer een AP-

element is geselecteerd, wordt het weergegeven met grepen (zie de onderstaande afbeelding).

A. Klik op de selectiegreep van het AP-element om het AP-element te selecteren B. Geselecteerde AP-element met afbeelding erin

Door te klikken binnen het AP-element wordt een knipperende invoegpositie in het AP-element geplaatst; het AP-element

wordt echter niet geselecteerd.

4 Selecteer Wijzigen > Tijdlijn > Object toevoegen aan tijdlijn of sleep het geselecteerde AP-element gewoon het paneel

Tijdlijnen in.

In het eerste kanaal van de tijdlijn verschijnt een balk. De naam van het AP-element wordt in de balk weergegeven.

5 Klik op de aanduiding voor het keyframe at aan het einde van de balk.

6 Verplaats het AP-element op de pagina naar de plaats waar u dit wil hebben aan het einde van de animatie.

In het documentvenster wordt een lijn weergegeven die het pad van de animatie weergeeft.

7 Als u wilt dat het AP-element zich verplaatst langs een kromme, selecteert u de desbetreffende animatiebalk en klikt u

terwijl u Control (Windows) of Command (Macintosh) ingedrukt houdt op een frame in het midden van de balk om een

keyframe toe te voegen aan het frame waarop u hebt geklikt, of klikt u op een frame in het midden van de animatiebalk en

selecteert u Keyframe toevoegen in het contextmenu.

Herhaal deze stap om aanvullende keyframes te definiëren.

8 Houd de toets Afspelen ingedrukt om een voorvertoning van de animatie op de pagina te zien.

Herhaal de procedure om aanvullende AP-elementen en afbeeldingen toe te voegen aan de tijdlijn en om zo een complexere

animatie te maken.

Zie ook

“Een AP-laag invoegen” op pagina 146

“AP-elementen groter of kleiner maken” op pagina 153

Een tijdlijn maken door een pad te slepen

Alsueenanimatiemeteencomplexpadwiltmaken,ishetwellichtdoelmatigeromhetpadoptenementerwijluhetAP-

element sleept, in plaats van afzonderlijke keyframes te maken.

1 Selecteer een AP-element.

2 Verplaats het AP-element naar de plaats waar u dit wilt hebben wanneer de animatie begint.

DREAMWEAVER CS3

Handboek

163

Zorg ervoor dat u het AP-element hebt geselecteerd; als de invoegpositie ín het AP-element staat, wordt het AP-element

niet geselecteerd. Klik voor de selectie van een AP-element op de aanduiding voor het AP-element of op de selectiegreep

van het AP-element, of gebruik het paneel AP-elementen.

3 Selecteer Wijzigen > Tijdlijn > Pad van AP-element opnemen.

4 Sleep het AP-element over de pagina om een pad te maken.

5 Laat het AP-element los op de plaats waar de animatie dient te stoppen.

Dreamweaver voegt een animatiebalk toe aan de tijdlijn, met daarin het juiste aantal keyframes.

6 Klik in het paneel Tijdlijnen op de knop Terugspoelen; houd vervolgens de toets Afspelen ingedrukt voor een

voorvertoning van uw animatie.

Zie ook

“AP-elementen groter of kleiner maken” op pagina 153

Een tijdlijn bewerken

Na het definiëren van de basisonderdelen van een tijdlijn kunt u wijzigingen aanbrengen, zoals het toevoegen of

verwijderen van frames, het wijzigen van de begintijd van de animatie, enzovoort.

• Als u de afspeelduur van de animatie wilt verlengen, sleept u de aanduiding voor het eindframe naar rechts. Alle

keyframes in de animatie worden dusdanig verschoven dat hun relatieve posities gelijk blijven. Als u wilt voorkomen

dat andere keyframes worden verplaatst, drukt u op de Control-toets en sleept u de aanduiding voor het eindframe.

• Als u wilt bereiken dat een AP-element een keyframepositie vroeger of later bereikt, verschuift u de aanduiding voor het

keyframe naar links of naar rechts in de balk.

• Als u de begintijd van een animatie wilt wijzigen, selecteert u een of meer aan de animatie gerelateerde balken (druk

daarbij op Shift om meer dan één balk tegelijk te selecteren) en sleept u naar links of naar rechts.

• Als u de locatie van een geheel animatiepad wilt verschuiven, selecteert u de gehele balk en sleept u het object op de

pagina. Dreamweaver past de positie van alle keyframes aan. Elke type wijziging dat u aanbrengt, waarbij een gehele balk

is geselecteerd, leidt tot wijzigingen in en van alle keyframes.

• Selecteer voor het toevoegen of verwijderen van frames in de tijdlijn de optie Wijzigen > Tijdlijn > Frame toevoegen of

Wijzigen > Tijdlijn > Frame verwijderen.

• Als u de tijdlijn automatisch wilt laten afspelen wanneer de pagina wordt geopend in een browser, klikt u op Automatisch

afspelen. Automatisch afspelen koppelt een gedrag aan de pagina, dat de actie Tijdlijn afspelen uitvoert wanneer de

pagina wordt geladen.

• Als u de tijdlijn in een continue (oneindige) lus wilt plaatsen, klikt u op Lus. Met Lus voegt u de actie Ga naar

tijdlijnframe in het Gedragskanaal in na het laatste frame van de animatie. U kunt de parameters voor dit gedrag

bewerken door het aantal lussen te definiëren.

Afbeeldings- en AP-elementeigenschappen wijzigen met tijdlijnen

Naast het verplaatsen van AP-elementen met tijdlijnen, kunt u ook de zichtbaarheid, grootte en stapelvolgorde van een AP-

element wijzigen; tevens kunt u het bronbestand van een afbeelding wijzigen.

1 Voer een van de volgende handelingen uit in het paneel Tijdlijnen:

• Selecteer een bestaand keyframe in de balk die het object aanstuurt, dat u wilt wijzigen. (De begin- en eindframes zijn

altijd keyframes.)

• Maak een nieuw keyframe door op een frame in het midden van de animatiebalk te klikken en kies Wijzigen > Tijdlijn >

Keyframe toevoegen. In plaats daarvan kunt u een nieuw keyframe maken door Control (Windows) of Command

(Macintosh) ingedrukt te houden en op een frame in de animatiebalk te klikken.

DREAMWEAVER CS3

Handboek

164

2 Definieer op een van de volgende manieren nieuwe eigenschappen van het object:

• Klik om het bronbestand van een afbeelding te wijzigen op het pictogram voor de map naast het tekstvak Brn in de

eigenschappencontrole, en blader vervolgens naar en selecteer een nieuwe afbeelding.

• Selecteer voor het wijzigen van de zichtbaarheid van een AP-element Overnemen, Zichtbaar of Verborgen in het pop-

upmenu in het tekstvak Vis of in de eigenschappencontrole. U kunt ook de "oog"-pictogrammen in het paneel AP-

elementen gebruiken.

• Sleep voor het wijzigen van de grootte van een AP-element de formaatgrepen van het AP-element of geef nieuwe

waarden op in het tekstvak Breedte en Hoogte in de eigenschappencontrole. Niet alle browsers kunnen de grootte van

een AP-element dynamisch wijzigen.

• Geef voor het wijzigen van de stapelvolgorde van een AP-element een nieuwe waarde op in het tekstvak Z-index of

gebruik het paneel AP-elementen om de stapelvolgorde van het huidige AP-element te wijzigen.

3 Houd de toets Afspelen ingedrukt om de animatie te bekijken.

Zie ook

“AP-elementen tonen en verbergen” op pagina 153

“De stapelvolgorde van AP-elementen wijzigen” op pagina 152

Meerdere tijdlijnen gebruiken

In plaats van alle actie op een pagina met één tijdlijn aan te sturen, is het wellicht eenvoudiger om met afzonderlijke

tijdlijnen te werken, die afzonderlijke delen van de pagina aansturen. Zo kan een pagina interactieve elementen bevatten,

die elk een verschillende tijdlijn activeren.

• Selecteer voor het maken van een nieuwe tijdlijn de optie Wijzigen > Tijdlijn > Tijdlijn toevoegen.

• Selecteer voor het verwijderen van de geselecteerde tijdlijn Wijzigen > Tijdlijn > Tijdlijn verwijderen. Hiermee worden

alle animaties van de geselecteerde tijdlijn permanent verwijderd.

• Als u de naam van de geselecteerde tijdlijn wilt wijzigen, selecteert u Wijzigen > Tijdlijn > Naam van tijdlijn wijzigen, of

geeft u een nieuwe naam op in het pop-upmenu Tijdlijn in het paneel Tijdlijnen.

• AlsueenanderetijdlijnwiltbekijkeninhetpaneelTijdlijnen,selecteertueennieuwetijdlijninhetpop-upmenuTijdlijn

in het paneel Tijdlijnen.

Animaties kopiëren en plakken

Zodra u de gewenste animatievolgorde hebt, kopieert en plakt u deze naar een ander deel van de huidige tijdlijn, naar een

andere tijdlijn in hetzelfde document of naar een tijdlijn in een ander document. U kunt ook meerdere animatievolgordes

tegelijk kopiëren en plakken.

1 Klik op een animatiebalk om een volgorde te selecteren. Houd voor de selectie van meerdere volgordes Shift ingedrukt

en klik op meerdere animatiebalken; druk voor de selectie van alle volgordes op Control+A (Windows) of Command+A

(Macintosh).

2 Kopieer of knip de selectie.

3 Ga op een van de volgende manieren te werk:

• Verplaats de afspeelkop naar een andere plaats in de huidige tijdlijn.

• Selecteer een andere tijdlijn in het pop-upmenu Tijdlijn.

• Open een ander document of maak een nieuw document, en klik vervolgens in het paneel Tijdlijnen.

4 Plak de selectie in de tijdlijn.

Animatiebalken voor hetzelfde object mogen elkaar niet overlappen, omdat een AP-element niet op twee plaatsen

tegelijkertijd kan voorkomen (en daarom kan een afbeelding geen twee verschillende bronnen tegelijkertijd hebben). Als

de te plakken animatiebalk zou overlappen met een andere animatiebalk voor hetzelfde object, verschuift Dreamweaver de

selectie automatisch naar het eerste frame dat niet overlapt.

DREAMWEAVER CS3

Handboek

165

Dit zijn twee principes die u dient te onthouden bij het plakken van animatievolgordes in een ander document:

• Als u een animatievolgorde voor een AP-element kopieert, waarbij het nieuwe document een AP-element met dezelfde

naam bevat, past Dreamweaver de animatie-eigenschappen toe op het bestaande AP-element in het nieuwe document.

• Als u een animatievolgorde kopieert voor een AP-element, waarbij het nieuwe document niet een AP-element met

dezelfde naam bevat, plakt Dreamweaver het AP-element en de inhoud ervan uit het oorspronkelijke document, samen

met de animatievolgorde. Als u de geplakte animatievolgorde wilt toepassen op een ander AP-element in het nieuwe

document, selecteert u Object wijzigen in het contextmenu en selecteert u de naam van het tweede AP-element in het

pop-upmenu. Verwijder desgewenst het geplakte AP-element.

Een animatievolgorde toepassen op een ander object

Als u tijd wilt besparen, maakt u één keer een animatievolgorde en past u deze toe op elk van de overige AP-elementen in

uw document.

1 Klik in het paneel Tijdlijnen op de animatieserie om hem te selecteren.

2 Selecteer Bewerken > Kopiëren om de serie te kopiëren.

3 Klik op een willekeurig frame van het paneel Tijdlijnen en plak de serie (Bewerken > Plakken) bij het betreffende frame.

4 Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op de geplakte animatievolgorde

en selecteer Object wijzigen in het contextmenu.

5 Selecteer in het dialoogvenster dat verschijnt een ander object in het pop-upmenu en klik op OK.

6 Herhaal stap 2 tot en met 4 voor alle resterende objecten die u dezelfde animatievolgorde wilt geven.

Ook kunt u wijzigen welk AP-element moet worden geanimeerd nadat u een animatievolgorde hebt gemaakt; volg gewoon

stap 3 en 4 hierboven (kopiëren of plakken is niet nodig).

De naam van de tijdlijn wijzigen

1 Selecteer Wijzigen > Tijdlijn > Naam van tijdlijn wijzigen.

2 Voer een nieuwe naam in.

Als uw document de actie van het gedrag Tijdlijn afspelen bevat (dus als het document een knop bevat, waarop de bezoeker

moet klikken om de tijdlijn te starten), moet u het gedrag dusdanig bewerken dat het overeenkomt met de nieuwe naam

van de tijdlijn.

Animatietips voor tijdlijnen

De volgende suggesties verbeteren mogelijk de prestaties van uw animaties en vereenvoudigen het maken van animaties:

• Toon en verberg AP-elementen in plaats van het bronbestand van animaties met meerdere afbeeldingen te wijzigen. Het

wisselen van het bronbestand van een afbeelding kan de animatie vertragen, omdat de nieuwe afbeelding moet worden

gedownload. U vermijdt opvallende onderbrekingen of ontbrekende afbeeldingen als alle afbeeldingen tegelijk worden

gedownload in verborgen AP-elementen voordat de animatie gaat lopen.

• Werk met langere animatiebalken om de beweging vloeiender te maken. Als de animatie er schokkerig uitziet en

afbeeldingen van de ene positie naar de andere springen, sleept u het eindframe van de animatiebalk van het AP-element

om de beweging over meerdere frames uit te strekken. Als u de animatiebalk langer maakt, creëert u meer

gegevenspunten tussen het begin- en eindpunt van de beweging en zorgt u er ook voor dat het object langzamer beweegt.

Probeer het aantal frames per seconde (fps) te vergroten om de snelheid te verbeteren, maar vergeet niet dat de meeste

browsers die op doorsnee systemen worden gebruikt, geen hogere animatiesnelheid dan 15 fps halen. Test de animatie

op verschillende systemen met verschillende browsers om zo de beste instellingen te achterhalen.

• Animeer geen grote bitmapafbeelingen. Het animeren van grote afbeeldingen leidt tot trage animaties. Maak in plaats

daarvan composietafbeeldingen en beweeg kleinere onderdelen van de afbeelding. Toon bijvoorbeeld de beweging van

een auto door alleen de wielen te animeren.

• Maak eenvoudige animaties. Maak geen animaties die meer vergen dan de huidige browsers kunnen leveren. Browsers

spelen altijd elk frame in een tijdlijnanimatie af, zelfs wanneer de systeem- of internetprestaties afnemen.

166

Hoofdstuk 7: Pagina's opmaken met

HTML

Adobe® Dreamweaver® CS3 biedt lay-outprogramma's om webpagina's met HTML-tabellen of frames te maken. De

toepassing beschikt bovendien over linialen, hulplijnen en een raster om pagina's op te maken en elementen precies op de

juiste plaats aan te brengen.

Visuele lay-outhulpmiddelen gebruiken

Linialen instellen

Linialen dienen om uw lay-out eenvoudiger te meten, organiseren en plannen. Ze worden langs de linker- en bovenrand

van de pagina weergegeven en bevatten maateenheden in pixels, inches of centimeters.

• Als u de weergave van linialen wilt in- of uitschakelen, selecteert u Weergave > Linialen > Tonen.

• Als u de oorsprong van de linialen wilt wijzigen, sleept u het oorsprongspictogram (in de linkerbovenhoek van de

ontwerpweergave van het documentvenster) naar een andere plaats op de pagina

• Als u de standaardpositie van de oorsprong wilt herstellen, selecteert u Weergave > Linialen > Oorsprong herstellen.

• Als u een andere maateenheid wilt kiezen, selecteert u Weergave > Linialen en vervolgens Pixels, Inches of Centimeters.

Lay-outhulplijnen instellen

Hulplijnen zijn lijnen die u vanaf de linialen naar het document sleept. Hulplijnen dienen om objecten nauwkeuriger te

plaatsen en uit te lijnen. U kunt met hulplijnen ook de grootte van pagina-elementen meten of het zichtbare gebied van

webbrowsers emuleren.

Om het uitlijnen van elementen te vereenvoudigen, kunt u elementen aan hulplijnen en hulplijnen aan elementen

vastklikken (de hulplijnen worden magnetisch). (Vastklikken werkt alleen als u elementen absoluut plaatst.) Verder kunt

u hulplijnen vergrendelen om te voorkomen dat ze per ongeluk door een andere gebruiker worden verplaatst.

Een horizontale of verticale hulplijn maken

1 Versleep de muiscursor vanuit de gewenste liniaal.

2 Sleep de hulplijn naar de gewenste plaats in het documentvenster en laat de muisknop los (u kunt de hulplijn verplaatsen

door deze opnieuw te verslepen).

Opmerking: De positie van hulplijnen wordt standaard uitgedrukt in absolute pixels gemeten vanaf de boven- of linkerkant

van het document, en wordt ten opzichte van de oorsprong van de liniaal weergegeven. Als u de positie van hulplijnen als een

percentage wilt weergeven, houdt u de Shift-toets ingedrukt terwijl u een hulplijn maakt of verplaatst.

Hulplijnen tonen of verbergen

❖

Selecteer Weergave > Hulplijnen > Hulplijnen tonen.

Elementen aan hulplijnen vastklikken

• Als u elementen aan hulplijnen wilt vastklikken, selecteert u Weergave > Hulplijnen > Vastklikken aan hulplijnen

• Als u hulplijnen aan elementen wilt vastklikken, selecteert u Weergave > Hulplijnen > Hulplijnen aan elementen

vastklikken.

Opmerking: Als u elementen zoals AP-elementen (met absolute positie), tabellen en afbeeldingen groter of kleiner maakt,

worden de desbetreffende elementen automatisch aan de hulplijnen vastgeklikt.

DREAMWEAVER CS3

Handboek

167

Alle hulplijnen vergrendelen of ontgrendelen

❖

Selecteer Weergave > Hulplijnen > Hulplijnen vergrendelen.

De positie van een hulplijn weergeven en de hulplijn naar een bepaalde positie verplaatsen

1 Wijs de hulplijn met de muiscursor aan om de positie ervan weer te geven.

2 Dubbelklik op de hulplijn.

3 Geef de nieuwe positie op in het dialoogvenster Hulplijn verplaatsen en klik op OK.

De afstand tussen hulplijnen weergeven

❖

Houd de Control-toets (Windows) of Command-toets (Macintosh) ingedrukt en wijs met de muiscursor een punt

ergens tussen beide hulplijnen aan.

Opmerking: De maateenheid is gelijk aan de maateenheid die voor de linialen wordt gebruikt.

Het zichtbare gebied van een webbrowser emuleren

❖

Selecteer Weergave > Hulplijnen en selecteer vervolgens een vooraf ingestelde browsergrootte in het menu.

Een hulplijn verwijderen

❖

Sleep de hulplijn uit het document.

Hulplijninstellingen wijzigen

❖

Selecteer Weergave > Hulplijnen > Hulplijnen bewerken, stel de volgende opties in en klik op OK.

Hulplijnkleur Hier kunt u opgeven welke kleur de hulplijnen moeten hebben. Klik op de kleurstaal en selecteer een kleur

met de kleurkiezer of typ een hexadecimaal cijfer in het tekstvak.

Afstandskleur Hier kunt u opgeven welke kleur de lijnen voor afstandsaanduidingen moeten hebben wanneer u met de

muiscursor een punt tussen twee hulplijnen aanwijst. Klik op de kleurstaal en selecteer een kleur met de kleurkiezer of typ

een hexadecimaal cijfer in het tekstvak.

Hulplijnen tonen Hiermee kunt u de hulplijnen in de ontwerpweergave zichtbaar maken.

Hulplijnen magnetisch maken Hiermee kunt u zorgen dat pagina-elementen aan hulplijnen vastklikken wanneer u de

elementen op de pagina verplaatst.

Hulplijnen vergrendelen Hiermee zet u de hulplijnen vast op hun plaats.

Hulplijnen op elementen afstemmen Als u deze optie selecteert, worden hulplijnen vastgeklikt aan elementen op de pagina

wanneer u de hulplijnen versleept.

Alles wissen Hiermee verwijdert u alle hulplijnen van de pagina.

Hulplijnen met sjablonen gebruiken

Wanneer u hulplijnen aan een Dreamweaver-sjabloon toevoegt, worden de hulplijnen in alle exemplaren van de sjabloon

overgenomen. Hulplijnen in sjabloonexemplaren worden echter als bewerkbare gebieden behandeld, zodat u ze kunt

wijzigen. Gewijzigde hulplijnen in sjabloonexemplaren worden echter weer op hun oorspronkelijke plaats teruggezet

wanneer het exemplaar met de hoofdsjabloon wordt bijgewerkt.

U kunt ook uw eigen hulplijnen aan exemplaren van een sjabloon toevoegen. Hulplijnen die u op deze manier toevoegt,

worden niet overschreven wanneer het sjabloonexemplaar door de hoofdsjabloon wordt overschreven.

Zie ook

“AP-elementen uitlijnen” op pagina 154

“AP-elementen verplaatsen” op pagina 154

DREAMWEAVER CS3

Handboek

168

Het lay-outraster gebruiken

Het raster bestaat uit horizontale en verticale lijnen die in het documentvenster worden weergegeven. Het raster is handig

om objecten precies te plaatsen. U kunt absoluut geplaatste pagina-elementen automatisch aan het raster laten vastklikken

wanneer u deze pagina-elementen verplaatst. U kunt ook het raster wijzigen of het vastklikgedrag aanpassen door de

rasterinstellingen te veranderen. Vastklikken werkt ongeacht of het raster zichtbaar is.

Zie ook

“AP-elementen uitlijnen” op pagina 154

“AP-elementen verplaatsen” op pagina 154

Het raster tonen of verbergen

❖

Selecteer Weergave > Raster > Raster tonen.

Vastklikken in- of uitschakelen

❖

Selecteer Weergave > Raster > Vastklikken aan raster.

Rasterinstellingen wijzigen

1 Selecteer Weergave > Raster > Rasterinstellingen.

2 Stel de opties in en klik op OK om de wijzigingen toe te passen.

Kleur Hiermee kunt u de kleur van de rasterlijnen opgeven. Klik op de kleurstaal en selecteer een kleur met de kleurkiezer

of typ een hexadecimaal cijfer in het tekstvak.

Raster tonen Hiermee maakt u het raster in de ontwerpweergave zichtbaar.

Raster magnetisch maken Als u deze optie selecteert, worden de pagina-elementen aan de rasterlijnen vastgeklikt.

Tussenruimte Hiermee stelt u de afstand tussen de rasterlijnen in. Geef een waarde op en selecteer in het menu Pixels,

Inches of Centimeters.

Weergave Hier kunt u opgeven of u de rasterlijnen als lijnen of stippen wilt weergeven.

Opmerking: Als Raster tonen niet is geselecteerd, wordt er geen raster in het document weergegeven en zijn er geen wijzigingen

zichtbaar.

Een overtrekafbeelding gebruiken

U kunt een overtrekafbeelding gebruiken als hulpmiddel om een pagina-ontwerp na te bootsen dat met een grafische

toepassing zoals Adobe Freehand of Fireworks is gemaakt.

Een overtrekafbeelding is een JPEG-, GIF- of PNG-afbeelding die op de achtergrond van het documentvenster is geplaatst.

U kunt de afbeelding verbergen, de doorzichtigheid ervan instellen en de positie ervan wijzigen.

De overtrekafbeelding is alleen zichtbaar in Dreamweaver. De afbeelding is niet zichtbaar wanneer u de pagina in een

browser bekijkt. Wanneer de overtrekafbeelding zichtbaar is, zijn de echte achtergrondafbeelding en -kleur van de pagina

niet in het documentvenster zichtbaar. De achtergrondafbeelding en -kleur zijn echter wel zichtbaar in een browser.

Een overtrekafbeelding in het documentvenster plaatsen

1 Ga op een van de volgende manieren te werk:

• Selecteer Weergave > Overtrekafbeelding > Laden.

• Selecteer Wijzigen > Pagina-eigenschappen en klik vervolgens op Bladeren (naast het tekstvak Overtrekafbeelding).

2 Selecteer een afbeeldingsbestand en klik op Selecteren (Windows) of Kies (Macintosh).

3 Geef een transparantiewaarde voor de afbeelding op door de schuifregelaar Afbeeldingstransparantie te verslepen en

klik vervolgens op OK.

DREAMWEAVER CS3

Handboek

169

Als u een andere overtrekafbeelding wilt kiezen of de transparantie van de huidige overtrekafbeelding wilt wijzigen, kunt u

te allen tijde Wijzigen > Pagina-eigenschappen kiezen.

De overtrekafbeelding tonen of verbergen

❖

Selecteer Weergave > Overtrekafbeelding > Tonen.

De positie van een overtrekafbeelding wijzigen

❖

Selecteer Weergave > Overtrekafbeelding > Positie aanpassen.

•

Als u de positie van de overtrekafbeelding precies wilt opgeven, geeft u de coördinaatwaarden op in de tekstvakken X en Y.

• Als u de afbeelding in stappen van één pixel wilt verplaatsen, doet u dat met de pijltoetsen.

De positie van de overtrekafbeelding herstellen

❖

Selecteer Weergave > Overtrekafbeelding > Positie herstellen.

De overtrekafbeelding wordt in de linkerbovenhoek van het documentvenster teruggezet (0,0).

De overtrekafbeelding uitlijnen ten opzichte van een geselecteerd element

1 Selecteer een element in het documentvenster.

2 Selecteer Weergave > Overtrekafbeelding > Uitlijnen ten opzichte van selectie.

De linkerbovenhoek van de overtrekafbeelding wordt uitgelijnd ten opzichte van de linkerbovenhoek van het geselecteerde

element.

Inhoud in tabellen presenteren

Over tabellen

Tabellen zijn een krachtig hulpmiddel om tabelgegevens te presenteren en tekst en afbeeldingen op een HTML-pagina op

te maken. Een tabel bestaat uit een of meer rijen. Elke rij bestaat uit een of meer cellen. Hoewel kolommen meestal niet

expliciet in HTML-code worden vastgelegd, kunt u in Dreamweaver zowel kolommen als rijen en cellen manipuleren.

Via Dreamweaver kunt u tabellen op twee manieren weergeven en bewerken: in de standaardmodus, waarin tabellen als

een raster van rijen en kolommen worden gepresenteerd, en in de lay-outmodus, waarin u vakken op de pagina kunt

tekenen, groter en kleiner kunt maken en kunt verplaatsen en bovendien tabellen voor de onderliggende structuur kunt

gebruiken.

In Dreamweaver worden de tabelbreedte en kolombreedte voor elke kolom weergegeven wanneer de tabel is geselecteerd

of de invoegpositie zich in de tabel bevindt. Naast de breedtes worden de pijlen voor het tabelkopmenu en de

kolomkopmenu's weergegeven. Gebruik de menu's om veelgebruikte tabelopdrachten snel te bereiken. U kunt de breedten

en menu's in- of uitschakelen.

Als u geen breedte voor de tabel of een kolom ziet, is er voor die tabel of kolom geen breedte in de HTML-code vastgelegd.

Als er twee cijfers worden weergegeven, komt de breedte die in de ontwerpweergave zichtbaar is, niet overeen met de

breedte die in de HTML-code is vastgelegd. Dit kan gebeuren wanneer u een tabel groter of kleiner maakt door de

rechterbenedenhoek ervan te verslepen, of wanneer u aan een cel inhoud toevoegt die groter is dan de ingestelde celbreedte.

Als u de kolombreedte bijvoorbeeld instelt op 200 pixels en inhoud toevoegt die de kolom uitrekt naar 250 pixels, worden

in deze kolom twee cijfers weergegeven: 200 (de breedte die in de code is opgegeven) en (250) tussen haakjes (de visuele

breedte van de kolom, zoals deze op het scherm wordt weergegeven).

Opmerking: U kunt uw pagina's ook opmaken met CSS-positionering.

DREAMWEAVER CS3

Handboek

170

Zie ook

“Pagina's met CSS opmaken” op pagina 140

“Pagina's opmaken in lay-outmodus” op pagina 183

Voorkeursvolgorde voor tabelopmaak in HTML

Wanneer u tabellen in de ontwerpweergave opmaakt, kunt u eigenschappen voor de volledige tabel of voor geselecteerde

rijen, kolommen of cellen in de tabel instellen. Wanneer u een eigenschap (zoals de achtergrondkleur of uitlijning) op een

bepaalde waarde voor de hele tabel instelt en op een andere waarde voor afzonderlijke cellen, heeft de celopmaak voorrang

boven de rijopmaak. De rijopmaak heeft op zijn beurt voorrang boven de tabelopmaak.

Voor tabelopmaak geldt de volgende volgorde:

1 Cellen

2 Rijen

3 Tabe l

Als u bijvoorbeeld de achtergrondkleur voor één cel op blauw instelt en vervolgens de achtergrondkleur van de hele tabel

op geel, wordt de blauwe cel niet geel omdat de celopmaak voorrang heeft boven de tabelopmaak.

Opmerking: Wanneer u eigenschappen voor een kolom instelt, worden in Dreamweaver de kenmerken van de

td-tag voor elke

cel in de kolom gewijzigd.

Tabelcellen splitsen en samenvoegen

U kunt elk gewenst aantal aangrenzende cellen samenvoegen (op voorwaarde dat de volledige selectie uit een regel of

rechthoek met cellen bestaat) om één cel te maken die meerdere kolommen of rijen omvat. U kunt een cel in een

willekeurig aantal rijen op kolommen splitsen, ongeacht of de cel eerder was samengevoegd. Dreamweaver herstructureert

de tabel automatisch (door de noodzakelijke

colspan-ofrowspan kenmerken toe te voegen) om de opgegeven indeling te

verkrijgen.

In het volgende voorbeeld zijn de cellen in het midden van de eerste twee rijen samengevoegd in één cel die twee rijen

omspant.

Een tabel invoegen en inhoud toevoegen

Maak een nieuwe tabel met de invoegbalk of het menu Invoegen. Voeg vervolgens aan de tabelcellen tekst en afbeeldingen

toe op dezelfde manier als u dit buiten een tabel doet.

1 Plaats in de ontwerpweergave van het documentvenster de invoegpositie op de plaats waar u de tabel wilt weergeven.

Opmerking: Als uw document leeg is, kunt u de invoegpositie alleen aan het begin van het document plaatsen.

• Selecteer Invoegen > Tabel.

• Klik in de categorie Algemeen van de invoegbalk op Tabel.

2 Stel de kenmerken van het dialoogvenster Tabel in en klik op OK om de tabel te maken.

Rijen Hiermee bepaalt u het aantal tabelrijen.

Kolommen Hiermee bepaalt u het aantal tabelkolommen.

Tabelbreedte Hier kunt u de tabelbreedte opgeven in pixels of als percentage van de breedte van het browservenster.

Randdikte Hier kunt u de breedte van de tabelranden in pixels opgeven.

Celafstand Hier kunt u het aantal pixels tussen aangrenzende tabelcellen opgeven.

DREAMWEAVER CS3

Handboek

171

Wanneer u niet expliciet waarden voor de randdikte of celafstand en celopvulling toewijst, worden in de meeste browsers

de randdikte van de tabel en de celopvulling op één pixel ingesteld en de celafstand op twee pixels. Als u wilt dat de tabel in

een browser zonder randen, opvulling of afstand wordt weergegeven, stelt u Celopvulling en Celafstand in op 0.

Celopvulling Hier kunt u het aantal pixels tussen de rand van een cel en de inhoud ervan opgeven.

Geen Hiermee kunt u de weergave van kolom- of rijkoppen voor de tabel uitschakelen.

Links Hiermeewordtvandeeerstekolomvandetabeleenkolommetkoppengemaakt,zodatuvoorelkerij in de tabel een

kop kunt opgeven.

Boven Hiermee wordt van de eerste rij van de tabel een rij met koppen gemaakt, zodat u voor elke kolom in de tabel een

kop kunt opgeven.

Beide Hiermee kunt u kolom- en rijkoppen voor de tabel opgeven.

Het is raadzaam koppen te gebruiken ingeval bezoekers van uw website schermleesapparaten gebruiken. Met

schermleesapparaten worden tabelkoppen gelezen, zodat de gebruikers van deze apparaten beter kunnen nagaan waar zich

welke gegevens bevinden in de tabel.

Bijschrift Hiermee kunt u voor de tabel een titel opgeven die buiten de tabel wordt weergegeven.

Bijschrift uitlijnen Hiermee geeft u op waar het bijschrift ten opzichte van de tabel moet verschijnen.

Samenvatting Hier kunt u een beschrijving van de tabel opnemen. De samenvatting wordt door schermleesapparaten

gelezen, maar de tekst verschijnt niet in de browser van de gebruiker.

Zie ook

“Tekst toevoegen en opmaken” op pagina 218

“Afbeeldingen toevoegen en wijzigen” op pagina 233

Tabelgegevens importeren en exporteren

U kunt tabelgegevens die met een andere toepassing (zoals Microsoft Excel) zijn gemaakt en met scheidingstekens (zoals

tabs, komma's, puntkomma's of dubbelpunten) zijn opgeslagen, in Dreamweaver importeren en opmaken als tabel.

U kunt tabelgegevens ook vanuit Dreamweaver naar een tekstbestand exporteren, waarbij de inhoud van aangrenzende

cellen met een scheidingsteken is afgebakend. U kunt komma's, dubbele punten, puntkomma's of spaties als

scheidingsteken gebruiken. Wanneer u een tabel exporteert, wordt de volledige tabel geëxporteerd. U kunt niet gedeeltes

van een tabel voor een exportbewerking selecteren.

Als u alleen bepaalde gegevens uit een tabel wilt exporteren (bijvoorbeeld de eerste zes rijen of de eerste zes kolommen),

kopieert u de cellen met de desbetreffende gegevens, plakt u de cellen buiten de tabel (om een nieuwe tabel te maken) en

exporteert u de nieuwe tabel.

Tabelgegevens importeren

1 Ga op een van de volgende manieren te werk:

• Selecteer Bestand > Importeren > Tabelgegevens.

• Ga naar de categorie Gegevens op de invoegbalk en klik op het pictogram Tabelgegevens importeren.

• Selecteer Invoegen> Tabelobjecten > Tabelgegevens importeren.

2 Geef de opties voor de tabelgegevens op en klik op OK.

Gegevensbestand Hier kunt u de naam opgeven van het bestand dat u wilt importeren. Klik op de knop Bladeren om een

bestand te selecteren.

Scheidingsteken Hier kunt u het scheidingsteken opgeven dat wordt gebruikt in het bestand dat u wilt importeren.

Als u Overige selecteert, wordt er rechts van het pop-upmenu een tekstvak weergegeven. Typ het scheidingsteken dat in

uw bestand wordt gebruikt.

DREAMWEAVER CS3

Handboek

172

Opmerking: Geef het scheidingsteken op dat is gebruikt op het moment dat het gegevensbestand werd opgeslagen. Als u dit niet

doet, wordt het bestand niet juist ingevoerd en worden uw gegevens verkeerd in een tabel opgemaakt.

Tabelbreedte Hier kunt u de breedte van de tabel opgeven.

• Selecteer Aanpassen aan gegevens om elke kolom breed genoeg te maken voor de langste tekenreeks in de kolom.

• Selecteer Instellen om een vaste tabelbreedte op te geven in pixels of als percentage van de breedte van het

browservenster.

Rand Hier kunt u de breedte van de tabelranden opgeven in pixels.

Celopvulling Hier kunt u het aantal pixels tussen de inhoud van een cel en de grenzen van de cel opgeven.

Celafstand Hier kunt u het aantal pixels tussen aangrenzende tabelcellen opgeven.

Wanneer u niet expliciet waarden voor de randen, celafstand en celopvulling toewijst, worden in de meeste browsers de

randdikte van de tabel en de celopvulling op één pixel ingesteld en de celafstand op twee pixels. Als u wilt dat de tabel in

een browser zonder opvulling of afstand wordt weergegeven, stelt u Celopvulling en Celafstand in op 0. Als u de cel- en

tabelgrenzen wilt weergeven wanneer de randdikte is ingesteld op 0, selecteert u Weergave > Visuele hulpmiddelen >

Tabelrand en.

Bovenste rij opmaken Hier kunt u opgeven welke opmaak op de bovenste rij van de tabel moet worden toegepast. Selecteer

een van de volgende vier opmaakopties: geen opmaak, vet, cursief of vet cursief.

Een tabel exporteren

1 Plaats de invoegpositie in een van de cellen van de tabel.

2 Selecteer Bestand > Exporteren > Tabel.

3 Geef de volgende opties op:

Scheidingsteken Hiermee geeft u op met welk scheidingsteken gegevens in het geëxporteerde bestand van elkaar worden

gescheiden.

Regeleinden Hier kunt u opgeven in welk besturingssysteem u het geëxporteerde bestand wilt openen: Windows,

Macintosh of UNIX. (Regeleinden binnen tekst worden in verschillende besturingssystemen op verschillende manieren

aangegeven.)

4 Klik op Exporteren.

5 Voer een naam in voor het bestand en klik op Opslaan.

Tabelelementen selecteren

U kunt in een keer een volledige tabel, rij of kolom selecteren. U kunt ook een of meer aparte cellen selecteren.

Wanneer u met de muiscursor een tabel, rij, kolom of cel aanwijst, worden in Dreamweaver alle cellen in de selectie

gemarkeerd, zodat u precies weet welke cellen worden geselecteerd. Dit is handig als u werkt met tabellen zonden randen,

cellen die meerdere kolommen of rijen omvatten of geneste cellen. U kunt de markeerkleur wijzigen in Voorkeuren.

Als u met de muiscursor een tabelrand aanwijst en vervolgens de Control-toets (Windows) of de Command-toets

(Macintosh) ingedrukt houdt, wordt de volledige tabelstructuur (dat wil zeggen alle cellen in de tabel) gemarkeerd. Dit is

handig als u met geneste tabellen werkt en de structuur van een van de tabellen wilt zien.

Een volledige tabel selecteren

❖

Ga op een van de volgende manieren te werk:

• Klik in de linkerbovenhoek van de tabel, op de boven- of onderrand van de tabel of op de rand van een rij of kolom.

Opmerking: De muiscursor verandert in een tabelrasterpictogram wanneer u de tabel kunt selecteren (tenzij u op de rand van

een rij of kolom klikt).

• Klik in een tabelcel en selecteer vervolgens de <table>-tag in de tagkiezer in de linkerbenedenhoek van het

documentvenster.

• Klik in een tabelcel en selecteer vervolgens Wijzigen > Tabel > Tabel selecteren.

DREAMWEAVER CS3

Handboek

173

• Klik in een tabelcel, klik op het tabelkopmenu en selecteer vervolgens Tabel selecteren. Er verschijnen selectiegrepen op

de onder- en rechterrand van de geselecteerde tabel .

Aparte of meerdere rijen of kolommen selecteren

1 Wijs met de muiscursor de linkerrand van een rij of de bovenrand van een kolom aan.

2 Wanneer de muiscursor in een selectiepijl verandert, klikt u om een rij of kolom te selecteren of sleept u om meerdere

rijen of kolommen te selecteren.

Eén kolom selecteren

1 Klik in de kolom.

2 Klik op het kolomkopmenu en kies Kolom selecteren

Eén cel selecteren

❖

Ga op een van de volgende manieren te werk:

• Klik in de cel en selecteer vervolgens de <td>-tag in de tagkiezer in de linkerbenedenhoek van het documentvenster.

• Houd de Control-toets (Windows) of de Command-toets (Macintosh) ingedrukt en klik in de cel.

• Klik in een cel en selecteer Bewerken > Alles selecteren.

Selecteer na selectie van een cel nogmaals Bewerken > Alles selecteren om de volledige tabel te selecteren.

Selecteer een regel of een rechthoekig blok cellen.

❖

Ga op een van de volgende manieren te werk:

• Sleep vanuit een cel naar een andere cel.

• Klik in één cel, houd de Control-toets (Windows) of de Command-toets (Macintosh) ingedrukt en klik in dezelfde cel

om deze te selecteren. Houd vervolgens de Shift-toets ingedrukt en klik in een andere cel.

Alle cellen die zich in het lineaire of rechthoekige gebied bevinden dat door de twee cellen wordt afgebakend, worden

geselecteerd.

Niet-aangrenzende cellen selecteren

❖

Houd de Control-toets (Windows) of de Command-toets (Macintosh) ingedrukt en klik in de gewenste cellen, rijen of

kolommen.

Als een cel, rij of kolom waarop u klikt nog niet is geselecteerd, wordt deze aan de selectie toegevoegd. Als deze al was

geselecteerd, wordt deze uit de selectie verwijderd.

DREAMWEAVER CS3

Handboek

174

De markeerkleur voor tabelelementen wijzigen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer in de categorieënlijst links de optie Markeren, maak een van de volgende wijzigingen en klik op OK.

• Als u de markeerkleur voor tabelelementen wilt wijzigen, klikt u op het vak Kleur bij aanwijzen met muis en selecteert

u vervolgens een markeerkleur met de kleurkiezer (of typt u in het tekstvak de hexadecimale waarde voor de

markeerkleur).

• Als u de markering van tabelelementen wilt in- of uitschakelen, schakelt u de optie Weergeven bij Aanwijzen met muis

in of uit.

Opmerking: Deze opties zijn van toepassing op alle objecten (zoals AP-elementen en weergavetabellen en -cellen in lay-

outmodus) die in Dreamweaver worden gemarkeerd wanneer u ze met de muisaanwijzer aanwijst.

Tabeleigenschappen instellen

Met de eigenschappencontrole kunt u tabellen bewerken.

1 Selecteer een tabel.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek en pas de

eigenschappen aan uw wensen aan.

Tabel-id Hier wordt de id van de tabel weergegeven.

Rijen en kolommen Hier wordt het aantal rijen en kolommen in de tabel aangegeven.

B en H Hier kunt u de tabelbreedte opgeven in pixels of als percentage van de breedte van het browservenster.

Opmerking: U hoeft de hoogte van een tabel meestal niet in te stellen.

Rand Hier kunt u de breedte van de tabelranden in pixels opgeven.

Wanneer u niet expliciet waarden voor de randen, celafstand en celopvulling toewijst, worden in de meeste browsers de

randdikte van de tabel en de celopvulling op één pixel ingesteld en de celafstand op twee pixels. Als u wilt dat de tabel in

een browser zonder opvulling of afstand wordt weergegeven, stelt u Rand, Celopvulling en Celafstand in op 0. Als u de cel- en

tabelgrenzen wilt weergeven wanneer de randdikte is ingesteld op 0, selecteert u Weergave > Visuele hulpmiddelen >

Tabelrand en.

Celopvulling Hier kunt u het aantal pixels tussen de inhoud van een cel en de grenzen van de cel opgeven.

Celafstand Hier kunt u het aantal pixels tussen aangrenzende tabelcellen opgeven.

Uitlijnen Hiermee bepaalt u waar de tabel verschijnt ten opzichte van andere elementen in dezelfde alinea, zoals tekst of

afbeeldingen.

Met Links wordt de tabel links uitgelijnd aan de linkerkant van andere elementen (zodat tekst in dezelfde alinea rond de

rechterkant van de tabel loopt), met Rechts wordt tabel rechts uitgelijnd aan de rechterkant van andere elementen (zodat

tekst links rond de tabel loopt) en met Centreren wordt de tabel gecentreerd (zodat tekst boven en/of onder de tabel

verschijnt). Met Standaard wordt aangegeven dat de standaarduitlijning in de browser moet worden gevolgd.

Wanneer u de uitlijning op Standaard instelt, wordt de overige inhoud niet naast de tabel weergegeven. Gebruik Links of

Rechts uitlijnen als u een tabel naast andere inhoud wilt weergeven.

Kolombreedten wissen en Kolomhoogten wissen: hiermee verwijdert u alle expliciet opgegeven rijhoogten of

kolombreedten uit de tabel.

Met Tabelbreedten omzetten in pixels en Tabelhoogten omzetten in pixels kunt u de breedte of hoogte van elke kolom in

de tabel instellen op de huidige breedte in pixels (de breedte van de volledige tabel wordt ook ingesteld op de huidige breedte

in pixels).

Met Tabelbreedten omzetten in percentages en Tabelhoogten omzetten in percentages kunt u de breedte of hoogte van

elke kolom in de tabel instellen op de huidige breedte uitgedrukt als percentage van de breedte van het documentvenster

(de breedte van de volledige tabel wordt ook ingesteld op de huidige breedte als percentage van de breedte van het

documentvenster).

DREAMWEAVER CS3

Handboek

175

Achtergrondkleur Hier kunt u de achtergrondkleur van de tabel opgeven.

Randkleur Hier kunt u de kleur van de tabelranden opgeven.

Achtergrondafbeelding Hier kunt u de achtergrondafbeelding van de tabel opgeven.

Als u een waarde in een tekstvak hebt opgegeven, drukt u op Tab of Enter (Windows) of op Return (Macintosh) om de

waarde toe te passen.

Cel-, rij- of kolomeigenschappen instellen

Met de eigenschappencontrole kunt u cellen en rijen in een tabel bewerken.

1 Selecteer de kolom of rij.

2 Stel in de eigenschappencontrole (Venster > Eigenschappen) de volgende opties in:

Horizontaal Hier kunt u de horizontale uitlijning van de inhoud van een cel, rij of kolom opgeven. U kunt de inhoud links,

rechts of gecentreerd in de cellen uitlijnen. U kunt ook opgeven dat de standaarduitlijning van de browser moet worden

gebruikt (meestal links voor gewone cellen en gecentreerd voor kopcellen).

Verticaal Hier kunt u de verticale uitlijning van de inhoud van een cel, rij of kolom opgeven. U kunt de inhoud boven,

gecentreerd, onder of op de basislijn in de cellen uitlijnen. U kunt ook opgeven dat de standaarduitlijning van de browser

moet worden gebruikt (meestal gecentreerd).

B en H Hier kunt u de breedte en hoogte van de geselecteerde cellen opgeven in pixels of als percentage van de breedte of

hoogte van de volledige tabel. Als u een percentage wilt opgeven, typt u achter de gewenste waarde een percentageteken

(%). Als u wilt dat de juiste breedte of hoogte in de browser wordt bepaald op grond van de inhoud van de cel en de breedten

en hoogten van de andere kolommen en rijen, laat u het veld leeg (dit is de standaardinstelling).

In een browser worden de rijhoogte en kolombreedte standaard zodanig ingesteld dat de breedste afbeelding of de langste

regel in een kolom past. Daarom wordt een kolom soms veel breder dan de andere kolommen in de tabel wanneer u er

inhoud aan toevoegt.

Opmerking: U kunt een hoogte opgeven als percentage van de totale tabelhoogte. In browsers wordt de rij dan echter niet altijd

volgens het opgegeven percentage weergegeven.

Achtergrond (bovenste tekstveld) Hier kunt u de naam van het bestand met de achtergrondafbeelding voor een cel, kolom

of rij opgeven. Klik op het mappictogram om naar een afbeelding te bladeren, of selecteer een afbeeldingsbestand met het

pictogram Wijzen naar bestand.

Achtergrond (onderste kleurstaal en tekstveld) Hier wordt de achtergrondkleur voor een cel, kolom of rij aangegeven, zoals

geselecteerd met de kleurkiezer.

Rand Dit is de kleur voor de celranden.

Cellen samenvoegen Hiermee kunt u geselecteerde cellen, rijen of kolommen in één cel samenvoegen. U kunt cellen alleen

samenvoegen als ze een rechthoekig of lineair blok vormen.

Cel splitsen Hiermee kunt u een cel in twee of meer cellen splitsen. U kunt niet dan één cel tegelijk splitsen. De knop wordt

uitgeschakeld als u meer dan één cel selecteert.

Geen terugloop Hiermee voorkomt u dat een regel terugloopt, zodat alle tekst in een bepaalde cel op één regel blijft staan.

Als Geen terugloop is ingeschakeld, worden de cellen breder en passen zij zich aan bij de gegevens die u in een cel typt of

plakt. (Normaal gesproken worden cellen horizontaal vergroot om het langste woord of de breedste afbeelding in de cel in

te passen en worden zij vervolgens verticaal vergroot om de andere inhoud in te passen.)

Kop Hiermee worden de geselecteerde cellen als tabelkopcellen opgemaakt. De inhoud van tabelkopcellen wordt standaard

vet en gecentreerd weergegeven.

U kunt breedten en hoogten in pixels of als percentages opgeven. U kunt pixels te allen tijde omzetten in percentages en

omgekeerd.

DREAMWEAVER CS3

Handboek

176

Opmerking: Als u de eigenschappen voor een kolom instelt, verandert Dreamweaver de kenmerken van de td-tag die

correspondeert met elke cel in de kolom. Wanneer u echter bepaalde eigenschappen voor een rij instelt, verandert Dreamweaver

de kenmerken van de

tr-tag in plaats van de kenmerken van elke td-tag in de rij. Wanneer u dezelfde opmaak toepast op alle

cellen in een rij, produceert u een schonere en beknoptere HTML-code door de opmaak toe te passen op de

tr-tag.

3 Druk op Tab of Enter (Windows) of op Return (Macintosh) om de waarde toe te passen.

Tabellen eenvoudiger bewerken met de modus Uitgebreide tabellen

Met de modus Uitgebreide tabellen worden aan alle tabellen in een document celopvulling en celafstand toegevoegd en

worden de tabelranden vergroot om bewerkingen te vereenvoudigen. In deze modus kunt u tabelitems selecteren of de

invoegpositie precies neerzetten.

U kunt bijvoorbeeld een tabel uitbreiden om de invoegpositie links of rechts van een afbeelding te plaatsen zonder per

ongeluk de afbeelding of een tabelcel te selecteren.

Opmerking: Nadat u een selectie hebt gemaakt of de invoegpositie op de gewenste plaats hebt gezet, gaat u terug naar de

standaardmodus van de ontwerpweergave om uw bewerkingen uit te voeren. Bepaalde visuele bewerkingen (zoals groter of

kleiner maken) leveren in de modus Uitgebreide tabellen niet de verwachte resultaten op.

Overschakelen naar de modus Uitgebreide tabellen

1 Als u in codeweergave werkt, selecteert u Weergave > Ontwerp of Weergave > Code en Ontwerp (u kunt vanuit de

codeweergave niet direct naar de modus Uitgebreide tabellen gaan).

2 Ga op een van de volgende manieren te werk:

• Selecteer Weergave > Tabelmodus > Modus Uitgebreide tabellen.

• Klik in de categorie Lay-out van de invoegbalk op Modus Uitgebreide tabellen.

Een balk die is gelabeld als Modus Uitgebreide tabellen verschijnt langs de bovenrand van het documentvenster. In

Dreamweaver worden celopvulling en celafstand toegevoegd aan alle tabellen op de pagina en worden de tabelranden

vergroot.

De modus Uitgebreide tabellen verlaten

❖

Ga op een van de volgende manieren te werk:

• Klik op Afsluiten in de balk die is gelabeld als Modus Uitgebreide tabellen en die langs de bovenrand van het

documentvenster wordt weergegeven.

• Selecteer Weergave > Tabelmodus > Standaardmodus.

• Klik in de categorie Lay-out van de invoegbalk op Standaardmodus.

Tabellen en cellen opmaken

U kunt het uiterlijk van tabellen wijzigen door de eigenschappen van de tabel en bijbehorende cellen in te stellen, of door

een vooraf vastgelegd ontwerp op de tabel toe te passen. Voordat u de tabel- en celeigenschappen instelt, moet u eraan

denken dat de voorrangsvolgorde voor tabelopmaak 'cellen, rijen, tabellen' is.

Als u tekst in een tabelcel wilt opmaken, voert u dezelfde procedures uit als u buiten een tabel zou doen.

Zie ook

“Tekst toevoegen en opmaken” op pagina 218

De opmaak wijzigen van een tabel, rij, cel of kolom

1 Selecteer een tabel, cel, rij of kolom.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek en pas de

eigenschappen aan uw wensen aan.

DREAMWEAVER CS3

Handboek

177

3 Wijzig de eigenschappen als dat nodig is.

Voor meer informatie over de opties klikt u op de knop Help in de eigenschappencontrole.

Opmerking: Als u de eigenschappen voor een kolom instelt, verandert Dreamweaver de kenmerken van de

td-tag die

correspondeert met elke cel in de kolom. Wanneer u echter bepaalde eigenschappen voor een rij instelt, verandert Dreamweaver

de kenmerken van de

tr-tag in plaats van de kenmerken van elke td-tag in de rij. Wanneer u dezelfde opmaak toepast op alle

cellen in een rij, produceert u een schonere en beknoptere HTML-code door de opmaak toe te passen op de

tr-tag.

Toegankelijkheidswaarden voor een tabel toevoegen of bewerken in codeweergave

❖

Bewerk de gewenste kenmerken in de code.

Als u de tags snel in de code wilt terugvinden, klikt u in de tabel en selecteert u vervolgens de

<table>-tag in de tagkiezer

onderaan in het documentvenster.

Toegankelijkheidswaarden voor een tabel toevoegen of bewerken in ontwerpweergave

• Als u het tabelbijschrift wilt bewerken, markeert u het bijschrift en typt u een nieuw bijschrift.

• Als u de uitlijning van het bijschrift wilt bewerken, plaatst u de invoegpositie in het bijschrift, klikt u met de

rechtermuisknop (Windows) of houdt u de Command-toets ingedrukt en klikt u op de muisknop (Macintosh) en

selecteert u vervolgens Tagcode bewerken.

• Als u de tabelsamenvatting wilt bewerken, selecteert u de tabel, klikt u met de rechtermuisknop (Windows) of houdt u

de Command-toets ingedrukt en klikt u op de muisknop (Macintosh) en selecteert u vervolgens Tagcode bewerken.

Tabellen, kolommen en rijen groter/kleiner maken

Tabellen groter/kleiner maken

U kunt in een keer een volledige tabel of aparte rijen en kolommen groter/kleiner maken. Wanneer u een volledige tabel

groter/kleiner maakt, worden de afmetingen van alle cellen in de tabel naar verhouding aangepast. Als er voor de cellen

van een tabel expliciete breedten en hoogten zijn opgegeven, verandert bij vergroten of verkleinen de visuele grootte van de

cellen in het documentvenster, maar blijven de expliciet opgegeven breedten en hoogten van de cellen ongewijzigd.

U kunt een tabel groter/kleiner maken door een van de selectiegrepen te verslepen. In Dreamweaver worden bovenaan of

onderaan in de tabel de tabelbreedte en een tabelkopmenu weergegeven wanneer de tabel is geselecteerd of de invoegpositie

zich in de tabel bevindt.

Soms komen de kolombreedten die in de HTML-code zijn ingesteld niet overeen met de breedten die op het scherm

zichtbaar zijn. Als dit gebeurt, kunt u de breedten consistent maken. Er worden in Dreamweaver tabel- en kolombreedten

en kopmenu's weergegeven als hulpmiddel om uw tabellen op te maken. U kunt de breedten en menu's desgewenst in- of

uitschakelen.

Kolommen en rijen groter/kleiner maken

U kunt de breedte van een kolom of de hoogte van een rij wijzigen in de eigenschappencontrole. U kunt ook de randen van

de kolom of rij verslepen. Als de formaatwijziging niet goed gelukt is, kunt u de kolombreedten of rijhoogten wissen en

opnieuw beginnen.

Opmerking: U kunt de celbreedten en -hoogten ook direct in de HTML-code wijzigen met de codeweergave.

In Dreamweaver worden bovenaan of onderaan in elke kolom de kolombreedte en een kolomkopmenu weergegeven

wanneer de tabel is geselecteerd of de invoegpositie zich in de tabel bevindt. U kunt de kolomkopmenu's desgewenst in- of

uitschakelen.

Zie ook

“Werken met paginacode” op pagina 288

DREAMWEAVER CS3

Handboek

178

Tabellen, kolommen en rijen groter/kleiner maken

Een tabel groter/kleiner maken

❖

Selecteer de tabel.

• Als u de tabel horizontaal wilt vergroten/verkleinen, versleept u de selectiegreep aan de rechterkant.

• Als u de tabel verticaal wilt vergroten/verkleinen, versleept u de selectiegreep aan de onderkant.

• Als u de tabel horizontaal en verticaal wilt vergroten/verkleinen, versleept u de selectiegreep in de rechterbenedenhoek.

De breedte van een kolom wijzigen zonder de tabelbreedte te veranderen

❖

Versleep de rechterrand van de kolom die u wilt aanpassen.

De breedte van de aangrenzende kolom wordt ook gewijzigd. U maakt dus feitelijk twee kolommen groter/kleiner. De

visuele feedback geeft aan hoe de kolommen worden aangepast. De tabelbreedte blijft ongewijzigd.

Opmerking: Als de breedten in een tabel in percentages (niet in pixels) worden uitgedrukt en u de rechterrand van de meest

rechtse kolom versleept, wordt de breedte van de volledige tabel aangepast en worden alle kolommen verhoudingsgewijs breder

of smaller.

De breedte van een kolom wijzigen zonder de grootte van de andere kolommen te veranderen

❖

Houd de Shift-toets ingedrukt en versleep de rand van de kolom.

De breedte van één kolom wordt aangepast. De visuele feedback geeft aan hoe de kolommen worden aangepast. De

tabelbreedte wordt aangepast aan de kolom die u breder/smaller maakt.

De hoogte van een rij visueel wijzigen

❖

Versleep de onderrand van de rij.

Kolombreedten in code consistent maken met visuele breedten

1 Klik in een cel.

2 Klik op het tabelkopmenu en selecteer vervolgens Alle breedten consistent maken.

In Dreamweaver wordt de in de code vermelde breedte aangepast aan de visuele breedte.

Alle ingestelde breedten of hoogten in een tabel wissen

1 Selecteer de tabel.

DREAMWEAVER CS3

Handboek

179

2 Ga op een van de volgende manieren te werk:

• Selecteer Wijzigen > Tabel > Celbreedten wissen of Wijzigen > Tabel > Celhoogten wissen.

• Klik in de eigenschappencontrole (Venster > Eigenschappen) op de knop Rijhoogten wissen of de knop

Kolombreedten wissen .

• Klik op het tabelkopmenu en selecteer vervolgens Alle hoogten wissen of Alle breedten wissen.

De ingestelde breedte van een kolom wissen

❖

Klik in de kolom, klik op het kolomkopmenu en selecteer Kolombreedte wissen.

Tabel- en kolombreedten en menu's in- of uitschakelen

1 Selecteer Weergave > Visuele hulpmiddelen > Tabelbreedten.

2 Klik met de rechtermuisknop in de tabel (Windows), of houd de Control-toets ingedrukt en klik in de tabel (Macintosh).

Selecteer vervolgens Tabel > Tabelbreedten.

Rijen en kolommen toevoegen en verwijderen

Als u rijen en kolommen wilt toevoegen en verwijderen, doet u dat met Wijzigen > Tabel of gebruikt u het kolomkopmenu.

Als u in de laatste tabel van een cel op de Tab-toets drukt, wordt er automatisch een rij aan de tabel toegevoegd.

Eén rij of kolom toevoegen

❖

Klik in een cel en voer een van de volgende handelingen uit:

• Selecteer Wijzigen > Tabel > Rij invoegen, of selecteer Wijzigen > Tabel > Kolom invoegen.

Er verschijnt boven de invoegpositie een rij, of er verschijnt links van de invoegpositie een kolom.

• Klik op het kolomkopmenu en selecteer vervolgens Kolom links invoegen of Kolom rechts invoegen.

Meerdere rijen of kolommen toevoegen

1 Klik in een cel.

2 Selecteer Wijzigen > Tabel > Rijen of kolommen invoegen, vul het dialoogvenster in en klik op OK.

Invoegen Hiermee geeft u aan of u rijen of kolommen wilt invoegen.

Aantal rijen of Aantal kolommen Hiermee geeft u aan hoeveel kolommen u wilt invoegen.

Waar Hiermeegeeftuopofudenieuwerijenofkolommenvoorofnaderijofkolomvandegeselecteerdecelwiltinvoegen.

Een rij of kolom verwijderen

❖

Ga op een van de volgende manieren te werk:

• Klik in een cel van de rij of kolom die u wilt verwijderen. Selecteer vervolgens Wijzigen > Tabel > Rij verwijderen of

Wijzigen > Tabel > Kolom verwijderen.

• Selecteer een volledige rij of kolom. Selecteer vervolgens Bewerken > Wissen, of druk druk op Verwijderen.

DREAMWEAVER CS3

Handboek

180

Rijen of kolommen met de eigenschappencontrole toevoegen of verwijderen

1 Selecteer de tabel.

2 Voer een van de volgende handelingen uit in de eigenschappencontrole (Venster > Eigenschappen):

• Als u rijen wilt toevoegen of verwijderen, verhoogt of verlaagt u de waarde Rijen.

• Als u kolommen wilt toevoegen of verwijderen, verhoogt of verlaagt u de waarde Kolommen.

Opmerking: U wordt in Dreamweaver niet gewaarschuwd als u rijen en kolommen verwijdert die gegevens bevatten.

Cellen samenvoegen en splitsen

Gebruik de eigenschappencontrole of de opdrachten in het vervolgmenu Wijzigen > Tabel om cellen te splitsen of samen

te voegen.

U kunt in Dreamweaver ook cellen samenvoegen en splitsen door het aantal rijen of kolommen dat een cel omspant, te

vergroten of verkleinen.

Twee of meer cellen in een tabel samenvoegen

1 Selecteer de cellen op een aansluitende regel en in de vorm van een rechthoek.

In de volgende afbeelding bestaat de selectie uit een rechthoek met cellen, zodat de cellen kunnen worden samengevoegd.

In de volgende afbeelding bestaat de selectie niet uit een rechthoek, zodat de cellen niet kunnen worden samengevoegd.

2 Ga op een van de volgende manieren te werk:

• Selecteer Wijzigen > Tabel > Cellen samenvoegen.

• Klik in de uitgebreide eigenschappencontrole (Venster > Eigenschappen) op Cellen samenvoegen .

Opmerking: Als de knop niet zichtbaar is, klikt u op de pijl rechtsonder in de eigenschappencontrole om alle opties weer te

geven.

De inhoud van de afzonderlijke cellen worden in de resulterende samengevoegde cel geplaatst. De eigenschappen van de

eerst geselecteerde cel worden op de samengevoegde cel toegepast.

Een cel splitsen

1 Klik in de cel en voer een van de volgende handelingen uit:

• Selecteer Wijzigen > Tabel > Cel splitsen.

• Klik in de uitgebreide eigenschappencontrole (Venster > Eigenschappen) op Cel splitsen .

Opmerking: Als de knop niet zichtbaar is, klikt u op de pijl rechtsonder in de eigenschappencontrole om alle opties weer te

geven.

DREAMWEAVER CS3

Handboek

181

2 Geef in het dialoogvenster Cel splitsen op hoe u de cel wilt splitsen:

Cel splitsen in Hiermee geeft u op of u de cel in rijen of kolommen wilt splitsen.

Aantal rijen of Aantal kolommen Hiermee geeft u op in hoeveel rijen of kolommen u de wilt splitsen.

Het aantal rijen of kolommen dat een cel omspant vergroten of verkleinen

❖

Ga op een van de volgende manieren te werk:

• Selecteer Wijzigen > Tabel > Rowspan vergroten of Wijzigen > Tabel > Colspan vergroten.

• Selecteer Wijzigen > Tabel > Rowspan verkleinen of Wijzigen > Tabel > Colspan verkleinen.

Cellen kopiëren, plakken en verwijderen

U kunt één cel of meerdere cellen tegelijk kopiëren, plakken of verwijderen en de celopmaak behouden.

U kunt cellen op de invoegpositie of op de plaats van een selectie in een bestaande tabel plakken. Als u meerdere tabelcellen

wilt plakken, moet de inhoud van het Klembord compatibel zijn met de structuur van de tabel of van de selectie in de tabel

waarin de cellen worden geplakt.

Tabelcellen knippen of kopiëren

1 Selecteer een of meer cellen op een aansluitende regel en in de vorm van een rechthoek.

In de volgende afbeelding bestaat de selectie uit een rechthoek met cellen, zodat de cellen kunnen worden geknipt of

gekopieerd.

In de volgende afbeelding bestaat de selectie niet uit een rechthoek, zodat de cellen niet kunnen worden geknipt of

gekopieerd.

2 Selecteer Bewerken > Knippen, of Bewerken > Kopiëren.

Opmerking: Als u een volledige rij of kolom hebt geselecteerd en u selecteert Bewerken > Knippen, wordt de volledige rij of

kolom uit de tabel verwijderd (niet alleen de inhoud van de cellen).

Tabelcellen plakken

1 Selecteer waar u de cellen wilt plakken:

• Als u bestaande cellen wilt vervangen door de cellen die u plakt, selecteert u een set bestaande cellen met dezelfde

opmaakalsdecellenophetKlembord. (Alsubijvoorbeeldeenblokvan3x2cellenhebtgekopieerdofgeknipt,kuntu

een ander blok van 3 x 2 cellen selecteren om de cellen hier te plakken.)

• Als u een volledige rij cellen wilt plakken boven een bepaalde cel, klikt u op die cel.

• Als u een volledige kolom cellen links van een bepaalde cel wilt plakken, klikt u op die cel.

DREAMWEAVER CS3

Handboek

182

Opmerking: Als het Klembord minder dan een volledige rij of kolom cellen bevat en u klikt in een cel en plakt de cellen uit het

Klembord, kunnen de cel waarop u hebt geklikt en de aangrenzende cellen (al naar gelang de plaats ervan in de tabel) worden

vervangen door de cellen die u plakt.

• Als u met de geplakte cellen een nieuwe tabel maakt, plaatst u de invoegpositie buiten de tabel.

2 Selecteer Bewerken > Plakken.

Als u volledige rijen of kolommen in een bestaande tabel plakt, worden de rijen of kolommen aan de tabel toegevoegd. Als

u een aparte cel plakt, wordt de inhoud van de geselecteerde cel vervangen. Als u gegevens buiten een tabel plakt, worden

de rijen, kolommen of cellen gebruikt om een nieuwe tabel te definiëren.

Celinhoud verwijderen en de cellen intact laten

1 Selecteer een of meer cellen.

Opmerking: Zorg dat de selectie niet volledig uit rijen of kolommen bestaat.

2 Selecteer Bewerken > Wissen, of druk op Verwijderen.

Opmerking: Als er alleen volledige rijen of kolommen zijn geselecteerd wanneer u Bewerken > Wissen selecteert of op Delete

drukt, worden de volledige rijen of kolommen (en niet alleen de inhoud ervan) uit de tabel verwijderd.

Rijen of kolommen met samengevoegde cellen verwijderen

1 Selecteer de rij of kolom.

2 Selecteer Wijzigen > Tabel > Rij verwijderen of Wijzigen > Tabel > Kolom verwijderen.

Tabellen nesten

Een geneste tabel is een tabel in een cel van een andere tabel. U kunt een geneste tabel op dezelfde manier opmaken als elke

andere cel. De breedte ervan wordt echter beperkt door de breedte van de cel waarin de tabel is opgenomen.

1 Klik in een cel van de bestaande tabel.

2 Selecteer Invoegen > Tabel, stel de opties Tabel invoegen in en klik op OK.

Tabellen sorteren

U kunt de rijen van een tabel sorteren op de inhoud van één kolom. U kunt ook ingewikkelder sorteeracties uitvoeren op

grond van de de inhoud van twee kolommen.

U kunt tabellen die het kenmerk

colspan of rowspan bevatten (dit zijn tabellen die samengevoegde cellen bevatten), niet

sorteren.

1 Selecteer de tabel of klik in een cel.

2 Selecteer Opdrachten > Tabel sorteren, stel de opties in het dialoogvenster in en klik op OK.

Sorteren op Hier kunt u opgeven op welke kolomwaarden de tabelrijen moeten worden gesorteerd.

Volgorde Hier kunt u opgeven of de kolom alfabetisch of numeriek en in oplopende (A tot en met Z, lage cijfers naar hoge

cijfers) of aflopende volgorde moet worden gesorteerd.

SelecteerNumeriekalseenkolomcijfersbevat. Bijalfabetischsorterenwordengetallenvanéénoftweecijfersgesorteerd

alsof het woorden zijn (wat een volgorde oplevert zoals 1, 10, 2, 20, 3, 30) in plaats van cijfers (wat een volgorde oplevert

zoals 1, 2, 3, 10, 20, 30).

Vervolgens op/Volgorde: Hier kunt u de sorteervolgorde bepalen voor een tweede sortering op een andere kolom. Geef de

kolom voor de tweede sortering op in het pop-upmenu Vervolgens op, en geef de tweede sorteervolgorde op in de pop-

upmenu's Volgorde.

De eerste rij wordt meegenomen bij het sorteren Hiermee geeft u op dat de eerste rij van de tabel in de sortering moet

worden opgenomen. Selecteer deze optie niet als de eerste rij een kop is die niet mag worden verplaatst.

Koptekstrijen sorteren Hiermeegeeftuopdatvoorallerijenindethead-sectie (indien aanwezig) dezelfde criteria moeten

wordengebruiktalsvoordeandererijen.(Bedenkweldat

thead-rijen in de thead-sectie blijven staan en nog steeds boven

DREAMWEAVER CS3

Handboek

183

aan de tabel worden weergegeven nadat de tabel is gesorteerd.) Voor informatie over de thead-tag raadpleegt u het paneel

Referentie (kies Help > Referentie).

Voettekstrijen sorteren Hiermee geeft u op dat voor alle rijen in de tfoot-sectie (indien aanwezig) dezelfde criteria moeten

worden gebruikt als voor de andere rijen. (Bedenk wel dat

tfoot-rijen aanwezig blijven in de tfoot-sectie en nog steeds

onder aan de tabel worden weergegeven nadat de tabel is gesorteerd.) Voor informatie over de

tfoot-tag raadpleegt u het

paneel Referentie (kies Help > Referentie).

Rijkleuren onveranderd laten nadat het sorteren is voltooid Hiermee geeft u op dat rijkenmerken (zoals kleur) na de

sortering aan dezelfde inhoud moeten blijven gekoppeld. Als de tabelrijen met twee afwisselende kleuren zijn opgemaakt,

selecteert u deze optie niet om te verzekeren dat de kleuren na het sorteren nog steeds afwisselend worden weergegeven.

Als de rijkenmerken specifiek bij de inhoud van elke rij horen, selecteert u deze optie om te verzekeren dat de kenmerken

in de gesorteerde tabel nog steeds aan de juiste rijen zijn gekoppeld.

Pagina's opmaken in lay-outmodus

Over de lay-outmodus

Een veelgebruikte methode om een paginalay-out te maken bestaat uit het gebruik van HTML-tabellen om elementen te

positioneren. Tabellen zijn oorspronkelijk ontwikkeld om tabelgegevens weer te geven niet om webpagina's op de maken.

In Dreamweaver is de lay-outmodus bedoeld om het proces van tabelgebruik voor paginalay-out te stroomlijnen.

In de lay-outmodus gebruikt u lay-outcellen en -tabellen om een pagina op te maken voordat u er inhoud aan toevoegt. U

kunt bijvoorbeeld een cel langs de bovenkant van een pagina tekenen voor een kopafbeelding, een andere cel links op de

pagina tekenen voor een navigatiebalk en een derde cel rechts tekenen voor de inhoud. Wanneer u inhoud toevoegt, kunt

u cellen naar wens verplaatsen om uw lay-out aan te passen.

Voor een maximale flexibiliteit kunt u een cel tekenen wanneer u gereed bent er inhoud in te plaatsen. Hierdoor kunt u in

de lay-outtabel langer ruimte leeg laten zodat u cellen gemakkelijker kunt verplaatsen of groter of kleiner kunt maken.

Lay-outtabellen worden op uw pagina met een groene rand weergegeven, lay-outcellen met een blauwe rand. Wanneer u

in Dreamweaver een tabelcel met de muis aanwijst, wordt de cel gemarkeerd. (U kunt de standaardtabelomtrek en de

markeerkleuren in Voorkeuren wijzigen.)

DREAMWEAVER CS3

Handboek

184

U kunt uw pagina opmaken met verschillende lay-outcellen binnen één tabel, wat de gebruikelijkste manier is om een

webpagina op te maken. U kunt ook meerdere, aparte lay-outtabellen gebruiken voor meer complexe lay-outs. Door

meerdere lay-outtabellen te gebruiken isoleert u onderdelen van uw lay-out, zodat wijzigingen in andere onderdelen hierop

geen invloed hebben.

U kunt lay-outtabellen ook nesten door een nieuwe lay-outtabel in een bestaande lay-outtabel te plaatsen. U kunt met deze

structuur de tabelstructuur vereenvoudigen wanneer de rijen of kolommen in één gedeelte van de lay-out niet

overeenstemmen met de rijen of kolommen in een ander gedeelte van de lay-out. U kunt met geneste lay-outtabellen

bijvoorbeeld eenvoudig een lay-out met twee kolommen maken, met vier rijen in de linkerkolom en drie rijen in de

rechterkolom.

Opmerking: In plaats van tabellen in standaard- of lay-outmodus kunt u pagina's ook opmaken met CSS-positionering.

Zie ook

“Inhoud in tabellen presenteren” op pagina 169

“Pagina's met CSS opmaken” op pagina 140

Tabel- en celbreedten weergeven in lay-outmodus

De breedten van lay-outtabellen en -cellen (in pixels of als percentage van de paginabreedte) worden bovenaan of onderaan

in de tabel weergegeven wanneer de tabel is geselecteerd of de invoegpositie zich in de tabel bevindt. Naast de breedten

worden de pijlen voor het tabelkopmenu en de kolomkopmenu's weergegeven. Gebruik de menu's om veelgebruikte

opdrachten snel te bereiken.

Opmerking: Als u de weergave van kolombreedten (samen met tabeltabs en kopmenu's) wilt uitschakelen, moet u alle visuele

hulpmiddelen uitschakelen (Weergave > Visuele hulpmiddelen > Alles verbergen).

Soms wordt de breedte van een kolom niet weergegeven en ziet u het volgende:

• Geen breedte. Als u geen breedte voor de tabel of een kolom ziet, is er voor die tabel of kolom geen breedte in de HTML-

code vastgelegd.

• Twee cijfers. Als er twee cijfers worden weergegeven, komt de breedte die in de ontwerpweergave zichtbaar is, niet

overeen met de breedte die in de HTML-code is vastgelegd. Dit kan gebeuren wanneer u een tabel groter of kleiner maakt

door de rechterbenedenhoek ervan te verslepen, of wanneer u aan een cel inhoud toevoegt die groter is dan de ingestelde

celbreedte.

Als u de kolombreedte bijvoorbeeld instelt op 200 pixels en inhoud toevoegt die de kolom uitrekt naar 250 pixels, worden

boven aan deze kolom twee cijfers weergegeven: 200 (de breedte die in de code is opgegeven) en (250) tussen haakjes (de

visuele breedte van de kolom, zoals deze op het scherm wordt weergegeven).

• Golflijn. Er wordt een golflijn weergegeven voor kolommen die op automatisch uitrekken zijn ingesteld.

• Dubbele balken. Bij kolommen met spacer-afbeeldingen worden dubbele balken rond de kolombreedte weergegeven.

Lay-outtabel en celrasterlijnen

Wanneer u een lay-outcel in een lay-outtabel tekent, verschijnt er een licht gekleurd lijnenraster vanaf de randen van de

nieuwe lay-outcel tot de randen van de lay-outtabel waarin de cel is opgenomen. Deze lijnen zijn handig om nieuwe cellen

uit te lijnen ten opzichte van oude cellen en om de onderliggende HTML-structuur van de tabel te visualiseren. Omdat het

Dreamweaver-raster vast is en niet op grond van de plaatsing van cellen verandert, kunt u het raster gebruiken om uw

pagina op te maken.

In Dreamweaver worden de randen van nieuwe cellen automatisch vastgeklikt om ze uit te lijnen met de nabij gelegen

randen van bestaande celen. (Lay-outcellen kunnen elkaar niet overlappen.) Celranden worden ook automatisch

vastgeklikt aan de randen van de lay-outtabel die de cellen bevat, als u een cel in de buurt van rand van een tabel tekent.

Zie ook

“Visuele lay-outhulpmiddelen gebruiken” op pagina 166

DREAMWEAVER CS3

Handboek

185

Vaste kolombreedte en automatisch uitrekbare kolommen

Een tabelkolom in lay-outmodus kan een vaste breedte hebben of een breedte die zich automatisch aan de breedte van het

browservenster aanpast (automatisch uitrekken).

Kolommen met vaste breedte Hebben een specifieke numerieke breedte, zoals 300 pixels. In Dreamweaver wordt de

breedte van elke kolom met vaste breedte boven of onder de kolom weergegeven.

Automatisch uitrekbare kolommen Passen zich automatisch aan de breedte van het browservenster aan. Als uw lay-out een

automatisch uitrekbare kolom bevat, vult de lay-out altijd automatisch de volledige breedte van het browservenster van de

bezoeker op. U kunt niet meer dan één kolom in een lay-outtabel op automatisch uitrekken instellen. Als een kolom

automatisch uitrekbaar is, wordt er een golflijn in het gebied voor de kolombreedte weergegeven.

In een veelgebruikte lay-outtechniek wordt de kolom met de hoofdinhoud van de pagina op automatisch uitrekken

ingesteld. Hierdoor krijgen alle andere kolommen automatisch een vaste breedte. Stel bijvoorbeeld dat uw lay-out een brede

afbeelding op de linkerkant van de pagina bevat en een kolom tekst aan de rechterkant. U kunt dan de linkerkant op een

vaste breedte instellen en het zijbalkgebied op automatisch uitrekken.

Wanneer u een kolom automatisch uitrekbaar maakt, worden er in Dreamweaver spacer-afbeeldingen in de kolommen met

vaste breedte ingevoegd om te verzekeren dat die kolommen de gewenste breedte behouden (tenzij u opgeeft dat er geen

spacer-afbeelding moet worden gebruikt). Een spacer-afbeelding is een transparante afbeelding die dient om tussenruimte

in te stellen en die niet in het browservenster zichtbaar is.

Spacer-afbeeldingen

Een spacer-afbeelding (ook aangeduid als een spacer-GIF) is een transparante afbeelding waarmee de tussenruimtes in

automatisch uitrekbare tabellen worden geregeld. Een spacer-afbeelding is een GIF-afbeelding van één pixel die tot een

opgegeven aantal pixels kan worden verbreed. In een browser kan een tabelkolom niet smaller worden weergegeven dan

de breedste afbeelding in een cel in die kolom. Als u een spacer-afbeelding in een tabelkolom plaatst, is de kolom in een

browser dus minstens even breed als de afbeelding.

In Dreamweaver worden automatisch spacer-afbeeldingen toegevoegd wanneer u een kolom instelt op automatisch

uitrekken (tenzij u opgeeft dat u geen spacer-afbeelding wilt gebruiken). U kunt desgewenst in elke kolom spacer-

afbeeldingen handmatig invoegen en verwijderen. Bij kolommen met spacer-afbeeldingen worden dubbele balken rond de

kolombreedte weergegeven.

U kunt desgewenst in specifieke kolommen spacer-afbeeldingen handmatig invoegen en verwijderen, of alle spacer-

afbeeldingen op een pagina verwijderen.

Van de standaardmodus naar de lay-outmodus gaan

Voordat u lay-outtabellen of -cellen kunt tekenen, moet u van de standaardmodus naar de lay-outmodus gaan. Wanneer u

lay-outtabellen in lay-outmodus hebt gemaakt, is het een goed idee naar de standaardmodus terug te gaan voordat u inhoud

aanbrengt of uw tabellen bewerkt.

Opmerking: Als u een tabel in standaardmodus maakt, is het handig vervolgens naar de lay-outmodus te gaan omdat de

resulterende lay-outtabel lege lay-outcellen kan bevatten. U moet deze lege lay-outcellen mogelijk verwijderen voordat u

nieuwe lay-outcellen kunt maken of verplaatsen.

Naar daar lay-outmodus gaan:

1 Als u in de codeweergave werkt, gaat u naar de ontwerpweergave door Weergave > Ontwerp of Weergave > Code en

Ontwerp te selecteren.

Opmerking: U kunt vanuit de codeweergave niet naar de lay-outmodus gaan.

2 Selecteer Weergave > Tabelmodus > Lay-outmodus.

Een balk die is gelabeld als Lay-outmodus verschijnt langs de bovenrand van het documentvenster. Als uw pagina tabellen

bevat, worden ze als lay-outtabellen weergegeven.

DREAMWEAVER CS3

Handboek

186

Als u de lay-outmodus wilt verlaten:

❖

Voert u een van de volgende handelingen uit:

• KlikopAfsluitenindebalkdieisgelabeldalsLay-outmodusendielangsdebovenrandvanhetdocumentvensterwordt

weergegeven.

• Selecteer Weergave > Tabelmodus > Standaardmodus.

• Klik in de categorie Lay-out van de invoegbalk op de knop Standaardmodus.

Dreamweaver keert terug naar de standaardmodus.

Tekenen in de lay-outmodus

In de lay-outmodus kunt u cellen en tabellen tekenen (met inbegrip van tabellen die in andere tabellen zijn genest). Het

'magnetische' raster is handig om cellen uit te lijnen.

Wanneer u een lay-outcel tekent die zich niet in een lay-outtabel bevindt, wordt er in Dreamweaver automatisch een lay-

outtabel als houder voor de cel getekend. Lay-outcellen kunnen alleen binnen een lay-outtabel voorkomen.

Opmerking: In de lay-outmodus zijn de functies Tabel invoegen en AP Div tekenen, die u in de standaardmodus kunt

gebruiken, niet beschikbaar. U moet voor deze functies eerst naar de standaardmodus gaan.

Wanneer er in Dreamweaver automatisch een lay-outtabel wordt gemaakt, lijkt de tabel aanvankelijk de volledige

ontwerpweergave te vullen, zelfs als u het formaat van uw documentvenster wijzigt. Dankzij deze venstervullende

standaardlay-outtabel kunt u overal in de ontwerpweergave lay-outcellen tekenen. U kunt de tabel op een specifieke grootte

instellen door op de tabelrand te klikken en vervolgens de formaatgrepen van de tabel te verslepen.

Wanneer u in Dreamweaver een lay-outcel met de muis aanwijst, wordt de cel gemarkeerd. U kunt de markeerfunctie in-

of uitschakelen, of de markeerkleur in Voorkeuren wijzigen.

U kunt ook een geneste tabel maken door een nieuwe lay-outtabel in een andere lay-outtabel te tekenen. De cellen in een

geneste tabel worden niet beïnvloed door wijzigingen in de buitenste tabel. Wanneer u bijvoorbeeld de grootte van een rij

of kolom in de buitenste tabel wijzigt, blijven de cellen in de binnenste tabel ongewijzigd.

U kunt meerdere niveaus geneste tabellen invoegen. Een geneste lay-outtabel kan niet breder zijn dan de tabel die deze lay-

outtabel bevat.

Opmerking: Als u een lay-outtabel in het midden van uw pagina tekent voordat u een lay-outcel tekent, wordt de getekende

tabel automatisch in een grotere tabel genest.

Zie ook

“Visuele lay-outhulpmiddelen gebruiken” op pagina 166

Een lay-outcel maken

1 Zorg dat u in de lay-outmodus (niet in de standaardmodus) bent.

2 Selecteer Invoegen > Lay-outobjecten > Lay-outcel.

3 Plaats de dradenkruisaanwijzer (+) op het punt waar u de cel op de pagina wilt beginnen en maak vervolgens de lay-

outcel door de aanwijzer met de muis te verslepen.

Als u meer dan één lay-outcel wilt tekenen zonder voortdurend het menu-item te selecteren, houdt u de Control-toets

(Windows) of de Command-toets (Macintosh) ingedrukt terwijl u de lay-outcel tekent. U kunt meerdere lay-outcellen

tekenen door de Control- of Command-toets ingedrukt te houden.

Als u de cel in de buurt van de rand van de lay-outtabel tekent, worden de celranden automatisch vastgeklikt aan de randen

van de lay-outtabel die de cellen bevat. Als u het vastklikken tijdelijk wilt uitschakelen houdt u tijdens het tekenen van de

cel de Alt-toets (Windows) of de Option-toets (Macintosh) ingedrukt.

De cel verschijnt met een blauwe omtrek op uw pagina (u kunt de omtrekkleur in Voorkeuren wijzigen).

DREAMWEAVER CS3

Handboek

187

Een lay-outtabel tekenen

1 Zorg dat u in de lay-outmodus (niet in de standaardmodus) bent.

2 Selecteer Invoegen > Lay-outobjecten > Lay-outtabel.

3 Plaats de dradenkruisaanwijzer (+) op de pagina en maak vervolgens de lay-outtabel door de aanwijzer met de muis te

verslepen.

Als u meer dan één lay-outtabel wilt tekenen zonder voortdurend het menu-item te selecteren, houdt u de Control-toets

(Windows) of de Command-toets (Macintosh) ingedrukt terwijl u de lay-outtabel tekent. U kunt meerdere lay-outtabellen

tekenen door de Control- of Command-toets ingedrukt te houden.

U kunt een lay-outtabel in een leeg gebied van uw paginalay-out tekenen, rond bestaande lay-outcellen en -tabellen, of

genest in een bestaande lay-outtabel. Als uw pagina inhoud bevat en u wilt een lay-outtabel aan een leeg gebied van uw

paginalay-out toevoegen, kunt u alleen een nieuwe lay-outtabel onder de onderzijde van de bestaande inhoud tekenen.

Als u een lay-outtabel onder bestaande inhoud probeert te tekenen en de niet-tekenen-aanwijzer verschijnt, kunt u

proberen het documentvenster te vergroten om meer ruimte vrij te maken tussen de onderkant van de bestaande inhoud

en de onderkant van het venster.

Opmerking: Tabellen kunnen elkaar niet overlappen, maar een tabel kan wel volledig in een andere tabel zijn opgenomen.

De lay-outtabel verschijnt met een groene omtrek op uw pagina (u kunt de omtrekkleur in Voorkeuren wijzigen).

Markeervoorkeuren voor lay-outcellen wijzigen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Markeren in de categorieënlijst.

3 Maak een van de volgende wijzigingen en klik op OK:

• Als u de markeerkleur wilt wijzigen, klikt u op het vak Kleur aanwijzen met muis en selecteert u vervolgens een

markeerkleur met de kleurkiezer (of typt u in het tekstvak de hexadecimale waarde voor de markeerkleur).

• Als u de markering wilt in- of uitschakelen, schakelt u de optie Weergeven bij Aanwijzen met muis in of uit.

Opmerking: Deze opties zijn van toepassing op alle objecten (zoals tabellen en AP-elementen) die worden gemarkeerd wanneer

u ze met de muisaanwijzer aanwijst.

Een geneste lay-outtabel tekenen

1 Zorg dat u in de lay-outmodus (niet in de standaardmodus) bent.

2 Selecteer Invoegen > Lay-outobjecten > Lay-outtabel.

3 Plaats de dradenkruisaanwijzer (+) in een leeg (grijs) gebied in een bestaande lay-outtabel en maak vervolgens de geneste

lay-outtabel door de aanwijzer met de muis te verslepen.

Opmerking: U kunt geen lay-outtabel binnen een lay-outcel maken. U kunt een geneste lay-outtabel alleen in een leeg gebied

van een bestaande lay-outtabel maken of rond bestaande cellen.

Een lay-outtabel rond bestaande lay-outcellen of -tabellen tekenen

1 Zorg dat u in de lay-outmodus (niet in de standaardmodus) bent.

2 Selecteer Invoegen > Lay-outobjecten > Lay-outtabel.

3 Versleep de dradenkruisaanwijzer (+) om een rechthoek rond een set bestaande lay-outcellen of -tabellen te tekenen.

Een nieuwe, geneste lay-outtabel verschijnt rond de bestaande cellen of tabellen.

Als u een bestaande lay-outcel precies in één hoek van de nieuwe, geneste tabel wilt inpassen, begint u met slepen in de buurt

van de hoek van de cel. De hoek van de nieuwe tabel wordt dan aan de hoek van de cel vastgeklikt. U kunt niet in het

midden van een lay-outcel met slepen beginnen omdat u geen lay-outtabel volledig binnen een lay-outcel kunt maken.

DREAMWEAVER CS3

Handboek

188

Inhoud aan een lay-outcel toevoegen

U kunt in de lay-outmodus tekst, afbeeldingen en andere inhoud aan lay-outcellen toevoegen op dezelfde manier als u in

de standaardmodus inhoud aan tabelcellen toevoegt. Klik in de cel op de plaats waar u inhoud wilt toevoegen. Typ

vervolgens uw tekst of voeg andere inhoud in.

U kunt geen inhoud in een leeg (grijs) gebied van een lay-outtabel toevoegen. Voordat u inhoud aan een tabel kunt

toevoegen, moet u dus eerst lay-outcellen maken.

Een lay-outcel wordt automatisch vergroot wanneer u inhoud toevoegt die breder is dan de cel. Wanneer de cel wordt

verbreed, wordt de kolom waarin de cel is opgenomen ook breder. Hierdoor kunnen de afmetingen van de omringende

cellen worden gewijzigd. Met de kolombreedte van de desbetreffende kolom wordt de breedte aangegeven die in de code

is opgenomen, tussen haakjes gevolgd door de visuele breedte van de kolom (de breedte die u op het scherm ziet).

Zie ook

“Tekst toevoegen en opmaken” op pagina 218

Tekst aan een lay-outcel toevoegen

1 Plaats de invoegpositie in de lay-outcel op de plaats waar u uw tekst wilt toevoegen.

2 Ga op een van de volgende manieren te werk:

• Typ de tekst in de cel (de cel wordt tijdens het typen automatisch breder).

• Plak tekst die u uit een ander document hebt gekopieerd.

Een afbeelding aan een lay-outcel toevoegen

1 Plaats de invoegpositie in de lay-outcel op de plaats waar u de afbeelding wilt toevoegen.

2 Selecteer Invoegen > Afbeelding.

3 Selecteer een afbeeldingsbestand en klik op OK.

Celhoogten wissen

Wanneer u een lay-outcel maakt, wordt in Dreamweaver automatisch de hoogte voor de cel vastgelegd. Hierdoor wordt de

cel met de door u getekende hoogte weergegeven, zelfs als de cel leeg is. Nadat u inhoud in de cel hebt ingevoegd, hoeft de

hoogte mogelijk niet langer te worden gespecificeerd. U kunt dan de expliciete celhoogten uit de tabel verwijderen.

❖ Selecteer een lay-outtabel door op de tab aan de bovenkant van de tabel te klikken. Klik vervolgens in de

eigenschappencontrole (Venster > Eigenschappen) op Rijhoogten wissen .

Dreamweaver wist alle hoogten die in de tabel zijn gespecificeerd. Sommige tabelcellen kunnen minder hoog worden.

Lay-outcellen en -tabellen vergroten/verkleinen en verplaatsen

Als u uw paginalay-out wilt aanpassen, kunt u dit doen door lay-outcellen en geneste lay-outtabellen te verplaatsen en te

vergroten/verkleinen. (Alleen de buitenste lay-outtabel kan worden vergroot/verkleind.)

Wanneer u lay-outcellen verplaatst of vergroot/verkleint, kunnen ze elkaar niet overlappen. Verder kunt u een cel niet

zodanig verplaatsen, vergroten of verkleinen dat de grenzen van de cel die van de lay-outtabel doorkruisen. U kunt een lay-

outcel niet kleiner maken dan de inhoud ervan.

Zie ook

“Visuele lay-outhulpmiddelen gebruiken” op pagina 166

Een lay-outcel vergroten/verkleinen

1 Selecteer een cel door op de rand ervan te klikken, of door de Control-toets (Windows) of de Command-toets

(Macintosh) ingedrukt te houden en ergens in de cel te klikken.

DREAMWEAVER CS3

Handboek

189

2 Versleep een selectiegreep om de cel te vergroten of te verkleinen.

De celranden worden automatisch vastgeklikt en uitgelijnd met de randen van de andere cellen.

Een lay-outcel verplaatsen

1 Selecteer een cel door op de rand ervan te klikken, of door de Control-toets (Windows) of de Command-toets

(Macintosh) ingedrukt te houden en ergens in de cel te klikken.

2 Ga op een van de volgende manieren te werk:

• Versleep de cel naar een andere plaats binnen de lay-outtabel.

• Druk op de pijltoetsen om de cel in stappen van één pixel te verplaatsen.

Houd de Shift-toets ingedrukt terwijl u op een pijltoets drukt om de cel in stappen van tien pixels te verplaatsen.

Een lay-outtabel groter/kleiner maken

1 Selecteer een tabel door op de tab aan de bovenkant van de tabel te klikken.

2 Versleep de selectiegrepen om de tabel te vergroten/verkleinen.

De tabelranden worden automatisch vastgeklikt en uitgelijnd ten opzichte van de randen van andere cellen en tabellen.

Een lay-outtabel verplaatsen

1 Selecteer een tabel door op de tab aan de bovenkant van de tabel te klikken.

Opmerking: U kunt een lay-outtabel alleen verplaatsen als deze in een andere lay-outtabel is genest.

2 Ga op een van de volgende manieren te werk:

• Versleep de tabel naar een andere plaats op de pagina.

• Druk op de pijltoetsen om de tabel in stappen van één pixel te verplaatsen.

Houd de Shift-toets ingedrukt terwijl u op een pijltoets drukt om de tabel in stappen van tien pixels te verplaatsen.

Lay-outcellen en -tabellen opmaken

U kunt diverse kenmerken van een lay-outcel in de eigenschappencontrole instellen, zoals de breedte en hoogte, de

achtergrondkleur en de uitlijning van de inhoud van de cel.

Een lay-outcel in de eigenschappencontrole opmaken

1 Selecteer een cel door op de rand ervan te klikken, of door de Control-toets (Windows) of de Command-toets

(Macintosh) ingedrukt te houden en ergens in de cel te klikken.

2 Open de eigenschappencontrole (Venster > Eigenschappen) en stel de volgende opmaakeigenschappen voor de cel in:

Vast Hiermee stelt u de cel in op een vaste breedte. Typ een breedte (in pixels) in het aangrenzende tekstvak.

Automatisch uitrekken Hiermee wordt de cel automatisch uitgerekt.

Hoogte Hiermee stelt u de hoogte van de cel in (in pixels).

Achtergrond Hier kunt de achtergrondkleur voor de lay-outcel instellen. Klik op het kleurvak en selecteer een kleur met

de kleurkiezer, of typ het hexadecimale cijfer van een kleur in het aangrenzende tekstvak.

DREAMWEAVER CS3

Handboek

190

Horizontaal Hiermee kunt u de horizontale uitlijning van de celinhoud instellen. U kunt de uitlijning instellen op Links,

Centreren, Rechts of Standaard.

Verticaal Hiermee kunt u de verticale uitlijning van de celinhoud instellen. U kunt de uitlijning instellen op Boven,

Midden, Onder, Basislijn of Standaard.

Geen terugloop Hiermeevoorkomtudatdetekstterugloopt.Wanneerdezeoptieisgeselecteerd,wordtdebreedtevande

lay-outcel aan de tekst aangepast en wordt de tekst niet bij de celgrens afgebroken en op een nieuwe regel voortgezet.

3 Als u een waarde in een tekstvak hebt opgegeven, drukt u op Tab of Enter (Windows) of op Return (Macintosh) om de

waarde toe te passen.

Eigenschappen van een lay-outtabel instellen

1 Selecteer een tabel door op de tab aan de bovenkant van de tabel te klikken.

2 Open de eigenschappencontrole (Venster > Eigenschappen), stel de opmaakeigenschappen van de tabel in en druk op

Tab of Enter (Windows) of op Return (Macintosh) om de waarde toe te passen.

Vast Hiermee stelt u de tabel in op een vaste breedte in pixels.

Automatisch uitrekken Hiermee wordt de meest rechtse kolom van de tabel automatisch uitgerekt.

Hoogte Hier kunt u de hoogte van de tabel opgeven (in pixels).

Celopvulling Hier kunt u de afstand tussen de inhoud van een lay-outcel en de celgrens instellen (in pixels). Als u de

celopvulling wijzigt en er verschijnt tussen haakjes een kolombreedte voor uw lay-outtabel, gebruikt u de optie Breedten

consistent maken.

Celafstand Hier kunt u de afstand tussen aangrenzende lay-outcellen instellen (in pixels). Als u de celafstand wijzigt en er

verschijnt tussen haakjes een kolombreedte voor uw lay-outtabel, gebruikt u de optie Breedten consistent maken.

Rijhoogten wissen Hiermee verwijdert u de hoogte-instellingen voor alle cellen in de lay-outtabel. In Dreamweaver

worden expliciete celhoogten gespecificeerd om uw lay-out weer te geven zoals u die getekend had, zelfs als sommige cellen

leeg zijn. Selecteer deze optie daarom pas nadat u inhoud in de lay-outcellen hebt geplaatst. als u dat niet doet, kunnen de

lege cellen verticaal worden samengevouwen.

Opmerking: Als u de rijhoogten wist, kan dat onverwachte gevolgen hebben voor de lege (grijze) gebieden in de lay-outtabel

(dat wil zeggen gebieden zonder cellen). Meer in het bijzonder kunnen sommige lege rijen geheel uit de tabel worden

verwijderd, en kan het lijken of de tabel verticaal wordt samengevouwen.

Breedten consistent maken Hiermee wordt de breedte die in HTML voor elke cel in de tabel is vastgelegd, aangepast aan

de breedte van de inhoud van die cel als uw lay-out cellen met een vaste breedte bevat.

Alle spacers verwijderen Hiermee worden spacer-afbeeldingen (transparante afbeeldingen waarmee de tussenafstanden in

uw lay-out worden ingesteld) uit uw lay-outtabel verwijderd.

Opmerking: Als u spacer-afbeeldingen verwijdert, kunnen sommige cellen van uw tabel erg smal worden. Het is meestal

raadzaam de spacer-afbeeldingen alleen te verwijderen als elke kolom andere inhoud bevat waarmee de kolombreedte al wordt

gehandhaafd.

Nestniveaus verwijderen: Hiermee wordt een lay-outtabel verwijderd die in een andere lay-outtabel is genest zonder dat de

inhoud van de geneste tabel verloren gaat. De binnenste lay-outtabel verdwijnt. De erin opgenomen lay-outcellen gaan deel

uitmaken van de buitenste tabel.

Kolombreedte instellen

U kunt een kolom op een bepaalde breedte instellen of deze uitrekbaar maken zodat het browservenster zo veel mogelijk

wordt opgevuld (automatisch uitrekken). U kunt met een spacer-afbeelding ook een minimumbreedte voor een kolom

opgeven.

Wanneer u een spacer-afbeelding voor het eerst invoegt, moet u een spacer-afbeelding voor de site configureren. U kunt

voorkeuren voor spacer-afbeeldingen instellen.

DREAMWEAVER CS3

Handboek

191

Als u een kolom automatisch uitrekbaar maakt voordat uw lay-out is voltooid, kan dat onverwachte gevolgen voor de

tabellay-out hebben. Als u wilt voorkomen dat kolommen breder of smaller worden, moet u uw lay-out voltooien voordat

u een kolom automatisch uitrekbaar maakt. Gebruik spacer-afbeeldingen wanneer u dit doet. (Als echter elke kolom

andere inhoud bevat waarmee de kolombreedte al wordt gehandhaafd, hebt u geen spacer-afbeeldingen nodig.)

Als de kolombreedte met twee getallen wordt aangegeven, komt de kolombreedte in de HTML-code niet overeen met de

breedte die u op het scherm ziet. U kunt de in de code vermelde breedte aanpassen aan de visuele breedte.

Opmerking: U moet in de lay-outmodus werken om deze opties te kunnen zien. Soms staat het kolommenu aan de

benedenrand van de kolommen.

Een kolom automatisch uitrekbaar maken

1 Ga op een van de volgende manieren te werk:

• Klik op het kolomkopmenu en selecteer Kolom automatisch uitrekbaar maken.

• Selecteer een cel in de kolom door op de rand van de cel te klikken en selecteer in de eigenschappencontrole de optie

Automatisch uitrekken.

Opmerking: U kunt niet meer dan één kolom in een tabel op automatisch uitrekken instellen.

2 (Optioneel) Als u voor deze site geen spacer-afbeelding hebt ingesteld, verschijnt het dialoogvenster Spacer-afbeelding

kiezen. Geef op welke afbeelding u wilt gebruiken en klik op OK.

Er verschijnt een golflijn boven of onder de automatisch uitrekbare kolom. Er verschijnen dubbele balken boven of onder

de kolommen die spacer-afbeeldingen bevatten.

Een kolom instellen op een vaste breedte

❖

Ga op een van de volgende manieren te werk:

• Klik op het kolomkopmenu en selecteer vervolgens Vaste kolombreedte maken. Met Vaste kolombreedte maken wordt

voor de kolom (in de code) een breedte gespecificeerd die overeenkomt met de momenteel zichtbare breedte van de

kolom.

• Selecteer een cel in de kolom door op de rand van de cel te klikken, selecteer vervolgens Vast en typ in de

eigenschappencontrole een numerieke waarde. Als u een numerieke waarde opgeeft die kleiner is dan de breedte van de

inhoud van de kolom, wordt de breedte in Dreamweaver aangepast aan de breedte van de inhoud.

De breedte van de kolom verschijnt boven of onder de kolom.

Een spacer-afbeelding in een kolom invoegen

Als u een kolom automatisch uitrekbaar wilt maken, kunt u kiezen of u een spacer-afbeelding wilt gebruiken en welke

afbeelding u wilt gebruiken. De afbeelding is niet zichtbaar, maar de kolom kan enigszins verschuiven en er kan een

dubbele balk boven of onder de kolom verschijnen om aan te geven dat de kolom een spacer-afbeelding bevat.

1 Klik op het kolomkopmenu en selecteer vervolgens Spacer-afbeelding toevoegen.

DREAMWEAVER CS3

Handboek

192

2 Als u voor deze site geen spacer-afbeelding hebt ingesteld, selecteert u in het dialoogvenster Spacer-afbeelding kiezen

welke afbeelding u wilt gebruiken en klikt u op OK.

Maak een spacer-afbeeldingsbestand Hiermee maakt u een GIF-afbeelding voor gebruik als spacer-afbeelding en kunt u

een map selecteren waarin u het spacer-afbeeldingsbestand wilt opslaan (bijvoorbeeld de map Afbeeldingen van uw site).

Dit is de aanbevolen optie, tenzij u al een spacer-afbeeldingsbestand voor uw site hebt gemaakt.

Gebruik een bestaand spacer-afbeeldingsbestand Hiermee kunt u een bestaand spacer-afbeeldingsbestand kiezen voor

gebruik in automatisch uitrekbare tabellen. De spacer-afbeelding moet een transparante GIF van één pixel zijn.

Gebruik geen spacer-afbeeldingen voor tabellen die automatisch kunnen worden uitgerekt Hiermee geeft u op dat er in

Dreamweaver niet automatisch spacer-afbeeldingen aan tabellen moeten worden toegevoegd. (Deze optie verschijnt niet

als u een spacer-afbeelding invoegt zonder een kolom automatisch uitrekbaar te maken.) Als u deze optie selecteert,

kunnen kolommen met een vaste breedte in uw lay-out tot een smalle breedte of zelfs zonder breedte worden

samengevouwen. Met spacer-afbeeldingen kunt u de oorspronkelijke structuur van uw lay-out beter onder controle

houden. Gebruik deze optie alleen als u al voldoende inhoud in uw kolommen met vaste breedte hebt geplaatst om te

voorkomen dat ze worden samengevouwen of als u al eerder handmatig spacer-afbeeldingen hebt toegevoegd.

Een spacer-afbeelding uit één kolom verwijderen

❖

Klik op het kolomkopmenu en selecteer Spacer-afbeelding verwijderen.

Opmerking: De kolom kan verschuiven wanneer u de spacer-afbeelding verwijdert.

Alle spacer-afbeeldingen uit de tabel verwijderen

❖

Ga op een van de volgende manieren te werk:

• Klik op het tabelkopmenu en selecteer Alle spacer-afbeeldingen verwijderen.

• Selecteer de tabel en klik in de eigenschappencontrole (Venster > Eigenschappen) op Alle spacers verwijderen .

Opmerking: De lay-out van uw tabel kan verschuiven. Als sommige kolommen geen inhoud bevatten, kunnen deze volledig

uit de ontwerpweergave verdwijnen.

Breedten consistent maken

❖

Ga op een van de volgende manieren te werk:

• Klik op het tabelkopmenu en selecteer Alle breedten consistent maken.

• Selecteer de tabel en klik in de eigenschappencontrole (Venster > Eigenschappen) op Alle spacers verwijderen .

In Dreamweaver wordt de in de code vermelde breedte aangepast aan de visuele breedte.

Voorkeuren voor de lay-outmodus instellen

U kunt voorkeuren opgeven voor spacer-afbeeldingsbestanden en voor de kleuren waarmee in Dreamweaver lay-

outtabellen en cellen worden getekend.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Lay-outmodus in de categorieënlijst, stel de voorkeuren voor de lay-outmodus in en klik op OK.

Automatisch spacers invoegen: Hiermee geeft u op of Dreamweaver automatisch spacer-afbeeldingen moet invoegen

wanneer u een kolom op automatisch uitrekken instelt.

Opmerking: Als u opgeeft dat u geen spacer-afbeeldingen in automatisch uitrekbare tabellen wilt gebruiken, kan de grootte van

automatisch uitrekbare kolommen worden gewijzigd of kunnen ze zelfs volledig uit de ontwerpweergave verdwijnen omdat ze

leeg zijn. (De kolommen komen nog steeds in de code voor, zelfs als ze niet in de ontwerpweergave verschijnen.)

DREAMWEAVER CS3

Handboek

193

Spacer-afbeelding Hiermee stelt u de spacer-afbeelding voor uw site in.

Selecteer een site in het menu Voor site, klik vervolgens op de knop Maken om een nieuw spacer-afbeeldingsbestand te

maken, of klik op de knop Bladeren om naar een bestaand spacer-afbeeldingsbestand op de site te zoeken.

Celomtrek Hiermee stelt u een kleur in voor de omtrek van lay-outcellen.

Celmarkering Hiermee stelt u een kleur in die voor de omtrek van lay-outcellen wordt gebruikt wanneer u deze met de

muiscursor aanwijst.

Tabelomtrek Hiermee stelt u een kleur in voor de omtrek van lay-outtabellen.

Tabelachtergrond Hiermee stelt u een kleur in voor gebieden in lay-outtabellen die geen lay-outcellen bevatten.

Frames gebruiken

De werking van frames en framesets

Een frame is een gebied in een browservenster waarin een HTML-document kan worden weergegeven onafhankelijk van

alles wat er in de rest van het browservenster wordt weergegeven. Met frames kunt u een browservenster zodanig in

meerdere gebieden verdelen dat er in elk gebied een ander HTML-document kan worden weergegeven. Bij de meest

gebruikte techniek wordt er in één frame een document met navigatiefuncties weergegeven, terwijl er in een ander frame

een document met inhoud wordt weergegeven.

Een frameset is een HTML-bestand waarin de lay-out en eigenschappen van een set frames wordt gedefinieerd (zoals het

aantal frames, de grootte en plaats ervan en de URL van de pagina die aanvankelijk in elk frame verschijnt). Het

framesetbestand zelf bevat geen HTML-inhoud die in een browser wordt weergegeven, met uitzondering van het

noframes-

gedeelte. Het framesetbestand verschaft uitsluitend informatie aan de browser over het gewenste uiterlijk van een set frames

en welke documenten daarin moeten worden weergegeven.

Als u een set frames in een browser wilt weergeven, geeft u de URL van het framesetbestand op. De relevante documenten

worden dan in de browser geopend voor weergave in de frames. Het framsetbestand voor een site heeft vaak de naam

index.html, zodat het standaard wordt weergegeven als een bezoeker geen bestandsnaam opgeeft.

DREAMWEAVER CS3

Handboek

194

In het volgende voorbeeld wordt een framelay-out met drie frames getoond: één smal frame aan de zijkant dat een

navigatiebalk bevat, één frame langs de bovenkant met het logo en de naam van de website en één groot frame waarin de

rest van de pagina met de hoofdinhoud is opgenomen. In elk van deze frames wordt een apart HTML-document

weergegeven.

In dit voorbeeld wordt het document in het bovenste frame nooit gewijzigd wanneer een bezoeker door de site navigeert.

De nagivatiebalk in het zijframe bevat koppelingen. Als u op een van deze koppelingen klikt, verandert de inhoud van het

hoofdvenster, maar blijft de inhoud van het zijframe identiek. In het frame met de hoofdinhoud rechts wordt het document

weergegeven dat hoort bij de koppeling waarop de bezoeker in het linkerframe klikt.

Een frame is geen bestand: het document dat momenteel in een frame wordt weergegeven is een integraal onderdeel van

het frame, maar het document maakt feitelijk geen deel uit van het systeem. Het frame is een houder dat het document

bevat.

Opmerking: Een “pagina” verwijst naar één HTML-document of naar de volledige inhoud van een browservenster op een

bepaald moment, zelfs als er meerdere HTML-documenten tegelijk worden weergegeven. Met de uitdrukking “een pagina

waarin frames worden gebruikt” wordt bijvoorbeeld meestal verwezen naar een set frames en documenten die in eerste instantie

in die frames worden weergegeven.

Een site die in een browser als één pagina wordt weergegeven en drie frames omvat, bestaat feitelijk uit ten minste vier

HTML-documenten: het framesetbestand plus drie documenten met de inhoud die in eerste instantie in de frames wordt

weergegeven. Wanneer u in Dreamweaver een pagina met framesets ontwerpt, moet u elk van deze vier bestanden opslaan

om de pagina in de browser juist te laten functioneren.

Beslissen of u frames wilt gebruiken

Frames worden veel voor navigatie gebruikt. Een set frames bevat vaak één frame met een navigatiebalk en een ander frame

om de inhoud van de hoofdpagina's weer te geven.

DREAMWEAVER CS3

Handboek

195

In veel gevallen kunt u een webpagina zonder frames maken en dezelfde doelen bereiken als met een set frames. Als u

bijvoorbeeld een navigatiebalk links op uw pagina wilt weergeven, kunt u uw pagina door een set frames vervangen of een

navigatiebalk op elke pagina van uw site opnemen. (In Dreamweaver kunt u eenvoudig meerdere pagina's met dezelfde lay-

out maken.) In het volgende voorbeeld ziet u een pagina-ontwerp waarvan de lay-out frames lijkt te bevatten, terwijl dat

niet zo is.

Op slecht ontworpen sites worden frames vaak onnodig gebruikt en komen bijvoorbeeld framesets voor die de inhoud van

navigatieframes steeds opnieuw laden wanneer de bezoeker op een navigatieknop klikt. Wanneer frames goed worden

gebruikt (bijvoorbeeld om navigatie-elementen statisch in één frame onder te brengen, terwijl de inhoud van een ander

frame kan veranderen), kunnen ze voor een site erg nuttig zijn.

Frames worden niet door alle browsers goed ondersteund en kunnen problematisch zijn voor gehandicapte gebruikers. Als

u dus frames gebruikt, moet u altijd een

noframes-gedeelte in uw frameset opnemen voor gebruikers die frames niet goed

kunnen weergeven. U kunt ook een expliciete koppeling van een frameloze versie van de site opnemen.

Voordelen van framegebruik:

• De navigatie-elementen hoeven niet voor elke pagina steeds opnieuw in de browser van de bezoeker te worden geladen.

• Elk frame heeft een eigen schuifbalk (als de inhoud te breed is om in een venster te passen) zodat de bezoeker de frames

onafhankelijk kan verschuiven. Als bijvoorbeeld een bezoeker in een frame naar de onderkant van een lange pagina

schuift, hoeft de bezoeker niet naar de bovenkant van de lange pagina terug te gaan om de navigatiebalk te gebruiken als

deze laatste in een ander frame is ondergebracht.

Nadelen van framegebruik:

• Het kan lastig zijn grafische elementen in verschillende frames precies uit te lijnen.

• Het testen van de navigatiefuncties kan tijdrovend zijn.

• De URL's van individueel geframede pagina's verschijnen niet in een browser, zodat het voor de bezoeker lastig kan zijn

aan een specifieke pagina een bladwijzer toe te kennen (tenzij u een servercode biedt waarmee de bezoeker een

geframede versie van een bepaalde pagina kan laden).

Geneste framesets

Een frameset binnen een andere frameset wordt aangeduid als een geneste frameset. Eén framesetbestand kan meerdere,

geneste framesets bevatten. Op de meeste webpagina's met frames worden feitelijk geneste frames gebruikt, en de meeste

van de vooraf gedefinieerde framesets in Dreamweaver bevatten ook geneste frames. Voor elke set frames waarin

verschillende aantallen frames in verschillende rijen of kolommen voorkomen, is een geneste frameset vereist.

DREAMWEAVER CS3

Handboek

196

De meest gebruikte framelay-out bevat bijvoorbeeld één frame in de bovenste rij (waarin het bedrijfslogo verschijnt) en

twee frames in de onderste rij (een navigatieframe en een inhoudsframe). Voor deze lay-out is een geneste frameset nodig:

een frameset met twee rijen, waarin een frameset met twee kolommen in de tweede rij is genest.

A. Hoofdframeset B. Het menuframe en het inhoudsframe zijn binnen de hoofdframeset genest.

Dreamweaver werkt het nesten van framesets automatisch af. Als u in Dreamweaver de framesplitsers gebruikt, hoeft u zich

niet af te vragen welke frames worden genest en welke niet.

Er zijn twee manieren om framesets in HTML te nesten: de binnenste frameset kan in hetzelfde bestand worden

gedefinieerd als de buitenste frameset of in een eigen, apart bestand. Voor elke frameset die in Dreamweaver vooraf is

gedefinieerd, zijn alle bijbehorende framesets in hetzelfde bestand gedefinieerd.

Beideproceduresvoornestenleverendezelfdevisueleresultatenop.Zonderdecodeteraadplegenismoeilijktezienwelke

manier van nesten wordt gebruikt. De meest waarschijnlijke situatie waarin een extern framesetbestand in Dreamweaver

nodig is, doet zich voor wanneer u de opdracht Openen in frame gebruikt om een framesetbestand binnen een frame te

gebruiken. Dit kan problemen opleveren wanneer u doelen voor koppelingen wilt instellen. Het is meestal het eenvoudigst

alle gedefinieerde framesets in één bestand onder te brengen.

Werken met framesets in het documentvenster

U kunt met Dreamweaver in één documentvenster alle documenten weergeven en bewerken die aan een set frames zijn

gekoppeld. Dankzij deze aanpak kunt u tijdens het bewerken zien hoe de geframede pagina's ongeveer in een browser

worden weergegeven. Sommige aspecten van deze aanpak kunnen verwarrend zijn (totdat u eraan gewend bent). In elk

van deze frames wordt een apart HTML-document weergegeven. Zelfs als de documenten leeg zijn, moet u ze alle opslaan

voordat u ze vooraf kunt weergeven (omdat de frameset alleen precies kan worden weergegeven als de frameset de URL

bevat van het document dat in elk frame moet worden weergegeven).

Volg de volgende algemene stappen om te verzekeren dat uw frameset in alle browsers juist wordt weergegeven:

1 Maak uw frameset en geef voor elk frame een document voor weergave op.

2 Sla elk bestand op dat in een frame wordt weergegeven. Denk eraan dat elk frame een apart HTML-document weergeeft

en dat u elk document samen met het framsetbestand moet opslaan.

3 Stel de eigenschappen voor elk frame en voor de frameset in (inclusief een naam voor elk frame en de schuifopties).

4 Stel de eigenschap Doel in de eigenschappencontrole in voor al uw koppelingen. Dit zorgt ervoor de de gekoppelde

inhoud in het juiste gebied verschijnt.

Frames en framesets maken

U kunt op twee manieren framesets maken in Dreamweaver: u kunt een van de vele vooraf gedefinieerde framesets

selecteren of u kunt zelf een frameset ontwerpen.

DREAMWEAVER CS3

Handboek

197

Als u een vooraf gedefinieerde frameset kiest, worden alle framesets en frames geconfigureerd die vereist zijn om de lay-

out te maken. Dit is de eenvoudigste manier om snel een lay-out met frames te maken. U kunt een vooraf gedefinieerde

frameset alleen in de ontwerpweergave van het documentvenster invoegen.

U kunt kunt in Dreamweaver ook uw eigen frameset ontwerpen door “splitsers” aan het documentvenster toe te voegen.

Voordatueenframesetmaaktofmeteigenframesbeginttewerken,maaktudeframerandenindeontwerpweergavevan

het documentvenster zichtbaar door Weergave > Visuele hulpmiddelen > Frameranden te selecteren.

Zie ook

“Pagina's voor toegankelijkheid ontwerpen” op pagina 673

Een vooraf gedefinieerde frameset maken en een bestaand document in een frame weergeven

1 Plaats de invoegpositie in een document en voer een van de volgende handelingen uit:

• Kies Invoegen > HTML > Frames en selecteer een vooraf gedefinieerde frameset.

• Klik in de categorie Lay-out van de invoegbalk op de op de pijl op de knop Frames en selecteer vervolgens een vooraf

gedefinieerde frameset.

De framesetpictogrammen geven op visuele wijze aan hoe elke frameset op het huidige document wordt toegepast. Het

blauwe gebied van een framesetpictogram stelt het huidige document voor, terwijl de witte gebieden frames voorstellen

waarin andere documenten worden weergegeven.

2 Als u in Dreamweaver hebt opgegeven dat u waarschuwingen voor toegankelijkheidskenmerken wilt ontvangen,

selecteert u een frame in het pop-upmenu, geeft u een naam voor het frame op en klikt u op OK. (Voor bezoekers die

schermleesapparaten gebruiken: het schermleesapparaat leest deze naam wanneer het apparaat het frame op een pagina

detecteert.)

Opmerking: Als u op OK klikt zonder een nieuwe naam op te geven, wordt er door Dreamweaver aan het frame een naam

gegeven die met de positie van het frame (linkerframe, rechterframe enzovoort) in de frameset overeenkomt.

Opmerking: Als u op Annuleren klikt, verschijnt de frameset in het document, maar worden er door Dreamweaver geen

toegankelijkheidstags of -kenmerken aan gekoppeld.

Selecteer Venster > Frames om een diagram weer te geven van de frames waaraan u een naam geeft.

Een lege, vooraf gedefinieerde frameset maken

1 Selecteer Bestand > Nieuw.

2 Selecteer in het dialoogvenster Nieuw document de categorie Pagina uit voorbeeld.

3 Selecteer de map Frameset in de kolom Voorbeeldmap.

4 Selecteer een frameset in de kolom Voorbeeldpagina en klik op Maken.

DREAMWEAVER CS3

Handboek

198

5 Als u de kenmerken voor frametoegankelijkheid in Voorkeuren hebt geactiveerd, verschijnt het dialoogvenster

Toegankelijkheidskenmerken van de frametag. Vul het dialoogvenster voor elk frame in en klik op OK.

Opmerking: Als u op Annuleren klikt, verschijnt de frameset in het document, maar worden er door Dreamweaver geen

toegankelijkheidstags of -kenmerken aan gekoppeld.

Een frameset maken

❖

Selecteer Wijzigen > Frameset. Selecteer vervolgens in het vervolgmenu een splitsopdracht (zoals Frame links splitsen of

Frame rechts splitsen).

Het venster wordt door Dreamweaver in frames gesplitst. Als u een bestaand document had geopend, verschijnt het in een

van de frames.

Een frame in kleinere frames splitsen

• Als u het frame op de plaats van de invoegpositie wilt splitsen, selecteert u een splitsopdracht in het vervolgmenu

Wijzigen > Frameset.

• Als u een frame of set frames verticaal of horizontaal wilt splitsen, sleept u een framerand vanaf de rand naar het midden

van de ontwerpweergave.

• Als u een frame wilt splitsen met een framerand die zich niet bij de rand van de ontwerpweergave bevindt, houdt u de

Alt-toets (Windows) of Option-toets (Macintosh) ingedrukt en versleept u een framerand.

• Als u een frame in vier frames wilt verdelen, sleept u een framerand uit een van de hoeken van de ontwerpweergave naar

het midden van een frame.

Als u drie frames wilt maken, begint u met twee frames. Splits vervolgens een van deze frames. Omdat het niet eenvoudig

is twee aangrenzende frames samen te voegen zonder de framesetcode te bewerken, is het veranderen van vier frames in

drie frames moeilijker dan het veranderen van twee frames in drie frames.

Een frame verwijderen

❖

Sleep een framerand van de pagina af, of sleep de framerand naar een rand van het bovenliggende frame.

Als de inhoud van een document in het te verwijderen frame niet is opgeslagen, verzoekt Dreamweaver u het document op

te slaan.

Opmerking: U kunt een frameset niet geheel verwijderen door randen te verslepen. Als u een frameset wilt verwijderen, sluit

u het documentvenster waarin de frameset wordt weergegeven. Als het framesetbestand is opgeslagen, verwijdert u het bestand.

Een frame vergroten/verkleinen

• Als u framegroottes bij benadering wilt instellen, versleept u de frameranden in de ontwerpweergave van het

documentvenster.

• Als u de groottes precies wilt instellen en wilt opgeven hoe veel ruimte in de browser aan een rij of kolom met frames

wordt toegewezen wanneer frames in het browservenster niet op volledige grootte kunnen worden weergegeven,

gebruikt u de eigenschappencontrole.

Frames en framesets selecteren

Als u de eigenschappen van een frame of frameset wilt wijzigen, selecteert u eerst de frame of frameset die u wilt wijzigen.

U kunt een frame of frameset in het documentvenster of met het paneel Frames selecteren.

DREAMWEAVER CS3

Handboek

199

In het paneel Frames worden de frames in een frameset grafisch voorgesteld. De hiërarchie van de frameset wordt

weergegeven op een manier die in het documentvenster niet altijd duidelijk is. In het paneel Frames wordt elke frameset

met een erg dikke rand omringd. Elk frame is omringd met een dunne, grijze lijn en wordt met een framenaam aangeduid.

Wanneer een frame in het ontwerpvenster van het documentvenster is geselecteerd, worden de randen van het frame door

een stippellijn omgeven. Wanneer een frameset is geselecteerd, worden alle randen van de frames binnen de frameset

omgeven door een licht gekleurde stippellijn.

Opmerking: Het plaatsen van de invoegpositie in een document dat in een frame wordt weergegeven, is niet hetzelfde als het

selecteren van een frame. Er zijn diverse bewerkingen (zoals het instellen van frame-eigenschappen) waarvoor u een frame moet

selecteren.

Een frame of frameset in het paneel Frames selecteren

1 Selecteer Venster > Frames.

2 In het paneel Frames:

• Klik op een frame om het te selecteren. (Er verschijnt een selectieomtrek rond het frame in het paneel Frames en in de

ontwerpweergave van het documentvenster.)

• Klik op de rand rond een frameset om de frameset te selecteren.

Een frame of frameset in het documentvenster selecteren

• Als u een frame wilt selecteren, houdt u de Alt-toets (Windows) of de Option-Shift-toetsen (Macintosh) ingedrukt en

klikt u binnen een frame in de ontwerpweergave.

• Als u een frameset wilt selecteren, klikt u in de ontwerpweergave op een van de interne frameranden van de frameset.

(De frameranden moeten hiervoor zichtbaar zijn. Als dat niet zo is, klikt u op Weergave > Visuele hulpmiddelen >

Frameranden om de frameranden zichtbaar te maken.)

Opmerking: Het is meestal eenvoudiger framesets te selecteren in het paneel Frames dan in het documentvenster. Zie de

voorgaande onderwerpen voor meer informatie.

Een andere frame of frameset selecteren

• Als u de vorige of volgende frameset op hetzelfde hiërarchische niveau als de huidige selectie wilt selecteren, drukt u op

Alt+Linkerpijl of Alt+Rechterpijl (Windows) of Command+Linkerpijl of Command+Rechterpijl (Macintosh). U kunt

met deze toetsen door de frames en framesets bladeren in de volgorde waarin ze in het framesetbestand zijn gedefinieerd.

• Als u de bovenliggende frameset wilt selecteren (de frameset die de huidige selectie bevat), drukt u op Alt+Pijl-omhoog

(Windows) of Command+Pijl-omhoog (Macintosh).

• Als u het eerste onderliggende frame of de eerste onderliggende frameset van de momenteel geselecteerde frameset (dat

wil zeggen de eerste in de volgorde waarin ze in het framesetbestand zijn geselecteerd) wilt selecteren, drukt u op

Alt+Pijl-omlaag (Windows) of Command+Pijl-omlaag (Macintosh).

DREAMWEAVER CS3

Handboek

200

Een document in een frame openen

U kunt de eerste inhoud van een frame weergeven door nieuwe inhoud in een leeg document in een frame in te voegen, of

door een bestaand document in een frame te openen.

1 Plaats de invoegpositie in een frame.

2 Selecteer Bestand > Openen in frame.

3 Selecteer het document dat u in het frame wilt openen, en klik op OK (Windows) of Kies (Macintosh).

4 (Optioneel) Als u dit document standaard in het frame wilt weergeven telkens wanneer de frameset in een browser wordt

geopend, slaat u de frameset op.

Frame- en framesetbestanden opslaan

Voordat u een voorbeeld van een frameset in een browser kunt weergeven, moet u het framesetbestand en alle documenten

die in de frames worden weergegeven opslaan. U kunt elk framesetbestand en geframed document apart opslaan. U kunt

ook het framesetbestand en alle documenten die in frames worden weergegeven in een keer opslaan.

Opmerking: Wanneer u een set frames met de visuele functies in Dreamweaver maakt, krijgt elk nieuw document dat in een

frame verschijnt, een standaardbestandsnaam. Bijvoorbeeld het eerste framesetbestand krijgt de naam UntitledFrameset-1,

terwijl het eerste document in een frame de naam UntitledFrame-1 krijgt.

Een framesetbestand opslaan

❖

Selecteer de frameset in het paneel Frames of het documentvenster.

• Als u het framesetbestand wilt opslaan, selecteert u Bestand > Frameset opslaan.

• Als u het framesetbestand als een nieuw bestand wilt opslaan, selecteert u Bestand > Frameset opslaan als.

Opmerking: Als het framesetbestand niet eerder is opgeslagen, hebben deze opdrachten dezelfde uitwerking.

Een document opslaan dat in een frame wordt weergegeven

❖

Klik in het frame en selecteer vervolgens Bestand > Frame opslaan of Bestand > Frame opslaan als.

Alle bestanden opslaan die aan een set frames zijn gekoppeld

❖

Selecteer Bestand > Alle frames opslaan.

Hiermee worden alle open documenten in de frameset opgeslagen, met inbegrip van het framesetbestand en alle geframede

documenten. Als het framesetbestand nog niet is opgeslagen, is er in de ontwerpweergave een dikke rand zichtbaar rond

de frameset (of het niet-opgeslagen frame) en kunt u een bestandsnaam selecteren.

Opmerking: AlsueendocumentmetBestand>Openeninframehebtgeopendineenframeenuslaatdeframesetop,wordt

het in het frame geopende document het standaarddocument voor weergave in het desbetreffende frame. Als u dat document

niet tot het standaarddocument wilt maken, slaat u het framesetbestand niet op.

Eigenschappen en kenmerken van frames weergeven en instellen

U kunt met de eigenschappencontrole de meeste frame-eigenschappen (inclusief randen, marges en de weergave van

schuifbalken in frames) weergeven en instellen. Als u een frame-eigenschap instelt, heeft die instelling voorrang boven de

instelling voor de desbetreffende eigenschap in een frameset.

U wilt de toegankelijkheid mogelijk ook verbeteren door bepaalde framekenmerken in te stellen, zoals het titelkenmerk

(wat iets anders is als het naamkenmerk), om de toegankelijkheid te verbeteren. U kunt de auteursoptie voor de

toegankelijkheid van frames inschakelen om kenmerken in te stellen wanneer u frames maakt, of u kunt kenmerken

instellen nadat u een frame hebt ingevoegd. Als u de de toegangskenmerken van een frame wilt bewerken, gebruikt u de

Tagcontrole om de HTML-code direct te bewerken.

Zie ook

“Pagina's voor toegankelijkheid ontwerpen” op pagina 673

DREAMWEAVER CS3

Handboek

201

Frame-eigenschappen weergeven of instellen

1 Voer een van de volgende handelingen uit om een frame te selecteren:

• Houd de Alt-toets (Windows) of de Option-Shift-toetsen (Macintosh) ingedrukt en klik in een frame in de

ontwerpweergave van het documentvenster.

• Klik in een frame in het paneel Frames (Venster > Frames).

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek om alle

frame-eigenschappen weer te geven.

3 Stel de opties van de eigenschappencontrole voor frames in.

Framenaam Hier kunt u de naam opgeven die wordt gebruikt in het target-kenmerk van een koppeling of door een script

om naar het frame te verwijzen. Een framenaam moet uit één woord bestaan. Onderstrepingstekens (_) zijn toegestaan,

maar koppeltekens (-), punten (.) en spaties mogen niet worden gebruikt. Een framenaam moet met een letter beginnen

(niet met een cijfer). Framenamen zijn hoofdlettergevoelig. Gebruik als framenaam geen termen die in JavaScript

functioneren als gereserveerde woorden (zoals top of navigator).

Als u met een koppeling de inhoud van een ander frame wilt wijzigen, moet u een naam aan het doelframe geven. Geef elk

frame dat u maakt, onmiddellijk een naam om later eenvoudiger koppelingen tussen de frames te kunnen aanbrengen.

Bron Hier kunt u het brondocument opgeven dat u in het frame wilt weergeven. Klik op het mappictogram om naar een

bestand te bladeren en dit te selecteren.

Schuiven Hiermee kunt u opgeven of u een schuifbalk in het frame wilt weergeven. Als u deze optie instelt op Standaard,

wordt er geen waarde voor het bijbehorende kenmerk ingesteld, zodat in elke browser de eigen standaardwaarde kan

worden gebruikt. In de meeste browsers is Automatisch de standaardinstelling. Dit betekent dat er alleen schuifbalken

worden weergegeven wanneer er in een browservenster niet genoeg ruimte beschikbaar is om de volledige inhoud van het

huidige frame weer te geven.

Formaat niet wijzigen Hiermee voorkomt u dat bezoekers de frameranden kunnen verslepen om het frame in een browser

groter of kleiner te maken.

Opmerking: U kunt in Dreamweaver frames altijd groter of kleiner maken. Deze optie is alleen van toepassing voor bezoekers

die de frames in een browser weergeven.

Randen Hiermee kunt u de randen van het huidige frame weergeven of verbergen wanneer het frame in een browser wordt

getoond. Als u de optie Randen voor een frame instelt, worden de randinstellingen van de frameset hierdoor vervangen.

De instellingen voor randen zijn Ja (randen weergeven), Nee (randen verbergen) en Standaard. In de meeste browsers

worden randen standaard weergegeven (tenzij de optie Randen voor de bovenliggende frameset is ingesteld op Nee). Een

rand wordt alleen verborgen wanneer de eigenschap Randen is ingesteld op Nee voor alle frames die de rand delen, of

wanneer de eigenschap Randen van de bovenliggende frameset is ingesteld op Nee en de eigenschap Randen is ingesteld op

Standaard voor de frames die de rand delen.

Randkleur Hier kunt u de randkleur voor alle randen van het frame instellen. Deze kleur is van toepassing op alle frames

die het frame raken en vervangt de opgegeven randkleur van de frameset.

Breedte marge Hier kunt u de breedte in pixels van de linker- en rechtermarge instellen (de ruimte tussen de frameranden

en de inhoud).

Margehoogte Hier kunt u de hoogte in pixels van de boven- en ondermarge instellen (de ruimte tussen de frameranden en

de inhoud).

Opmerking: Het instellen van de margebreedte en -hoogte voor een frame is niet hetzelfde als het instellen van marges in het

dialoogvenster Wijzigen > Pagina-eigenschappen.

Als u de achtergrondkleur van een frame wilt wijzigen, stelt u de achtergrondkleur van het document in het frame in

pagina-eigenschappen in.

De toegankelijkheidswaarden voor een frame instellen

1 Selecteer in het paneel Frames (Venster > Frames) een frame door de invoegpositie in een van de frames te plaatsen.

2 Selecteer Wijzigen > Tag bewerken.

DREAMWEAVER CS3

Handboek

202

3 Selecteer Stijlpagina/Toegankelijkheid in de categorieënlijst links, geef de gewenste waarden op en klik op OK.

De toegankelijkheidswaarden voor een frame bewerken

1 Ga naar de codeweergave of de code- en ontwerpweergaven voor uw document als u zich momenteel in de

ontwerpweergave bevindt.

2 Selecteer in het paneel Frames (Venster > Frames) een frame door de invoegpositie in een van de frames te plaatsen.

Dreamweaver markeert de frametag in de code.

3 Klik met de rechtermuisknop in de code (Windows), of houd de Command-toets ingedrukt en klik in de code. Selecteer

vervolgens Tag bewerken.

4 Maak de gewenste wijzigingen in de Tagcontrole en klik op OK.

De achtergrondkleur van een document in een frame wijzigen

1 Plaats de invoegpositie in het frame.

2 Selecteer Wijzigen > Pagina-eigenschappen.

3 Klik in het dialoogvenster Pagina-eigenschappen op het menu Achtergrondkleur en selecteer een kleur.

Frameseteigenschappen weergeven en instellen

U kunt met de eigenschappencontrole de meeste frameseteigenschappen (inclusief framesettitel, randen, marges en

framegrootten) weergeven en instellen.

Een titel voor een framesetdocument instellen

1 Voer een van de volgende handelingen uit om een frameset te selecteren:

• Klik in de ontwerpweergave van het documentvenster op een rand tussen twee frames in de frameset.

• Klik in het paneel Frames (Venster > Frames) op de rand die een frameset omgeeft.

2 Typ in het vak titel van de documentwerkbalk een naam voor het framesetdocument.

Wanneer een bezoeker de frameset in een browser weergeeft, verschijnt de titel in de titelbalk van de browser.

Frameseteigenschappen weergeven of instellen

1 Voer een van de volgende handelingen uit om een frameset te selecteren:

• Klik in de ontwerpweergave van het documentvenster op een rand tussen twee frames in de frameset.

• Klik in het paneel Frames (Venster > Frames) op de rand die een frameset omgeeft.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek en stel de

framesetopties in.

Randen Hiermee bepaalt u of er randen rond frames verschijnen wanneer het document in een browser wordt

weergegeven. Als u randen wilt weergeven, klikt u op Ja. Als u dat niet wilt, selecteert u Nee. Als u de browser wilt later

bepalen of er randen worden weergegeven, selecteert u Standaard.

Randbreedte Hier kunt u de breedte van alle randen in de tabel opgeven.

Randkleur Hier kunt u een kleur voor de randen instellen. Kies een kleur met de kleurkiezer of typ de hexadecimale

waarde van een kleur.

DREAMWEAVER CS3

Handboek

203

RowCol Selectie Hier kunt u de framegrootten voor de rijen en kolommen van de geselecteerde frameset instellen. Klik op

een tab aan de linker- of bovenkant van het gebied RowCol Selectie. Geef vervolgens een hoogte of breedte op in het

tekstvak Waarde.

3 Als u wilt opgeven hoe veel ruimte de browser aan elk frame moet toewijzen, geeft u de volgende keuzen in het menu

Eenheden op:

Pixels Hiermee stelt u de grootte van de geselecteerde kolom of rij in op een absolute waarde. Kies deze opties voor een

frame dat altijd even groot moet zijn (bijvoorbeeld een navigatiebalk). Aan frames met grootten die in pixels zijn

opgegeven, wordt ruimte toegewezen voordat dit gebeurt voor frames met grootten die zijn opgegeven als percentages of

relatief. De gebruikelijkste aanpak is om een frame aan de linkerkant op een vaste pixelbreedte in te stellen en een frame

aan de rechterkant op een relatieve breedte. Hierdoor kan het rechterframe na toewijzing van de pixelbreedte zodanig

worden uitgerekt dat het alle resterende ruimte opvult.

Opmerking: Als al uw breedten in pixels zijn opgegeven en een bezoeker bekijkt de frameset in een browser die te breed of te

smal is voor de breedte die u hebt opgegeven, worden de frames naar verhouding groter of kleiner gemaakt om de beschikbare

ruimte op te vullen. Hetzelfde geldt voor hoogten die in pixels zijn opgegeven. Het is daarom raadzaam ten minste één breedte

en hoogte als relatief op te geven.

Procent Hierkuntuopgevendatdehoogteofbreedtevandegeselecteerdekolomofrijeenpercentagevandetotalehoogte

of breedte van de bijbehorende frameset moet zijn. Aan frames met eenheden in percentages wordt ruimte toegewezen

nadat dit gebeurd is voor frames met eenheden in pixels, maar voor frames met eenheden die op relatief zijn ingesteld.

Relatief Hiermee kunt u opgeven dat aan de geselecteerde rij of kolom de ruimte moet worden toegewezen die overblijft

nadat ruimte aan frames in pixels en percentages is toegewezen, en dat de resterende ruimte verhoudingsgewijs moet

worden verdeeld tussen de frames met grootten die op relatief zijn ingesteld.

Opmerking: Wanneer u in het menu Eenheden de optie Relatief selecteert, verdwijnt elk getal dat u in het veld Waarde hebt

opgegeven. Als u een getal wilt opgeven, moet u het opnieuw invoeren. Als er echter niet meer dan één rij of kolom op Relatief

is ingesteld, hoeft u geen getal in te voeren omdat aan de desbetreffende rij of kolom alle ruimte wordt toegewezen die overblijft

nadat er ruimte aan alle andere rijen en kolommen is toegewezen. Als u zeker wilt dat de grootten volledig compatibel met alle

browsers zijn, geeft u 1 op in het veld Waarde. Dat is hetzelfde als geen waarde invullen.

Frame-inhoud met koppelingen controleren

Als u met een koppeling in het ene frame een document in een ander frame wilt openen, moet u een doel voor de koppeling

instellen. Het kenmerk

target van een koppeling geeft het frame of venster aan waarin de gekoppelde inhoud wordt

geopend.

Als uw navigatiebalk zich bijvoorbeeld in het linkerframe bevindt en u het gekoppelde materiaal in het frame met de

hoofdinhoud wilt weergeven, moet u de naam van het frame met de hoofdinhoud opgeven als het doel voor elk van de

navigatiebalkkoppelingen. Wanneer een bezoeker op een navigatiekoppeling klikt, wordt de opgegeven inhoud in het

hoofdframe geopend.

1 Selecteer in de ontwerpweergave tekst of een voorwerp.

2 Voer een van de volgende handelingen uit in het vak Koppelingen van de eigenschappencontrole (Venster >

Eigenschappen):

• Klik op het mappictogram en selecteer het bestand dat u wilt koppelen.

• Sleep het pictogram Wijzen naar bestand naar het paneel Bestanden, en selecteer het bestand dat u wilt koppelen.

DREAMWEAVER CS3

Handboek

204

3 Selecteer in het menu Doel van de eigenschappencontrole het frame of venster waarin het gekoppelde document moet

verschijnen:

• Met _blank wordt het gekoppelde document in een nieuw browservenster geopend en blijft het huidige venster

ongewijzigd.

• Met _parent wordt het gekoppelde document geopend in de bovenliggende frameset van het frame waarin de koppeling

is opgenomen en wordt de volledige frameset vervangen.

• Met _self wordt de koppeling in het huidige frame geopend en wordt de inhoud in dat frame vervangen.

• Met _top wordt het gekoppelde document in het huidige browservenster geopend en worden alle frames vervangen.

Framenamen worden ook in dit menu weergegeven. Selecteer een frame met een naam om het gekoppelde document in

dat frame te openen.

Opmerking: Framenamen worden alleen weergegeven wanneer u een document binnen een frameset bewerkt. Wanneer u een

document in zijn eigen documentvenster bewerkt, verschijnen er geen framenamen in het pop-upmenu Doel. Als u een

document buiten de frameset bewerkt, kunt u de naam van het doelframe in het tekstvak Doel typen.

Als u een koppeling maakt naar een pagina buiten uw site, moet u altijd

target="_top" of target="_blank" gebruiken

om ervoor te zorgen dat de pagina niet wordt weergegeven als onderdeel van uw site.

Inhoud opgeven voor browsers zonder frameondersteuning

UkuntinDreamweaverinhoudopgevenvoorweergaveineenoptekstgebaseerdebrowsereninouderegrafischebrowsers

zonder frameondersteuning. Deze inhoud wordt opgeslagen in het framesetbestand en afgebakend met een

noframes-tag.

Wanneer het framesetbestand in een browser zonder frameondersteuning wordt geladen, wordt in de browser alleen de

inhoud weergegeven die is afgebakend met de

noframes-tag.

Opmerking: Inhoud in het noframes-gebied moet uit meer bestaan dan alleen de opmerking “U moet een upgrade uitvoeren

naar een browser die frames ondersteunt”. Sommige sitebezoekers gebruiken systemen waarmee ze geen frames kunnen

bekijken.

1 Selecteer Wijzigen > Frameset > Inhoud zonder frames bewerken.

Dreamweaver wist de inhoud van de ontwerpweergave en de woorden 'Inhoud zonder frames' worden bovenaan in de

ontwerpweergave afgebeeld.

2 Ga op een van de volgende manieren te werk:

• Typ de inhoud (of voeg deze in) in het documentvenster op dezelfde manier als voor een gewoon document.

• Selecteer Venster > Codecontrole, plaats de invoegpositie tussen de body-tags die binnen de noframes-tags worden

weergegeven, en typ de HTML-code voor de inhoud.

3 Selecteer nogmaals Wijzigen > Frameset > Inhoud zonder frames bewerken om naar de normale weergave van het

framesetdocument terug te gaan.

JavaScript-gedrag met frames gebruiken

Er zijn verschillende opdrachten voor JavaScript-gedrag en navigatie die erg handig voor gebruik met frames zijn:

Tekst van frame instellen Hiermee vervangt u de inhoud en opmaak van een bepaald frame door de inhoud die u opgeeft.

De inhoud kan uit iedere geldige HTML-code bestaan. Gebruik deze actie om informatie dynamisch in een frame weer te

geven.

Ga naar URL Hiermee opent u een nieuwe pagina in het huidige venster of in het opgegeven frame. Deze actie is vooral

handig om de inhoud van twee of meer frames met één muisklik te wijzigen.

Navigatiebalk invoegen: Hiermee voegt u een navigatiebalk aan een pagina toe. Nadat u een navigatiebalk hebt ingevoegd,

kunt u gedrag aan de bijbehorende afbeeldingen koppelen en instellen welke afbeelding op grond van de acties van de

bezoeker worden weergegeven. U kunt bijvoorbeeld een knopafbeelding met de status Omhoog of Omlaag weergeven,

zodat de bezoeker weet welke pagina van een site wordt weergegeven.

DREAMWEAVER CS3

Handboek

205

Snelmenu Invoegen: Hiermee stelt u een menulijst met koppelingen in waarmee bestanden in een browservenster worden

geopend wanneer er op de koppelingen wordt geklikt. U kunt ook een bepaald venster of frame opgeven om het document

daarin te openen.

Zie ook

“Het gedrag Tekst van frame instellen toepassen” op pagina 343

“Het gedrag Ga naar URL toepassen” op pagina 340

“Het gedrag Navigatiebalkafbeelding instellen toepassen” op pagina 342

“Het gedrag Snelmenu toepassen” op pagina 340

206

Hoofdstuk 8: Inhoud toevoegen aan

pagina's

U kunt visueel inhoud aan uw webpagina's toevoegen zonder kennis te hebben van HTML. U kunt tekst, afbeeldingen,

Flash-video's, geluid en andere mediaobjecten toevoegen aan uw webpagina's en u kunt pagina-eigenschappen instellen.

Werken met pagina's

Informatie over het werken met pagina's

Adobe® Dreamweaver® CS3 bevat veel functies waarmee u gemakkelijk nieuwe webpagina's kunt maken en waarmee u

eigenschappen van webpagina's kunt opgeven, zoals paginatitels, achtergrondafbeeldingen en -kleuren en kleuren voor

tekst en koppelingen. Daarnaast kunt u beschikken over hulpmiddelen waarmee u de prestaties van uw website kunt

maximaliseren en waarmee u pagina's kunt maken en testen zodat u zeker weet dat ze compatibel zijn met verschillende

webbrowsers.

Bij het maken van een webpagina moet u rekening houden met de browsers en besturingssystemen die gebruikers

gebruiken voor het weergeven van uw webpagina en met de talen die u moet ondersteunen. Met Dreamweaver kunt u

kleuren selecteren die goed worden weergegeven in verschillende webbrowsers, de codering van verschillende tekens

(lettervormen) voor verschillende talen instellen en controleren of een webbrowser compatibel is met uw website.

Informatie over het instellen van pagina-eigenschappen

Voor elke pagina die u in Dreamweaver maakt, kunt u eigenschappen voor de indeling en opmaak opgeven in het

dialoogvenster Pagina-eigenschappen (Wijzigen > Pagina-eigenschappen). In het dialoogvenster Pagina-eigenschappen

kunt u de standaardlettertypefamilie en tekengrootte, de achtergrondkleur, marges, koppelingsstijlen en veel andere

aspecten van pagina-ontwerp instellen. U kunt nieuwe pagina-eigenschappen toewijzen voor elke nieuwe pagina die u

maakt en de instellingen voor bestaande pagina's wijzigen.

Standaard worden teksten in Dreamweaver opgemaakt met CSS (Cascading Style Sheets). U kunt de voorkeuren voor

pagina-opmaak wijzigen in HTML-opmaak in het dialoogvenster Voorkeuren (Bewerken >Voorkeuren). Als u CSS-

pagina-eigenschappen gebruikt, worden CSS-tags gebruikt voor alle eigenschappen die zijn gedefinieerd in de categorieën

Weergave, Koppelingen en Koppen van het dialoogvenster Pagina-eigenschappen. De CSS-tags die deze kenmerken

definiëren, zijn ingesloten in de

kopsectie van de pagina.

Opmerking: De door u gekozen pagina-eigenschappen gelden alleen voor het actieve document. Als de pagina een externe CSS-

stijlpagina gebruikt, overschrijft Dreamweaver de tags uit de stijlpagina niet, omdat dit gevolgen zou hebben voor alle andere

pagina's die die stijlpagina gebruiken.

CSS- en HTML-pagina-eigenschappen

Standaard worden CSS-tags gebruikt om pagina-eigenschappen toe te kennen. Als u in plaats daarvan HTML-tags wilt

gebruiken, moet u dit opgeven in het dialoogvenster Voorkeuren.

Als u ervoor kiest HTML te gebruiken in plaats van CSS, wordt in de eigenschappencontrole het pop-upmenu Stijl

weergegeven. Voor de besturingselementen voor lettertype, tekengrootte, kleur en uitlijning worden echter alleen

eigenschappen weergegeven die zijn ingesteld met HTML-tags. De waarden van CSS-eigenschappen die zijn toegepast op

de huidige selectie zijn niet meer zichtbaar en het pop-upmenu Grootte wordt uitgeschakeld.

DREAMWEAVER CS3

Handboek

207

Zie ook

“HTML opgeven in plaats van CSS” op pagina 213

“Pagina-eigenschappen instellen” op pagina 208

Actieve inhoud converteren

Webpagina's die actieve inhoud (inhoud waarop gebruikers moeten klikken om er interactief mee te kunnen werken in de

meest recente versies van Internet Explorer) bevatten, worden in Dreamweaver hersteld. Actieve inhoud is bijvoorbeeld:

• Adobe® Flash®-, Adobe® Flash® Video- of Adobe® FlashPaper™-inhoud

• Shockwave®- of Authorware®-inhoud

• Java-applets

• Real Media-inhoud

• QuickTime-inhoud

• Aangepaste ActiveX-besturingselementen

• Andere ActiveX-besturingselementen of -insteekmodules

Als u een pagina opent in Dreamweaver, wordt deze gescand op actieve inhoud. Vervolgens wordt een van drie mogelijke

opties weergegeven, afhankelijk van het type actieve inhoud in de pagina.

• Als de pagina actieve inhoud bevat die in ingesloten in objecttags en die objecttags alleen param-tags en/of embed-tags

bevatten, stelt Dreamweaver voor alle actieve inhoud op de pagina voor u te converteren.

• Als uw pagina net zo is als hierboven maar ook actieve inhoud bevat die is ingesloten in objecttags die andere soorten

tags bevatten, stelt Dreamweaver voor alleen de objecttags te converteren die param-tags en/of embed-tags bevatten.

• Als de pagina alleen actieve inhoud bevat die in ingesloten in objecttags die meer dan alleen param-tags en/of embed-

tagsbevatten,Dreamweaverwordtereenwaarschuwingsberichtweergegevenwaarinuwordtgemelddatudezetagsniet

kunt converteren.

Als u in een van de twee eerste dialoogvensters voor het converteren van actieve inhoud op Ja klikt, worden bestaande

objecttags gezocht die param-tags en/of embed-tags bevatten, worden die objecttags ingesloten in noscript-tags en worden

scripttags toegevoegd waarmee de verwachte functionaliteit van actieve inhoud mogelijk wordt gemaakt via het aanroepen

van JavaScript-functies in een extern bestand. Dreamweaver Als u het bijgewerkte bestand opslaat, wordt dit externe

bestand (AC_RunActiveContent.js) gemaakt en in een nieuwe map (met de naam Scripts, in de hoofdmap van uw site)

geplaatst. U moet het bestand AC_RunActiveContent.js uploaden als u de bijgewerkte pagina uploadt. U kunt dit

handmatig doen door op Ja te klikken in het dialoogvenster Afhankelijke bestanden.

Opmerking: Als u een ActiveX-object invoegt in een document, maakt Dreamweaver twee externe bestanden:

AC_RunActiveContent.js en AC_ ActiveX.js. U moet beide bestanden uploaden als u de bijgewerkte pagina uploadt. U kunt

dit handmatig doen door op Ja te klikken in het dialoogvenster Afhankelijke bestanden.

Dreamweaver past alleen objecttags aan en geen onafhankelijke embed- of applet-tags die zijn gebruikt voor het invoegen

van actieve inhoud in oudere pagina's (hoewel embed-tags die zijn ingesloten in objecttags wel worden aangepast doordat

Dreamweaver de objecttag insluit). Als u webpagina's embed- of applet-tags bevat, moet u deze tags converteren naar

objecttags en vervolgens de pagina's openen zodat Dreamweaver de conversie voor u kan uitvoeren. U kunt embed- en

applet-tags gemakkelijk vinden in uw webpagina's via een zoekopdracht.

De functie is uitbreidbaar. U kunt extensies van derden gebruiken voor het converteren van webpagina's waarop specifieke

soorten insteekmodules worden gebruikt (bijvoorbeeld RealPlayer- of Windows Media Player-inhoud).

U kunt de functie voor het converteren van actieve inhoud ook bereiken via Bestand > Converteren > Actieve inhoud.

Opmerking: Actieve inhoud moet per pagina worden bijgewerkt. U kunt niet alle pagina's in een site in één keer bijwerken. U

kunt het beste in de hele site zoeken naar objectcodes, de pagina's met die tags openen en Dreamweaver de pagina's laten

herstellen.

Bezoek www.adobe.com/devnet/activecontent voor meer informatie over actieve inhoud.

DREAMWEAVER CS3

Handboek

208

Aangepaste inhoud converteren

Dreamweaver converteert alleen param- en embed-tags die zijn opgenomen binnen de aangetroffen objecttags. Als u uw

code hebt aangepast (als u bijvoorbeeld een img-tag of een andere soort tag hebt toegevoegd binnen een objecttag), worden

tijdens runtime niet de juiste tekenreeksen voor die inhoud uitgeschreven met de JavaScript-tags, omdat de JavaScript-

functie van Dreamweaver alleen kenmerk-waarde-paren genereert voor param- en embed-tags. Als u wilt dat uw

aangepaste code goed wordt weergegeven tijdens runtime en ook zoals verwacht werkt in Internet Explorer, moet u op een

van de volgende manieren te werk gaan:

• Schrijf zelf een JavaScript-functie die met aangepaste code werkt. (Als u dat wilt, kunt u ook de Dreamweaver-functie

voor het converteren van actieve inhoud uitschakelen door Bewerken > Voorkeuren > Code herschrijven te selecteren.)

• Ontwikkel een extensie waarmee de generateScript()-functie kan zoeken naar andere soorten informatie binnen de

objecttag en waarmee die informatie wordt doorgegeven naar een JavaScript-functie voor het verwerken van andere

soorten argumenten.

Bezoek www.adobe.com/devnet/activecontent voor meer informatie over actieve inhoud.

Zie ook

“Tekst zoeken en vervangen” op pagina 220

Over het coderen van documenten

Bij het coderen van documenten wordt de codering voor tekens in het document opgegeven. De codering van documenten

wordt opgegeven in een

meta-tag in de kop van het document. Met de codering wordt aan de browser en Dreamweaver

doorgegeven hoe het document moet worden gedecodeerd en welke lettertypen moeten worden gebruikt voor het

weergeven van de gedecodeerde tekst.

Als u bijvoorbeeld Western European (Latin1) opgeeft, wordt de volgende

meta-tag ingevoegd: <meta http-

equiv="Content-Type" content="text/html; charset=iso-8859-1">

. Het document wordt in Dreamweaver

weergegeven met de lettertypen die u hebt opgegeven in de voorkeuren voor lettertypen voor de codering Western

European (Latin1). Het document wordt in een browser weergegeven met de lettertypen die de gebruiker van de browser

heeft opgegeven voor de codering Western European (Latin1).

Als u Japanese (Shift JIS) opgeeft, wordt de volgende

meta-tag ingevoegd: <meta http-equiv="Content-Type"

content="text/html; charset=Shift_JIS">

. Het document wordt in Dreamweaver weergegeven met de lettertypen die

u hebt opgegeven voor de codering Japanese. Het document wordt in een browser weergegeven met de lettertypen die de

gebruiker van de browser heeft opgegeven voor de Japanse codering.

U kunt de documentcodering voor een pagina wijzigen en de standaardcodering wijzigen die door Dreamweaver wordt

gebruikt voor het maken van nieuwe documenten, waaronder de lettertypen die worden gebruikt voor de weergave van elke

codering.

Zie ook

“Standaardocumenttype en -codering instellen” op pagina 70

Pagina-eigenschappen instellen

Paginatitels, achtergrondafbeeldingen en -kleuren, kleuren voor tekst en koppelingen en marges zijn basiseigenschappen

van elk webdocument. U kunt deze eigenschappen instellen of wijzigen en het documentcoderingstype opgeven dat

specifiek is voor de taal die is gebruikt bij het schrijven van de webpagina. Via het dialoogvenster Pagina-eigenschappen

kunt u ook opgeven welke UNF (Unicode Normalization Form) moet worden gebruikt met dat coderingstype.

Als u zowel een achtergrondafbeelding als een achtergrondkleur gebruikt, wordt de kleur weergegeven terwijl de afbeelding

wordt gedownload, waarna de afbeelding de kleur bedekt. Als de achtergrondafbeelding transparante pixels bevat, wordt

daar de achtergrondkleur weergegeven.

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole.

DREAMWEAVER CS3

Handboek

209

2 Bewerk de pagina-eigenschappen en klik op OK.

Documenttype (DTD) Geeft de definitie van een documenttype aan. U kunt een HTML-document bijvoorbeeld XHTML-

compatibel maken door XHTML 1.0 Transitional of XHTML 1.0 Strict te selecteren in het pop-upmenu

Documentcodering Geeft de codering aan die wordt gebruikt voor tekens in het document.

Unicode-formulieren Is alleen beschikbaar als u UTF-8 hebt geselecteerd als documentcodering. Er zijn vier UNF's. De

belangrijkste is Normalization Form C, omdat dit het meest algemeen wordt gebruikt in het Character Model voor het

World Wide Web. Voor de volledigheid biedt Adobe de drie andere UNF's ook aan.

Unicode bevat enkele tekens die visueel gelijk zijn maar die binnen het document op verschillende manieren worden

opgeslagen. De letter 'ë' (e-umlaut) kan bijvoorbeeld worden vertegenwoordigd door één teken, de e-umlaut, of door twee

tekens, de normale Latijnse 'e' plus de umlaut. Een Unicode-combinatieteken is een teken dat samen met het voorgaande

teken wordt gebruikt. In dit geval zou de umlaut dus worden weergegeven boven de Latijnse 'e'. Beide vormen hebben

dezelfde visuele typografie als resultaat, maar voor elke vorm wordt iets anders opgeslagen in het bestand.

Normalisatie is het proces waarbij wordt gecontroleerd of alle tekens die in verschillende vormen kunnen worden

opgeslagen, allemaal in dezelfde vorm zijn opgeslagen. In dit geval betekent dat dat alle 'ë'-tekens in een document zijn

opgeslagen als één e-umlaut of als 'e' plus de umlaut en dat niet beide vormen in één document zijn opgeslagen.

Als u meer informatie wilt hebben over Unicode-normalisatie en de specifieke vormen die kunnen worden gebruikt, gaat

u naar de Unicode-website op www.unicode.org/reports/tr15.

Zie ook

“HTML opgeven in plaats van CSS” op pagina 213

“De XHTML-code die Dreamweaver genereert” op pagina 289

“CSS-eigenschappen instellen” op pagina 126

Lettertype, achtergrondkleur en achtergrondafbeelding voor een pagina instellen

Gebruik het dialoogvenster Pagina-eigenschappen voor het opgeven van verschillende basisopties voor de pagina-indeling

van uw webpagina, waaronder het lettertype, de achtergrondkleur en de achtergrondafbeelding.

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole.

2 Selecteer de categorie Weergave en stel de opties in.

Lettertype voor pagina Geeft de standaardlettertypefamilie aan die in de webpagina's wordt gebruikt. Dreamweaver

gebruikt de door u opgegeven lettertypefamilie, tenzij er voor een tekstelement specifiek een ander lettertype wordt

opgegeven.

Grootte Geeft de standaardtekengrootte aan die in de webpagina's wordt gebruikt. Dreamweaver gebruikt de door u

opgegeven tekengrootte, tenzij er voor een tekstelement specifiek een andere tekengrootte wordt opgegeven.

Tekstkleur Geeft de standaardkleur aan voor de weergave van lettertypen.

Achtergrondkleur Stelt een achtergrondkleur in voor uw pagina. Klik op het vakje Achtergrondkleur en selecteer een kleur

in de Kleurkiezer.

Achtergrondafbeelding Stelt een achtergrondafbeelding in. Klik op de knop Bladeren en blader naar de afbeelding om ze

te selecteren. U kunt ook het pad naar de achtergrondafbeelding typen in het vak Achtergrondafbeelding.

In Dreamweaver wordt de achtergrondafbeelding naast elkaar weergegeven (herhaald) als deze niet groot genoeg is om het

hele venster te vullen, net zoals bij browsers. (U kunt voorkomen dat de achtergrondafbeelding naast elkaar wordt

weergegeven door in CSS het naast elkaar weergeven van afbeeldingen uit te schakelen.)

Herhalen Geeft aan hoe de achtergrondafbeelding op de pagina wordt weergegeven:

• Selecteer de optie Geen herhaling als u de achtergrondafbeelding maar één keer wilt weergeven.

• Selecteer de optie Herhalen als u de afbeelding zowel horizontaal als verticaal wilt herhalen.

• Selecteer de optie Herhalen-x als u de achtergrondafbeelding horizontaal wilt herhalen.

DREAMWEAVER CS3

Handboek

210

• Selecteer de optie Herhalen-y als u de achtergrondafbeelding verticaal wilt herhalen.

Marge links en Marge rechts Geven de grootte van de linker- en rechterpaginamarge aan.

Marge boven en Marge onder Geven de grootte van de paginamarge bovenaan en onderaan.

Koppelingseigenschappen instellen

U kunt het standaardlettertype, de tekengrootte en kleuren definiëren voor koppelingen, bezochte koppelingen en actieve

koppelingen.

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole.

2 Selecteer de categorie Koppelingen en stel de opties in.

Lettertype koppelingen Geeft de standaardlettertypefamilie aan die voor koppelingstekst wordt gebruikt. Standaard

gebruikt Dreamweaver de lettertypefamilie die is opgegeven voor de hele pagina, tenzij u een ander lettertype opgeeft.

Grootte Geeft de standaardtekengrootte aan die voor koppelingstekst wordt gebruikt.

Kleur van koppeling Geeft de kleur aan die op koppelingstekst moet worden toegepast.

Bezochte koppelingen Geeft de kleur aan die op bezochte koppelingen moet worden toegepast.

Rollover-koppelingen Geeft de kleur aan die moet worden toegepast als een muis (of aanwijzer) op een koppeling wordt

geplaatst.

Actieve koppelingen Geeft de kleur aan die moet worden toegepast als er met een muis (of aanwijzer) op een koppeling

wordt geklikt.

Onderstrepingsstijl Geeft de onderstrepingsstijl aan die op koppelingen moet worden toegepast. Als er voor de pagina al

een onderstrepingsstijl is gedefinieerd (bijvoorbeeld via een externe CSS-stijlpagina), wordt voor het menu

Onderstrepingsstijl standaard een optie gebruikt die niet gewijzigd kan worden. Op deze manier wordt u attent gemaakt

op een koppelingsstijl die is gedefinieerd. Als u de onderstrepingsstijl wijzigt met het dialoogvenster Pagina-

eigenschappen, wordt de eerdere koppelingsdefinitie gewijzigd.

Eigenschappen voor paginakoppen instellen

U kunt het standaardlettertype, de tekengrootte en kleuren definiëren voor koppelingen, bezochte koppelingen en actieve

koppelingen.

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole.

2 Selecteer de categorie Koppen en stel de opties in.

Lettertype Geeftdestandaardlettertypefamilieaandieindewebpagina'swordtgebruikt. Dreamweavergebruiktdedoor

u opgegeven lettertypefamilie, tenzij er voor een tekstelement specifiek een ander lettertype wordt opgegeven.

Kop 1 tot en met Kop 6 Geven de tekengrootte en tekenkleur aan die moeten worden gebruikt voor maximaal zes niveaus

koptags.

Eigenschappen voor titels en coderingseigenschappen instellen

U kunt het standaardlettertype, de tekengrootte en kleuren definiëren voor koppelingen, bezochte koppelingen en actieve

koppelingen. In de categorie voor pagina-eigenschappen voor Titel/codering kunt u het documentcoderingstype opgeven

dat specifiek is voor de taal die wordt gebruikt voor het schrijven van uw webpagina's, en kunt u opgeven welke UNF moet

worden gebruikt met dat coderingstype.

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole.

2 Selecteer de categorie Titel/codering en stel de opties in.

Titel Geeft de paginatitel aan die wordt weergegeven in de titelbalk van het documentvenster en de meeste browservensters.

Documenttype (DTD) Geeft de definitie van een documenttype aan. U kunt een HTML-document bijvoorbeeld XHTML-

compatibel maken door XHTML 1.0 Transitional of XHTML 1.0 Strict te selecteren in het pop-upmenu

Codering Geeft de codering aan die wordt gebruikt voor tekens in het document.

DREAMWEAVER CS3

Handboek

211

Als u Unicode (UTF-8) selecteert als documentcodering, is eenheidscodering niet nodig, omdat UTF-8 zonder problemen

alle tekens kan vertegenwoordigen. Als u een andere documentcodering selecteert, hebt u mogelijk eenheidscodering

nodig voor het vertegenwoordigen van bepaalde tekens. Zie www.w3.org/TR/REC-html40/sgml/entities.html voor meer

informatie over tekeneenheden.

Unicode-formulieren Is alleen beschikbaar als u UTF-8 hebt geselecteerd als documentcodering. Er zijn vier UNF's. De

belangrijkste is Normalization Form C, omdat dit het meest algemeen wordt gebruikt in het Character Model voor het

World Wide Web. De andere drie UNF's zijn ook beschikbaar.

Unicode-handtekening (BOM) opnemen Neemt een Byte Order Mark (BOM) op in het document. Een BOM bestaat uit 2

tot 4 bytes aan het begin van een tekstbestand waarmee een bestand wordt aangeduid als Unicode en, als dat het geval is,

de bytevolgorde van de volgende bytes. Omdat UTF-8 geen bytevolgorde heeft, is het toevoegen van een UTF-8 BOM

optioneel. Voor UTF-16 en UTF-32 is het verplicht.

Opnieuw laden Converteert het bestaande document of opent het opnieuw met de nieuwe codering.

Een overtrekafbeelding gebruiken om de pagina te ontwerpen

U kunt een afbeeldingsbestand invoegen en het gebruiken als richtlijn bij het ontwerpen van uw pagina:

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole.

2 Selecteer de categorie en stel de opties in.

Afbeelding overtrekken Geeft een afbeelding aan die moet worden gebruikt als richtlijn voor het kopiëren van een

ontwerp. Deze afbeelding dient alleen ter referentie en wordt niet weergegeven als het document wordt weergegeven in een

browser.

Transparantie Bepaalt de doorzichtigheid van de overtrekafbeelding, van volledig transparant tot volledig ondoorzichtig.

Elementen selecteren en weergeven in het documentvenster

Als u een element wilt selecteren in de ontwerpweergave van het documentvenster, klikt u op het element. Als een element

onzichtbaar is, moet u het zichtbaar maken voordat u het kunt selecteren.

Sommige HTML-code heeft geen zichtbare weergave in een browser.

Comment-tagswordenbijvoorbeeldnietweergegeven

in browsers. Als u een pagina maakt, kan het echter handig zijn om dergelijke onzichtbare elementen te kunnen selecteren,

bewerken, verplaatsen en verwijderen.

Met Dreamweaver kunt u opgeven of er pictogrammen moeten worden weergegeven waarmee de locatie van onzichtbare

elementen wordt gemarkeerd in de ontwerpweergave van het documentvenster. Om aan te geven welke

elementmarkeringen worden weergegeven, kunt u opties instellen in de voorkeuren voor onzichtbare elementen. U kunt

bijvoorbeeld opgeven dat benoemde ankerpunten wel zichtbaar zijn, maar regeleinden niet.

U kunt bepaalde onzichtbare elementen (zoals commentaren en benoemde ankers) maken met knoppen in de categorie

Algemeen op de invoegbalk. U kunt deze elementen vervolgens wijzigen met de eigenschappencontrole.

Zie ook

“Code weergeven” op pagina 293

“De invoegbalk gebruiken” op pagina 26

Elementen selecteren

• Als u een zichtbaar element wilt selecteren in het documentvenster, klikt u op het element of sleept u over het element.

• Als u een onzichtbaar element wilt selecteren, selecteert u Beeld > Visuele hulpmiddelen > Onzichtbare elementen (als

dat menu-item nog niet is geselecteerd) en klikt u vervolgens op de markering van het element in het documentvenster.

Sommige objecten worden op de pagina op een andere plaats weergegeven dan waar de code is ingevoegd. In de

ontwerpweergave is een AP-element (met absolute positie) overal op de pagina zichtbaar, maar in de codeweergave bevindt

de code die het AP-element definieert, zich op een vaste locatie. Als onzichtbare elementen worden weergegeven, worden

DREAMWEAVER CS3

Handboek

212

in Dreamweaver markeringen weergegeven in het documentvenster waarmee de locatie van de code voor dergelijke

elementen wordt aangegeven. Als u een markering selecteert, wordt het hele element geselecteerd. Als u bijvoorbeeld de

markering voor een AP-element selecteert, wordt het hele AP-element geselecteerd.

• Als u een volledige tag (inclusief de eventuele inhoud) wilt selecteren, klikt u op een tag in de tagkiezer linksonder in het

documentvenster. (De tagkiezer wordt zowel in de ontwerpweergave als in de codeweergave weergegeven.) In de

tagkiezer worden altijd de tags weergegeven die de huidige selectie of invoegpositie bevatten. De meest linkse tag is de

buitenste tag die de huidige selectie of invoegpositie bevat. De volgende tag bevindt zich binnen die buitenste tag,

enzovoort. De meest rechtse tag is de binnenste tag die de huidige selectie of invoegpositie bevat.

In het volgende voorbeeld bevindt de invoegpositie zich in een alineacode,

<p>. Om de tabel te selecteren met de alinea die

u wilt selecteren, selecteert u de

<table>-tag, links van de <p>-tag.

De HTML-code weergeven die is gekoppeld aan de geselecteerde tekst of het geselecteerde object

❖

Voer een van de volgende handelingen uit:

• Klik in de werkbalk Document op de knop Codeweergave tonen.

• Selecteer Beeld > Code.

• Klik in de werkbalk Document op de knop Code- en ontwerpweergaven tonen.

• Selecteer Beeld > Code en ontwerp.

• Selecteer Venster > Codecontrole.

Als u iets selecteert in een van de code-editors (de codeweergave of de codecontrole), wordt dit in het algemeen ook

geselecteerd in het documentvenster. U moet de twee weergaven mogelijk synchroniseren voordat de selectie wordt

weergegeven.

Markeerpictogrammen voor onzichtbare elementen weergeven of verbergen

❖

Selecteer Weergave > Visuele hulpmiddelen > Onzichtbare elementen.

Opmerking: Als u onzichtbare elementen weergeeft, kan dat een kleine invloed hebben op de indeling van een pagina doordat

andere elementen met een paar pixels worden verschoven. Als u de indeling nauwkeurig wilt weergeven, moet u daarom de

onzichtbare elementen verbergen.

Voorkeuren voor onzichtbare elementen instellen

Via de voorkeuren voor onzichtbare elementen kunt u opgeven welke soorten elementen zichtbaar zijn als u Beeld > Visuele

hulpmiddelen > Onzichtbare elementen selecteert.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en klik vervolgens op

Onzichtbare elementen.

2 Selecteer welke elementen zichtbaar gemaakt moeten worden en klik op OK.

Opmerking: Een vinkje naast de naam van het element in het dialoogvenster betekent dat het element zichtbaar is als Beeld >

Visuele hulpmiddelen > Onzichtbare elementen wordt geselecteerd.

Benoemde ankers Geeft een pictogram weer dat de locatie markeert van elk benoemd anker (een naam = "") in het

document.

Scripts wordt een pictogram weergegeven waarmee de locatie van JavaScript- of VBScript-code in de hoofdtekst van het

document wordt weergegeven. Selecteer het pictogram om het script te bewerken in de eigenschappencontrole of om een

koppeling te maken naar een extern scriptbestand.

Commentaren wordt een pictogram weergegeven waarmee de locatie van HTML-commentaren wordt gemarkeerd.

Selecteer het pictogram om het commentaar weer te geven in de eigenschappencontrole.

Regeleinden Geeft een pictogram weer waarmee de locatie van elk regeleinde wordt gemarkeerd (BR). Deze optie is

standaard niet geselecteerd.

DREAMWEAVER CS3

Handboek

213

Afbeeldingen met hyperlinks op de client Geeft een pictogram weer waarmee de locatie van elke afbeelding met hyperlinks

aan de client-kant in het document wordt gemarkeerd.

Ingesloten stijlen wordt een pictogram weergegeven waarmee de locatie van CSS-stijlen die zijn ingesloten in de

hoofdsectie van het document wordt aangegeven. Als CSS-stijlen in de hoofdsectie van een document worden geplaatst,

worden ze niet weergegeven in het documentvenster.

Verborgen formuliervelden Geeft een pictogram weer dat de locatie van formuliervelden markeert die het kenmerk type

op "verborgen" hebben ingesteld.

Formulierscheidingsteken Geeft een rand weer rond een formulier, zodat u kunt zien waar u formulierelementen moet

invoegen. De rand toont de omvang van de

form-tag, zodat alle formulierelementen binnen die rand in de form-tags worden

ingesloten.

Ankerpunten voor AP-elementen wordt een pictogram weergegeven waarmee de locatie wordt gemarkeerd van code

waarmee een AP-element wordt gedefinieerd. Het AP-element zelf kan zich overal op de pagina bevinden. (AP-elementen

zijn geen onzichtbare elementen. Alleen de code die AP-elementen definieert, is onzichtbaar.) Selecteer het pictogram om

het AP-element te selecteren. Vervolgens kunt u de inhoud van het AP-element zien, ook als het AP-element is gemarkeerd

als verborgen.

Ankerpunten voor uitgelijnde elementen wordt een pictogram weergegeven waarmee de locatie wordt aangegeven van

HTML-code voor elementen die het kenmerk

uitlijnen accepteren. Dit zijn afbeeldingen, tabellen, ActiveX-objecten,

insteekmodules en applets. In sommige gevallen is de code voor het element gescheiden van het zichtbare object.

Met Visuele serveropmaakcodes wordt de locatie weergegeven van serveropmaaktags (zoals tags voor Active Server-

pagina's en ColdFusion-tags), waarvan de inhoud niet kan worden weergegeven in het documentvenster.

Met Niet-visuele serveropmaakcodes wordt de locatie weergegeven van serveropmaaktags (zoals tags voor Active Server-

pagina's en ColdFusion-tags), waarvan de inhoud niet kan worden weergegeven in het documentvenster.

CSS-weergave: Geen Geeft een pictogram weer dat de locatie weergeeft van inhoud die wordt verborgen op het

scherm:geen eigenschap in de gekoppelde of ingesloten stijlpagina.

Dynamische tekst weergeven als Geeft standaard alle dynamische tekst op uw pagina weer in de indeling van

{Recordset:Veld}. Als de lengte van deze waarden lang genoeg is om de opmaak van uw pagina te verstoren, kunt u de

weergave veranderen in {}.

Include-bestanden op de server Geeft de feitelijke inhoud van elk include-bestand op de server weer.

HTML opgeven in plaats van CSS

Standaard gebruikt Dreamweaver CSS-tags voor het toewijzen van pagina-eigenschappen. Als u in plaats daarvan HTML-

tags wilt gebruiken, moet u de optie CSS gebruiken in plaats van HTML-tags uitschakelen in de categorie Algemeen van

het dialoogvenster Voorkeuren.

1 Selecteer Bewerken > Voorkeuren.

2 Schakel in de categorie Algemeen van het dialoogvenster Pagina-eigenschappen de optie CSS gebruiken in plaats van

HTML-tags uit (in de sectie Opties voor bewerken van het deelvenster met algemene voorkeuren) en klik op OK.

Eigenschappen voor de pagina HTML-weergave instellen

Via de categorie Pagina-eigenschappen voor HTML-weergave kunt u verschillende basisopties opgeven voor de pagina-

indeling van uw webpagina's:

Achtergrondafbeelding en Achtergrond Geven een achtergrondafbeelding en achtergrondkleur aan voor de pagina.

Tekst en Koppelingen Definiëren standaardkleuren voor tekst,koppelingen, bezochte koppelingen en actieve koppelingen.

U kunt deze kleuren ook beheren via CSS-stijlpagina's.

Marge links en Marge boven Geven de grootte aan van de paginamarges in de body-tag, alleen voor Microsoft Internet

Explorer. In Netscape Navigator worden deze waarden genegeerd en worden in plaats daarvan Breedte marge en Hoogte

margegebruikt. Voordebesteresultateninverschillendebrowsersgeeftumargewaardenopvoorbeidebrowsersinplaats

van voor slechts één browser. Vul alle vier de margewaarden in in plaats van slechts twee. Als u in geen van beide browsers

DREAMWEAVER CS3

Handboek

214

marges wilt gebruiken, stelt u alle vier de waarden in op 0. In Dreamweaver worden de paginamarges niet weergegeven in

het documentvenster. Gebruik Voorvertoning in browser als u de marges wilt zien.

Breedte marge en Hoogte marge Geven de grootte aan van de paginamarges in de body-tag, alleen voor Netscape

Navigator. In Internet Explorer worden deze waarden genegeerd en worden in plaats daarvan Marge links en Marge rechts

gebruikt. Voor de beste resultaten in verschillende browsers geeft u margewaarden op voor beide browsers in plaats van

voor slechts één browser. Vul alle vier de margewaarden in in plaats van slechts twee. Als u in geen van beide browsers

marges wilt gebruiken, stelt u alle vier de waarden in op 0. In Dreamweaver worden de paginamarges niet weergegeven in

het documentvenster. Gebruik Voorvertoning in browser als u de marges wilt zien.

Zie ook

“Klassestijlen toepassen, verwijderen of hernoemen” op pagina 132

“Informatie over het instellen van pagina-eigenschappen” op pagina 206

“HTML opgeven in plaats van CSS” op pagina 213

Webveilige kleuren

In HTML worden kleuren uitgedrukt als hexadecimale waarden (bijvoorbeeld #FF0000) of als kleurnamen (rood). Een

webveilige kleur is een kleur die er in Netscape Navigator en Microsoft Internet Explorer hetzelfde uitziet, zowel op

Windows- als Macintosh-systemen in de 256-kleurenmodus. In het algemeen geldt dat er 216 gemeenschappelijke kleuren

zijn en dat elke hexadecimale waarde waarin de paren 00, 33, 66, 99, CC of FF worden gecombineerd (dit zijn de RGB-

waarden 1, 51, 102, 153, 204 en 255), een webveilige kleur vertegenwoordigt.

Tijdens tests blijkt echter dat er maar 212 webveilige kleuren zijn in plaats van de totale 216, omdat in Internet Explorer op

Windows de kleuren #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) en #33FF00 (51,255,0) niet op de juiste

manier worden weergegeven.

In de tijd van de eerste webbrowsers konden de meeste computers maar 256 kleuren (8-bits per kanaal [bpk]) weergeven.

Tegenwoordig kunnen op de meeste computers duizenden of miljoenen kleuren worden weergegeven (16- en 32-bpk). Als

u uw site ontwikkelt voor gebruikers met moderne computersystemen, is het dus niet minder noodzakelijk om het

browserveilige palet te gebruiken.

Eenredenomhetwebveiligekleurenpaletnogweltegebruikenisalsueensiteontwikkeltvooralternatievewebapparaten,

zoals de displays van PDA's en mobiele telefoons. Veel van deze apparaten hebben zwart-wit displays (1-bpk) of 256-

kleurendisplays (8-bpk).

De paletten Kleurkubussen (standaard) en Continue toon) in Dreamweaver gebruiken en webveilige palet met 216 kleuren.

Als u een kleur selecteert uit deze paletten, wordt de hexadecimale waarde van de kleur weergegeven.

Als u een kleur wilt selecteren die buiten het webveilige bereik valt, opent u de systeemkleurenkiezer door op de knop met

het kleurenwiel in de rechterbovenhoek van de Dreamweaver-kleurenkiezer te klikken. De systeemkleurenkiezer is niet

beperkt tot webveilige kleuren.

UNIX-versies van Netscape Navigator gebruiken een ander kleurenpalet dan de Windows- en Macintosh-versies. Als u

exclusief voor UNIX-browsers ontwikkelt (of als uw doelgroep bestaat uit Windows- of Macintosh-gebruikers met 24-bpk

beeldschermen en UNIX-gebruikers met 8-bpk beeldschermen), kunt u overwegen hexadecimale waarden te gebruiken

waarin de paren 00, 40, 80, BF of FF worden gecombineerd. Dit levert webveilige kleuren op voor SunOS.

De kleurkiezer gebruiken

In Dreamweaver bevatten veel dialoogvensters, evenals de eigenschappencontrole voor veel pagina-elementen, een

kleurvak waarmee een kleurkiezer wordt geopend. Gebruik de kleurkiezer om een kleur te selecteren voor een pagina-

element. U kunt ook de standaardtekstkleur voor uw pagina-elementen instellen.

1 Klik op een kleurvak in een dialoogvenster of in de eigenschappencontrole.

De kleurkiezer wordt weergegeven.

DREAMWEAVER CS3

Handboek

215

2 Voer een van de volgende handelingen uit:

• Gebruik het pipet om een kleurstaal te selecteren uit het palet. Alle kleuren in de paletten Kleurkubussen (standaard)

en Continue toon zijn webveilig; de andere paletten zijn dat niet.

• Gebruik het pipet om een kleur op te pikken van een plek op het scherm, zelfs buiten de Dreamweaver-vensters. Als u

een kleur wilt oppikken van het bureaublad of een andere toepassing, houdt u de muisknop ingedrukt (hierdoor houdt

het pipet zijn focus) en selecteert u een kleur buiten Dreamweaver. Als u op het bureaublad of een andere toepassing

klikt, pikt Dreamweaver de kleur op van de plaats waar u hebt geklikt. Als u echter naar een andere toepassing schakelt,

moet u op een Dreamweaver-venster klikken om te blijven werken in Dreamweaver.

• Als u de kleurselectie wilt uitbreiden, gebruikt u het pop-upmenu in de rechterbovenhoek van de kleurkiezer. U kunt

Kleurkubussen, Continue toon, Windows OS, Mac OS, Grijswaarden en Overschakelen naar webveilig selecteren.

Opmerking: DepalettenKleurkubussenenContinuetoonzijnwebveiligenWindowsOS,MacOSenGrijswaardezijndatniet.

AlsueenpaletgebruiktdatnietwebveiligisenvervolgensOverschakelen naar webveilig selecteert, vervangt Dreamweaver de

geselecteerde kleur met de dichtstbijzijnde webveilige kleur. U krijgt mogelijk dus niet de kleur die u ziet.

• Als u de huidige kleur wilt wissen zonder een andere kleur te kiezen, klikt u op de knop Standaardkleur .

• Als u de systeemkleurkiezer wilt openen, klikt u op de knop Kleurenwiel .

In- en uitzoomen

In Dreamweaver kunt u de vergroting verhogen (inzoomen) in het documentvenster, zodat u de pixelnauwkeurigheid van

afbeeldingen kunt controleren, gemakkelijker kleine items kunt selecteren, pagina's met kleine tekst kunt ontwerpen, grote

pagina's kunt ontwerpen, enzovoort.

Opmerking: De zoomfuncties zijn alleen beschikbaar in de ontwerpweergave.

Zie ook

“Statusbalk, overzicht” op pagina 17

In- of uitzoomen op een pagina

1 Selecteer de zoomfunctie (het pictogram van een vergrootglas) in de rechteronderhoek van het documentvenster.

2 Voer een van de volgende handelingen uit:

• Klik op de plaats op de pagina die u wilt vergroten totdat u de gewenste vergroting hebt bereikt.

• Sleep een vak over het gebied op de pagina waarop u wilt inzoomen en laat de muisknop los.

• Selecteer een vooraf ingesteld vergrotingsniveau uit het pop-upmenu Zoomen.

• Typ een vergrotingsniveau in het tekstvak Zoomen.

U kunt ook inzoomen zonder de zoomfunctie te gebruiken door op Control+= (Windows) of Command+= (Macintosh) te

drukken.

3 Als u wilt uitzoomen (minder vergroten), selecteert u de zoomfuncties, drukt u op Alt (Windows) of Option

(Macintosh) en klikt u op de pagina.

U kunt ook uitzoomen zonder de zoomfunctie te gebruiken door op Control+- (Windows) of Command+- (Macintosh) te

drukken.

Een pagina bewerken na het zoomen

❖

Selecteer de aanwijsfunctie (het pictogram van een aanwijzer) in de rechteronderhoek van het documentvenster en klik

op de pagina.

Een pagina verschuiven na het zoomen

1 Selecteer de handfunctie (het pictogram van een hand) in de rechteronderhoek van het documentvenster.

2 Sleep de pagina.

DREAMWEAVER CS3

Handboek

216

Het documentvenster vullen met een selectie

1 Selecteer een element op de pagina.

2 Selecteer Beeld > Selectie passend maken.

Het documentvenster vullen met een hele pagina

❖

Selecteer Beeld > Alles passend maken.

Het documentvenster vullen met een hele breedte van een pagina

❖

Selecteer Beeld > Vensterbreedte.

JavaScript-gedrag gebruiken om browsers en insteekmodules op te sporen

U kunt gedrag gebruiken om vast te stellen welke browser uw bezoekers gebruiken en of ze een bepaalde insteekmodule

hebben geïnstalleerd.

Browser controleren Stuurt bezoekers naar verschillende pagina's, afhankelijk van het merk en de versie van hun browser.

U kunt bezoekers bijvoorbeeld naar de ene pagina sturen als ze Netscape Navigator 4.0 of later hebben, naar een andere

pagina als ze Microsoft Internet Explorer 4.0 of later hebben, en ze op de huidige pagina laten blijven als ze een andere

browser gebruiken.

Insteekmodule controleren Stuurt bezoekers naar verschillende pagina's, afhankelijk van of ze de opgegeven

insteekmodule hebben geïnstalleerd. U kunt bezoekers bijvoorbeeld naar de ene pagina sturen als ze Shockwave™ al

hebben, en naar de andere pagina als ze Shockwave nog niet hebben geïnstalleerd.

Zie ook

“JavaScript-gedrag gebruiken” op pagina 332

“Het gedrag Browser controleren toepassen” op pagina 336

“Het gedrag Insteekmodule controleren toepassen” op pagina 337

Voorkeuren voor downloadtijd en -grootte instellen

Dreamweaver berekent de grootte op basis van de hele inhoud van de pagina, inclusief alle gekoppelde objecten, zoals

afbeeldingen en insteekmodules. Dreamweaver schat de downloadtijd op basis van de verbindingssnelheid die is

opgegeven in de statusbalkvoorkeuren. De werkelijke downloadtijd varieert afhankelijk van algemene

internetomstandigheden.

Een goede richtlijn voor het controleren van de downloadtijd voor een bepaalde webpagina is de 8-secondenregel. Die

houdt in dat de meeste gebruikers niet langer dan 8 seconden wachten op het laden van een pagina.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Statusbalk in de lijst Categorie aan de linkerkant.

3 Selecteer de verbindingssnelheid waarmee de downloadtijd moet worden berekend en klik op OK.

Zie ook

“Venstergrootte en verbindingssnelheid instellen” op pagina 25

Voorkeuren voor voorbeeld in browser instellen

U kunt voorkeuren instellen die door de browser moeten worden gebruikt als u een voorbeeld van een site bekijkt en

standaard primaire en secundaire browsers definiëren.

1 Selecteer Bestand > Voorvertoning In browser > Browserlijst bewerken.

2 Als u een browser wilt toevoegen aan de lijst, klikt u op de knop Plus (+), vult u het dialoogvenster Browser toevoegen

in en klikt u op OK.

DREAMWEAVER CS3

Handboek

217

3 Als u een browser wilt verwijderen uit de lijst, selecteert u op de browser en klikt u op de knop Min (-).

4 Als u instellingen voor een geselecteerde browser wilt wijzigen, klikt u op de knop Bewerken, brengt u de wijzigingen

aan in het dialoogvenster Browserlijst bewerken en klikt u op OK.

5 Selecteer de optie Primaire browser of Secundaire browser om op te geven of de geselecteerde browser de primaire of de

secundaire browser is.

Met F12 (Windows) of Option+F12 (Macintosh) opent u de primaire browser en met Control+F12 (Windows) of

Command+F12 (Macintosh) opent u de secundaire browser.

6 SelecteerVoorvertonenmeteentijdelijkbestandomeentijdelijkekopietemakenvoorhetbekijkenvaneenvoorbeeld

en het oplossen van fouten op de server. (Schakel deze optie uit als u het document rechtstreeks wilt bijwerken.)

Webpagina's opslaan en herstellen

U kunt een document opslaan met de huidige naam en locatie, of een kopie van het document opslaan met een andere naam

en locatie.

Gebruik als u bestanden een naam geeft geen spaties en speciale tekens in bestands- en mapnamen. Gebruik vooral geen

speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de namen van bestanden

die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden gewijzigd, waardoor

koppelingen naar de bestanden niet meer werken. Begin een bestandsnaam ook niet met een cijfer.

Zie ook

“Een lege pagina maken” op pagina 66

Een document opslaan

1 Voer een van de volgende handelingen uit:

• Als u de huidige versie op de schijf wilt overschrijven en wijzigingen wilt opslaan die u hebt aangebracht, selecteert u

Bestand > Opslaan.

• Als u het bestand wilt opslaan in een andere map of met een andere naam, selecteert u Bestand > Opslaan als.

2 Blader in het dialoogvenster Opslaan als dat wordt weergegeven naar de map waarin u het bestand wilt opslaan.

3 Typ in het tekstvak Bestandsnaam een naam voor het bestand.

4 Klik op Opslaan om het bestand op te slaan.

Alle geopende documenten opslaan

1 Selecteer Bestand > Alle opslaan.

2 Als er niet-opgeslagen document zijn geopend, wordt het dialoogvenster Opslaan als weergegeven voor elk niet-

opgeslagen document.

Blader in het dialoogvenster dat wordt weergegeven naar de map waarin u het bestand wilt opslaan.

3 Typ in het tekstvak Bestandsnaam een naam voor het bestand en klik op Opslaan.

Terugkeren naar de laatst opgeslagen versie van een document

1 Selecteer Bestand > Vorige versie.

Er wordt een dialoogvenster weergegeven waarin u wordt gevraagd of u uw wijzigingen wilt negeren en wilt terugkeren naar

de vorige opgeslagen versie.

2 Klik op Ja om terug te keren naar de vorige versie. Klik op Nee als u uw wijzigingen wilt behouden.

Opmerking: Als u een document opslaat en vervolgens Dreamweaver afsluit, kunt u niet terugkeren naar de vorige versie van

het document als u Dreamweaver opnieuw start.

DREAMWEAVER CS3

Handboek

218

Tekst toevoegen en opmaken

Over het invoegen van tekst

In Dreamweaver kunt u tekst toevoegen aan webpagina's door de tekst rechtstreeks in een pagina te typen, door tekst te

kopiëren en plakken uit een ander document of door tekst uit een andere toepassing te slepen. U kunt ook tekst importeren

uit of koppelen naar andere documenttypen, waaronder ASCII-tekstbestanden, RTF-bestanden en Microsoft Office-

documenten.

Tekst aan een document toevoegen

Als u tekst wilt toevoegen aan een Dreamweaver-document, kunt u rechtstreeks tekst in het documentvenster typen, of kunt

u tekst knippen en plakken. U kunt ook tekst uit andere documenten importeren.

Als u tekst in een Dreamweaver-document plakt, kunt u de opdracht Plakken of Plakken speciaal gebruiken. Met de

opdracht Plakken speciaal kunt u de opmaak van de geplakte tekst op verschillende manieren opgeven. Als u bijvoorbeeld

tekst uit een opgemaakt Microsoft Word-document in een Dreamweaver-document wilt plakken maar alle opmaak wilt

verwijderen zodat u uw eigen CSS-opmaakpagina op de geplakte tekst kunt toepassen, kunt u de tekst selecteren in Word,

deze naar het Klembord kopiëren en met de opdracht Plakken speciaal de optie selecteren waarmee u alleen tekst plakt.

Als u de opdracht Plakken gebruikt voor het plakken van tekst uit andere toepassingen, kunt u plakvoorkeuren instellen als

standaardopties.

Opmerking: Met Control+V (Windows) en Command+V (Macintosh) wordt altijd alleen tekst (zonder opmaak) geplakt in de

codeweergave.

❖ Ga op een van de volgende manieren te werk om tekst toe te voegen aan uw document:

• Typ tekst rechtstreeks in het documentvenster.

• Kopieer tekst uit een andere toepassing, schakel naar Dreamweaver, plaats de invoegpositie in de ontwerpweergave van

het documentvenster en selecteer Bewerken > Plakken of Bewerken > Plakken speciaal.

Als u Bewerken > Plakken speciaal selecteert, kunt u verschillende opmaakopties voor plakken selecteren.

U kunt ook tekst plakken met de volgende sneltoetsen:

Speciale tekens invoegen

Bepaalde speciale tekens worden in HTML vertegenwoordigd met een naam of een getal, aangeduid als een entiteit.

HTML bevat entiteitsnamen voor tekens als het copyrightsymbool (

©) het en-teken (&), en het gedeponeerd-

handelsmerksymbool (

®). Elke entiteit heeft zowel een naam, bijvoorbeeld — als een numerieke equivalent,

bijvoorbeeld

nr.151.

HTML gebruikt de punthaken <> in de code, maar u wilt mogelijk de speciale tekens voor groter dan of kleiner dan

gebruiken zonder dat Dreamweaver ze interpreteert als code. Gebruik in dit geval > voor groter dan (>) en < voor kleiner

dan (<).

Helaas worden veel benoemde eenheden in veel browsers (met name oudere browsers en andere browsers dan Netscape

Navigator en Internet Explorer) niet goed weergegeven.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u een speciaal teken wilt invoegen.

Optie Plakken Sneltoets

Plakken Control+V (Windows)

Command+V (Macintosh)

Plakken speciaalControl+Shift+V (Windows)

Command+Shift+V (Macintosh)

DREAMWEAVER CS3

Handboek

219

2 Voer een van de volgende handelingen uit:

• Selecteer de naam van het teken in het vervolgmenu Invoegen > HTML > Speciale tekens.

• Ga naar de categorie Tekst van de invoegbalk, klik op de knop Tekens en selecteer het gewenste teken in het vervolgmenu.

Er zijn heel wat andere speciale tekens beschikbaar; om er een te selecteren, selecteert u Invoegen > HTML > Speciale

karakters > Andere, of klikt u op de knop Tekens in de categorie Tekst van de invoegbalk en selecteert u de optie Andere

tekens. Selecteer een teken uit het dialoogvenster Andere lettertekens en klik op OK.

Witruimte toevoegen tussen tekens

In HTML kan er maar één spatie tussen tekens staan. Als u meer spaties wilt toevoegen in een document, moet u een vaste

spatie invoegen. U kunt een voorkeur instellen waarmee automatisch vaste spaties worden toegevoegd in een document.

Een vaste spatie invoegen

❖

Voer een van de volgende handelingen uit:

• Selecteer Invoegen > HTML > Speciale tekens > Vaste spaties.

• Druk op Control+Shift+spatiebalk (Windows) of Option+spatiebalk (Macintosh).

• Ga naar de categorie Tekst van de invoegbalk, klik op de knop Tekens en selecteer het pictogram Vaste spaties.

Een voorkeur instellen voor het toevoegen van vaste spaties

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Controleer of in de categorie Algemeen de optie Meerdere opeenvolgende spaties toestaan is ingeschakeld.

Lijsten met opsommingstekens en nummering maken

U kunt een genummerde lijst (in rangorde), een lijst met opsommingstekens (zonder volgorde) en definitielijsten maken

uit bestaande tekst of uit nieuwe tekst die u in het documentvenster typt.

Voor definitielijsten worden geen voorlooptekens, zoals opsommingstekens of nummers, gebruikt. Ze worden vaak

gebruikt in woordenlijsten of beschrijvingen. Lijsten kunnen ook worden genest. Geneste lijsten zijn lijsten die andere

lijsten bevatten. U kunt bijvoorbeeld een geordende lijst of een lijst met opsommingstekens nesten binnen een andere

genummerde of geordende lijst.

U gebruikt het dialoogvenster Lijsteigenschappen om het uiterlijk van een hele lijst of van een afzonderlijk lijstitem in te

stellen. U kunt de nummeringsstijl instellen, de nummering opnieuw instellen of stijlopties voor opsommingstekens

instellen voor afzonderlijke lijstitems of voor de hele lijst.

Zie ook

“CSS-eigenschappen instellen” op pagina 126

Een nieuwe lijst maken

1 Plaats de invoegpositie in het Dreamweaver-document op de plaats waar u een lijst wilt toevoegen en ga vervolgens op

een van de volgende manier te werk:

• Klik op de knop Lijst met opsommingstekens of Genummerde lijst in de eigenschappencontrole.

• Selecteer Tekst > Lijst en selecteer het gewenste type lijst: Niet-geordende lijst (met opsommingstekens), Geordende lijst

(met nummers) of Definitielijst.

Het voorloopteken voor het opgegeven lijstitem wordt weergegeven in het documentvenster.

2 Typ de tekst voor het lijstitem en druk vervolgens op Enter (Windows) of Return (Macintosh) om een nieuw lijstitem te

maken.

3 Beëindig de lijst door twee keer op Enter (Windows) of Return (Macintosh) te drukken.

DREAMWEAVER CS3

Handboek

220

Een lijst maken met bestaande tekst

1 Selecteer een reeks alinea's waarvan u een lijst wilt maken.

2 Klik op de knop Lijst met opsommingstekens of Genummerde lijst in de eigenschappencontrole of selecteer Tekst > Lijst

en selecteer het gewenste type lijst: Niet-geordende lijst, Geordende lijst of Definitielijst.

Een geneste lijst maken

1 Selecteer de lijstitems die u wilt nesten.

2 Klik op de knop Inspringen in de eigenschappencontrole of selecteert Tekst > Inspringen.

De tekst wordt ingesprongen in Dreamweaver en er wordt een afzonderlijke lijst gemaakt met de HTML-kenmerken van

de oorspronkelijke lijst.

3 Pas een nieuw lijsttype of een nieuwe lijststijl toe op de ingesprongen tekst via de hierboven beschreven procedure.

Lijsteigenschappen instellen voor een hele lijst

1 Maak ten minste één lijstitem in het documentvenster. De nieuwe stijl wordt automatisch toegepast op andere items die

u aan de lijst toevoegt.

2 Selecteer terwijl de invoegpositie in de tekst van het lijstitem staat Tekst > Lijst > Eigenschappen om het dialoogvenster

Lijsteigenschappen te openen.

3 Stel de opties in die u wilt definiëren voor de lijst:

Lijsttype Hiermee geeft u lijsteigenschappen op, terwijl u met Lijstitem een afzonderlijk item in een lijst opgeeft. Gebruik

het pop-upmenu om een lijst met opsommingstekens, een genummerde lijst, een maplijst of een menulijst te selecteren.

Afhankelijk van het door u geselecteerde lijsttype worden er verschillende opties weergegeven in het dialoogvenster.

Stijl Bepaalt de stijl van nummers of opsommingstekens die worden gebruikt voor een genummerde lijst of lijst met

opsommingstekens. Alle items in de lijst hebben deze stijl, tenzij u een nieuwe stijl opgeeft voor items binnen de lijst.

Beginaantal Stelt de waarde in voor het eerste item in een genummerde lijst.

4 Klik op OK om de keuzen in te stellen.

Lijsteigenschappen instellen voor een lijstitem

1 Plaats de invoegpositie in het documentvenster in de tekst van een lijstitem dat u wilt wijzigen.

2 Selecteer Tekst > Lijst > Eigenschappen.

3 Stel onder Lijstitem de opties in die u wilt definiëren:

Nieuwe stijl Geeft een stijl voor het geselecteerde lijstitem. Stijlen in het menu Nieuwe stijl hebben betrekking op het type

lijst dat wordt weergegeven in het menu Lijsttype. Als in het menu Lijstitem bijvoorbeeld Lijst met opsommingstekens

wordt weergegeven, zijn in het menu Nieuwe stijl alleen opties voor opsommingstekens beschikbaar.

Aantal opnieuw instellen op Hiermee kunt een specifiek getal instellen waar vanaf lijstitems moeten worden genummerd.

4 Klik op OK om de opties in te stellen.

Tekst zoeken en vervangen

Met de opdracht Zoeken en vervangen kunt u tekst en HTML-tags en -kenmerken zoeken in een document of een set

documenten. In het paneel Zoeken worden in de paneelgroep Resultaten de resultaten van een zoekactie met Alles zoeken

weergegeven.

Opmerking: Om bestanden te zoeken in een site, gebruikt u verschillende opdrachten: Zoeken op lokale site en Zoeken op

externe site.

Zie ook

“Code weergeven” op pagina 293

DREAMWEAVER CS3

Handboek

221

Tekst zoeken en vervangen

1 Open het document waarin u wilt zoeken of selecteer documenten of een map in het paneel Bestanden.

2 Selecteer Bewerken > Zoeken en vervangen.

3 Met de optie Zoeken in kunt u opgeven in welke bestanden moet worden gezocht:

Geselecteerde tekst Beperkt de zoekopdracht tot de tekst die momenteel is geselecteerd in het actieve document.

Huidige document Beperkt de zoekopdracht tot het actieve document.

Documenten openen Zoekt in alle documenten die momenteel zijn geopend.

Map Beperkt de zoekopdracht tot een bepaalde map. Nadat u Map hebt gekozen, klikt u op het mappictogram om naar

een map te bladeren zodat u deze kunt selecteren om erin te zoeken.

Geselecteerde bestanden op de site Beperktdezoekopdrachttotdebestandenenmappendiemomenteelzijngeselecteerd

in het deelvenster Bestanden.

Volledige huidige lokale site Breidt de zoekopdracht uit naar alle HTML-documenten, bibliotheekbestanden en

tekstdocumenten in de huidige site.

4 Gebruik het pop-upvenster Zoeken naar om op te geven welk soort zoekopdracht u wilt uitvoeren:

Broncode Hiermee zoekt u naar specifieke tekstreeksen in de HTML-broncode. U kunt met deze optie naar specifieke tags

zoeken, maar zoeken met Specifieke tag biedt een flexibelere benadering voor het zoeken naar tags.

Tekst Hiermee zoekt u naar specifieke tekstreeksen in de tekst van het document. Met een tekstzoekopdracht wordt HTML

genegeerd waarmee de reeks wordt onderbroken. Bijvoorbeeld: een zoekbewerking naar

de zwarte hond komt dit zowel

overeen met

de zwarte hond als met de <i>zwarte</i> hond.

Tekst (geavanceerd) Hiermee zoekt u naar specifieke tekstreeksen die binnen of niet binnen een tag of tags staan. Als u

bijvoorbeeld in een document met de volgende HTML zoekt naar

probeert en Niet binnen tag en de tag i opgeeft, wordt

alleen de tweede instantie van het woord

probeert gevonden: Jan <i>probeert</i> zijn werk op tijd af te krijgen,

maar het lukt hem niet altijd. Hij probeert het altijd.

Specifieke tag

Zoekt naar specifieke tags, kenmerken en kenmerkwaarden, zoals alle td-tags met uitlijnen ingesteld op top.

Opmerking: Als u op Control+Enter of Shift+Enter (Windows), of op Control+Return, Shift+Return of Command+Return

(Macintosh) drukt, worden regeleinden ingevoegd binnen de tekstzoekvelden, zodat u kunt zoeken naar een Return-teken. Als

u een dergelijke zoekopdracht uitvoert, moet u de optie Verschillen in witruimte negeren uitschakelen als u geen

standaardexpressies gebruikt. Met deze zoekopdracht wordt speciaal naar Return-tekens gezocht en niet gewoon naar een

regeleinde. Wat bijvoorbeeld niet wordt gevonden is een

<br>-tag of een <p>-tag. Return-tekens worden in de ontwerpweergave

weergegeven als spaties en niet als regeleinden.

5 Gebruik de volgende opties om de zoekopdracht uit te breiden of te beperken:

Identieke hoofdletters/kleine letters Hiermee beperkt u de zoekopdracht tot tekst waarvan het hoofdlettergebruik exact

overeenkomt met de tekst die u zoekt. Als u bijvoorbeeld naar

de bruine bolhoed zoekt, zult u De Bruine Bolhoed niet

vinden.

Met witruimte negeren Hiermee wordt alle witruimte bij het vergelijken behandeld als één spatie. Als deze optie is

geselecteerd komt

deze tekst bijvoorbeeld overeen met deze tekst en deze tekst, maar niet met deze tekst.Deze

optie is niet beschikbaar als de optie Reguliere expressies gebruiken is ingeschakeld; u moet de standaardexpressie expliciet

schrijven zodat witruimte wordt genegeerd. Merk op dat

<p>- en <br>-tags niet als witruimten worden beschouwd.

Heel woord Hiermee beperkt u de zoekopdracht tot tekst die overeenkomt met een of meer hele woorden.

Opmerking: Deze optie is hetzelfde al een zoekopdracht met een standaardexpressie waarmee u zoekt naar een tekenreeks die

begint en eindigt met \b, de standaardexpressie voor een woordgrens.

Reguliere expressies gebruiken Hiermee worden bepaalde tekens en korte reeksen (zoals ?, *, \w en \b) in de zoekreeks

geïnterpreteerd als operators van standaardexpressies. Bijvoorbeeld: een zoekbewerking naar

de b\w*\b hond komt zowel

overeen met

de boze hond als met de blaffende hond.

DREAMWEAVER CS3

Handboek

222

Opmerking: Als u in de codeweergave werkt, wijzigingen in het document aanbrengt en vervolgens iets anders dan broncode

probeert te zoeken en vervangen, wordt een dialoogvenster weergegeven waarin wordt gemeld dat Dreamweaver de twee

weergaven synchroniseert voordat de zoekopdracht wordt uitgevoerd.

6 Als u wilt zoeken zonder vervangen, klikt u op Volgende zoeken of Alles zoeken:

Volgende zoeken Hiermee wordt het volgende exemplaar van de gezochte tekst of tags in het huidige document

geselecteerd. Als de tag niet vaker voorkomt in het huidige document, gaat Dreamweaver verder naar het volgende

document, als u in meer dan één document zoekt.

Alles zoeken Opent het deelvenster Zoeken in de deelvenstergroep Resultaten. Als u in één document zoekt, worden met

Alles zoeken alle exemplaren van de gezochte tekst of tags weergegeven met wat context. Als u in een map of site zoekt,

wordt met Alles zoeken een lijst weergegeven met documenten die de tag bevatten.

7 Als u gevonden tekst of tags wilt vervangen, klikt u op Vervangen of Alles vervangen.

8 Klik op Sluiten als u klaar bent.

Opnieuw zoeken zonder het dialoogvenster Zoeken en vervangen weer te geven

❖ Druk op F3 (Windows) of Command+G (Macintosh).

Een bepaald zoekresultaat in context weergeven

1 Kies Venster > Resultaten om het zoekvenster weer te geven.

2 Dubbelklik op een regel in het deelvenster Zoeken.

Als u in het huidige bestand zoekt, wordt in het documentvenster de regel weergegeven die dat zoekresultaat bevat.

Als u in een set bestanden zoekt, wordt het bestand geopend dat dat zoekresultaat bevat.

Dezelfde zoekopdracht nogmaals uitvoeren

❖

Klik op de knop Zoeken en vervangen.

Een zoekactie onderbreken

❖

Klik op de knop Stoppen.

Een specifieke tag zoeken

Gebruik het dialoogvenster Zoeken en vervangen om te zoeken naar tekst of tags in een document en het gevonden

materiaal te vervangen door andere tekst of tags.

1 Selecteer Bewerken > Zoeken en vervangen.

2 Selecteer in het pop-upmenu Zoeken de optie Specifieke tag.

3 Selecteer een specifieke tag of

[willekeurige tag] uit het pop-upmenu naast het pop-upmenu Zoeken of typ de naam

van een tag in het tekstvak.

4 (Optioneel.) U kunt de zoekopdracht beperken met een van de volgende tagaanpassingen:

Met kenmerk Hiermee kunt u een kenmerk selecteren dat in de tag moet voorkomen. Geef een bepaalde waarde op voor

het kenmerk of selecteer

[alle waarden].

Zonder kenmerk Hiermee kunt u een kenmerk selecteren dat niet mag voorkomen in de tag. Selecteer deze optie

bijvoorbeeld om alle

img-tags zonder alt-kenmerk te zoeken.

Met Geeft tekst of een tag aan die moet voorkomen binnen de oorspronkelijke tag. Bijvoorbeeld: in de code <b><font

size="4">kop1</font></b>

, wordt de font-tag opgenomen in de b-tag.

Niet met Geeft tekst of een tag aan die niet mag voorkomen binnen de oorspronkelijke tag.

Binnen tag Geeft een tag aan waarin de doeltag moet voorkomen.

Niet binnen tag Geeft een tag aan waarin de doeltag niet mag voorkomen.

5 (Optioneel.) U kunt de zoekopdracht verder beperken door op de knop Plus (+) te drukken en stap 3 te herhalen.

DREAMWEAVER CS3

Handboek

223

6 Als u geen tagaanpassingen heb toegepast in stap 3 en 4, klikt u op de knop Min (-) om het popup-menu voor

tagaanpassingen te verwijderen.

7 Als u een actie wilt uitvoeren als de tag is gevonden (bijvoorbeeld de tag verplaatsen of vervangen), selecteert u de actie

uit het pop-upmenu Actie en, indien van toepassing, geeft u de aanvullende informatie op die nodig is om de actie uit te

voeren.

Specifieke tekst zoeken (geavanceerd)

Gebruik het dialoogvenster Zoeken en vervangen om te zoeken naar tekst of tags in een document en het gevonden

materiaal te vervangen door andere tekst of tags.

1 Selecteer Bewerken > Zoeken en vervangen.

2 Selecteer in het pop-upmenu Zoeken de optie Tekst (geavanceerd).

3 Typ tekst in het tekstveld naast het pop-upmenu Zoeken.

Typ bijvoorbeeld het woord

Naamloos.

4 Selecteer Binnen tag of Niet binnen tag en selecteer vervolgens een tag uit het aangrenzende pop-upmenu.

Selecteer bijvoorbeeld Binnen tag en vervolgens

titel.

5 (Optioneel.) Klik op de knop Plus (+) om de zoekopdracht te beperken met een van de volgende tagaanpassingen:

Met kenmerk Hiermee kunt u een kenmerk selecteren dat in de tag moet voorkomen. Geef een bepaalde waarde op voor

het kenmerk of selecteer

[alle waarden].

Zonder kenmerk Hiermee kunt u een kenmerk selecteren dat niet mag voorkomen in de tag. Selecteer deze optie

bijvoorbeeld om alle

img-tags zonder alt-kenmerk te zoeken.

Met Geeft tekst of een tag aan die moet voorkomen binnen de oorspronkelijke tag. Bijvoorbeeld: in de code <b><font

size="4">kop1</font></b>

, wordt de font-tag opgenomen in de b-tag.

Niet met Geeft tekst of een tag aan die niet mag voorkomen binnen de oorspronkelijke tag.

Binnen tag Geeft een tag aan waarin de doeltag moet voorkomen.

Niet binnen tag Geeft een tag aan waarin de doeltag niet mag voorkomen.

6 (Optioneel.) Als u de zoekopdracht verder wilt beperken, herhaalt u stap 4.

Afkortingen en letterwoorden definiëren

HTML biedt tags waarmee u afkortingen en letterwoorden kunt definiëren die u in uw pagina gebruikt voor zoekmachines,

spellingcontrole, vertaalprogramma's of spraakprogramma's. U kunt bijvoorbeeld opgeven dat de afkorting ME in uw

pagina voor mechanical engineer staat, of het letterwoord WHO voor World Health Organization.

1 Selecteer de afkorting of het acroniem in de tekst van de pagina.

2 Selecteer Invoegen > HTML > Tekstobjecten > Afkorting, of Invoegen > HTML > Tekstobjecten > Acroniem.

3 Voer de volledige tekst van het acroniem of de afkorting in.

4 Voer de taal in, bijvoorbeeld en voor Engels, du voor Nederlands of it voor Italiaans.

Voorkeuren voor kopiëren en plakken instellen

U kunt speciale voorkeuren voor plakken instellen als standaardopties als u Bewerken > Plakken gebruikt om tekst uit

andere toepassingen te plakken. Als u bijvoorbeeld tekst altijd als alleen-tekst of als tekst met een basisopmaak wilt

plakken, kunt u de standaardoptie instellen in het dialoogvenster met voorkeuren voor Kopiëren/Plakken.

Opmerking: Als u tekst in een Dreamweaver-document plakt, kunt u de opdracht Plakken of Plakken speciaal gebruiken. Met

de opdracht Plakken speciaal kunt u de opmaak van de geplakte tekst op verschillende manieren opgeven. Als u bijvoorbeeld

tekst uit een opgemaakt Microsoft Word-document in een Dreamweaver-document wilt plakken maar alle opmaak wilt

verwijderen zodat u uw eigen CSS-opmaakpagina op de geplakte tekst kunt toepassen, kunt u de tekst selecteren in Word, deze

naar het Klembord kopiëren en met de opdracht Plakken speciaal de optie selecteren waarmee u alleen tekst plakt.

DREAMWEAVER CS3

Handboek

224

Opmerking: Voorkeuren die zijn ingesteld in het dialoogvenster met voorkeuren voor Kopiëren/Plakken, gelden alleen voor

materiaal dat wordt geplakt in de ontwerpweergave.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver Voorkeuren (Macintosh).

2 Klik op de categorie Kopiëren/Plakken.

3 Stel de volgende opties in en klik op OK.

Alleen tekst Hiermee kunt u niet-opgemaakte tekst plakken. Als de oorspronkelijke tekst is opgemaakt, wordt alle opmaak,

waaronder regeleinden en alinea's, verwijderd.

Tekst met structuur Hiermee kunt u tekst plakken waarin de structuur behouden blijft, maar de basisopmaak niet. U kunt

bijvoorbeeld tekst plakken en daarbij de structuur van alinea's, lijsten en tabellen behouden, zonder dat vette, cursieve en

andere opmaak behouden blijft.

Tekst met structuur en basisopmaak Hiermee kunt u zowel gestructureerde als eenvoudige HTML-tekst plakken

(bijvoorbeeld paragrafen en tabellen, en tekst die is opgemaakt met de tag

b, i, u, strong, em, hr, abbr of acronym).

Tekst met structuur en volledige opmaak Hiermee kunt u tekst plakken waarin alle structuur, HTML-opmaak en CSS-

stijlen behouden blijven.

Opmerking: Met de optie Volledige opmaak worden geen CSS-stijlen behouden die uit een externe stijlpagina komen. Ook

kunnen er geen stijlen behouden blijven als de toepassing van waaruit u plakt geen stijlen behoudt bij het kopiëren naar het

Klembord.

Regeleinden behouden Hiermee kunt u regeleinden behouden in geplakte tekst. Deze optie is uitgeschakeld als u Alleen

tekst hebt geselecteerd.

Alinea-afstanden van Word opruimen Selecteer deze optie als u Tekst met structuur of Tekst met structuur en basisopmaak

hebt geselecteerd en extra witruimte tussen alinea's wilt verwijderen bij het plakken van de tekst.

De spelling van woorden controleren en corrigeren

Gebruik de opdracht Spelling controleren in het menu Tekst om de spelling van het huidige document te controleren. Met

de opdracht Spelling controleren worden HTML-tags en kenmerkwaarden genegeerd.

De spellingcontrole gebruikt standaard de spellingwoordenlijst voor Amerikaans Engels. Als u de woordenlijst wilt

wijzigen, selecteert u Bewerken > Voorkeuren > Algemeen (Windows) of Dreamweaver > Voorkeuren > Algemeen

(Macintosh) en selecteert u vervolgens in het pop-upmenu Spellingwoordenlijst de woordenlijst die u wilt gebruiken. U

kunt woordenlijsten voor extra talen downloaden van het Dreamweaver Support Center op

www.adobe.com/go/dreamweaver_support_nl.

1 Selecteer Tekst > Spelling controleren of druk op Shift+F7.

Als Dreamweaver een niet-herkend woord aantreft, wordt het dialoogvenster Spelling controleren weergegeven.

2 Selecteer de optie die overeenkomt met de manier waarop u de afwijking wilt behandelen.

Toevoegen aan Persoonlijk Hiermee wordt het niet-herkende woord toegevoegd aan uw persoonlijke woordenlijst

Negeren Hiermee wordt dit exemplaar van het niet-herkende woord genegeerd.

Alles negeren Hiermee worden alle exemplaren van het niet-herkende woord genegeerd.

Wijzigen Hiermee wordt dit exemplaar van het niet-herkende woord vervangen door de tekst die u typt in het tekstvak

Wijzigen in of met de selectie in de lijst Suggesties.

Alles wijzigen Hiermee worden alle exemplaren van het niet-herkende woord op dezelfde manier vervangen.

Tabelgegevens importeren

U kunt tabelgegevens in uw document importeren door de bestanden (bijvoorbeeld Microsoft Excel-bestanden of

databasebestanden) eerst als tekstbestanden met scheidingstekens op te slaan.

U kunt tabelgegevens importeren en opmaken en tekst uit Microsoft Word HTML-documenten importeren.

DREAMWEAVER CS3

Handboek

225

U kunt ook tekst uit Microsoft Excel-documenten toevoegen aan een Dreamweaver-document door de inhoud van het

Excel-bestand in een webpagina te importeren.

1 Selecteer Bestand > Importeren > Tabelgegevens importeren, of Invoegen > Tabelobjecten > Tabelgegevens importeren.

2 Blader naar het gewenste bestand of typ de naam ervan in het tekstvak.

3 Selecteer het scheidingsteken dat is gebruikt bij het opslaan van het bestand als tekst met scheidingstekens. U kunt

kiezen uit tabs, komma's, puntkomma's, komma's, en overige scheidingstekens.

Als u kies voor overige scheidingstekens, wordt er naast de optie een leeg veld weergegeven. Typ het teken dat als

scheidingsteken is gebruikt.

4 Gebruik de andere opties om de tabel op te maken of te definiëren waarin de gegevens worden geïmporteerd en klik op OK.

Zie ook

“Bestaande documenten openen en bewerken” op pagina 72

“Tabelgegevens importeren en exporteren” op pagina 171

Microsoft Office-documenten importeren (alleen Windows)

U kunt de volledige inhoud van een Microsoft Word- of Excel-document invoegen in een nieuwe of bestaande webpagina.

Als u een Word- of Excel-document importeert, ontvangt Dreamweaver de geconverteerde HTML, waarna deze in uw

webpagina wordt ingevoegd. De grootte van het bestand nadat Dreamweaver de geconverteerde HTML heeft ontvangen,

moet minder zijn dan 300 kB.

In plaats van de hele inhoud van een bestand te importeren kunt u ook gedeelten van een Word-document plakken en

daarbij de opmaak behouden.

Opmerking: AlsuMicrosoftOffice97gebruikt,kuntudeinhoudvaneenWord-ofExcel-documentnietimporteren.Umoet

dan een koppeling naar het document invoegen.

1 Open de webpagina waarin u het Word- of Excel-document wilt invoegen.

2 Ga in de ontwerpweergave op een van de volgende manieren te werk om het bestand te selecteren:

• Sleep het bestand vanuit de huidige locatie naar de pagina waar u de inhoud wilt weergeven.

• Selecteer Bestand > Importeren > Word-document of Bestand > Importeren > Excel-document.

3 Blader in het dialoogvenster Document invoegen naar het bestand dat u wilt toevoegen, selecteer een van de

opmaakopties in het pop-upmenu Opmaak onderaan in het dialoogvenster en klik op Openen.

Alleen tekst Voegt niet-opgemaakte tekst in. Als de oorspronkelijke tekst is opgemaakt, wordt alle opmaak verwijderd.

Tekst met structuur Hiermee kunt u tekst invoegen waarin de structuur behouden blijft, maar de basisopmaak niet. U kunt

bijvoorbeeld tekst plakken en daarbij de structuur van alinea's, lijsten en tabellen behouden, zonder dat vette, cursieve en

andere opmaak behouden blijft.

Tekst met structuur en basisopmaak Hiermee kunt u zowel gestructureerde als eenvoudige HTML-tekst plakken

(bijvoorbeeld paragrafen en tabellen, en tekst die is opgemaakt met de tag

b, i, u, strong, em, hr, abbr of acronym-tag).

Tekst met structuur en volledige opmaak Hiermee kunt u tekst invoegen waarin alle structuur, HTML-opmaak en CSS-

stijlen behouden blijven.

Alinea-afstanden van Word opruimen Hiermee kunt u extra witruimte tussen alinea's verwijderen bij het plakken van tekst

als u Tekst met structuur of Basisopmaak hebt geselecteerd.

De inhoud van het Word- of Excel-document wordt in de pagina weergegeven.

Een koppeling maken naar een Word- of Excel-document

U kunt een koppeling naar een Microsoft Word- of Excel-document invoegen in een bestaande webpagina.

1 Open de pagina waarop u de koppeling wilt weergeven.

DREAMWEAVER CS3

Handboek

226

2 Sleep het bestand vanuit de huidige locatie naar de Dreamweaver-pagina en plaats de koppeling op de gewenste locatie.

3 Selecteer Een koppeling maken en klik op OK.

4 Als het document waarnaar u koppelt zich buiten de hoofdmap van uw site bevindt, Dreamweaver wordt u gevraagd het

document naar de hoofdmap van de site te kopiëren.

Door het document naar de hoofdmap van de site te kopiëren, zorgt u ervoor dat het document beschikbaar is als u de

website publiceert.

5 Als u de pagina uploadt naar uw webserver, moet u ervoor zorgen dat u het Word- of Excel-bestand ook uploadt.

De pagina bevat nu een koppeling naar het Word- of Excel-document. De tekst van de koppeling is de naam van het

gekoppelde bestand. U kunt deze tekst wijzigen.

Zie ook

“Koppelingen beheren in het site-overzicht” op pagina 275

Over het opmaken van tekst (CSS en HTML)

Het opmaken van tekst in Dreamweaver lijkt op wat u doet in een normale tekstverwerker. U kunt standaardopmaakstijlen

(Alinea, Kop 1, Kop 2, enzovoort) instellen voor een tekstblok, het lettertype, de tekengrootte, tekenkleur en uitlijnen van

geselecteerde tekst wijzigen, of tekststijlen als vet, cursief, code (monospace) en onderstrepen toepassen.

Standaard worden teksten in Dreamweaver opgemaakt met CSS (Cascading Style Sheets). Met CSS hebben webontwerpers

en -ontwikkelaars meer controle over het ontwerp van een webpagina en hebben ze de beschikking over verbeterde functies

voor toegankelijkheid en kleinere bestanden. Als u tekst opmaakt en uitlijnt met opmaakopdrachten in Dreamweaver,

worden er CSS-regels ingesloten in het huidige document. Hierdoor kunt u gemakkelijker bestaande stijlen opnieuw

gebruiken en de stijlen die u maakt een naam geven. CSS wordt de voorkeursmethode voor het opmaken van tekst en het

indelen van webpagina's.

Als u dat liever wilt, kunt u ook HTML-tags gebruiken voor het opmaken en uitlijnen van tekst in uw webpagina's. Als u

HTML-tags wilt gebruiken in plaats van CSS, moet u de standaardvoorkeuren voor tekstopmaak in Dreamweaver wijzigen.

Het gebruik van CSS is een manier om de stijl van een webpagina te beheren zonder de structuur te beïnvloeden. Doordat

met CSS visuele ontwerpelementen (lettertypen, kleuren, marges, enzovoort) worden gescheiden van de structurele logica

van een webpagina, hebben webontwerpers controle over visuele en typografische kenmerken zonder dat de integriteit van

de inhoud wordt aangetast. Bovendien kunt u door het typografische ontwerp en de pagina-indeling te definiëren in een

apart codeblok -zonder dat u uw toevlucht moet nemen tot afbeeldingen met hyperlinks,

lettertype-tags, tabellen en

spatie-GIF's- sneller downloaden en biedt het u een gestroomlijnd onderhoud van de site en een centraal punt waar u

ontwerpkenmerken in verschillende webpagina's kunt controleren.

CSS definieert de opmaak voor alle tekst in een bepaalde klasse of herdefinieert de opmaak voor een bepaalde HTML-tag

(zoals

h1, h2, p of li).

U kunt stijlen die met CSS zijn gemaakt rechtstreeks in het document opslaan (de standaardinstelling als u tekst opmaakt

met de eigenschappencontrole) of stijlen, voor meer kracht en flexibiliteit, opslaan in een externe stijlpagina. Als u een

externe stijlpagina aan meerdere webpagina's koppelt, worden wijzigingen die u aanbrengt in de stijlpagina, automatisch

doorgevoerd in al die pagina's. Gebruik het deelvenster CSS-stijlen (Venster > CSS-stijlen) om alle CSS-regels voor een

pagina weer te geven.

Opmerking: U kunt CSS- en HTML 3.2-opmaak op dezelfde pagina combineren. Opmaak wordt hiërarchisch toegepast:

HTML 3.2-opmaak heeft voorrang op opmaak die wordt toegepast door externe CSS-stijlpagina's, en CSS die in een document

zit ingesloten, gaat voor op externe CSS.

Zie ook

“Het deelvenster CSS-stijlen openen” op pagina 124

“Wat zijn CSS-stijlpagina's (Cascading Style Sheets)” op pagina 117

“HTML opgeven in plaats van CSS” op pagina 213

DREAMWEAVER CS3

Handboek

227

Tekst opmaken met de eigenschappencontrole

Met de eigenschappencontrole voor tekst kunt u de momenteel geselecteerde tekst opmaken. U kunt de opmaak wijzigen

door nieuwe opties in te stellen. De stijl wordt meteen toegepast op de tekst.

Als u tekst opmaakt met de eigenschappencontrole, houdt Dreamweaver de opmaakeigenschappen bij die u aan elk

tekstelement toewijst en wordt aan elk tekstelement een label toegewezen, waarvoor de volgende naamgevingsconventie

wordt gebruikt: Style1, Style2, Style3, Stylen. Als u dezelfde opmaakkenmerken toewijst aan twee of meer tekstelementen,

worden die elementen in Dreamweaver gelabeld met dezelfde titel, waardoor overtollige stijlnamen worden voorkomen.

Het label dat door Dreamweaver op een bepaald stuk tekst wordt toegepast, kan vervolgens met het pop-upmenu Stijl

worden toegepast. U kunt zo een bibliotheek met stijlen op een pagina opbouwen die diezelfde stijlen toepassen door een

tekstelement op de pagina te selecteren en een stijl te selecteren uit het menu Stijl. U kunt stijlen herkenbaardere labels

geven, zoals Kop1, Kop2, Hoofdtekst en Tabeltekst.

In het pop-upmenu Stijl in de eigenschappencontrole worden zowel de namen van stijlen op de pagina weergegeven als een

voorbeeld van de eigenschappen van de stijlen. De eigenschappen die in het voorbeeld worden weergegeven, zijn

lettertypefamilie, tekengrootte, tekengewicht, tekstkleur en achtergrondkleur.

Wanneer u de eigenschappencontrole gebruikt om de stijl vet of schuin toe te passen, past Dreamweaver automatisch

respectievelijk de tag

<strong> of <em> toe. Als u pagina's ontwerpt voor viewers met een browser van versie 3.0 of ouder,

moet u deze voorkeur wijzigen in de categorie Algemeen van het dialoogvenster Voorkeuren (Bewerken > Voorkeuren).

Ga naar www.adobe.com/go/vid0147_nl voor een zelfstudie over het opmaken van tekst met behulp van de

eigenschappencontrole.

Zie ook

“CSS maken en beheren” op pagina 121

“Een nieuwe CSS-regel maken” op pagina 125

“Algemene voorkeuren instellen voor Dreamweaver” op pagina 34

DREAMWEAVER CS3

Handboek

228

Teksteigenschappen instellen in de eigenschappencontrole

U kunt de eigenschappencontrole voor tekst gebruiken om HTML-opmaak of CSS-opmaak (Cascading Style Sheet) toe te

passen. Met HTML-opmaak kunt u tekstopmaakopties, zoals lettertype, tekengrootte, vet en cursief, selecteren. Met CSS-

opmaak kunt u een CSS-klassestijl toepassen op de geselecteerde tekst.

CSS-opmaak instellen in de eigenschappencontrole

1 Open de eigenschappencontrole (Venster > Eigenschappen), als deze nog niet is geopend.

2 Selecteer de tekst die u wilt opmaken.

3 Stel de CSS-opties in die u wilt toepassen op de geselecteerde tekst:

Indeling Bepaalt de alineastijl van de geselecteerde tekst. Alinea past de standaardopmaak voor een <p>-tag toe, Kop 1

voegt een

H1-tag toe enzovoort.

Stijl Geeft klassestijl toe die op dit ogenblik op de geselecteerde tekst is toegepast. Als er geen stijl op de selectie is toegepast,

geeft het pop-upmenu Geen CSS-stijl weer. Als er verschillende stijlen op de selectie zijn toegepast, blijft het menu leeg.

Gebruik het menu Stijl voor een van de volgende handelingen:

• Selecteer de stijl die u wilt toepassen op de selectie.

• Selecteer Geen om de huidige geselecteerde stijl te verwijderen.

• Selecteer Stijlpagina koppelen om een dialoogvenster te openen, waarin u een externe stijlpagina kunt koppelen.

Vet Past <b> of <strong> toe op de geselecteerde tekst naargelang de stijlvoorkeur die is ingesteld in de categorie Algemeen

van het dialoogvenster Voorkeuren.

Cursief Past <i> of <em> toe op de geselecteerde tekst naargelang de stijlvoorkeur die is ingesteld in de categorie Algemeen

van het dialoogvenster Voorkeuren.

HTML-opmaak instellen in de eigenschappencontrole

1 Open de eigenschappencontrole (Venster > Eigenschappen), als deze nog niet is geopend.

2 Selecteer de tekst die u wilt opmaken.

3 Stel de opties in die u wilt toepassen op de geselecteerde tekst:

Indeling Bepaalt de alineastijl van de geselecteerde tekst. Alinea past de standaardopmaak voor een <p>-tag toe, Kop 1

voegt een

H1-tag toe enzovoort.

Lettertypecombinatie Past de geselecteerde lettertypecombinatie toe op de tekst. Gebruik het pop-upmenu om de

lettertypecombinatie te selecteren die u wilt toepassen, of selecteer Lettertypenlijst bewerken om een lettertypecombinatie

te maken of bewerken.

Grootte Past een specifieke tekengrootte (1 t/m 7) toe of een tekengrootte die relatief (+ of -1 t/m + of -7) is ten opzichte

van de basistekengrootte (de standaard is 3).

Tekstkleur Geeft de tekst weer in de geselecteerde kleur. Selecteer een webveilige kleur door op het kleurvak te klikken of

door een hexadecimale waarde (bijvoorbeeld #FF0000) in het ernaast liggende tekstveld te typen.

Vet Past <b> of <strong> toe op de geselecteerde tekst naargelang de stijlvoorkeur die is ingesteld in de categorie Algemeen

van het dialoogvenster Voorkeuren.

Cursief Past <i> of <em> toe op de geselecteerde tekst naargelang de stijlvoorkeur die is ingesteld in de categorie Algemeen

van het dialoogvenster Voorkeuren.

Links, Midden en Rechts uitlijnen Passen de desbetreffende uitlijning toe.

Koppeling Hiermee maakt u een hypertekstkoppeling van de geselecteerde tekst. Klik op het mappictogram om naar een

bestand in de site te bladeren, typ de URL, sleep het Point-To-File-pictogram naar een bestand in het paneel Bestanden of

sleep een bestand uit het paneel Bestanden naar het vak.

Doel Hiermee kunt u het frame of venster opgeven waarin het gekoppelde document wordt geladen:

• _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.

DREAMWEAVER CS3

Handboek

229

• _parent laadt het gekoppelde bestand in het bovenliggende frame of venster ten opzichte van het frame dat de koppeling

bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde bestand geladen in het volledige

browservenster.

• _self laadt het gekoppelde bestand in het frame of venster waarin de koppeling zich bevindt. Dit doel is impliciet, dus

u hoeft het meestal niet op te geven.

• _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.

Niet-geordende lijst Hiermee maakt u een lijst met opsommingstekens van de geselecteerde tekst. Als er geen tekst is

geselecteerd, wordt er een nieuwe lijst met opsommingstekens gestart.

Geordende lijst Hiermee maakt u een genummerde lijst van de geselecteerde tekst. Als er geen tekst is geselecteerd, wordt

er een nieuwe genummerde lijst gestart.

Opsommingslijst Hiermee opent u het dialoogvenster Lijsteigenschappen.

Inspringen en Uitspringen Hiermee kunt u geselecteerde tekst laten inspringen of de inspringing verwijderen door het

toepassen of verwijderen van de

blockquote-tag. In een lijst maakt u met inspringen een geneste lijst en maakt u het het

verwijderen van de inspringing het nesten van de lijst ongedaan.

Alinea's opmaken

Dreamweaver ondersteunt alle webstandaards die worden gebruikt voor het opmaken van pagina's en objecten.

Gebruik het pop-upmenu Formaat in de eigenschappencontrole of het submenu Tekst > Alineaopmaak om de

standaardtags voor alinea's en koppen toe te passen.

1 Plaats de invoegpositie in de alinea of selecteer wat tekst in de alinea.

2 Gebruik het submenu Tekst > Alineaopmaak of het pop-upmenu Formaat in de eigenschappencontrole om een optie te

selecteren:

• Selecteer een alineaopmaak (bijvoorbeeld Kop1, Kop2, Vooraf opgemaakte tekst, enzovoort). De HTML-tag die aan de

geselecteerde stijl (bijvoorbeeld

h1 voor Kop 1, h2 voor Kop 2, pre voor Vooraf opgemaakte tekst enzovoort) is

gekoppeld, wordt op de volledige alinea toegepast.

• Selecteer Geen om een alineaopmaak te verwijderen.

Als u een kopcode toepast op een alinea, Dreamweaver wordt de volgende regel tekst automatisch toegevoegd als een

standaardalinea. Als u deze instelling wilt wijzigen, selecteert u Bewerken > Voorkeuren (Windows) of Dreamweaver >

Voorkeuren (Macintosh). Controleer vervolgens of in de categorie Algemeen, onder Opties voor bewerken, de optie Na kop

overschakelen naar normale alineaopmaak niet is geselecteerd.

Zie ook

“Teksteigenschappen instellen in de eigenschappencontrole” op pagina 228

“CSS-eigenschappen instellen” op pagina 126

De kleur van tekst wijzigen

U kunt de standaardkleur veranderen voor alle tekst op een pagina of voor de geselecteerde tekst op een pagina.

Zie ook

“De kleurkiezer gebruiken” op pagina 214

De standaard tekstkleuren definiëren voor een pagina

❖

Selecteer Wijzigen > Pagina-eigenschappen > Weergave of Koppelingen en selecteer vervolgens kleuren voor de opties

Tekstkleur, Kleur van koppeling, Bezochte koppelingen en Actieve koppelingen.

Opmerking: De kleur voor actieve koppelingen is de kleur waarin een koppeling verandert als erop wordt geklikt. Sommige

webbrowsers gebruiken de door u opgegeven kleur mogelijk niet.

DREAMWEAVER CS3

Handboek

230

De kleur van geselecteerde tekst wijzigen

❖

Selecteer de tekst en voer een van de volgende handelingen uit:

• Selecteer een kleur door op het kleurvak in de eigenschappencontrole te klikken.

• Selecteer Tekst > Kleur, selecteer een kleur uit de systeemkleurkiezer en klik op OK.

• Typ de naam van de kleur of het hexadecimale getal rechtstreeks in het veld van de eigenschappencontrole.

Tekst weer instellen op de standaardkleur

1 Klik in de eigenschappencontrole op het kleurvak om het palet met webveilige kleuren te openen.

2 Klik op de knop Doorhalen (de vierkante witte knop met een rode streep erdoor, in de rechterbovenhoek).

Tekst uitlijnen

U lijnt tekst op de pagina uit met de eigenschappencontrole of het vervolgmenu Tekst > Uitlijnen. U kunt elk element op

een pagina centreren met de opdracht Tekst > Uitlijnen > Midden.

Tekst uitlijnen op een pagina

1 Selecteer de tekst die u wilt uitlijnen of voeg de aanwijzer in aan het begin van de tekst.

2 Klik op een uitlijningsoptie (Links, Rechts of Midden) in de eigenschappencontrole of selecteer Tekst > Uitlijnen en

selecteer een uitlijnopdracht.

Pagina-elementen centreren

1 Selecteer het element (afbeelding, invoegtoepassing, tabel of ander pagina-element) dat u wilt centreren.

2 Selecteer Tekst > Uitlijnen > Centreren

Opmerking: Ukuntvolledigeblokkentekstuitlijnenencentreren.Ukuntnieteengedeeltevaneenkopofeengedeeltevaneen

alinea uitlijnen of centreren.

Tekst inspringen

Als u de opdracht Inspringen gebruikt, wordt de HTML-tag blockquote op een alinea of tekst toegepast, waardoor de tekst

aan beide kanten van de pagina inspringt.

1 Plaats de invoegpositie in de alinea die u wilt laten inspringen.

2 Klik op de knop Inspringen of Uitspringen in de eigenschappencontrole, selecteer Tekst > Inspringen of Uitspringen of

selecteer Lijst > Inspringen of Uitspringen uit het contextmenu.

Opmerking: U kunt meerdere inspringingen toepassen op een alinea. Elke keer dat u deze opdracht selecteert, wordt de tekst

aan beide kanten van het document verder ingesprongen.

Witruimte tussen alinea's toevoegen

De manier van werken van Dreamweaver lijkt op die van heel wat tekstverwerkingstoepassingen: om een nieuwe alinea te

maken, drukt u op Enter (Windows) of op Return (Macintosh). Webbrowsers voegen automatisch een lege regel met

witruimte in tussen alinea's. U kunt één regel witruimte tussen alinea's toevoegen door een regeleinde in te voegen.

Een regeleinde toevoegen

❖

Druk op Enter (Windows) of Return (Macintosh).

Een regeleinde toevoegen

❖

Voer een van de volgende handelingen uit:

• Druk op Shift+Enter (Windows) of Shift+Return (Macintosh).

• Selecteer Invoegen > HTML > Speciale tekens > Regeleinde.

• Ga naar de categorie Tekst van de invoegbalk, klik op de knop Tekens en selecteer het pictogram Regeleinde.

DREAMWEAVER CS3

Handboek

231

Horizontale lijnen gebruiken

Horizontale lijnen zijn handig voor het ordenen van informatie. Op een pagina kunt u tekst en objecten visueel van elkaar

scheiden met een of meer lijnen.

Een horizontale lijn maken

1 Plaats de invoegpositie in het documentvenster op de plaats waar u een horizontale lijn wilt invoegen.

2 Selecteer Invoegen >HTML > Horizontale lijn.

Een horizontale lijn wijzigen

1 Selecteer de horizontale lijn in het documentvenster.

2 Selecteer Venster >Eigenschappen om de eigenschappencontrole te openen en wijzig de eigenschappen naar wens:

B en H Hiermee worden de lijnbreedte en -hoogte vastgelegd in pixels of als percentage van de grootte van de pagina.

Uitlijnen Hiermee wordt de uitlijning van de lijn aangegeven (Standaard, Links, Midden of Rechts). Deze instelling is

alleen van toepassing als de breedte van de lijn kleiner is dan de breedte van het browservenster.

Arcering Hiermee wordt aangegeven of de lijn arcering krijgt. Schakel deze optie uit om de lijn een vaste kleur te geven.

Tekenstijlen toepassen

U kunt tekstopmaak toepassen op één letter of op hele alinea's en tekstblokken in een site. Gebruik de

eigenschappencontrole of het menu Tekst om eigenschappen van lettertypen in te stellen of te wijzigen voor geselecteerde

tekst. U kunt het lettertype, de tekenstijl (bijvoorbeeld vet of cursief) en de tekengrootte instellen.

1 Selecteer de tekst. Als er geen tekst is geselecteerd, wordt de optie toegepast op de volgende tekst die u typt.

2 Kies een van de volgende opties:

• Als u het lettertype wilt wijzigen, selecteert u een lettertypecombinatie uit de eigenschappencontrole of uit het

vervolgmenu Tekst > Lettertype. Selecteer Standaard om eerder toegepaste lettertypen te verwijderen. Met Standaard

wordt het standaardlettertype toegepast voor de geselecteerde tekst (dit is het standaardlettertype van de browser of het

lettertype dat in de CSS-stijlpagina is toegewezen aan de desbetreffende tag).

• Als u de tekenstijl wilt wijzigen, klikt u op Vet of Cursief in de eigenschappencontrole of selecteert u een tekenstijl (Vet,

Cursief, Onderstrepen, enzovoort) uit het vervolgmenu Tekst > Stijl.

Opmerking: Wanneer u de eigenschappencontrole gebruikt om de stijl vet of schuin toe te passen, past Dreamweaver

respectievelijk de tag

<strong> of <em> toe. Als u pagina's ontwerpt voor viewers met een browser van versie 3.0 of ouder, moet

u deze voorkeur wijzigen in de categorie Algemeen van het dialoogvenster Voorkeuren (Bewerken > Voorkeuren).

• Als u de tekengrootte wilt wijzigen, selecteert u een grootte (1 t/m 7) uit de eigenschappencontrole of uit het

vervolgmenu Tekst > Grootte.

HTML-tekengroottes zijn relatieve, en geen specifieke, puntgrootten. Gebruikers stellen de puntgrootte van het

standaardlettertype in voor hun browsers. Dit is de tekengrootte die ze zien als u Standaard of 3 selecteert in de

eigenschappencontrole of het vervolgmenu Tekst > Grootte. De grootten 1 en 2 worden kleiner weergegeven dan de

standaardtekengrootte en de grootten 4 t/m 7 worden groter weergegeven. Daarnaast zien lettertypen er in het algemeen

groter uit in Windows dan op de Mac OS, hoewel Macintosh Internet Explorer 5 dezelfde standaardtekengrootte gebruikt

als Windows.

Een manier om consistente tekengrootten te bereiken is door CSS-stijlen te gebruiken waarin de tekengrootte is ingesteld in

pixels.

• Als u geselecteerde tekst wilt vergroten of verkleinen, selecteert u een relatieve grootte (+ of -1 tot +4 of -3) in de

eigenschappencontrole of in het submenu Tekst > Grootte wijzigen.

Opmerking: Deze getallen geven een relatief verschil ten opzichte van de basislettertypegrootte aan. De standaardwaarde voor

het basislettertype is 3. Een waarde van +4 geeft dus een tekengrootte van 3+4, ofwel 7, als resultaat. De maximale som voor

tekengroottewaarden is 7. Als u een hogere instelling probeert, worden tekens weergegeven als 7. Dreamweaver geeft de

basefont-tag (in de head-sectie) niet weer, hoewel de tekengrootte correct in een browser moet worden weergegeven. U kunt

dit testen door tekst die is ingesteld op 3 te vergelijken met tekst die is ingesteld op +3.

DREAMWEAVER CS3

Handboek

232

Zie ook

“Pagina's maken met CSS” op pagina 117

“Een nieuwe CSS-regel maken” op pagina 125

De naam van een stijl wijzigen

Alsutekstopmaakt,houdtDreamweaverdestijlendieuopelkepaginamaaktbijenwordteenbibliotheekopgebouwdmet

stijlen die u opnieuw kunt gebruiken. Hierdoor kunt u veel eenvoudiger dezelfde opmaak toepassen op een tekstblok en

kunt u uw pagina's een consistent uiterlijk geven.

1 Selecteer Naam wijzigen in het pop-upmenu Stijl van de eigenschappencontrole voor tekst.

2 Selecteer de stijl waarvan u de naam wilt wijzigen in het pop-upmenu Naam van stijl wijzigen.

3 Geef in het tekstveld Nieuwe naam een nieuwe naam op en klik op OK.

Lettertypecombinaties wijzigen

Gebruik de opdracht Lettertypenlijst bewerken om de lettertypecombinaties in te stellen die worden weergegeven in de

eigenschappencontrole en het vervolgmenu Tekst > Lettertype.

Met lettertypecombinaties wordt bepaald hoe tekst op uw webpagina wordt weergegeven in een browser. In een browser

wordt het eerste lettertype in de combinatie gebruikt die is geïnstalleerd op de computer van de gebruiker. Als geen van de

lettertypen in de combinaties zijn geïnstalleerd, wordt de tekst in de browser weergegeven volgens de browservoorkeuren

van de gebruiker.

Lettertypecombinaties wijzigen

1 Selecteer Tekst > Lettertype > Lettertypenlijst bewerken.

2 Selecteer de lettertypecombinatie uit de lijst bovenaan in het dialoogvenster.

De lettertypen in de geselecteerde combinatie worden weergegeven in de lijst Gekozen lettertypen in de linkerbenedenhoek

van het dialoogvenster. Rechts ervan staat een lijst met alle beschikbare lettertypen die op uw computer zijn geïnstalleerd.

3 Voer een van de volgende handelingen uit:

• Als u lettertypen wilt toevoegen aan of verwijderen uit een lettertypecombinatie, klikt u op de pijlknop (<< of >>) tussen

de lijst Gekozen lettertypen en de lijst Beschikbare lettertypen.

• Als u een lettertypecombinatie wilt toevoegen of verwijderen, klikt u op de knop Plus (+) en Min (-) bovenaan in het

dialoogvenster.

• Als u een lettertype wilt toevoegen dat niet op uw computer is geïnstalleerd, typt u de lettertypenaam in het tekstveld

onder de lijst Beschikbare lettertypen en klikt u op de knop << om het lettertype toe te voegen aan de combinatie. Het

toevoegen van een lettertype dat niet op uw systeem is geïnstalleerd, is bijvoorbeeld handig als u een lettertype voor

alleen Windows wilt opgeven als u pagina's ontwikkeld op een Macintosh.

• Als u de lettertypecombinatie omhoog of omlaag wilt verplaatsen in de lijst, klikt u op de pijlknoppen bovenaan in het

dialoogvenster.

Een nieuwe combinatie toevoegen aan de lettertypelijst

1 Selecteer Tekst > Lettertype > Lettertypenlijst bewerken.

2 Selecteer een lettertype uit de lijst Beschikbare lettertypen en klik op de knop << om het lettertype te verplaatsen naar

de lijst Gekozen lettertypen.

3 Herhaal stap 2 voor elk volgende lettertype in de combinatie.

Alsueenlettertypewilttoevoegendatnietopuwcomputerisgeïnstalleerd,typtudelettertypenaaminhettekstveldonder

de lijst Beschikbare lettertypen en klikt u op de knop << om het lettertype toe te voegen aan de combinatie. Het toevoegen

van een lettertype dat niet op uw systeem is geïnstalleerd, is bijvoorbeeld handig als u een lettertype voor alleen Windows

wilt opgeven als u pagina's ontwikkeld op een Macintosh.

DREAMWEAVER CS3

Handboek

233

4 Als u klaar bent met het selecteren van specifieke lettertypen, selecteert u een algemene lettertypefamilie in het menu

Beschikbare lettertypen en klikt u op de knop << om de algemene lettertypefamilie te verplaatsen naar de lijst Gekozen

lettertypen.

Algemene lettertypefamilies zijn cursief, fantasie, monospace, sans-serif en serif. Als geen van de lettertypen in de lijst

Gekozen lettertypen beschikbaar zijn op de computer van de gebruiker, wordt de tekst weergegeven in het

standaardlettertype dat is gekoppeld aan de algemene lettertypefamilie. Het standaard monospace-lettertype is

bijvoorbeeld op de meeste computers Courier.

Datums invoegen

Dreamweaver bevat een handig Date-object, waarmee u de huidige datum kunt invoegen in elke gewenste notatie (met of

zonder de tijd), waarbij u de optie hebt die datum bij te werken als u het bestand opslaat.

Opmerking: De datums en tijden die worden weergegeven in het dialoogvenster Datum invoegen zijn niet de huidige datum

en geven ook niet de datums/tijden aan die een bezoeker ziet als ze uw site weergeven. Het zijn alleen voorbeelden van hoe u

deze gegevens wilt weergeven.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de datum wilt invoegen.

2 Voer een van de volgende handelingen uit:

• Selecteer Invoegen > Datum.

• Ga naar de categorie Algemeen in het paneel Invoegen en klik op de knop Datum.

3 Selecteer in het dialoogvenster dat wordt weergegeven een notatie voor de naam van de weekdag, een notatie voor de

datum en een notatie voor de tijd.

4 Als u wilt dat de ingevoegde datum elke keer dat u het document opslaat wordt bijgewerkt, selecteert u Automatisch

bijwerken bij opslaan. Als u wilt dat de datum normale tekst wordt als deze is ingevoegd en nooit automatisch wordt

bijgewerkt, schakelt u die optie uit.

5 Klik op OK om de datum in te voegen.

Als u Automatisch bijwerken bij opslaan hebt geselecteerd, kunt u de datumnotatie bewerken nadat de datum in het

document is ingevoegd door op de opgemaakte tekst te klikken en Datumformaat bewerken te selecteren in de

eigenschappencontrole.

Afbeeldingen toevoegen en wijzigen

Over afbeeldingen

Er zijn veel verschillende bestandsindelingen voor afbeeldingen, maar de drie bestandsindelingen voor afbeeldingen die

meestal op webpagina's worden gebruikt, zijn GIF, JPEG en PNG. De bestandsindelingen GIF en JPEG worden het beste

ondersteund en kunnen worden weergegeven in de meeste browsers.

PNG-bestanden zijn het beste geschikt voor vrijwel alle webafbeeldingen omdat ze flexibel en klein zijn. De weergave van

PNG-afbeeldingen wordt echter maar gedeeltelijk ondersteund in Microsoft Internet Explorer (browsers van versie 4.0 en

hoger) en Netscape Navigator (browsers van versie 4.04 en hoger). Tenzij u pagina's ontwerpt voor een specifieke doelgroep

die een browser gebruikt die de PNG-indeling ondersteunt, kunt u dus het beste GIF's of JPEG's gebruiken voor een betere

toegankelijkheid.

GIF (Graphic Interchange Format) GIF-bestanden gebruiken maximaal 256 kleuren en zijn het best geschikt voor de

weergave van afbeeldingen met niet-continue tinten of afbeeldingen met grote gebieden met platte kleuren, zoals

navigatiebalken, knoppen, pictogrammen, logo's of andere afbeeldingen met uniforme kleuren en tonen.

JPEG (Joint Photographic Experts Group) JPEG-bestanden zijn de beste keuze voor foto's en afbeeldingen met continue

tinten, omdat JPEG-bestanden miljoenen kleuren kunnen bevatten. Hoe hoger de kwaliteit van een JPEG-bestand, hoe

groter het bestand en hoe langer het duurt om het te downloaden. U kunt vaak een goede balans vinden tussen de kwaliteit

van de afbeelding en de bestandsgrootte door een JPEG-bestand te comprimeren.

DREAMWEAVER CS3

Handboek

234

PNG (Portable Network Group) PNG-bestanden zijn een patentvrije vervanging van GIF-bestanden, met ondersteuning

voor geïndexeerde kleuren, grijstinten en true-color afbeeldingen en ondersteuning van alfakanalen voor doorzichtigheid.

PNG is de eigen bestandsindeling van Adobe® Fireworks®. In PNG-bestanden blijft alle oorspronkelijke informatie over

lagen, vectors, kleuren en effecten (zoals schaduwen) behouden en blijven alle elementen altijd volledig bewerkbaar.

Bestanden worden alleen door Dreamweaver herkend als PNG-bestanden als ze de extensie .png hebben.

Een afbeelding invoegen

Als u een afbeelding invoegt in een Dreamweaver-document, wordt een verwijzing naar het afbeeldingsbestand

gegenereerd in de HTML-broncode. Deze verwijzing klopt alleen als het afbeeldingsbestand zich op de juiste site bevindt.

Als het zich niet op de huidige site bevindt, wordt u door Dreamweaver gevraagd of u het bestand naar de site wilt kopiëren.

U kunt afbeeldingen ook dynamisch invoegen. Dynamische afbeeldingen zijn afbeeldingen die vaak veranderen. Bij

rotatiesystemen voor advertentiebanners moet bijvoorbeeld steeds willekeurige één banner worden geselecteerd uit een lijst

met mogelijke banners, waarna de afbeelding van de geselecteerde banner dynamisch wordt weergegeven als een pagina

wordt opgevraagd.

Nadat u een afbeelding hebt ingevoegd, kunt u toegankelijkheidskenmerken voor de afbeeldingstag instellen die leesbaar

zijn door schermlezers voor blinde en slechtziende gebruikers. Deze kenmerken kunnen worden bewerkt in HTML-code.

Zie www.adobe.com/go/vid0148_nl voor een zelfstudie over het invoegen van afbeeldingen.

1 Plaats de invoegpositie op de locatie waar u de afbeelding wilt weergeven in het documentvenster en ga op een van de

volgende manieren te werk:

• Ga naar de categorie Algemeen in het paneel Invoegen en klik op het pictogram Afbeeldingen .

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Afbeeldingen en selecteer het pictogram Afbeelding.

Als het pictogram Afbeelding op de invoegbalk wordt weergegeven, kunt u het pictogram naar het documentvenster

slepen (of naar het venster Codeweergave als u in de code aan het werken bent).

• Selecteer Invoegen > Afbeelding.

• Sleep een afbeelding uit het deelvenster Middelen (Venster > Middelen) naar de gewenste locatie in het documentvenster

en ga vervolgens verder met stap 3.

• Sleep een afbeelding uit het paneel Bestanden naar de gewenste locatie in het documentvenster en ga vervolgens verder

met stap 3.

• Sleep een afbeelding van het bureaublad naar de gewenste locatie in het documentvenster en ga vervolgens verder met

stap 3.

2 Voer in het dialoogvenster een van de volgende handelingen uit:

• Selecteer Bestandssysteem om een afbeeldingsbestand te kiezen.

• Selecteer Gegevensbron om een dynamische afbeeldingsbron te kiezen.

• Klik op de knop Sites en servers als u een afbeeldingsbestand wilt kiezen in een externe map van uw Dreamweaver-sites.

3 Blader naar de afbeelding of inhoudsbron die u wilt invoegen en selecteer deze.

Als u in een niet-opgeslagen document werkt, wordt een file://-verwijzing naar het afbeeldingsbestand gegenereerd. Als u

het document ergens op de site opslaat, wordt de verwijzing geconverteerd naar een documentrelatief pad.

Opmerking: Bij het invoegen van afbeeldingen kunt u ook een absoluut pad gebruiken naar een afbeelding op een externe server

(een afbeelding die niet is opgeslagen op de lokale vaste schijf). Als u problemen ervaart tijdens het werken kunt u er echter

voor kiezen om de afbeelding niet weer te geven in de ontwerpweergave door de optie Opdrachten > Externe bestanden

weergeven uit te schakelen.

4 Klik op OK. Het dialoogvenster Toegankelijkheidskenmerken van de afbeeldingstag wordt weergegeven als u het

dialoogvenster hebt geactiveerd in Voorkeuren (Bewerken > Voorkeuren).

5 Typ waarden in de tekstvakken Alternatieve tekst en Lange beschrijving en klik op OK.

• In het tekstvak Alternatieve tekst typt u een naam of korte beschrijving voor de afbeelding. De schermlezer leest de

informatie die u hier typt. Gebruik niet meer dan ongeveer 50 tekens. Voor langere beschrijvingen kunt u een koppeling

gebruiken (in het tekstvak Lange beschrijving) naar een bestand dat meer informatie over de afbeelding bevat.

DREAMWEAVER CS3

Handboek

235

• In het tekstvak Lange beschrijving typt u de locatie van een bestand dat wordt weergegeven als de gebruiker op de

afbeelding klikt of op het mappictogram klikt om naar het bestand te bladeren. Dit tekstvak bevat een koppeling naar

een bestand dat betrekking heeft op of meer informatie bevat over de afbeelding.

Opmerking: U kunt informatie typen in een of beide tekstvakken, afhankelijk van uw vereisten. De schermlezer leest het Alt-

kenmerk voor de afbeelding.

Opmerking: Als u op Annuleren klikt, verschijnt de afbeelding in het document, maar worden er door Dreamweaver geen

toegankelijkheidstags of -kenmerken aan gekoppeld.

6 In de eigenschappencontrole (Venster > Eigenschappen) kunt u eigenschappen instellen voor de afbeelding.

Zie ook

“Afbeeldingen dynamisch maken” op pagina 538

“Afbeeldingen met hyperlinks” op pagina 280

“De werkomgeving optimaliseren voor het ontwerp van toegankelijke pagina's” op pagina 673

“Pagina-eigenschappen instellen” op pagina 208

Afbeeldingseigenschappen instellen

In de eigenschappencontrole voor afbeeldingen kunt u eigenschappen voor een afbeelding instellen. Als u niet alle

afbeeldingseigenschappen ziet, klikt u op de uitvouwpijl in de rechterbenedenhoek.

1 Selecteer Venster > Eigenschappen om de eigenschappencontrole voor een geselecteerde afbeelding weer te geven.

2 Typ een naam in het tekstvak onder de miniatuurafbeelding zodat u naar de afbeelding kunt verwijzen als u een

Dreamweaver-gedrag (zoals Afbeelding verwisselen) gebruikt of als u een scripttaal als JavaScript of VBScript gebruikt.

3 Stel de afbeeldingsopties naar wens in.

B en H De breedte en hoogte van de afbeelding in pixels. Als u een afbeelding invoegt op een pagina, worden deze

tekstvakken automatisch bijgewerkt met de oorspronkelijke afmetingen van de afbeelding.

Als u voor B en H waarden instelt die niet overeenkomen met de werkelijke breedte en hoogte van de afbeelding, wordt de

afbeelding mogelijk niet goed weergegeven in een browser. (Als u de oorspronkelijke waarden wilt herstellen, klikt u op de

labels van de tekstvakken B en H of op de knop Afbeeldingsgrootte herstellen rechts van de tekstvakken B en H als u een

nieuwe waarde typt.)

Opmerking: U kunt deze waarden wijzigen om de weergavegrootte van dit exemplaar van de afbeelding aan te passen, maar

dat heeft geen invloed op de downloadtijd, omdat de browser alle afbeeldingsgegevens downloadt voordat de grootte van de

afbeelding wordt aangepast. Als u de downloadtijd wilt verminderen en ervoor wilt zorgen dat alle exemplaren van een

afbeelding even groot worden weergegeven, moet u afbeeldingen schalen met een toepassing voor het bewerken van

afbeeldingen.

Bron Geeft het bronbestand voor de afbeelding aan. Klik op het mappictogram om naar het bronbestand te bladeren of

typ het pad.

Koppeling Geeft een hyperlink naar de afbeelding aan. Sleep het Point-To-File-pictogram naar een bestand in het paneel

Bestanden, klik op het mappictogram om naar een document in de site te bladeren of typ de URL handmatig.

Uitlijnen Hiermee lijnt u een afbeelding en tekst uit op dezelfde lijn.

Alt Hiermee geeft u alternatieve tekst op die in plaats van de afbeelding wordt weergegeven in browsers die alleen tekst

weergeven of in browsers waarvoor is ingesteld dat afbeeldingen handmatig moeten worden gedownload. Voor blinde of

DREAMWEAVER CS3

Handboek

236

slechtziende gebruikers die spraakprogramma's gebruiken met browsers die alleen tekst weergeven, wordt de tekst hardop

voorgelezen. In sommige browsers wordt deze tekst ook weergegeven als de aanwijzer op de afbeelding wordt geplaatst.

Mapnaam en Hotspot-gereedschap Hiermee kunt u een overzicht van afbeeldingen met hyperlinks labelen en maken.

V-ruimte en H-ruimte Voegen ruimte, in pixels, toe langs de zijkanten van de afbeelding. Met V-ruimte voegt u ruimte toe

langs de bovenkant en onderkant van een afbeelding. Met H-ruimte voegt u ruimte toe langs de linkerkant en rechterkant

van een afbeelding.

Doel Hiermee geeft u het frame of venster op waarin de gekoppelde pagina moet worden geladen. (Deze optie is niet

beschikbaar als de afbeelding niet is gekoppeld aan een ander bestand.) De namen van alle frames in de huidige frameset

worden weergegeven in de lijst Doel. U kunt ook een van de volgende gereserveerde doelnamen kiezen:

• _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.

• _parent laadt het gekoppelde bestand in het bovenliggende frame of venster ten opzichte van het frame dat de koppeling

bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde bestand geladen in het volledige

browservenster.

• _self laadt het gekoppelde bestand in het frame of venster waarin de koppeling zich bevindt. Dit doel is de

standaardinstelling en hoeft u gewoonlijk niet te definiëren.

• _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.

Lage bron Geeft de afbeelding aan die moet worden geladen voor de hoofdafbeelding. Veel ontwerpers gebruiken een 2-

bpk (zwart-wit) versie van de hoofdafbeelding omdat deze snel wordt geladen en bezoekers zo een idee krijgen van waar ze

op wachten.

Kader: De breedte, in pixels, van de rand van de afbeelding. De standaardinstelling is geen rand.

Bewerken Hiermee wordt de afbeeldingseditor gestart die u hebt opgegeven in de voorkeuren voor externe editors en

wordt de geselecteerde afbeelding geopend.

Optimaliseren. Hiermee wordt het dialoogvenster Optimalisering geopend.

Uitsnede Hiermee kunt u een afbeelding uitsnijden, waarbij u ongewenste delen verwijdert van de geselecteerde

afbeelding.

Nieuw voorbeeld Hiermee kunt u een nieuw voorbeeld weergeven van een afbeelding waarvan u de grootte hebt

gewijzigd, zodat u de afbeeldingskwaliteit met de nieuwe grootte en vorm verbetert.

Helderheid en Contrast Past de helderheid en het contrast van een afbeelding aan.

Scherp Past de scherpte van een afbeelding aan.

Grootte opnieuw instellen Hiermee kunt u de B- en H-waarden opnieuw instellen op de oorspronkelijke grootte van de

afbeelding. Deze knop wordt rechts van de tekstvakken B en H weergegeven als u de waarden voor de geselecteerde

afbeelding wijzigt.

Toegankelijkheidskenmerken van een afbeelding bewerken in code

Als u toegankelijkheidskenmerken hebt ingevoegd voor een afbeelding, kunt u die waarden bewerken in de HTML-code.

1 Selecteer de afbeelding in het documentvenster.

2 Voer een van de volgende handelingen uit:

• Bewerk de desbetreffende afbeeldingskenmerken in de codeweergave.

• Klik met de rechtermuisknop (Windows), of houd de Control-toets ingedrukt terwijl u klikt, en kies Tag bewerken.

• Bewerk de Alt-waarde in de eigenschappencontrole.

DREAMWEAVER CS3

Handboek

237

Afbeeldingen bewerken in Dreamweaver

Dreamweaver bevat basisfuncties voor het bewerken van afbeeldingen waarmee u afbeeldingen kunt wijzigen zonder dat u

een externe toepassing voor het bewerken van afbeeldingen, zoals Fireworks, hoeft te gebruiken. De Dreamweaver-functies

voor het bewerken van afbeeldingen zijn opgenomen zodat u gemakkelijk kunt samenwerken met inhoudsontwerpers die

verantwoordelijk zijn voor het maken van afbeeldingsbestanden die op uw website worden gebruikt.

Opmerking: U kunt de Dreamweaver-functies voor het bewerken van afbeeldingen ook gebruiken als Fireworks niet op uw

computer is geïnstalleerd.

❖ Selecteer Wijzigen > Afbeelding. Stel een van deze Dreamweaver-functies voor het bewerken van afbeeldingen in:

Nieuw voorbeeld Hiermee worden pixels opgeteld bij of afgetrokken van JPEG- en GIF-afbeeldingsbestanden waarvan de

grootte is gewijzigd, zodat deze zoveel mogelijk overeenkomen met de weergave van de oorspronkelijke afbeelding. Als u

een nieuw voorbeeld maakt van een afbeelding, wordt het bestand kleiner en verloopt het downloaden sneller.

Als u de grootte van een afbeelding wijzigt in Dreamweaver, kunt u er een nieuw voorbeeld van maken op basis van de

nieuwe afmetingen. Als er een nieuw voorbeeld wordt gemaakt van een bitmapobject, worden er pixels toegevoegd aan of

verwijderd uit de afbeelding zodat deze groter of kleiner wordt. Als u van een afbeelding een nieuw voorbeeld maakt met

een hogere resolutie, heeft dit meestal weinig kwaliteitsverlies tot gevolg. Als u echter een voorbeeld met een lagere resolutie

maakt, veroorzaakt dit altijd gegevensverlies en meestal ook kwaliteitsverlies.

Uitsnede Hiermee kunt u afbeeldingen bewerken door de oppervlakte van de afbeelding te verkleinen. Meestal snijdt u

een afbeelding uit als u meer nadruk wilt plaatsen op het onderwerp van de afbeelding en ongewenste aspecten rondom het

centrum van interesse in de afbeelding wilt verwijderen.

Helderheid en Contrast Hiermee wijzigt u het contrast of de helderheid van pixels in een afbeelding. Dit heeft effect op de

markeringen, schaduwen en middeltonen van een afbeelding. Meestal gebruikt u Helderheid/contrast als u afbeeldingen

corrigeert die te donker of te licht zijn.

Scherp Hiermee past u de focus van een afbeelding aan door het contrast te vergroten van randen binnen de afbeelding.

Als u een afbeelding scant of eendigitalefotoneemt,wordendoordemeestesoftware voor het vastleggen van afbeeldingen

standaard de randen van objecten in de afbeelding verzacht. Hierdoor wordt voorkomen dat heel fijne details verloren gaan

in de pixels waaruit digitale afbeeldingen opgebouwd. Om de details naar voren te brengen in digitale

afbeeldingsbestanden, is het echter vaak nodig om de afbeelding scherper te maken, waarbij het randcontrast wordt

vergroot waardoor de afbeelding scherper lijkt.

Opmerking: De Dreamweaver-functies voor het bewerken van afbeeldingen kunnen alleen worden gebruikt voor JPEG- en

GIF-afbeeldingsbestanden. Bitmapafbeeldingen met een andere bestandsindeling kunnen niet met deze functies voor het

bewerken van afbeeldingen worden bewerkt.

Een voorlopige afbeelding invoegen

Een voorlopige afbeelding is een afbeelding die u gebruikt totdat u de definitieve afbeelding kunt toevoegen aan een

webpagina. U kunt de grootte en kleur van de voorlopige afbeelding instellen en er een tekstlabel voor opgeven.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u een voorlopige afbeelding wilt invoegen.

2 Selecteer Invoegen > Afbeeldingsobjecten > Voorlopige afbeelding.

3 Typ bij Naam (optioneel) tekst die u wilt laten weergeven als label voor de voorlopige afbeelding. Laat het tekstvak leeg

als u niet wilt dat er een label wordt weergegeven. De naam moet met een letter beginnen en mag alleen letters en cijfers

bevatten. Spaties en hoge ASCII-tekens zijn niet toegestaan.

4 Typ bij Breedte en Hoogte (verplicht) een getal waarmee u de grootte van de afbeelding in pixels instelt.

5 Pas voor Kleur (optioneel) op een van de volgende manieren een kleur toe:

• Gebruik de kleurkiezer om een kleur te selecteren.

• Typ de hexadecimale waarde van de kleur (bijvoorbeeld #FF0000).

• Typ de naam van een webveilige kleur (bijvoorbeeld rood).

6 Typ bij Alternatieve tekst (optioneel) tekst waarmee u de afbeelding beschrijft voor mensen die een browser met alleen

tekst gebruiken.

DREAMWEAVER CS3

Handboek

238

Opmerking: Er wordt automatisch in de HTML-code een afbeeldingstag ingevoegd met een leeg src-kenmerk.

7 Klik op OK.

De kleur, groottekenmerken en label van de voorlopige afbeelding worden als volgt weergegeven:

In een browser worden de tekst voor de label en de grootte niet weergegeven.

Zie ook

“De grootte van een afbeelding visueel wijzigen” op pagina 240

“Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen” op pagina 352

Eigenschappen voor voorlopige afbeeldingen instellen

Als u eigenschappen wilt instellen voor een voorlopige afbeelding, selecteert u de voorlopige afbeelding in het

documentvenster en selecteert u vervolgens Venster > Eigenschappen om de eigenschappencontrole weer te geven. Als u

niet alle afbeeldingseigenschappen ziet, klikt u op de uitvouwpijl in de rechterbenedenhoek.

Gebruik de eigenschappencontrole om een naam, breedte, hoogte, afbeeldingsbron, beschrijving in alternatieve tekst,

uitlijning en kleur in te stellen voor een voorlopige afbeelding.

In de eigenschappencontrole voor de voorlopige afbeelding zijn het grijze tekstvak en het tekstvak Uitlijnen niet

beschikbaar. U kunt deze eigenschappen instellen in de eigenschappencontrole voor afbeeldingen als u de voorlopige

afbeelding vervangt door een definitieve afbeelding.

❖ Stel vervolgens de volgende opties naar wens in:

B en H Stellen de breedte en hoogte van de voorlopige afbeelding in in pixels.

Bron Geeft het bronbestand voor de afbeelding aan. Voor een voorlopige afbeelding is dit tekstvak leeg. Klik op de knop

Bladeren om een vervangende afbeelding te selecteren voor de voorlopige afbeelding.

Koppeling Geeft een hyperlink naar de voorlopige afbeelding aan. Sleep het Point-to-File-pictogram naar een bestand in

het paneel Bestanden, klik op het mappictogram om naar een document in de site te bladeren of typ de URL handmatig.

Alt Hiermee geeft u alternatieve tekst op die in plaats van de afbeelding wordt weergegeven in browsers die alleen tekst

weergeven of in browsers waarvoor is ingesteld dat afbeeldingen handmatig moeten worden gedownload. Voor blinde of

slechtziende gebruikers die spraakprogramma's gebruiken met browsers die alleen tekst weergeven, wordt de tekst hardop

voorgelezen. In sommige browsers wordt deze tekst ook weergegeven als de aanwijzer op de afbeelding wordt geplaatst.

Maken Hiermee start u Fireworks om een vervangende afbeelding te maken. De knop Maken is alleen ingeschakeld als

Fireworks ook op uw computer is geïnstalleerd.

Grootte opnieuw instellen Hiermee kunt u de B- en H-waarden opnieuw instellen op de oorspronkelijke grootte van de

afbeelding.

Kleur Geeft een kleur voor de voorlopige afbeelding.

DREAMWEAVER CS3

Handboek

239

Zie ook

“Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen” op pagina 352

Een voorlopige afbeelding vervangen

Een voorlopige afbeelding geeft geen afbeelding weer in een browser. Voordat u uw site publiceert, moet u alle voorlopige

afbeeldingen die u hebt toegevoegd, vervangen door webvriendelijke afbeeldingsbestanden, zoals GIF- of JPEG-bestanden.

Als u Fireworks hebt, kunt u een nieuwe afbeelding maken vanuit de voorlopige afbeelding in Dreamweaver. De nieuwe

afbeelding krijgt dezelfde afmetingen als de voorlopige afbeelding. U kunt de afbeelding bewerken en vervolgens in

Dreamweaver vervangen.

1 Voer een van de volgende handelingen uit in het documentvenster:

• Dubbelklik op de voorlopige afbeelding.

• Klik op de voorlopige afbeelding om deze te selecteren en klik vervolgens in de eigenschappencontrole (Venster >

Eigenschappen) op het mappictogram naast het tekstvak Bron.

2 Blader in het dialoogvenster Afbeeldingsbron naar de afbeelding waardoor u de voorlopige afbeelding wilt vervangen,

en klik op OK.

Zie ook

“Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen” op pagina 352

Een afbeelding uitlijnen

U kunt een afbeelding uitlijnen op tekst, op een andere afbeelding, op een insteekmodule of op andere elementen op

dezelfde regel. U kunt ook de horizontale uitlijning van een afbeelding instellen.

1 Selecteer de afbeelding in de ontwerpweergave.

2 Stel in de eigenschappencontrole de uitlijningskenmerken van de afbeelding in met behulp van het pop-upmenu

Uitlijnen.

U kunt de uitlijning instellen ten opzichte van andere elementen in dezelfde alinea of op dezelfde regel.

Opmerking: HTMLbiedtgeenmanieromtekstrondderandenvaneenafbeeldingtelatenlopen,zoalswelkanmetsommige

tekstverwerkingstoepassingen.

De volgende uitlijningsopties zijn beschikbaar:

Standaard Een uitlijning op de basislijn. (De standaard kan variëren afhankelijk van de browser van de sitebezoeker.)

Basislijn en Onder Lijnen de basislijn van de tekst (of een ander element in dezelfde alinea) uit op de onderkant van het

geselecteerde object.

Boven Lijnt de bovenkant van een afbeelding uit op de bovenkant van het grootste item (afbeelding of tekst) op de huidige

regel.

Midden Lijnt het midden van de afbeelding uit op de basislijn van de huidige regel.

Bovenzijde tekst Lijnt de bovenkant van de afbeelding uit op de bovenkant van het grootste teken in de tekstregel.

Exact in het midden Lijnt het midden van de afbeelding uit op de het midden van de tekst op de huidige regel.

Helemaal onderaan Lijnt de onderkant van de afbeelding uit op de onderkant van de regel tekst (inclusief omlaagwijzende

stokken, zoals in de letter g).

Links Plaatst de geselecteerde afbeelding in de linkermarge, waarbij de tekst er aan de rechterkant omheen loopt. Als links

uitgelijnde tekst voorafgaan aan het object op de regel, worden links uitgelijnde objecten meestal gewongen tot omloop op

een nieuwe regel.

DREAMWEAVER CS3

Handboek

240

Rechts Plaatst de afbeelding op de rechtermarge, waarbij de tekst aan de linkerkant om het object loopt. Als rechts

uitgelijnde tekst voorafgaan aan het object op de regel, worden rechts uitgelijnde objecten meestal gewongen tot omloop op

een nieuwe regel.

De grootte van een afbeelding visueel wijzigen

U kunt de grootte van elementen als afbeeldingen, insteekmodules, Shockwave- of Flash-bestanden, applets en ActiveX-

besturingselementen visueel wijzigen in Dreamweaver.

Als u de grootte van een afbeelding visueel wijzigt, kunt u zien hoe de afbeelding met verschillende afmetingen de indeling

beïnvloedt, maar wordt het afbeeldingsbestand niet geschaald naar de door u opgegeven verhoudingen. Als u de grootte

van een afbeelding visueel wijzigt in Dreamweaver zonder een toepassing voor het bewerken van afbeeldingen (zoals

Fireworks) te gebruiken om het afbeeldingsbestand te schalen naar de gewenste grootte, wordt de afbeelding geschaald door

de browser van de gebruiker als de pagina wordt geladen. Hierdoor kan het langer duren om de pagina te downloaden en

wordt de afbeelding mogelijk niet goed weergegeven in de browser van de gebruiker. Als u de downloadtijd wilt

verminderen en ervoor wilt zorgen dat alle exemplaren van een afbeelding even groot worden weergegeven, moet u

afbeeldingen schalen met een toepassing voor het bewerken van afbeeldingen.

Als u de grootte van een afbeelding wijzigt in Dreamweaver, kunt u er een nieuw voorbeeld van maken op basis van de

nieuwe afmetingen. Als u een nieuw voorbeeld maakt, worden pixels opgeteld bij of afgetrokken van JPEG- en GIF-

afbeeldingsbestanden waarvan de grootte is gewijzigd, zodat deze zoveel mogelijk overeenkomen met de weergave van de

oorspronkelijke afbeelding. Als u een nieuw voorbeeld maakt van een afbeelding, wordt het bestand kleiner en verloopt

het downloaden sneller.

Zie ook

“Afbeeldingen bewerken in Dreamweaver” op pagina 237

De grootte van een element visueel wijzigen

1 Selecteer het element (bijvoorbeeld een afbeelding of SWF-bestand) in het documentvenster.

Aan de onderkant en rechterkant van het element en in de rechterbenedenhoek worden formaatgrepen weergegeven. Als

er geen formaatgrepen worden weergegeven, klikt u ergens anders dan op het element waarvan u de grootte wilt wijzigen

en selecteert u het vervolgens opnieuw, of klikt u op de desbetreffende tag in de tagkiezer om het element te selecteren.

2 Wijzig de grootte van het element op een van de volgende manieren:

• Als u de breedte van het element wilt aanpassen, sleept u de selectiegreep aan de rechterkant.

• Als u de hoogte van het element wilt aanpassen, sleept u de selectiegreep aan de onderkant.

• Als u de breedte en de hoogte van het element tegelijk wilt aanpassen, sleept u de selectiegreep in de hoek.

• Als u de verhoudingen van het element (de verhouding tussen breedte en hoogte) wilt behouden bij het wijzigen van de

grootte, houdt u Shift in gedrukt terwijl u de hoekselectiegreep sleept.

• Als u de breedte en hoogte van een element wilt instellen op een specifieke grootte (bijvoorbeeld 1 x 1 pixel), kunt u in

de eigenschappencontrole een numerieke waarde invoeren. De grootte van elementen kan visueel worden gewijzigd tot

minimaal 8 x 8 pixels.

3 Als u de oorspronkelijke afmetingen van een element wilt herstellen, verwijdert u in de eigenschappencontrole de

waarden in de tekstvakken B en H of klikt u op de knop Grootte opnieuw instellen in de eigenschappencontrole voor de

afbeelding.

De oorspronkelijke afmetingen van een afbeelding herstellen

❖

Klik op de knop Grootte opnieuw instellen in de eigenschappencontrole voor de afbeelding.

Een nieuw voorbeeld weergeven van een afbeelding waarvan u het formaat hebt gewijzigd.

1 Wijzig de grootte van de afbeelding zoals hierboven is beschreven.

2 Klik op de knop Nieuw voorbeeld in de eigenschappencontrole voor de afbeelding.

DREAMWEAVER CS3

Handboek

241

Opmerking: U kunt geen nieuw voorbeeld maken van voorlopige afbeeldingen of andere elementen dan bitmapafbeeldingen.

Een afbeelding uitsnijden

Met Dreamweaver kunt u bitmapafbeeldingen uitsnijden (of bijsnijden).

Opmerking: Als u een afbeelding uitsnijdt, wordt het bronbestand van de afbeelding gewijzigd op de schijf. Bewaar daarom

een back-upexemplaar van het afbeeldingsbestand voor het geval u de oorspronkelijke afbeelding weer wilt gebruiken.

1 Open de pagina die de afbeelding bevat die u wilt uitsnijden, selecteer de afbeelding en ga op een van de volgende

manieren te werk:

• Klik op het pictogram Uitsnijden in de eigenschappencontrole voor de afbeelding.

• Selecteer Wijzigen > Afbeelding > Uitsnijden.

Er worden uitsnijgrepen weergegeven rond de geselecteerde afbeelding.

2 Pas de uitsnijgrepen aan totdat het vak het gebied van de afbeelding aangeeft dat u wilt behouden.

3 Dubbelklik binnen in het vak of druk op Enter om de selectie uit te snijden.

4 Er wordt een dialoogvenster weergegeven met het bericht dat het afbeeldingsbestand dat u uitsnijdt, wordt gewijzigd op

de schijf. Klik op OK. Alle pixels in de geselecteerde bitmap buiten het vak worden verwijderd, maar andere objecten in de

afbeelding blijven staan.

5 Geef een voorbeeld weer van de afbeelding en kijk of die aan uw verwachtingen voldoet. Als dat niet zo is, selecteert u

Bewerken > Uitsnijden ongedaan maken om terug te keren naar de oorspronkelijke afbeelding.

Opmerking: U kunt het effect van de opdracht Uitsnijden ongedaan maken (en terugkeren naar het oorspronkelijke

afbeeldingsbestand) totdat u Dreamweaver afsluit of totdat u het bestand bewerkt in een externe toepassing voor het bewerken

van afbeeldingen.

Een afbeelding optimaliseren met Fireworks

U kunt afbeeldingen op uw webpagina's optimaliseren vanuit Dreamweaver.

1 Open de pagina die de afbeelding bevat die u wilt optimaliseren, selecteer de afbeelding en ga op een van de volgende

manieren te werk:

• Klik op de knop Optimaliseren in Fireworks in de eigenschappencontrole voor de afbeelding.

• Selecteer Wijzigen > Afbeelding > Beeld in Fireworks optimaliseren.

2 Geef aan of u de afbeelding wilt optimaliseren in een PNG-bestand of dat u het geopende afbeeldingsbestand wilt

gebruiken.

3 Bewerk het afbeeldingsbestand, klik op Bijwerken en sla het bestand op.

De helderheid en het contrast van een afbeelding aanpassen

Met Helderheid/contrast wijzigt u het contrast of de helderheid van pixels in een afbeelding. Dit heeft effect op de

markeringen, schaduwen en middeltonen van een afbeelding. Meestal gebruikt u Helderheid/contrast als u afbeeldingen

corrigeert die te donker of te licht zijn.

1 Open de pagina die de afbeelding bevat die u wilt aanpassen, selecteer de afbeelding en ga op een van de volgende

manieren te werk:

• Klik op de knop Helderheid/contrast in de eigenschappencontrole voor de afbeelding.

• Selecteer Wijzigen > Afbeelding > Helderheid/contrast.

2 Sleep de schuifregelaars voor Helderheid en Contrast om de instellingen aan te passen. Waarden kunnen variëren van

–100 tot +100.

3 Klik op OK.

DREAMWEAVER CS3

Handboek

242

Een afbeelding scherper maken

Als u een afbeelding scherper maakt, wordt het contrast van pixels rond de randen van objecten vergroot, zodat de

afbeelding gedefinieerder of scherper wordt.

1 Open de pagina die de afbeelding bevat die u scherper wilt maken, selecteer de afbeelding en ga op een van de volgende

manieren te werk:

• Klik op de knop Verscherpen in de eigenschappencontrole voor de afbeelding.

• Selecteer Wijzigen > Afbeelding > Verscherpen.

2 U kunt aangeven in welke mate Dreamweaver de afbeelding moet verscherpen door de schuifregelaar te slepen of door

een waarde tussen 0 en 10 in het tekstvak te typen. Terwijl u de scherpte van de afbeelding aanpast in het dialoogvenster

Scherpte, kunt u in een voorbeeld de wijzigingen in de afbeelding zien.

3 Klik op OK als u tevreden bent met de afbeelding.

4 Sla uw wijzigingen op door Bestand > Opslaan te selecteren, of keer terug naar de oorspronkelijke afbeelding door

Bewerken > Verscherpen ongedaan maken te selecteren.

Opmerking: U kunt het effect van de opdracht Verscherpen alleen ongedaan maken (en terugkeren naar het oorspronkelijke

afbeeldingsbestand) als u de pagina met de afbeelding nog niet hebt opgeslagen. Nadat u de pagina hebt opgeslagen, worden

de wijzigingen in de afbeelding permanent opgeslagen.

Een rollover-afbeelding maken

U kunt rollover-afbeeldingen invoegen in uw pagina. Een rollover is een afbeelding die, als deze wordt weergegeven in een

browser, verandert als de aanwijzer erop wordt geplaatst.

U hebt twee afbeeldingen nodig om de rollover te maken: een primaire afbeelding (de afbeelding die wordt weergegeven

als de pagina wordt geladen) en een secundaire afbeelding (de afbeelding die wordt weergegeven als de aanwijzer op de

primaire afbeelding wordt geplaatst). Beide afbeeldingen in de rollover moeten dezelfde grootte hebben. Dreamweaver Als

de afbeeldingen niet even groot zijn, worden de afmetingen van de tweede afbeelding aangepast aan die van de eerste

afbeelding.

Rollover-afbeeldingen worden automatisch zo ingesteld dat ze reageren op de

onMouseOver-gebeurtenis. U kunt een

afbeelding zo instellen dat deze reageert op een ander gebeurtenis (bijvoorbeeld een muisklik) of een rollover-afbeelding

wijzigen.

Zie www.adobe.com/go/vid0159_nl voor een zelfstudie over het maken van rollovers.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de rollover wilt weergeven.

2 Gebruik een van de volgende methoden om de rollover in te voegen:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Afbeeldingen en selecteer het pictogram Rollover-

afbeelding. Als het pictogram Rollover-afbeelding is weergegeven in de invoegbalk, kunt u het pictogram naar het

documentvenster slepen.

• Selecteer Invoegen > Afbeeldingsobjecten > Rollover-afbeelding.

3 Stel opties in en klik op OK.

Afbeeldingsnaam De naam van de rollover-afbeelding.

Oorspronkelijke afbeelding De afbeelding die u wilt weergeven als de pagina wordt geladen. Typ het pad in het tekstvak of

klik op Bladeren en selecteer de afbeelding.

Rollover-afbeelding De afbeelding die u wilt weergeven als de aanwijzer over de oorspronkelijke afbeelding rolt. Typ het

pad of klik op Bladeren om de afbeelding te selecteren.

Vooraf laden van Rollover-afbeelding Hiermee worden afbeeldingen vooraf in het cachegeheugen van de browser geladen,

zodat er geen vertraging optreedt als de gebruiker de aanwijzer over de afbeelding rolt.

Alternatieve tekst (Optioneel) Tekst waarmee u de afbeelding beschrijft voor mensen die een browser met alleen tekst

gebruiken.

DREAMWEAVER CS3

Handboek

243

Ga als erop wordt geklikt, naar de URL Het bestand dat u wilt openen als een gebruiker op de rollover-afbeelding klikt. Typ

het pad of klik op Bladeren en selecteer het bestand.

Opmerking: Als u geen koppeling instelt voor de afbeelding, voegt Dreamweaver een lege koppeling (#) in de broncode in

waaraan het rollover-gedrag wordt gekoppeld. Als u de lege koppeling verwijdert, werkt de rollover-afbeelding niet meer.

4 Selecteer Bestand > Voorvertoning in browser of druk op F12.

5 Verplaats in de browser de aanwijzer naar de oorspronkelijke afbeelding om de rollover-afbeelding te zien.

Opmerking: U kunt het effect van een rollover-afbeelding niet zien in de ontwerpweergave.

Zie ook

“Het gedrag Afbeelding verwisselen toepassen” op pagina 348

“Navigatiebalk invoegen” op pagina 279

Een externe afbeeldingseditor gebruiken

In Dreamweaver kunt u een geselecteerde afbeelding openen in een externe afbeeldingseditor. Als u het bewerkte

afbeeldingsbestand opslaat en terugkeert naar Dreamweaver, worden alle wijzigingen die u in de afbeelding hebt

aangebracht, weergegeven in het documentvenster.

U kunt Fireworks instellen als primaire externe editor. U kunt ook instellen welke bestandstypen door een editor worden

geopend en u kunt meerdere afbeeldingseditors selecteren. U kunt bijvoorbeeld via de voorkeuren instellen dat Fireworks

moet worden gestart als u een GIF wilt bewerken en dat een andere afbeeldingseditor moet worden gestart als u een JPG of

JPEG wilt bewerken.

Zie ook

“Werken met Photoshop” op pagina 357

“Werken met Fireworks” op pagina 351

“Een externe editor openen voor mediabestanden” op pagina 260

De externe editor voor bestanden starten

❖

Voer een van de volgende handelingen uit:

• Dubbelklik op de afbeelding die u wilt bewerken.

• Klik met de rechtermuisknop (Windows), of houd de Control-toets ingedrukt (Macintosh) terwijl u op de afbeelding

klikt die u wilt bewerken en selecteer vervolgens Bewerken met > Bladeren om een editor te selecteren.

• Selecteer de afbeelding die u wilt bewerken en klik op Bewerken in de eigenschappencontrole.

• Dubbelklik op het afbeeldingsbestand in het paneel Bestanden om de primaire afbeeldingseditor te starten. Als u geen

afbeeldingseditor hebt opgegeven, Dreamweaver wordt de standaardeditor voor het bestandstype gestart.

Opmerking: Als u een afbeelding opent vanuit het paneel Bestanden, werken de integratiefuncties van Fireworks niet.

Fireworks opent niet het oorspronkelijke PNG-bestand. Als u de integratiefuncties van Fireworks wilt gebruiken, moet u

afbeeldingen openen vanuit het documentvenster.

Als u geen bijgewerkte afbeelding ziet nadat u bent teruggekeerd naar het Dreamweaver-venster, selecteert u de afbeelding

en klikt u op de knop Vernieuwen in de eigenschappencontrole.

Een externe afbeeldingseditor instellen voor een bestaand bestandstype

U kunt een afbeeldingseditor selecteren voor het openen en bewerken van grafische bestanden.

1 Open het dialoogvenster met voorkeuren voor Bestandstypen/editors op een van de volgende manieren:

• Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer

Bestandstypen/editors in de lijst Categorie aan de linkerkant.

DREAMWEAVER CS3

Handboek

244

• Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors.

2 Selecteer in de lijst Extensies de bestandsextensie waarvoor u een externe editor wilt instellen.

3 Klik op de knop Toevoegen (+) boven de lijst Editors.

4 Blader in het dialoogvenster Externe editor selecteren naar de toepassing die u als editor voor dit bestandstype wilt

openen.

5 Klik in het dialoogvenster Voorkeuren op Primair maken als u van deze editor de primaire editor voor dit bestandstype

wilt maken.

6 Als u nog een editor voor dit bestandstype wilt instellen, herhaalt u stap 3 en 4.

Dreamweaver gebruikt automatisch de primaire editor als u dit afbeeldingstype bewerkt. U kunt de andere editors

selecteren uit het contextmenu voor de afbeelding in het documentvenster.

Een nieuw bestandstype toevoegen aan de lijst Extensies

1 Open het dialoogvenster met voorkeuren voor Bestandstypen/editors op een van de volgende manieren:

• Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer

Bestandstypen/editors in de lijst Categorie aan de linkerkant.

• Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors.

2 Klik in het dialoogvenster met voorkeuren voor Bestandstypen/editors op de knop Toevoegen (+) boven de lijst

Extensies.

Er wordt een tekstvak weergegeven in de lijst Extensies.

3 Typ de bestandsextensie van het bestandstype waarvoor u een editor wilt starten.

4 Klik op de knop Toevoegen (+) boven de lijst Editors om een externe editor voor het bestandstype te selecteren.

5 Selecteer in het dialoogvenster dat wordt weergegeven de toepassing die u wilt gebruiken voor het bewerken van dit

afbeeldingstype.

6 Klik op Primair maken als u van deze editor de primaire editor voor dit bestandstype wilt maken.

Een voorkeur voor een bestaande editor wijzigen

1 Open het dialoogvenster met voorkeuren voor Bestandstypen/editors op een van de volgende manieren:

• Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer

Bestandstypen/editors in de lijst Categorie aan de linkerkant.

• Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors.

2 Selecteer in de lijst Extensies in het dialoogvenster met voorkeuren voor Bestandstypen/editors het bestandstype dat u

wilt wijzigen om de bestaande editor(s) weer te geven.

3 Selecteer in de lijst Editors de editor die u wilt wijzigen en ga vervolgens op een van de volgende manieren te werk:

• Klik op de knop Toevoegen (+) of Verwijderen (–) boven de lijst Editors om een editor toe te voegen of te verwijderen.

• Klik op de knop Primair maken om te wijzigen welke editor standaard wordt geopend voor het bewerken.

Gedrag toepassen op afbeeldingen

U kunt elk beschikbare gedrag toepassen op een afbeelding of afbeeldingshotspot. Als u een gedrag toepast op een hotspot,

Dreamweaverwordt de HTML-broncode ingevoegd in de

area-tag. Three behaviors apply specifically to images: Preload

Images, Swap Image, and Swap Image Restore.

Afbeeldingen vooraf laden Hiermee worden afbeeldingen die niet meteen op de pagina worden weergegeven (bijvoorbeeld

afbeeldingen die worden verwisseld als gevolg van gedrag, AP-elementen of JavaScript), in het cachegeheugen van de

browser geladen. Hiermee voorkomt u downloadvertragingen op het moment dat de nieuwe afbeeldingen moeten

verschijnen.

DREAMWEAVER CS3

Handboek

245

Afbeelding verwisselen Verwisselt een afbeelding door een andere door het SRC-kenmerk van de img-tag te wijzigen.

Gebruik deze actie om knop-rollovers en andere afbeeldingseffecten te creëren (inclusief het verwisselen van meerdere

afbeeldingen tegelijk).

Omwisselen van afbeelding herstellen Hiermee wordt de laatste set verwisselde afbeeldingen hersteld naar de voorgaande

bronbestanden. Deze actie wordt standaard automatisch toegevoegd als u de actie Afbeelding verwisselen aan een object

koppelt. U hoeft deze actie nooit handmatig te selecteren.

U kunt gedrag ook gebruiken om geavanceerdere navigatiesystemen te maken, zoals een navigatiebalk of een snelmenu.

Zie ook

“Snelmenu's invoegen” op pagina 277

“Navigatiebalk invoegen” op pagina 279

“Het gedrag Afbeelding verwisselen toepassen” op pagina 348

“Het gedrag Afbeeldingen vooraf laden toepassen” op pagina 342

Flash-inhoud invoegen

Over Flash-bestandstypen

Dreamweaver wordt geleverd met Flash-objecten die u kunt gebruiken of u Flash op uw computer hebt geïnstalleerd of niet.

Voordat u de Flash-opdrachten gebruikt die beschikbaar zijn in Dreamweaver, moet u weten wat de verschillende Flash-

bestandstypen zijn:

Het Flash-bestand (.fla) Het bronbestand voor elk project en wordt gemaakt in het Flash-programma. Dit type bestand kan

alleen worden geopend in Flash (niet in Dreamweaver of in browsers). U kunt het Flash-bestand openen in Flash en het

vervolgens exporteren als een SWF- of SWT-bestand dat in browsers kan worden gebruikt.

Het Flash SWF-bestand (.swf) Een gecomprimeerde versie van het Flash-bestand (.fla) dat is geoptimaliseerd voor weergave

op het web. Dit bestand kan worden afgespeeld in browsers en bekeken in Dreamweaver, maar het kan niet worden bewerkt

in Flash. Dit is het type bestand dat u maakt als u de knop Flash en Flash-tekstobjecten gebruikt.

De Flash-sjabloonbestanden (.swt) Met deze bestanden kunt u informatie in een Flash SWF-bestand wijzigen en

vervangen. De bestanden worden gebruikt in het Flash-knopobject, waarmee u de sjablonen kunt aanpassen met uw eigen

tekst of koppelingen, om zo een aangepaste SWF te maken die u in uw document kunt invoegen. In Dreamweaver vindt u

deze sjabloonbestanden in de mappen Dreamweaver/Configuration/Flash Objects/Flash Buttons en Flash Text.

U kunt nieuwe knopsjablonen downloaden van de website van Adobe Exchange voor Dreamweaver

(www.adobe.com/go/dreamweaver_exchange_nl) en ze in uw map Flash Buttons plaatsen. Zie het artikel op

www.adobe.com/go/flash_buttons_nl voor meer informatie over het maken van nieuwe knopsjablonen.

Het Flash elementbestand (.swc) Een Flash SWF-bestand waarmee u Rich Internet-toepassingen kunt maken door ze op te

nemen in een webpagina. Flash-elementen hebben aanpasbare parameters die u kunt wijzigen zodat ze verschillende

toepassingsfuncties kunnen uitvoeren.

Het Flash-videobestand (.flv) Een videobestand dat gecodeerde audio- en videogegevens bevat die via Flash® Player kunnen

worden afgespeeld. Als u bijvoorbeeld een QuickTime- of Windows Media-videobestand hebt, gebruikt u een

codeerprogramma (zoals Flash® 8 Video Encoder of Sorensen Squeeze) om het videobestand te converteren naar een FLV-

bestand. Ga naar het Flash Video Developer Center op www.adobe.com/go/flv_devcenter_nl voor meer informatie.

Zie ook

“Werken met Flash” op pagina 365

“Een Flash-knop maken en invoegen” op pagina 247

DREAMWEAVER CS3

Handboek

246

“Een Flash-knopobject wijzigen” op pagina 247

“Flash-videoinhoud toevoegen” op pagina 254

Flash-inhoud invoegen en een voorbeeld bekijken

Gebruik Dreamweaver om Flash-inhoud (SWF-bestanden en Shockwave-films) toe te voegen aan uw pagina's en er een

voorbeeld van te bekijken in een document en een browser. U kunt ook eigenschappen voor Flash-inhoud instellen in de

eigenschappencontrole.

Zie www.adobe.com/go/vid0150_nl voor een zelfstudie over het toevoegen van Flash-inhoud aan webpagina's.

Zie ook

“Werken met Flash” op pagina 365

“Een SWF-bestand van Dreamweaver bewerken in Flash” op pagina 365

“Shockwave-films invoegen” op pagina 262

“Flash-videoinhoud toevoegen” op pagina 254

Een SWF-bestand (Flash-inhoud) invoegen

1 Plaats in de ontwerpweergave van het documentvenster de invoegpositie op de plaats waar u de inhoud wilt invoegen en

ga vervolgens op een van de volgende manieren te werk:

• Ga naar de categorie Algemeen van de invoegbalk, selecteer Media en klik op het pictogram Flash .

• Selecteer Invoegen > Media >Flash.

2 Selecteer een Flash-bestand (.swf) in het dialoogvenster dat wordt weergegeven.

Er wordt een voorlopig Flash-object in het documentvenster geplaatst (geen Flash-knop of -tekstobject).

Een voorbeeld van Flash-inhoud bekijken in het documentvenster

1 Klik in het documentvenster op het voorlopige Flash-object om de Flash-inhoud te selecteren waarvan u een voorbeeld

wilt bekijken.

2 Klik in de eigenschappencontrole op de knop Afspelen. Klik op Stoppen om het voorbeeld te beëindigen. U kunt ook

een voorbeeld in de browser bekijken van de Flash-inhoud door op F12 te drukken.

Als u alle Flash-inhoud op een pagina wilt bekijken, drukt u op Control+Alt+Shift+P (Windows) of

Shift+Option+Command+P (Macintosh). Alle Flash-objecten en SWF-bestanden worden ingesteld op Afspelen.

Flash- en Shockwave-filmeigenschappen instellen

Voor de beste resultaten in zowel Internet Explorer als Netscape Navigator, voegt Dreamweaver Flash- en Shockwave-films

in met zowel de

object- als de embed-tags. (De object-tag is door Microsoft gedefinieerd voor ActiveX-

besturingselementen.

embed is door Netscape Navigator gedefinieerd voor invoegtoepassingen.) U kunt de volgende

eigenschappen weergeven in de eigenschappencontrole door een Flash SWF-bestand of een Shockwave-film te selecteren.

❖ Selecteer een Flash SWF-bestand of een Shockwave-film en stel de opties in de eigenschappencontrole in. (Als u alle

eigenschappen van een Flash SWF-bestand wilt zien, klikt u op de uitvouwpijl in de rechterbenedenhoek van de

eigenschappencontrole.)

Naam Hiermee geeft u een naam op waarmee de film wordt aangeduid voor scripts. Typ een naam in het tekstvak zonder

label helemaal links in de eigenschappencontrole.

B en H De breedte en hoogte van de film in pixels.

Bestand Het pad naar het Flash- of Shockwave-bestand. Klik op het mappictogram om naar een bestand te bladeren of typ

een pad.

Bron Het pad naar een Flash-brondocument (FLS), als Dreamweaver en Flash beide op uw computer zijn geïnstalleerd.

Voor het bewerken van een Flash-bestand (SWF), werkt u het brondocument van de film bij.

DREAMWEAVER CS3

Handboek

247

Bewerken Hiermee start u Flash zodat u een FLA-bestand kunt bijwerken (een bestand dat is gemaakt in het

hulpprogramma voor het maken van Flash-objecten). Deze optie is uitgeschakeld als Flash niet op uw computer is geladen.

Grootte opnieuw instellen Hiermee herstelt u de oorspronkelijke grootte van de geselecteerde film.

Lus Als deze optie is geselecteerd, wordt de film voortdurend afgespeeld. Als de optie is uitgeschakeld, wordt de film één

keer afgespeeld.

Automatisch afspelen Als deze optie is geselecteerd, wordt de film automatisch afgespeeld als de pagina wordt geladen.

V-ruimte en H-ruimte Het aantal pixels witruimte boven, onder en aan weerszijden van de film.

Kwaliteit Hiermee wordt anti-aliasing beheerd tijdens het afspelen van de film. Een film ziet er beter uit met een hogere

instelling, maar er is dan een snellere processor nodig voor goede weergave op het scherm. Bij Laag wordt snelheid

benadrukt en niet uiterlijk, en bij Hoog wordt uiterlijk benadrukt en niet snelheid. Bij Automatisch laag wordt eerst

snelheid benadrukt, maar wordt het uiterlijk verbeterd wanneer dat mogelijk is. Met Automatisch hoog worden eerst beide

kwaliteiten benadrukt, maar wordt zo nodig uiterlijk opgeofferd in het voordeel van snelheid.

Schalen Hiermee wordt bepaald hoe de film past in de afmetingen die zijn ingesteld in de tekstvakken voor breedte en

hoogte. Met Standaardinstelling wordt de hele film weergegeven.

Geen rand Hiermee wordt de film in de ingestelde afmetingen gepast, zodat er geen randen worden weergegeven en de

oorspronkelijke grootteverhouding behouden blijft.

Passend maken Hiermee wordt de film geschaald naar de ingestelde afmetingen, ongeacht de grootteverhouding.

Uitlijnen Hiermee wordt bepaald hoe de film wordt uitgelijnd op de pagina.

Achtergrond Hiermee wordt een achtergrondkleur voor het filmgebied opgegeven. Deze kleur wordt ook weergegeven als

de film niet wordt afgespeeld (tijdens het laden en na het afspelen).

Parameters Hiermee wordt een dialoogvenster geopend waarin u extra parameters kunt invoeren die aan de film moeten

worden doorgegeven. De film moet geschikt zijn voor deze aanvullende parameters.

Een Flash-knop maken en invoegen

U kunt Flash-knoppen maken en in documenten invoegen vanuit de ontwerpweergave of de codeweergave. U hoeft

hiervoor Flash niet geïnstalleerd te hebben. Het Flash-knopobject is een knop die is gebaseerd op een Flash-sjabloon en kan

worden bijgewerkt.

Opmerking: U moet uw document opslaan voordat u een Flash-knop of tekstobject invoegt.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de Flash-knop wilt invoegen.

2 Ga op een van de volgende manieren te werk om het dialoogvenster Flash-object invoegen te openen.

• Ga naar de categorie Algemeen van de invoegbalk, selecteer Media en klik op het pictogram Flash-knop .

• Selecteer Invoegen > Media >Flash-knop.

3 Vul het dialoogvenster Flash-knop invoegen in en klik op Toepassen of OK om de Flash-knop in te voegen in het

documentvenster.

Als u een voorbeeld van de knop wilt bekijken in de ontwerpweergave, klikt u op Toepassen. Het dialoogvenster blijft

geopend en u kunt een voorbeeld van de knop bekijken in het document.

Een Flash-knopobject wijzigen

U kunt de eigenschappen en inhoud van een Flash-knopobject wijzigen.

De eigenschappencontrole geeft de eigenschappen van de Flash-knop weer. Met de eigenschappencontrole kunt u de

fysieke HTML-kenmerken van de knop opgeven, zoals breedte, hoogte en achtergrondkleur. (Klik op de uitvouwpijl in de

rechterbenedenhoek om meer eigenschappen te zien.)

Als u andere inhoudseigenschappen van een Flash-knop wilt wijzigen, zoals knoptekst en -kleur en de URL die door de

browser wordt geopend als er op de knop wordt geklikt, gebruikt u het dialoogvenster Flash-knop invoegen.

DREAMWEAVER CS3

Handboek

248

Zie ook

“Een Flash-tekstobject invoegen” op pagina 249

“Een afbeelding uitlijnen” op pagina 239

“De grootte van een afbeelding visueel wijzigen” op pagina 240

“Parameters gebruiken voor het beheren van mediaobjecten” op pagina 266

“Extensies toevoegen en beheren in Dreamweaver” op pagina 677

Flash-objecteigenschappen wijzigen in de eigenschappencontrole

1 Klik in het documentvenster op het Flash-knopobject om dit te selecteren.

2 Open de eigenschappencontrole, als deze nog niet is geopend. (Klik op de uitvouwpijl in de rechterbenedenhoek om

meer eigenschappen te zien.)

3 Stel de opties in de eigenschappencontrole in.

Naam Hiermee geeft u de naam op waarmee de knop wordt aangeduid voor scripts. Typ een naam in het tekstvak zonder

label helemaal links in de eigenschappencontrole.

B en H De breedte en hoogte van het object in pixels. (In de ontwerpweergave kunt u de grootte van het object gemakkelijk

wijzigen met de formaatgrepen. U kunt de oorspronkelijke grootte van het object herstellen door Grootte opnieuw instellen

te klikken in de eigenschappencontrole.)

Bestand Het pad naar het Flash-objectbestand. Klik op het mappictogram om naar een bestand te bladeren of typ een pad.

Bewerken Hiermee opent u het dialoogvenster Flash-object waarin u het geselecteerde Flash-object kunt bewerken.

Grootte opnieuw instellen Hiermee herstelt u de oorspronkelijke grootte van het geselecteerde object.

V-ruimte en H-ruimte Het aantal pixels witruimte boven, onder en aan weerszijden van de knop.

Kwaliteit Hier kunt u de quality-parameter instellen voor de object-tag en de embed-tag die de knop definiëren. Flash-

inhoud ziet er beter uit met een hogere instelling, maar er is dan een snellere processor nodig voor goede weergave op het

scherm. Bij Laag wordt snelheid benadrukt en niet uiterlijk, en bij Hoog wordt uiterlijk benadrukt en niet snelheid. Bij

Automatisch laag wordt eerst snelheid benadrukt, maar wordt het uiterlijk verbeterd wanneer dat mogelijk is. Met

Automatisch hoog worden eerst beide kwaliteiten benadrukt, maar wordt zo nodig uiterlijk opgeofferd in het voordeel van

snelheid.

Schalen Hier kunt u de scale-parameter instellen voor de object-tag en de embed-tag die de knop of het tekstobject

definiëren. Met deze parameter wordt gedefinieerd hoe de Flash-inhoud wordt weergegeven binnen het oppervlak dat met

de waarden

width en height is gedefinieerd voor het SWF-bestand. De opties zijn Standaardinstelling (Alles tonen), Geen

rand en Exact passend. Met Alles tonen wordt het hele SWF-bestand zichtbaar in het opgegeven gebied, waarbij de

grootteverhouding van het SWF-bestand behouden blijft en vervorming wordt voorkomen. Aan twee kanten van het SWF-

bestand kunnen randen van de achtergrondkleur zichtbaar zijn. Geen rand is vrijwel hetzelfde als Alles tonen, alleen

kunnen delen van het SWF-bestand zijn bijgesneden. Met Exact passend vult het gehele SWF-bestand het opgegeven

gebied, maar blijft de grootteverhouding van het SWF-bestand niet behouden en kan er vervorming ontstaan.

Uitlijnen Hiermee wordt gedefinieerd hoe het object wordt uitgelijnd op de pagina.

Achtergrond Hiermee wordt een achtergrondkleur voor het object opgegeven.

Afspelen/Stoppen Geeft een voorbeeld van het Flash-object weer in het documentvenster. Klik op de groene knop

Afspelen om het object te bekijken in de afspeelmodus en op de rode knop Stoppen om het afspelen van het object te

stoppen zodat u het kunt bewerken.

Parameters Hiermee wordt een dialoogvenster geopend waarin u extra parameters kunt invoeren.

Flash-objectinhoud wijzigen

1 Als u de inhoud wilt wijzigen, opent u het dialoogvenster Flash-knop invoegen op een van de volgende manieren:

• Dubbelklik op het Flash-knopobject.

• Klik op Bewerken in de eigenschappencontrole.

DREAMWEAVER CS3

Handboek

249

• Klik met de rechtermuisknop (Windows) of Control-klik (Macintosh) en selecteer Bewerken in het snelmenu.

2 Selecteer een knopstijl uit de lijst Stijl.

U kunt een voorbeeld van de knop bekijken in het tekstvak Monster. Klik op het voorbeeld om te zien hoe het object in de

browser werkt.

Opmerking: Tijdens het definiëren van de Flash-knop (als u bijvoorbeeld de opties voor tekst of lettertypen wijzigt), wordt het

tekstvak Monster niet automatisch bijgewerkt met de wijzigingen. Deze wijzigingen worden weergegeven als u het

dialoogvenster sluit en de knop bekijkt in de ontwerpweergave.

3 (Optioneel) Typ in het tekstvak Knoptekst de tekst die u wilt weergeven.

Dit tekstvak accepteert alleen wijzigingen als voor de geselecteerde knop een parameter {Button Text} is gedefinieerd. Dit

wordt aangegeven in het tekstvak Monster. De tekst die u typt, vervangt de {Button Text} als u een voorbeeld van het

bestand bekijkt.

4 Selecteer het lettertype voor de knoptekst in het menu Lettertype.

Als het standaardlettertype voor een knop niet beschikbaar is op uw systeem, selecteert u een ander lettertype uit het menu.

In het tekstvak Monster wordt het lettertype niet weergegeven, maar u kunt op Toepassen klikken om de knop in te voegen

in de pagina zodat u de tekst kunt bekijken.

5 Voer in het tekstvak Grootte een numerieke waarde voor de tekengrootte in.

6 (Optioneel) Voer in het tekstvak Koppeling een documentrelatieve of een absolute koppeling voor de knop in.

Dit is de URL die in de browser wordt geopend als de bezoeker op de knop klikt.

7 (Optioneel) Geef in het tekstvak Doel de locatie op waarin het gekoppelde document wordt geopend. U kunt in het pop-

upmenukiezenvooreenframeofeenvenster. FramenamenwordenalleenweergegevenalshetFlash-objectwordtbewerkt

binnen een frameset.

8 (Optioneel) Stel in het tekstvak Achtergrondkleur de achtergrondkleur voor het Flash SWF-bestand in. Gebruik de

kleurkiezer of typ een hexadecimale waarde (bijvoorbeeld #FFFFFF)/

9 Typ in het tekstvak Opslaan als een bestandsnaam waarmee u het nieuwe SWF-bestand wilt opslaan.

U kunt de standaardbestandsnaam gebruiken (bijvoorbeeld knop1.swf) of een nieuwe naam typen. Als het bestand een

documentrelatieve koppeling bevat, moet u het bestand opslaan in dezelfde map als het huidige HTML-document, zodat

de documentrelatieve koppelingen behouden blijven.

10 Klik op Meer stijlen ophalen om naar de website van Adobe Exchange te gaan en meer knopstijlen te downloaden.

11 Klik op Toepassen of OK om de Flash-knop in te voegen in het documentvenster.

Selecteer Toepassen om wijzigingen weer te geven in de ontwerpweergave terwijl het dialoogvenster geopend blijft. Op deze

manier kunt u wijzigingen in de knop blijven aanbrengen.

Een voorbeeld van een Flash-knopobject in het document bekijken

U kunt een voorbeeld van een Flash-knop bekijken in het documentvenster van Dreamweaver. Het is ook een goed idee om

uw document te bekijken in de browser om te zien hoe de Flash-knop eruit ziet.

1 Selecteer in de ontwerpweergave het Flash-knopobject in het document.

2 Klik in de eigenschappencontrole op Afspelen.

3 Klik op Stoppen om het voorbeeld te beëindigen.

Opmerking: U kunt het Flash-knopobject niet bewerken terwijl het wordt afgespeeld.

Een Flash-tekstobject invoegen

Met het Flash-tekstobject kunt u een Flash SWF-bestand dat alleen tekst bevat maken en invoegen. Zo kunt u een kleine,

vectorgrafische film maken met de lettertypen en tekst van uw keuze.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de Flash-tekst wilt invoegen.

DREAMWEAVER CS3

Handboek

250

2 Ga op een van de volgende manieren te werk om het dialoogvenster Flash-tekst invoegen te openen.

• Ga naar de categorie Algemeen van de invoegbalk, selecteer Media en klik op het pictogram Flash-tekst.

• Selecteer Invoegen > Media >Flash-tekst.

3 Vul het dialoogvenster Flash-tekst invoegen in en klik op Toepassen of OK om de Flash-tekst in te voegen in het

documentvenster.

Als u op Toepassen klikt, blijft het dialoogvenster geopend en kunt u een voorbeeld van de tekst bekijken in het document.

Als u het Flash-tekstobject wilt wijzigen of afspelen, gebruikt u dezelfde procedure als voor een Flash-knop.

Zie ook

“Een Flash-knopobject wijzigen” op pagina 247

“Werken met Flash” op pagina 365

Flash-elementen downloaden en installeren

Als u Flash-elementen wilt gebruiken in uw webpagina's, moet u de elementen eerst met Adobe® Extensiebeheer toevoegen

aan Dreamweaver. Extensiebeheer is een afzonderlijke toepassing waarmee u extensies kunt installeren en beheren in

Adobe-toepassingen. Start Extensiebeheer vanuit Dreamweaver met de opdracht Opdrachten > Extensies beheren.

Voor de nieuwste Flash-elementen voor Dreamweaver gaat u naar de website van Adobe Exchange op

www.adobe.com/go/dreamweaver_exchange_nl. Op die site kunt u zich aanmelden en vervolgens Flash-elementen en

andere Dreamweaver-extensies downloaden (vaak gratis), deelnemen aan discussiegroepen, gebruikersbeoordelingen en -

besprekingen bekijken en Extensiebeheer installeren en gebruiken. U moet Extensiebeheer installeren voordat u nieuwe

Flash-elementen of andere Dreamweaver-extensies kunt installeren.

U kunt Extensiebeheer installeren voor het installeren van Flash-elementen (en andere Dreamweaver-extensies).

Zie ook

“Extensies toevoegen en beheren in Dreamweaver” op pagina 677

Flash-elementen invoegen

Met Dreamweaver kunt u Flash-elementen invoegen in uw documenten. Met Flash-elementen kunt u snel en gemakkelijk

Rich Internet-toepassingen bouwen met vooraf gebouwde elementen.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u een Flash-element wilt invoegen en ga vervolgens op

een van de volgende manier te werk:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het Flash-element dat u wilt

invoegen.

• Selecteer Invoegen > Media > naam Flash-element.

Dreamweaver Er wordt één Flash-element met de naam Afbeeldingsviewer opgenomen.

Het dialoogvenster Flash-element opslaan verschijnt.

2 Typ een bestandsnaam voor het Flash-element en sla het bestand op een geschikte locatie binnen de site op.

3 Klik op OK.

Het voorlopige Flash-element wordt weergegeven in het document. U kunt de eigenschappen van het Flash-element

wijzigen met de tag- en eigenschappencontrole.

4 Selecteer Bestand > Voorvertoning in browser om een voorbeeld van het Flash-element te bekijken.

Flash-elementen bewerken

U bewerkt kenmerken van Flash-elementen met de tag- en eigenschappencontrole.

DREAMWEAVER CS3

Handboek

251

In de tagcontrole en de eigenschappencontrole kunt u de kenmerken van een Flash-onderdeel weergeven en bewerken. In

de tagcontrole kunt u aanpasbare kenmerken (parameters) weergeven en bewerken die betrekking hebben op een bepaald

onderdeel. In de eigenschappencontrole kunt u de hoogte, breedte en SRC-kenmerken van een Flash-element wijzigen, en

beschikt u over een manier om het Flash-element te bekijken in de ontwerpweergave.

1 Voer een van de volgende handelingen uit in het documentvenster:

• Selecteer het Flash-element in de ontwerpweergave.

• Klik in de codeweergave ergens in de naam van een Flash-inhoud of in de inhoud ervan.

2 Open de tagcontrole (Venster > Tagcontrole).

3 Bewerk de kenmerken van het Flash-element met de tagcontrole en de eigenschappencontrole.

• Typ een nieuwe waarde voor het kenmerk in de kolom met kenmerkwaarden, rechts van de naam van het kenmerk.

• Als u de waarde van een kenmerk wilt wijzigen, selecteert u de waarde en bewerkt u deze.

• Als u een waarde wilt toevoegen voor een kenmerk zonder waarde, klikt u in de kolom met kenmerkwaarden rechts van

het attribuut en voegt u een waarde toe (zie de volgende procedure).

• Als het kenmerk een URL-waarde heeft, typt u de URL.

• Als het kenmerk voorgedefinieerde waarden gebruikt, selecteert u een waarde in het pop-upmenu (of de kleurkiezer)

rechts van de waardekolom.

• Als het kenmerk een waarde krijgt uit een bron met dynamische inhoud (zoals een database), klikt u op de knop

Dynamische gegevens, rechts van de waardekolom. Selecteer een bron.

4 Druk op Enter (Windows) of Return (Macintosh) of klik elders in de tagcontrole om de tag in het document bij te

werken.

Zie ook

“Bronnen met dynamische inhoud definiëren” op pagina 521

Het Flash-element Afbeeldingsviewer gebruiken

Adobe Dreamweaver CS3 bevat een Flash-element dat u op uw pagina's kunt gebruiken: een Flash-afbeeldingsviewer die

ook als webfotoalbum kan fungeren.

De Afbeeldingsviewer is een in grootte instelbare toepassing voor het laden en weergeven van reeksen JPEG- of SWF-

afbeeldingen. U definieert een lijst afbeeldingen evenals een koppeling en bijschrift voor elke afbeelding.

Gebruikers kunnen afbeeldingen met de knoppen Vorige en Volgende in volgorde bekijken, of naar een specifieke

afbeelding gaan door het nummer van de afbeelding in te voeren. U kunt de afbeeldingen zo instellen dat ze als een

diavoorstelling worden afgespeeld.

Opmerking: Bezoekers van de website moeten Flash® Player 7 of hoger hebben geïnstalleerd om afbeeldingsviewers op de

pagina's te kunnen bekijken.

1 Plaats de invoegpositie op de pagina waar u de Afbeeldingsviewer wilt weergeven en kies Invoegen > Media >

Afbeeldingsviewer.

2 Blader in het dialoogvenster Flash-element opslaan naar een locatie op uw site waar u het element wilt opslaan. Voer een

naam in en klik op Opslaan.

Opmerking: Het is verstandig het Flash-element op dezelfde Dreamweaver-site op te slaan als de pagina waaraan u de

Afbeeldingsviewer toevoegt.

De plaatsaanduiding van het Flash-element verschijnt op de pagina en de tagcontrole wordt geopend.

3 Selecteer de plaatsaanduiding van het Flash-element als deze nog niet is geselecteerd.

4 Klik in de tagcontrole (Venster > Tagcontrole) op het veld naast de parameter

imageURLs en klik op het pictogram

Arraywaarden wijzigen aan het einde van de regel.

DREAMWEAVER CS3

Handboek

252

5 Klik in het dialoogvenster Array imageURLs bewerken op de minknop (-) om plaatsaanduidingselementen te

verwijderen. Als u afbeeldingen wilt toevoegen, klikt u op de plusknop (+), vervolgens op het mappictogram naast de regel

met lege waarden die wordt weergegeven, en selecteert u de afbeelding die u wilt toevoegen. U kunt JPEG- of SWF-

bestanden toevoegen.

Opmerking: Het is verstandig bestanden te gebruiken die zich op dezelfde Dreamweaver-site bevinden als de pagina waaraan

u de Afbeeldingsviewer toevoegt.

6 Klik op OK om het dialoogvenster Array imageURLs bewerken te sluiten.

7 (Optioneel) Gebruik de tagcontrole als u andere parameters voor de Afbeeldingsviewer wilt instellen.

Opmerking: UkuntookeigenschappenvoordeAfbeeldingsviewerinstellenindeeigenschappencontrole.Voormeerinformatie

selecteert u het Flash-element en klikt u op de knop Help in de eigenschappencontrole.

8 Terwijl de plaatsaanduiding voor de Afbeeldingsviewer is geselecteerd, klikt u op de knop Afspelen in de uitgevouwen

eigenschappencontrole om de Afbeeldingsviewer te starten, en gebruikt u de volgende besturingselementen van de

Afbeeldingsviewer om afbeeldingen weer te geven:

• Klik op de knop Volgende of Vorige om afbeeldingen sequentieel te bekijken.

• Voer een nummer in het tekstvak in om naar een specifieke afbeelding te gaan.

• Klik op de knop Afspelen om de afbeeldingen als een diapresentatie weer te geven. Klik op de knop Stoppen om de

diapresentatie te stoppen.

9 Klik op de knop Stoppen in de uitgevouwen eigenschappencontrole als u het afspelen van de Afbeeldingsviewer wilt

stoppen.

Parameters van de Afbeeldingsviewer

Parameter Beschrijving

Achtergrondkleur Hiermee bepaalt u de achtergrondkleur.

Kleur kader Hiermee bepaalt u de kleur van de rand rond uw

afbeeldingen. Stel de Kader tonen-parameter in op Jaom

de rand te zien.

Kader tonen Geeft aan of een rand al dan niet rond elke afbeelding

verschijnt.

Breedte kader Geeft de grootte, in pixels, van de rand rond elke afbeel

ding.

Kleur bijschrift Geeft de kleur van de afbeeldingsbijschriften in

Afbeeldingsbijschriften.

Lettertype bijschrift Geeft het lettertype van de afbeeldingsbijschriften in

Afbeeldingsbijschriften.

Formaat bijschriften Geeft de puntgrootte van de afbeeldingsbijschriften in

Afbeeldingsbijschriften.

Afbeeldingbijschriften Bevat de bijschriften voor elke afbeelding die is opgegeven

in URL's afbeeldingen. Bijschriften kunnen voor

bepaa

lde afbeeldingen, alle afbeeldingen of geen enkele

afbeelding worden gebruikt.

Koppelingen afbeeldingen Bevat een URL voor elke afbeelding die is opgegeven in

URL's afbeeldingen. URL-koppelingen kunnen voor

bepaalde afbeeldingen, alle afbeeldingen of geen enkele

afbeel

ding worden gebruikt.

URL's afbeeldingen Bevat de locatie van de afbeeldingen die worden

weergegeven in de Afbeeldingsviewer. Alleen niet-

progressieve JPEG- of SWF-bestanden mogen worden

gebruikt.

DREAMWEAVER CS3

Handboek

253

FlashPaper-documenten invoegen

U kunt Adobe® FlashPaper™-documenten invoegen in uw webpagina's. Als een pagina met het FlashPaper-document

wordt geopend in een browser, kan de gebruiker door alle pagina's in het FlashPaper-document bladeren zonder dat er

nieuwe webpagina's moeten worden geladen. De gebruiker kan ook in het document zoeken, het afdrukken en erop in- of

uitzoomen.

Ga naar de Adobe-website op www.adobe.com/go/flashpaper_nl voor meer informatie over FlashPaper.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u het FlashPaper-document wilt weergeven op de

pagina en selecteer Invoegen > Media > FlashPaper.

2 Blader in het dialoogvenster FlashPaper invoegen naar een FlashPaper-document en selecteer dit.

3 Als u dat wilt, kunt u de afmetingen van het FlashPaper-object op de webpagina opgeven door een breedte en hoogte te

typen in pixels. FlashPaper schaalt het document zodat het bij de breedte past.

4 Klik op OK om het document in te voegen in de pagina.

Omdat een FlashPaper-document een Flash-object is, wordt een tijdelijk Flash-object weergegeven op de pagina.

5 Als u een voorbeeld wilt bekijken van het FlashPaper-document, klikt u op het voorlopige object en klikt u vervolgens

op de knop Afspelen in de eigenschappencontrole.

6 Klik op Stoppen om het voorbeeld te beëindigen. U kunt ook een voorbeeld in de browser bekijken van het document

door op F12 te drukken. De werkbalk FlashPaper is helemaal functioneel in de browser.

Als u alle Flash-inhoud op een pagina wilt bekijken, drukt u op Control+Alt+Shift+P (Windows) of

Shift+Option+Command+P (Macintosh). Alle Flash-objecten en SWF-bestanden worden ingesteld op Afspelen.

7 Stel desgewenst andere eigenschappen in in de eigenschappencontrole.

Doel afbeeldingskoppeling Geeft het browservenster op waarin u de URL's worden

geladen die zijn opgegeven in URL-koppelingen Deze

parameter kan worden ingesteldop_blank, _self, _top

of _parent.

Besturingselementen tonen Geeft aan of de besturingselementen van de

Afbeeldingsviewer worden weergegeven wanneer de

gebruiker een Flash-element

gebruikt.

Automatisch afspelen dia's Bepaalt of de afbeeldingen al dan niet in een diavoorstelling

worden afgespeeld. Als dititem op waar is ingesteld,worden

de afbeeldingen in een diavoorstelling afgespeeldvanzodra

de eerste afbeelding is geladen.

Vertraging dia's Geeft de wachttijd in seconden tussen elke afbeelding aan,

wanneer de knop Afspelen wordt ingedrukt of wanneer

Automatisch afspelen is ingeschakeld. Hetis mogel

ijk

dat afbeeldingen minder vaak wisselen dan in deze

parameter is opgegeven, als ze langer moeten laden

Lus dia's Geeft aan dat de diavoorstelling met de afbeeldingen steeds

opnieuw wordt afgespeeld.

titel Geeft de titel die bovenaan in de Afbeeldingsviewer wordt

weergegeven.

Kleur titel Geeft de kleur van de titel in titel.

Lettertype titel Geeft het

lettertype voor de titel van de Afbeeldingsviewer

in titel.

Formaat titel Geeft de puntgrootte voor de titel van de Afbeeldingsviewer

in titel.

Type overgang Geeft aan hoe de afbeeldingen in de Afbeeldingsviewer

verschijnen. Kies uit verschillende laadmogelijkheden.

Parameter Beschrijving

DREAMWEAVER CS3

Handboek

254

Als Flash-object gebruikt het FlashPaper-object de eigenschappencontrole van het Flash-object. Klik op de knop Help in

de eigenschappencontrole voor informatie over het instellen van de eigenschappen.

Flash-videoinhoud toevoegen

Flash-video invoegen

U kunt gemakkelijk Flash-video-inhoud invoegen in uw webpagina's zonder het hulpprogramma voor het maken van

Flash-objecten te gebruiken. U hebt een gecodeerd Flash-videobestand (FLV) nodig voordat u begint.

Dreamweaver voegt het Flash-video-onderdeel in. Als dit onderdeel wordt bekeken in een browser, wordt de inhoud van

de door u geselecteerde Flash-video-inhoud erin weergegeven, samen met een aantal besturingselementen voor het

afspelen.

In Dreamweaver hebt u de volgende opties voor het afspelen van Flash-video voor de bezoekers van uw site:

Progressieve downloadvideo Hiermee wordt het Flash-videobestand (FLV) gedownload naar de vaste schijf van de

bezoeker, waarna het wordt afgespeeld. Anders dan bij traditionele methoden ("downloaden en afspelen) voor het afspelen

van video's, kan bij progressief downloaden als worden begonnen met het afspelen van het videobestand voordat het

helemaal is gedownload.

Streaming video Hiermee wordt de Flash-video-inhoud gestroomd en op een webpagina afgespeeld na een korte

bufferperiode die zorgt voor ononderbroken afspelen. Om streaming video mogelijk te maken op uw webpagina's, hebt u

toegang nodig tot Adobe® Flash® Media Server.

U hebt een gecodeerd Flash-videobestand (FLV) nodig voordat u dit in Dreamweaver kunt gebruiken. U kunt

videobestanden invoegen die zijn gemaakt met twee soorten codecs (technologieën voor compressie/decompressie):

Sorenson Squeeze en On2. Sorenson Squeeze and On2.

• AlsuuwvideohebtgemaaktmetdeSorensonSqueeze-codec,hebbenbezoekersvandesiteFlash®Player7vanAdobe

of hoger nodig voor het afspelen van progressief gedownloade video en Flash Player 6.0.79 of hoger voor het afspelen

van streaming video.

• Als u de video hebt gemaakt met de On2-codec, hebben bezoekers van de site Flash Player 8 of hoger nodig.

Nadat u een Flash-videobestand hebt ingevoegd in een pagina, kunt u code invoegen in de pagina waarmee wordt

onderzocht of de gebruiker de juiste versie van Flash Player heeft voor het weergeven van de Flash-video. Als ze niet de

juiste versie hebben, wordt ze gevraagd om de laatste versie van Flash Player te downloaden.

Ga naar het Flash Video Developer Center op www.adobe.com/go/flv_devcenter_nl voor meer informatie over Flash-

video.

DREAMWEAVER CS3

Handboek

255

Een Flash-video invoegen

1 Selecteer Invoegen > Media >Flash-video.

2 Selecteer in het dialoogvenster Flash-video invoegen de optie Progressieve downloadvideo of Streaming video uit het

pop-upmenu Type video.

3 Vul de overige opties in het dialoogvenster in en klik op OK.

Opties instellen voor progressieve downloadvideo's

In het dialoogvenster Flash-video invoegen kunt u opties instellen voor het via progressief downloaden afspelen van een

Flash-videobestand (FLV) dat is ingevoegd in een webpagina.

1 Selecteer Invoegen > Media > Flash-video (of klik op het pictogram Flash-video in de invoegbalk Algemeen).

2 Selecteer in het dialoogvenster Flash-video invoegen de optie Progressieve downloadvideo uit het menu Type video.

3 Geef de volgende opties op:

URL Een relatief of absoluut pad naar het FLV-bestand. Als u een relatief pad wilt opgeven (bijvoorbeeld

mijnpad/mijnvideo.flv), klikt u op de knop Bladeren, bladert u naar het FLV-bestand en selecteert u het bestand. Als u een

absoluut pad wilt opgeven, typt u de URL (bijvoorbeeld http://www.voorbeeld.com/mijnvideo.flv) van het FLV-bestand.

Opmerking: De videospeler werkt alleen goed als het FLV-bestand metagegevens bevat. FLV-bestanden die zijn gemaakt met

Flash Communication Server 1.5.2, FLV Exporter versie 1.2 en Sorenson Squeeze 4.0 bevatten automatisch metagegevens.

Op de Macintosh moet u een absoluut pad gebruiken als u verwijst naar FLV-bestanden in mappen die twee of meer niveaus

verwijderd zijn van het HTML-bestand.

Skin Hiermee wordt de weergave van het Flash-video-onderdeel opgegeven. Er wordteenvoorbeeldvandegeselecteerde

skin weergegeven onder het pop-upvenster Skin.

Breedte De breedte van het FLV-bestand in pixels. Als u wilt dat de exacte breedte van het FLV-bestand wordt bepaald door

Dreamweaver, klikt u op de knop Grootte detecteren. Als Dreamweaver de breedte niet kan bepalen, moet u een waarde

typen voor de breedte.

Hoogte De hoogte van het FLV-bestand in pixels. Als u wilt dat de exacte hoogte van het FLV-bestand wordt bepaald door

Dreamweaver, klikt u op de knop Grootte detecteren. Als Dreamweaver de hoogte niet kan bepalen, moet u een waarde

typen voor de hoogte.

Opmerking: Totaal met skin is de breedte en hoogte van het FLV-bestand plus de breedte en hoogte van de geselecteerde skin.

Beperken Hiermee behoudt u dezelfde verhouding tussen de breedte en hoogte van het Flash-video-onderdeel. Deze optie

is standaard geselecteerd.

Automatisch afspelen Geeft aan of de video moet worden afgespeeld als de webpagina wordt geopend.

Automatisch terugspoelen Geeft aan of het besturingselement voor afspelen terugkeert naar de beginpositie nadat de video

helemaal is afgespeeld.

Vraag gebruikers, indien nodig, of ze Flash Player willen downloaden Hiermee wordt code in de pagina ingevoegd

waarmee wordt gecontroleerd of de versie van Flash Player aanwezig is die nodig is om de Flash-video te bekijken. Als dit

niet het geval is, wordt de gebruiker gevraagd de nieuwste versie van Flash Player te downloaden.

Bericht Het bericht dat wordt weergegeven als de gebruiker de nieuwste versie van Flash Player moet downloaden om de

Flash-video te kunnen bekijken.

4 Klik op OK om het dialoogvenster te sluiten en de Flash-video-inhoud toe te voegen aan uw webpagina.

Met de opdracht Flash-video invoegen worden een SWF-bestand voor de videospeler en een skin-SWF-bestand ingevoegd

die worden gebruikt om de inhoud van de Flash-video weer te geven op een webpagina. (Om de nieuwe bestanden te zien

moet u mogelijk op de knop Vernieuwen in het deelvenster Bestanden klikken.) Deze bestanden zijn opgeslagen in dezelfde

map als het HTML-bestand waaraan u Flash-video-inhoud toevoegt. Als u de HTML-pagina met Flash-video-inhoud

uploadt, worden deze bestanden geüpload als afhankelijke bestanden (als u tenminste op Ja klikt in het dialoogvenster

Afhankelijke bestanden plaatsen).

DREAMWEAVER CS3

Handboek

256

Opties instellen voor streaming video

In het dialoogvenster Flash-video invoegen kunt u opties instellenvoorhetviastreamingvideodownloadenvaneenFlash-

videobestand (FLV) dat is ingevoegd in een webpagina.

1 Selecteer Invoegen > Media > Flash-video (of klik op het pictogram Flash-video in de invoegbalk Algemeen).

2 Selecteer Streaming video uit het pop-upmenu Type video.

Server-URI De servernaam, toepassingsnaam en exemplaarnaam in de vorm

rtmp://www.voorbeeld.com/toepassingsnaam/exemplaarnaam.

Naam van stream De naam van het FLV-bestand dat u wilt afspelen (bijvoorbeeld mijnvideo.flv). De extensie lflv is

optioneel.

Opmerking: De videospeler werkt alleen goed als het FLV-bestand metagegevens bevat. FLV-bestanden die zijn gemaakt met

Flash® Communication Server 1.5.2, FLV Exporter versie 1.2 en Sorenson Squeeze 4.0 bevatten automatisch metagegevens.

Skin Hiermee wordt de weergave van het Flash-video-onderdeel opgegeven. Er wordteenvoorbeeldvandegeselecteerde

skin weergegeven onder het pop-upvenster Skin.

Breedte De breedte van het FLV-bestand in pixels. Als u wilt dat de exacte breedte van het FLV-bestand wordt bepaald door

Dreamweaver, klikt u op de knop Grootte detecteren. Als Dreamweaver de breedte niet kan bepalen, moet u een waarde

typen voor de breedte.

Hoogte De hoogte van het FLV-bestand in pixels. Als u wilt dat de exacte hoogte van het FLV-bestand wordt bepaald door

Dreamweaver, klikt u op de knop Grootte detecteren. Als Dreamweaver de hoogte niet kan bepalen, moet u een waarde

typen voor de hoogte.

Opmerking: Totaal met skin is de breedte en hoogte van het FLV-bestand plus de breedte en hoogte van de geselecteerde skin.

Beperken Hiermee behoudt u dezelfde verhouding tussen de breedte en hoogte van het Flash-video-onderdeel. Deze optie

is standaard geselecteerd.

Live video Geeft aan of de inhoud van de Flash-video live is. Als Live video is ingeschakeld, speelt Flash Player een live

video af die wordt gestreamed van Flash® Media Server. De naam van de live video is de naam die is opgegeven in het

tekstvak Naam van stream.

Opmerking: Als u Live video selecteert, wordt alleen de volumeregelaar weergegeven op de skin van het onderdeel, omdat u live

video niet kunt manipuleren. Bovendien hebben de opties Automatisch afspelen en Automatisch terugspoelen geen effect.

Automatisch afspelen Geeft aan of de video moet worden afgespeeld als de webpagina wordt geopend.

Automatisch terugspoelen Geeft aan of het besturingselement voor afspelen terugkeert naar de beginpositie nadat de video

helemaal is afgespeeld.

Buffertijd De tijd, in seconden, die moet worden gebruikt voor bufferen voordat wordt begonnen met het afspelen van de

video. De standaardbuffertijd is ingesteld op 0, zodat het afspelen van de video meteen begint zodra er op de knop Afspelen

wordt geklikt. (Als Automatisch afspelen is geselecteerd, wordt begonnen met het afspelen van de video zodra er

verbinding is gemaakt met de server.) U kunt een buffertijd instellen als u video afspeelt die een hogere bitsnelheid heeft

dan de verbindingssnelheid van de bezoeker van de site, of als er bandbreedte- of connectiviteitsproblemen kunnen

ontstaan door internetverkeer. Als u bijvoorbeeld 15 seconden video naar de webpagina wilt sturen voordat de webpagina

begint met het afspelen van de video, stelt u de buffertijd in op 15.

Vraag gebruikers, indien nodig, of ze Flash Player willen downloaden Hiermee wordt code in de pagina ingevoegd

waarmee wordt gecontroleerd of de versie van Flash Player aanwezig is die nodig is om de Flash-video te bekijken. Als dit

niet het geval is, wordt de gebruiker gevraagd de nieuwste versie van Flash Player te downloaden.

Bericht Het bericht dat wordt weergegeven als de gebruiker de nieuwste versie van Flash Player moet downloaden om de

Flash-video te kunnen bekijken.

3 Klik op OK om het dialoogvenster te sluiten en de Flash-video-inhoud toe te voegen aan uw webpagina.

Met de opdracht Flash-video invoegen worden een SWF-bestand voor de videospeler en een skin-SWF-bestand ingevoegd

die worden gebruikt om de Flash-video weer te geven op een webpagina. Met de opdracht wordt ook een bestand met de

naam main.asc gegenereerd, dat u moet uploaden naar de Flash Media Server. (Om de nieuwe bestanden te zien moet u

DREAMWEAVER CS3

Handboek

257

mogelijk op de knop Vernieuwen in het deelvenster Bestanden klikken.) Deze bestanden zijn opgeslagen in dezelfde map

als het HTML-bestand waaraan u Flash-video-inhoud toevoegt. Als u de HTML-pagina met Flash-video-inhoud uploadt.

moet u ook de SWF-bestanden uploaden naar uw webserver en het bestand main.asc naar uw Flash Media Server.

Opmerking: Als er al een bestand met de naam main.asc op uw server staat, moet u contact opnemen met de serverbeheerder

voordat u het bestand main.asc uploadt dat is gegenereerd met de opdracht Flash-video invoegen.

U kunt alle vereiste mediabestanden gemakkelijk uploaden door het voorlopige Flash-video-onderdeel te selecteren in het

documentvenster van Dreamweaver en vervolgens op de knop Media uploaden te klikken in de eigenschappencontrole

(Venster > Eigenschappen). Als u een lijst met vereiste bestanden wilt weergeven, klikt u op Vereiste bestanden tonen.

Opmerking: Met de knop Media uploaden wordt het HTML-bestand met de Flash-video-inhoud niet geüpload.

De Flash Player-versie detecteren voor het weergeven van de Flash-video

Als u een Flash-videobestand invoegt in uwpagina,kuntuookcodeinvoegenwaarmeewordtonderzochtofdegebruiker

de juiste versie van Flash Player heeft voor het weergeven van de Flash-video. Als ze niet de juiste versie hebben, wordt ze

gevraagd om de laatste versie van Flash Player te downloaden.

Afhankelijk van de codec die is gebruikt voor het maken van de video is er mogelijk een andere versie van Flash Player

nodig voor het weergeven van een Flash-video. Als de video is gemaakt met de Sorenson Squeeze-codec, hebben bezoekers

van de site Flash Player 7 of hoger nodig voor het afspelen van progressief gedownloade video en Flash Player 6.0.79 of

hoger voor het afspelen van streaming video. Als de video is gemaakt met de On2-codec, hebben bezoekers van de site

Flash Player 8 of hoger nodig.

Code invoegen waarmee de versie van Flash Player wordt gedetecteerd

1 AlsueenFlash-videoinvoegtineenpagina,selecteertudeoptie Vraag gebruikers, indien nodig, of ze Flash Player willen

downloaden in het dialoogvenster Flash-video invoegen.

Als de Flash-video al op de pagina staat, verwijdert u deze en voegt u de video opnieuw in waarbij u de optie selecteert.

Opmerking: Als u een andere Flash-video invoegt waarvoor een hogere versie van Flash Player nodig is dan voor de eerste

video, wordt de gebruiker via de detectiecode gevraagd die te downloaden.

2 Accepteer het standaardwaarschuwingsbericht of typ zelf een bericht.

Als u ervoor kiest de Flash-video van uw pagina te verwijderen, hebt u de detectiecode niet meer nodig. U kunt de code

verwijderen met Dreamweaver.

De code verwijderen waarmee de versie van Flash Player wordt gedetecteerd

❖

Selecteer Opdrachten > Flash-videodetectie verwijderen.

Een Flash-videocomponent bewerken of verwijderen

Als u de instellingen wilt wijzigen voor de Flash-video-inhoud op uw webpagina, moet u het voorlopige Flash-video-

onderdeel selecteren in het documentvenster van Dreamweaver en de eigenschappencontrole gebruiken, of moet u het

Flash-video-onderdeel verwijderen en het opnieuw invoegen met Invoegen > Media > Flash-video.

Het Flash-video-onderdeel bewerken

1 Selecteer het voorlopige Flash-video-onderdeel in het documentvenster van Dreamweaver door op het pictogram Flash-

video in het midden van het voorlopige onderdeel te klikken.

2 Open de eigenschappencontrole (Venster > Eigenschappen) en breng de gewenste wijzigingen aan.

Opmerking: U kunt met de eigenschappencontrole niet het type video wijzigen (bijvoorbeeld van progressief downloaden in

streamen). Als u het type video wilt wijzigen, moet u het Flash-video-onderdeel verwijderen en het opnieuw invoegen met

Invoegen > Media > Flash-video.

Het Flash-video-onderdeel verwijderen

❖

Selecteer het voorlopige Flash-video-onderdeel in het documentvenster van Dreamweaver en druk op Delete.

DREAMWEAVER CS3

Handboek

258

Geluid toevoegen

Geluidsbestandsindelingen

U kunt geluid toevoegen aan een webpagina. Er zijn verschillende typen geluidsbestanden en verschillende indelingen,

waaronder .wav, .midi en .mp3. Factoren die u in overweging kunt nemen bij het kiezen van een indeling en een methode

voor het toevoegen van geluid zijn het doel, uw publiek, de bestandsgrootte, de geluidskwaliteit en verschillen tussen

browsers.

Opmerking: Geluidsbestanden worden door verschillende browsers op zeer verschillende manieren verwerkt. Om deze

verwerking consequenter te maken, kunt u een geluidsbestand toevoegen aan een Flash SWF-bestand en vervolgens het SWF-

bestand insluiten.

In de volgende lijst worden de meer gebruikelijke geluidsbestandsindelingen beschreven, samen met enkele voordelen en

nadelen van elke indeling voor webontwerp.

.midi of .mid (Musical Instrument Digital Interface) Dit is een indeling voor instrumentale muziek. MIDI-bestanden

worden ondersteund door veel browsers en er is geen insteekmodule voor nodig. Hoewel de geluidskwaliteit erg goed is,

kan deze variëren afhankelijk van de geluidskaart van de bezoeker. Een klein MIDI-bestand is voldoende voor een lang

geluidsfragment. MIDI-bestanden kunnen niet worden opgenomen en moeten op een computer worden gemaakt met

speciale hardware en software.

.wav (Waveform Extension) Dit is een indeling van bestanden met een goede geluidskwaliteit, die worden ondersteund

door veel browsers en waarvoor geen insteekmodule nodig is. U kunt zelf WAV-bestanden opnemen van een cd, band,

microfoon, enzovoort. Doordat WAV-bestanden groot zijn, wordt u echter beperkt in de lengte van geluidsfragmenten die

u op webpagina's kunt gebruiken.

.aif (Audio Interchange File Format, of AIFF) De AIFF-indeling is een indeling die, zoals de WAV-indeling, een goede

geluidskwaliteit heeft, kan worden afgespeeld door de meeste browsers en waarvoor geen insteekmodule nodig is. U kunt

AIFF-bestanden ook opnemen van een cd, band, microfoon, enzovoort. Doordat WAV-bestanden groot zijn, wordt u

echter beperkt in de lengte van geluidsfragmenten die u op webpagina's kunt gebruiken.

.mp3 (Motion Picture Experts Group Audio, of MPEG-Audio Layer-3) Een gecomprimeerde indeling waardoor

geluidsbestanden aanzienlijk kleiner worden. De geluidskwaliteit is zeer goed: als een mp3-bestand goed is opgenomen en

gecomprimeerd, evenaart het de kwaliteit van een cd. Met de mp3-technologie kunt u het bestand 'streamen', zodat een

bezoeker niet met luisteren hoeft te wachten totdat het hele bestand is gedownload. MP3-bestanden zijn echter groter dan

Real Audio-bestanden, dus het downloaden van een heel nummer via een inbelverbinding (telefoonlijn) kan nog steeds

behoorlijk lang duren. Voor het afspelen van mp3-bestanden moeten bezoekers een extra toepassing of insteekmodule

downloaden en installeren, zoals QuickTime, Windows Media Player of RealPlayer.

.ra, .ram, .rpm, of Real Audio Dit is een indeling met een hoge comprimeergraad, met kleinere bestanden dan bij mp3.

Bestanden met hele nummers kunnen binnen een redelijke tijd worden gedownload. Omdat de bestanden vanaf een

normale webserver kunnen worden "gestreamd", kunnen bezoekers naar het geluid beginnen te luisteren voordat het

bestand helemaal is gedownload. Bezoekers moeten de toepassing of insteekmodule RealPlayer downloaden en installeren

om deze bestanden te kunnen afspelen.

.qt, .qtm, .mov of QuickTime Dit is een indeling voor audio en video die is ontwikkeld door Apple Computer. QuickTime

wordt geleverd bij Apple Macintosh-besturingssystemen en wordt gebruikt door de meeste Macintosh-toepassingen die

geluid, video of animatie gebruiken. Bestanden met de QuickTime-indeling kunnen ook worden afgespeeld op pc's, maar

dan is een speciaal QuickTime-stuurprogramma nodig. QuickTime ondersteunt de meeste coderingsindelingen,

waaronder Cinepak, JPEG en MPEG.

Opmerking: Naast de meer algemene indelingen die hierboven zijn beschreven, zijn er veel andere geluids- en

videobestandsindelingen beschikbaar op het web. Als u een mediabestandsindeling tegenkomt die u niet kent, kunt u proberen

bij de maker van de indeling informatie te vragen over hoe u het bestand het beste kunt gebruiken en implementeren.

Zie ook

“Mediaobjecten invoegen en bewerken” op pagina 259

DREAMWEAVER CS3

Handboek

259

Koppelen naar een geluidsbestand

Koppelen naar een geluidsbestand is een eenvoudige en effectieve manier om geluid toe te voegen aan een webpagina. Met

deze methode voor het opnemen van geluidsbestanden kunnen gebruikers kiezen of ze naar het bestand willen luisteren en

is het bestand beschikbaar voor een zo groot mogelijk publiek.

1 Selecteer de tekst of afbeelding die u wilt gebruiken als koppeling naar het geluidsbestand.

2 Klik in de eigenschappencontrole op het mappictogram naast het tekstvak Koppelen om naar het geluidsbestand te

bladeren, of typ het pad en de naam van het bestand in het tekstvak Koppelen.

Een geluidsbestand insluiten

Als u geluid insluit, wordt het geluid rechtstreeks in de pagina opgenomen, maar wordt het geluid alleen afgespeeld als

bezoekers van de site de juiste insteekmodule hebben voor het gekozen geluidsbestand. Sluit bestanden in als u het geluid

wilt gebruiken als achtergrondmuziek of als u wilt bepalen hoe hard het wordt afgespeeld, hoe de speler eruit ziet op de

pagina of wat de begin- en eindpunten van het geluidsbestand zijn.

Hou bij het opnemen van geluidsbestanden in webpagina's goed rekening met het juiste gebruik in de website en met hoe

bezoekers van de site deze mediabronnen gebruiken. Zorg altijd voor een besturingselement waarmee het afspelen van het

geluid kan worden ingeschakeld of uitgeschakeld, voor het geval bezoekers niet naar het geluid willen luisteren.

1 Plaats de invoegpositie in de ontwerpweergave op de plaats waar u het bestand wilt insluiten en ga vervolgens op een van

de volgende manier te werk:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram Insteekmodule uit

het pop-upmenu.

• Selecteer Invoegen > Media > Insteekmodule.

2 Klik in de eigenschappencontrole op het mappictogram naast het tekstvak Koppelen om naar het geluidsbestand te

bladeren, of typ het pad en de naam van het bestand in het tekstvak Koppelen.

3 Geef de breedte en hoogte op door de waarden in de desbetreffende tekstvakken te typen of door het formaat te wijzigen

van de voorlopige insteekmodule in het documentvenster.

Deze waarden bepalen de grootte waarmee de besturingselementen voor geluid worden weergegeven in de browser.

Zie ook

“Inhoud voor insteekmodules invoegen voor Netscape Navigator” op pagina 262

Andere mediaobjecten toevoegen

Mediaobjecten invoegen en bewerken

U kunt Flash SWF-bestanden of -objecten, QuickTime- of Shockwave-films, Java-applets, ActiveX-besturingselementen of

anderegeluids-ofvideo-objecteninvoegenineenDreamweaver-document.Alsutoegankelijkheidskenmerkenhebtingevoegd

voor een mediaobject, kunt u de toegankelijkheidskenmerken instellen en die waarden bewerken in de HTML-code.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u het object wilt invoegen.

2 Voeg het object in door een van de volgende handelingen uit te voeren:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram voor het type object

dat u wilt invoegen.

• Selecteer het desbetreffende object in het vervolgmenu Invoegen > Media.

• Als het object dat u wilt invoegen geen Flash-, Shockwave-, Applet- of Active X-object is, selecteert u Insteekmodule via

Invoegen > Media.

Er wordt een dialoogvenster weergegeven waarin u een bronbestand kunt selecteren en bepaalde parameters voor het

mediaobject kunt opgeven.

DREAMWEAVER CS3

Handboek

260

U kunt voorkomen dat dergelijke dialoogvensters worden weergegeven door Bewerken > Voorkeuren > Algemeen

(Windows) of Dreamweaver > Voorkeuren > Algemeen (Macintosh) te selecteren en de optie Dialoogvenster tonen bij het

invoegen van objecten uit te schakelen. Om een voorkeur te overschrijven die is ingesteld voor het weergeven van

dialoogvensters,houdtuControl(Windows)ofOption(Macintosh)ingedruktterwijluhetobjectinvoegt. (Alsubijvoorbeeld

een voorlopige aanduiding voor een Shockwave-film wilt invoegen zonder het bestand op te geven, houdt u Control of Option

ingedrukt en klikt u op de knop Shockwave in het pop-upmenu Media van de categorie Algemeen van de invoegbalk, of

selecteert u Invoegen > Media > Shockwave.)

3 Vul het dialoogvenster Bestand selecteren of Flash invoegen in en klik op OK.

Opmerking: Het dialoogvenster Toegankelijkheidskenmerken verschijnt als u in het dialoogvenster Bewerken > Voorkeuren

hebt gekozen om de kenmerken weer te geven wanneer u media invoegt.

4 Stel de toegankelijkheidskenmerken in.

Opmerking: U kunt ook mediaobjectkenmerken bewerken door het object te selecteren en de HTML-code te bewerken in de

codeweergave, of door met de rechtermuisknop te klikken (Windows) of te klikken terwijl u Control ingedrukt houdt

(Macintosh) en Tagcode bewerken te selecteren.

Titel Typ een titel voor het mediaobject.

Toegangstoets Typ een toetsenbordequivalent (één letter) in het tekstvak waarmee het formulierobject kan worden

geselecteerd in de browser. Hiermee kan een bezoeker van de site de Control-toets (Windows) samen met de toegangstoets

gebruiken voor toegang tot het object. Als u bijvoorbeeld B typt als toegangstoets, gebruikt u Control+B om het object te

selecteren in de browser.

Tabindex Typ een getal voor de tabvolgorde van het formulierobject. Het instellen van een tabvolgorde is handig wanneer

de pagina nog andere koppelingen en formulierobjecten bevat en de gebruiker deze in een specifieke volgorde moet

doorlopen. Als u de tabvolgorde instelt voor één object, moet u de tabvolgorde instellen voor alle objecten.

5 Klik op OK om het mediaobject in te voegen.

Opmerking: Als u op Annuleren klikt, verschijnt een voorlopig mediaobject in het document, maar worden er door

Dreamweaver geen toegankelijkheidstags of -kenmerken aan gekoppeld.

Als u een bronbestand wilt opgeven of afmetingen en andere parameters en kenmerken wilt instellen, gebruikt u de

eigenschappencontrole voor elk object. U kunt toegankelijkheidskenmerken bewerken voor een object.

Zie ook

“De werkomgeving optimaliseren voor het ontwerp van toegankelijke pagina's” op pagina 673

“Inhoud voor insteekmodules invoegen voor Netscape Navigator” op pagina 262

Een externe editor openen voor mediabestanden

U kunt vanuit Dreamweaver een externe editor openen voor het bewerken van de meeste mediabestanden. U kunt ook

opgeven welke editor door Dreamweaver moet worden geopend voor het bewerken van het bestand.

1 Zorg dat het mediabestandstype is gekoppeld aan een editor op uw systeem.

Als u wilt bepalen welke editor aan het bestandstype is gekoppeld, selecteert u Bewerken > Voorkeuren in Dreamweaver en

selecteert u Bestandstypen/editors in de lijst Categorie. Klik op de extensie van het bestand in de kolom Extensies om de

gekoppelde editor of editors weer te geven in de kolom Editors. U kunt wijzigen welke editor aan een bestandstype is

gekoppeld.

2 Dubbelklik op het mediabestand in het paneel Bestanden om het te openen in de externe editor.

De editor die wordt geopend als u dubbelklikt op het bestand in het paneel Bestanden, wordt de primaire editor genoemd.

Als u bijvoorbeeld op een afbeeldingsbestand dubbelklikt, wordt het bestand door Dreamweaver geopend in de primaire

externe afbeeldingseditor, zoals Adobe Fireworks.

DREAMWEAVER CS3

Handboek

261

3 Als u niet de primair externe editor wilt gebruiken voor het bewerken van het bestand, kunt u een andere editor op uw

computer gebruiken om het bestand te bewerken. Ga hiervoor op een van de volgende manieren te werk:

• Klik in het paneel Bestanden met de rechtermuisknop (Windows) of Control-klik (Macintosh) op de bestandsnaam en

selecteer Openen met uit het contextmenu.

• Klik in de ontwerpweergave met de rechtermuisknop (Windows) of Control-klik (Macintosh) op het media-element

binnen de huidige pagina en selecteer Bewerken met uit het contextmenu.

Opgeven welke editor moet worden gestart vanuit Dreamweaver

U kunt opgeven welke editor Dreamweaver moet gebruiken voor het bewerken van een bestandstype en bestandstypen

toevoegen of verwijderen die door Dreamweaver worden herkend.

Expliciet opgeven welke externe editors moeten worden geopend voor een bepaald bestandstype

1 Selecteer Bewerken > Voorkeuren en selecteer Bestandstypen/editors uit de lijst Categorie.

Bestandsnaamextensies, zoals .gif, .wav en .mpg, worden links onder Extensies weergegeven. Gekoppelde editors voor een

geselecteerde extensie worden rechts onder Editors weergegeven.

2 Selecteer de bestandstype-extensie in de lijst Extensies en ga op een van de volgende manieren te werk:

• Klik op de knop Plus (+) boven de lijst Editors en vul het dialoogvenster in dat wordt weergegeven om een nieuwe editor

te koppelen aan het bestandstype.

Selecteer bijvoorbeeld het toepassingspictogram voor Acrobat om dat te koppelen aan het bestandstype.

• Als u een editor de primaire editor voor een bestandstype wilt maken (de editor die wordt geopend als u dubbelklikt op

het bestandstype in het paneel Bestanden), selecteert u de editor in de lijst Editors en klikt u op Primair maken.

• Als u de koppeling tussen een editor en een bestandstype ongedaan wilt maken, selecteert u de editor in de lijst Editors

en klikt u op de knop Min (-) boven de lijst Editors.

Een nieuw bestandstype en een gekoppelde editor toevoegen

1 Klik op de knop Plus (+) boven de lijst Extensies en typ een bestandstype-extensie (inclusief de punt aan het begin van

de extensie) of verschillende verwante extensies gescheiden door spaties.

U kunt bijvoorbeeld

.xml .xsl invoeren als u de extensies wilt koppelen aan een XML-editor die op uw computer is

geïnstalleerd.

2 Selecteer een editor voor het bestandstype door op de knop Plus (+) boven de lijst Editors te klikken en het

dialoogvenster dat wordt weergegeven in te vullen.

Een bestandstype verwijderen

❖

Selecteer het bestandstype in de lijst Extensies en klik op de knop Min (-) boven de lijst Extensies.

Opmerking: U kunt het verwijderen van een bestandstype niet ongedaan maken, dus zorg dat u zeker weet dat u het wilt

verwijderen.

Ontwerpnotities gebruiken voor mediaobjecten

Zoals bij andere objecten in Dreamweaver kunt u Ontwerpnotities toevoegen aan een mediaobject. Ontwerpnotities zijn

notities die zijn gekoppeld aan een bepaald bestand en die worden opgeslagen in een afzonderlijk bestand. U kunt

Ontwerpnotities gebruiken om extra bestandsgegevens bij te houden die aan uw documenten zijn gekoppeld, zoals de

bestandsnamen van afbeeldingsbronnen en opmerkingen over de bestandsstatus.

1 Klik met de rechtermuisknop (Windows), of houd de Command-toets ingedrukt terwijl u op het object in het

documentvenster klikt.

Opmerking: U moet uw site definiëren voordat u Ontwerpnotities kunt toevoegen aan een object.

2 Selecteer Ontwerpnotities uit het contextmenu.

3 Typ de gewenste informatie in de ontwerpnotitie.

DREAMWEAVER CS3

Handboek

262

UkuntookvanuithetpaneelBestandeneenontwerpnotitietoevoegenaaneenmediaobjectdoorhetbestandteselecteren,

het contextmenu weer te geven en Ontwerpnotities te kiezen uit het contextmenu.

Zie ook

“Ontwerpnotities inschakelen en uitschakelen voor een site.” op pagina 99

“Bestandsgegevens opslaan in ontwerpnotities.” op pagina 98

Shockwave-films invoegen

U kunt Dreamweaver gebruiken om Shockwave-films in te voegen in uw documenten. Adobe® Shockwave®, een standaard

voor interactieve multimedia op het web, is een gecomprimeerde indeling waarmee mediabestanden die zijn gemaakt in

Macromedia® Director®, snel kunnen worden gedownload en afgespeeld door de meeste populaire browsers.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u een Shockwave-film wilt invoegen en ga vervolgens

op een van de volgende manier te werk:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram Shockwave uit

het pop-upmenu.

• Selecteer Invoegen > Media > Shockwave.

2 Selecteer een filmbestand in het dialoogvenster dat wordt weergegeven.

3 Typ in de eigenschappencontrole de breedte en hoogte van de film in de tekstvakken B en H.

Zie ook

“Flash-inhoud invoegen en een voorbeeld bekijken” op pagina 246

Video toevoegen (niet-Flash)

U kunt op verschillende manieren video met verschillende indelingen toevoegen aan uw webpagina. Video kan worden

gedownload naar de gebruiker of kan worden gestreamd zodat het tijdens het downloaden wordt afgespeeld.

1 Plaats het fragment in uw sitemap.

Deze fragmenten hebben vaak de bestandsindeling AVI of MPEG.

2 Maak een koppeling naar het fragment of sluit het fragment in op uw pagina.

Als u een koppeling wilt maken naar het fragment, typt u tekst voor de koppeling (bijvoorbeeld "Fragment downloaden"),

selecteert u de tekst en klikt u op het mappictogram in de eigenschappencontrole. Blader naar het videobestand en selecteer het.

Opmerking: De gebruiker moet een extra toepassing (een insteekmodule) downloaden voor het weergeven van algemene

streaming-indelingen, zoals Real Media, QuickTime en Windows Media.

Inhoud voor insteekmodules invoegen voor Netscape Navigator

U kunt inhoud, zoals een QuickTime-film voor een insteekmodule voor Netscape Navigator, maken en vervolgens met

Dreamweaver die inhoud invoegen in een HTML-document. Veel gebruikte insteekmodules zijn RealPlayer en

QuickTime. Voorbeelden van inhoudsbestanden zijn mp3-bestanden en QuickTime-films.

U kunt films en animaties die afhankelijk zijn van insteekmodules van Netscape Navigator rechtstreeks bekijken in de

ontwerpweergave van het documentvenster. U kunt alle insteekelementen in één keer afspelen om te zien hoe de pagina

eruit ziet voor de gebruiker, of u kunt elk element afzonderlijk afspelen om te controleren of u het juiste media-element hebt

ingesloten.

Opmerking: U kunt geen voorbeeld bekijken van films of animaties die afhankelijk zijn van ActiveX-besturingselementen.

NadatuinhoudvooreeninsteekmodulevoorNetscapeNavigatorhebtingevoegd,gebruiktudeeigenschappencontroleom

parameters in te stellen voor die inhoud. U kunt de volgende eigenschappen weergeven in de eigenschappencontrole door

een object voor een insteekmodule voor Netscape Navigator te selecteren.

DREAMWEAVER CS3

Handboek

263

Indeeigenschappencontrolewordenaanvankelijkedemeestgebruikteeigenschappenweergegeven. Klikopdeuitvouwpijl

in de rechterbenedenhoek om alle eigenschappen te zien.

Inhoud voor insteekmodules invoegen voor Netscape Navigator en de eigenschappen instellen

1 Plaats in de ontwerpweergave van het documentvenster de invoegpositie op de plaats waar u de inhoud wilt invoegen en

ga vervolgens op een van de volgende manieren te werk:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram Insteekmodule

uit het menu.

• Selecteer Invoegen > Media > Insteekmodule.

2 Selecteer in het dialoogvenster dat wordt weergegeven een inhoudsbestand voor een insteekmodule voor Netscape

Navigator en klik op OK.

3 Stel de opties voor de insteekmodule in de eigenschappencontrole in.

Naam Hiermee geeft u een naam op waarmee de insteekmodule wordt aangeduid voor scripts. Typ een naam in het

tekstvak zonder label helemaal links in de eigenschappencontrole.

B en H De breedte en hoogte, in pixels, die zijn toegewezen aan het object op de pagina.

Bron Het brongegevensbestand. Klik op het mappictogram om naar een bestand te bladeren of typ een bestandsnaam.

URL van module De URL van het kenmerk ruimte insteekmodule. Typ de volledige URL van de site waar gebruikers de

insteekmodule kunnen downloaden. Als de gebruiker die de pagina bekijkt de insteekmodule niet heeft, probeert de

browser deze te downloaden vanaf deze URL.

Uitlijnen Hiermee wordt bepaald hoe het object wordt uitgelijnd op de pagina.

V-ruimte en H-ruimte De hoeveelheid witruimte in pixels boven, onder en aan weerszijden van de insteekmodule.

Kader: De breedte van de rand rond de insteekmodule.

Parameters Hiermee wordt een dialoogvenster geopend waarin u extra parameters kunt invoeren die aan de

insteekmodule voor Netscape Navigator moeten worden doorgegeven. Veel insteekmodules reageren op speciale

parameters. De Flash-insteekmodue heeft bijvoorbeeld parameters voor

bgcolor, salign en scale.

U kunt de kenmerken die aan de geselecteerde insteekmodule zijn toegewezen ook weergeven door op de knop Kenmerk

te klikken. U kunt kenmerken zoals breedte en hoogte bewerken, toevoegen en verwijderen in dit dialoogvenster.

Inhoud voor een insteekmodule afspelen in het documentvenster

1 Voeg een of meer media-elementen in door Invoegen > Media >Shockwave, Invoegen > Media >Flash of Invoegen >

Media > Insteekmodule te selecteren.

2 Voer een van de volgende handelingen uit:

• Selecteer een van de media-elementen die u hebt ingevoegd en selecteer Beeld > Insteekmodules > Afspelen of klik op

de knop Afspelen in de eigenschappencontrole.

• Selecteer Beeld > Insteekmodules > Alles afspelen om alle media-elementen op de geselecteerde pagina af te spelen die

afhankelijk zijn van insteekmodules.

Opmerking: Alles afspelen geldt alleen voor het huidige document en niet voor bijvoorbeeld andere documenten in een

frameset.

Het afspelen van inhoud voor insteekmodules stoppen

❖

Selecteer een media-element en selecteer Beeld > Insteekmodules > Stoppen of klik op de knop Stoppen in de

eigenschappencontrole.

U kunt ook Beeld > Insteekmodules > Alles stoppen selecteren om het afspelen van alle inhoud voor insteekmodules te

stoppen.

DREAMWEAVER CS3

Handboek

264

Problemen met insteekmodules voor Netscape Navigator oplossen

Als u de stappen voor het afspelen van inhoud voor insteekmodules in het documentvenster hebt uitgevoerd, maar

sommige inhoud voor insteekmodules niet wordt afgespeeld, kunt u het volgende proberen:

• Controleer of de gekoppelde insteekmodule op uw computer is geïnstalleerd en of de inhoud compatibel is met de versie

van de insteekmodule die u hebt.

• Open het bestand Configuration/Plugins/UnsupportedPlugins.txt in een teksteditor en kijk of de insteekmodule die

problemen veroorzaakt, in de lijst staat. In dit bestand staan insteekmodules die problemen veroorzaken in

Dreamweaver en die daarom niet worden ondersteund. (Als u problemen ondervindt met een bepaalde insteekmodule,

kunt u het aan dit bestand toevoegen.)

• Controleer of er voldoende geheugen is. Voor het uitvoeren van sommige insteekmodules is 2 tot 5 MB extra geheugen

nodig.

Een ActiveX-besturingselement invoegen

U kunt een ActiveX-besturingselement invoegen in uw pagina. ActiveX-besturingselementen (die vroeger OLE-

besturingselementen werden genoemd) zijn herbruikbare onderdelen die lijken op miniatuur toepassingen en die kunnen

fungeren als insteekmodules voor browsers. Ze worden uitgevoerd in Internet Explorer met Windows, maar kunnen niet

worden uitgevoerd op de Macintosh of in Netscape Navigator. Met het ActiveX-object in Dreamweaver kunt u kenmerken

en parameters opgeven voor een ActiveX-besturingselement in de browser van uw bezoeker.

Nadat u een ActiveX-object hebt ingevoegd, gebruikt u de eigenschappencontrole om kenmerken van de

object-tag in te

stellen en parameters voor de ActiveX-besturingselementen. Klik op Parameters in de eigenschappencontrole om namen

en waarden in te voeren voor eigenschappen die niet worden weergegeven in de eigenschappencontrole. Er is geen breed

geaccepteerde standaardnotatie voor parameters voor ActiveX-besturingselementen. Als u wilt weten welke parameters u

moet gebruiken, raadpleegt u de documentatie voor het ActiveX-besturingselement dat u gebruikt.

❖ Plaats de invoegpositie in het documentvenster op de plaats waar u de inhoud wilt invoegen en ga vervolgens op een van

de volgende manier te werk:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram ActiveX .

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram ActiveX. Als het

pictogram ActiveX is weergegeven in de invoegbalk, kunt u het pictogram naar het documentvenster slepen.

• Selecteer Invoegen > Media > ActiveX. Een pictogram geeft aan waar het ActiveX-besturingselement wordt

weergegeven op de pagina in Internet Explorer.

ActiveX-eigenschappen

Indeeigenschappencontrolewordenaanvankelijkedemeestgebruikteeigenschappenweergegeven. Klikopdeuitvouwpijl

in de rechterbenedenhoek om alle eigenschappen te zien.

Naam Hiermee geeft u een naam op waarmee het ActiveX-object wordt aangeduid voor scripts. Typ een naam in het

tekstvak zonder label helemaal links in de eigenschappencontrole.

B en H De breedte en hoogte van het object in pixels.

Klasse-id De identificatie van het ActiveX-besturingselement voor de browser. Typ een waarde of selecteer een waarde uit

het pop-upmenu. Als de pagina is geladen, gebruikt de browser de klasse-id om het ActiveX-besturingselement te zoeken

dat nodig is voor het ActiveX-object dat aan de pagina is gekoppeld. Als de browser het opgegeven ActiveX-

besturingselement niet kan vinden, wordt geprobeerd dat te downloaden vanuit de locatie die is opgegeven in Basis.

Insluiten Voegt een embed-tag toe in de object-tag voor het ActiveX-besturingselement. Als het ActiveX-

besturingselement een equivalente Netscape Navigator-invoegtoepassing heeft, wordt deze geactiveerd door de

embed-tag.

Dreamweaver wijst de waarden die u hebt opgegeven als ActiveX-eigenschappen toe aan de equivalente waarden voor de

insteekmodule voor Netscape Navigator.

Uitlijnen Hiermee wordt bepaald hoe het object wordt uitgelijnd op de pagina.

Parameters Hiermee wordt een dialoogvenster geopend waarin u extra parameters kunt invoeren die aan het Active X-

object moeten worden doorgegeven. Veel ActiveX-besturingselementen reageren op speciale parameters.

DREAMWEAVER CS3

Handboek

265

Bron Het gegevensbestand dat moet worden gebruikt voor een insteekmodule voor Netscape Navigator als de optie

Insluiten is ingeschakeld. Als u geen waarde opgeeft, probeert Dreamweaver de waarde te bepalen uit de al opgegeven

ActiveX-eigenschappen.

V-ruimte en H-ruimte De hoeveelheid witruimte in pixels boven, onder en aan weerszijden van het object.

Basis De URL die het ActiveX-besturingselement bevat. Internet Explorer downloadt het ActiveX-besturingselement van

dezelocatiealshetnognietisgeïnstalleerdopdecomputervandebezoeker. AlsudeparameterBasisnietopgeeftenuw

bezoeker het desbetreffende ActiveX-besturingselement nog niet heeft geïnstalleerd, kan het ActiveX-object niet worden

weergegeven in de browser.

Alternatieve afbeelding Een afbeelding die moet worden weergegeven als de browser de object-tag niet ondersteunt. Deze

optie is alleen beschikbaar als de optie Insluiten is uitgeschakeld.

Gegevens Een gegevensbestand dat door het ActiveX-besturingselement moet worden geladen. Veel ActiveX-

besturingselementen, zoals Shockwave en RealPlayer, gebruiken deze parameter niet.

Een Java-toepassing invoegen

U kunt met Dreamweaver een Java-applet invoegen in een HTML-document. Java is een programmeertaal waarmee

lichtgewicht toepassingen (applets) kunnen worden ontwikkeld die kunnen worden ingesloten in webpagina's.

Nadat u een Java-applet hebt ingevoegd, kunt u met de eigenschappencontrole parameters instellen. U kunt de volgende

eigenschappen weergeven in de eigenschappencontrole door een Java-applet te selecteren.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de applet wilt invoegen en ga vervolgens op een van

de volgende manier te werk:

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Media en selecteer het pictogram Applet .

• Selecteer Invoegen > Media > Applet.

2 Selecteer een bestand dat een Java-applet bevat.

Java-applet:eigenschappen

Indeeigenschappencontrolewordenaanvankelijkedemeestgebruikteeigenschappenweergegeven. Klikopdeuitvouwpijl

in de rechterbenedenhoek om alle eigenschappen te zien.

Naam Hiermee geeft u een naam op waarmee de applet wordt aangeduid voor scripts. Typ een naam in het tekstvak zonder

label helemaal links in de eigenschappencontrole.

B en H De breedte en hoogte van de applet in pixels.

Code Het bestand dat de Java-code van de applet bevat. Klik op het mappictogram om naar een bestand te bladeren of typ

een bestandsnaam.

Basis De map die de geselecteerde applet bevat. Als u een applet selecteert, wordt dit tekstvak automatisch gevuld.

Uitlijnen Hiermee wordt bepaald hoe het object wordt uitgelijnd op de pagina.

Alt Alternatieve inhoud (meestal een afbeelding) die moet worden weergegeven als de browser van de gebruiker geen Java-

applets ondersteunt of als Java is uitgeschakeld. Als u tekst typt, wordt de tekst door Dreamweaver ingevoegd als de waarde

van het

alt-kenmerk van de applet. Als u een afbeelding selecteert, voegt Dreamweaver een img-label in tussen de

openende en sluitende

applet-labels.

Opmerking: Als u alternatieve inhoud wilt opgeven die zowel in Netscape Navigator (met Java uitgeschakeld) als in Lynx (een

op tekst gebaseerde browser) kan worden bekeken, selecteert u een afbeelding en voegt u handmatig een

alt-kenmerk toe aan

img-label in de codecontrole.

V-ruimte en H-ruimte De hoeveelheid witruimte in pixels boven, onder en aan weerszijden van de applet.

Parameters Hiermee wordt een dialoogvenster geopend waarin u extra parameters kunt invoeren die aan de applet moeten

worden doorgegeven. Veel applets reageren op speciale parameters.

DREAMWEAVER CS3

Handboek

266

Gedrag gebruiken voor het besturen van media

U kunt gedrag aan uw pagina toevoegen waarmee verschillende mediaobjecten worden gestart en gestopt.

Shockwave of Flash beheren Hiermee kunt u een Shockwave-film of Flash SWF-bestand afspelen, stoppen of terugspoelen

of naar een bepaald frame gaan.

Geluid afspelen Hiermee kunt u een geluid afspelen. U kunt bijvoorbeeld een geluidseffect afspelen als de gebruiker de

muis over een koppeling verplaatst.

Insteekmodule controleren Hiermee kunt u controleren of bezoekers aan uw site de vereiste insteekmodule hebben

geïnstalleerd en kunt u ze vervolgens naar verschillende URL's doorsturen, afhankelijk van of ze de juiste insteekmodule

hebben. Dit geldt alleen voor insteekmodules voor Netscape Navigator, omdat het gedrag Insteekmodule controleren niet

controleert op ActiveX-besturingselementen.

Zie ook

“Het gedrag Shockwave of Flash beheren toepassen” op pagina 337

“Het gedrag Geluid afspelen toepassen” op pagina 341

“Het gedrag Insteekmodule controleren toepassen” op pagina 337

Parameters gebruiken voor het beheren van mediaobjecten

Defineer speciale parameters voor het besturen van Shockwave- en Flash SWF-bestanden, ActiveX-besturingselementen,

insteekmodules voor Netscape Navigator en Java-applets. Parameters worden gebruikt met de

object-, embed-enapplet-

tag. Met parameters worden kenmerken ingesteld die specifiek zijn voor verschillende objecttypen. Een Flash-object kan

bijvoorbeeld een kwaliteitsparameter

<paramnaam="kwaliteit"waarde="beste"> gebruiken voor de objecttag. Het

dialoogvenster Parameter kan worden geopend vanuit de eigenschappencontrole. Raadpleeg de documentatie voor het

object dat u gebruikt voor informatie over de parameters die nodig zijn.

Opmerking: Er is geen breed geaccepteerde standaard voor het identificeren van gegevensbestanden voor ActiveX-

besturingselementen. Raadpleeg de documentatie voor het ActiveX-object dat u gebruikt voor informatie over de parameters

u kunt gebruiken.

Een naam en waarde opgeven voor een parameter

1 Selecteer een object dat parameters kan hebben (zoals een Shockwave-film, een ActiveX-besturingselement, een

insteekmodule voor Netscape Navigator of een Java-applet) in het documentvenster.

2 Open het dialoogvenster op een van de volgende manieren:

• Klik met de rechtermuisknop (Windows) of Control-klik (Macintosh) op het object en selecteer Bewerken in het

snelmenu.

• Open zonodig de eigenschappencontrole en klik op de knop Parameters in de onderste helft van de

eigenschappencontrole. (Controleer of de eigenschappencontrole is uitgevouwen.)

3 Klik op de knop Plus (+) en typ de parameternaam en -waarde in de desbetreffende kolommen.

Een parameter verwijderen

❖

Selecteer een parameter en druk op de knop Min (-).

De volgorde van parameters veranderen

❖

Selecteer een parameter en gebruik de knoppen Pijl-omhoog en Pijl-omlaag.

267

Hoofdstuk 9: Koppelingen en navigatie

Als u een site hebt ingesteld, kunt u pagina's aan elkaar koppelen. U kunt HTML-koppelingen maken, evenals snelmenu's,

navigatiebalken en afbeeldingen met hyperlinks.

Over koppelingen en navigatie

Koppelingen

Nadat u een Dreamweaver-site hebt gedefinieerd voor het opslaan van documenten en HTML-pagina's van uw website, zult

u uw documenten willen koppelen aan andere documenten.

Dreamweaver biedt verschillende methoden voor het maken van koppelingen naar documenten, afbeeldingen en

multimediabestanden, of software die kan worden gedownload. U kunt koppelingen naar alle tekst of afbeeldingen in een

document maken, met inbegrip van tekst of afbeeldingen in titels, lijsten, tabellen, absoluut gepositioneerde elementen

(AP-elementen) en frames.

Het site-overzicht biedt een visuele weergave van de koppelingen tussen uw bestanden. In het site-overzicht kunt u

documenten toevoegen aan uw site, koppelingen maken en verwijderen, en koppelingen naar afhankelijke bestanden

controleren.

Koppelingen kunt u op verschillende manieren maken en beheren. Sommige ontwerpers maken tijdens het werken alvast

koppelingen naar bestanden die nog niet bestaan, terwijl anderen liever eerst alle bestanden en pagina's maken en

vervolgens de koppelingen toevoegen. Het is ook mogelijk om eerst tijdelijke bestanden te maken waarin u de koppelingen

maakt en test voordat u alle pagina's van de site samenstelt.

Zie ook

“Site-overzichten gebruiken” op pagina 49

“Koppelingen testen in Dreamweaver” op pagina 277

Documentlocaties en -paden

Voor het maken van koppelingen is het belangrijk om te begrijpen hoe het bestandspad tussen het brondocument en het

doeldocument is opgebouwd.

Elke webpagina heeft een uniek adres. Dit wordt een URL (Uniform Resource Locator) genoemd. Wanneer u een lokale

koppeling maakt, dat wil zeggen, een koppeling tussen twee documenten in dezelfde site, geeft u gewoonlijk niet de

volledige URL van het doeldocument op. Meestal wordt gebruik gemaakt van een relatief pad vanaf het huidige document

of vanuit de hoofdmap van de site.

Er zijn drie typen koppelingspaden:

• Absolute paden (bijvoorbeeld: http://www.adobe.com/support/dreamweaver/contents.html).

• Documentafhankelijke relatieve paden (bijvoorbeeld: dreamweaver/contents.html).

• Hoofdmapafhankelijke relatieve paden (bijvoorbeeld: /support/dreamweaver/contents.html).

In Dreamweaver kunt u gemakkelijk selecteren welk type paden u wilt gebruiken voor uw koppelingen.

Opmerking: Gebruik bij voorkeur het type relatieve koppeling dat u het prettigst vindt: hoofdmapafhankelijk of

documentafhankelijk.Doornaardoelbestandentebladereninplaatsvanhetpadintetypen,bentuerzekervandathetpad

juist is.

DREAMWEAVER CS3

Handboek

268

Absolute paden

Absolute paden bevatten de volledige URL van het gekoppelde document, met inbegrip van het bijbehorende protocol

(meestal http:// voor webpagina's). Voorbeeld: http://www.adobe.com/support/dreamweaver/contents.html.

Als u een koppeling wilt maken naar een document op een andere server, moet u een absoluut pad opgeven. Het is mogelijk

om absolute paden ook te gebruiken in lokale koppelingen (naar documenten in dezelfde site), maar dat wordt afgeraden.

Als u de site naar een ander domein zou verplaatsen, zouden koppelingen met absolute paden niet meer werken. Door

relatieve paden te gebruiken in lokale koppelingen is de site flexibeler als u bestanden binnen uw site wilt verplaatsen.

Opmerking: Bij het invoegen van afbeeldingen invoegen (niet koppelen) kunt u absolute paden gebruiken voor verwijzingen

naar afbeeldingen op een externe server (afbeeldingen die niet zijn opgeslagen op de lokale vaste schijf).

Documentafhankelijke relatieve paden

In de meeste sites zijn documentafhankelijke relatieve paden de beste keus voor lokale koppelingen. Deze paden zijn met

name handig wanneer het brondocument en het doeldocument zich (permanent) in dezelfde map bevinden. U kunt

documentafhankelijke relatieve paden ook gebruiken voor koppelingen naar documenten in een andere map door het pad

tussen beide documenten in de bestandsstructuur te definiëren.

De basisidee bestaat erin om het gemeenschappelijke deel van de absolute paden van beide documenten weg te laten, zodat

alleen het deel van het pad overblijft dat anders is.

Neem bijvoorbeeld een site met de volgende bestandsstructuur:

• Als u in contents.html een koppeling wilt maken naar hours.html (beide in dezelfde map), gebruikt u het relatieve pad

"hours.html".

• Als u een koppeling wilt maken naar tips.html (in de submap resources), gebruikt u het relatieve pad

"resources/tips.html". Bij elke slash ( /.. ) gaat u een niveau omlaag in de bestandsstructuur.

• Als u een koppeling wilt maken naar index.html (in de hoofdmap, één niveau boven contents.html), gebruikt u het

relatieve pad "../index.html". Bij elke slash ( ../ ) gaat u een niveau omhoog in de bestandsstructuur.

• Als u een koppeling wilt maken naar catalog.html (in een andere submap in de hoofdmap), gebruikt u het relatieve pad

"../products/catalog.html". In dit geval gaat u met ../ omhoog naar de hoofdmap en met products/ omlaag naar de

submap products.

Wanneer u een groep bestanden verplaatst, bijvoorbeeld een hele map zodat alle bestanden in de map dezelfde relatieve

paden behouden, hoeft u de documentafhankelijke relatieve paden tussen deze bestanden niet bij te werken. Als u echter

een enkel bestand verplaatst dat documentafhankelijke relatieve koppelingen bevat of een bestand waarnaar wordt

verwezen door een documentafhankelijke relatieve koppeling, moet u deze koppelingen bijwerken. (Als u het paneel

Bestanden gebruikt voor het verplaatsen van bestanden of het wijzigen van de naam ervan, werkt Dreamweaver alle

koppelingen automatisch bij.)

DREAMWEAVER CS3

Handboek

269

Zie ook

“Relatieve paden instellen voor nieuwe koppelingen” op pagina 272

“Een lokale hoofdmap instellen en bewerken” op pagina 40

Hoofdmapafhankelijke relatieve paden

Hoofdmapafhankelijke relatieve paden beschrijven het pad vanaf de hoofdmap van de site naar een document. Deze paden

kunnen handig zijn wanneer u werkt aan een grote website die verschillende servers gebruikt, of wanneer u verschillende

sites host op dezelfde server. Als u geen ervaring hebt met dit type paden, kan het echter aan te bevelen zijn om

documentafhankelijke relatieve paden te gebruiken.

Een hoofdmapafhankelijk relatief pad begint met een slash ( / ) die staat voor de hoofdmap van de site. Zo is

/support/tips.html een hoofdmapafhankelijk relatief pad naar het bestand tips.html in de submap support in de hoofdmap

van de site.

Hoofdmapafhankelijke relatieve paden zijn vak praktisch voor het definiëren van koppelingen wanneer u regelmatig

HTML-bestanden verplaatst naar andere mappen in uw site. Wanneer u een document met hoofdmapafhankelijke relatieve

koppelingen verplaatst, hoeft u de koppelingen niet bij te werken. Als u in uw HTML-bestanden bijvoorbeeld

hoofdmapafhankelijke relatieve koppelingen gebruikt voor verwijzingen naar afhankelijke bestanden zoals afbeeldingen,

kunt u de HTML-bestanden verplaatsen zonder dat koppelingen naar afhankelijke bestanden ongeldig worden.

Als u documenten waarnaar wordt verwezen met hoofdmapafhankelijke relatieve koppelingen verplaatst of de naam ervan

wijzigt, moet u de koppelingen echter wel wijzigen, zelfs wanneer het documentafhankelijke relatieve pad tussen de

documenten niet is gewijzigd. Voorbeeld: als u een map verplaatst, moet u alle hoofdmapafhankelijke relatieve koppelingen

naar bestanden in die map bijwerken. (Als u het paneel Bestanden gebruikt voor het verplaatsen van bestanden of het

wijzigen van de naam ervan, werkt Dreamweaver alle koppelingen automatisch bij.)

Zie ook

“Relatieve paden instellen voor nieuwe koppelingen” op pagina 272

Koppelingen maken

Bestanden en documenten koppelen

Zorg dat u begrijpt hoe absolute paden en document- en hoofdmapafhankelijke relatieve paden werken voordat u een

koppeling gaat maken. U kunt verschillende typen koppelingen maken in documenten:

• Koppelingen naar andere documenten of bestanden, zoals afbeeldingen, films, of PDF- of geluidsbestanden.

• Koppelingen naar benoemde ankers, waarmee u kunt verwijzen naar een specifieke locatie in een document.

• E-mailkoppelingen, voor het openen van een blanco e-mailbericht waarin het adres van de ontvanger al is ingevuld.

• Null- en scriptkoppelingen, waarmee u gedrag kunt koppelen aan een object of JavaScript-code kunt uitvoeren.

In de eigenschappencontrole en met het pictogram Wijs bestand aan kunt u afbeeldingen, objecten en tekst koppelen aan

een ander document of bestand.

Dreamweaver maakt voor koppelingen naar andere pagina's in uw site gebruik van documentafhankelijke relatieve paden.

U kunt Dreamweaver ook instellen voor het gebruik van hoofdmapafhankelijke relatieve paden.

Belangrijk: Sla nieuwe bestanden altijd op voordat u een documentafhankelijk relatief pad maakt. Een dergelijk pad is niet

geldig als het beginpunt nog niet is vastgesteld. Als u een documentafhankelijk relatief pad maakt voordat het bestand wordt

opgeslagen, gebruikt Dreamweaver een tijdelijk absoluut pad dat begint met file:// totdat het bestand is opgeslagen. Wanneer u

het bestand opslaat, converteert Dreamweaver het absolute pad naar een relatief pad.

Op www.adobe.com/go/vid0149_nl vindt u een zelfstudie over het maken van koppelingen.

DREAMWEAVER CS3

Handboek

270

Zie ook

“Documentlocaties en -paden” op pagina 267

JavaScript-gedrag verbinden aan koppelingen

Aan elke koppeling in een document kunt u gedrag verbinden. U kunt bijvoorbeeld een van de volgende gedragingen

verbinden aan gekoppelde elementen die u invoegt in een document.

Tekst van statusbalk instellen bepaalt de tekst van een bericht en geeft dit weer in de statusbalk in de linkerbenedenhoek

van het browservenster. U kunt bijvoorbeeld dit gedrag gebruiken om de bestemming van een koppeling op de statusbalk

te beschrijven in plaats van de URL weer te geven die aan de koppeling is verbonden.

Browservenster openen opent een URL in een nieuw venster. U kunt de eigenschappen van het nieuwe venster opgeven,

waaronder de naam, de afmetingen en de kenmerken (of de grootte kan worden aangepast, de menubalk wordt

weergegeven, enzovoorts).

Snelmenu geeft een snelmenu weer. U kunt het menu aanpassen, een ander gekoppeld bestand opgeven of de doellocatie

van het gekoppelde document in de browser wijzigen.

Navigatiebalkafbeelding instellen past de weergave van afbeeldingen in een navigatiebalk aan. Met dit gedrag kunt u

bijvoorbeeld een bepaalde afbeelding weergeven in de navigatiebalk of op de pagina wanneer de muisaanwijzer zich boven

een specifiek element in de navigatiebalk bevindt.

Zie ook

“Ingebouwd Dreamweaver-gedrag toepassen” op pagina 335

Koppelingen naar documenten maken in de eigenschappencontrole

Met het mappictogram of het vak Koppeling in de eigenschappencontrole kunt u afbeeldingen, objecten en tekst koppelen

aan een ander document of bestand.

1 Selecteer tekst of een afbeelding in de ontwerpweergave van het documentvenster.

2 Open de eigenschappencontrole (Venster > Eigenschappen) en voer een van de volgende acties uit:

• Klik op het mappictogram aan de rechterzijde van het vak Koppeling om naar een bestand te bladeren en het te

selecteren.

Het pad naar het gekoppelde document wordt weergegeven in het vak URL. In het vervolgkeuzemenu Ten opzichte van in

het dialoogvenster HTML-bestand selecteren kunt u instellen of het pad document- of hoofdmapafhankelijk is. Klik

vervolgens op Selecteer. Het geselecteerde padtype geldt alleen voor de huidige koppeling. (U kunt de standaardinstellingen

wijzigen in het vak Ten opzichte van in de site-instellingen.)

• Typ het pad en de bestandsnaam van het document in het vak Koppeling.

Als u een document in uw site wilt koppelen, voert u een document- of hoofdmapafhankelijk relatief pad in. Als u een

document buiten uw site wilt koppelen, voert u een absoluut pad in, inclusief protocol (bijvoorbeeld http://). U kunt deze

methode gebruiken voor het invoeren van koppelingen naar bestanden die nog niet bestaan.

3 Selecteer het doel van het gekoppelde document in het vervolgkeuzemenu Doel:

• _blank laadt het gekoppelde document in een nieuw naamloos browservenster.

• _parent laadt het gekoppelde document in een bovenliggend frame of venster ten opzichte van het frame dat de

koppeling bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde document geladen in het

volledige browservenster.

• _self laadt het gekoppelde document in het frame of venster waarin de koppeling zich bevindt. Dit doel is de

standaardinstelling, zodat u deze instelling gewoonlijk niet hoeft te definiëren.

• _top laadt het gekoppelde document in het volledige browservenster en verwijdert daarbij alle frames.

DREAMWEAVER CS3

Handboek

271

Als hetzelfde doel zal worden toegewezen aan alle koppelingen op uw pagina, kunt u dit in één keer instellen door

Invoegen>HTML>Head-tags>Basisteselecterenendegewenstedoelinstellingentedefiniëren.Zie“Frame-inhoudmet

koppelingen controleren” op pagina 203 voor meer informatie over het toewijzen van frames als doel.

Zie ook

“Documentlocaties en -paden” op pagina 267

Documenten koppelen met het pictogram Wijs bestand aan

1 Selecteer tekst of een afbeelding in de ontwerpweergave van het documentvenster.

2 Maak op een van de volgende manieren een koppeling:

• Sleep het pictogram Wijs bestand aan (doelpictogram) aan de rechterzijde van het vak Koppeling in de

eigenschappencontrole naar een open document, naar een zichtbaar anker in een open document of naar een document

in het paneel Bestanden.

• Houd de Shift-toets ingedrukt terwijl u de selectie naar een ander open document, naar een zichtbaar anker in een open

document of naar een document in het paneel Bestanden sleept.

Opmerking: U kunt alleen koppelingen maken naar open documenten als uw documenten in het documentvenster niet zijn

gemaximaliseerd. U kunt documenten schikken door Venster > Trapsgewijs of Venster > Schikken te selecteren. Wanneer u een

open document aanwijst, wordt dit document naar de voorgrond gehaald terwijl u uw selectie maakt.

Documenten koppelen in het site-overzicht

Koppelingen die u maakt in het site-overzicht, worden onderaan in de geselecteerde HTML-bestanden geplaatst, zodat u

gemakkelijk koppelingen binnen een site kunt maken.

Documenten koppelen in het site-overzicht en met het pictogram Wijs bestand aan

Deze methode is handig wanneer u een site bouwt en snel koppelingen wilt maken in de gehele site.

1 Selecteer in het paneel Bestanden de optie Overzichtsweergave in het vervolgkeuzemenu Beeld.

2 Selecteer een HTML-bestand in het site-overzicht.

3 Sleep het bijbehorende pictogram Wijs bestand aan (doelpictogram) naar een ander bestand in het site-overzicht of naar

een lokaal bestand in de weergave Sitebestanden.

Onderaan het geselecteerde HTML-bestand wordt een koppeling met de naam van het gekoppelde bestand gemaakt.

Documenten koppelen in het site-overzicht

❖

Ga op een van de volgende manieren te werk:

• Sleep een pagina vanuit de Verkenner (Windows) of vanuit de Finder (Macintosh) naar een pagina in het site-overzicht.

• Selecteer een HTML-pagina in het site-overzicht en kies Aan bestaand bestand koppelen in het snelmenu.

• Selecteer een HTML-pagina in het site-overzicht en kies Aan nieuw bestand koppelen in het snelmenu.

Koppelingen toevoegen met de opdracht Hyperlink

Met de opdracht Hyperlink kunt u tekst koppelen aan een afbeelding, aan een object of aan een ander document of bestand.

1 Plaats de invoegpositie op de plaats in het document waar u de koppeling wilt invoegen.

2 Voer een van de volgende handelingen uit om het dialoogvenster Hyperlink invoegen te openen:

• Selecteer Invoegen > Hyperlink.

• Ga naar de categorie Algemeen in het paneel Invoegen en klik op de knop Hyperlink.

3 Voer de tekst van de koppeling in en typ in het tekstvak Koppeling de naam van het bestand waarnaar de koppeling

verwijst of klik op het mappictogram om naar het bestand te bladeren.

DREAMWEAVER CS3

Handboek

272

4 Selecteer of typ de naam van het doelvenster van de koppeling in het vervolgkeuzemenu Doel.

In het vervolgkeuzemenu worden de namen van alle benoemde frames in het huidige document weergegeven. Als u een

frame opgeeft dat niet bestaat, wordt de gekoppelde pagina geopend in een nieuw venster met de opgegeven naam. U kunt

ook een van de volgende gereserveerde doelnamen selecteren:

• _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.

• _parent laadt het gekoppelde bestand in het bovenliggende frame of venster ten opzichte van het frame dat de koppeling

bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde bestand geladen in het volledige

browservenster.

• _self laadt het gekoppelde bestand in het frame of venster waarin de koppeling zich bevindt. Dit doel is de

standaardinstelling en hoeft u gewoonlijk niet te definiëren.

• _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.

5 Voer in het vak Tabindex een getal in voor de tabvolgorde.

6 Voer in het vak Titel een titel in voor de koppeling.

7 Voer in het vak Toegangstoets één letter op het toetsenbord in waarmee de koppeling in de browser kan worden

geselecteerd.

8 Klik op OK.

Relatieve paden instellen voor nieuwe koppelingen

Dreamweaver maakt voor koppelingen naar andere pagina's in uw site standaard gebruik van documentafhankelijke

relatievepaden.Alsuhoofdmapafhankelijkerelatievepadenwiltgebruiken,moetueersteenlocalemapinDreamweaver

definiëren als equivalent aan de hoofdmap op de server. Dreamweaver gebruikt deze map om het hoofdmapafhankelijke

relatieve pad naar bestanden te bepalen.

1 Selecteer Site > Sites beheren.

2 Dubbelklik in het dialoogvenster Sites beheren op de gewenste site in de lijst.

3 Als de geavanceerde instellingen nog niet worden weergegeven, gaat u in het dialoogvenster Sitedefinitie naar het

tabblad Geavanceerd.

Op het tabblad Geavanceerd in het dialoogvenster Sitedefinitie worden de opties in de categorie Lokale info weergegeven.

4 Stel het relatieve pad van nieuwe koppelingen in door de optie Document of Hoofdmap te selecteren.

Als u deze instelling wijzigt, worden bestaande koppelingen niet aangepast wanneer u op OK klikt. De instelling is alleen

van toepassing op nieuwe koppelingen die u maakt met Dreamweaver.

Opmerking: Inhoud die is gekoppeld via hoofdmapafhankelijke relatieve paden, wordt niet weergegeven wanneer u

documenten voorvertoont in een lokale browser, tenzij u een testserver hebt ingesteld of de optie Voorvertoning met tijdelijk

bestand is ingeschakeld in Bewerken > Voorkeuren > Voorvertoning in browser. De reden daarvoor is dat browsers de

hoofdmap van sites niet herkennen en servers wel. Plaats het gekoppelde bestand op een externe server en selecteer vervolgens

Bestand > Voorvertoning in browser om snel een voorvertoning van inhoud via hoofdmapafhankelijke relatieve koppelingen

weer te geven.

5 Voer de URL van uw website in het vak HTTP-adres in wanneer u gebruikmaakt van hoofdmapafhankelijke relatieve

paden.

Dreamweaver gebruikt dit adres om te controleren of hoofdmapafhankelijke relatieve koppelingen zullen werken op de

server, waar de hoofdmap wellicht anders is. Als u bijvoorbeeld een koppeling maakt naar een afbeelding in de map

C:\Sales\images\ op uw vaste schijf (waar de map Sales is ingesteld als lokale hoofdmap) en de URL van uw site

http://www.mijnsite.com/SalesApp/ is (waar de map SalesApp uw externe hoofdmap is), voert u de URL in het vak HTTP-

adres in om te zorgen dat het pad naar het gekoppelde bestand op de server /SalesApp/images/ is.

Opmerking: In eerdere versies kon Dreamweaver niet de juiste externe hoofdmap invullen, waardoor sites het in runtime lieten

afweten.

6 Klik op OK.

DREAMWEAVER CS3

Handboek

273

De nieuwe padinstellingen zijn alleen van toepassing op de huidige site.

Zie ook

“Documentlocaties en -paden” op pagina 267

“Een lokale hoofdmap instellen en bewerken” op pagina 40

Koppelingen maken naar specifieke locaties in een document

In de eigenschappencontrole kunt u koppelingen maken naar een specifieke locatie in een document door eerst benoemde

ankers te maken. Met benoemde ankers kunt u locaties in een document markeren. Dit wordt vaak gedaan bij een bepaald

onderwerp of bovenaan een document. U kunt vervolgens koppelingen naar deze benoemde ankers maken, waarmee de

bezoeker snel naar de opgegeven locatie kan gaan.

Voor het maken van een koppeling naar een benoemd anker zijn twee stappen vereist. Eerst moet u een benoemd anker

maken. Vervolgens kunt u een koppeling naar het anker maken.

Opmerking: U kunt een benoemd anker niet in een AP-element (met absolute positie) plaatsen.

Benoemde ankers maken

1 Ga naar de ontwerpweergave van het documentvenster en plaats de invoegpositie waar u het benoemde anker wilt

invoegen.

2 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Benoemd anker.

• Druk op Control+Alt+A (Windows) of Command+Optie+A (Macintosh).

• Ga naar de categorie Algemeen in het paneel Invoegen en klik op de knop Benoemd anker.

3 Typ een naam voor het anker in het vak Naam anker en klik vervolgens op OK. (De naam van het anker mag geen spaties

bevatten.)

De ankermarkering wordt weergegeven op de invoegpositie.

Opmerking: Als de ankermarkering niet wordt weergegeven, selecteert u Beeld > Visuele Hulpmiddelen > Onzichtbare

elementen.

Koppelingen naar een benoemd anker maken

1 Selecteer de tekst of afbeelding waarvan u een koppeling wilt maken in de ontwerpweergave van het documentvenster.

2 Typ een hekje (#) en de naam van het anker in het vak Koppeling in de eigenschappencontrole. Als u bijvoorbeeld een

koppeling wilt maken naar het anker 'top' in het huidige document, typt u

#top.Als u een koppeling wilt maken naar het

anker 'top' in een ander document dat zich in dezelfde map bevindt, typt u

bestandsnaam.html#top.

Opmerking: Ankernamen zijn hoofdlettergevoelig.

Koppelingen naar benoemde ankers maken met Wijs bestand aan

1 Open het document dat het benoemde anker bevat.

Opmerking: Als de ankermarkering niet wordt weergegeven, maakt u deze zichtbaar door Beeld > Visuele Hulpmiddelen >

Onzichtbare elementen te selecteren.

2 Selecteer de tekst of afbeelding waarvan u een koppeling wilt maken in de ontwerpweergave van het documentvenster.

(Als deze zich in een ander geopend document bevindt, moet u daar naartoe schakelen.)

3 Ga op een van de volgende manieren te werk:

• Sleep het pictogram Wijs bestand aan (doelpictogram) aan de rechterzijde van het vak Koppeling in de

eigenschappencontrole naar het anker waarnaar u een koppeling wilt maken. Dit kan een anker binnen hetzelfde

document of een anker in een ander open document zijn.

DREAMWEAVER CS3

Handboek

274

• Houd Shift ingedrukt terwijl u in het documentvenster sleept van de geselecteerde tekst of afbeelding naar het anker

waarnaar u een koppeling wilt maken. Dit kan een anker binnen hetzelfde document of een anker in een ander open

document zijn.

E-mailkoppelingen maken

Als u op een e-mailkoppeling klikt, wordt een blanco berichtvenster geopend in de e-mailtoepassing die is ingesteld in de

browser van de gebruiker. Het e-mailadres dat is op gegeven in de e-mailkoppeling, wordt automatisch ingevuld in het vak

Aan in het berichtvenster.

E-mailkoppelingen maken met de opdracht E-mailkoppeling invoegen

1 Ga naar de ontwerpweergave van het documentvenster en plaats de invoegpositie waar u de e-mailkoppeling wilt

invoegen, of selecteer de tekst of afbeelding waarvan uw een e-mailkoppeling wilt maken.

2 Voer een van de volgende handelingen uit om de koppeling in te voegen:

• Selecteer Invoegen > E-mailkoppeling.

• Ga naar de categorie Algemeen in het paneel Invoegen en klik op de knop E-mailkoppeling.

3 Typ of bewerk de hoofdtekst van het e-mailbericht in het tekstvak.

4 Typ het e-mailadres in het vak E-mail en klik vervolgens op OK.

E-mailkoppelingen maken in de eigenschappencontrole

1 Selecteer tekst of een afbeelding in de ontwerpweergave van het documentvenster.

2 In het vak Koppeling in de eigenschappencontrole typt u

mailto: gevolgd door een e-mailadres.

Typ geen spaties tussen de dubbele punt en het e-mailadres.

Null- en scriptkoppelingen maken

Een null-koppeling is een koppeling waaraan geen doel is toegewezen. Met null-koppelingen kunt u gedrag koppelen aan

objecten of tekst op een pagina. Zo kunt u aan een null-koppeling een gedrag verbinden dat een afbeelding verwisselt of

een AP-element weergeeft wanneer de muisaanwijzer over de koppeling heen gaat.

Met scriptkoppelingen kunt u JavaScript-code uitvoeren of een JavaScript-functie aanroepen. Deze koppelingen zijn handig

als u bezoekers meer informatie over een item wilt geven zonder de huidige pagina te moeten verlaten. Met

scriptkoppelingen kunt u ook berekeningen uitvoeren, formulieren valideren en andere taken uitvoeren wanneer een

bezoeker op een item klikt.

Zie ook

“Een gedrag toepassen” op pagina 334

Null-koppelingen maken

1 Selecteer tekst, een afbeelding of een object in de ontwerpweergave van het documentvenster.

2 In de eigenschappencontrole typt u

javascript:; (het woord javascript, gevolgd door een dubbele punt en een

puntkomma) in het vak Koppeling.

Scriptkoppelingen maken

1 Selecteer tekst, een afbeelding of een object in de ontwerpweergave van het documentvenster.

2 In het vak Koppeling in de eigenschappencontrole typt u

javascript: gevolgd door JavaScript-code of een functienaam.

(Typ geen spaties tussen de dubbele punt en de code of functienaam.)

DREAMWEAVER CS3

Handboek

275

Koppelingen automatisch bijwerken

Dreamweaver kan koppelingen in en naar een document bijwerken wanneer u een document in de lokale website verplaatst

of de naam ervan wijzigt. Deze functie werkt het beste wanneer u uw volledige website of een op zichzelf staand deel ervan

op uw vaste schijf hebt opgeslagen. Dreamweaver brengt geen wijzigingen aan in de externe map totdat u de lokale

bestanden op de externe server plaatst of incheckt.

Dreamweaverkaneencachebestandmakenwaaringegevensoverallekoppelingeninuwlokalemapzijnopgeslagenzodat

het bijwerken sneller verloopt. Het cachebestand wordt op de achtergrond bijgewerkt wanneer u koppelingen in uw lokale

site toevoegt, wijzigt of verwijdert.

Koppelingen automatisch bijwerken inschakelen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Ga in de lijst aan de linkerkant van het dialoogvenster Voorkeuren naar de categorie Algemeen.

3 Maak in de sectie Documentopties van de categorie Algemeen een keuze in het vervolgkeuzemenu Koppelingen

bijwerken bij verplaatsen bestanden.

Altijd Koppelingen in en naar het geselecteerde document worden automatisch bijgewerkt wanneer het wordt verplaatst of

wanneer de naam wordt gewijzigd.

Nooit Koppelingen in en naar het geselecteerde document worden niet automatisch bijgewerkt wanneer het wordt

verplaatst of wanneer de naam wordt gewijzigd.

Vragen Er wordt een dialoogvenster weergegeven met een lijst van alle bestanden waarop de wijziging betrekking heeft.

Klik op Bijwerken om de koppelingen in deze bestanden bij te werken of klik op Niet bijwerken om de bestanden

ongewijzigd te laten.

4 Klik op OK.

Een cachebestand voor uw site maken

1 Selecteer Site > Sites beheren.

2 Selecteer een site en klik op Bewerken.

3 Ga in het dialoogvenster Sitedefinitie naar het tabblad Geavanceerd om de geavanceerde opties weer te geven.

4 Selecteer de categorie Lokale info in de lijst.

5 Schakel in de categorie Lokale info het selectievakje Cache inschakelen in.

De eerstvolgende keer dat u koppelingen naar bestanden in uw lokale map wijzigt of verwijdert nadat u Dreamweaver

opnieuw hebt opgestart, vraagt Dreamweaver of u de cache wilt laden. Als u op Ja klikt, laadt Dreamweaver de cache en

worden alle koppelingen naar het gewijzigde bestand bijgewerkt. Als u op Nee klikt, wordt de wijziging geregistreerd in de

cache, maar laadt Dreamweaver de cache niet en worden koppelingen niet bijgewerkt.

Het kan even duren voordat de cache van een grote site is geladen omdat Dreamweaver moet controleren of de cache is

bijgewerktdoordetijdstempelvandebestandenindelokalesitetevergelijkenmetdetijdstempeldieisgeregistreerdinde

cache. Als u geen bestanden buiten Dreamweaver hebt gewijzigd, kunt u gerust op de Stop-knop klikken wanneer deze

wordt weergegeven.

De cache opnieuw maken

❖

Ga naar het paneel Bestanden en selecteer Site > Geavanceerd > Sitecache opnieuw maken.

Koppelingen beheren in het site-overzicht

U kunt de structuur van de site wijzigen in het site-overzicht door koppelingen toe te voegen, te wijzigen of te verwijderen.

Dreamweaver werkt het site-overzicht automatisch bij aan de hand van wijzigingen die u toebrengt aan de site.

Zie ook

“Werken met een visueel overzicht van uw site” op pagina 49

DREAMWEAVER CS3

Handboek

276

Koppelingen wijzigen

1 Ga naar het site-overzicht, selecteer een pagina die het doel is van de koppeling die u wilt wijzigen (zodat de pagina die

de koppeling bevat naar een ander doel verwijst), klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt

houdt (Macintosh) en selecteer Koppeling wijzigen in het snelmenu.

2 Blader naar het nieuwe doelbestand of typ de URL.

3 Klik op OK.

Koppelingen verwijderen

1 Selecteer de pagina in het site-overzicht.

2 Klik met de rechtermuisknop (Windows) of Control-klik (Macintosh) en selecteer Koppeling verwijderen in het

snelmenu.

Als u een koppeling verwijdert, wordt het bestand niet verwijderd. De koppeling wordt verwijderd in de HTML-bron van

de pagina die verwees naar het ontkoppelde bestand.

Het bronbestand van een koppeling openen

1 Selecteer een bestand in het site-overzicht.

2 Ga op een van de volgende manieren te werk:

• Selecteer Site > Bron van koppeling openen (Windows) of Site > Weergave site-overzicht > Bron van koppeling openen

(Macintosh).

• Klik met de rechtermuisknop (Windows) of Control-klik (Macintosh) en selecteer Bron van koppeling openen in het

snelmenu.

De eigenschappencontrole en het bronbestand worden geopend in het documentvenster en de koppeling wordt

gemarkeerd.

Koppelingen wijzigen in de hele site

Dreamweaver kan koppelingen automatisch bijwerken wanneer u bestanden verplaatst of de naam ervan wijzigt, maar u

ook handmatig alle koppelingen een ander doel toewijzen (inclusief e-mail-, FTP-, null- en scriptkoppelingen).

Deze optie is handig wanneer u een bestand verwijdert waarnaar wordt verwezen in andere bestanden. U kunt de optie

echter ook in andere gevallen gebruiken. Stel dat u bijvoorbeeld de woorden "films van de maand" overal in uw site wilt

koppelen aan het bestand /movies/july.html. Op 1 augustus wilt u al deze koppelingen wijzigen zodat ze verwijzen naar

/movies/august.html.

1 Selecteer een bestand in de Lokale weergave van het paneel Bestanden.

Opmerking: Als u een e-mail-, FTP-, null- of scriptkoppeling wilt wijzigen, hoeft u geen bestand te selecteren.

2 Selecteer Site > Koppeling op de hele site wijzigen.

3 Vul onderstaande opties in het dialoogvenster Koppeling op de hele site wijzigen in:

Wijzig alle koppelingen naar Klik op het mappictogram en blader naar het bestand dat u wilt ontkoppelen. Als u een e-

mail-, FTP-, null- of scriptkoppeling wijzigt, typt u de volledige tekst van de koppeling die u wilt wijzigen.

In koppelingen naar Klik op het mappictogram en blader naar het bestand waarnaar u de koppeling wilt maken. Als u een

e-mail-, FTP-, null- of scriptkoppeling wijzigt, typt u de volledige tekst van de vervangende koppeling.

4 Klik op OK.

Dreamweaver werkt alle documenten met koppelingen naar het geselecteerde bestand bij zodat deze verwijzen naar het

nieuwe bestand. Daarbij wordt hetzelfde type pad gebruikt als het pad dat al in het document werd gebruikt (bijvoorbeeld,

als het oude pad documentafhankelijk relatief was, is het nieuwe pad dat ook).

Als u een koppeling op de hele site hebt gewijzigd, is het oorspronkelijke bestand zwevend geworden (dat wil zeggen dat er

geen andere bestanden zijn met koppelingen naar dit bestand). U kunt het verwijderen zonder dat koppelingen in uw lokale

Dreamweaver-site verbroken worden.

DREAMWEAVER CS3

Handboek

277

Belangrijk: Omdat deze wijzigingen lokaal worden uitgevoerd, moet u het desbetreffende zwevende bestand in de externe map

handmatig verwijderen en gewijzigde bestanden handmatig plaatsen of inchecken. Als u dat niet doet, worden uw wijzigingen

niet zichtbaar voor bezoekers van uw site.

Koppelingen testen in Dreamweaver

Koppelingen zijn niet actief in Dreamweaver. Dat wil zeggen dat u gekoppelde documenten niet kunt openen door op de

koppeling in het documentvenster te klikken.

❖ Ga op een van de volgende manieren te werk:

• Selecteer de koppeling en kies Wijzigen > Gekoppeld bestand openen.

• Houd de Control-toets (Windows) of de Command-toets (Macintosh) ingedrukt en dubbelklik op de koppeling.

Opmerking: Het gekoppelde document moet zich op uw lokale schijf bevinden.

Zie ook

“Zoeken naar verbroken, externe en zwevende koppelingen” op pagina 282

“Verbroken koppelingen herstellen” op pagina 283

Snelmenu's

Over snelmenu's

Een snelmenu is een pop-upmenu met koppelingen naar documenten of bestanden dat zichtbaar is voor bezoekers van de

site. U kunt koppelingen maken naar documenten in uw website, documenten op andere websites, e-mailkoppelingen,

koppelingen naar afbeeldingen en alle andere typen koppelingen die een browser kan openen.

Elke optie in een snelmenu is gekoppeld aan een URL. Wanneer gebruikers een optie kiezen, worden ze doorgestuurd naar

de gekoppelde URL. U kunt snelmenu's invoegen met het formulierobject Snelmenu.

Een snelmenu kan bestaan uit drie onderdelen:

• (Optioneel) Een selectieverzoek zoals een beschrijving van de menuonderdelen of instructies zoals "Maak een keuze".

• (Vereist) Een lijst van gekoppelde menuonderdelen: een gebruiker selecteert een optie en het gekoppelde document of

bestand wordt geopend.

• (Optioneel) Een Ga naar-knop.

Zie ook

“Het gedrag Snelmenu toepassen” op pagina 340

“Het gedrag Snelmenu Go toepassen” op pagina 340

Snelmenu's invoegen

1 Open een document en plaatst de invoegpositie in het documentvenster.

2 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Formulier > Snelmenu.

• Ga naar de categorie Formulieren in het paneel Invoegen en klik op de knop Snelmenu.

3 Vul het dialoogvenster Snelmenu invoegen in en klik op OK. Dit is een lijst met een aantal opties:

Knoppen plus (+) en min (-) Klik op Plus om een item in te voegen. Klik nogmaals om nog een item in te voegen. Als u een

item wilt verwijderen, selecteert u het gewenste item en klikt u op de Min-knop.

Pijlknoppen Selecteer een item en klik op de pijlknoppen om het omhoog of omlaag te verplaatsen in de lijst.

DREAMWEAVER CS3

Handboek

278

Tekst Typ de naam van een onbenoemd item. Als uw menu een selectieverzoek bevat (bijvoorbeeld "Maak een keuze:"),

typt u dit als het eerste menuonderdeel. In dat geval moet u ook de optie Het eerste item na wijziging van de URL selecteren

inschakelen.

Indien geselecteerd, ga naar de URL Blader naar het doelbestand of typ het bestandspad.

URL's openen in Selecteer of het bestand wordt geopend in hetzelfde venster of in een frame. Als het frame waarin u wilt

dat het bestand wordt geopend, niet in het vervolgkeuzemenu staat, sluit u het dialoogvenster Snelmenu invoegen en geeft

u het frame een naam.

De knop Ga naar invoegen na het menu Schakel dit selectievakje in om een Ga naar-knop in te voegen in plaats van een

selectieverzoek.

Het eerste item na wijziging van de URL selecteren Schakel dit selectievakje in wanneer u een selectieverzoek ("Maak een

keuze:") hebt ingesteld als eerste menuonderdeel.

Zie ook

“Eigenschappen en kenmerken van frames weergeven en instellen” op pagina 200

Snelmenuonderdelen bewerken

U kunt de volgorde van items in het menu of het bestand waarnaar een item verwijst wijzigen en items toevoegen,

verwijderen en hernoemen.

Als u de doellocatie van het gekoppelde bestand wilt wijzigen of een selectieverzoek wilt toevoegen of wijzigen, moet u het

gedrag Snelmenu in het paneel Gedrag toepassen.

1 Open de eigenschappencontrole (Venster > Eigenschappen) als dat nog niet geopend is.

2 Selecteer het snelmenuobject in de ontwerpweergave van het documentvenster.

3 Klik in de eigenschappencontrole op de knop Lijstwaarden.

4 In het dialoogvenster Lijstwaarden kunt u wijzigingen aanbrengen in de menu-onderdelen. Klik vervolgens op OK.

Zie ook

“Het gedrag Snelmenu toepassen” op pagina 340

Problemen met snelmenu's oplossen

Wanneer een gebruiker een snelmenuonderdeel selecteert, kan er geen nieuwe keuze worden gemaakt in dat menu wanneer

de gebruiker terugbladert naar de pagina of wanneer het vak URL's openen in naar een frame verwijst. Dit probleem kunt

u op twee manieren oplossen:

• Gebruik een selectieverzoek zoals een beschrijving of een instructie (bijvoorbeeld "Maak een keuze"). Het

selectieverzoek wordt automatisch opnieuw geselecteerd nadat een keuze is gemaakt in het snelmenu.

• Gebruik een Ga naar-knop zodat de gebruiker de gekozen koppeling opnieuw kan instellen. Wanneer u een knop Go

met een snelmenu gebruikt, wordt de Go-knop het enige mechanisme dat de gebruiker naar de URL brengt die aan de

selectie in het menu is gekoppeld. Door een menu-item in het snelmenu te kiezen, wordt de gebruiker niet langer

automatisch naar een andere pagina of een ander frame omgeleid.

Opmerking: Selecteer in elk dialoogvenster Snelmenu invoegen slechts een van deze opties omdat ze van toepassing zijn op het

volledig menu.

DREAMWEAVER CS3

Handboek

279

Navigatiebalken

Over navigatiebalken

Een navigatiebalk bestaat uit een groep afbeeldingen waarvan de weergave wijzigt op grond van acties van de gebruiker.

Navigatiebalken zijn vaak een handige manier om door pagina's en bestanden op een site te navigeren.

Een element in een navigatiebalk kan zich in vier statussen bevinden:

• Omhoog: de afbeelding die wordt weergegeven wanneer de gebruiker nog geen interactie met het element heeft gehad.

• Boven: de afbeelding die wordt weergegeven wanneer de muisaanwijzer zich boven de afbeelding Omhoog bevindt. De

weergave van het element wordt gewijzigd (bijvoorbeeld lichter van kleur) om aan te geven dat de gebruiker iets met het

element kan doen.

• Omlaag: de afbeelding die wordt weergegeven wanneer de gebruiker het element aanklikt. Wanneer een gebruiker een

element aanklikt kan een nieuwe pagina worden geladen terwijl de navigatiebalk zichtbaar blijft. Het element kan dan

bijvoorbeeld donkerder worden om aan te geven dat het geselecteerd wordt.

• Boven terwijl omlaag: de afbeelding die wordt weergegeven wanneer de muisaanwijzer zich boven de afbeelding Omlaag

bevindt nadat het element is aangeklikt. Het element kan bijvoorbeeld grijs worden weergegeven. Met deze status is het

duidelijk voor de gebruiker dat dit element niet nogmaals kan worden aangeklikt zolang hij zich op dit deel van de site

bevindt.

Het is niet nodig om afbeeldingen voor alle statussen van de navigatiebalkelementen te gebruiken. Het is ook mogelijk om

bijvoorbeeld alleen de statussen Omhoog en Omlaag te gebruiken.

Nadat u een navigatiebalk hebt gemaakt voor een document, kunt u afbeeldingen toevoegen aan of verwijderen uit de

navigatiebalk met de opdracht Navigatiebalk aanpassen. Met deze opdracht kunt u afbeeldingen of afbeeldingssets wijzigen,

instellen welk bestand wordt geopend wanneer het element wordt aangeklikt, een ander doelvenster of -frame instellen en

de afbeeldingen ordenen.

Navigatiebalk invoegen

Voordat u de opdracht Navigatiebalk invoegen gebruikt, moet u een set afbeeldingen voor de statussen van ieder element

maken. (U kunt een navigatiebalkelement zien als een soort knop omdat het de gebruiker naar een andere pagina stuurt

wanneer deze erop klikt.)

U kunt een navigatiebalk maken en kopiëren naar andere pagina's op uw site of gebruiken in frames, en het paginagedrag

bewerken zodat verschillende statussen worden weergegeven wanneer pagina's worden geopend.

1 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Afbeeldingsobjecten > Navigatiebalk.

• Ga naar de categorie Algemeen in het paneel Invoegen, klik op de knop Afbeeldingen en selecteer Navigatiebalk

invoegen.

2 Vul het dialoogvenster Navigatiebalk invoegen in en klik op OK. Dit is een lijst met een aantal opties:

Knoppen plus (+) en min (-) KlikopPlusomeenelementintevoegen.Kliknogmaalsomnogeenelementintevoegen.Als

u een element wilt verwijderen, selecteert u het gewenste element en klikt u op de Min-knop.

DREAMWEAVER CS3

Handboek

280

Elementnaam Typ een naam voor het navigatiebalkelement, bijvoorbeeld: Home. Elk element hoort bij een knop met een

set van maximaal vier statusafbeeldingen. Elementnamen worden weergegeven in de lijst Nav.-balkelementen. Met de

pijlknoppen kunt u de navigatiebalkelementen ordenen.

Omhoog, Boven, Omlaag en Boven terwijl omlaag Blader naar de gewenste afbeeldingen voor de vier statussen. Alleen de

afbeelding Omhoog is vereist. De andere afbeeldingen zijn optioneel.

Alternatieve tekst Voer een beschrijvende naam in voor het element. Alternatieve tekst wordt in tekstbrowsers en in

browsers die afbeeldingen handmatig downloaden weergegeven in plaats van de afbeeldingen. Schermlezers lezen

alternatieve tekst en sommige browsers geven de alternatieve tekst weer wanneer de gebruiker de muisaanwijzer boven het

navigatiebalkelement houdt.

Ga als erop wordt geklikt, naar de URL Klik op de knop Bladeren om het bestand te selecteren dat u wilt openen en geef op

waar u wilt dat het bestand wordt geopend. Als het frame waarin u wilt dat het bestand wordt geopend, niet in het

vervolgkeuzemenu staat, sluit u het dialoogvenster Navigatiebalk invoegen en geeft u het frame in uw document een naam.

Afbeeldingen vooraf laden Selecteer deze optie om de afbeeldingen tegelijkertijd met de pagina te laden. Als u deze optie

selecteert, voorkomt dat vertragingen wanneer de gebruiker de muisaanwijzer boven afbeeldingen houdt.

Eerst de afbeelding Omlaag tonen Selecteer deze optie voor elementen waarvan u wilt dat in eerste instantie de status

Omlaag wordt weergegeven en niet de status Omhoog. Zo moet de status van het element Home op de navigatiebalk

Omlaag zijn als deze pagina voor het eerst wordt geladen. Wanneer u deze optie inschakelt voor een element, verschijnt er

een asterisk (*) achter de naam van het element in de lijst.

Invoegen Kies of u de elementen verticaal of horizontaal wilt invoegen.

Tabellen gebruiken Schakel deze optie in om de elementen in te voegen in een tabel.

Zie ook

“Eigenschappen en kenmerken van frames weergeven en instellen” op pagina 200

Navigatiebalk aanpassen

1 Selecteer de navigatiebalk op de actieve pagina.

2 Selecteer Aanpassen > Navigatiebalk.

3 Selecteer het element dat u wilt aanpassen in de lijst.

4 Breng de gewenste wijzigingen aan en klik op OK.

Afbeeldingen met hyperlinks

Een afbeelding met hyperlink is een afbeelding die is ingedeeld in gebieden die hotspots worden genoemd. Wanneer een

gebruiker op en hotspot klikt, wordt een actie uitgevoerd (er wordt bijvoorbeeld een bestand geopend).

De informatie voor afbeeldingen met hyperlinks aan de clientzijde wordt opgeslagen in het HTML-document en niet in een

apart map-bestand zoals dat het geval is bij afbeeldingen met hyperlinks aan de serverzijde. Wanneer een bezoeker op een

hotspot in de afbeelding klikt, wordt de gekoppelde URL rechtstreeks naar de server gezonden. Daardoor zijn afbeeldingen

met hyperlinks aan de clientzijde sneller dan die aan de serverzijde; de server hoeft niet te berekenen waar de bezoeker heeft

geklikt. Afbeeldingen met hyperlinks aan de clientzijde worden ondersteund door Netscape Navigator 2.0 en hoger, NCSA

Mosaic 2.1 en 3.0 en alle versies van Internet Explorer.

Dreamweaver wijzigt verwijzingen naar afbeeldingen met hyperlinks aan de serverzijde niet. Het is mogelijk om beide

typen afbeeldingen met hyperlinks te gebruiken in hetzelfde document. Browsers die beide typen afbeeldingen met

hyperlinks ondersteunen, geven echter voorrang aan afbeeldingen met hyperlinks aan de clientzijde. Als u een afbeelding

met hyperlinks aan de serverzijde wilt invoegen in een document, moet u de bijbehorende HTML-code zelf invoeren.

DREAMWEAVER CS3

Handboek

281

Afbeeldingen met hyperlinks aan de clientzijde invoegen

Wanneer u een afbeelding met hyperlinks aan de clientzijde invoegt, maakt u een hotspot en definieert u een koppeling die

wordt geopend wanneer een gebruiker op het hotspot klikt.

Opmerking: U kunt meerdere hotspots definiëren. Deze maken echter alle deel uit van dezelfde afbeelding met hyperlinks.

1 Selecteer de afbeelding in het documentvenster.

2 Ga naar de eigenschappencontrole en klik op de uitvouwpijl in de rechterbenedenhoek van het paneel om alle

eigenschappen weer te geven.

3 Voer in het vak Mapnaam een unieke naam in voor de afbeelding met hyperlinks. Als u meerdere afbeeldingen met

hyperlinks gebruikt in hetzelfde document, moet u ervoor zorgen dat elke afbeelding met hyperlinks en unieke naam heeft.

4 Voor het definiëren van de gebieden in de afbeelding met hyperlinks, gaat u als volgt te werk:

• Selecteer het gereedschap Cirkel en sleep de muisaanwijzer over de afbeelding om een cirkelvormige hotspot te creëren.

• Selecteer het gereedschap Rechthoek en sleep de muisaanwijzer over de afbeelding om een rechthoekige hotspot te

creëren.

• Selecteer het gereedschap Veelhoek en teken een onregelmatige vorm door op iedere hoek van de hotspot te klikken. Klik

op het pijltje om de vorm af te sluiten.

Als u de hotspot hebt gemaakt, wordt de eigenschappencontrole voor hotspots weergegeven.

5 Klik op het mappictogram naast het vak Koppeling in de eigenschappencontrole voor hotspots om te bladeren naar het

bestand dat u wilt openen wanneer op de hotspot wordt geklikt of typ het pad in het vak.

6 Selecteer of typ de naam van het doelvenster van de koppeling in het vervolgkeuzemenu Doel.

In het vervolgkeuzemenu worden de namen van alle benoemde frames in het huidige document weergegeven. Als u een

frame opgeeft dat niet bestaat, wordt de gekoppelde pagina geladen in een nieuw venster met de opgegeven naam. U kunt

ook een van de volgende gereserveerde doelnamen selecteren:

• _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.

• _parent laadt het gekoppelde bestand in het bovenliggende frame of venster ten opzichte van het frame dat de koppeling

bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde bestand geladen in het volledige

browservenster.

• _self laadt het gekoppelde bestand in het frame of venster waarin de koppeling zich bevindt. Dit doel is de

standaardinstelling en hoeft u gewoonlijk niet te definiëren.

• _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.

Opmerking: De optie Doel is niet toegankelijk totdat u een koppeling hebt gedefinieerd voor de geselecteerde hotspot.

7 Typ in het tekstvak Alt alternatieve tekst voor weergave in tekstbrowsers of browsers die afbeeldingen handmatig

downloaden. In sommige browsers wordt deze tekst weergegeven als knopinfo wanneer de gebruiker de muisaanwijzer

boven de hotspot houdt.

8 Herhaal stap 4 tot en met 7 als u meer hotspots wilt definiëren in de afbeelding met hyperlinks.

9 Wanneer u alle hotspots hebt aangebracht in de afbeelding, klikt u in een leeg gebied in het document om de

eigenschappencontrole te herstellen.

Hotspots in afbeeldingen met hyperlinks aanpassen

U kunt de gedefinieerde hotspots in een afbeelding met hyperlinks gemakkelijk bewerken. U kunt hotspots verschuiven, de

grootte aanpassen of verplaatsen naar een ander AP-element.

Het is ook mogelijk om een afbeelding met hotspots te kopiëren naar een ander document of om een of meer hotspots in

een afbeelding te kopiëren naar een andere afbeelding. Hotspots die zijn gekoppeld aan de afbeelding, worden ook naar het

nieuwe document gekopieerd.

Meerdere hotspots selecteren in een afbeelding met hyperlinks

1 Gebruik het hotspot-gereedschap Pijltje om hotspots te selecteren.

DREAMWEAVER CS3

Handboek

282

2 Ga op een van de volgende manieren te werk:

• Houd de Shift-toets ingedrukt terwijl u klikt op andere hotspots die u wilt selecteren.

• Druk op Control+A (Windows) of Command+A (Macintosh) om alle hotspots te selecteren.

Hotspots verplaatsen

1 Gebruik het hotspot-gereedschap Pijltje om een hotspot te selecteren.

2 Ga op een van de volgende manieren te werk:

• Sleep de hotspot naar een andere plaats.

• Druk op Shift en de pijltoetsen om een hotspot 10 pixels in de gewenste richting te verplaatsen.

• Druk op de pijltoetsen om een hotspot 1 pixel in de gewenste richting te verplaatsen.

Hotspots groter of kleiner maken

1 Gebruik het hotspot-gereedschap Pijltje om een hotspot te selecteren.

2 Verplaats een selectiegreep van een hotspot om de vorm of omvang van de hotspot aan te passen.

Problemen met koppelingen oplossen

Zoeken naar verbroken, externe en zwevende koppelingen

Met de functie Koppelingen controleren kunt u zoeken naar verbroken koppelingen en zwevende bestanden (bestanden die

op de site aanwezig zijn maar waarnaar niet wordt verwezen in andere bestanden op de site). U kunt zoeken in geopende

bestanden, delen van de lokale site of in de hele lokale site.

Dreamweaver controleert alleen koppelingen naar documenten binnen de site. Dreamweaver stelt een lijst met externe

koppelingen in de geselecteerde documenten op, maar controleert deze niet.

U kunt bovendien zoeken naar bestanden in uw site die niet meer worden gebruikt door andere bestanden, en deze

verwijderen.

Zie ook

“Ongebruikte bestanden opsporen en verwijderen” op pagina 79

Koppelingen in het huidige document controleren

1 Sla het bestand binnen uw lokale Dreamweaver-site op.

2 Selecteer Bestand > Pagina controleren > Koppelingen.

Het rapport Verbroken koppelingen wordt weergegeven in het paneel Koppelingencontrole (in de paneelgroep Resultaten).

3 U kunt een ander rapport weergeven door Externe koppelingen te kiezen in het vervolgkeuzemenu Weergeven in het

paneel Koppelingencontrole.

Het rapport Externe koppelingen wordt weergegeven in het paneel Koppelingencontrole (in de paneelgroep Resultaten).

U kunt zoeken naar zwevende bestanden wanneer u koppelingen controleert op de hele site.

4 Sla het rapport op door op de knop Rapport opslaan in het paneel Koppelingencontrole te klikken. Het rapport is een

tijdelijk bestand: als u het niet opslaat, wordt het gewist.

Koppelingen in een deel van de lokale site controleren

1 Selecteer in het vervolgkeuzemenu Huidige sites in het paneel Bestanden een site.

2 Ga naar de Lokale weergave en selecteer de bestanden of mappen die u wilt controleren.

DREAMWEAVER CS3

Handboek

283

3 Begin de controle door een van de volgende handelingen uit te voeren:

• Klik met rechtermuisknop (Windows) of Control-klik (Macintosh) op een van de geselecteerde bestanden en selecteer

Koppelingen controleren > Geselecteerde bestanden/mappen in het snelmenu.

• Selecteer Bestand > Pagina controleren > Koppelingen.

Het rapport Verbroken koppelingen wordt weergegeven in het paneel Koppelingencontrole (in de paneelgroep Resultaten).

4 U kunt een ander rapport weergeven door Externe koppelingen te kiezen in het vervolgkeuzemenu Weergeven in het

paneel Koppelingencontrole.

Het rapport Externe koppelingen wordt weergegeven in het paneel Koppelingencontrole (in de paneelgroep Resultaten).

U kunt zoeken naar zwevende bestanden wanneer u koppelingen controleert op de hele site.

5 Sla rapporten op door op de knop Rapport opslaan in het paneel Koppelingencontrole te klikken.

Koppelingen in de hele site controleren

1 Selecteer in het vervolgkeuzemenu Huidige sites in het paneel Bestanden een site.

2 Selecteer Site > Koppelingen op de hele site controleren.

Het rapport Verbroken koppelingen wordt weergegeven in het paneel Koppelingencontrole (in de paneelgroep Resultaten).

3 U kunt een ander rapport weergeven door Externe koppelingen of Zwevende bestanden te kiezen in het

vervolgkeuzemenu Weergeven in het paneel Koppelingencontrole.

Er wordt een lijst met bestanden behorende bij het geselecteerde rapport weergegeven in het paneel Koppelingencontrole.

Opmerking: Als u het rapporttype Zwevende bestanden selecteert, kunt u zwevende bestanden direct in het paneel

Koppelingencontrole verwijderen door het gewenste bestand te selecteren in de lijst en op de Delete-toets te drukken.

4 Sla rapporten op door op de knop Rapport opslaan in het paneel Koppelingencontrole te klikken.

Verbroken koppelingen herstellen

Nadat u koppelingen hebt gecontroleerd, kunt u verbroken koppelingen en verwijzingen naar afbeeldingen direct in het

paneel Koppelingencontrole herstellen of bestanden in de lijst openen en de koppelingen herstellen in de

eigenschappencontrole.

Koppelingen herstellen in het paneel Koppelingencontrole

1 Voer een koppelingencontrole uit.

2 Selecteer de verbroken koppeling in de kolom Verbroken koppelingen (niet de kolom Bestanden) in het paneel

Koppelingencontrole (in de paneelgroep Resultaten).

Er wordt een pictogram weergegeven naast de verbroken koppeling.

3 Klik op het mappictogram naast de verbroken koppeling en blader naar het juiste bestand of typ het pad en de

bestandsnaam in het vak.

4 Druk op Tab, Enter (Windows) of Return (Macintosh).

Als er meer verbroken koppelingen naar hetzelfde bestand zijn, wordt u gevraagd of u alle verwijzingen in andere bestanden

ook wilt herstellen. Klik op Ja als u wilt dat Dreamweaver alle documenten in de lijst met verwijzingen naar dit bestand

herstelt. Klik op Nee als u wilt dat Dreamweaver alleen de huidige koppeling herstelt.

Opmerking: Als de optie Inchecken/Uitchecken voor uw site is ingeschakeld, probeert Dreamweaver de bestanden die moeten

worden gewijzigd uit te checken. Als Dreamweaver een bestand niet kan uitchecken, wordt een waarschuwing weergegeven en

wordt de verbroken verwijzing niet hersteld.

Koppelingen herstellen in de eigenschappencontrole

1 Voer een koppelingencontrole uit.

2 Ga naar het paneel Koppelingencontrole (in de paneelgroep Resultaten) en dubbelklik op een item in de kolom Bestand.

DREAMWEAVER CS3

Handboek

284

Dreamweaver opent het bestand, selecteert de verbroken verwijzing of koppeling en markeert het pad en de bestandsnaam

in de eigenschappencontrole. (Als de eigenschappencontrole niet wordt weergegeven, selecteert u Venster >

Eigenschappen.)

3 Als u een nieuw pad en een nieuwe bestandsnaam wilt instellen in de eigenschappencontrole, klikt u op het

mappictogram om naar het gewenste bestand te bladeren of typt u over de gemarkeerde tekst heen.

Als u een verwijzing naar een afbeelding bijwerkt en de afbeelding met de onjuiste afmeting wordt weergegeven, klikt u op

de tags W en H in de eigenschappencontrole of klikt u op de knop Vernieuwen om de waarden Hoogte en Breedte te

herstellen.

4 Sla het bestand op.

Wanneer een koppeling is hersteld, wordt het item verwijderd uit de lijst in het paneel Koppelingencontrole. Als een item

zichtbaar blijft in de lijst nadat u een nieuw pad of een nieuwe bestandsnaam hebt ingevoerd in het paneel

Koppelingencontrole (of nadat u uw wijzigingen in de eigenschappencontrole hebt opgeslagen), kan Dreamweaver het

nieuwe bestand niet vinden en wordt de koppeling nog steeds als verbroken beschouwd.

285

Hoofdstuk 10: Pagina's voorvertonen

In de ontwerpweergave krijgt u een idee van hoe de pagina er op het web uitziet, maar worden pagina's niet exact zo

weergegeven als in browsers. Met de functie Voorvertoning in browser kunt u tijdens het maken van het ontwerp zien hoe

pagina's er in specifieke browsers uitzien.

Pagina's voorvertonen in browsers

Voorvertoning in een browser

U kunt op elk moment een pagina in een browser voorvertonen. U hoeft de pagina niet eerst naar de server te uploaden.

Als u een voorvertoning van een pagina bekijkt, moeten alle browserfuncties werken, waaronder JavaScript-gedrag,

koppelingen binnen het document en absolute koppelingen, ActiveX®-besturingselementen en Netscape Navigator-

invoegtoepassingen, vooropgesteld dat u de vereiste invoegtoepassingen of ActiveX®-besturingselementen in uw browsers

hebt geïnstalleerd.

Voordat u een voorvertoning van een document bekijkt, slaat u het document op. Anders worden de meest recente

wijzigingen niet in de browser weergegeven.

1 Voer een van de volgende handelingen uit om een voorvertoning van de pagina te bekijken:

• Kies Bestand > Voorvertoning in browser en selecteer een van de vermelde browsers.

Opmerking: Als geen browsers worden vermeld, kiest u Bewerken > Voorkeuren of Dreamweaver > Voorkeuren (Macintosh)

en selecteert u links de categorie Voorvertoning in browser om een browser te selecteren.

• Druk op F12 (Windows) of Option+F12 (Macintosh) om het huidige document in de primaire browser weer te geven.

• Druk op Control+F12 (Windows) of Command+F12 (Macintosh) om het huidige document in de secundaire browser

weer te geven.

2 Klik op koppelingen en test de inhoud op de pagina.

Als u Internet Explorer op een Windows XP-computer met Service Pack 2 gebruikt, is het mogelijk dat de browser het

bericht weergeeft dat het bestand is beperkt en geen actieve inhoud mag weergeven. U kunt dit probleem oplossen door

Mark of the Web-code in het bestand op te nemen.

Opmerking: Inhoud die is gekoppeld via hoofdmapafhankelijke relatieve paden, wordt niet weergegeven wanneer u

documenten voorvertoont in een lokale browser, tenzij u een testserver hebt ingesteld of de optie Voorvertoning met tijdelijk

bestand is ingeschakeld in Bewerken > Voorkeuren > Voorvertoning in browser. De reden daarvoor is dat browsers de

hoofdmap van sites niet herkennen en servers wel.

Als u inhoud wilt voorvertonen die is gekoppeld via hoofdmapafhankelijke paden, plaatst u het bestand op een externe

server en kiest u Bestand > Voorvertonen in browser om het weer te geven.

3 Sluit de pagina in de browser wanneer u klaar bent met testen.

Zie ook

“Hoofdmapafhankelijke relatieve paden” op pagina 269

Actieve inhoud voorvertonen in Internet Explorer (Windows)

Als u de voorvertoning van een document met actieve inhoud bekijkt in Internet Explorer nadat u de Windows XP Service

Pack 2-update hebt geïnstalleerd, wordt actieve inhoud niet in de browser weergegeven. U kunt dit probleem oplossen door

Mark of the Web-code in het document in te voegen.

DREAMWEAVER CS3

Handboek

286

Internet Explorer blokkeert de uitvoering van actieve inhoud en scripts in de zone Lokale computer. Om

veiligheidsredenen heeft Microsoft de beperkingen versterkt ten aanzien van wat standaard in deze zone mag worden

uitgevoerd. Mark of the Web-code vertelt de browser dat actieve inhoud in een andere zone moet worden uitgevoerd, in

dit geval in de internetzone. Zie TechNote 19578 op de website van Adobe op www.adobe.com/go/19578_nl voor meer

informatie.

Mark of the Web-code invoegen

❖

Kies Opdrachten > Mark Of The Web invoegen terwijl het document in Dreamweaver is geopend.

Dreamweaver voegt de volgende regel in uw code in:

Deze regel instrueert de browser dat de actieve inhoud niet in de zone Lokale computer maar in de internetzone moet

worden uitgevoerd.

Mark of the Web-code verwijderen

1 Open in Dreamweaver het document dat de Mark of the Web-code bevat.

2 Kies Opdrachten > Mark Of The Web verwijderen.

Browsers aanwijzen voor voorvertoningen

U kunt maximaal 20 browsers voor voorvertoning definiëren, en u kunt primaire en secundaire browsers aanwijzen. Het

is raadzaam om uw site in de volgende browsers te bekijken: Internet Explorer 6.0, Netscape Navigator 7.0 en Safari browser

voor Macintosh alleen. Naast deze populairste grafische browsers, zou u uw pagina's kunnen testen in een tekstbrowser

zoals Lynx.

1 Ga op een van de volgende manieren te werk om de opties voor Voorvertoning in browser te openen:

• Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Voorvertoning

in browser in de lijst Categorie aan de linkerkant.

• Selecteer Bestand > Voorvertoning In browser > Browserlijst bewerken.

2 Als u een browser wilt toevoegen aan de lijst, klikt u op de knop Plus (+), vult u het dialoogvenster Browser toevoegen

in en klikt u op OK.

3 Als u een browser wilt verwijderen uit de lijst, selecteert u op de browser en klikt u op de knop Min (-).

4 Als u instellingen voor een geselecteerde browser wilt wijzigen, klikt u op de knop Bewerken, brengt u de wijzigingen

aan in het dialoogvenster Browserlijst bewerken en klikt u op OK.

5 Selecteer Primaire browser of Secundaire browser om op te geven of de geselecteerde browser de primaire of de

secundaire browser is.

Met F12 (Windows) of Option+F12 (Macintosh) opent u de primaire browser en met Control+F12 (Windows) of

Command+F12 (Macintosh) opent u de secundaire browser.

6 SelecteerVoorvertonenmeteentijdelijkbestandomeentijdelijkekopietemakenvoorhetbekijkenvaneenvoorbeeld

en het oplossen van fouten op de server. Schakel deze optie uit als u het document rechtstreeks wilt bijwerken.

Pagina's voorvertonen in mobiele apparaten

Mobiele inhoud voorvertonen met Adobe Device Central en Dreamweaver

Als u pagina's die zijn gemaakt in Dreamweaver, wilt voorvertonen op verschillende mobiele apparaten, kunt u Device

Central gebruiken met de ingebouwde renderfunctie voor kleine schermen van Opera. Op verschillende apparaten zijn

verschillende browsers geïnstalleerd, maar de voorvertoning laat toch goed zien hoe de inhoud zal worden weergegeven op

een geselecteerd apparaat.

1 Start Dreamweaver.

DREAMWEAVER CS3

Handboek

287

2 Open een bestand.

3 Voer een van de volgende handelingen uit:

• Selecteer Bestand > Voorvertoning in browser > Device Central.

• Klik op de werkbalk van het documentvenster en houd de knop Voorvertonen/Fouten opsporen in browser

ingedrukt en selecteer Voorvertoning in Device Central.

Het bestand wordt weergegeven op het tabblad Emulator van Device Central. Als u wilt doorgaan met testen, dubbelklikt

u op de naam van een ander apparaat in de lijst met apparaatsets of in de lijst met beschikbare apparaten.

288

Hoofdstuk 11: Werken met paginacode

Adobe® Dreamweaver® CS3 is zowel een visueel ontwerpprogramma als een krachtige code-editor, met coderingstips, code

die kan worden samengevouwen, foutopsporing voor code en andere codebewerkingsfuncties.

Code schrijven in Dreamweaver

Ondersteunde talen

Naast tekstverwerkingsmogelijkheden biedt Adobe® Dreamweaver® CS3 diverse andere functies, zoals coderingstips die u

helpen bij het schrijven van code in de volgende talen:

• HTML

• XHTML

• CSS

• JavaScript

• ColdFusion Markup Language (CFML)

• Visual Basic (voor ASP en ASP.NET)

• C# (voor ASP.NET)

• JSP

• PHP

Andere talen, zoals Perl, worden niet ondersteund door de taalspecifieke coderingsfuncties in Dreamweaver. U kunt

bijvoorbeeld Perl-bestanden maken en bewerken, maar er zijn geen coderingstips beschikbaar voor deze taal.

Zie ook

“Automatische codewijzigingen in Dreamweaver” op pagina 288

“Coderingstips gebruiken” op pagina 300

Ongeldige opmaak herstellen

Als uw document ongeldige code bevat, geeft Dreamweaver die code weer in de ontwerpweergave en wordt de code

optioneel gemarkeerd in de codeweergave. Als u de code selecteert in een van beide weergaven, wordt in de

eigenschappencontrole informatie weergegeven over waarom de code ongeldig is en hoe u dit herstelt.

U kunt voorkeuren instellen voor het automatisch herschrijven van diverse soorten ongeldige code wanneer u een

document opent.

Zie ook

“Automatische codewijzigingen in Dreamweaver” op pagina 288

“Voorkeuren voor het herschrijven van code instellen” op pagina 298

Automatische codewijzigingen in Dreamweaver

U kunt opties instellen die Dreamweaver de opdracht geven zelfgeschreven code automatisch op te schonen op basis van

criteria die u opgeeft. De code wordt echter alleen herschreven als de opties voor het herschrijven van code zijn

ingeschakeld of als u een handeling uitvoert waardoor de code verandert. Dreamweaver wijzigt de witruimte bijvoorbeeld

niet en wijzigt het hoofdlettergebruik van kenmerken niet, tenzij u de opdracht Bronopmaak toepassen gebruikt.

DREAMWEAVER CS3

Handboek

289

Enkele van deze opties voor het herschrijven van code zijn standaard ingeschakeld.

Dankzij de mogelijkheden van Roundtrip HTML in Dreamweaver kunt u uw documenten afwisselend bewerken in een

HTML-teksteditor en in Dreamweaver, terwijl dit weinig of geen invloed heeft op de inhoud en structuur van de originele

HTML-broncode van het document. Enkele van deze mogelijkheden zijn:

• U kunt een teksteditor van derden gebruiken om het huidige document te bewerken.

• Standaard brengt Dreamweaver geen wijzigingen aan in code die is gemaakt of bewerkt in een andere HTML-editor, ook

al is de code ongeldig, tenzij u opties voor het herschrijven van code instelt.

• Tags die niet worden herkend, met inbegrip van XML-tags, worden door Dreamweaver niet veranderd, omdat het

programma niet over criteria beschikt om deze tags te beoordelen. Als een niet-herkende tag een andere tag overlapt

(bijvoorbeeld

<MijnNieuweTag><em>tekst</MijnNieuwwTag></em>), zal Dreamweaver dit als een fout markeren, maar

de code niet herschrijven.

• U kunt Dreamweaver echter ook zo instellen dat ongeldige code (geel) wordt gemarkeerd in de codeweergave. Wanneer

u een gemarkeerd gedeelte selecteert, wordt in de eigenschappencontrole informatie weergegeven over hoe de fout kan

worden gecorrigeerd.

Zie ook

“De codeeromgeving aanpassen” op pagina 295

“Voorkeuren voor het herschrijven van code instellen” op pagina 298

“Sneltoetsen aanpassen” op pagina 294

“Code voor servergedrag” op pagina 293

De XHTML-code die Dreamweaver genereert

Dreamweaver genereert nieuwe XHTML-code en schoont bestaande XHTML-code zodanig op dat deze voldoet aan de

meeste XHTML-vereisten. Ook de hulpmiddelen die u nodig hebt om te voldoen aan die paar resterende XHTML-

vereisten, worden verstrekt.

Opmerking: Sommige van die vereisten gelden ook voor diverse versies van HTML.

In de volgende tabel worden de XHTML-vereisten beschreven waaraan Dreamweaver automatisch voldoet:

XHTML-vereiste Acties die Dreamweaver uitvoert

In het document moet een DOCTYPE-declaratie

staan vóór het root-element en die declaratie moet

verwijzen naar een van de drie DTD-bestanden

(Document Type Definition) voor XHTML (Strict,

Transitional of Frameset).

Er wordt een XHTML DOCTYPE toegevoegd aan een XHTML-

document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

Of, als het XHTML-document een

frameset heeft:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

frameset.dtd">

Het root-element van het document moet html

zijn, en het html-element moet de XHTML-

naamruimte aanwijzen.

Voegt alsvolgt het namespace-kenmerk toe aan het html-

element:

<html

xmlns="http://www.w3.org/1999/xhtml">

De structuur van een standaarddocument moet de

elementen head, title en body bevatten. De

structuur van een framesetdocument moet de

elementen head,

title en frameset bevatten.

Een standaarddocument bevat de elementen head, title

en body. Een framesetdocument bevat de elementen head,

title en frameset.

DREAMWEAVER CS3

Handboek

290

Alle elementen in het document moeten correct

worden genest.

<p>Dit voorbeeld is

<i>onjuist.</p></i> <p>Dit

voorbeeld is <i>correct.</i></p>

Er wordt correct geneste code gegenereerd en bij het

opschonen van XHTML wordt code die niet door

Dreamweaver is gegenereerd, correct genest.

Alle namen van elementen en kenmerken moeten

in kleine letters worden geschreven.

Namen van H

TML-elementen en -kenmerken worden

omgezet in kleine letters in de XHTML-code die wordt

gegenereerd en wanneer XHTML wordt opgeschoond,

ongeacht uw voorkeuren voor hoofdlettergebruik voor tags

en kenmerken.

Elk element moet een afsluitende tag hebben,

tenzij het element in de DTD is gedeclareerd

als

EMPTY.

Er worden afsluitende tags ingevoegd in de code die wordt

gegenereerd en wanneer XHTML wordt opgeschoond.

Lege elementen moeten een afsluitende tag

hebben ofde begintag moet eindigen op />. <br>

is bijvoorbeeld niet geldig. De juiste vorm is

<br></br> of <br/>. De volgende elementen

zijn l

ege elementen: area, base, basefont, br,

col, frame, hr, img, input, isindex, link,

meta en param.

Voor achterwaartse compatibiliteit met browsers

die niet geschikt zijn voor XML, moet er een spatie

staan vóór de /> (bijvoorbeeld <br />, en niet

<br/>).

Er worden legeel

ementen met een spatie ingevoegdvoor de

afsluitende schuine streep in lege tags in de code die wordt

gegenereerd en wanneer XHTML wordt opgeschoond.

Kenmerken kunnen niet worden geminimaliseerd.

Het kenmerk <td nowrap> is bijvoorbeeld niet

geldig. De juiste vorm is

<td nowrap="nowrap">.

Dit heeft invloed op de volgende kenmerken:

checked

, compact, declare, defer,

disabled, ismap, multiple, noresize,

noshade, nowrap, readonly en selected.

Er worden volledige kenmerk-waardeparen ingevoegd in de

code die wordt gegenereerd en wanneer XHTML wordt

opgeschoond.

Opmerking: als een HTML-browser geen HTML 4

ondersteunt, kunnen deze Booleaanse kenmerken mogelijk

niet worden geïnterpreteerd wanneer ze in hun volledige

vorm worden gebruikt.

Alle kenmerkwaarden moeten tussen

aanhalingstekens staan.

Er worden aanhalingstekens geplaatst rondom

kenmerkwaarden in de code die wordt gegenereerd en

wanneer XHTML wordt opgeschoond.

De volgende elementen moeten het kenmerk id

en het

kenmerk name bevatten: a, applet, form,

frame, iframe, img en map.

<a name="intro">Inleiding</a> is

bijvoorbeeld niet geldig. De juiste vorm is

<a id="intro">Inleiding</a> of

Inleiding</a>.

De kenmerken name en id worden telkens ingesteld op

dezelfde waarde wanneer het kenmerk name wordt

ingesteld in de eigenschappencontrole in

de code die

Dreamweaver genereert, en bij het opschonen van XHTML.

XHTML-vereiste Acties die Dreamweaver uitvoert

DREAMWEAVER CS3

Handboek

291

Zie ook

“Pagina's XHTML-compatibel maken” op pagina 314

Standaardexpressies

Standaardexpressies zijn patronen die tekencombinaties in de tekst beschrijven. U gebruikt ze in zoekopdrachten in code

om concepten te beschrijven, zoals “regels die beginnen met var” en “kenmerkwaarden die een getal bevatten”.

In de volgende tabel worden de speciale tekens in standaardexpressies beschreven met hun betekenis en voorbeelden van

het gebruik ervan. Als u zoekt naar tekst met een van de speciale tekens uit de tabel, plaatst u een backslash voor dat speciale

teken. Als u bijvoorbeeld zoekt naar het daadwerkelijke sterretje in de zin

hieraan zijn enkele voorwaarden verbonden*,

kan uw zoekopdracht er zo uitzien: verbonden\*. Als u geen backslash voor het sterretje plaatst, wordt overal in de tekst het

woord “verbonden” gevonden (en ook eventueel woorden, zoals “verbond”, “verbondenheid” en “verbonden”), niet alleen

die gevallen waarin “verbonden” wordt gevolgd door een sterretje.

Voor kenmerken met opsommingswaarden

moeten de waarden in kleine letters worden

weergegeven.

Een opsommingswaarde is een waarde in een

opgegeven lijst van toegestane waarden. Het

kenmerk align heeft bijvoorbeeld de volgende

toegestane waarden: center, justify, left en

right.

Opsommingswaarden worden weergegeven in kleine letters

in de code die wordt gegenereerd en w

anneer XHTML wordt

opgeschoond.

Alle script- en stijlelementen moeten het kenmerk

type hebben.

(Het kenmerk type van het element script is

sinds HTML 4 verplicht, toen het kenmerk

language werd afgeschaft.)

De kenmerken type en language in de script-

elementen en het kenmerk type in style-e

lementen

worden ingesteld in de code die wordt gegenereerd en bij

het opschonen van XHTML.

Alle img- en area-elementen moeten het

kenmerk alt hebben.

Deze kenmerken worden ingesteld in de code die wordt

gegenereerd en wanneer XHTML wordt opgeschoond, in

rapporten met ontbrekendealt

-kenmerken.

Teken Vindt Voorbeeld

^Begin van invoer of regel. Met ^T vindtu de “T” in“Terugnaar Oegstgeest” maar niet in “De

Titaantjes”

$Einde van invoer of regel. Met h$ vindt u de “h” in “toch” maar niet in “tochten”

* Het voorgaande teken nul of

meerdere malen.

Met um* vindt u “um” in “rum”, “

umm” in “dummy” en “u” in

“brug”

+ Het voorgaande teken éénof

meerdere malen.

Met um+ vindt u “um” in “rum” en “umm” in “dummy”, maar niets

in “brug”

? Het voorgaande teken

hooguit eenmaal (dat wil

zeggen dat het voorgaande

teken optioneel is).

Met st?on vindt u “son” in “Johnson” en “ston” in

“Johnston”

maar niets in “regenton” of “pension”

. Eén teken behalve een

nieuwe regel.

Met .an vindt u “Jan” en “kan” in de zin “Jan kan goed koken”

x|y x of y. Met FF0000|0000FF vindt u “FF0000” in

bgcolor=”#FF0000” en “0000FF” in font

color=”#0000FF”

{n} Het voorgaande teken komt

act het opgegeven aantal

keren (n) voor.

Met o{2} vindt u “oo” in “loom” en de eerste twee o's in

“hooooo” maar niets in “morgen”

XHTML-vereiste Acties die Dreamweaver uitvoert

DREAMWEAVER CS3

Handboek

292

{n,m} Het voorgaande teken komt

ten minste het opgegeven

aantal keren (n) voor en ten

hoogste het opgegeven

aantal keren (m) voor.

Met F{2,4} vindt u “FF” in “#FF0000” en de eerste vier ff-en in

“#FFFFFF”

[abc]Een van de tekens tussen de

haakjes. U kunt een

tekenbereik opgeven met

een

koppelteken

(bijvoorbeeld [a-f] komt

overeen met [abcdef ]).

Met [e-g] vindt u “e” in “bed”, “ f” in “fraai” en “g” in “gordijn”

[^abc] Elk teken dat niet tussen de

haakjes staat. U kunt een

tekenbereik opgeven met

een koppelteken

(bijvoorbeeld [^

a-f] komt

overeen met [^abcdef ]).

Met [^aeiou] vindt u in eerste instantie “r” in “oranje”, “b” in

“boek” en “k” in “eikel”

\b Een woordgrens (zoals een

spatie of regeleinde).

Met \bb vindt “b” in “boek” maar niets in “ober” of “snob”

\B Alles behalve een

woordgrens.

Met \Bb vindt u “b” in “ober” maar niets in “boek”

\d Elkcijfer. Equivalent met [0-9]. Met \d vindt u “3” in “C3PO” en “2” in “appartement 2b”

\D Een teken dat geen cijfer is.

Equivalent met [^0-9].

Met \D vindt u “S” in “900S” en “Q” in “Q45”

\f Nieuwe pagina.

n Nieuwe regel.

\r Regeleinde.

\s Eén witruimte-teken, zoals

een spatie, tab, nieuwe

pagina of nieuwe regel.

Met \sbook vindt u “boek” in “blauw boek” maar niets in

“dagboek”

\S Eén niet-witruimteteken. Met \Sboek vindt u “boek” in “dagboek” maar niets in “

blauw

boek”

\t Een tab.

\w Een alfanumeriek teken, met

inbegrip van het

onderstrepingsteken.

Equivalent met [A-Za-z0-9_].

Met b\w* vindt u “blaffende” in “de blaffende hond” en zowel

“brave” als “bruine” in “de brave bruine hond”

\W Elk niet-alfanumeriek teken.

quivalent met [^A-Za-z0-

9_].

Met \W vindt u “&” in “Jan&Martijn” en “%” in “100%”

Ctrl+Enter of

Shift+Enter

(Windows) of

Control+Retur

n of

Shift+Returnof

Command+Re

turn

(Macintosh)

Enter-teken. Zorg dat u de

optie 'Verschilleninwitruimte

negeren'uitschakelt wanneer

u hiernaar zoekt

als u geen

standaardexpressies

gebruikt. Bedenk wel dat u

hiermee alleen dat bepaalde

teken kunt vinden en niet elk

willekeurig regeleinde.

Hiermee vindt u bijvoorbeeld

niet de tag <br> of <p>.

Enter-tekens worden in de

ontwerpweergave

weergegeven als spaties, niet

als regeleinden.

Teken Vindt Voorbeeld

DREAMWEAVER CS3

Handboek

293

Gebruik haakjes om groepen binnen de standaardexpressie van elkaar te scheiden, zodat u er later naar kunt verwijzen.

Gebruik vervolgens $1, $2, $3 in het veld Vervangen door om te verwijzen naar de eerste, tweede of derde groep tussen

haakjes.

Opmerking: Als u in het vak 'Zoeken naar' wilt verwijzen naar een groep tussen haakjes eerder in de standaardexpressie,

gebruikt u \1, \2, \3 enzovoort in plaats van $1, $2, $3.

Als u bijvoorbeeld zoekt naar (\d+)\/(\d+)\/(\d+) en dit vervangt door $2/$1/$3, worden de dag en maand in een datum

met schuine strepen verwisseld. Zo kunt u datums in de Amerikaanse notatie omzetten in de Europese notatie en

omgekeerd.

Zie ook

“Zoeken naar tags, kenmerken of tekst in code” op pagina 306

“Zoekpatronen opslaan en terughalen” op pagina 307

Code voor servergedrag

Wanneer u een dynamische pagina ontwerpt en servergedrag selecteert in het paneel Servergedrag, voegt Dreamweaver een

of meer codeblokken in de pagina in die zorgen dat het servergedrag werkt.

Als u de code in een codeblok handmatig wijzigt, kunt u het servergedrag niet meer bewerken via panelen zoals de panelen

Bindingen en Servergedrag. Dreamweaver zoekt naar specifieke patronen in de paginacode om servergedrag te detecteren

en weer te geven in het paneel Servergedrag. Als u de code in een codeblok op enigerlei wijze verandert, kan Dreamweaver

het servergedrag niet meer detecteren en weergeven in het paneel Servergedrag. Het servergedrag is echter nog steeds op

de pagina aanwezig en u kunt dit bewerken in de codeeromgeving in Dreamweaver.

Zie ook

“Automatische codewijzigingen in Dreamweaver” op pagina 288

“De werkruimte optimaliseren voor visuele ontwikkeling” op pagina 512

“Databaserecords weergeven” op pagina 542

De codeeromgeving opzetten

De codeeromgeving wijzigen

U kunt de codeeromgeving in Dreamweaver aanpassen aan uw manier van werken. U kunt bijvoorbeeld de manier wijzigen

waarop u code weergeeft, verschillende sneltoetsen instellen of uw favoriete tagbibliotheek importeren en gebruiken.

Code weergeven

U kunt de broncode voor het huidige document op verschillende manieren weergeven: u kunt de code weergeven in het

documentvenster door de codeweergave in te schakelen, u kunt het documentvenster splitsen, zodat de pagina en de

bijbehorende code worden weergegeven, of u kunt werken in de codecontrole, een apart codevenster. De codecontrole

werkt op dezelfde manier als de codeweergave. U kunt dit beschouwen als een soort losstaande codeweergave voor het

huidige document.

Zie ook

“De codeopmaak wijzigen” op pagina 296

“De coderingstips instellen” op pagina 297

“Codekleuren instellen” op pagina 299

DREAMWEAVER CS3

Handboek

294

Code weergeven in het documentvenster

❖

Selecteer Beeld > Code.

Een pagina tegelijk coderen en bewerken in het documentvenster

1 Selecteer Beeld > Code en ontwerp.

De code wordt weergegeven in het bovenste deelvenster en de pagina in het onderste deelvenster.

2 Als u de pagina bovenaan wilt weergeven, selecteert u Ontwerpweergave bovenaan in het menu Weergaveopties op de

werkbalk Document.

3 Als u de afmetingen van de deelvensters in het documentvenster wilt wijzigen, sleept u de splitsbalk naar de gewenste

positie. De splitsbalk bevindt zich tussen de twee deelvensters.

De codeweergave wordt automatisch bijgewerkt wanneer u wijzigingen aanbrengt in de ontwerpweergave. Nadat u echter

wijzigingen aanbrengt in de codeweergave, moet u het document handmatig bijwerken in de ontwerpweergave door erop

te klikken in de ontwerpweergave of door op F5 te drukken.

Code weergeven in de codecontrole

De codecontrole is een apart venster, waarin u op dezelfde manier met code kunt werken als in de codeweergave.

❖ Selecteer Venster > Codecontrole. De werkbalk bevat de volgende opties:

Bestandsbeheer Hiermee kunt u het bestand plaatsen of ophalen.

Voorvertonen/fouten opsporen in browser Hiermee kunt u het document voorvertonen in een browser of fouten in het

document opsporen in een browser.

Ontwerpweergave vernieuwen Werkt het document in de ontwerpweergave bij, zodat hierin de aangebrachte wijzigingen

in de code worden doorgevoerd. Wijzigingen die u in de code aanbrengt, worden niet automatisch weergegeven in de

ontwerpweergave. Ze worden pas weergegeven nadat u een bepaalde handeling uitvoert, zoals het bestand opslaan of op

deze knop klikken.

Referentie Opent het paneel Referentie. Zie “Taalspecifiek referentiemateriaal gebruiken” op pagina 308.

Codenavigatie Biedt de mogelijkheid snel in de code te navigeren. Zie “Naar een JavaScript- of VBScript-functie gaan” op

pagina 306.

Weergaveopties Bepaalt hoe de code wordt weergegeven. Zie “Het uiterlijk van de code instellen” op pagina 295.

Zie “Code invoegen met de werkbalk Codering” op pagina 302 als u de werkbalk Codering, links in het venster, wilt

gebruiken.

De op codering gerichte werkruimte gebruiken (alleen in Windows)

In Windows kunt u een werkruimte gebruiken die lijkt op de werkruimte van Macromedia® HomeSite® van Adobe, waarbij

de paneelgroepen links in het hoofdvenster zijn verankerd in plaats van rechts. In deze werkruimte-indeling is de

eigenschappencontrole standaard samengevouwen en wordt het documentvenster standaard weergegeven in de

codeweergave.

Zie ook

“De indeling van de werkruimte kiezen (Windows)” op pagina 32

Sneltoetsen aanpassen

U kunt uw favoriete sneltoetsen gebruiken in Dreamweaver. Als u gewend bent om specifieke sneltoetsen te gebruiken,

bijvoorbeeld Ctrl+Enter om een regeleinde in te voegen, Ctrl+G om naar een bepaalde positie in de code te gaan of Shift+F6

om een bestand te valideren, kunt u deze sneltoetsen via de sneltoetseditor toevoegen aan Dreamweaver. Zie “Sneltoetsen

aanpassen” op pagina 675.

DREAMWEAVER CS3

Handboek

295

Zie ook

“Werken met codefragmenten” op pagina 301

Bestanden standaard openen in de codeweergave

Wanneer u een bestandstype opent dat normaal gesproken geen HTML bevat (zoals een JavaScript-bestand), wordt het

bestand geopend in de codeweergave (of in de codecontrole) in plaats van de ontwerpweergave. U kunt opgeven welke

bestandstypen in de codeweergave moeten worden geopend.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Bestandstypen/editors in de lijst Categorie aan de linkerkant.

3 Voeg in het vak Openen in de codeweergave de bestandsextensie toe van het bestandstype dat u automatisch wilt openen

in de codeweergave.

Typ een spatie tussen de bestandsextensies. U kunt zo veel extensies toevoegen als u wilt.

Zie ook

“Een externe editor gebruiken” op pagina 299

“Codeerfouten vinden met de validatiefunctie” op pagina 311

De codeeromgeving aanpassen

Codeervoorkeuren

U kunt de codeeromgeving van Dreamweaver aan uw wensen aanpassen door voorkeuren in te stellen voor onder andere

codeopmaak, codekleuren en het herschrijven van code.

Opmerking: Als u geavanceerde voorkeuren wilt instellen, gebruikt u de tagbibliotheek-editor (zie “Tagbibliotheken beheren”

op pagina 327).

Het uiterlijk van de code instellen

U kunt tekstterugloop instellen, regelnummers voor code weergeven, ongeldige code markeren, syntaxiskleuren voor code-

elementen instellen, inspringing instellen en verborgen tekens weergeven via het menu Weergave > Codeweergaveopties.

1 Een document weergeven in de codeweergave of de codecontrole.

2 Voer een van de volgende handelingen uit:

• Selecteer Weergave > Codeweergaveopties.

• Klik op de knop Weergaveopties op de werkbalk boven in de codeweergave of de codecontrole.

3 Schakel een of meer van de volgende opties in of uit:

Tekstterugloop Hiermee kunt u de coderegels laten teruglopen, dat wil zeggen dat ze tijdelijk zodanig worden afgebroken

dat u de regels kunt bekijken zonder horizontaal te moeten schuiven. Als u deze optie inschakelt, worden er geen

regeleinden ingevoegd, maar wordt alleen het lezen van de code gemakkelijker.

Regelnummers Hiermee kunt u regelnummers naast de code weergeven.

Verborgen tekens Hiermee kunt u speciale tekens weergeven in plaats van witruimte. Zo wordt een spatie vervangen door

een stip, een tab door een dubbele chrevron en een regeleinde door een alineamarkering.

Opmerking: Tijdelijke regeleinden die Dreamweaver gebruikt voor tekstterugloop worden niet weergegeven door een

alineamarkering.

DREAMWEAVER CS3

Handboek

296

Ongeldige code markeren Alsudezeoptieinschakelt,markeertDreamweaveralleongeldigeHTML-codeingeel.Wanneer

u een ongeldige tag selecteert, wordt in de eigenschappencontrole informatie weergegeven over de manier waarop de fout

kan worden gecorrigeerd.

Syntaxiskleuring Hiermee kunt u codekleuren in- of uitschakelen. Zie “Codekleuren instellen” op pagina 299 voor

informatie over het wijzigen van het kleurenschema.

Automatisch inspringen Hiermee kunt u ervoor zorgen dat code automatisch inspringt wanneer u op Enter drukt terwijl u

code schrijft. De nieuwe coderegel springt in tot hetzelfde niveau als de vorige regel. Zie de optie Tabgrootte in “De

codeopmaak wijzigen” op pagina 296 voor informatie over hoe u de grootte van de inspringing wijzigt.

Zie ook

“Code weergeven” op pagina 293

“Overzicht van de werkbalk Codering” op pagina 19

De codeopmaak wijzigen

U kunt het uiterlijk van uw code wijzigen door opmaakvoorkeuren in te stellen, zoals inspringing, regellengte en het

gebruik van hoofdletters en kleine letters voor namen van tags en kenmerken.

Alle opties voor codeopmaak, behalve de optie Hoofdlettergebruik vervangen in, worden alleen automatisch toegepast op

nieuwe documenten of toevoegingen aan documenten die u daarna maakt.

Als u bestaande HTML-documenten opnieuw wilt opmaken, opent u het document en selecteert u Opdrachten >

Bronopmaak toepassen.

1 Selecteer Bewerken > Voorkeuren.

2 Selecteer Codeopmaak in de lijst Categorie aan de linkerkant.

3 Stel vervolgens de volgende opties naar wens in:

Inspringen Hiermee geeft u aan of code die is gegenereerd door Dreamweaver, wel of niet moet inspringen (op basis van

de regels voor inspringing die in de voorkeuren zijn ingesteld).

Opmerking: De meeste van de inspringingsopties in dit dialoogvenster zijn alleen van toepassing op code die Dreamweaver

genereert, niet op code die u zelf typt. Als u wilt dat elke nieuwe regel code die u typt, inspringt tot hetzelfde niveau als de vorige

regel, selecteert u Weergave > Codeweergaveopties > Automatisch inspringen. Zie “Het uiterlijk van de code instellen” op

pagina 295 voor meer informatie.

Met (Tekstvak en pop-upmenu) Hiermee kunt u opgeven hoeveel spaties of tabs Dreamweaver moet gebruiken voor het

laten inspringen van de gegenereerde code. Als u bijvoorbeeld 3 typt in het tekstvak en Tabs selecteert in het pop-upmenu,

springt de code die Dreamweaver genereert, in met drie tabtekens voor elk inspringingsniveau.

Tabgrootte Hiermee bepaalt u hoeveel tekens breed elk tabteken in de codeweergave wordt weergegeven. Als Tabgrootte

bijvoorbeeld is ingesteld op 4, wordt elke tab in de codeweergave weergeven als een spatie van vier tekens breed. Als

'Inspringen met' daarnaast is ingesteld op 3 tabs, springt de code die door Dreamweaver wordt gegenereerd, in met drie

tabtekens voor elk inspringingsniveau, wat in de codeweergave wordt weergegeven als een spatie van twaalf tekens groot.

Opmerking: Dreamweaver gebruikt spaties of tabs voor inspringing. Wanneer u code invoegt, wordt een reeks spaties niet

omgezet in een tab.

Automatische terugloop Als u deze optie selecteert, wordt een regeleindeteken (ook wel een “harde return” genoemd)

ingevoegd wanneer een regel de opgegeven kolombreedte bereikt. (Dreamweaver voegt alleen regeleindetekens in op

plaatsen waar ze het uiterlijk van het document in de browser niet wijzigen. Daarom kunnen sommige regels langer blijven

dan de optie Automatische terugloop aangeeft.) De optie Terugloop in de codeweergave geeft lange regels (die langer zijn

dan de breedte van het venster) daarentegen weer alsof ze regeleindetekens bevatten, maar voegt niet daadwerkelijk

regeleindetekens in.

Type regeleinde Hiermee kunt u het type externe server (Windows, Macintosh of UNIX) opgeven die als host optreedt

voor de externe site. Als u het juiste type regeleindeteken selecteert, zorgt u ervoor dat de HTML-broncode correct wordt

weergegeven op de externe server. Deze instelling is ook handig als u werkt met een externe teksteditor die alleen bepaalde

DREAMWEAVER CS3

Handboek

297

soorten regeleinden herkent. Gebruik bijvoorbeeld CR LF (Windows) als Kladblok uw externe editor is en gebruik CR

(Macintosh) als SimpelTekst uw externe editor is.

Opmerking: Voor servers waarmee u verbinding maakt via FTP is deze optie alleen van toepassing op de binaire

overdrachtsmodus. In de ASCII-overdrachtsmodus negeert Dreamweaver deze optie. Als u bestanden downloadt in de ASCII-

modus, stelt Dreamweaver regeleinden in op basis van het besturingssysteem van uw computer. Als u bestanden uploadt in de

ASCII-modus, worden alle regeleinden ingesteld op CR LF.

Standaard-hoofdlettergebruik voor tags en Standaard-hoofdlettergebruik voor kenmerken bepalen het

hoofdlettergebruik voor namen van tags en kenmerken. Deze opties worden toegepast op tags en kenmerken die u invoegt

ofbewerktindeontwerpweergave,maarnietoptagsenkenmerkendieurechtstreeksinvoertindecodeweergaveofopde

tags en kenmerken die al in het document staan wanneer u dit opent (tenzij u ook een of beide opties voor

'Hoofdlettergebruik vervangen in' selecteert).

Opmerking: Deze voorkeuren zijn alleen van toepassing op HTML-pagina's. Dreamweaver negeert ze voor XHTML-pagina's

omdat tags en kenmerken in hoofdletters geen geldige XHTML zijn.

Hoofdlettergebruik vervangen in: Tags en kenmerken Hiermee geeft u op of de opgegeven opties voor hoofdlettergebruik

altijd moeten worden toegepast, ook wanneer u een bestaand HTML-document opent. Als u een van deze opties selecteert

en op OK klikt om het dialoogvenster te sluiten, worden alle tags en kenmerken in het huidige document direct omgezet

naar het opgegeven hoofdlettergebruik, evenals alle tags en kenmerken in elk document dat u daarna opent (totdat u deze

optieweeruitschakelt). TagsofkenmerkendieutyptindecodeweergaveendeSnelletageditor,wordeneveneensomgezet

naar het opgegeven hoofdlettergebruik, evenals tags en kenmerken die u invoegt via de invoegbalk. Als u bijvoorbeeld wilt

dat namen van tags altijd worden omgezet in kleine letters, selecteert u 'kleine letters' voor de optie Standaard-

hoofdlettergebruik voor tags en selecteert u de optie Hoofdlettergebruik vervangen in: Tags. Wanneer u vervolgens een

document opent met tagnamen in hoofdletters, zet Dreamweaver deze automatisch om in kleine letters.

Opmerking: Oudere versies van HTML staan namen van tags en kenmerken in hoofdletters en kleine letters toe, maar XHTML

vereist kleine letters voor namen van tags en kenmerken. Op het web wordt steeds meer gebruik gemaakt van XHTML, zodat

u gewoonlijk het beste kleine letters kunt gebruiken voor namen van tags en kenmerken.

TD-tag: neem geen spatie of afbreking op in de TD-tag Hiermee lost een weergaveprobleem op dat zich voordoet in

sommige oudere browsers als een spatie of regeleinde direct komt na een <td>-tag of direct voor een </td>-tag. Als u deze

optie selecteert, voegt Dreamweaver geen regeleinde toe na <td> of voor </td>, zelfs als de opmaak in de tagbibliotheek

aangeeft dat het regeleinde aanwezig moet zijn.

Geavanceerde opmaak Hiermee kunt u opmaakopties instellen voor CSS-code en voor afzonderlijke tags en kenmerken in

de tagbibliotheek-editor.

White Space Character (witruimteteken) (Alleen in de Japanse versie) Hiermee kunt u kiezen tussen   en de

Zenkaku-spatie voor HTML-code. Het witruimteteken dat u met deze optie selecteert, wordt gebruikt voor lege tags

wanneer u een tabel maakt en wanneer de optie “Meerdere opeenvolgende spaties toestaan” is ingeschakeld voor pagina's

met Japanse codering.

Zie ook

“CSS-code opmaken” op pagina 136

De coderingstips instellen

Met behulp van coderingstips kunt u snel tagnamen, kenmerken en waarden invoeren terwijl u code typt in de

codeweergave of in de Snelle tageditor.

Zelfs als coderingstips zijn uitgeschakeld, kunt u een pop-uptip weergeven in de codeweergave door op Ctrl+spatiebalk te

drukken.

1 Selecteer Bewerken > Voorkeuren.

2 Selecteer Coderingstips in de lijst Categorie aan de linkerkant.

3 Stel vervolgens de volgende opties naar wens in:

DREAMWEAVER CS3

Handboek

298

Zelfs als coderingstips zijn uitgeschakeld, kunt u een pop-uptip weergeven in de codeweergave door op Ctrl+spatiebalk te

drukken.

Tags sluiten Hiermee kunt u opgeven hoe Dreamweaver afsluitende tags moet invoegen. Dreamweaver voegt standaard een

afsluitende tag in nadat u de tekens

</ hebt getypt. U kunt dit standaardgedrag zodanig wijzigen dat de eindtag wordt

ingevoegd nadat u het laatste punthaakje (>) van de begintag typt of dat er in het geheel geen eindtag wordt ingevoegd.

Coderingstips inschakelen Hiermee kunt u coderingstips weergeven terwijl u code invoert in de codeweergave. Versleep

de schuifregelaar Vertraging om de tijd in seconden in te stellen waarna de tips worden weergegeven.

Menu's Hiermee kunt u precies bepalen welk type coderingstips tijdens het typen moeten worden weergegeven. U kunt alle

of sommige menu's gebruiken.

Zie ook

“Coderingstips gebruiken” op pagina 300

“Het menu met tips gebruiken in de Snelle tageditor” op pagina 319

Voorkeuren voor het herschrijven van code instellen

Met de voorkeuren voor het herschrijven van code kunt u opgeven of en hoe Dreamweaver de code moet wijzigen wanneer

u documenten opent, formulierelementen kopieert en plakt en kenmerkwaarden en URL's invoert met hulpmiddelen, zoals

de eigenschappencontrole. Deze voorkeuren zijn niet van toepassing wanneer u HTML of scripts bewerkt in de

codeweergave.

Als u de opties voor herschrijven uitschakelt, worden in het documentvenster items voor ongeldige opmaak weergegeven

voor HTML-code die Dreamweaver zou herschrijven.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Code herschrijven in de lijst Categorie aan de linkerkant.

3 Stel vervolgens de volgende opties naar wens in:

Onjuist geneste en niet-afgesloten tags corrigeren Hiermee worden overlappende tags herschreven.

<b><i>tekst</b></i> wordt herschreven als <b><i>tekst</i></b>. Deze optie voegt ook afsluitende aanhalingstekens en

haakjes in als deze ontbreken.

Namen van formulieritems wijzigen als deze worden geplakt Hiermee voorkomt u dubbele namen voor

formulierobjecten. Deze optie is standaard ingeschakeld.

Opmerking: In tegenstelling tot de andere opties in dit voorkeurenvenster wordt deze optie niet toegepast wanneer u een

document opent, maar alleen wanneer u een formulierelement kopieert en plakt.

Extra afsluitende tags verwijderen Hiermee verwijdert u eindtags waarvoor geen bijbehorende begintag aanwezig is.

Waarschuwen wanneer tags worden gecorrigeerd of verwijderd Hiermee geeft u een overzicht weer van technisch

ongeldige HTML-codes die Dreamweaver probeerde te corrigeren. In dit overzicht wordt de locatie van het probleem

vermeld (aan de hand van regel- en kolomnummers), zodat u de correctie kunt vinden en kunt controleren of het resultaat

naar wens is.

Deze code nooit herschrijven: In bestanden met extensies Hiermee kunt u voorkomen dat Dreamweaver code herschrijft

in bestanden met de opgegeven bestandsextensies. Deze optie is met name handig voor bestanden met tags van derden.

<, >, & en " in kenmerkwaarden coderen met & Hiermee zorgt u ervoor dat de kenmerkwaarden die u invoert of bewerkt

met Dreamweaver-hulpmiddelen, zoals de eigenschappencontrole, alleen geldige tekens bevatten. Deze optie is standaard

ingeschakeld.

Opmerking: Deze optie en de volgende opties zijn niet van toepassing op URL's die u in de codeweergave typt. Ook wijzigen

ze bestaande code in een bestand niet.

Speciale tekens niet coderen Hiermee voorkomt u dat Dreamweaver URL's zodanig verandert dat deze alleen geldige

tekens bevatten. Deze optie is standaard ingeschakeld.

DREAMWEAVER CS3

Handboek

299

Speciale tekens in URL's coderen met &# Hiermee zorgt u ervoor dat URL's die u invoert of bewerkt met Dreamweaver-

hulpmiddelen, zoals de eigenschappencontrole, alleen geldige tekens bevatten.

Speciale tekens in URL's coderen met % Deze optie werkt op dezelfde manier als de voorgaande optie, maar er wordt een

andere methode gebruikt om speciale tekens te coderen. Deze codeermethode (met het procentteken) is vaker compatibel

met oudere browsers, maar werkt minder goed met tekens uit sommige talen.

Invoegen met browserveilige scripts HiermeezorgtuervoordatvooractieveinhouddieuinvoegtmetDreamweaver,tags

worden gebruikt die de inhoud correct weergeven in de nieuwste versies van Internet Explorer. Dreamweaver gebruikt

standaard alleen browserveilige scripts voor actieve Flash- en Shockwave-inhoud. Deze functie is echter uitbreidbaar en

biedt u de mogelijkheid extensies van derden te gebruiken om andere soorten actieve inhoud correct in te voegen.

Tags converteren naar scripts bij het openen van het bestand Hiermee worden <object>-, <embed>-en<applet>-tags leeg

weergegeven en worden de juiste JavaScript-tags toegevoegd bij het openen van bestanden die actieve inhoud bevatten.

Zie ook

“HTML-bestanden uit Microsoft Word opschonen” op pagina 72

Codekleuren instellen

Met de voorkeuren voor codekleuren kunt u kleuren instellen voor algemene categorieën tags en code-elementen, zoals

formuliertags of JavaScript-id's. Als u de kleurvoorkeuren voor een bepaalde tag wilt wijzigen, bewerkt u de tagdefinitie in

de tagbibliotheek-editor.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Codekleuren in de lijst Categorie aan de linkerkant.

3 Selecteer een standaardachtergrondkleur voor de codeweergave en de codecontrole.

4 Selecteer een documenttype en klik op Kleurenschema bewerken.

5 Selecteer een item en stel de tekstkleur, achtergrondkleur en (optioneel) stijl (vet, cursief of onderstreept) in en klik op OK.

De voorbeeldcode in het voorbeeldvak verandert en toont de nieuwe kleuren en stijlen.

6 Klik op OK.

Zie ook

“De voorkeuren voor codekleuren wijzigen voor een sjabloon” op pagina 399

“Bibliotheken, tags en kenmerken bewerken” op pagina 328

Een externe editor gebruiken

U kunt een externe editor instellen, die moet worden gebruikt voor het bewerken van bestanden met specifieke

bestandsnaamextensies. U kunt bijvoorbeeld vanuit Dreamweaver een teksteditor starten, zoals BBEdit, Kladblok of

TextEdit om JavaScript-bestanden (JS-bestanden) te bewerken.

U kunt verschillende externe editors toewijzen aan verschillende bestandsnaamextensies.

Zie ook

“Bestanden standaard openen in de codeweergave” op pagina 295

Een externe editor instellen voor een bestandstype

1 Selecteer Bewerken > Voorkeuren.

2 Selecteer Bestandstypen/editors in de lijst Categorie links, stel de opties in en klik op OK.

Openen in de codeweergave Hiermee geeft u de bestandsextensies op die automatisch moeten worden geopend in de

codeweergave.

DREAMWEAVER CS3

Handboek

300

Externe code-editor Hiermee kunt u de teksteditor opgeven die moet worden gebruikt.

Gewijzigde bestanden opnieuw laden Hiermee geeft u op wat er moet gebeuren wanneer Dreamweaver detecteert dat er

extern wijzigingen zijn aangebracht in een document dat in Dreamweaver is geopend.

Opslaan bij het starten Hiermee geeft u op of Dreamweaver het huidige document altijd moet opslaan voordat de editor

wordt gestart, het document nooit moet opslaan of u moet vragen of het document moet worden opgeslagen telkens

wanneer u de externe editor start.

Fireworks Hiermee geeft u de editors op voor verschillende soorten mediabestanden.

Een externe code-editor starten

❖

Selecteer Bewerken > Bewerken met externe editor.

Code schrijven en bewerken

Coderingstips gebruiken

De coderingstips helpen u snel en foutloos code in te voegen en te bewerken. Wanneer u bepaalde tekens typt in de

codeweergave, zoals de eerste letters van een tag, kenmerk of naam van een CSS-eigenschap, wordt een lijst weergegeven

met suggesties voor het aanvullen van de tekst. U kunt deze functie gebruiken om code in te voegen of te bewerken of om

de beschikbare kenmerken voor een tag, de beschikbare parameters voor een functie of de beschikbare methoden voor een

object te bekijken.

Er zijn coderingstips beschikbaar voor diverse soorten code. Er verschijnt een lijst met geschikte items wanneer u een

bepaald teken typt dat het begin van een stuk code aangeeft. Als u bijvoorbeeld een lijst met coderingstips voor HTML-

tagnamen wilt weergeven, typt u een punthaakje openen (<).

Voor het beste resultaat, met name wanneer u coderingstips gebruikt voor functies en objecten, stelt u de optie Vertraging

in het voorkeurenvenster Coderingstips in op 0 seconden.

De lijst met coderingstips verdwijnt wanneer u op Backspace (Windows) of Delete (Macintosh) drukt.

Zie ook

“De coderingstips instellen” op pagina 297

Een menu met coderingstips weergeven

❖

Druk op Ctrl+spatiebalk.

Opmaak of andere code invoegen in de codeweergave met behulp van coderingstips

1 Typ het begin van een stuk code. Als u bijvoorbeeld een tag wilt invoegen, typt u een punthaakje openen (<). Als u een

kenmerk wilt invoegen, plaatst u de invoegpositie onmiddellijk achter een tagnaam en drukt u op de spatiebalk.

Er wordt een lijst met items (zoals namen van tags of kenmerken) weergegeven.

U sluit de lijst door op Escape te drukken.

2 Blader door de lijst met de schuifbalk of de toetsen Pijl-omhoog en Pijl-omlaag.

3 Als u een item uit de lijst wilt invoegen, dubbelklikt u erop of selecteert u het item en drukt u op Enter (Windows) of

Return (Macintosh).

Als een recent gemaakte CSS-stijl niet wordt weergegeven in een lijst met coderingstips voor CSS-stijlen, selecteert u Stijllijst

vernieuwen in de lijst met coderingstips. Als de ontwerpweergave zichtbaar is, verschijnt er mogelijk tijdelijk ongeldige code

in de ontwerpweergave nadat u Stijlenlijst vernieuwen hebt geselecteerd. U verwijdert die ongeldige code uit de

ontwerpweergave door, nadat u de stijl hebt ingevoegd, op F5 te drukken om de ontwerpweergave te vernieuwen.

4 Als u een afsluitende tag wilt invoegen, typt u

</ (slash).

DREAMWEAVER CS3

Handboek

301

Opmerking: Dreamweaver bepaalt standaard welke tag moet worden afgesloten en sluit deze voor u af. U kunt dit

standaardgedrag zodanig wijzigen dat Dreamweaver de eindtag invoegt nadat u het laatste punthaakje (>) van de begintag

typt of dat er in het geheel geen eindtag wordt ingevoegd. Selecteer Bewerken > Voorkeuren > Coderingstips en selecteer een van

de opties voor Tags sluiten.

Een tag bewerken met behulp van coderingstips

• Als u een kenmerk wilt vervangen door een ander kenmerk, verwijdert u het kenmerk en de waarde ervan en voegt u

een kenmerk met een waarde toe, zoals wordt beschreven in de vorige procedure.

• Als u een waarde wilt wijzigen, verwijdert u de waarde en voegt u een waarde toe, zoals wordt beschreven in de vorige

procedure.

Een servertaaltag bewerken met de eigenschappencontrole

U kunt de code in een servertaaltag (zoals een ASP-tag) bewerken zonder de codeweergave in te schakelen door de

eigenschappencontrole te gebruiken.

1 In de ontwerpweergave selecteert u het visuele pictogram van de tag voor de servertaal.

2 Klik in de eigenschappencontrole op de knop Bewerken.

3 Breng de wijzigingen aan in de tagcode en klik op OK.

Zie ook

“Een webtoepassing instellen” op pagina 477

Werken met codefragmenten

Met behulp van codefragmenten kunt u inhoud opslaan, zodat u deze snel opnieuw kunt gebruiken. U kunt fragmenten in

HTML, JavaScript, CFML, ASP, JSP en nog veel meer maken, invoegen, bewerken of verwijderen. U kunt uw

codefragmenten ook bewerken en delen met teamleden. Er zijn ook enkele voorgedefinieerde fragmenten beschikbaar die

u als startpunt kunt gebruiken.

Fragmenten die <font>-tags en andere verouderde elementen en kenmerken bevatten, bevinden zich in de map Legacy in

het paneel Fragmenten.

Een codefragment invoegen

1 Plaats de invoegpositie op de locatie waar u het codefragment wilt invoegen of selecteer de code waar u het fragment

omheen wilt plaatsen.

2 Dubbelklik op het fragment in het paneel Fragmenten (Venster > Fragmenten).

U kunt ook met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op het fragment klikken en

Invoegen selecteren in het pop-upmenu.

Een codefragment maken

1 Klik op het pictogram Nieuw fragment onder in het paneel Fragmenten.

2 Voer een naam in voor het fragment.

Opmerking: Namen van fragmenten mogen geen tekens bevatten die ongeldig zijn in bestandsnamen, zoals schuine strepen (/

of \), speciale tekens of dubbele aanhalingstekens (").

3 (Optioneel) Voer een beschrijving van het fragment in. Zo kunnen andere teamleden het fragment gemakkelijker

gebruiken.

4 Selecteer Rondom selectie plaatsen of Blok invoegen voor Type fragment.

a Als u Rondom selectie plaatsen kiest, voegt u code toe voor de volgende opties:

Invoegen voor Typ of plak de code die voor de huidige selectie moet worden ingevoegd.

Invoegen na Typ of plak de code die na de huidige selectie moet worden ingevoegd.

DREAMWEAVER CS3

Handboek

302

Als u standaard lege ruimte voor de blokken wilt instellen, gebruikt u regeleinden. Druk op Enter (Windows) of Return

(Macintosh) in de tekstvakken.

Opmerking: Aangezienfragmentenkunnenwordengemaaktalsbegin-ofeindblok,kuntuzerondomanderetagseninhoud

plaatsen. Dit is handig als u speciale opmaak, koppelingen, navigatie-elementen of scriptblokken wilt invoegen. Markeer

eenvoudig de inhoud waar u het fragment omheen wilt plaatsen en voeg het fragment in.

b Als u Blok invoegen kiest, typt of plakt u de code die u wilt invoegen.

5 (Optioneel) Selecteer een type voorvertoning: Code of Ontwerp.

Ontwerp Hiermee geeft u op dat de code moet worden gerenderd en moet worden weergegeven in het deelvenster

Voorvertoning van het paneel Fragmenten.

Code Hiermee geeft u op dat de code moet worden weergegeven in het deelvenster Voorvertoning.

6 Klik op OK.

Een codefragment bewerken of verwijderen

❖ Selecteer een fragment in het paneel Fragmenten en klik op de knop Fragment bewerken of Verwijderen onder in het

paneel.

Mappen met codefragmenten maken en codefragmenten beheren

1 Klik op de knop Map voor nieuwe fragmenten onder in het paneel Fragmenten.

2 Sleep fragmenten desgewenst naar de nieuwe map of naar andere mappen.

Een sneltoets voor een fragment toevoegen of bewerken

1 Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) in het paneel Fragmenten en

selecteer Sneltoetsen bewerken.

De Sneltoetseditor verschijnt.

2 Selecteer Fragmenten in het pop-upmenu Opdrachten.

Er verschijnt een lijst met fragmenten.

3 Selecteer een fragment en wijs er een sneltoets aan toe.

Zie “Sneltoetsen aanpassen” op pagina 675 voor meer informatie.

Een fragment delen met andere leden van uw team

1 Zoek het bestand met het fragment dat u wilt delen in de map Configuratie/Fragmenten in de toepassingsmap van

Dreamweaver.

2 Kopieer het fragmentbestand naar een gedeelde map op uw computer of op een netwerkcomputer.

3 Laat de andere teamleden het fragmentbestand kopiëren naar de map Configuratie/Fragmenten op hun computer.

Code invoegen met de werkbalk Codering

1 Zorg dat u zich in de codeweergave (Weergave > Code) bevindt.

2 Plaats de invoegpositie in de code of selecteer een blok code.

3 Klik op een knop op de werkbalk Codering of selecteer een item in een pop-upmenu op de werkbalk.

Alsudefunctievaneenknopwiltachterhalen,plaatstudeaanwijzeropdeknoptotdatdeknopinfowordtweergegeven.

Op de werkbalk Codering worden standaard de volgende knoppen weergegeven:

Documenten openen Hiermee geeft u een lijst weer van de documenten die zijn geopend. Wanneer u een van deze

documenten selecteert, wordt het document in het documentvenster weergegeven.

Volledige tag samenvouwen Hiermee kunt u de inhoud tussen een openingstag en een afsluitende tag samenvouwen

(bijvoorbeeld de inhoud tussen

<table> en </table>). U moet de invoegpositie in de openingstag of de afsluitende tag

plaatsen en vervolgens op de knop Volledige tag samenvouwen klikken om de tag samen te vouwen.

DREAMWEAVER CS3

Handboek

303

U kunt ook de code buiten een volledige tag samenvouwen door de invoegpositie in een openingstag of afsluitende tag te

plaatsen en op de knop Volledige tag samenvouwen klikken terwijl u Alt (Windows) of Option (Macintosh) ingedrukt

houdt. Als u daarnaast ook nog op deze knop klikt terwijl u Ctrl ingedrukt houdt, wordt de optie “intelligent samenvouwen”

uitgeschakeld, waardoor Dreamweaver de inhoud die wordt samengevouwen buiten de volledige tags, niet wordt aangepast. Zie

“Code samenvouwen” op pagina 309 voor meer informatie.

Selectie samenvouwen Hiermee vouwt u de geselecteerde code samen.

U kunt ook de code buiten de selectie samenvouwen door op de knop Selectie samenvouwen te klikken terwijl u Alt

(Windows) of Option (Macintosh) ingedrukt houdt. Als u daarnaast ook nog op deze knop klikt terwijl u Ctrl ingedrukt

houdt, wordt de optie “intelligent samenvouwen” uitgeschakeld, zodat u exact dat kunt samenvouwen wat u hebt geselecteerd,

zonder dat Dreamweaver de selectie aanpast. Zie “Code samenvouwen” op pagina 309 voor meer informatie.

Alle uitvouwen Hiermee herstelt u de samengevouwen code.

Bovenliggende tag selecteren Hiermee selecteert u de inhoud en de openingtags en afsluitende tags van de regel waarin u

de invoegpositie hebt geplaatst. Als u meerdere keren op deze knop klikt en uw tags zijn in evenwicht, worden in

Dreamweaver uiteindelijk de meest buitenste

html- en /html-tags geselecteerd.

Haakjes in evenwicht brengen Hiermee selecteert u de inhoud en de openingtags en afsluitende tags van de haakjes,

accoladesenvierkantehakenwaarinudeinvoegpositiehebtgeplaatst.Alsumeerderekerenopdezeknopkliktenuwtags

zijn in evenwicht, worden in Dreamweaver uiteindelijk de meest buitenste haakjes, accolades of vierkante haken in het

document geselecteerd.

Regelnummers Hiermee kunt u nummers aan het begin van elke coderegel verbergen of weergeven.

Ongeldige code markeren Markeer ongeldige code geel.

Commentaar toepassen Hiermee kunt u commentaartags rond geselecteerde code plaatsen of nieuwe commentaartags

openen.

• Met HTML-commentaar worden de tags <!-- en --!> rond de geselecteerde code geplaatst of wordt een nieuwe tag

geopend als er geen code is geselecteerd.

• Met Commentaar // toepassen wordt de tag // ingevoegd aan het begin van elke regel geselecteerde CSS- of JavaScript-

code, of wordt een enkele

//-tag ingevoegd als er geen code is geselecteerd.

• Met Commentaar /* */ toepassen worden de tags /* en */ rond de geselecteerde CSS- of JavaScript-code geplaatst.

• Commentaar ' toepassen is voor Visual Basic-code. Met deze optie wordt één aanhalingsteken ingevoegd aan het begin

van elke regel Visual Basic-script of wordt één aanhalingsteken ingevoegd op de invoegpositie als er geen code is

geselecteerd.

• Wanneer u in een ASP-, ASP.NET-, JSP-, PHP- of ColdFusion-bestand werkt en u de optie Servercommentaar selecteert,

detecteert Dreamweaver automatisch de juiste commentaartag en wordt deze op de selectie toegepast.

Commentaar verwijderen Hiermee verwijdert u commentaartags uit de geselecteerde code. Als een selectie geneste

commentaren bevat, worden alleen de buitenste commentaartags verwijderd.

Tags rondom plaatsen Hiermee plaatst u de tags die u in de Snelle tageditor hebt geselecteerd, rond de code.

Recent gebruikte fragmenten Hiermee kunt u recent gebruikte codefragmenten uit het paneel Fragmenten invoegen. Zie

“Werken met codefragmenten” op pagina 301 voor meer informatie.

CSS verplaatsen of converteren Hiermee kunt u CSS naar een andere locatie verplaatsen of inline CSS converteren naar

CSS-regels. Zie “CSS-regels verplaatsen” op pagina 133 en “Inline CSS converteren naar een CSS-regel” op pagina 134.

Code inspringen Hiermee schuift u de selectie naar rechts.

Code uitspringen Hiermee verschuift u de selectie naar links.

Broncode opmaken Hiermeepastueerdergespecificeerdecodeopmaaktoeopdegeselecteerdecodeofopdehelepagina

als er geen code is geselecteerd. U kunt ook snel voorkeuren voor code-opmaak instellen door Instellingen codeopmaak te

selecteren via de knop Broncode opmaken of door tagbibliotheken te bewerken door Tagbibliotheken bewerken te

selecteren.

DREAMWEAVER CS3

Handboek

304

Het aantal knoppen dat beschikbaar is op de werkbalk Codering hangt af van de grootte van de codeweergave in het

documentvenster. Als u alle beschikbare knoppen wilt weergeven, moet u het formaat van het venster met de codeweergave

wijzigen of op de uitvouwpijl onder aan de werkbalk Codering klikken.

U kunt de werkbalk Codering ook bewerken om meer knoppen weer te geven (zoals Tekstterugloop, Verborgen tekens en

Automatisch inspringen) of knoppen te verbergen die u niet wilt gebruiken. U kunt dit echter alleen doen door

bewerkingen uit te voeren op het XML-bestand dat de werkbalk genereert. Zie Dreamweaver uitbreiden voor meer

informatie.

Opmerking: De knop waarmee u verborgen tekens kunt weergeven is geen standaardknop op de werkbalk Codering, maar is

beschikbaar in het menu Weergave (Weergave > Codeweergaveopties > Verborgen tekens).

Zie ook

“Controleren of tags en haakjes in evenwicht zijn” op pagina 313

“Overzicht van de werkbalk Codering” op pagina 19

“Werkbalken weergeven” op pagina 26

Code invoegen met de invoegbalk

1 Plaats de invoegpositie in de code.

2 Selecteer de gewenste categorie op de invoegbalk.

3 Klik op een knop op de invoegbalk of selecteer een item in een pop-upmenu op de invoegbalk.

Wanneer u klikt op een pictogram, verschijnt de code direct op de pagina of verschijnt er een dialoogvenster waarin u om

meer informatie wordt gevraagd om de code te voltooien.

Alsudefunctievaneenknopwiltachterhalen,plaatstudeaanwijzeropdeknoptotdatdeknopinfowordtweergegeven.

Het aantal en type knoppen dat beschikbaar is op de invoegbalk hangt af van het huidige documenttype. Dit hangt ook af

van het feit of u de codeweergave of de ontwerpweergave gebruikt.

Hoewel de invoegbalk een reeks veelgebruikte tags biedt, bevatdezebalknietalletags. Alsudekeuzewilthebbenuitmeer

tags, gebruikt u de tagkiezer.

Zie ook

“Overzicht van de invoegbalk” op pagina 17

Tags invoegen met de tagkiezer

Met de tagkiezer kunt u elke tag uit de tagbibliotheken van Dreamweaver (waaronder ook ColdFusion- en ASP.NET-

bibliotheken) in uw pagina invoegen.

1 Plaats de invoegpositie in de code, klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets

(Macintosh) en selecteer Tag invoegen.

De tagkiezer verschijnt. Het linkerdeelvenster bevat een lijst met ondersteunde tagbibliotheken, terwijl in het

rechterdeelvenster de afzonderlijke tags in de geselecteerde tagbibliotheek worden weergegeven.

2 Selecteer een categorie met tags in de tagbibliotheek of vouw de categorie uit en selecteer een subcategorie.

3 Selecteer een tag in het rechterdeelvenster.

4 Als u informatie over syntaxis en gebruik voor de tag wilt weergeven in de tagkiezer, klikt u op de knop Taginfo.

Eventueel beschikbare informatie over de tag wordt weergegeven.

5 Als u dezelfde informatie over de tag wilt weergeven in het paneel Referentie, klikt u op het pictogram <?>. Eventueel

beschikbare informatie over de tag wordt weergegeven.

6 Klik op Invoegen als u de geselecteerde tag in de code wilt invoegen.

DREAMWEAVER CS3

Handboek

305

Als de tag in het rechterdeelvenster verschijnt met punthaken (bijvoorbeeld <title></title>),vereistdezetaggeenextra

informatie en wordt de tag onmiddellijk in het document ingevoegd op de invoegpositie.

Als de tag aanvullende informatie vereist, verschijnt er een tageditor.

7 Als er een tageditor wordt geopend, voert u de aanvullende informatie in en klikt u op OK.

8 Klik op de knop Sluiten.

Zie ook

“De tagbibliotheken van Dreamweaver” op pagina 327

Tags bewerken met tageditors

U gebruikt tageditors om de kenmerken van tags te bekijken, op te geven en te bewerken.

1 Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op een tag in de codeweergave

ofopeenobjectindeontwerpweergaveenselecteerTagbewerkeninhetpop-upmenu.(Deinhoudvanditdialoogvenster

hangt af van de geselecteerde tag.)

2 Geef kenmerken voor de tag op of bewerk ze en klik op OK.

Als u meer informatie wilt over de tag in de tageditor, klikt u op Taginfo.

Codeblokken inspringen

Terwijl u code schrijft en bewerkt in de codeweergave of de codecontrole, kunt u het inspringingsniveau van een

geselecteerd codeblok of een regel code wijzigen en deze telkens één tab naar links of naar rechts verschuiven.

Het geselecteerde codeblok inspringen

• Druk op Tab.

• Selecteer Bewerken > Code inspringen.

De inspringing van het geselecteerde codeblok verkleinen

• Druk op Shift+Tab.

• Selecteer Bewerken > Code niet inspringen.

Code kopiëren en plakken

1 Kopieer de code in de codeweergave of in een andere toepassing.

2 Plaats de invoegpositie in de codeweergave en selecteer Bewerken > Plakken.

Zie ook

“Samengevouwen codefragmenten plakken en verplaatsen” op pagina 311

HTML-commentaar invoegen

Commentaar is beschrijvende tekst die u in de HTML-code invoegt om de code toe te lichten of om andere informatie te

bieden. De tekst van het commentaar is alleen zichtbaar in de codeweergave en wordt niet weergegeven in een browser.

Commentaar invoegen op de invoegpositie

❖

Selecteer Invoegen > Commentaar.

In de codeweergave wordt een commentaartag ingevoegd en de invoegpositie wordt in het midden van de tag geplaatst.

Typ uw commentaar.

DREAMWEAVER CS3

Handboek

306

In de ontwerpweergave verschijnt het dialoogvenster Commentaar. Bewerk het commentaar en klik op OK.

Commentaarmarkeringen weergeven in de ontwerpweergave

❖

Selecteer Weergave > Visuele hulpmiddelen > Onzichtbare elementen.

Zorg dat de optie Commentaar is geselecteerd bij Onzichtbare elementen omdat de commentaarmarkering anders niet

verschijnt.

Een bestaand commentaar bewerken

• In de codeweergave zoekt u het commentaar en bewerkt u de tekst ervan.

• In de ontwerpweergave selecteert u de commentaarmarkering, bewerkt u de tekst van het commentaar in de

eigenschappencontrole en klikt u in het documentvenster.

Naar een JavaScript- of VBScript-functie gaan

In de codeweergave en de codecontrole kunt u een lijst weergeven met alle JavaScript- of VBScript-functies in uw code en

naar een van die functies springen.

1 Geef het document weer in de codeweergave (Weergave > Code) of de codecontrole (Venster > Codecontrole).

2 Voer een van de volgende handelingen uit:

• Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) ergens in de codeweergave en

selecteer het vervolgmenu Functies in het snelmenu.

Het vervolgmenu Functies verschijnt niet in de ontwerpweergave.

Eventuele JavaScript- of VBScript-functies in de code worden weergegeven in het vervolgmenu.

Als u de functies in alfabetische volgorde wilt weergeven, klikt u met de rechtermuisknop en ingedrukte Ctrl-toets

(Windows) of met ingedrukte Option- en Control-toets (Macintosh) in de codeweergave en selecteert u het vervolgmenu

Functies.

• Klik in de codecontrole op de knop Codenavigatie ({ }) op de werkbalk.

3 Selecteer een functienaam om naar die functie in de code te springen.

Zoeken naar tags, kenmerken of tekst in code

U kunt zoeken naar specifieke tags, kenmerken en kenmerkwaarden. U kunt bijvoorbeeld zoeken naar alle img-tags zonder

het kenmerk

alt.

U kunt ook zoeken naar specifieke tekenreeksen die zich al dan niet binnen een set tags bevinden. U kunt bijvoorbeeld

zoeken naar het woord

Naamloos in een title-tag om alle pagina's zonder titel op uw site op te sporen.

1 Open het document waarin u wilt zoeken of selecteer documenten of een map in het paneel Bestanden.

2 Selecteer Bewerken > Zoeken en vervangen.

3 Geef op in welke bestanden moet worden gezocht, geef het soort zoekbewerking aan en geef op naar welke tekst of tag

moet worden gezocht. Voer desgewenst vervangende tekst in. Klik daarna op een van de zoekknoppen of een van de

vervangknoppen.

4 Klik op de knop Sluiten.

5 Als u nogmaals wilt zoeken zonder het dialoogvenster Zoeken en vervangen weer te geven, drukt u op F3 (Windows) of

Command+G (Macintosh).

Zie ook

“Standaardexpressies” op pagina 291

“Tekst zoeken en vervangen” op pagina 220

DREAMWEAVER CS3

Handboek

307

Zoekpatronen opslaan en terughalen

U kunt zoekpatronen opslaan en later opnieuw gebruiken.

Zie ook

“Standaardexpressies” op pagina 291

“Tekst zoeken en vervangen” op pagina 220

Een zoekpatroon opslaan

1 Stel in het dialoogvenster Zoeken en vervangen (Bewerken > Zoeken en vervangen) de parameters voor de zoekopdracht in.

2 Klik op de knop Query opslaan (het schijfpictogram).

3 In het dialoogvenster dat verschijnt, navigeert u naar de map waarin u query's wilt opslaan. Typ een bestandsnaam voor

de query en klik op Opslaan.

Als u met het zoekpatroon wilt zoeken naar

img-tags zonder alt-kenmerk, kunt u de query img_geen_alt.dwr noemen.

Opmerking: Opgeslagen query's krijgen de bestandsextensie .dwr. Opgeslagen query's uit oudere versies van Dreamweaver

kunnen de extensie .dwq hebben.

Een zoekpatroon laden

1 Selecteer Bewerken > Zoeken en vervangen.

2 Klik op de knop Query laden (het mappictogram).

3 Navigeer naar de map waarin uw query's zijn opgeslagen. Selecteer een querybestand en klik op Openen.

4 Klik op Volgende zoeken, Alles zoeken, Vervangen of Alles vervangen om de zoekopdracht te starten.

Codeselecties wijzigen

1 Selecteer een stuk code in de codeweergave en klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets

(Macintosh).

2 Selecteer een van de volgende opties in het vervolgmenu Selectie:

Selectie samenvouwen Hiermee vouwt de geselecteerde code samen.

Buitenste selectie samenvouwen Hiermee vouwt u alle code buiten de geselecteerde code samen.

Selectie uitvouwen Hiermee vouwt u het geselecteerde codefragment uit.

Volledige tag samenvouwen Hiermee kunt u de inhoud tussen een openingstag en een afsluitende tag samenvouwen

(bijvoorbeeld de inhoud tussen

<table> en </table>).

Buitenste volledige tag samenvouwen Hiermee kunt u de inhoud buiten een openingstag en een afsluitende tag

samenvouwen (bijvoorbeeld de inhoud buiten

<table> en </table>).

Alle uitvouwen Hiermee herstelt u de samengevouwen code.

HTML-commentaar toepassen Hiermee worden de tags <!-- en --!> rond de geselecteerde code geplaatst of wordt een

nieuwe tag geopend als er geen code is geselecteerd.

Commentaar /* */ toepassen Hiermee worden de tags /* en */ rond de geselecteerde CSS- of JavaScript-code geplaatst.

Commentaar // toepassen Hiermee wordt de tag // ingevoegd aan het begin van elke regel geselecteerde CSS- of

JavaScript-code, of wordt een enkele

//-tag ingevoegd als er geen code is geselecteerd.

Commentaar ' toepassen Met deze optie wordt één aanhalingsteken ingevoegd aan het begin van elke regel Visual Basic-

script of wordt één aanhalingsteken ingevoegd op de invoegpositie als er geen code is geselecteerd.

Servercommentaar toepassen Hiermee worden tags rond de geselecteerde code geplaatst. Wanneer u in een ASP-,

ASP.NET-, JSP-, PHP- of ColdFusion-bestand werkt en u de optie Servercommentaar selecteert, detecteert Dreamweaver

automatisch de juiste commentaartag en wordt deze op de selectie toegepast.

DREAMWEAVER CS3

Handboek

308

Hack met backslash-commentaar toepassen Hiermee worden commentaartags rond de geselecteerde CSS-code geplaatst

die ervoor zorgen dat Internet Explorer 5 for Macintosh de code negeert.

Caio-hack toepassen Hiermee worden commentaartags rond de geselecteerde CSS-code geplaatst die ervoor zorgen dat

Netscape Navigator 4 de code negeert.

Commentaar verwijderen Hiermee verwijdert u commentaartags uit de geselecteerde code. Als een selectie geneste

commentaren bevat, worden alleen de buitenste commentaartags verwijderd.

Hack met backslash-commentaar verwijderen Hiermee worden commentaartags uit de geselecteerde CSS-code

verwijderd. Als een selectie geneste commentaren bevat, worden alleen de buitenste commentaartags verwijderd.

Caio-hack verwijderen Hiermee worden commentaartags uit de geselecteerde CSS-code verwijderd. Als een selectie

geneste commentaren bevat, worden alleen de buitenste commentaartags verwijderd.

Tabs converteren naar spaties Hiermee wordt elke tab in de selectie geconverteerd naar een aantal spaties dat gelijk is aan

de waarde voor Tabgrootte die is ingesteld via de voorkeuren voor Codeopmaak. Zie “De codeopmaak wijzigen” op

pagina 296 voor meer informatie.

Spaties converteren naar tabs Hiermee wordt reeksen spaties in de selectie naar tabs geconverteerd. Elke reeks spaties

bestaande uit een aantal spaties dat gelijk is aan de tabgrootte wordt omgezet in één tab.

Inspringen Hiermee kunt u de selectie laten inspringen, waarbij deze naar rechts opschuift. Zie “Codeblokken inspringen”

op pagina 305 voor meer informatie.

Uitspringen Hiermee verschuift u de selectie naar links.

Alle tags verwijderen Hiermee kunt u alle tags in de selectie verwijderen.

Lijnen converteren naar tabel Hiermee plaatst u een table-tag zonder kenmerken rond de selectie.

Regeleinden toevoegen Hiermee voegt u br-tag toe aan het einde van elke regel van de selectie.

Converteren naar hoofdletters Hiermee converteert u alle letters in de selectie (met inbegrip van namen en waarden van

tags en kenmerken) naar hoofdletters.

Converteren naar kleine letters Hiermee converteert u alle letters in de selectie (met inbegrip van namen en waarden van

tags en kenmerken) naar kleine letters.

Tags converteren naar hoofdletters Hiermee converteert u alle namen van tags en kenmerken en alle waarden van

kenmerken in de selectie naar hoofdletters.

Tags converteren naar kleine letters Hiermee converteert u alle namen van tags en kenmerken en alle waarden van

kenmerken in de selectie naar kleine letters.

Zie ook

“Codefragmenten samenvouwen en uitvouwen” op pagina 310

Taalspecifiek referentiemateriaal gebruiken

Het paneel Referentie vormt een snel naslaghulpmiddel voor opmaaktalen, programmeertalen en CSS-stijlen. Dit paneel

biedt informatie over de specifieke tags, objecten en stijlen waarmee u werkt in de codeweergave (of de codecontrole). Het

paneel Referentie biedt ook voorbeeldcode die u in uw documenten kunt plakken.

Het paneel Referentie openen

1 Voer in de codeweergave een van de volgende handelingen uit:

• Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op een tag, kenmerk of trefwoord

en selecteer Referentie in het snelmenu.

• Plaats de invoegpositie in een tag, kenmerk of trefwoord en druk op Shift+F1.

DREAMWEAVER CS3

Handboek

309

Het paneel Referentie wordt geopend en toont informatie over de tag, het kenmerk of het trefwoord waarop u klikte.

2 Als u het tekstformaat in het paneel Referentie wilt aanpassen, selecteert u Groot lettertype, Normale grootte lettertype

of Klein lettertype in het optiemenu (het pijltje in de rechterbovenhoek van het paneel).

Voorbeeldcode in een document plakken

1 Klik ergens in de voorbeeldcode in het paneel Referentie.

De hele voorbeeldcode wordt gemarkeerd.

2 Selecteer Bewerken > Kopiëren en plak de voorbeeldcode in het document in de codeweergave.

Bladeren in de inhoud van het paneel Referentie

1 Als u tags, objecten of stijlen uit een ander boek wilt weergeven, selecteert u een ander boek in het pop-upmenu Boek.

2 Als u informatie over een bepaald item wilt weergeven, selecteert u dit in het pop-upmenu Tag, Object, Stijl of CFML

(afhankelijk van het geselecteerde boek).

3 Als u informatie wilt weergeven over een kenmerk van het geselecteerde item, selecteert u het kenmerk in het pop-

upmenu naast het pop-upmenu Tag, Object, Stijl of CFML.

Dit menu bevat een lijst met kenmerken voor het geselecteerde item. De standaardselectie is Beschrijving, dat een

beschrijving van het gekozen item weergeeft.

Code afdrukken

U kunt uw code afdrukken, zodat u deze offline kunt bewerken, kunt archiveren of kunt verspreiden.

1 Open een pagina in de codeweergave.

2 Selecteer Bestand > Code afdrukken.

3 Stel afdrukopties in en klik op OK (Windows) of Druk af (Macintosh).

Code samenvouwen

U kunt codefragmenten samenvouwen en uitvouwen, zodat u verschillende delen van uw document kunt bekijken zonder

de schuifbalk te moeten gebruiken. Als u bijvoorbeeld alle CSS-regels in de

head-tag wilt weergeven die van toepassing zijn

op een

div-tag verderop op de pagina, kunt u alles tussen de head-tag en de div-tag zo samenvouwen dat u beide

codesecties tegelijk kunt zien. Hoewel u codefragmenten kunt selecteren door een selectie aan te brengen in de

ontwerpweergave of de codeweergave, kunt u code alleen samenvouwen in de codeweergave.

Opmerking: In bestanden die zijn gemaakt op basis van Dreamweaver-sjablonen, wordt alle code volledig uitgevouwen

weergegeven, ook al bevat het sjabloonbestand (.dwt) samengevouwen codefragmenten.

DREAMWEAVER CS3

Handboek

310

Zie ook

“Samengevouwen codefragmenten plakken en verplaatsen” op pagina 311

“Code invoegen met de werkbalk Codering” op pagina 302

“Code opschonen” op pagina 312

Codefragmenten samenvouwen en uitvouwen

Wanneer u code selecteert, wordt er een reeks samenvouwknoppen weergegeven naast de selectie (mintekens in Windows,

verticale driehoekjes op de Macintosh). Klik op de knoppen om de selectie samen te vouwen of uit te vouwen. Wanneer

de code wordt samengevouwen, veranderen de samenvouwknoppen in een uitvouwknop (een plusteken in Windows, een

horizontaal driehoekje op de Macintosh).

Soms wordt niet exact het geselecteerde codefragment samengevouwen. Dreamweaver gebruikt “intelligent samenvouwen”

om de code samen te vouwen tot de meest gangbare en visueel aantrekkelijke selectie. Als u bijvoorbeeld een ingesprongen

tag selecteert en vervolgens ook de ingesprongen spaties voor de tag selecteert, vouwt Dreamweaver niet de ingesprongen

spaties samen, omdat de meeste gebruikers verwachten dat hun inspringingen behouden blijven. Als u 'intelligent

samenvouwen' wilt uitschakelen en Dreamweaver wilt dwingen precies datgene samen te vouwen wat u hebt geselecteerd,

houdt u de Ctrl-toets ingedrukt voordat u de code samenvouwt.

Er wordt bovendien een waarschuwingspictogram weergegeven op samengevouwen codefragmenten als een fragment

fouten bevat of code die niet door bepaalde browsers wordt ondersteund.

U kunt de code ook samenvouwen door met ingedrukte Alt-toets (Windows) of Option-toets (Macintosh) te klikken op een

van de samenvouwknoppen of door te klikken op de knop Selectie samenvouwen op de werkbalk Codering.

1 Selecteer een stuk code.

2 Selecteer Bewerken > Code samenvouwen en selecteer een van de opties.

Zie ook

“Codeselecties wijzigen” op pagina 307

“Code invoegen met de werkbalk Codering” op pagina 302

Een samengevouwen codefragment selecteren

❖

Klik op het samengevouwen codefragment in de codeweergave.

Opmerking: Als u in de ontwerpweergave code selecteert die deel uitmaakt van een samengevouwen codefragment, wordt dat

fragment automatisch uitgevouwen in de codeweergave. Als u in de ontwerpweergave code selecteert die een volledig

codefragment vormt, blijft dat fragment samengevouwen in de codeweergave.

De code in een samengevouwen codefragment weergeven zonder dit uit te vouwen

❖

Plaats de muisaanwijzer op het samengevouwen codefragment.

Code samenvouwen en uitvouwen met sneltoetsen

❖

U kunt ook de volgende sneltoetsen gebruiken:

Opdracht Windows Macintosh

Selectie samenvouwen Ctrl+Shift+C Command+Shift+C

Buitenste selectie samenvouwen Ctrl+Alt+C Command+Alt+C

Selectie uitvouwen Ctrl+Shift+E Command+Shift+E

DREAMWEAVER CS3

Handboek

311

Samengevouwen codefragmenten plakken en verplaatsen

U kunt samengevouwen codefragmenten kopiëren en plakken. U kunt samengevouwen codefragmenten verplaatsen door

ze te verslepen.

Zie ook

“Code invoegen met de werkbalk Codering” op pagina 302

“Code opschonen” op pagina 312

Een samengevouwen codefragment kopiëren en plakken

1 Selecteer het samengevouwen codefragment.

2 Selecteer Bewerken > Kopiëren.

3 Plaats de invoegpositie op de locatie waar u de code wilt plakken.

4 Selecteer Bewerken > Plakken.

Opmerking: U kunt een codefragment plakken in andere toepassingen, maar in dat geval blijft de code niet samengevouwen.

Een samengevouwen codefragment verslepen

1 Selecteer het samengevouwen codefragment.

2 Sleep de selectie naar de nieuwe locatie.

Als u een kopie van de selectie wilt verslepen, houdt u Ctrl (Windows) of Alt (Macintosh) ingedrukt tijdens het slepen.

Opmerking: U kunt code niet naar andere documenten slepen.

Code optimaliseren en fouten opsporen

Codeerfouten vinden met de validatiefunctie

Met behulp van de validatiefunctie in Dreamweaver kunt u snel tag- en syntaxisfouten in uw code opsporen. U kunt de talen

opgeven die de validatiefunctie voor de controle moet gebruiken, de specifieke problemen waarop de validatiefunctie moet

controleren en de soorten fouten die de functie moet melden.

Opmerking: Validatievoorkeuren worden genegeerd als u een document valideert waarin expliciet een doctype wordt

opgegeven.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Validatiefunctie in de lijst Categorie aan de linkerkant.

3 Selecteer de tagbibliotheken die voor de validatie gebruikt moeten worden.

U kunt meerdere versies van dezelfde tagbibliotheek of taal selecteren. Als u bijvoorbeeld HTML 4.0 selecteert, kunt u ook

HTML 3.2 of HTML 2.0 selecteren. Selecteer de vroegste versie aan de hand waarvan u de code wilt valideren. Als een

document bijvoorbeeld geldige HTML 2.0-code bevat, zal dit ook geldige HTML 4.0-code zijn.

4 Klik op Opties en stel opties voor die bibliotheken in.

Volledige tag samenvouwen Ctrl+Shift+J Command+Shift+J

Buitenste volledige tag

samenvouwen

Ctrl+Alt+J Command+Alt+J

Alle uitvouwen Ctrl+Alt+E Command+Alt+E

Opdracht Windows Macintosh

DREAMWEAVER CS3

Handboek

312

5 Selecteer weergaveopties voor de soorten fouten en waarschuwingen die moeten worden opgenomen in het

validatierapport.

6 Selecteer de items waarop de validatiefunctie moet controleren:

Aanhalingstekens in tekst Hiermee geeft u aan dat Dreamweaver u telkens moet waarschuwen wanneer er

aanhalingstekens in de tekst van het document worden gebruikt. U moet de entiteit " gebruiken in plaats van

aanhalingstekens in de tekst van HTML-documenten.

Entiteiten in tekst Hiermee geeft u aan dat Dreamweaver moet aanbevelingen moet doen voor het veranderen van

bepaalde tekens (zoals en-teken (&), kleiner-dan (<) en groter-dan (>)) in hun equivalente HTML-entiteiten.

7 Klik op OK om het dialoogvenster Opties voor validatie te sluiten en klikt nogmaals op OK om de voorkeuren in te

stellen.

Zie ook

“Tags valideren” op pagina 313

Code opschonen

U kunt automatisch lege tags verwijderen, geneste font-tags combineren en rommelige of onleesbare HTML- of XHTML-

code verbeteren.

Zie “Bestaande documenten openen en bewerken” op pagina 72 voor informatie over het opschonen van HTML die is

gegenereerd vanuit een Microsoft Word-document.

1 Open een document:

• Als het een HTML-document is, selecteert u Opdrachten > HTML opruimen.

• Als het een XHTML-document is, selecteert u Opdrachten > XHTML opruimen.

Voor een XHTML-document worden met de opdracht XHTML opruimen niet alleen de HTML-opschoonbewerkingen

uitgevoerd, maar worden ook syntaxisfouten hersteld, worden tagkenmerken ingesteld op kleine letters en worden de

ontbrekende vereiste kenmerken voor een tag toegevoegd of gerapporteerd.

2 Selecteer de gewenste opties in het dialoogvenster dat verschijnt en klik op OK.

Opmerking: Afhankelijk van de grootte van het document en het aantal geselecteerde opties kan het enkele seconden duren om

het document op te schonen.

Lege containertags verwijderen Hiermee verwijdert u tags zonder inhoud ertussen. De tags <b></b> en <font

color="#FF0000"></font>

zijn bijvoorbeeld lege tags, maar de <b>-tag in <b>enige tekst</b> is dat niet.

Overbodige geneste tags verwijderen Hiermeeverwijdertualleoverbodigeexemplarenvaneentag.Indecode<b>Dit is

wat ik <b>werkelijk</b> wilde zeggen</b>

zijn bijvoorbeeld de b-tags rond het woord werkelijkoverbodig. Deze worden

verwijderd.

Niet-Dreamweaver HTML-commentaar verwijderen Hiermee verwijdert u alle commentaar dat niet is ingevoegd door

Dreamweaver. De tag

zou bijvoorbeeld worden verwijderd, maar de tag

niet omdat het een Dreamweaver-commentaar is dat het begin van

een bewerkbaar gedeelte in een sjabloon aangeeft.

Speciale Dreamweaver-opmaakcode verwijderen HiermeeverwijdertucommentaardatDreamweaveraancodetoevoegt

om ervoor te zorgen dat documenten automatisch kunnen worden bijgewerkt wanneer sjablonen en bibliotheekitems

worden bijgewerkt. Als u deze optie selecteert wanneer u code opschoont in een document dat op een sjabloon is gebaseerd,

wordt het document losgekoppeld van de sjabloon. Zie “Een document loskoppelen van een sjabloon” op pagina 395 voor

meer informatie.

Specifieke tag(s) verwijderen Hiermee verwijdert u de tags die u opgeeft in het aangrenzend tekstvak. Gebruik deze optie

als u aangepaste tags wilt verwijderen die zijn ingevoegd door andere visuele editors en andere tags die u niet op uw site

wilt weergeven (zoals

blink) U moet meerdere tags van elkaar scheiden met komma's (bijvoorbeeld font,blink).

DREAMWEAVER CS3

Handboek

313

Geneste <font>-tags indien mogelijk combineren Hiermee geeft u op dat twee of meer font-tags moeten worden

samengevoegd wanneer deze hetzelfde tekstbereik controleren.

<font size="7"><font color="#FF0000">big

red</font></font>

zou bijvoorbeeld worden veranderd in <font size="7" color="#FF0000">big red</font>.

Logboek tonen bij voltooiing Hiermee geeft u een venster weer met informatie over de wijzigingen die in het document

zijn aangebracht nadat de opschoonbewerking is voltooid.

Zie ook

“De codeopmaak wijzigen” op pagina 296

“Codekleuren instellen” op pagina 299

Controleren of tags en haakjes in evenwicht zijn

U kunt controleren of de tags, ronde haakjes(( )), accolades ({ }) en vierkante haakjes ([ ]) op de pagina in evenwicht zijn.

In evenwicht betekent dat er bij elke begintag, bij elk rond of vierkant haakje openen en bij elke accolade openen een

bijbehorend afsluitend exemplaar aanwezig is en omgekeerd.

Controleren op evenwichtige tags

1 Open het document in de codeweergave.

2 Plaats de invoegpositie in de geneste code die u wilt controleren.

3 Selecteer Bewerken > Bovenliggende tag selecteren.

De omsluitende bijbehorende tags (en de inhoud ervan) worden in de code geselecteerd. Als u Bewerken > Bovenliggende

tag selecteren blijft selecteren en de tags in evenwicht zijn, zal Dreamweaver uiteindelijk de buitenste

html- en /html-tags

selecteren.

Controleren op evenwichtige ronde of vierkante haakjes of accolades

1 Open het document in de codeweergave.

2 Plaats de invoegpositie in de code die u wilt controleren.

3 Selecteer Bewerken > Accolades balanceren.

Alle codes tussen de omsluitende haakjes of accolades wordt geselecteerd. Als u nogmaals Bewerken > Accolades

balanceren selecteert, wordt alle code tussen de haakjes of accolades rondom de nieuwe selectie geselecteerd.

Controleren op browsercompatibiliteit

Met behulp van de functie voor de controle van de browsercompatibiliteit kunt u combinaties van HTML en CSS opsporen

die voor problemen zorgen in bepaalde browsers. Met deze functie kunt u ook controleren of de code in uw documenten

eventuele CSS-eigenschappen of -waarden bevat die niet worden ondersteund door uw doelbrowsers.

Opmerking: Deze functie vervangt de voormalige functie voor controle van doelbrowsers, maar heeft de CSS-functionaliteit

van die functie behouden.

Zie ook

“Controleren op problemen met CSS-weergave tussen browsers” op pagina 137

Tags valideren

U kunt het huidige document of een geselecteerde tag controleren op tag- of syntaxisfouten. Dreamweaver kan

documenten valideren in een groot aantal talen, waaronder HTML, XHTML, ColdFusion Markup Language (CFML),

JavaServer Pages (JSP), Wireless Markup Language (WML) en XML.

U kunt voorkeuren instellen voor de validatiefunctie, zoals de codetalen waarop de validatie moet worden gebaseerd, de

specifieke problemen waarop de validatiefunctie moet controleren en de soorten fouten die de validatiefunctie moet

melden. Zie 'De validatievoorkeuren instellen' voor meer informatie.

DREAMWEAVER CS3

Handboek

314

Opmerking: Zie “Uw site testen” op pagina 101 als u uw document wilt valideren op toegankelijkheid.

1 Voer een van de volgende handelingen uit:

• Voor een XML- of XHTML-bestand selecteert u Bestand > Pagina controleren > Valideren als XML.

• Selecteer Bestand > Pagina controleren > Opmaakcodes valideren.

Op het tabblad Validatie van het paneel Resultaten wordt het bericht 'Geen fouten of waarschuwingen' weergeven of worden

de gevonden syntaxisfouten vermeld.

2 Dubbelklik op een foutbericht om de fout in het document te markeren.

3 Als u het rapport wilt opslaan als een XML-bestand, klikt u op de knop Rapport opslaan.

4 Als u het rapport in uw primaire browser wilt weergeven (van waaruit u het rapport kunt afdrukken), klikt u op de knop

Bladeren in rapport.

Pagina's XHTML-compatibel maken

Wanneer u een pagina maakt, kunt u deze XHTML-compatibel maken. U kunt ook een bestaand HTML-document

XHTML-compatibel maken.

Zie ook

“De XHTML-code die Dreamweaver genereert” op pagina 289

XHTML-compatibele documenten maken

1 Selecteer Bestand > Nieuw.

2 Selecteer een categorie en een type pagina dat u wilt maken.

3 Selecteer een van de XHTML-documenttypedefinities (DTD) in het pop-upmenu DocType uiterst rechts in het

dialoogvenster en klik op Maken.

U kunt een HTML-document bijvoorbeeld XHTML-compatibel maken door XHTML 1.0 Transitional of XHTML 1.0

Strict te selecteren in het pop-upmenu

Opmerking: Niet alle documenttypen kunnen XHTML-compatibel worden gemaakt.

Standaard XHTML-compatibele documenten maken

1 Selecteer Bewerken > Voorkeuren of Dreamweaver > Voorkeuren (Mac OS X) en selecteer de categorie Nieuw

document.

2 Selecteer een standaarddocument, selecteer een van de XHTML-documenttypedefinities in het pop-upmenu

Standaarddocumenttype (DTD) en klik op OK.

U kunt een HTML-document bijvoorbeeld XHTML-compatibel maken door XHTML 1.0 Transitional of XHTML 1.0

Strict te selecteren in het pop-upmenu

Een bestaand HTML-document XHTML-compatibel maken

1 Open een document en voer een van de volgende handelingen uit:

• Voor een document zonder frames selecteert u Bestand > Converteren. Selecteer daarna een van de XHTML-

documenttypedefinities.

U kunt een HTML-document bijvoorbeeld XHTML-compatibel maken door XHTML 1.0 Transitional of XHTML 1.0

Strict te selecteren in het pop-upmenu

• Voor een document met frames selecteert u een frame en selecteert u Bestand > Converteren. Selecteer daarna een van

de XHTML-documenttypedefinities.

2 Als u het hele document wilt converteren, herhaalt u deze stap voor elk frame en voor het framesetdocument.

DREAMWEAVER CS3

Handboek

315

Opmerking: Ukunteeninstantievaneensjabloonnietconverterenomdatdeinstantieindezelfdetaalmoetzijnopgesteldals

de sjabloon waarop deze is gebaseerd. Een document dat is gebaseerd op een XHTML-sjabloon, zal bijvoorbeeld altijd een

XHTML-document zijn, terwijl een document dat is gebaseerd op een niet-XHTML-compatibele HTML-sjabloon, altijd een

HTML-document zal zijn dat niet kan worden geconverteerd naar een XHTML-document of een document in een andere taal.

De ColdFusion-foutopsporing gebruiken (alleen Windows)

Als u een ColdFusion-ontwikkelaar bent die ColdFusion als Dreamweaver-testserver gebruikt, kunt u ColdFusion-

foutopsporingsinformatie weergeven zonder Dreamweaver te verlaten.

Opmerking: Deze functie wordt niet ondersteund op de Macintosh. Macintosh-ontwikkelaars kunnen Voorvertonen in

browser (F12) gebruiken om een ColdFusion-pagina te openen in een aparte browser. Als de pagina fouten bevat, wordt

onderaan op de pagina informatie weergegeven over de mogelijke oorzaken van de fouten.

Als u ColdFusion MX 6.1 of eerder gebruikt, zorg dan dat foutopsporingsinstellingen zijn ingeschakeld in ColdFusion-

beheer voordat u de foutopsporing start. Als u ColdFusion MX 7 of later gebruikt, schakelt Dreamweaver de instellingen

voor u in.

Zorg ook dat ColdFusion wordt uitgevoerd op uw Dreamweaver-testserver. Zie “Een testserver instellen” op pagina 45 voor

meer informatie.

Als u wilt dat de foutopsporingsinformatie wordt vernieuwd telkens wanneer een pagina wordt weergegeven in de interne

browser, moet u ervoor zorgen dat Internet Explorer controleert of er een nieuwere versie van het bestand bestaat telkens

wanneer het bestand wordt opgevraagd. Selecteer hiervoor Extra > Internet-opties in Internet Explorer, klik op de tab Algemeen

en klik de knop Instellingen in het vak Tijdelijke Internet-bestanden. Selecteer de optie Bij elk bezoek aan een pagina in het

dialoogvenster Instellingen.

1 Open de ColdFusion-pagina in Dreamweaver.

2 Klik op het pictogram Server debuggen op de werkbalk Document.

Dreamweaver vraagt de pagina op van de ColdFusion-server en geeft deze weer in een intern Internet Explorer-

browservenster. Als de pagina fouten bevat, worden onderaan op de pagina mogelijke oorzaken van de fouten weergegeven.

Tegelijkertijd wordt het paneel Server debuggen geopend. Dit paneel biedt zeer veel nuttige informatie, zoals alle pagina's

die de server heeft verwerkt om de pagina weer te geven, alle SQL-query's die op de pagina zijn uitgevoerd en alle eventuele

servervariabelen en hun waarden. Het paneel geeft ook een overzicht van de uitvoertijd.

3 Als het paneel Server debuggen de categorie Uitzonderingen bevat, klikt u op het plusteken (+) om de categorie uit te

vouwen.

De categorie Uitzonderingen verschijnt als de server een of meer problemen op de pagina heeft aangetroffen. Vouw de

categorie uit om meer informatie over het probleem weer te geven.

4 KlikopdeURLvandepaginaindekolomLocatievanhetpaneelServerdebuggenomdepaginaindecodeweergavete

openen en te herstellen.

Als Dreamweaver de pagina kan vinden, wordt de pagina geopend en worden de regels die een probleem veroorzaken,

gemarkeerd. Als Dreamweaver de pagina niet kan vinden, wordt u om de locatie gevraagd.

5 Herstel de fout, sla het bestand op de server op en klik op Bladeren.

Dreamweaver geeft de pagina opnieuw weer in de interne browser en werkt het paneel Server debuggen bij. Als er geen

problemen meer op de pagina worden gevonden, verschijnt de categorie Uitzonderingen niet meer in het paneel.

6 U verlaat de foutopsporingsmodus door te schakelen naar de codeweergave (Weergave > Code) of de ontwerpweergave

(Weergave > Ontwerp).

Zie ook

“ColdFusion-componenten gebruiken (ColdFusion)” op pagina 633

DREAMWEAVER CS3

Handboek

316

Code bewerken in de ontwerpweergave

Met Dreamweaver kunt u webpagina's op een visuele manier maken en bewerken zonder dat u op de onderliggende

broncode hoeft te letten. Soms wilt u echter mogelijk de code bewerken omdat u zo meer controle over de pagina hebt of

om problemen met de webpagina te verhelpen. In Dreamweaver kunt u sommige code bewerken terwijl u werkt in de

ontwerpweergave.

Dit gedeelte is bestemd voor gebruikers die bij voorkeur werken in de ontwerpweergave, maar ook snel toegang willen tot

de code.

Onderliggende tags selecteren in de ontwerpweergave

Als u in de ontwerpweergave een object selecteert dat onderliggende tags bevat (zoals een HTML-tabel), kunt u snel de

eerste onderliggende tag van dat object selecteren door Bewerken > Onderliggend element selecteren te kiezen.

Opmerking: Deze opdracht is alleen beschikbaar in de ontwerpweergave.

<table>-tag heeft bijvoorbeeld gewoonlijk onderliggende <tr>-tags. Als u een <table>-tag selecteert in de tagkiezer,

kunt u de eerste rij in de tabel selecteren door Bewerken > Onderliggend element selecteren te kiezen. Dreamweaver

selecteert de eerste

<tr>-tag in de tagkiezer. Aangezien de <tr>-tag zelf onderliggende tags heeft, namelijk <td>-tags, wordt

de eerste cel in de tabel geselecteerd wanneer u nogmaals Bewerken > Onderliggend element selecteren kiest.

Code bewerken met de eigenschappencontrole

Met behulp van de eigenschappencontrole kunt u de kenmerken van tekst of objecten op de pagina bekijken en bewerken.

De eigenschappen die worden weergegeven in de eigenschappencontrole komen gewoonlijk overeen met kenmerken van

tags. Als u een eigenschap bewerkt in de eigenschappencontrole, heeft dit gewoonlijk hetzelfde resultaat als wanneer u het

overeenkomstige kenmerk wijzigt in de codeweergave.

Opmerking: U kunt de kenmerken van een tag weergeven en bewerken met de tagcontrole en met de eigenschappencontrole.

Met de tagcontrole kunt u elk kenmerk van een bepaalde tag weergeven en bewerken. In de eigenschappencontrole worden

alleen de meest gangbare kenmerken weergegeven, maar dit onderdeel biedt uitgebreidere mogelijkheden om de waarden van

die kenmerken te wijzigen. Bovendien kunt u hiermee bepaalde objecten (zoals tabelkolommen) bewerken die niet

corresponderen met bepaalde tags.

1 Klik in de tekst of selecteer een object op de pagina.

De eigenschappencontrole voor de tekst of het object wordt weergegeven onder het documentvenster. Als de

eigenschappencontrole niet wordt weergegeven, selecteert u Venster > Eigenschappen.

2 Breng wijzigingen aan in de kenmerken in de eigenschappencontrole.

CFML bewerken met de eigenschappencontrole

Met de eigenschappencontrole kunt u ColdFusion-tags bekijken en wijzigen in de ontwerpweergave.

1 Klik in de eigenschappencontrole op de knop Kenmerken als u de kenmerken van de tag wilt bewerken of nieuwe

kenmerken wilt toevoegen.

2 Als de tag inhoud bevat tussen de begin- en eindtag, klikt u op de knop Inhoud om de inhoud te bewerken.

De knop Inhoud wordt alleen weergegeven als de geselecteerde tag geen lege tag is (dat wil zeggen, als de tag een begin- en

een eindtag heeft).

3 Als de tag een voorwaardelijke expressie bevat, kunt u er wijzigingen in aanbrengen in het vak Expressie.

DREAMWEAVER CS3

Handboek

317

Kenmerken wijzigen met de tagcontrole

U gebruikt de tagcontrole om kenmerken en waarden van kenmerken te bewerken of toe te voegen. Met de tagcontrole kunt

u tags en objecten bewerken via een eigenschappenblad dat vergelijkbaar is met dat van andere geïntegreerde

ontwikkelomgevingen (IDE's).

1 Voer een van de volgende handelingen uit in het documentvenster:

• In de codeweergave (of in de codecontrole) klikt u ergens in de naam van een tag of in de inhoud ervan.

• In de ontwerpweergave selecteert u een object of selecteert u een tag in de tagcontrole.

2 Open de tagcontrole (Venster > Paneel Tags) en klik op de de tab Kenmerken.

De kenmerken van de selectie en de huidige waarden ervan worden weergegeven in de tagcontrole.

3 Voer een van de volgende handelingen uit in de tagcontrole:

• Als u de kenmerken wilt weergeven op categorie, klikt u op de knop Categorieweergave .

• Als u de kenmerken wilt weergeven in een alfabetische lijst, klikt u op de knop Lijstweergave tonen .

• Als u de waarde van een kenmerk wilt wijzigen, selecteert u de waarde en bewerkt u deze.

• Als u een waarde wilt toevoegen voor een kenmerk zonder waarde, klikt u in de waardekolom rechts van het kenmerk

en voegt u een waarde toe.

• Als het kenmerk voorgedefinieerde waarden gebruikt, selecteert u een waarde in het pop-upmenu (of de kleurkiezer)

rechts van de waardekolom.

• Als het kenmerk een URL als waarde heeft, klikt u op de knop Bladeren of het pictogram Wijzen naar bestand om een

bestand te selecteren, of typt u de URL in het daartoe bestemde vak.

• Als het kenmerk een waarde krijgt uit een bron met dynamische inhoud (zoals een database), klikt u op de knop

Dynamische gegevens, rechts van de waardekolom. Selecteer een bron.

• Als u de waarde van het kenmerk wilt verwijderen, selecteert u de waarde en drukt u op Backspace (Windows) of Delete

(Macintosh).

• Als u de naam van een kenmerk wilt wijzigen, selecteert u de naam en bewerkt u deze.

Opmerking: Als u de naam van een standaardkenmerk wijzigt en vervolgens een waarde toevoegt voor dat kenmerk, worden

het kenmerk en de nieuwe waarde naar de juiste categorie verplaatst.

• Als u een nieuw kenmerk wilt toevoegen dat nog niet wordt vermeld, klikt u op de lege ruimte onder het laatste kenmerk

en typt u een nieuwe kenmerknaam.

4 Druk op Enter (Windows) of Return (Macintosh) of klik elders in de tagcontrole om de tag in het document bij te

werken.

Zie ook

“JavaScript-gedrag gebruiken” op pagina 332

“CSS maken en beheren” op pagina 121

“Bronnen met dynamische inhoud definiëren” op pagina 521

Overzicht van de Snelle tageditor

Met de Snelle tageditor kunt u snel HTML-tags bekijken, invoegen en bewerken zonder de ontwerpweergave te verlaten.

Als u ongeldige HTML typt in de Snelle tageditor, probeert Dreamweaver dit voor u te corrigeren door waar nodig

afsluitende aanhalingstekens en punthaakjes in te voegen.

Als u opties voor de Snelle tageditor wilt instellen, opent u deze editor door op Ctrl+T (Windows) of Command+T

(Macintosh) te drukken.

De Snelle tageditor heeft drie modi:

• De modus HTML invoegen wordt gebruikt om nieuwe HTML-code in te voegen.

DREAMWEAVER CS3

Handboek

318

• De modus Tag bewerken wordt gebruikt om een bestaande tag te bewerken.

• De modus Tag rondom plaatsen wordt gebruikt om een nieuwe tag rondom de huidige selectie te plaatsen.

Opmerking: In welke modus de Snelle tageditor wordt geopend, hangt af van de huidige selectie in de ontwerpweergave.

In alle drie de modi is de basisprocedure voor het werken met de Snelle tageditor hetzelfde: open de editor, voer tags in of

bewerk tags en kenmerken en sluit de editor vervolgens.

U kunt door de modi rouleren door te drukken op Ctrl+T (Windows) of Command+T (Macintosh) terwijl de Snelle

tageditor actief is.

Zie ook

“Het menu met tips gebruiken in de Snelle tageditor” op pagina 319

Code bewerken met de Snelle tageditor

Met de Snelle tageditor kunt u snel HTML-tags invoegen en bewerken zonder de ontwerpweergave te verlaten.

Zie ook

“Scripts schrijven en bewerken in de ontwerpweergave” op pagina 320

Een HTML-tag invoegen

1 Klik op de pagina in de ontwerpweergave om de invoegpositie te plaatsen op de locatie waar u code wilt invoegen.

2 Druk op Ctrl+spatiebalk (Windows) of Command+spatiebalk (Macintosh).

De Snelle tageditor wordt geopend in de modus HTML invoegen.

3 Voer de HTML-tag in en druk op Enter.

De tag wordt in de code ingevoegd, samen met de bijbehorende eindtag, indien van toepassing.

4 Druk op Escape als u de editor wilt sluiten zonder wijzigingen aan te brengen.

Een HTML-tag bewerken

1 Selecteer een object in de ontwerpweergave.

Ukuntookdetagdieuwiltbewerkenselecterenindetagkiezeronderinhetdocumentvenster. Zie“Codebewerkenmet

de tagkiezer” op pagina 319 voor meer informatie.

2 Druk op Ctrl+spatiebalk (Windows) of Command+spatiebalk (Macintosh).

De Snelle tageditor wordt geopend in de modus Tag bewerken.

3 Voer nieuwe kenmerken in, bewerk bestaande kenmerken of bewerk de naam van de tag.

4 Druk op Tab om naar het volgende kenmerk te gaan; druk op Shift+Tab om naar het vorige kenmerk te gaan.

Opmerking: Standaard worden wijzigingen op het document toegepast wanneer u op Tab of Shift+Tab drukt.

5 Druk op Enter om de Snelle tageditor te sluiten en alle wijzigingen toe te passen.

6 Als u wilt afsluiten zonder verdere wijzigingen aan te brengen, drukt u op Escape.

De huidige selectie tussen HTML-tags plaatsen

1 Selecteer niet-opgemaakte tekst of een object in de ontwerpweergave.

DREAMWEAVER CS3

Handboek

319

Opmerking: Als u tekst of een object selecteert dat een HTML-begintag of -eindtag bevat, wordt de Snelle tageditor geopend in

de modus Tag bewerken in plaats van de modus Tag rondom plaatsen.

2 Druk op Ctrl+T (Windows) of Command+T (Macintosh) of klik op de knop Snelle tageditor in de

eigenschappencontrole.

De Snelle tageditor wordt geopend in de modus Tag rondom plaatsen.

3 Voer één openingstag in, zoals

strong, en druk op Enter (Windows) of Return (Macintosh).

De tag wordt ingevoegd aan het begin van de huidige selectie en een bijbehorende eindtag wordt aan het einde ingevoegd.

4 Als u wilt afsluiten zonder wijzigingen aan te brengen, drukt u op Escape.

Het menu met tips gebruiken in de Snelle tageditor

De Snelle tageditor bevat een menu met tips dat alle geldige kenmerken vermeldt voor de tag die u bewerkt of invoegt.

U kunt dit menu uitschakelen of de vertraging aanpassen voordat het menu in de Snelle tageditor verschijnt.

Als u een menu wilt weergeven met geldige kenmerken voor een tag, wacht u even terwijl u de naam van een kenmerk

bewerkt in de Snelle tageditor. Er wordt een menu weergeven met alle geldige kenmerken voor de tag die u bewerkt.

Als u een menu wilt weergeven met geldige tagnamen, wacht u even terwijl u een tagnaam invoert of bewerkt in de Snelle

tageditor.

Opmerking: De voorkeuren voor coderingstips in de Snelle tageditor worden bepaald door de voorkeuren voor normale

coderingstips. Zie “De coderingstips instellen” op pagina 297 voor meer informatie.

Zie ook

“Overzicht van de Snelle tageditor” op pagina 317

Een menu met tips gebruiken

1 Voer een van de volgende handelingen uit:

• Begindenaamvaneentagofkenmerktetypen. Deselectieinhetmenumetcoderingstipsspringtnaarheteersteitem

dat begint met de getypte letters.

• Selecteer een item met de toetsen Pijl-omhoog en Pijl-omlaag.

• Zoek een item met de schuifbalk.

2 Druk op Enter om het geselecteerde item in te voegen of dubbelklik op een item om dit in te voegen.

3 Als u het menu wilt sluiten zonder een item in te voegen, drukt u op Escape of typt u verder.

Het tipmenu uitschakelen of de vertraging wijzigen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Snelle tageditor.

Het dialoogvenster Voorkeuren voor Snelle tageditor verschijnt.

2 Als u het menu met tips wilt uitschakelen, schakelt u de optie Tagtips inschakelen uit.

3 Als u de vertraging voordat het menu verschijnt wilt wijzigen, past u de schuifregelaar Vertraging aan en klikt u op OK.

Code bewerken met de tagkiezer

Ukuntdetagkiezergebruikenomtagsteselecteren,tebewerkenofteverwijderenzonderdeontwerpweergaveteverlaten.

De tagkiezer bevindt zich op de statusbalk, onder in het documentvenster, en toont een reeks tags, bijvoorbeeld:

Een tag bewerken of verwijderen

1 Klik in het document.

DREAMWEAVER CS3

Handboek

320

De tags die van toepassing zijn op de invoegpositie worden weergegeven in de tagkiezer.

2 Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op een tag in de tagkiezer.

3 Als u een tag wilt bewerken, selecteert u Tag bewerken in het menu. Breng de gewenste wijzigingen aan in de Snelle

tageditor. Zie “Code bewerken met de Snelle tageditor” op pagina 318 voor meer informatie.

4 Als u een tag wilt verwijderen, selecteert u Tag verwijderen in het menu.

Een object selecteren dat overeenkomt met een tag

1 Klik in het document.

De tags die van toepassing zijn op de invoegpositie worden weergegeven in de tagkiezer.

2 Klik op een tag in de tagkiezer.

Het object dat de tag vertegenwoordigt wordt op de pagina geselecteerd.

Gebruik deze techniek om afzonderlijke tabelrijen (

tr-tags) of cellen (td tags) te selecteren.

Scripts schrijven en bewerken in de ontwerpweergave

U kunt op de volgende manieren werken met JavaScript- en VBScript-clientscripts in de codeweergave en de

ontwerpweergave:

• Schrijf een JavaScript- of VBScript-script voor uw pagina zonder de ontwerpweergave te verlaten.

• Maak in uw document een koppeling naar een extern scriptbestand zonder de ontwerpweergave te verlaten.

• Bewerk een script zonder de ontwerpweergave te verlaten.

Selecteer voordat u begint Weergave > Visuele hulpmiddelen > Onzichtbare elementen, zodat de scriptmarkeringen op de

pagina worden weergegeven.

Een clientscript schrijven

1 Plaats de invoegpositie op de locatie waar u het script wilt invoegen.

2 Selecteer Invoegen > HTML > Scriptobjecten > Script.

3 Selecteer de scripttaal in het pop-upmenu Taal.

Als u JavaScript gebruikt, maar niet zeker bent van de versie, selecteert u JavaScript in plaats JavaScript 1.1 of JavaScript 1.2.

4 Typ of plak de scriptcode in het vak Inhoud.

U hoeft hierin geen openende of afsluitende

script-tags op te nemen.

5 Typ of plak HTML-code in het vak Geen script. Browsers die de gekozen scripttaal niet ondersteunen, tonen deze code

in plaats van het script uit te voeren.

6 Klik op OK.

Koppelen naar een extern scriptbestand

1 Plaats de invoegpositie op de locatie waar u het script wilt invoegen.

2 Selecteer Invoegen > HTML > Scriptobjecten > Script.

3 Klik op OK zonder iets te typen in het vak Inhoud.

4 Selecteer de scriptmarkering in de ontwerpweergave van het documentvenster.

5 Klik op het mappictogram in de eigenschappencontrole, blader naar het externe scriptbestand en selecteer dit bestand,

of typ de bestandsnaam in het vak Bron.

Een script bewerken

1 Selecteer de scriptmarkering.

2 Klik in de eigenschappencontrole op de knop Bewerken.

DREAMWEAVER CS3

Handboek

321

Het script verschijnt in het dialoogvenster Scripteigenschappen.

Alsueenkoppelingnaareenexternscriptbestandhadtoegevoegd,wordthetbestandgeopendindecodeweergavewaaru

wijzigingen kunt aanbrengen.

Opmerking: Als er code aanwezig is tussen de scripttags, wordt het dialoogvenster Scripteigenschappen geopend, ook al is er

ook een koppeling naar een extern scriptbestand aanwezig.

3 Geef in het vak Taal de taal JavaScript of VBScript op als taal van het script.

4 Geef in het pop-upmenu Type het type script op: client of server.

5 (Optioneel) Geef in het vak Bron een extern gekoppeld scriptbestand op.

Klik op het mappictogram of de knop Bladeren om een bestand te selecteren of typ het pad.

6 Bewerk het script en klik op OK.

ASP-serverscripts bewerken in de ontwerpweergave

U gebruikt de eigenschappencontrole voor ASP-scripts om ASP-serverscripts te bekijken en te bewerken in de

ontwerpweergave.

1 In de ontwerpweergave selecteert u het visuele pictogram van de tag voor de servertaal.

2 Klik in de eigenschappencontrole voor het ASP-script op de knop Bewerken.

3 Bewerk het ASP-serverscript en klik op OK.

Scripts op de pagina bewerken via de eigenschappencontrole

1 Selecteer in de eigenschappencontrole de scripttaal in het pop-upmenu Taal of typ een taalnaam in het vak Taal.

Opmerking: Als u JavaScript gebruikt, maar niet zeker bent van de versie, selecteert u JavaScript in plaats JavaScript 1.1 of

JavaScript 1.2.

2 Geef in het pop-upmenu Type het type script op: client of server.

3 (Optioneel) Geef in het vak Bron een extern gekoppeld scriptbestand op. Klik op het mappictogram om het bestand te

selecteren of typ het pad.

4 Klik op Bewerken om het script te bewerken.

Zie ook

“Scripts schrijven en bewerken in de ontwerpweergave” op pagina 320

JavaScript-gedrag gebruiken

U kunt gemakkelijk een JavaScript-(client)gedrag aan pagina-elementen verbinden via het tabblad Gedrag van de

tagcontrole. Zie “Ingebouwd Dreamweaver-gedrag toepassen” op pagina 335 voor meer informatie.

Werken met de kopinhoud van pagina's

Pagina's bevatten elementen die de informatie op de pagina beschrijven en die door zoekmachines worden gebruikt. U

kunt de eigenschappen van

head-elementen instellen om te bepalen hoe uw pagina's worden geïdentificeerd.

Kopinhoud weergeven en bewerken

U kunt de elementen in de kopsectie van een document weergeven via het menu Weergave, de codeweergave van het

documentvenster of de codecontrole.

DREAMWEAVER CS3

Handboek

322

Elementen weergeven in de kopsectie van een document

❖

Selecteer Weergave > Kopinhoud. Voor elk element van de kopinhoud, verschijnt een markering boven in het

documentvenster in de ontwerpweergave.

Opmerking: Als het documentvenster alleen is ingesteld op de codeweergave, is Weergave > Kopinhoud niet beschikbaar.

Een element invoegen in de kopsectie van een document

1 Selecteer een item in het vervolgmenu Invoegen > Koptags.

2 Stel opties voor het element in in het dialoogvenster dat verschijnt of in de eigenschappencontrole.

Een element in de kopsectie van een document bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer een van de pictogrammen in de

kopsectie.

3 Wijzig de eigenschappen van het element in de eigenschappencontrole of stel ze in:

De meta-eigenschappen voor de pagina instellen

Een metatag is een kopelement waarin informatie over de huidige pagina wordt vastgelegd, zoals tekencodering, auteur,

vervaldatum, het vernieuwingsinterval en de PICS-classificatie voor de pagina. (PICS, Platform for Internet Content

Selection, biedt een methode om classificaties toe te wijzen aan webpagina's, vergelijkbaar met filmclassificaties.)

Een meta-tag toevoegen

1 Selecteer Invoegen > HTML > Koptags > Meta.

2 Geef de eigenschappen op in het dialoogvenster dat wordt weergegeven.

Een bestaande meta-tag bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Meta, die boven aan het documentvenster wordt weergegeven.

3 Geef de eigenschappen op in de eigenschappencontrole.

Eigenschappen van de meta-tag

❖

Stel de eigenschappen van de meta-tag als volgt in:

Kenmerk Hiermee geeft u op of de meta-tag beschrijvende informatie bevat over de pagina (name) of HTTP-

koptekstinformatie (

http-equiv).

Waarde Hiermee geeft u het type informatie aan dat u in deze tag verstrekt. Sommige waarden, zoals description,

keywords en refresh, zijn al goed gedefinieerd (en hebben hun eigen eigenschappencontroles in Dreamweaver), maar u

kunt nagenoeg elke waarde opgeven (bijvoorbeeld

creationdate, documentID of level).

Inhoud Hier kunt u de daadwerkelijke informatie opgeven. Als u bijvoorbeeld bij Waarde niveau hebt opgegeven, kunt u

bij Inhoud

beginner, gevorderde of expert opgeven.

De paginatitel instellen

Er is slechts één titeleigenschap: de titel van de pagina. De titel wordt weergegeven in de titelbalk van het documentvenster

in Dreamweaver en in de titelbalk van de meeste browsers wanneer u de pagina in de browser bekijkt. De titel wordt ook

weergegeven op de werkbalk van het documentvenster.

De titel opgeven in het documentvenster

❖

Voer de titel in in het tekstvak Titel op de werkbalk van het documentvenster.

DREAMWEAVER CS3

Handboek

323

De titel opgeven in de kopinhoud

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Titel, die boven aan het documentvenster wordt weergegeven.

3 Geef de paginatitel op in de eigenschappencontrole.

Trefwoorden opgeven voor de pagina

Veel robots van zoekmachines (programma's die automatisch op het web zoeken om informatie te verzamelen die

zoekmachines kunnen indexeren) lezen de inhoud van de

meta-tag Keywords (trefwoorden) en gebruiken die informatie

om uw pagina's in hun databases te indexeren. Aangezien sommige zoekmachines het aantal trefwoorden of tekens dat ze

indexeren, beperken of alle trefwoorden negeren als u de limiet overschrijdt, is het aan te raden slechts enkele goedgekozen

trefwoorden te gebruiken.

De meta-tag Trefwoorden toevoegen

1 Selecteer Invoegen > HTML > Koptags > Trefwoorden.

2 Geef de trefwoorden, gescheiden door komma's, op in het dialoogvenster dat wordt weergegeven.

De meta-tag Trefwoorden bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Trefwoorden, die boven aan het documentvenster wordt weergegeven.

3 In de eigenschappencontrole kunt u nu trefwoorden bekijken, wijzigen of verwijderen. U kunt ook trefwoorden

toevoegen, die van elkaar zijn gescheiden door komma's.

Beschrijvingen opgeven voor de pagina

Veel robots van zoekmachines (programma's die automatisch op het web zoeken om informatie te verzamelen die

zoekmachines kunnen indexeren) lezen de inhoud van de

meta-tag Beschrijving. Sommige gebruiken de informatie om uw

pagina's in hun databases te indexeren, andere geven de informatie ook weer op de pagina met zoekresultaten (in plaats van

de eerste paar regels van het document). Sommige zoekmachines beperken het aantal tekens dat ze indexeren, dus het is

verstandig om uw beschrijving tot een paar woorden te beperken (bijvoorbeeld

CateringvoorsportevenementeninHaarlem,Noord-Holland of

webpagina'sontwerpentegenredelijkeprijzenvoorklantenwereldwijd).

De meta-tag Beschrijving toevoegen

1 Selecteer Invoegen > HTML > Koptags > Beschrijving.

2 Voer een beschrijvende tekst in in het dialoogvenster dat verschijnt.

De meta-tag Beschrijving bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Beschrijving, die boven aan het documentvenster wordt weergegeven.

3 In de eigenschappencontrole kunt u nu de beschrijvende tekst bekijken, wijzigen of verwijderen.

De eigenschappen voor het vernieuwen van de pagina instellen

U gebruikt het element Refresh (vernieuwen) om op te geven dat de browser de pagina na een bepaalde tijd automatisch

moet vernieuwen door de huidige pagina opnieuw te laden of naar een andere pagina te gaan. Dit element wordt vaak

gebruikt om gebruikers van de ene URL om te leiden naar een andere URL, vaak nadat een bericht wordt weergegeven dat

de URL is gewijzigd.

De meta-tag Vernieuwen toevoegen

1 Selecteer Invoegen > HTML > Koptags > Vernieuwen.

2 Stel de eigenschappen van de meta-tag Vernieuwen in in het dialoogvenster dat wordt weergegeven.

DREAMWEAVER CS3

Handboek

324

De meta-tag Vernieuwen bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Vernieuwen, die boven aan het documentvenster wordt weergegeven.

3 Stel in de eigenschappencontrole de eigenschappen van de meta-tag Vernieuwen in.

De eigenschappen van de meta-tag Vernieuwen instellen

❖

Stel de eigenschappen van de meta-tag Vernieuwen als volgt in:

Vertraging Geef hier op in seconden hoe lang de browser moet wachten voordat deze de pagina vernieuwt. Als u wilt dat

de browser de pagina direct vernieuwt nadat deze is geladen, typt u 0 in dit vak.

URL of Handeling Hier kunt u opgeven of de browser na de ingestelde vertraging naar een andere URL moet gaan of de

huidige pagina moet vernieuwen. Als u een andere URL wilt openen (in plaats van de huidige pagina te vernieuwen), klikt

u op de knop Bladeren om de pagina te selecteren die u wilt laden.

De eigenschappen van de basis-URL van de pagina instellen

U gebruikt het element Base (basis) om de basis-URL in te stellen. Alle relatieve paden op de pagina zijn relatief ten opzichte

van de basis-URL.

Een meta-tag Basis toevoegen

1 Selecteer Invoegen > HTML > Koptags > Basis.

2 Stel de eigenschappen van de meta-tag Basis in in het dialoogvenster dat wordt weergegeven.

De meta-tag Basis bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Basis, die boven aan het documentvenster wordt weergegeven.

3 Stel in de eigenschappencontrole de eigenschappen van de meta-tag Basis in.

De eigenschappen van de meta-tag Basis instellen

❖

Stel de eigenschappen van de meta-tag Basis als volgt in:

Href Geef hier de basis-URL op. Klik op de knop Bladeren om een bestand te selecteren of typ een pad in het vak.

Doel Hier kunt u het frame of venster opgeven waarin alle gekoppelde documenten moeten worden geopend. Selecteer een

van de frames in de huidige frameset of een van de volgende gereserveerde namen:

• Met _blank wordt het gekoppelde document in een nieuw naamloos browservenster geladen.

• Met _parent wordt het gekoppelde document geladen in het bovenliggende frame of venster van het frame dat de

koppeling bevat. Als het frame dat de koppeling bevat niet is genest, is dit equivalent met

_top,enwordthetgekoppelde

document geladen in het volledige browservenster.

• Met _self wordt het gekoppelde document geladen in het frame of venster waarin de koppeling zich bevindt. Dit doel

is de standaardinstelling, zodat u deze instelling gewoonlijk niet hoeft te definiëren.

• Met _top wordt het gekoppelde document in het volledige browservenster geladen en worden daarbij alle frames

verwijderd.

De eigenschappen van de koppelingen op de pagina instellen

U kunt de link-tag gebruiken om de relatie tussen het huidige document en een ander bestand te definiëren.

Opmerking: De link-tag in de head-sectie is niet hetzelfde als een HTML-koppeling tussen documenten in de head-sectie.

Een meta-tag Koppeling toevoegen

1 Selecteer Invoegen > HTML > Koptags > Koppeling.

2 Stel de eigenschappen van de meta-tag Koppeling in in het dialoogvenster dat wordt weergegeven.

DREAMWEAVER CS3

Handboek

325

De meta-tag Koppeling bewerken

1 Selecteer Weergave > Kopinhoud.

2 Selecteer de markering Koppeling die boven aan het documentvenster wordt weergegeven.

3 Stel in de eigenschappencontrole de eigenschappen van de meta-tag Koppeling in.

De eigenschappen van de meta-tag Koppeling instellen

❖

Stel de eigenschappen van de meta-tag Koppeling als volgt in:

Href Hier kunt u de URL opgeven van het bestand waarvan u de relatie met het huidige document definieert. Klik op de

knop Bladeren om een bestand te selecteren of typ een pad in het vak. Bedenk wel dat dit kenmerk geen bestand aangeeft

waarnaar u een koppeling maakt in de gebruikelijke zin van het woord in de HTML-context. De relaties die in een element

Koppeling worden gedefinieerd, zijn complexer.

ID Hier kunt u een unieke id opgeven voor de koppeling.

Titel Hier kunt u de relatie beschrijven. Dit kenmerk heeft een speciale betekenis voor gekoppelde stijlbladen. Raadpleeg

voor meer informatie het gedeelte External Style Sheets van de HTML 4.0-specificatie op de website van het World Wide

Web Consortium op www.w3.org/TR/REC-html40/present/styles.html#style-external.

Rel Hier kunt u de relatie tussen het huidige document en het document in het tekstvak Href opgeven. De mogelijke

waarden zijn:

Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section,

Subsection, Appendix, Help en Bookmark. Als u meer dan één relatie wilt opgeven, scheidt u de waarden met een spatie.

Rev Hier kunt u een omgekeerde (reverse) relatie opgeven (het tegenovergestelde van Rel) tussen het huidige document en

het document in het tekstvak Href. De mogelijke waarden zijn gelijk aan die voor Rel.

Werken met include-bestanden op de server

Include-bestanden op de server

U kunt Dreamweaver gebruiken om include-bestanden op de server in uw pagina's in te voegen, de include-bestanden te

bewerken of pagina's met include-bestanden te bekijken.

Een include-bestand op de server is een bestand dat de server in uw document invoegt wanneer een browser het document

opvraagt van de server.

Wanneer de browser van een bezoeker het document opvraagt dat de include-instructie bevat, verwerkt de server de

include-instructie en wordt er een nieuw document gemaakt waarin de include-instructie wordt vervangen door de inhoud

van het ingesloten bestand. De server stuurt dit nieuwe document vervolgens naar de browser van de bezoeker. Wanneer

u een lokaal document echter rechtstreeks in een browser opent, is er geen server die de include-instructies in dat document

kan verwerken, zodat de browser het document opent zonder die instructies te verwerken en het bestand dat ingesloten zou

moeten zijn, niet in de browser wordt weergegeven. Daarom kan het moeilijk zijn om, zonder Dreamweaver te gebruiken

na te gaan hoe lokale bestanden eruit zullen zien voor bezoekers nadat u ze op de server hebt geplaatst.

Met Dreamweaver kunt u documenten echter bekijken zoals ze eruit zullen zien nadat ze op de server zijn geplaatst, zowel

in de ontwerpweergave als bij voorvertoning in een browser.

Als u een include-bestand op de server in een document invoegt, wordt een verwijzing naar een extern bestand ingevoegd,

maar wordt de inhoud van het opgegeven document niet in het huidige document ingevoegd. Dreamweaver geeft de

inhoud van het externe bestand weer in de ontwerpweergave, waardoor u gemakkelijker pagina's kunt ontwerpen.

U kunt het ingesloten bestand niet rechtstreeks in het document bewerken. Als u de inhoud van een include-bestand op

de server wilt bewerken, moet u dat bestand rechtstreeks bewerken. Wijzigingen in het externe bestand worden

automatisch weerspiegeld in elk document waarin het bestand is ingesloten.

DREAMWEAVER CS3

Handboek

326

Er bestaan twee soorten include-bestanden: Virtueel en Bestand. Selecteer het type dat geschikt is voor het type webserver

dat u gebruikt:

• Als u een Apache-webserver gebruikt, selecteert u Virtueel. In Apache werkt Virtueel in alle gevallen, terwijl Bestand

slechts in bepaalde gevallen werkt.

• Als u Microsoft Internet Information Server (IIS) gebruikt, selecteert u Bestand. (Virtueel werkt alleen in bepaalde

omstandigheden met IIS.)

Opmerking: Helaas is het bij IIS niet mogelijk een bestand in te sluiten in een map boven de huidige map in de

mappenhiërarchie, tenzij speciale software op de server is geïnstalleerd. Als u een bestand wilt insluiten uit een hogere map in

de mappenhiërarchie op een IIS-server, vraag dan aan de systeembeheerder of de benodigde software is geïnstalleerd.

• Vooranderesoortenservers,ofalsunietweetwelktypeserverugebruikt,vraagtudesysteembeheerderwelkeoptieu

moet gebruiken.

Sommige servers zijn zo geconfigureerd dat ze alle bestanden onderzoeken om te kijken of deze include-bestanden op de

server bevatten. Andere servers onderzoeken alleen bestanden met een bepaalde bestandsextensie, zoals .shtml, .shtm of

.inc. Als een include-bestand op de server niet werkt, vraag de systeembeheerder dan of u een speciale extensie moet

gebruiken voor de naam van het bestand dat het include-bestand gebruikt. (Als het bestand bijvoorbeeld kano.html heet,

moet u de naam mogelijk wijzigen in kano.shtml.) Als u wilt dat bestanden de extensie .html of .htm behouden, vraag de

systeembeheerder dan om de server zo te configureren dat deze alle bestanden onderzoekt op include-bestanden (niet

alleen bestanden met bepaalde extensies). Een bestand parseren op de aanwezigheid van include-bestanden kost extra tijd,

zodat pagina's die de server parseert, iets trager worden geladen dan andere pagina's. Daarom zullen sommige

systeembeheerders niet de mogelijkheid bieden om alle bestanden te parseren.

Include-bestanden op de server invoegen

U kunt Dreamweaver gebruiken om include-bestanden op de server in uw pagina in te voegen.

Een include-bestand op de server invoegen

1 Selecteer Invoegen > Include-codes op de server.

2 In het dialoogvenster dat verschijnt, bladert u naar een bestand en voegt u dit toe.

Standaard wordt een include-bestand van het type Bestand ingevoegd.

3 Als u het type include-bestand wilt wijzigen, selecteert u het include-bestand in het documentvenster en wijzigt u het

type in de eigenschappencontrole (Venster > Eigenschappen) als volgt:

• Als u een Apache-webserver gebruikt, selecteert u Virtueel. In Apache werkt Virtueel in alle gevallen, terwijl Bestand

slechts in bepaalde gevallen werkt.

• Als u een Microsoft Internet Information Server (IIS) gebruikt, selecteert u Bestand. (Virtueel werkt alleen in bepaalde

specifieke omstandigheden met IIS.)

Opmerking: Helaas is het bij IIS niet mogelijk een bestand in te sluiten in een map boven de huidige map in de

mappenhiërarchie, tenzij speciale software op de server is geïnstalleerd. Als u een bestand moet insluiten uit een hogere map in

de mappenhiërarchie op een IIS-server, vraag dan aan de systeembeheerder of de benodigde software is geïnstalleerd.

• Vooranderesoortenservers,ofalsunietweetwelktypeserverugebruikt,vraagtudesysteembeheerderwelkeoptieu

moet gebruiken.

Wijzigen welk bestand wordt ingesloten

1 Selecteer het include-bestand in het documentvenster.

2 Open de eigenschappencontrole (Venster > Eigenschappen).

3 Voer een van de volgende handelingen uit:

• Klik op het mappictogram en selecteer het nieuwe bestand dat u wilt insluiten.

• Typ het pad en de bestandsnaam van het nieuwe bestand dat u wilt insluiten in het vak.

DREAMWEAVER CS3

Handboek

327

De inhoud van een include-bestand op de server bewerken

Met behulp van Dreamweaver kunt u include-bestanden op de server bewerken. Als u de inhoud van een ingesloten

bestand wilt bewerken, moet u het bestand openen.

1 Selecteer het include-bestand in de ontwerpweergave of de codeweergave en klik op Bewerken in de

eigenschappencontrole.

Het ingesloten bestand wordt geopend in een nieuw documentvenster.

2 Bewerk het bestand en sla het op.

De wijzigingen worden direct weerspiegeld in het huidige document en in elk volgend document dat u opent waarin het

bestand is ingesloten.

3 Upload het include-bestand zo nodig naar de externe site.

Tagbibliotheken beheren

De tagbibliotheken van Dreamweaver

In Dreamweaver is een tagbibliotheek een verzameling tags van een bepaald type, die tevens informatie bevat over de manier

waarop Dreamweaver de tags moet opmaken. Tagbibliotheken bevatten informatie over tags die Dreamweaver gebruikt

voor coderingstips, doelbrowsercontroles, de tagkiezer en andere codeermogelijkheden. Met behulp van de tagbibliotheek-

editor kunt u tagbibliotheken, tags, kenmerken en kenmerkwaarden toevoegen en verwijderen, eigenschappen voor een

tagbibliotheek instellen, waaronder de indeling (voor eenvoudige identificatie in de code), en tags en kenmerken bewerken.

Zie ook

“Aangepaste tags importeren in Dreamweaver” op pagina 329

“De codeeromgeving aanpassen” op pagina 295

De tagbibliotheek-editor openen en sluiten

1 Selecteer Bewerken > Tagbibliotheken om de tagbibliotheek-editor te openen.

Het dialoogvenster van de tagbibliotheek-editor wordt weergegeven. (Welke opties dit dialoogvenster bevat, hangt af van

de geselecteerde tag.)

2 Sluit de tagbibliotheek-editor op een van de volgende manieren:

• Klik op OK als u wijzigingen wilt opslaan.

• Klik op Annuleren als u de editor wilt sluiten zonder wijzigingen op te slaan.

Opmerking: Als u op Annuleren klikt, worden alle wijzigingen die u in de tagbibliotheek-editor hebt aangebracht, genegeerd.

Als u een tag of tagbibliotheek hebt verwijderd, wordt deze hersteld.

Bibliotheken, tags en kenmerken toevoegen

U kunt de tagbibliotheek-editor gebruiken om tagbibliotheken, tags en kenmerken toe te voegen aan de tagbibliotheken

in Dreamweaver.

Zie ook

“De codeeromgeving aanpassen” op pagina 295

“Aangepaste tags importeren in Dreamweaver” op pagina 329

Een tagbibliotheek toevoegen

1 Klik in de tagbibliotheek-editor (Venster > Tagbibliotheken) op de plusknop (+) en kies Nieuwe tagbibliotheek.

DREAMWEAVER CS3

Handboek

328

2 Typ een naam in het vak Naam bibliotheek (bijvoorbeeld Diverse tags) en klik op OK.

Tags toevoegen aan een tagbibliotheek

1 Klik in de tagbibliotheek-editor (Venster > Tagbibliotheken) op de plusknop (+) en kies Nieuwe tags.

2 Selecteer een tagbibliotheek in het pop-upmenu Tagbibliotheek.

3 Typ de naam van de nieuwe tag. Als u meer dan één tag wilt toevoegen, scheidt u de namen met een komma en een

spatie (bijvoorbeeld

cfgraph, cfgraphdata).

4 Als de nieuwe tags corresponderende afsluitende tags hebben (

</...>), selecteert u Overeenkomstige eindtags vereist.

5 Klik op OK.

Kenmerken toevoegen aan een tag

1 Klik in de tagbibliotheek-editor (Venster > Tagbibliotheken) op de plusknop (+) en kies Nieuwe kenmerken.

2 Selecteer een tagbibliotheek in het pop-upmenu Tagbibliotheek.

3 Selecteer een tag in het pop-upmenu Tag.

4 Typdenaamvanhetnieuwekenmerk. Alsumeerdanéénkenmerkwilttoevoegen,scheidtudenamenmeteenkomma

en een spatie (bijvoorbeeld

width, height).

5 Klik op OK.

Bibliotheken, tags en kenmerken bewerken

Met de tagbibliotheek-editor kunt u eigenschappen instellen voor een tagbibliotheek en tags en kenmerken in een

bibliotheek bewerken.

Zie ook

“De codeeromgeving aanpassen” op pagina 295

Eigenschappen instellen voor een tagbibliotheek

1 Selecteer in de tagbibliotheek-editor (Bewerken > Tagbibliotheken) een tagbibliotheek (geen tag) in de lijst Tags.

Opmerking: De eigenschappen voor tagbibliotheken worden alleen weergegeven wanneer een tagbibliotheek is geselecteerd.

Tagbibliotheken worden weergegeven door de mappen op het hoogste niveau in de lijst Tags. De map HTML-tags

vertegenwoordigt bijvoorbeeld een tagbibliotheek, terwijl de map abbr in de map HTML-tags een tag vertegenwoordigt.

2 Selecteer in de lijst Gebruikt in elk documenttype dat de tagbibliotheek moet gebruiken.

De documenttypen die u hier selecteert bepalen welke documenttypen coderingstips bieden voor de desbetreffende

tagbibliotheek. Als de optie HTML bijvoorbeeld niet is geselecteerd voor een bepaalde tagbibliotheek, worden

coderingstips voor die tagbibliotheek niet weergegeven in HTML-bestanden.

3 (Optioneel) Typ het voorvoegsel voor de tags in het vak Tagvoorvoegsel.

Opmerking: Een voorvoegsel wordt gebruikt om een tag in de code te identificeren als onderdeel van een bepaalde

tagbibliotheek. Sommige tagbibliotheken gebruiken geen voorvoegsels.

4 Klik op OK.

Een tag in een tagbibliotheek bewerken

1 Vouw in de tagbibliotheek-editor (Bewerken > Tagbibliotheken) een tagbibliotheek in de lijst Tags uit en selecteer een tag.

2 Stel een of meer van de volgende opties voor Tagopmaak in:

Regeleinden Hier kunt u opgeven waar Dreamweaver regeleinden voor een tag moet invoegen.

Inhoud Hiermee geeft u op hoe Dreamweaver de inhoud van een tag moet invoegen. Hiermee bepaalt u of regels voor

regeleinde, opmaak en inspringing worden toegepast op de inhoud.

DREAMWEAVER CS3

Handboek

329

Hoofdletter/kleine letter Hiermee geeft u het hoofdlettergebruik voor een bepaalde tag op. Selecteer Standaard, Kleine

letters, Hoofdletters of Hoofdletters en kleine letters. Als u Hoofdletters en kleine letters selecteert, verschijnt het

dialoogvenster Tagnaam met hoofdletters en kleine letters. Typ de tag met de gewenste hoofdletters en kleine letters zoals

Dreamweaver die moet gebruiken bij het invoegen van de tag (bijvoorbeeld

getProperty) en klik op OK.

Standaardwaarde instellen Hiermee stelt het standaardhoofdlettergebruik voor alle tags in. In het dialoogvenster

Standaard-hoofdlettergebruik voor tags selecteert u <HOOFDLETTERS> of <kleine letters> en klikt u op OK.

Het is aan te raden het standaardhoofdlettergebruik in te stellen op kleine letters om zo te voldoen aan de XML- en

XHTML-standaards.

Een kenmerk van een tag bewerken

1 Vouw in de tagbibliotheek-editor (Bewerken > Tagbibliotheken) een tagbibliotheek in het vak Tags uit, vouw een tag uit

en selecteer een tagkenmerk.

2 Selecteer Standaard, Hoofdletters, Kleine letters of Hoofdletters en kleine letters in het pop-upmenu Hoofdlettergebruik

voor kenmerken.

Als u Hoofdletters en kleine letters selecteert, verschijnt het dialoogvenster Kenmerknaam met hoofdletters en kleine

letters. Typ het kenmerk met de gewenste hoofdletters en kleine letters zoals Dreamweaver die moet gebruiken bij het

invoegen van het kenmerk (bijvoorbeeld

onClick) en klik op OK.

Klik op de koppeling Standaardwaarde instellen om het standaardhoofdlettergebruik voor alle kenmerknamen in te stellen.

3 Selecteer het type kenmerk in het pop-upmenu Type kenmerk.

Als u Opsomming selecteert, typt u elke toegestane waarde voor het kenmerk in het vak Waarden. Scheid de waarden met

komma's, maar zonder spaties. De opsommingswaarden van het kenmerk

showborder van de cfchart-tag worden

weergegeven als

yes,no.

Bibliotheken, tags en kenmerken verwijderen

1 Selecteer in de tagbibliotheek-editor (Bewerken > Tagbibliotheken) een tagbibliotheek, tag of kenmerk in het vak Tags.

2 Klik op de minknop (–).

3 Klik op OK om het item voorgoed te verwijderen.

Het item wordt verwijderd uit het vak Tags.

4 Klik op OK om de tagbibliotheek-editor te sluiten en de verwijdering te voltooien.

Zie ook

“De codeeromgeving aanpassen” op pagina 295

Aangepaste tags importeren in Dreamweaver

U kunt aangepaste tags importeren in Dreamweaver, zodat ze een integraal onderdeel vormen van de ontwerpomgeving.

Als u bijvoorbeeld de naam van een geïmporteerde tag begint te typen in de codeweergave, verschijnt het menu met

coderingstips, waarin de kenmerken van de tag worden weergegeven, zodat u een kenmerk kunt selecteren.

Tags importeren uit XML-bestanden

U kunt tags importeren uit een XML-DTD-bestand (Document Type Definition) of een schema.

1 Open de tagbibliotheek-editor (Bewerken > Tagbibliotheken).

2 Klik op de plusknop (+) en selecteer DTD-schema > XML DTD- of Schema-bestand importeren.

DREAMWEAVER CS3

Handboek

330

3 Typ de bestandsnaam of URL van het DTD- of schemabestand.

4 Typ het voorvoegsel dat voor de tags moet worden gebruikt.

Opmerking: Een voorvoegsel wordt gebruikt om een tag in de code te identificeren als onderdeel van een bepaalde

tagbibliotheek. Sommige tagbibliotheken gebruiken geen voorvoegsels.

5 Klik op OK.

Aangepaste ASP.NET-tags importeren

U kunt aangepaste ASP.NET-tags importeren in Dreamweaver.

Zorg voordat u begint dat de aangepaste tag is geïnstalleerd op de testserver, die is gedefinieerd in het dialoogvenster

Sitedefinitie (zie “Een testserver instellen” op pagina 45). Gecompileerde tags (DLL-bestanden) moeten worden geplaatst

in de map /bin in de hoofdmap van de site. Niet-gecompileerde tags (ASCX-bestanden) kunnen zijn opgeslagen in elke

virtuele directory of subdirectory op de server. Raadpleeg de documentatie van Microsoft ASP.NET voor meer informatie.

1 Open een ASP.NET-pagina in Dreamweaver.

2 Open de tagbibliotheek-editor (Bewerken > Tagbibliotheken).

3 Klik op de plusknop (+), selecteer een van de volgende opties en klik op OK.

• Als u alle aangepaste ASP.NET-tags van de toepassingsserver wilt importeren, selecteert u ASP.NET > Alle eigen

ASP.NET-tags importeren.

• Als u alleen bepaalde aangepaste ASP.NET-tags van de toepassingsserver wilt importeren, selecteert u ASP.NET >

Geselecteerde eigen ASP.NET-tags importeren. Klik met ingedrukte Ctrl-toets (Windows) of Command-toets

(Macintosh) op tags in de lijst.

JSP-tags importeren uit een bestand of van een server (web.xml)

U kunt een JSP-tagbibliotheek in Dreamweaver importeren vanuit diverse bestandstypen of vanaf een JSP-server.

1 Open een JSP-pagina in Dreamweaver.

2 Open de tagbibliotheek-editor (Bewerken > Tagbibliotheken).

3 Klik op de plusknop (+) en selecteer JSP > Importeren uit bestand (*.tld, *.jar, *.zip) of JSP > Importeren van server

(web.xml.)

4 Klik op de knop Bladeren of voer een bestandsnaam in voor het bestand met de tagbibliotheek.

5 Voer een URI in die de tagbibliotheek identificeert.

De URI (Uniform Resource Identifier) bestaat vaak uit de URL van de organisatie die de tagbibliotheek onderhoudt. De

URL wordt niet gebruikt om de website van de organisatie weer te geven, maar uitsluitend om de tagbibliotheek te

identificeren.

6 (Optioneel) Typ het voorvoegsel dat voor de tags moet worden gebruikt. Sommige tagbibliotheken gebruiken een

voorvoegsel om een tag in de code te identificeren als onderdeel van een bepaalde tagbibliotheek.

7 Klik op OK.

JRun-tags importeren

Als u Macromedia® JRun™ van Adobe gebruikt, kunt u uw JRun-tags importeren in Dreamweaver.

1 Open een JSP-pagina in Dreamweaver.

2 Open de tagbibliotheek-editor (Bewerken > Tagbibliotheken).

3 Klik op de plusknop (+) en selecteer JSP > JRun Server-tags importeren uit map.

4 Typ een mapnaam voor de map met de JRun-tags.

5 Voer een URI in die de tagbibliotheek identificeert.

DREAMWEAVER CS3

Handboek

331

De URI (Uniform Resource Identifier) bestaat vaak uit de URL van de organisatie die de tagbibliotheek onderhoudt. De

URL wordt niet gebruikt om de website van de organisatie weer te geven, maar uitsluitend om de tagbibliotheek te

identificeren.

6 (Optioneel) Typ het voorvoegsel dat voor de tags moet worden gebruikt. Sommige tagbibliotheken gebruiken een

voorvoegsel om een tag in de code te identificeren als onderdeel van een bepaalde tagbibliotheek.

7 Klik op OK.

332

Hoofdstuk 12: JavaScript-gedrag

toevoegen

U kunt het ingebouwde gedrag gebruiken om het uiterlijk, de functionaliteit en de uitstraling van uw website te verbeteren.

U kunt dit gedrag aan elementen op uw webpagina's koppelen zonder dat u iets hoeft te weten van JavaScript.

JavaScript-gedrag gebruiken

Over JavaScript-gedrag

Met gedrag van Adobe® Dreamweaver® CS3 plaatst u JavaScript-code in documenten die bezoekers in staat stelt een

webpagina op diverse manieren te wijzigen of bepaalde taken te starten. Met gedrag wordt een combinatie aangeduid van

een gebeurtenis en een actie die door die gebeurtenis wordt geactiveerd. In het paneel Gedrag kunt u een gedrag aan een

pagina toevoegen door een actie op te geven en vervolgens de gebeurtenis op te geven die de desbetreffende actie moet

activeren.

Opmerking: De code van een gedrag is JavaScript-code aan de client-kant. Dit houdt in dat de code in browsers en niet op

servers wordt uitgevoerd.

Gebeurtenissen zijn in feite berichten die worden gegenereerd door browsers en die aangeven dat een bezoeker van uw

webpagina een handeling heeft uitgevoerd op de pagina. Als een bezoeker bijvoorbeeld de muisaanwijzer over een

koppeling beweegt, genereert de browser een gebeurtenis

onMouseOver voor deze koppeling. Vervolgens controleert de

browser of er bepaalde JavaScript-code (die is opgegeven op de pagina die wordt bekeken) moet worden aangeroepen in

reactie op de gebeurtenis. Voor de verschillende pagina-elementen worden verschillende gebeurtenissen gedefinieerd. Zo

zijn

onMouseOver en onClick in de meeste browsers gebeurtenissen die aan koppelingen zijn gekoppeld, terwijl onLoad een

gebeurtenis is die is gekoppeld aan afbeeldingen en aan de

hoofdsectie van het document.

Een actie is vooraf geschreven JavaScript-code voor het uitvoeren van een taak, zoals het openen van een browservenster,

het tonen of verbergen van een AP-element, het afspelen van een geluid of het stopzetten van een Adobe Shockwave-

filmpje. De acties die bij Dreamweaver worden geleverd, zijn compatibel met vrijwel alle browsers.

Nadat u een gedrag aan een pagina-element hebt gekoppeld, roept dat gedrag telkens de actie (JavaScript-code) aan die aan

een gebeurtenis is gekoppeld, op het moment dat die gebeurtenis voor dat element plaatsvindt. (De gebeurtenissen die u

kunt gebruiken om een bepaalde actie te activeren, verschillen van browser tot browser.) Als u bijvoorbeeld de actie Popup

Message koppelt aan een koppeling en opgeeft dat deze actie moet worden geactiveerd door de gebeurtenis

onMouseOver,

wordt het bericht weergegeven wanneer iemand de aanwijzer boven de koppeling houdt.

Eén gebeurtenis kan meerdere verschillende acties activeren en u kunt opgeven in welke volgorde deze acties moeten

plaatsvinden.

Bij Dreamweaver worden ongeveer twee dozijn acties geleverd. Extra acties vindt u op de Exchange-website op

www.adobe.com/go/dreamweaver_exchange_nl en ook op websites voor ontwikkelaars van derden. U kunt ook uw eigen

acties schrijven als u ervaring hebt in het werken met JavaScript.

Opmerking: De termen gedrag en actie zijn Dreamweaver-termen en geen HTML-termen. Vanuit de browser gezien verschilt

een actie in geen enkel opzicht van andere stukjes JavaScript-code.

Overzicht van het paneel Gedrag

U kunt het paneel Gedrag (Venster > Gedrag) gebruiken om gedrag aan pagina-elementen (of om precies te zijn aan tags)

te koppelen en om parameters van gedrag dat u al eerder hebt gekoppeld, te wijzigen.

DREAMWEAVER CS3

Handboek

333

Gedragingen die al zijn gekoppeld aan het op dat moment geselecteerde pagina-element, worden in de lijst met gedragingen

(het hoofdgedeelte van het paneel) weergegeven en alfabetisch gerangschikt op gebeurtenis. Als er voor één gebeurtenis

meerdere acties worden weergegeven, worden deze acties uitgevoerd in de volgorde waarin ze in de lijst worden

weergegeven. Als er geen gedragingen in de lijst met gedragingen worden weergegeven, zijn er geen gedragingen aan het

op dat moment geselecteerde element gekoppeld.

In het paneel Gedrag kunt u de volgende opties selecteren:

Ingestelde gebeurtenissen weergeven Hiermee geeft u alleen die gebeurtenissen weer die aan het huidige document zijn

gekoppeld. Gebeurtenissen zijn onderverdeeld in client-kant- en server-kantcategorieën. De gebeurtenissen in beide

categorieën bevinden zich in een uitvouwbare lijst. Ingestelde gebeurtenissen weergeven is de standaardweergave.

Alle gebeurtenissen tonen Hiermee geeft u een alfabetisch gerangschikte lijst van alle gebeurtenissen voor een bepaalde

categorie weer.

Actie toevoegen (+) Hiermee geeft u een menu weer met acties die aan het op dat moment geselecteerde element kunnen

worden gekoppeld. Als u in deze lijst een actie selecteert, wordt er een dialoogvenster weergegeven waarin u de parameters

voor de actie kunt opgeven. Als alle acties lichter gekleurd worden weergegeven (niet beschikbaar zijn), kunnen er geen

gebeurtenissen worden gegenereerd door het geselecteerde element.

Verwijderen (–) Hiermee verwijdert u de geselecteerde gebeurtenis en actie uit de lijst met gedragingen.

De knoppen pijl-omhoog en pijl-omlaag Hiermeeplaatstudegeselecteerdeactiehogeroflagerindelijstmetgedragingen

voor een bepaalde gebeurtenis. U kunt de volgorde van acties alleen voor een bepaalde gebeurtenis wijzigen—u kunt

bijvoorbeeld de volgorde wijzigen waarin bepaalde acties worden uitgevoerd voor de gebeurtenis

onLoad, maar de acties

voor de gebeurtenis

onLoad blijven bij elkaar in de lijst met gedragingen. Voor acties die niet hoger of lager in de lijst kunnen

worden geplaatst, zijn de pijlknoppen uitgeschakeld.

Gebeurtenissen Hiermee geeft u een pop-upmenu weer dat alleen zichtbaar is wanneer er een gebeurtenis is geselecteerd

en dat alle gebeurtenissen bevat die de actie kunnen activeren (dit menu verschijnt wanneer u op de pijlknop naast de naam

van de geselecteerde gebeurtenis klikt). Welke gebeurtenissen worden weergegeven, hangt af van het object dat is

geselecteerd. Als er andere gebeurtenissen worden weergegeven dan u had verwacht, moet u controleren of u wel het juiste

pagina-element of de juiste tag hebt geselecteerd. (Als u een specifieke tag wilt selecteren, moet u de tagkiezer gebruiken,

die zich in de linkerbenedenhoek van het documentvenster bevindt.) Controleer ook of u de juiste browser of browsers

hebt geselecteerd in het vervolgmenu Gebeurtenissen weergeven voor.

Opmerking: Gebeurtenisnamentussenhaakjeszijnalleenbeschikbaarvoorkoppelingen.Alsueenvandezegebeurtenisnamen

selecteert, wordt er automatisch een lege koppeling aan het geselecteerde pagina-element toegevoegd en wordt het gedrag aan

deze koppeling gekoppeld in plaats van aan het element zelf. De lege koppeling is gespecificeerd als href="javascript:;" in de

HTML-code.

Gebeurtenissen weergeven voor Hiermee geeft u de browsers op waarin het huidige gedrag zou moeten werken (dit is het

vervolgmenu van het menu Gebeurtenissen). De keuze die u maakt in dit menu, bepaalt welke gebeurtenissen in het menu

Gebeurtenissen worden weergegeven. Oudere browsers ondersteunen over het algemeen minder gebeurtenissen dan

nieuwere en in de meeste gevallen geldt dat hoe algemener uw keuze van doelbrowsers, hoe minder gebeurtenissen worden

weergegeven. Als u bijvoorbeeld browsers met versienummer 3.0 en hoger selecteert, kunt u alleen gebeurtenissen

selecteren die in Netscape Navigator en Microsoft Internet Explorer versie 3.0 en hoger beschikbaar zijn. Dit levert een zeer

beperkte lijst met gebeurtenissen op.

Over gebeurtenissen

Elke browser biedt een reeks gebeurtenissen die u kunt koppelen aan de acties die in het menu Acties (+) van het paneel

Gedrag worden weergegeven. Wanneer een bezoeker van uw webpagina ergens op de pagina tekst invoert of ergens op klikt

(bijvoorbeeld op een afbeelding), genereert de browser gebeurtenissen. Deze gebeurtenissen kunnen worden gebruikt om

JavaScript-functies aan te roepen die een actie uitvoeren. In Dreamweaver zijn vele gangbare acties beschikbaar die u met

deze gebeurtenissen kunt activeren.

In het Dreamweaver Support Center op www.adobe.com/go/dreamweaver_support_nl vindt u namen en beschrijvingen

van de gebeurtenissen die bij elke browser worden geleverd.

DREAMWEAVER CS3

Handboek

334

Welke gebeurtenissen in het menu Gebeurtenissen verschijnen, is afhankelijk van het geselecteerde object en van de

browsers die zijn opgegeven in het vervolgmenu Gebeurtenissen weergeven voor. Als u wilt weten welke gebeurtenissen

een bepaalde browser ondersteunt voor een bepaald pagina-element, voegt u het desbetreffende pagina-element in uw

document in, koppelt u een gedrag aan het element en kijkt u vervolgens in het menu Gebeurtenissen in het paneel Gedrag.

(Standaard worden gebeurtenissen uit de lijst met HTML 4.01-gehaald en worden deze door de meeste moderne browsers

ondersteund.) Gebeurtenissen kunnen uitgeschakeld zijn (ze worden dan lichter gekleurd weergegeven) als de relevante

objecten nog niet op de pagina aanwezig zijn of als het geselecteerde object geen gebeurtenissen kan ontvangen. Als er

andere gebeurtenissen worden weergegeven dan u had verwacht, moet u controleren of u het juiste object hebt geselecteerd

of moet u andere doelbrowsers kiezen in het vervolgmenu Gebeurtenissen weergeven voor.

Als u een gedrag aan een afbeelding koppelt, worden sommige gebeurtenissen (zoals

onMouseOver) tussen haakjes

weergegeven. Deze gebeurtenissen zijn alleen beschikbaar voor koppelingen. Wanneer u een van deze gebeurtenissen

selecteert, plaatst Dreamweaver een

<a>-tag rond de afbeelding om een lege koppeling te definiëren. De lege koppeling

wordt in het vak Koppeling van de eigenschappencontrole vertegenwoordigd door

javascript:;. U kunt de waarde van de

koppeling wijzigen als u deze in een echte koppeling naar een andere pagina wilt veranderen, maar als u de JavaScript-

koppeling verwijdert, zonder deze te vervangen door een andere koppeling, verwijdert u het gedrag.

Als u wilt weten welke tags u kunt gebruiken in combinatie met een bepaalde gebeurtenis in een bepaalde browser, zoekt u

naar de gebeurtenis in een van de bestanden in de map Dreamweaver/Configuratie/Gedrag/Gebeurtenissen.

Een gedrag toepassen

U kunt gedrag koppelen aan het gehele document (dat wil zeggen aan de <body>-tag) of aan koppelingen, afbeeldingen,

formulierelementen en verscheidene andere HTML-elementen.

De doelbrowser die u selecteert, bepaalt welke gebeurtenissen worden ondersteund voor een bepaald element.

Ukuntmeerdanéénactievoorelkegebeurtenisopgeven. Actieswordenuitgevoerdindevolgordewaarinzeindekolom

Acties van het paneel Gedrag worden weergegeven, maar u kunt die volgorde wijzigen.

1 Selecteer een element op de pagina, zoals een afbeelding of koppeling.

Als u een gedrag aan de volledige pagina wilt koppelen, klikt u op de

<body>-tag in de tagkiezer in de linkerbenedenhoek

van het documentvenster.

2 Kies Venster > Gedrag.

3 Klik op de plusknop (+) en selecteer een actie in het menu Acties.

Acties in dit menu die lichter gekleurd worden weergegeven, kunnen niet worden gekozen. Mogelijk worden deze acties

lichter gekleurd weergegeven, omdat een vereist object niet in het huidige document aanwezig is. De actie Shockwave of

Flash beheren wordt bijvoorbeeld lichter gekleurd weergegeven als het document geen Shockwave- of Flash SWF-

bestanden bevat.

Als u een actie selecteert, wordt er een dialoogvenster weergegeven met de parameters en instructies voor de actie.

4 Voer parameters in voor de actie en klik op OK.

Alle acties in Dreamweaver werken in moderne browsers. Sommige acties werken niet in oudere browsers, maar ze zullen

geen fouten veroorzaken.

Opmerking: Doelelementen vereisen een unieke id. Als u bijvoorbeeld het gedrag Afbeelding verwisselen wilt toepassen op een

afbeelding, heeft de afbeelding een id nodig. Als u geen id voor het element hebt opgegeven, geeft Dreamweaver er automatisch

een voor u op.

5 De standaardgebeurtenis voor het activeren van de actie wordt in de kolom Gebeurtenissen weergegeven. Als dit niet

de gewenste activeringsgebeurtenis is, selecteert u een andere gebeurtenis in het pop-upmenu Gebeurtenissen. (Als u het

menu Gebeurtenissen wilt openen, selecteert u een gebeurtenis of actie in het paneel Gedrag en klikt u op de zwarte, naar

beneden wijzende pijl die tussen de naam van de gebeurtenis en de naam van de actie wordt weergegeven.)

DREAMWEAVER CS3

Handboek

335

Gedrag wijzigen of verwijderen

Nadat u een gedrag hebt gekoppeld, kunt u de gebeurtenis wijzigingen waarmee de actie wordt geactiveerd, acties

toevoegen of verwijderen en parameters voor acties wijzigen.

1 Selecteer een object waaraan een gedrag is gekoppeld.

2 Kies Venster > Gedrag.

3 Breng de wijzigingen aan:

• Als u de parameters van een actie wilt bewerken, dubbelklikt u op de naam van de actie of selecteert u de naam en drukt

u op Enter (Windows) of Return (Macintosh). Vervolgens wijzigt u de parameters in het dialoogvenster en klikt u op OK.

• Als u de volgorde van acties voor een bepaalde gebeurtenis wilt wijzigen, selecteert u een actie en klikt u op de knop pijl-

omhoog of pijl-omlaag. U kunt in plaats daarvan ook de actie selecteren en deze met knippen en plakken op de gewenste

locatie tussen de andere acties neerzetten.

• Als u een gedrag wilt verwijderen, selecteert u dit gedrag en klikt u op de minknop (–) of drukt u op Delete.

Een gedrag bijwerken

1 Selecteer een element waaraan het gedrag is gekoppeld.

2 Kies Venster > Gedrag en dubbelklik op het gedrag.

3 Breng de wijzigingen aan en klik in het dialoogvenster van het gedrag op OK.

Overal waar het gedrag op die pagina voorkomt, wordt het bijgewerkt. Als datzelfde gedrag ook op andere pagina's van uw

website voorkomt, moet u het gedrag per pagina bijwerken.

Gedrag van derden downloaden en installeren

Er zijn vele uitbreidingen beschikbaar op de website Exchange for Dreamweaver

(www.adobe.com/go/dreamweaver_exchange_nl).

1 Kies Venster > Gedrag en selecteer Meer gedrag ophalen in het menu Acties.

De primaire browser wordt geopend en de Exchange-website wordt weergegeven.

2 Ga op zoek naar de gewenste pakketten door te bladeren of gericht te zoeken.

3 Download en installeer het gewenste uitbreidingspakket.

Zie “Extensies toevoegen en beheren in Dreamweaver” op pagina 677 voor meer informatie.

Zie ook

“Extensies toevoegen en beheren in Dreamweaver” op pagina 677

Ingebouwd Dreamweaver-gedrag toepassen

Ingebouwd gedrag gebruiken

De gedragingen die in Dreamweaver zijn opgenomen, zijn allemaal afgestemd op het gebruik in moderne browsers. In

oudere browsers doen ze niets.

Opmerking: De Dreamweaver-acties zijn zo geschreven dat ze kunnen functioneren in zoveel mogelijk browsers. Als u

handmatig code uit een Dreamweaver-actie verwijdert, of deze vervangt door uw eigen code, gaat de compatibiliteit met

meerdere browsers mogelijk verloren.

Hoewel de Dreamweaver-acties zijn geschreven om de compatibiliteit tussen browsers te maximaliseren, ondersteunen

sommige browsers JavaScript helemaal niet, en zullen veel mensen die door het web bladeren JavaScript in hun browsers

uitgeschakeld laten. Voor de beste resultaten tussen platforms, zorgt u voor alternatieve interfaces die u tussen

<noscript>-

tags plaatst zodat mensen zonder JavaScript uw site ook kunnen gebruiken.

DREAMWEAVER CS3

Handboek

336

De Call JavaScript-gedrag toepassen

Met het gedrag JavaScript aanroepen kunt u zorgen dat er een aangepaste functie of regel JavaScript-code wordt uitgevoerd

wanneer zich een gebeurtenis voordoet. (U kunt het script zelf schrijven, maar u kunt ook code gebruiken die worden

aangeboden in verscheidene gratis JavaScript-bibliotheken op internet.)

1 Selecteer een object en kies JavaScript aanroepen in het menu Acties van het paneel Gedrag.

2 Typ de exacte JavaScript-code die moet worden uitgevoerd of typ de naam van een functie.

Als u bijvoorbeeld een knop Vorige wilt maken, kunt u het volgende typen:

if (history.length > 0){history.back()}.

Als u de code in een functie hebt ingekapseld, typt u alleen de functienaam (bijvoorbeeld

hGoBack()).

3 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Eigenschap wijzigen toepassen

Gebruik het gedrag Eigenschap wijzigen om de waarde van een van de eigenschappen van een object (bijvoorbeeld de

achtergrondkleur van een laag of de actie van een formulier) te wijzigen.

Opmerking: Gebruik dit gedrag alleen als u een ervaren programmeur bent en u alles weet van HTML en JavaScript.

1 Selecteer een object en kies Eigenschap wijzigen in het menu Acties van het paneel Gedrag.

2 Selecteer in het menu Type element een elementtype om alle geïdentificeerde elementen van dat type weer te geven.

3 Selecteer een element in het menu Element-id.

4 Selecteer een eigenschap in het menu Eigenschap of typ de naam van de eigenschap in het vak.

5 Voer de nieuwe waarde voor de nieuwe eigenschap in het veld Nieuwe waarde in.

6 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Browser controleren toepassen

Opmerking: Dit gedrag is vanaf Dreamweaver 9 verouderd. Als u het toch wilt gebruiken, moet u het menu-item Afgekeurd

in het menu Acties van het paneel Gedrag selecteren.

Gebruik het gedrag Browser controleren om bezoekers naar verschillende webpagina's te sturen afhankelijk van het merk

en versienummer van hun browsers. U kunt bijvoorbeeld bezoekers die Netscape Navigator 4.0 gebruiken, naar een andere

pagina sturen dan bezoekers die Internet Explorer 4.0 gebruiken.

Het is handig om dit gedrag te koppelen aan de

<body>-tag van een pagina die compatibel is met vrijwel elke browser (en

waarop geen andere JavaScript-code aanwezig is). Zo krijgen bezoekers van deze pagina die JavaScript hebben

uitgeschakeld, ook iets te zien.

U kunt dit gedrag ook aan een lege koppeling koppelen, bijvoorbeeld

<a href="javascript:;">) en de bestemming van

de koppeling door de actie laten bepalen op basis van het merk en de versie van de browser van de bezoeker.

1 Selecteer een object en kies Afgekeurd > Browser controleren in het menu Acties van het paneel Gedrag.

2 Bepaal hoe u de bezoekers van elkaar wilt onderscheiden: door het browsermerk, de browserversie of beide.

3 Geef een versie van Netscape Navigator op.

4 Selecteer in de aangrenzende pop-upmenu's opties voor de bestemming (Ga naar URL, Ga naar alternatieve URL of Op

deze pagina blijven.) Hier kunt u opgeven wat er moet gebeuren als de browser de Netscape Navigator-versie is die u hebt

opgegeven (of een hogere versie) en wat er moet gebeuren als dat niet het geval is.

5 Geef een versie van Internet Explorer op en selecteer opties voor de bestemming, zoals u ook bij stap 4 hebt gedaan.

6 Selecteer een optie in het menu Andere browsers om op te geven wat er moet gebeuren als de browser noch Netscape

Navigator, noch Internet Explorer is.

DREAMWEAVER CS3

Handboek

337

De optie Op deze pagina blijven is de beste optie voor andere browsers dan Netscape Navigator en Internet Explorer omdat

de meeste van deze browsers JavaScript niet ondersteunen. Bovendien blijven browsers die dit gedrag niet kunnen lezen,

toch al op deze pagina.

7 Voer in de vakken onder in het dialoogvenster de paden en bestandsnamen van de URL en de alternatieve URL in. Als

u een externe URL invoert, moet u behalve het www-adres ook het voorvoegsel http:// invoeren.

8 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Insteekmodule controleren toepassen

Gebruik het gedrag Insteekmodule controleren om bezoekers naar verschillende webpagina's te sturen afhankelijk van het

antwoord op de vraag of ze de gespecificeerde insteekmodule hebben geïnstalleerd. U kunt bezoekers bijvoorbeeld naar de

ene pagina sturen als ze Shockwave al hebben en naar de andere pagina als ze Shockwave nog niet hebben geïnstalleerd.

Opmerking: U kunt met JavaScript geen specifieke insteekmodules detecteren in Internet Explorer. Als u echter Flash of

Director selecteert, wordt er VBScript-code aan uw pagina toegevoegd waarmee deze insteekmodules wel worden gedetecteerd

in Internet Explorer op Windows-computers. De detectie van insteekmodules in Internet Explorer onder Mac OS is niet

mogelijk.

1 Selecteer een object en kies Insteekmodule controleren in het menu Acties van het paneel Gedrag.

2 Selecteer een insteekmodule in het menu Insteekmodule of klik op Invoeren en typ de exacte naam van de

insteekmodule in het aangrenzende vak.

U moet de naam van de insteekmodule exact zo invoeren als is opgegeven in vet op de pagina met informatie over

insteekmodules (plug-ins) in Netscape Navigator. (Selecteer in Windows in de Help van Netscape Navigator de optie About

Plug-ins of selecteer in Mac OS de optie About Plug-ins in het Apple-menu.)

3 Geef in het vak Indien gevonden, ga naar URL een URL op voor bezoekers die over de insteekmodule beschikken.

Als u een externe URL opgeeft, moet u het voorvoegsel http:// in het adres opnemen. Als u het veld leeg laat, blijven

bezoekers op dezelfde pagina.

4 Geef in het vak Ga anders naar de URL een alternatieve URL op voor bezoekers die de insteekmodule niet hebben. Als

u het veld leeg laat, blijven bezoekers op dezelfde pagina.

5 Geef op wat er moet gebeuren als detectie van insteekmodules niet mogelijk is. Als detectie niet mogelijk is, wordt de

bezoeker standaard naar de URL gestuurd die in het vak Ga anders naar de URL is opgegeven. Als u de bezoeker

daarentegen naar de eerste URL (in het tekstvak Indien gevonden, ga naar URL) wilt sturen, selecteert u de optie Ga altijd

naar de eerste URL als detectie niet mogelijk is. Als u deze optie selecteert, betekent dat in feite: 'neem aan dat de bezoeker

over de insteekmodule beschikt, tenzij de browser expliciet aangeeft dat de insteekmodule niet aanwezig is'. In het

algemeen geldt dat u deze optie kunt selecteren als de inhoud van de insteekmodule deel uitmaakt van de webpagina. Als

dat niet het geval is, moet u deze optie niet selecteren.

Opmerking: Deze optie is alleen van toepassing op Internet Explorer. Netscape Navigator kan insteekmodules altijd detecteren.

6 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Shockwave of Flash beheren toepassen

Opmerking: Dit gedrag is vanaf Dreamweaver 9 verouderd. Als u het toch wilt gebruiken, moet u het menu-item Afgekeurd

in het menu Acties van het paneel Gedrag selecteren.

Gebruik het gedrag Shockwave of Flash beheren als u een film wilt afspelen, stoppen of terugspoelen of naar een frame wilt

gaan in een Shockwave- of Flash SWF-bestand.

1 Selecteer Invoegen > Media > Shockwave of Invoegen > Media > Flash om een Shockwave- of Flash SWF-bestand in te

voegen.

2 Selecteer Venster > Eigenschappen en typ een naam voor de film in het vak in de linkerbovenhoek naast het Shockwave-

of Flash-pictogram. U moet de film een naam geven om deze te kunnen controleren met dit gedrag.

DREAMWEAVER CS3

Handboek

338

3 Selecteer het item (bijvoorbeeld een knop Afspelen) waarmee u het Shockwave- of Flash SWF-bestand wilt controleren.

4 Kies Afgekeurd > Shockwave of Flash beheren vanuit het menu Acties van het paneel Gedrag.

5 Selecteer een film in het menu Film.

Dreamweaver geeft automatisch de namen weer van alle Shockwave- en Flash SWF-bestanden in het huidige document.

(In Dreamweaver worden films weergegeven met bestandsnamen die eindigen op .dcr, .dir, .swf of .spl en die zich bevinden

tussen <object>- of <embed>-tags.)

6 Geef op of de film moet worden afgespeeld, gestopt of teruggespoeld of dat er een bepaald frame in de film moet worden

weergegeven. Met de optie Afspelen wordt de film afgespeeld vanaf het frame waar het gedrag zich voordoet.

7 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag AP-element slepen toepassen

Met het gedrag AP-element slepen kan de bezoeker een absoluut gepositioneerd (AP) element slepen. Gebruik dit gedrag

om puzzels, schuifregelaars en andere beweegbare interface-elementen te maken.

U kunt onder andere het volgende opgeven: de richting waarin de bezoeker het AP-element kan slepen (horizontaal,

verticaal of in elke richting), een bestemming waarnaar de bezoeker het AP-element moet slepen, of de bestemming

magnetisch moet zijn en het AP-element moet aantrekken als dat zich binnen een straal van een bepaald aantal pixels ten

opzichte van deze bestemming bevindt, wat er moet gebeuren als het AP-element zijn bestemming raakt en meer.

Omdat het gedrag AP-element slepen moet worden aangeroepen voordat de bezoeker het AP-element kan slepen, moet u

het gedrag AP-element slepen aan het

body-object koppelen (met de gebeurtenisonLoad).

1 Selecteer Invoegen > Lay-outobjecten > AP Div of klik op de knop AP Div tekenen op de invoegbalk om een AP Div in

de ontwerpweergave van het documentvenster te tekenen.

2 Klik op de

<body>-tag in de tagkiezer in de linkerbenedenhoek van het documentvenster.

3 Selecteer AP-element slepen in het menu Acties van het paneel Gedrag.

Als AP-element slepen niet beschikbaar is, hebt u waarschijnlijk een AP-element geselecteerd.

4 Selecteer AP-element in het pop-upmenu AP-element.

5 Selecteer Beperkt of Onbeperkt in het pop-upmenu Verplaatsing.

Onbeperkteverplaatsingisgeschiktvoorpuzzelsenanderespelletjeswaarbijitemsmoetenwordengesleeptenneergezet.

Voor schuifregelaars en beweegbare decorstukken, zoals laden van kasten, gordijnen en lamellen kunt u het beste voor

beperkte verplaatsing kiezen.

6 Voor beperkte verplaatsing kunt u waarden (in pixels) invoeren in de vakken Omhoog, Omlaag, Links en Rechts.

Dit zijn relatieve waarden ten opzichte van de beginpositie van het AP-element. Als u de beweging wilt beperken tot een

rechthoekig gebied, voert u in alle vier de tekstvakken positieve waarden in. Als u alleen een verticale beweging wilt

toestaan, voert u in de vakken Omhoog en Omlaag positieve waarden in en voert u in de vakken Links en Rechts de waarde

0 in. Als u alleen een horizontale beweging wilt toestaan, voert u in de vakken Links en Rechts positieve waarden in en

voert u in de vakken Omhoog en Omlaag de waarde 0 in.

7 Voer in de vakken Links en Boven de waarden (in pixels) in voor de neerzetbestemming.

De neerzetbestemming is de plaats waar de bezoeker het AP-element naartoe moet slepen. Een AP-element heeft de

neerzetbestemming bereikt wanneer de coördinaten voor de linkerkant en de bovenkant van het element overeenkomen

met de waarden die u in de vakken Links en Boven hebt ingevoerd. Dit zijn relatieve waarden ten opzichte van de

linkerbovenhoek van het browservenster. Klik op Huidige positie ophalen om in de tekstvakken automatisch de huidige

positie van het AP-element in te vullen.

8 Voer in het vak 'Magnetisch indien binnen' een waarde in (in pixels) om te bepalen hoe dicht bij de neerzetbestemming

de bezoeker moet komen voordat de bestemming magnetisch wordt en het AP-element automatisch naar de bestemming

wordt getrokken.

Als u hier een hogere waarde invoert, kan de bezoeker de neerzetbestemming gemakkelijker vinden.

DREAMWEAVER CS3

Handboek

339

9 Voor makkelijke puzzels en de eenvoudige manipulatie van decorstukken hebt u hier genoeg aan. Als u echter

sleepgrepen voor het AP-element wilt definiëren, de beweging van het AP-element wilt bijhouden terwijl het wordt gesleept

en een actie wilt activeren wanneer het AP-element wordt neergezet, klikt u op de tab Geavanceerd.

10 Als u wilt opgeven dat de bezoeker op een bepaald gebied van het AP-element moet klikken om het element te slepen,

selecteert u in het menu Sleepgreep de optie Gebied in het AP-element. Vervolgens voert u de coördinaten in voor de

bovenkant en de linkerkant en de breedte en hoogte van de sleepgreep.

Deze optie is handig als de afbeelding binnen het AP-element een element bevat dat verwijst naar de mogelijkheid om te

slepen, zoals een titelbalk of een handvat van een lade. Stel deze optie niet in als u wilt dat de bezoeker op een willekeurige

plek in het AP-element mag klikken om het te slepen.

11 Selecteer de gewenste optie voor Tijdens het slepen:

• Selecteer Breng het element naar voren als het AP-element in de stapelvolgorde op de voorgrond moet worden geplaatst

terwijl het wordt gesleept. Als u deze optie selecteert, kunt u het pop-upmenu gebruiken om op te geven of het AP-

element op de voorgrond moet blijven of naar de oorspronkelijke positie in de stapelvolgorde moet terugkeren nadat het

is gesleept.

• Voer JavaScript-code of een functienaam (bijvoorbeeld monitorAPelement()) in het vak JavaScript aanroepen in als u

de code of functie herhaaldelijk wilt uitvoeren terwijl het AP-element wordt gesleept. U kunt bijvoorbeeld een functie

schrijven die de coördinaten van het AP-element in de gaten houdt en in een tekstvak aanwijzingen weergeeft, zoals “je

wordt al warmer” of “het doel bevindt zich heel ergens anders”.

12 Voer JavaScript-code of een functienaam (bijvoorbeeld

evaluateAPelementPos()) in het tweede vak JavaScript

aanroepen in als u de code of functie wilt uitvoeren wanneer het AP-element wordt neergezet. Selecteer Alleen bij bereiken

van bestemming als de JavaScript-code alleen moet worden uitgevoerd als het AP-element de neerzetbestemming heeft

bereikt.

13 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere

gebeurtenis of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Informatie verzamelen over het versleepbare AP-element

Wanneer u het gedrag AP-element slepen aan een object koppelt, voegt Dreamweaver de functie MM_dragLayer() in de

kopsectie van uw document in. (De functie blijft de oude naamgevingsconventie voor AP-elementen (“Laag”) gebruiken,

zodat lagen die in vorige versies van Dreamweaver zijn gemaakt, bewerkbaar blijven.) Deze functie registreert het AP-

element niet alleen als versleepbaar, maar definieert daarnaast nog drie eigenschappen voor elk versleepbare AP-element:

MM_LEFTRIGHT, MM_UPDOWN en MM_SNAPPED, die u in uw eigen JavaScript-functies kunt gebruiken om de relatieve horizontale

en verticale positie van het AP-element te kunnen bepalen en om te kunnen bepalen of het AP-element de

neerzetbestemming heeft bereikt.

Opmerking: De informatie die hier wordt gegeven, is alleen bedoeld voor ervaren JavaScript-programmeurs.

De volgende functie geeft bijvoorbeeld de waarde weer van de eigenschap

MM_UPDOWN (de huidige verticale positie van het

AP-element), die in een formulierveld

curPosField wordt genoemd. (Formuliervelden zijn handig voor het weergeven van

gegevens die voortdurend worden bijgewerkt omdat ze dynamisch zijn, dat wil zeggen dat u de inhoud kunt wijzigen nadat

de pagina is geladen.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

U kunt de waarden van MM_UPDOWN of MM_LEFTRIGHT in een formulierveld weergeven, maar u kunt deze waarden ook op

diverse andere manieren gebruiken. U kunt bijvoorbeeld een functie schrijven waarmee verschillende berichten in een

formulierveld kunnen worden weergegeven afhankelijk van de waarde die de positie van het AP-element ten opzichte van

de neerzetbestemming aangeeft, of u kunt een andere functie aanroepen om een AP-element weer te geven of te verbergen

afhankelijk van de waarde.

DREAMWEAVER CS3

Handboek

340

Dit is met name nuttig om de eigenschap MM_SNAPPED te lezen wanneer u verschillende AP-elementen op een pagina hebt,

die allemaal hun eigen doel moeten bereiken voordat de bezoeker verder kan gaan naar de volgende pagina of taak. U kunt

bijvoorbeeld een functie schrijven die telt hoeveel AP-elementen de

MM_SNAPPED-waarde true hebben en deze aanroepen

wanneer een AP-element wordt neergezet. Wanneer bij het tellen van de lagen die op hun bestemming zijn aangekomen

het gewenste aantal is bereikt, kunt u de bezoeker naar de volgende pagina sturen of een bericht weergeven waarin u de

bezoeker feliciteert met het behaalde resultaat.

Het gedrag Ga naar URL toepassen

Met het gedrag Ga naar URL wordt een nieuwe pagina geopend in het huidige venster of in het opgegeven frame. Dit

gedrag is handig voor het wijzigen van de inhoud van twee of meer frames met één muisklik.

1 Selecteer een object en kies Ga naar URL in het menu Acties van het paneel Gedrag.

2 Selecteer een bestemming voor de URL in de lijst Openen in.

In de lijst Openen in worden automatisch de namen van alle frames in de huidige frameset en ook het hoofdvenster

weergegeven. Als er geen frames zijn, vormt het hoofdvenster de enige optie.

Opmerking: Dit gedrag kan leiden tot onverwachte resultaten als een van de frames de naam top, blank, self of parent heeft.

Browsers vatten deze namen soms op als gereserveerde doelnamen.

3 Klik op Bladeren om een document te selecteren dat u wilt openen, of voer in het vak URL het pad en de bestandsnaam

van het document in.

4 Herhaal de stappen 2 en 3 om extra documenten in andere frames te openen.

5 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Snelmenu toepassen

Wanneer u een snelmenu maakt met Invoegen > Formulier > Snelmenu, maakt Dreamweaver een menuobject en koppelt

daaraan het gedrag Snelmenu (of Snelmenu Go). U hoeft het gedrag Snelmenu gewoonlijk niet handmatig aan een object

te koppelen.

U kunt een bestaand snelmenu bewerken op een van de volgende twee manieren:

• U kunt menu-items bewerken en opnieuw ordenen, de bestanden wijzigen waar bezoekers via het menu naartoe kunnen

gaan en het venster wijzigen waarin deze bestanden worden geopend door te dubbelklikken op een bestaand gedrag

Snelmenu in het paneel Gedrag.

• U kunt de items in het snelmenu op dezelfde manier bewerken als items in elk ander menu, door het menu te selecteren

en de knop Lijstwaarden in de eigenschappencontrole te gebruiken.

1 Maak een snelmenuobject, als een dergelijk object nog niet in uw document aanwezig is.

2 Selecteer het object en kies Snelmenu in het menu Acties van het paneel Gedrag.

3 Breng de gewenste wijzigingen aan in het dialoogvenster Snelmenu en klik vervolgens op OK.

Zie ook

“Snelmenu's” op pagina 277

“Een dynamisch HTML-formuliermenu invoegen of wijzigen” op pagina 578

Het gedrag Snelmenu Go toepassen

Het gedrag Snelmenu Go is nauw verwant met het gedrag Snelmenu. Met Snelmenu Go kunt u een knop Go (Ga naar) aan

een snelmenu koppelen. (Voordat u dit gedrag gebruikt, moet er al een snelmenu in het document aanwezig zijn.) Als u

op de knop Go klikt, wordt de koppeling geopend die in het snelmenu is geselecteerd. Voor een snelmenu is gewoonlijk

geen knop Go nodig. Als er een item in het snelmenu wordt geselecteerd, wordt er gewoonlijk een URL geladen zonder dat

de gebruiker verder iets hoeft te doen. Maar als de bezoeker hetzelfde item selecteert dat al in het snelmenu is gekozen, gaat

DREAMWEAVER CS3

Handboek

341

de bezoeker niet naar de gewenste locatie. In het algemeen is dat niet erg, maar als het snelmenu in een frame verschijnt

en de items in het snelmenu koppelingen zijn naar pagina's in andere frames, is een knop Go vaak nuttig om bezoekers de

gelegenheid te bieden een item dat al is geselecteerd in het snelmenu, opnieuw te selecteren.

Opmerking: Wanneer u een knop Go met een snelmenu gebruikt, wordt de Go-knop het enige mechanisme dat de gebruiker

naar de URL brengt die aan de selectie in het menu is gekoppeld. Door een menu-item in het snelmenu te kiezen, wordt de

gebruiker niet langer automatisch naar een andere pagina of een ander frame omgeleid.

1 Selecteer een object dat u wilt gebruiken als de Go-knop (gewoonlijk een plaatje van een knop) en kies het gedrag

Snelmenu Go in het menu Acties van het paneel Gedrag.

2 Selecteer in het menu Snelmenu kiezen een menu dat met de Go-knop moet worden geactiveerd en klik op OK.

Het gedrag Browservenster openen toepassen

Gebruik het gedrag Browservenster openen om een pagina in een nieuw venster te openen. U kunt de eigenschappen van

het nieuwe venster opgeven, zoals het formaat, de kenmerken (of het formaat kan worden gewijzigd, of het een menubalk

heeft enzovoort) en de naam. U kunt dit gedrag bijvoorbeeld gebruiken om een grotere afbeelding in een afzonderlijk

venster te openen als de bezoeker op een miniatuurafbeelding klikt. Met dit gedrag kunt u het nieuwe venster precies even

groot maken als de afbeelding.

Als u geen kenmerken voor het venster opgeeft, krijgt het nieuwe venster dat wordt geopend, het formaat en de kenmerken

van het venster van waaruit het is geopend. Als u een willekeurig kenmerk voor het venster opgeeft, worden automatisch

alle andere kenmerken die niet specifiek zijn ingeschakeld, automatisch uitgeschakeld. Als u bijvoorbeeld geen kenmerken

voor het venster instelt, wordt het mogelijk geopend als een venster van 1024 x 768 pixels groot met een navigatiebalk

(waarop de knoppen Vorige, Volgende, Startpagina en Opnieuw laden worden weergegeven), een locatiewerkbalk (waarin

de URL wordt weergegeven), een statusbalk onderaan (waarop statusberichten worden weergegeven) en een menubalk

(met de menu's Bestand, Bewerken, Beeld en andere menu's). Als u expliciet de breedte op 640 pixels en de hoogte op 480

pixels instelt en geen andere kenmerken opgeeft, wordt er alleen een venster van 640 x 480 pixels groot, zonder werkbalken

weergegeven.

1 Selecteer een object en kies Browservenster openen in het menu Acties van het paneel Gedrag.

2 Klik op Bladeren om een bestand te selecteren of voer de URL in die u wilt weergeven.

3 Stel opties in voor de vensterbreedte en -hoogte in (in pixels) en voor de plaatsing van verscheidene werkbalken,

schuifbalken, formaatgrepen en dergelijke in het venster. Geef het venster een naam (gebruik geen spaties en geen speciale

tekens) als u van het venster het doel van koppelingen wilt maken of als u het venster wilt besturen met JavaScript.

4 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Geluid afspelen toepassen

U kunt het gedrag Geluid afspelen gebruiken om een geluidseffect af te spelen wanneer de aanwijzer over een koppeling

wordt bewogen, om muziek af te spelen wanneer de pagina wordt geladen enzovoort.

Opmerking: Browsers hebben mogelijk extra audio-ondersteuning nodig (zoals een audio-insteekmodule) om geluid af te

spelen. Omdat in verschillende browsers verschillende insteekmodules worden gebruikt, is het lastig om precies te voorspellen

hoe deze geluidseffecten zullen klinken.

1 Selecteer een object en kies Geluid afspelen in het menu Acties van het paneel Gedrag.

2 Klik op Bladeren om een geluidsbestand te selecteren of voer in het vak Geluid afspelen het pad en de bestandsnaam in.

3 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Pop-upbericht toepassen

Met het gedrag Pop-upbericht wordt een JavaScript-waarschuwing weergegeven met het bericht dat u opgeeft. Omdat

JavaScript-waarschuwingen slechts één knop (OK) hebben, kunt u dit gedrag wel gebruiken om de gebruiker informatie te

geven, maar niet om de gebruiker een keuze te laten maken.

DREAMWEAVER CS3

Handboek

342

U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten. Als

u een JavaScript-expressie wilt insluiten, plaatst u deze binnen accolades (

{}).Alsueenaccoladewiltweergeven,plaatstu

een backslash voor de accolade (

\{).

Vo or b eel d:

The URL for this page is {window.location}, and today is {new Date()}.

Opmerking: De browser bepaalt het uiterlijk van een waarschuwing. Als u meer controle wilt over het uiterlijk van een

waarschuwing, kunt u overwegen om het gedrag Browservenster openen te gebruiken.

1 Selecteer een object en kies Pop-upbericht in het menu Acties van het paneel Gedrag.

2 Voer in het vak Bericht een bericht in.

3 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Afbeeldingen vooraf laden toepassen

Met het gedrag Afbeeldingen vooraf laden worden afbeeldingen die in eerste instantie nog niet verschijnen wanneer de

pagina wordt weergegeven, alvast in het cachegeheugen geladen waardoor ze sneller worden weergegeven wanneer ze aan

de beurt zijn. (Dit gedrag is bijvoorbeeld handig voor afbeeldingen die andere afbeeldingen vervangen wanneer ze worden

geactiveerd met gedrag of scripts.)

Opmerking: Met het gedrag Afbeelding verwisselen worden alle geselecteerde afbeeldingen automatisch vooraf geladen

wanneer u in het dialoogvenster Afbeelding verwisselen de optie Afbeeldingen vooraf laden selecteert, dus u hoeft Afbeeldingen

vooraf laden niet handmatig toe te voegen wanneer u Afbeelding verwisselen gebruikt.

1 Selecteer een object en kies Afbeeldingen vooraf laden in het menu Acties van het paneel Gedrag.

2 Klik op Bladeren om een afbeeldingsbestand te selecteren of voer in het vak Bronbestand van afbeelding het pad en de

bestandsnaam in.

3 Klik op de plusknop (+) bovenaan in het dialoogvenster om de afbeelding aan de lijst Afbeeldingen vooraf laden toe te

voegen.

4 Herhaal de stappen 3 en 4 voor alle resterende afbeeldingen die u vooraf wilt laden op de huidige pagina.

5 Als u een afbeelding uit de lijst Afbeeldingen vooraf laden wilt verwijderen, selecteert u de desbetreffende afbeelding in

de lijst en klikt u op de minknop (–).

6 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Navigatiebalkafbeelding instellen toepassen

Gebruik het gedrag Navigatiebalkafbeelding instellen om een afbeelding in een navigatiebalkafbeelding te veranderen of

om de weergave en acties van afbeeldingen op een navigatiebalk te wijzigen.

Gebruik het tabblad Basis van het dialoogvenster Navigatiebalkafbeelding instellen als u een navigatiebalkafbeelding wilt

maken of bijwerken, als u de URL wilt wijzigen die wordt weergegeven wanneer de gebruiker op een knop op de

navigatiebalk klikt en als u een ander venster wilt selecteren waarin een URL moet worden weergegeven.

Gebruik het tabblad Geavanceerd van het dialoogvenster Navigatiebalkafbeelding om de status van andere afbeeldingen in

een document te wijzigen op basis van de status van de huidige knop. Als u op een element op een navigatiebalk klikt, keren

alle andere elementen van de navigatiebalk gewoonlijk automatisch terug naar de status Omhoog. Gebruik het tabblad

Geavanceerd als u een andere status wilt instellen voor een afbeelding als de geselecteerde afbeelding zich in de status

Omlaag of Boven bevindt.

Zie ook

“Navigatiebalken” op pagina 279

DREAMWEAVER CS3

Handboek

343

Het gedrag Navigatiebalkafbeelding instellen bewerken

1 Selecteer een afbeelding op de navigatiebalk en kies Venster > Gedrag.

2 Selecteer in het menu Acties het gedrag Navigatiebalkafbeelding instellen dat is gekoppeld aan de gebeurtenis die u

wijzigt.

3 Selecteer de gewenste bewerkingsopties op het tabblad Basis van het dialoogvenster Navigatiebalkafbeelding instellen.

Meerdere afbeeldingen voor een navigatiebalkknop instellen

1 Selecteer een afbeelding op de navigatiebalk die u wilt bewerken en kies Venster > Gedrag.

2 Dubbelklik in het menu Acties op de actie Navigatiebalkafbeelding instellen die is gekoppeld aan de gebeurtenis die u

wijzigt.

3 Klik op het tabblad Geavanceerd van het dialoogvenster Navigatiebalkafbeelding instellen.

4 Selecteer in het menu Wanneer element wordt weergegeven een status voor de afbeelding.

• Selecteer Afbeelding Omlaag als u een andere afbeelding wilt weergeven nadat een gebruiker op de geselecteerde

afbeelding heeft geklikt.

• Selecteer Afbeelding Boven of Afbeelding Boven terwijl omlaag als u een andere afbeelding wilt weergeven wanneer de

aanwijzer zich boven de geselecteerde afbeelding bevindt.

5 Selecteer in de lijst Deze afbeelding ook instellen een andere afbeelding op de pagina.

6 Klik op Bladeren om het afbeeldingsbestand te selecteren dat moet worden weergegeven, of typ in het vak Naar het

afbeeldingsbestand het pad van het afbeeldingsbestand.

7 Als u in stap 4 de optie Afbeelding Boven of Afbeelding Boven terwijl omlaag hebt geselecteerd, hebt u een extra optie.

Klik in het vak Indien omlaag, naar het afbeeldingsbestand op Bladeren om het afbeeldingsbestand te selecteren of typ het

pad van het afbeeldingsbestand.

Het gedrag Tekst van frame instellen toepassen

Het gedrag Tekst van frame instellen biedt u de mogelijkheid om de tekst van een frame dynamisch in te stellen en de

inhoud en opmaak van een frame te vervangen door de inhoud die u opgeeft. De inhoud kan bestaan uit elke geldige

HTML-code. Gebruik dit gedrag om gegevens dynamisch weer te geven.

Hoewel u met het gedrag Tekst van frame instellen de opmaak van een frame kunt vervangen, kunt u Achtergrondkleur

behouden selecteren om de achtergrond- en tekstkleurkenmerken van de pagina te handhaven.

U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten. Als

u een JavaScript-expressie wilt insluiten, plaatst u deze binnen accolades (

{}).Alsueenaccoladewiltweergeven,plaatstu

een backslash voor de accolade (

\{).

Vo or b eel d:

The URL for this page is {window.location}, and today is {new Date()}.

1 Selecteer een object en kies Tekst instellen > Tekst van frame instellen in het menu Acties van het paneel Gedrag.

2 Selecteer in het dialoogvenster Tekst van frame instellen het doelframe in het menu Frame.

3 Klik op de knop Huidige HTML ophalen om de huidige inhoud van de

hoofdsectie te kopiëren.

4 Voer in het vak Nieuwe HTML een bericht in.

5 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Zie ook

“Frames en framesets maken” op pagina 196

DREAMWEAVER CS3

Handboek

344

Het gedrag Tekst van container instellen toepassen

Met het gedrag Tekst van container instellen vervangt u de inhoud en opmaak van een bestaande container (dus elk element

dat tekst of andere elementen kan bevatten) op een pagina door de inhoud die u opgeeft. De inhoud kan bestaan uit elke

geldige HTML-broncode.

U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten. Als

u een JavaScript-expressie wilt insluiten, plaatst u deze binnen accolades (

{}).Alsueenaccoladewiltweergeven,plaatstu

een backslash voor de accolade (

\{).

Vo or b eel d:

The URL for this page is {window.location}, and today is {new Date()}.

1 Selecteer een object en selecteer Tekst instellen > Tekst van container instellen in het menu Acties van het paneel Gedrag.

2 Gebruik in het dialoogvenster Tekst van container instellen het menu Container om het doelelement te selecteren.

3 Voer de nieuwe tekst of HTML in het vak Nieuwe HTML in.

4 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Zie ook

“Een AP-laag invoegen” op pagina 146

Het gedrag Tekst van statusbalk instellen toepassen

Met het gedrag Tekst van statusbalk instellen kunt u een bericht weergeven in de linkerbenedenhoek van het

browservenster. Dit gedrag kunt u bijvoorbeeld gebruiken om een beschrijving van het doel van een koppeling in de

statusbalk weer te geven in plaats van de desbetreffende URL. Bezoekers van een website negeren berichten op de statusbalk

vaak of zien ze over het hoofd (en niet alle browsers bieden volledige ondersteuning voor het instellen van de tekst van de

statusbalk). Als uw boodschap belangrijk is voor bezoekers, kunt u het bericht misschien beter in de vorm van een pop-

upbericht of als tekst van een AP-element weergeven.

Opmerking: Als u het gedrag Tekst van statusbalk instellen in Dreamweaver gebruikt, verandert de tekst van de statusbalk in

de browser niet gegarandeerd omdat sommige browsers speciale aanpassingen nodig hebben wanneer de tekst op de statusbalk

verandert. Voor Firefox moet u bijvoorbeeld een geavanceerde optie instellen opdat JavaScript de tekst op de statusbalk kan

wijzigen. Raadpleeg de documentatie bij uw browser voor nadere informatie.

U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten. Als

u een JavaScript-expressie wilt insluiten, plaatst u deze binnen accolades (

{}).Alsueenaccoladewiltweergeven,plaatstu

een backslash voor de accolade (

\{).

Vo or b eel d:

The URL for this page is {window.location}, and today is {new Date()}.

1 Selecteer een object en kies Tekst instellen > Tekst van statusbalk instellen in het menu Acties van het paneel Gedrag.

2 Typ het bericht in het vak Bericht van het dialoogvenster Tekst van statusbalk instellen.

Houd het bericht beknopt. De browser kapt de tekst van het bericht af als de tekst niet op de statusbalk past.

3 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Tekst van tekstveld instellen toepassen

Met het gedrag Tekst van tekstveld instellen vervangt u de inhoud van een tekstveld van een formulier door de inhoud die

u opgeeft.

U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten. Als

u een JavaScript-expressie wilt insluiten, plaatst u deze binnen accolades (

{}).Alsueenaccoladewiltweergeven,plaatstu

een backslash voor de accolade (

\{).

DREAMWEAVER CS3

Handboek

345

Vo or b eel d:

The URL for this page is {window.location}, and today is {new Date()}.

Een benoemd tekstveld maken

1 Selecteer Invoegen > Formulier > Tekstveld.

Als Dreamweaver u vraagt of u een formuliertag wilt toevoegen, klikt u op Ja.

2 Typ in de eigenschappencontrole een naam voor het tekstveld. Zorg ervoor dat de naam uniek is op de pagina (gebruik

niet dezelfde naam voor meerdere elementen op dezelfde pagina ook al bevinden deze elementen zich in verschillende

formulieren).

Tekst van tekstveld instellen toepassen

1 Selecteer een tekstveld en kies Tekst instellen > Tekst van tekstveld instellen in het menu Acties van het paneel Gedrag.

2 Selecteer het doeltekstveld in het menu Tekstveld en voer de nieuwe tekst in.

3 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Elementen tonen en verbergen toepassen

Met het gedrag Elementen tonen en verbergen kunt u elementen weergeven of verbergen of de standaardzichtbaarheid van

een of meer elementen opnieuw instellen. Dit gedrag is handig voor het weergeven van informatie terwijl er interactie

plaatsvindt tussen de gebruiker de pagina. U kunt bijvoorbeeld terwijl de gebruiker met de muisaanwijzer over de

afbeelding van een plant gaat, een pagina-element weergeven met gedetailleerde informatie over de herkomst en de

bloeiperiodevandeplant,dehoeveelheidzondiedeplantnodiggeeft,hoegrootdeplantkanwordenenzovoort. Methet

gedrag kunt u het desbetreffende element alleen weergeven of verbergen. U verwijdert het element niet werkelijk van de

pagina wanneer u het verbergt.

1 Selecteer een object en selecteer Elementen weergeven/verbergen in het menu Acties van het paneel Gedrag.

Als Elementen weergeven/verbergen niet beschikbaar is, hebt u waarschijnlijk een AP-element geselecteerd. Omdat AP-

elementen geen gebeurtenissen in beide 4.0-browsers accepteren, moet u een ander object selecteren, bijvoorbeeld de

<body>-tag of een koppeling (<a>-tag).

2 Selecteer in de lijst Elementen het element dat u wilt weergeven of verbergen en klik op Weergeven, Verbergen of

Herstellen (waarmee u de standaardzichtbaarheid herstelt).

3 Herhaal stap 2 voor alle resterende elementen waarvan u de zichtbaarheid wilt wijzigen. (U kunt de zichtbaarheid van

meerdere elementen tegelijk wijzigen met één gedrag.)

4 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

Het gedrag Pop-upmenu weergeven toepassen

Opmerking: Dit gedrag is vanaf Dreamweaver 9 verouderd. Als u het toch wilt gebruiken, moet u het menu-item Afgekeurd

in het menu Acties van het paneel Gedrag selecteren.

U kunt het gedrag Pop-upmenu tonen gebruiken om een Dreamweaver-pop-upmenu te maken of te bewerken of om een

Fireworks-pop-upmenu dat u in een Dreamweaver-document hebt ingevoegd, te openen en aan te passen.

Opmerking: Dreamweaver beschikt over deze functie om mensen tegemoet te komen die deze hebben gebruikt in Dreamweaver

8 of lager. Als u nieuwe pop-upmenu's wilt maken en bewerken, kunt u beter het Spry-menubalkobject op de invoegbalk

gebruiken voor code die u makkelijker kunt aanpassen en onderhouden. Zie “Werken met het menubalkobject” op pagina 432

voor meer informatie.

U kunt opties in het dialoogvenster Pop-upmenu tonen instellen om een horizontaal of verticaal pop-upmenu te maken.

U kunt dit dialoogvenster gebruiken om de kleur, tekst en positie van een pop-upmenu in te stellen of te wijzigen.

DREAMWEAVER CS3

Handboek

346

Opmerking: U moet de knop Bewerken in de eigenschappencontrole van Dreamweaver gebruiken om afbeeldingen te bewerken

in een Fireworks-pop-upmenu dat op een afbeelding is gebaseerd. U kunt echter de opdracht Pop-upmenu tonen gebruiken om

de tekst in een pop-upmenu dat op afbeeldingen is gebaseerd, te wijzigen.

1 Selecteer een object en kies Afgekeurd > Pop-upmenu weergeven in het menu Acties van het paneel Gedrag.

2 Gebruik de volgende tabbladen om opties voor het pop-upmenu in te stellen:

Inhoud Hier kunt u de naam, structuur, URL en bestemming van individuele menu-items instellen.

Weergave Hier kunt u het uiterlijk van de menu's met de status Omhoog en Boven instellen en het lettertype van menu-

items opgeven.

Geavanceerd Hier kunt u de eigenschappen van de menucellen instellen. U kunt bijvoorbeeld de breedte, hoogte, kleur en

randbreedte van een menucel instellen, de inspringing van de tekst bepalen en de tijd opgeven die moet verstrijken vanaf

het moment dat de gebruiker de aanwijzer over de trigger beweegt tot aan het moment dat het menu verschijnt.

Positie Hier kunt u de positie van het menu instellen ten opzichte van de afbeelding of de koppeling die als trigger dient.

Zie ook

“Werken met Fireworks” op pagina 351

Items van het pop-upmenu toevoegen, verwijderen of opnieuw rangschikken

U kunt het tabblad Inhoud in het dialoogvenster Pop-upmenu weergeven gebruiken om menu-items te maken. U kunt dit

tabblad ook gebruiken om bestaande items te verwijderen of de volgorde te wijzigen waarin de items in een menu worden

weergegeven.

Items aan een pop-upmenu toevoegen

1 Selecteer op het tabblad Inhoud de standaardtekst (Nieuw item) en voer vervolgens de naam in van het menu-item.

2 Stel desgewenst extra opties in:

• Als met het menu-item een ander bestand moet worden geopend, typt u het bestandspad in het vak Koppeling of klikt

u op het pictogram Map en bladert u naar het document.

• Als u een locatie wilt instellen waarin het document moet worden geopend, bijvoorbeeld in een nieuw venster of een

specifiek frame, selecteert u de locatie in het menu Doel.

Opmerking: Als het frame waarin het document moet worden geopend, zich niet in het menu Doel bevindt, sluit u het

dialoogvenster Pop-upmenu weergeven en selecteert u het frame vervolgens in het documentvenster en geeft u het frame een

naam.

3 Klik op de plusknop (+) als u meer menu-items wilt toevoegen.

Als u klaar bent, klikt u op OK om de standaardinstellingen te accepteren of selecteert u een ander tabblad in het

dialoogvenster Pop-upmenu weergeven om extra opties in te stellen.

Een vervolgmenu-item maken door in te springen

❖

Selecteer het item in de lijst Pop-upmenu weergeven en klik op Item laten inspringen. (Als u de inspringing wilt

verwijderen, klikt u op Item uitspringen.)

Opmerking: U kunt het eerste item in de lijst niet laten inspringen.

De positie van een item in de reeks menu-items wijzigen

❖

Selecteer het item in de lijst Pop-upmenu weergeven en klik vervolgens op de knop pijl-omhoog of pijl-omlaag.

Een item uit het menu verwijderen

❖

Selecteer het item in de lijst Pop-upmenu weergeven en klik op de minknop (-).

DREAMWEAVER CS3

Handboek

347

Een pop-upmenu opmaken

Nadat u de menu-items hebt gemaakt, kunt u het tabblad Weergave van het dialoogvenster Pop-upmenu weergeven

gebruiken om de stand, lettertypekenmerken en knopstatuskenmerken voor het pop-upmenu in te stellen. Kijk in het

voorbeeldvenster hoe de opties het uiterlijk van het menu beïnvloeden terwijl u deze instelt.

1 Als u de stand van het menu wilt instellen, selecteert u Verticaal menu of Horizontaal menu in het pop-upmenu boven

aan het tabblad Weergave.

2 Stel de opties voor tekstopmaak in:

• Selecteer in het menu Lettertype een lettertype voor de menu-items. Selecteer een lettertype dat waarschijnlijk op de

computers van de bezoekers van uw website aanwezig is.

• Stel de tekengrootte, de stijlkenmerken en opties voor het uitlijnen of uitvullen van de tekst in voor de tekst van het

menu-item.

Opmerking: Als het lettertype dat u wilt instellen, niet in de lettertypenlijst voorkomt, gebruikt u de optie Lettertypenlijst

bewerken om dat lettertype toe te voegen.

3 Gebruik in de vakken Status Omhoog en Status Boven de kleurenkiezer om de tekst- en celkleuren van de menu-

itemknoppen in te stellen.

4 Alsuklaarbent,kliktuopOKofselecteertueenandertabbladinhetdialoogvensterPop-upmenuweergevenomextra

opties in te stellen.

Geavanceerde opties voor de weergave

Celbreedte en celhoogte Stel de breedte of hoogte van de menuknoppen in door het gewenste aantal pixels op te geven. De

celbreedte wordt automatisch ingesteld op de breedte van het breedste item. Als u de celbreedte of -hoogte wilt vergroten,

selecteert u Pixels in het pop-upmenu en voert u een waarde in die groter is dan de waarde die in het vak Celbreedte of

Celhoogte wordt weergegeven.

Celopvulling Stel het aantal pixels in dat aanwezig moet zijn tussen de inhoud van de cel en de grenzen van de cel.

Celafstand Stel het aantal pixels in dat aanwezig moet zijn tussen aangrenzende cellen.

Tekst laten inspringen Stel de inspringing van het menu-item binnen de cel in door het gewenste aantal pixels op te geven.

Menuvertraging Stel in hoelang het menu wordt weergegeven nadat de gebruiker de aanwijzer heeft verplaatst van de

activerende afbeelding of koppeling. U kunt waarden opgeven in milliseconden en de standaardinstelling is 1000

milliseconden, wat gelijk is aan 1 seconde. Voor een vertraging van 3 seconden typt u 3000.

Pop-upranden Hiermee bepaalt u of menu-items een rand hebben. Als u een rand wilt weergeven, moet u ervoor zorgen

dat Randen tonen is geselecteerd.

Randbreedte Stel de randbreedte in in pixels.

Schaduw, randkleur en hooglicht Kies een kleur voor deze randopties. Schaduw en hooglicht zijn niet zichtbaar in het

voorbeeldvenster.

Een pop-upmenu in een document plaatsen

Bepaal waar het pop-upmenu moet worden weergegeven door de positie van het menu ten opzichte van de afbeelding of

koppeling die als trigger dient, op te geven. U kunt ook opgeven of het menu moet verdwijnen wanneer de aanwijzer zich

weer van de trigger af beweegt.

1 Klik in het dialoogvenster Pop-upmenu weergeven op het tabblad Positie.

2 Stel de locatie van het pop-upmenu in op een van de volgende manieren:

• Selecteer een van de vooraf ingestelde opties.

• Geef een locatie op door de verticale en horizontale coördinaten in respectievelijk de vakken X en Y te typen. De

oorsprong van de coördinaten bevindt zich in de linkerbovenhoek van het menu.

3 Als u het pop-upmenu wilt verbergen wanneer de aanwijzer zich niet boven de trigger bevindt, selecteert u Menu

verbergen bij gebeurtenis

onMouseOut. Als u dat niet doet, blijft het menu in beeld.

DREAMWEAVER CS3

Handboek

348

4 Klik op OK.

Een pop-upmenu wijzigen

Het gedrag Pop-upmenu weergeven biedt u de mogelijkheid om de inhoud van een pop-upmenu te wijzigen of bij te

werken. U kunt menu-items toevoegen, verwijderen of wijzigen, menu-items opnieuw rangschikken en de positie van het

menu opgeven ten opzichte van de afbeelding of koppeling die de trigger vormt.

Opmerking: Dreamweaver beschikt over deze functie om mensen tegemoet te komen die deze hebben gebruikt in Dreamweaver

8 of lager. Als u nieuwe pop-upmenu's wilt maken en bewerken, kunt u beter het Spry-menubalkobject op de invoegbalk

gebruiken voor code die u makkelijker kunt aanpassen en onderhouden. Zie “Werken met het menubalkobject” op pagina 432

voor meer informatie.

Als u een bestaand op HTML gebaseerd pop-upmenu wilt openen, gaat u als volgt te werk:

1 Selecteer in het Dreamweaver-document de koppeling of afbeelding die de weergave van het pop-upmenu activeert.

2 Selecteer Pop-upmenu weergeven in het menu Acties van het paneel Gedrag.

3 Breng de gewenste wijzigingen aan in het dialoogvenster en klik op OK.

Het gedrag Afbeelding verwisselen toepassen

Met het gedrag Afbeelding verwisselen kunt u de ene afbeelding verwisselen voor een andere door het kenmerk src van de

<img>-tag te wijzigen. Gebruik dit gedrag om knop-rollovers en andere afbeeldingseffecten te creëren (inclusief het

verwisselen van meerdere afbeeldingen tegelijk). Als u een rollover-afbeelding invoegt, wordt automatisch het gedrag

Afbeelding verwisselen aan de pagina toegevoegd.

Opmerking: Omdat dit gedrag alleen invloed heeft op het kenmerk

src, kunt u het beste de oorspronkelijke afbeelding

verwisselen voor een afbeelding met dezelfde afmetingen (hoogte en breedte). Als u dat niet doet, wordt de nieuwe afbeelding

kleiner of groter gemaakt totdat deze binnen de afmetingen van de oorspronkelijke afbeelding past.

Het gedrag Omwisselen van afbeelding herstellen is ook beschikbaar. Hiermee kunt u voor de laatste set ingewisselde

afbeeldingen de vorige bronbestanden herstellen. Dit gedrag wordt telkens automatisch toegevoegd wanneer u het gedrag

Afbeelding verwisselen aan een object koppelt. Als u de hersteloptie geselecteerd laat terwijl u het gedrag Afbeelding

verwisselen koppelt, hoeft u het gedrag Omwisselen van afbeelding herstellen nooit handmatig te selecteren.

1 Selecteer Invoegen > Afbeelding of klik op de knop Afbeelding op de invoegbalk om een afbeelding in te voegen.

2 Typ in de eigenschappencontrole een naam voor de afbeelding in het meest linkse tekstvak.

Het is niet verplicht om afbeeldingen een naam te geven. Afbeeldingen krijgen automatisch een naam toegewezen wanneer

u het gedrag aan een object koppelt. Het is echter gemakkelijker om afbeeldingen van elkaar te onderscheiden in het

dialoogvenster Afbeelding verwisselen als u alle afbeeldingen vooraf een naam geeft.

3 Herhaal de stappen 1 en 2 om extra afbeeldingen in te voegen.

4 Selecteer een object (gewoonlijk de afbeelding die u gaat verwisselen) en kies Afbeelding verwisselen in het menu Acties

van het paneel Gedrag.

5 Selecteer in de lijst Afbeeldingen de afbeelding waarvan u de bron wilt wijzigen.

6 Klik op Bladeren om het nieuwe afbeeldingsbestand te selecteren of voer in het vak 'Bron instellen op' het pad en de

bestandsnaam van de nieuwe afbeelding in.

7 Herhaal de stappen 5 en 6 voor eventuele extra afbeeldingen die u wilt wijzigen. Gebruik dezelfde actie Afbeelding

verwisselen voor alle afbeeldingen die u in één keer wilt wijzigen, anders worden met de corresponderende actie

Omwisselen van afbeeldingen herstellen niet alle oorspronkelijke afbeeldingen hersteld.

8 Selecteer de optie Afbeeldingen vooraf laden om de nieuwe afbeeldingen alvast in het cachegeheugen te laden wanneer

de pagina wordt geladen.

Hiermee voorkomt u downloadvertragingen op het moment dat de nieuwe afbeeldingen moeten verschijnen.

9 Klik op OK en controleer of de standaardgebeurtenis juist is. Als dat niet het geval is, selecteert u een andere gebeurtenis

of wijzigt u de doelbrowser in het vervolgmenu Gebeurtenissen weergeven voor.

DREAMWEAVER CS3

Handboek

349

Het gedrag Formulier valideren toepassen

Met het gedrag Formulier valideren kunt u de inhoud van opgegeven tekstvelden controleren om na te gaan of de gebruiker

het juiste type gegevens heeft ingevoerd. Koppel dit gedrag aan afzonderlijke tekstvelden met de gebeurtenis

onBlur om de

velden te valideren terwijl de gebruiker het formulier invult of koppel het gedrag aan het formulier met de gebeurtenis

onSubmit om verschillende tekstvelden tegelijk te evalueren wanneer de gebruiker op de knop Verzenden klikt. Door dit

gedrag aan een formulier te koppelen, kunt u voorkomen dat er formulieren met ongeldige gegevens worden ingezonden.

1 Selecteer Invoegen > Formulier of klik op de knop Formulier op de invoegbalk om een formulier in te voegen.

2 Selecteer Invoegen > Formulier > Tekstveld of klik op de knop Tekstveld op de invoegbalk om een tekstveld in te voegen.

Herhaal deze stap om extra tekstvelden in te voegen.

3 Kies een validatiemethode:

• Als u afzonderlijke velden wilt valideren terwijl de gebruiker het formulier invult, selecteert u een tekstveld en selecteert

u Venster > Gedrag.

• Als u meerdere velden tegelijk wilt valideren wanneer de gebruiker het formulier verzendt, klikt u op de <form>-tag in

de tagkiezer in de linkerbenedenhoek van het documentvenster en kiest u Venster > Gedrag.

4 Selecteer Formulier valideren in het menu Acties.

5 Voer een van de volgende handelingen uit:

• Als u afzonderlijke velden wilt valideren, selecteert u hetzelfde veld dat u in de lijst Velden in het documentvenster hebt

geselecteerd.

• Als u meerdere velden ineens wilt valideren, selecteert u een tekstveld in de lijst Velden.

6 Selecteer de optie Vereist als er gegevens in het veld moeten worden ingevuld.

7 Selecteer een van de volgende opties voor Accepteren:

Iets Hiermee controleert u of een verplicht veld gegevens bevat. Dit kunnen gegevens zijn van elk willekeurig type.

E-mailadres Hiermee controleert u of het veld het symbool @ bevat.

Getal Hiermee controleert u of het veld uitsluitend cijfers bevat.

Getal vanaf Hiermee controleert u of het veld een getal bevat dat binnen een specifiek bereik valt.

8 Als u ervoor hebt gekozen om meerdere velden te valideren, herhaalt stap 6 en 7 voor alle velden die u wilt valideren.

9 Klik op OK.

Als u meerdere velden valideert wanneer de gebruiker het formulier indient, wordt de gebeurtenis

onSubmit automatisch

in het menu Gebeurtenissen weergegeven.

10 Als u afzonderlijke velden valideert, moet u controleren of de standaardgebeurtenis

onBlur of onChange is.Alsdatniet

het geval is, moet u een van deze gebeurtenissen selecteren.

Beide gebeurtenissen activeren het gedrag Formulier valideren wanneer de gebruiker zich met de aanwijzer van het veld af

beweegt. Het verschil is dat

onBlur altijd plaatsvindt, ongeacht of de gebruiker iets in het veld heeft getypt, en dat onChange

alleen plaatsvindt als de gebruiker de inhoud van het veld heeft gewijzigd. De gebeurtenis onBlur heeft de voorkeur als het

veld een verplicht veld is.

350

Hoofdstuk 13: Werken met andere

toepassingen

Adobe® Dreamweaver® CS3 kan met veel Adobe-toepassingen worden geïntegreerd, zoals Flash, Fireworks, Adobe®

Photoshop® en Adobe® Bridge. U kunt andere Adobe-toepassingen, zoals Adobe® Device Central, rechtstreeks vanuit de

Dreamweaver-werkruimte gebruiken.

Integratie tussen diverse toepassingen

Over de integratie met Photoshop, Flash en Fireworks

Photoshop, Fireworks en Flash zijn krachtige webontwikkelingsprogramma's voor het maken en beheren van afbeeldingen

en SWF-bestanden. U kunt Dreamweaver uitstekend met deze programma's integreren om het ontwikkelen van websites

te vereenvoudigen.

Opmerking: Er is eveneens een beperkte integratie met enkele andere toepassingen. U kunt bijvoorbeeld een InDesign-bestand

als XHTML exporteren en er in Dreamweaver verder aan werken. Zie www.adobe.com/go/vid0202_nl voor een zelfstudie over

deze workflow.

U kunt heel eenvoudig afbeeldingen en Flash-inhoud (SWF-bestanden) in een Dreamweaver-document invoegen. U kunt

een afbeelding of Flash-bestand ook bewerken in de oorspronkelijke editor nadat u de afbeelding of het bestand in een

Dreamweaver-document hebt ingevoegd.

Opmerking: Als u Dreamweaver samen met deze Adobe-toepassingen wilt gebruiken, moeten deze toepassingen op uw

computer zijn geïnstalleerd.

Productintegratie wordt in het geval van Fireworks en Flash en Ontwerpnotities verkregen met behulp van roundtrip

editing. Roundtrip editing zorgt ervoor dat code-updates op de juiste wijze worden overgebracht van Dreamweaver naar

deze andere toepassingen en andersom (zodat bijvoorbeeld rollover-gedrag of koppelingen naar andere bestanden

behouden blijven).

Ontwerpnotities zijn kleine bestanden die Dreamweaver in staat stellen het brondocument op te sporen voor een

geëxporteerde afbeelding of geëxporteerd Flash-bestand. Wanneer u bestanden van Fireworks, Flash of Photoshop

rechtstreeks naar een Dreamweaver-site exporteert, worden er automatisch ontwerpnotities met verwijzingen naar de PSD-

, PNG- of FLA-bestanden naar de site geëxporteerd, samen met het bestand dat klaar is om op de website geplaatst te

worden (GIF, JPEG of SWF).

Naast informatie over de locatie bevatten ontwerpnotities andere relevante gegevens over geëxporteerde bestanden.

Wanneer u bijvoorbeeld een tabel van Fireworks exporteert, wordt er door Fireworks een ontwerpnotitie geschreven voor

elk geëxporteerd afbeeldingsbestand in de tabel. Als het geëxporteerde bestand hotspots of rollovers bevat, bevatten de

ontwerpnotities informatie over de scripts daarvoor.

Dreamweaver maakt als onderdeel van de exportbewerking een map met de naam _notes in dezelfde map. Deze map bevat

de ontwerpnotities die Dreamweaver nodig heeft om de integratie met Photoshop tot stand te brengen.

Opmerking: Als u ontwerpnotities wilt gebruiken, mogen deze niet zijn uitgeschakeld voor uw Dreamweaver-site. Ze zijn

standaard ingeschakeld. Maar zelfs als ze uitgeschakeld zijn en u een Photoshop-afbeeldingsbestand invoegt, maakt

Dreamweaver toch een ontwerpnotitie waarin de locatie van het bron-PSD-bestand wordt opgeslagen.

Zie www.adobe.com/go/vid0188_nl voor een zelfstudie over de integratie van Dreamweaver en Fireworks.

Zie www.adobe.com/go/vid0200_nl voor een zelfstudie over de integratie van Dreamweaver en Photoshop.

DREAMWEAVER CS3

Handboek

351

Zie ook

“Over ontwerpnotities” op pagina 98

“Ontwerpnotities inschakelen en uitschakelen voor een site.” op pagina 99

Werken met Fireworks

Een Fireworks-afbeelding invoegen

Veel procedures voor het bewerken van bestanden, zoals het aanbrengen van wijzigingen in koppelingen, afbeeldingen met

hyperlinks en tabelsegmenten, kunnen in Dreamweaver en Fireworks op dezelfde manier worden uitgevoerd en worden

ook door beide toepassingen herkend. Samen bieden de twee toepassingen een gestroomlijnde workflow voor het plaatsen

van grafische webbestanden in HTML-pagina's en het het bewerken en optimaliseren van deze bestanden.

U kunt een afbeelding die vanuit Fireworks is geëxporteerd, rechtstreeks in een Dreamweaver-document plaatsen met de

opdracht Afbeelding invoegen. U kunt ook een nieuwe Fireworks-afbeelding maken vanuit een tijdelijke aanduiding voor

een afbeelding van Dreamweaver.

1 Plaats in het Dreamweaver-document de invoegpositie op de locatie waar u de afbeelding wilt weergeven en voer

vervolgens een van de volgende handelingen uit:

• Selecteer Invoegen > Afbeelding.

• Klik in de categorie Algemeen van de invoegbalk op de knop Afbeelding of sleep de afbeelding naar het document.

2 Ga naar het gewenste geëxporteerde Fireworks-bestand en klik op OK (Windows) of Open (Macintosh).

Opmerking: Als het Fireworks-bestand zich niet op de huidige Dreamweaver-site bevindt, wordt er een bericht weergegeven

waarin u wordt gevraagd of u het bestand naar de hoofdmap wilt kopiëren. Klik op Ja.

Zie ook

“Over de integratie met Photoshop, Flash en Fireworks” op pagina 350

Een Fireworks-afbeelding of -tabel bewerken in Dreamweaver

Wanneer u een afbeelding of een afbeeldingssegment uit een Fireworks-tabel opent en bewerkt, wordt Fireworks door

Dreamweaver gestart en wordt het PNG-bestand geopend waaruit de afbeelding of tabel is geëxporteerd.

Opmerking: Hierbij wordt ervan uitgegaan dat Fireworks is ingesteld als de primaire externe afbeeldingseditor voor PNG-

bestanden. Fireworks wordt vaak ook ingesteld als de standaardeditor voor JPEG- en GIF-bestanden, maar voor deze

bestandstypen gebruikt u mogelijk liever Photoshop als standaardeditor.

Als de afbeelding een onderdeel is van een Fireworks-tabel, kunt u de hele Fireworks-tabel openen voor bewerkingen,

zolang de opmerking

in de HTML-code aanwezig is. Als het PNG-bronbestand vanuit Fireworks is

geëxporteerd naar een Dreamweaver-site met de Dreamweaver-instelling Style HTML And Images, wordt de Fireworks-

tabelopmerking automatisch in de HTML-code ingevoegd.

1 Open in Dreamweaver de eigenschappencontrole (Venster > Eigenschappen), als dat nog niet geopend is.

2 Klik op de afbeelding of het afbeeldingssegment om de afbeelding of het segment te selecteren.

Wanneer u een afbeelding selecteert die vanuit Fireworks is geëxporteerd, wordt deze door Dreamweaver als een Fireworks-

afbeelding of -tabel herkend en wordt de naam van het PNG-bronbestand weergegeven.

3 Ga op een van de volgende manieren te werk om Fireworks te starten voor het bewerken:

• Klik in de eigenschappencontrole op Bewerken.

• Houd Control (Windows) of Command (Macintosh) ingedrukt en dubbelklik op de geselecteerde afbeelding.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op de geselecteerde

afbeelding en selecteer Bewerken met Fireworks in het snelmenu.

DREAMWEAVER CS3

Handboek

352

Opmerking: Als Fireworks het bronbestand niet kan vinden, wordt u gevraagd het PNG-bronbestand te zoeken. Wanneer u

met het bronbestand van Fireworks werkt, worden wijzigingen zowel in het bronbestand als in het geëxporteerde bestand

opgeslagen. Wanneer u met het geëxporteerde bestand werkt, wordt alleen dat bestand bijgewerkt.

4 Bewerk het PNG-bronbestand in Fireworks en klik op Done.

Fireworks slaat de wijzigingen op in het PNG-bestand en exporteert de bijgewerkte afbeelding (of HTML en afbeeldingen)

waarna u weer terugkeert naar Dreamweaver. De bijgewerkte afbeelding of tabel wordt in Dreamweaver weergegeven.

Zie www.adobe.com/go/vid0188_nl voor een zelfstudie over de integratie van Dreamweaver en Fireworks.

Zie ook

“Een externe afbeeldingseditor gebruiken” op pagina 243

Een Fireworks-afbeelding optimaliseren vanuit Dreamweaver

U kunt met Dreamweaver snel wijzigingen aanbrengen in Fireworks-afbeeldingen en -animaties. Vanuit Fireworks kunt u

instellingen voor optimalisatie en animaties wijzigen en de grootte en oppervlakte van de geëxporteerde afbeelding

wijzigen.

1 Selecteer in Dreamweaver de gewenste afbeelding en selecteer Opdracht > Beeld optimaliseren.

2 Breng de gewenste wijzigingen aan in het dialoogvenster Voorvertoning van afbeelding:

• Klik op het tabblad Opties als u de instellingen voor optimalisatie wilt bewerken.

• Klik op het tabblad Bestand als u de grootte en oppervlakte van de geëxporteerde afbeelding wilt bewerken.

3 Klik op OK als u klaar bent.

Zie ook

“Optimaliseringsinstellingen voor afbeeldingen kiezen” op pagina 361

Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen

U kunt in een Dreamweaver-document een tijdelijke aanduiding voor een afbeelding maken en vervolgens Fireworks

starten om een Fireworks-afbeelding of tabel te ontwerpen die de tijdelijke aanduiding vervangt.

Als u een nieuwe afbeelding wilt maken vanuit een tijdelijke aanduiding voor afbeelding, moeten zowel Dreamweaver als

Fireworks op uw computer zijn geïnstalleerd.

1 Controleer of u Fireworks al hebt ingesteld als de afbeeldingseditor voor PNG-bestanden.

2 Klik in het documentvenster op de tijdelijke aanduiding voor de afbeelding om deze te selecteren.

3 Start Fireworks in de modus voor het bewerken van afbeeldingen vanuit Dreamweaver. Voer hiertoe een van de volgende

handelingen uit:

• Klik in de eigenschappencontrole op Maken.

• Houd Control (Windows) of Command (Macintosh) ingedrukt en dubbelklik op de tijdelijke aanduiding voor de

afbeelding.

• Klik met de rechtermuisknop (Windows) of klik terwijl Control is ingedrukt (Macintosh) op de tijdelijke aanduiding

voor de afbeelding en selecteer Afbeelding maken in Fireworks.

4 Gebruik de opties in Fireworks om de afbeelding te ontwerpen.

Fireworks herkent de volgende instellingen voor tijdelijke afbeeldingen die u kunt hebben ingesteld bij het werken met de

tijdelijke afbeelding in Dreamweaver: afbeeldingsgrootte (die overeenkomt met de canvasgrootte in Fireworks),

afbeeldings-id (die door Fireworks wordt gebruikt als standaarddocumentnaam voor het door u gemaakte bronbestand en

exportbestand) en tekstuitlijning. Fireworks herkent ook koppelingen en bepaalde gedragingen (zoals het wisselen van

afbeeldingen, het weergeven van een pop-upmenu of navigatiebalk en het instellen van tekst) die u aan de tijdelijke

aanduiding voor de afbeelding hebt gekoppeld terwijl u in Dreamweaver werkte.

DREAMWEAVER CS3

Handboek

353

Opmerking: Hoewel in Fireworks de koppelingen die u aan een tijdelijke aanduiding voor een afbeelding hebt toegevoegd, niet

worden weergegeven, blijven deze koppelingen wel behouden. Als u in Fireworks een hotspot tekent en een koppeling toevoegt,

wordt in Dreamweaver de koppeling die u aan de tijdelijke aanduiding voor een afbeelding hebt toegevoegd, niet verwijderd.

Als u echter in Fireworks een segment uit de nieuwe afbeelding snijdt, wordt de koppeling in het Dreamweaver-document

verwijderd wanneer u de tijdelijke aanduiding vervangt.

Fireworks herkent de volgende instellingen voor tijdelijke afbeeldingen niet: uitlijning van de afbeelding, kleur, V-ruimte

en H-ruimte en toewijzingen. Deze instellingen zijn uitgeschakeld in de eigenschappencontrole van de tijdelijke

aanduiding.

5 Wanneer u klaar bent, klikt u op Done om het venster weer te geven waarin u de afbeelding kunt opslaan.

6 Selecteer in het tekstvak Save in, de map die u als lokale Dreamweaver-sitemap hebt gedefinieerd.

Als u de tijdelijke aanduiding voor een afbeelding een naam hebt gegeven toen u deze in het Dreamweaver-document

invoegde, vult Fireworks in het vak File Name die naam in. U kunt die naam wijzigen.

7 Klik op Save om het PNG-bestand op te slaan.

Het dialoogvenster Export verschijnt. Gebruik dit dialoogvenster om de afbeelding als een GIF- of JPEG-bestand op te

slaan of, in het geval van gesegmenteerde afbeeldingen, als HTML en afbeeldingen.

8 Selecteer in het vak Save In de lokale Dreamweaver-sitemap.

In het vak Name wordt automatisch de naam weergegeven die u voor het PNG-bestand hebt gebruikt. U kunt die naam

wijzigen.

9 Selecteer in het vak Save As Type het type van het bestand of de bestanden die u wilt exporteren, bijvoorbeeld Images

Only of HTML And Images.

10 Klik op Save om het geëxporteerde bestand op te slaan.

Het bestand wordt opgeslagen en u keert terug naar Dreamweaver. In het Dreamweaver-document wordt de tijdelijke

aanduiding voor een afbeelding vervangen door het geëxporteerde bestand of de Fireworks-tabel.

Zie ook

“Een externe afbeeldingseditor gebruiken” op pagina 243

“Een afbeelding invoegen” op pagina 234

Over pop-upmenu's van Fireworks

In Fireworks kunt u snel en eenvoudig op CSS gebaseerde pop-upmenu's maken.

De pop-upmenu's die u in Fireworks maakt, kunnen niet alleen gemakkelijk worden uitgebreid en snel worden

gedownload, maar bieden ook de volgende voordelen:

• De menu-items kunnen worden geïndexeerd door zoekmachines.

• De menu-items kunnen door schermlezers worden gelezen, zodat uw pagina's toegankelijker zijn voor bijvoorbeeld

slechtzienden.

• De code die door Fireworks wordt gegenereerd, voldoet aan de normen en kan worden gevalideerd.

U kunt pop-upmenu's van Fireworks bewerken in Dreamweaver of in Fireworks, maar niet in beide. Wijzigingen die u in

Dreamweaver aanbrengt, blijven niet behouden in Fireworks.

Zie ook

“Pop-upmenu's van Fireworks bewerken in Dreamweaver” op pagina 354

DREAMWEAVER CS3

Handboek

354

Pop-upmenu's van Fireworks bewerken in Dreamweaver

U kunt een pop-upmenu maken in Fireworks 8 of hoger en het menu vervolgens bewerken met Dreamweaver of met

Fireworks (met behulp van roundtrip editing), maar niet met beide. Als u uw menu's in Dreamweaver bewerkt en ze

vervolgens in Fireworks bewerkt, gaan alle voorgaande wijzigingen verloren, behalve de tekst.

Als u de menu's liever in Dreamweaver bewerkt, kunt u Fireworks gebruiken om het pop-upmenu te maken en vervolgens

uitsluitend Dreamweaver gebruiken om het menu te bewerken en aan te passen.

Als u de menu's liever in Fireworks bewerkt, kunt u de 'roundtrip editing'-functie in Dreamweaver gebruiken. U moet de

menu's echter niet rechtstreeks in Dreamweaver bewerken.

1 Selecteer in Dreamweaver de Fireworks-tabel met het popup-menu en klik op Bewerken in de eigenschappencontrole.

Het PNG-bronbestand wordt in Fireworks geopend.

2 Bewerk het menu in Fireworks met de pop-upmenu-editor en klik op Done op de Fireworks-werkbalk.

Fireworks stuurt het bewerkte pop-upmenu terug naar Dreamweaver.

Als u een pop-upmenu in Fireworks MX 2004 of eerder hebt gemaakt, kunt u dit menu in Dreamweaver bewerken met

behulp van het dialoogvenster Pop-upmenu weergeven, dat u kunt openen via het paneel Gedrag.

Zie ook

“Over pop-upmenu's van Fireworks” op pagina 353

Een pop-upmenu bewerken dat is gemaakt in Fireworks MX 2004 of eerder

1 Selecteer in Dreamweaver de hotspot of afbeelding waarmee het pop-upmenu wordt geactiveerd.

2 Dubbelklik in het paneel Gedrag (Shift+F3) op Pop-upmenu weergeven in de lijst Acties.

3 Breng de gewenste wijzigingen aan in het dialoogvenster Pop-upmenu en klik op OK.

Zie ook

“Het gedrag Pop-upmenu weergeven toepassen” op pagina 345

Voorkeuren voor het openen en bewerken van Fireworks-bronbestanden opgeven

Wanneer u Fireworks gebruikt om afbeeldingen te bewerken, worden de afbeeldingen op uw webpagina's gewoonlijk door

Fireworks geëxporteerd vanuit een PNG-bronbestand. Wanneer u een afbeeldingsbestand in Dreamweaver opent om het

te bewerken, wordt door Fireworks automatisch het PNG-bronbestand geopend. Als Fireworks het PNG-bronbestand niet

kan vinden, wordt u gevraagd dit bestand te zoeken. U kunt desgewenst de voorkeuren in Fireworks zo instellen dat de

ingevoegde afbeelding door Dreamweaver wordt geopend. U kunt ook in Fireworks opgeven dat u steeds de mogelijkheid

wilt hebben om te kiezen tussen het ingevoegde afbeeldingsbestand en het Fireworks-bronbestand wanneer u een

afbeelding in Dreamweaver opent.

Opmerking: Dreamweaver herkent slechts in bepaalde gevallen de Fireworks-voorkeuren voor het openen en bewerken van

bestanden. Dreamweaver herkent deze voorkeuren alleen als u een afbeelding opent en optimaliseert die geen deel uitmaakt

van een Fireworks-tabel en een juist ontwerpnotitiepad naar een PNG-bronbestand bevat.

1 Selecteer in Fireworks de optie Edit > Preferences (Windows) of Fireworks > Preferences (Macintosh) en klik op het

tabblad Launch And Edit (Windows) of selecteer Launch And Edit in het pop-upmenu (Macintosh).

2 Geef de voorkeursopties op die moeten worden gebruikt wanneer u Fireworks-afbeeldingen bewerkt of optimaliseert die

in een externe toepassing zijn geplaatst:

Altijd PNG bronbestand gebruiken Hiermee wordt automatisch het PNG-bestand van Fireworks geopend dat in de

ontwerpnotitie is gedefinieerd als bron van de geplaatste afbeelding. Het PNG-bronbestand en de corresponderende,

geplaatste afbeelding worden bijgewerkt.

Nooit PNG bronbestand gebruiken Hiermee wordt de geplaatste afbeelding van Fireworks automatisch geopend, ongeacht

of er een PNG-bronbestand bestaat of niet. Alleen de geplaatste afbeelding wordt bijgewerkt.

DREAMWEAVER CS3

Handboek

355

Vragen bij het opstarten Alsdezeoptiewordtgeselecteerd,wordtereenberichtweergegevenwaarinuwordtgevraagdof

u het PNG-bronbestand wilt openen. U kunt vanuit dit bericht ook algemene voorkeuren voor het openen en bewerken van

bestanden opgeven.

HTML-code van Fireworks in een Dreamweaver-document invoegen

Vanuit Fireworks kunt u de opdracht Export gebruiken om geoptimaliseerde afbeeldingen en HTML-bestanden naar een

locatie binnen een Dreamweaver-sitemap te exporteren en op te slaan. U kunt het bestand vervolgens in Dreamweaver

invoegen. Met Dreamweaver kunt u HTML-code die door Fireworks is gegenereerd, compleet met gekoppelde

afbeeldingen, segmenten en JavaScript, invoegen in een document.

1 Plaats de invoegpositie in het Dreamweaver op de locatie waar u de HTML-code van Fireworks wilt invoegen.

2 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Afbeeldingsobjecten > Fireworks-HTML.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Afbeeldingen en kies Fireworks-HTML invoegen uit

het pop-upmenu.

3 Klik op Bladeren om een Fireworks-HTML-bestand te selecteren.

4 Als u het bestand verder niet meer nodig hebt, selecteert u de optie Bestand verwijderen na invoegen. Als u deze optie

selecteert, heeft dat geen effect op het PNG-bronbestand dat aan het HTML-bestand is gekoppeld.

Opmerking: Als het HTML-bestand zich op een netwerkstation bevindt, wordt het bestand permanent verwijderd en niet naar

de prullenbak of prullenmand verplaatst.

5 Klik op OK om de HTML-code, samen met de gekoppelde afbeeldingen, segmenten en JavaScript, in te voegen in het

Dreamweaver-document.

Fireworks-HTML-code in Dreamweaver plakken

U kunt in Fireworks gemaakte afbeeldingen en tabellen ook op een snelle manier in Dreamweaver plaatsen door HTML-

code van Fireworks rechtstreeks in een Dreamweaver-document te plakken.

Fireworks-HTML-code kopiëren en in Dreamweaver plakken

1 Selecteer in Fireworks Edit > Copy HTML Code.

2 Volg de instructies van de wizard die u begeleidt bij het instellen van de opties voor het exporteren van uw HTML en

afbeeldingen. Wanneer u daarom wordt gevraagd, geeft u de Dreamweaver-sitemap op als bestemming voor de

geëxporteerde afbeeldingen.

De afbeeldingen worden door de wizard naar de opgegeven bestemming geëxporteerd en de HTML-code wordt naar het

Klembord gekopieerd.

3 Plaats de invoegpositie in het Dreamweaver op de locatie waar u de HTML-code van Fireworks wilt plakken.

Alle HTML- en JavaScript-code die is gekoppeld aan Fireworks-bestanden die u hebt geëxporteerd, wordt naar het

Dreamweaver-document gekopieerd en alle koppelingen naar afbeeldingen worden bijgewerkt.

Fireworks-HTML-code exporteren en in Dreamweaver plakken

1 Selecteer in Fireworks File > Export.

2 Geef de Dreamweaver-sitemap op als bestemming voor de geëxporteerde afbeeldingen.

3 Selecteer in het pop-upmenu Exporteren de optie HTML And Images.

4 Selecteer in het pop-upmenu HTML de optie Copy To Clipboard en klik op Export.

5 Plaats de invoegpositie in het Dreamweaver-document op de locatie waar u de geëxporteerde HTML-code van

Fireworks wilt plakken en selecteer Bewerken > Fireworks-HTML plakken.

Alle HTML- en JavaScript-code die is gekoppeld aan Fireworks-bestanden die u hebt geëxporteerd, wordt naar het

Dreamweaver-document gekopieerd en alle koppelingen naar afbeeldingen worden bijgewerkt.

DREAMWEAVER CS3

Handboek

356

Fireworks-HTML-code bijwerken die in Dreamweaver is geplaatst

In Fireworks biedt de opdracht File > Update HTML een alternatief voor de techniek van starten en bewerken die wordt

gebruikt om Fireworks-bestanden die in Dreamweaver zijn geplaatst, te bewerken. Met de opdracht Update HTML kunt u

een PNG-bronafbeelding in Fireworks bewerken en vervolgens alle geëxporteerde HTML-code en afbeeldingsbestanden

die in een Dreamweaver-document zijn geplaatst, automatisch bijwerken. Met deze opdracht kunt u zelfs Dreamweaver-

bestanden bijwerken, wanneer Dreamweaver niet wordt uitgevoerd.

1 Open het PNG-bronbestand in Fireworks en breng uw wijzigingen aan.

2 Selecteer File > Save.

3 Selecteer in Fireworks File > Update HTML.

4 Ga naar het Dreamweaver-bestand met de HTML-code die u wilt bijwerken en klik op Open.

5 Ga naar de doelmap waarin u de bijgewerkte afbeeldingsbestanden wilt plaatsen en klik op Select (Windows) of Choose

(Macintosh).

De HTML- en JavaScript-code in het Dreamweaver-document wordt door Fireworks bijgewerkt. Fireworks exporteert ook

bijgewerkte afbeeldingen die aan de HTML-code zijn gekoppeld en plaatst de afbeeldingen in de opgegeven doelmap.

Als Fireworks geen overeenkomende HTML-code kan vinden die moet worden bijgewerkt, krijgt u de gelegenheid nieuwe

HTML-code in het Dreamweaver-document in te voegen. Fireworks plaatst de JavaScript-sectie van de nieuwe code aan

het begin van het document en plaatst de HTML-tabel of de koppeling naar de afbeelding aan het einde.

Een webfotoalbum maken

U kunt automatisch een website genereren waarop een fotoalbum wordt weergegeven van afbeeldingen uit een bepaalde

map. Dreamweaver gebruikt Fireworks om een miniatuurafbeelding en een grotere afbeelding voor elke afbeelding in de

map te maken. Dreamweaver maakt vervolgens een webpagina met alle miniaturen en koppelingen naar de grotere

afbeeldingen. Als u een webfotoalbum wilt maken, moeten zowel Dreamweaver als Fireworks 4 of hoger op uw computer

zijn geïnstalleerd.

Plaats, voordat u begint, alle afbeeldingen voor het fotoalbum in één map. (De map hoeft zich niet op een site te bevinden.)

Controleer ook of de bestandsnamen van de afbeeldingen een van de volgende extensies hebben: .gif, .jpg, .jpeg, .png, .psd,

.tif of .tiff. Afbeeldingen met extensies die niet worden herkend, worden niet in het fotoalbum weergegeven.

1 Selecteer in Dreamweaver Opdrachten > Webfotoalbum maken.

2 Voer in het tekstvak Titel van fotoalbum een titel in. De titel wordt in een grijze rechthoek boven aan de pagina met

miniaturen weergegeven.

Vul de tekstvakken Subkopgegevens en Overige informatie in om maximaal twee regels extra tekst onder de titel in te

voeren.

3 Selecteer de map met de bronafbeeldingen door op de knop Bladeren naast het tekstvak Map met bronafbeeldingen te

klikken. Selecteer (of maak) vervolgens een doelmap waarin alle geëxporteerde afbeeldingen en HTML-bestanden moeten

worden geplaatst door op de knop Bladeren naast het tekstvak Doelmap te klikken.

De doelmap mag nog geen fotoalbum bevatten. Als dat wel het geval is en nieuwe afbeeldingen hebben dezelfde naam als

afbeeldingen die eerder zijn gebruikt, worden bestaande miniaturen en afbeeldingsbestanden overschreven.

4 Geef de weergaveopties voor de miniaturen op:

• Selecteer in het menu Miniatuurgrootte een grootte voor de miniaturen. Afbeeldingen worden proportioneel geschaald,

zodat de miniaturen in een vierkant van de opgegeven pixelafmetingen passen.

• Selecteer Bestandsnamen tonen om de bestandsnaam van elke oorspronkelijke afbeelding onder de bijbehorende

miniatuur weer te geven.

• Voer het aantal kolommen in voor de tabel waarin de miniaturen worden weergegeven.

5 Selecteer in het menu Miniatuurformaat een van de GIF-indelingen (128 of 256 kleuren) of een van de JPEG-indelingen

(betere afbeeldingskwaliteit of kleiner formaat).

6 Selecteer in het menu Fotoformaat een GIF- of JPEG-indeling voor de grote afbeeldingen. Dit hoeft niet dezelfde

indeling te zijn als de indeling die u voor de miniaturen hebt opgegeven.

DREAMWEAVER CS3

Handboek

357

Opmerking: U kunt uw oorspronkelijke afbeeldingsbestanden niet gebruiken als grote afbeeldingen, want oorspronkelijke

afbeeldingen die een andere indeling dan GIF of JPEG hebben, worden mogelijk niet in alle browsers goed weergegeven. Als uw

oorspronkelijke bestanden de JPEG-indeling hebben, hebben de grote afbeeldingen mogelijk een grotere bestandsgrootte of zijn

ze minder van kwaliteit dan de oorspronkelijke afbeeldingen.

7 Selecteer een schaalpercentage voor de grote afbeeldingen.

Als u Schaal instelt op 100%, worden er grote afbeeldingen weergegeven die even groot zijn als de oorspronkelijke

afbeeldingen. Het schaalpercentage wordt toegepast op alle afbeeldingen. Als uw oorspronkelijke afbeeldingen niet allemaal

dezelfde grootte hebben en u gebruikt voor die afbeeldingen hetzelfde schaalpercentage, krijgt u mogelijk niet de gewenste

resultaten.

8 Selecteer Navigatiepagina maken voor elke foto om voor elke bronafbeelding een afzonderlijke webpagina te maken met

de navigatiekoppelingen Vorige, Home en Volgende.

Als u deze optie selecteert, worden de miniaturen aan de navigatiepagina's gekoppeld. Als u deze optie niet selecteert,

worden de miniaturen rechtstreeks aan de grote afbeeldingen gekoppeld.

9 Klik op OK om de HTML- en afbeeldingsbestanden te maken voor het webfotoalbum.

Fireworks wordt gestart (als het programma nog niet is gestart) en de miniaturen en grote afbeeldingen worden gemaakt.

Dit kan enkele minuten duren als u veel afbeeldingsbestanden hebt. Wanneer de bestanden zijn verwerkt, wordt

Dreamweaver weer geactiveerd en wordt de pagina met de miniaturen gemaakt.

10 Klik op OK wanneer het bericht Album gemaakt wordt weergegeven.

U moet mogelijk een paar seconden wachten voordat uw fotoalbum wordt weergegeven. De bestandsnamen van de

miniaturen worden in alfabetische volgorde weergegeven.

Opmerking: AlsuopAnnulerenkliktterwijlDreamweaverhetalbummaakt,wordthetprocesnietgestopt.AlsuopAnnuleren

klikt, voorkomt u alleen dat Dreamweaver het hoofdfotoalbum weergeeft.

Werken met Photoshop

Over de integratie met Photoshop

U kunt Photoshop-afbeeldingsbestanden (PSD-indeling) invoegen in webpagina's in Dreamweaver en ze met

Dreamweaver optimaliseren als afbeeldingen voor internet (GIF-, JPEG- en PNG-indeling). U kunt ook een Photoshop-

afbeelding met meerdere lagen of meerdere segmenten geheel of gedeeltelijk in een webpagina plakken in Dreamweaver.

Opmerking: Als u deze integratiefunctie vaak gebruikt, is het misschien gemakkelijker om uw Photoshop-afbeeldingen op te

slaan op uw website, zodat u er gemakkelijker toegang toe hebt. Als u dat doet, moet u ze camoufleren om onnodige

verwerkingen tussen de lokale site en de externe server te voorkomen.

Zie www.adobe.com/go/vid0200_nl voor een zelfstudie over het werken met Dreamweaver en Photoshop.

Zie ook

“Specifieke bestandstypen camoufleren of de camouflage ervan opheffen” op pagina 97

Werken met Photoshop en Dreamweaver

Als u Photoshop gebruikt om afbeeldingen te maken, kunt u Dreamweaver gebruiken om uw afbeeldingen te optimaliseren

voor het web en ze invoegen in webpagina's. U kunt ook segmenten of lagen selecteren in een Photoshop-afbeelding en

vervolgens Dreamweaver gebruiken om ze als afbeeldingen in te voegen in webpagina's. Nadat u deze afbeeldingen in

webpagina's hebt ingevoegd, kunt u de bronbestanden nog bewerken in Photoshop en de overeenkomstige

webafbeeldingen in Dreamweaver bijwerken.

DREAMWEAVER CS3

Handboek

358

Gebruik de volgende workflow om een afbeelding die in Photoshop werd gemaakt, in een webpagina in te voegen:

• Sla uw afbeelding in Photoshop op als een gewoon Photoshop-bestand (PSD). U moet de afbeelding niet eerst naar JPEG,

GIF of PNG converteren.

• Selecteer het PSD-bestand in Dreamweaver en voeg het in de webpagina in. Met Dreamweaver kunt u de afbeelding

optimaliseren voor het web en vervolgens in de pagina invoegen.

GebruikdevolgendeworkflowomeensegmentoflaagineenPhotoshop-afbeelding als een afbeelding op een webpagina

te gebruiken:

• Selecteer in Photoshop het segment of de laag en kopieer de selectie naar het Klembord.

• Plak in Dreamweaver het segment of de laag in de webpagina. Met Dreamweaver kunt u de afbeelding optimaliseren voor

het web en vervolgens in de pagina invoegen.

Gebruik de volgende workflow om webafbeeldingen die oorspronkelijk in Photoshop zijn gemaakt, bij te werken:

• Selecteer in Dreamweaver het JPEG-, GIF- of PNG-bestand dat u uit een PSD-bestand hebt gehaald en met

Dreamweaver hebt ingevoegd, en klik vervolgens op de knop Afbeelding bewerken. Dreamweaver opent het PSD-

bronbestand in Photoshop.

• Breng in Photoshop uw wijzigingen in het PSD-bronbestand aan en sla het bestand op. Selecteer vervolgens de volledige

afbeelding of een gedeelte ervan en kopieer dit naar het Klembord.

• Plak in Dreamweaver de afbeelding over de webafbeelding in de pagina. Dreamweaver optimaliseert de PSD-afbeelding

op het Klembord met de oorspronkelijke optimalisatie-instellingen en vervangt vervolgens de afbeelding op de pagina

door de bijgewerkte versie.

Voor een videohandleiding over werken met Photoshop en Dreamweaver, zie www.adobe.com/go/vid0200_nl.

Zie ook

“Een Photoshop-afbeelding in uw pagina invoegen” op pagina 358

“Een Photoshop-selectie naar uw pagina kopiëren” op pagina 359

“Photoshop gebruiken om afbeeldingen te bewerken op Dreamweaver-pagina's” op pagina 360

Een Photoshop-afbeelding in uw pagina invoegen

1 Plaats in Dreamweaver de invoegpositie op de pagina op de locatie waar u de afbeelding wilt invoegen.

2 Selecteer Invoegen > Afbeelding.

3 Zoek het Photoshop PDS-afbeeldingsbestand in het dialoogvenster Afbeeldingsbron selecteren door op de knop

Bladeren te klikken en naar het bestand te gaan.

4 Pas in het dialoogvenster Voorvertoning van afbeelding de optimalisatie-instellingen naar wens aan en klik op OK.

5 Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.

• Als u een standaardafbeeldingenmap hebt en u het bestand wilt opslaan op een locatie buiten uw hoofdmap, wordt het

bestand opgeslagen in die locatie en ook gekopieerd naar uw standaardafbeeldingenmap.

• Als u geen standaardafbeeldingenmap hebt en u het bestand wilt opslaan op een locatie buiten uw hoofdmap, wordt het

in Dreamweaver opgeslagen in die locatie en wordt u ook gevraagd of u een kopie van het bestand wilt opslaan in uw

hoofdmap. Meestal zult u deze optie accepteren. Als u de bewerking op dit punt annuleert, wordt het bestand niet op de

Dreamweaver-pagina geplaatst, maar wordt de afbeelding die klaar is voor internet opgeslagen op de door u gekozen

locatie.

Dreamweaver definieert de afbeelding volgens de optimalisatie-instellingen en plaatst een versie van de afbeelding die klaar

is voor internet op uw pagina. Informatie over de afbeelding, zoals de bestandsnaam en de locatie van het oorspronkelijke

PSD-bestand, wordt opgeslagen in een ontwerpnotitie, ongeacht of u ontwerpnotities hebt ingeschakeld voor uw site. Via

de ontwerpnotitie kunt u het oorspronkelijke Photoshop-bronbestand weer bewerken vanuit Dreamweaver.

Opmerking: Als u later besluit dat u de optimalisatie-instellingen wilt wijzigen voor een afbeelding op uw pagina's, kunt u op

de knop Optimaliseren klikken in de eigenschappencontrole van de afbeelding en de afbeelding opnieuw optimaliseren.

DREAMWEAVER CS3

Handboek

359

Zie ook

“Dreamweaver en toegankelijkheid” op pagina 671

“Optimaliseringsinstellingen voor afbeeldingen kiezen” op pagina 361

Een Photoshop-selectie naar uw pagina kopiëren

U kunt een Photoshop-afbeelding geheel of gedeeltelijk kopiëren en de selectie als afbeelding voor internet in uw

Dreamweaver-pagina plakken. U kunt één laag of een set lagen voor een geselecteerd gebied van de afbeelding kopiëren, of

u kunt een segment van de afbeelding kopiëren.

1 Ga in Photoshop op een van de volgende manieren te werk:

• Kopieer één laag geheel of gedeeltelijk met de kaderfunctie om het gedeelte te selecteren dat u wilt kopiëren, en kies

vervolgens Bewerken > Kopiëren. Hiermee kopieert u alleen de actieve laag voor het geselecteerde gebied naar het

klembord. Als u effecten hebt die op lagen zijn gebaseerd, worden deze niet gekopieerd.

• Kopieer meerdere lagen en voeg ze samen met de kaderfunctie om het gedeelte te selecteren dat u wilt kopiëren, en kies

vervolgens Bewerken > Samengevoegd kopiëren. Hiermee worden alle actieve en lagere lagen van het geselecteerde

gebied naar het klembord gekopieerd. Als er op lagen gebaseerde effecten gekoppeld zijn aan deze lagen, worden ze

gekopieerd.

• Kopieer een segment met de functie voor het selecteren van segmenten en kies vervolgens Bewerken > Kopiëren.

Hiermee worden alle actieve en lagere lagen van het segment naar het klembord gekopieerd.

U kunt Selecteren > Alles kiezen om snel een afbeelding te selecteren voor kopiëren.

2 Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina op de locatie waar u de afbeelding wilt

invoegen.

3 Selecteer Bewerken > Plakken.

4 Pas in het dialoogvenster Voorvertoning van afbeelding de optimalisatie-instellingen naar wens aan en klik op

Exporteren.

5 Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.

• Als u een standaardafbeeldingenmap hebt en u het bestand wilt opslaan op een locatie buiten uw hoofdmap, wordt het

bestand opgeslagen in die locatie en ook gekopieerd naar uw standaardafbeeldingenmap.

• Als u geen standaardafbeeldingenmap hebt en u het bestand wilt opslaan op een locatie buiten uw hoofdmap, wordt het

in Dreamweaver opgeslagen in die locatie en wordt u ook gevraagd of u een kopie van het bestand wilt opslaan in uw

hoofdmap. Meestal zult u deze optie accepteren. Als u de bewerking op dit punt annuleert, wordt het bestand niet op de

Dreamweaver-pagina geplaatst, maar wordt de afbeelding die klaar is voor internet opgeslagen op de door u gekozen

locatie.

Dreamweaver definieert de afbeelding volgens de optimalisatie-instellingen en plaatst een versie van de afbeelding die klaar

is voor internet op uw pagina. Informatie over de afbeelding, zoals de locatie van het oorspronkelijke PSD-bestand, wordt

opgeslagen in een ontwerpnotitie, ongeacht of u ontwerpnotities hebt ingeschakeld voor uw site. Via de ontwerpnotitie kunt

u het oorspronkelijke Photoshop-bestand weer bewerken vanuit Dreamweaver.

Zie www.adobe.com/go/vid0193_nl voor een zelfstudie over het kopiëren en plakken tussen verschillende toepassingen,

waaronder Dreamweaver en Photoshop.

Zie ook

“Dreamweaver en toegankelijkheid” op pagina 671

“Optimaliseringsinstellingen voor afbeeldingen kiezen” op pagina 361

DREAMWEAVER CS3

Handboek

360

Photoshop gebruiken om afbeeldingen te bewerken op Dreamweaver-pagina's

Nadat u Photoshop-afbeeldingen in uw Dreamweaver-pagina's hebt geplaatst, kunt u in Photoshop het oorspronkelijke

PSD-afbeeldingsbestand bewerken of het JPEG-, GIF- of PNG-bestand voor internet dat op de pagina wordt weergegeven.

Als u wijzigingen aanbrengt in de internetversie van het bestand, wordt het bron-PSD-bestand niet bijgewerkt en komen

de twee versies niet meer met elkaar overeen. U wordt aangeraden uw wijzigingen aan te brengen in het bron-PSD-bestand,

zodat dezelfde bron gehandhaafd blijft.

Opmerking: Controleer of u Photoshop hebt ingesteld als primaire externe afbeeldingseditor voor het bestandstype dat u wilt

bewerken.

Zie ook

“Afbeeldingen bewerken in Dreamweaver” op pagina 237

“Een externe afbeeldingseditor gebruiken” op pagina 243

“Optimaliseringsinstellingen voor afbeeldingen kiezen” op pagina 361

“Een Photoshop-afbeelding opnieuw invoegen vanuit Dreamweaver” op pagina 361

“Een Photoshop-afbeeldingsselectie opnieuw kopiëren” op pagina 361

“De grootte van een afbeelding visueel wijzigen” op pagina 240

Het oorspronkelijke PSD-bronbestand bewerken in Photoshop

1 Selecteer in Dreamweaver een internetafbeelding die oorspronkelijke in Photoshop is gemaakt en ga op een van de

volgende manieren te werk:

• Klik op de knop Bewerken in de eigenschappencontrole voor de afbeelding.

• Houd Control (Windows) of Command (Macintosh) ingedrukt terwijl u dubbelklikt op het bestand.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op een afbeelding, kies Bron

bewerken met in het snelmenu en kies Photoshop.

Opmerking: Hierbij wordt ervan uitgegaan dat Photoshop is ingesteld als de primaire externe afbeeldingseditor voor PSD-

afbeeldings-bestanden. U kunt Photoshop ook instellen als de standaardeditor voor JPEG-, GIF- en PNG-bestanden.

2 Nadat u het bestand hebt bewerkt in Photoshop, kunt u op een van de volgende manieren de afbeelding in uw pagina

bijwerken:

• Voeg het bestand opnieuw in en definieer de optimalisatie-instellingen opnieuw.

• Plak de afbeelding of selectie in de pagina. Dreamweaver gebruikt de bestaande optimalisatie-instellingen

Als u opnieuw wilt optimaliseren, klikt u op de knop Optimaliseren in de eigenschappencontrole om het dialoogvenster

Voorvertoning van afbeelding weer te geven. Als de afbeelding is gemaakt in Photoshop, wordt de Photoshop-afbeelding

weer geïmporteerd en kunt u de optimalisatie-instellingen daar weer op toepassen. Als er geen Photoshop PSD-bestand aan

de afbeelding is gekoppeld, wordt de internetafbeelding weergegeven.

Het voor het web gereed gemaakte afbeeldingsbestand bewerken in Photoshop

1 Selecteer in Dreamweaver Bewerken > Voorkeuren > Bestandstypen en definieer Photoshop als de standaardeditor voor

JPEG-, GIF- en PNG-bestanden. Photoshop is standaard ingesteld als primaire editor voor PSD-bestanden.

• Als u een nieuw bestandstype wilt toevoegen, klikt u op de plus (+) boven het linkerpaneel.

• Als u de externe editor voor een bestandstype wilt toevoegen of wijzigen, selecteert u dat type in het linkerpaneel en klikt

u op de plus (+) boven het rechterpaneel. Hiermee komt u in het dialoogvenster Externe editor selecteren voor het

zoeken van bestanden.

2 Selecteer een afbeelding die is gemaakt in Photoshop en ga op een van de volgende manieren te werk:

• Houd Alt (Windows) of Option (Macintosh) ingedrukt terwijl u dubbelklikt op het bestand.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op de geselecteerde

afbeelding, kies Bewerken met in het snelmenu en zoek het toepassingsbestand voor Photoshop.

DREAMWEAVER CS3

Handboek

361

• Selecteer Wijzigen > Afbeelding > Photoshop.

3 Als u het bestand naar wens hebt bewerkt in Photoshop, slaat u het bestand op.

4 In Dreamweaver wordt het bestand bijgewerkt met uw revisies, hoewel u mogelijk wel de afmetingen van de afbeelding

opnieuw moet instellen.

U kunt kleine wijzigingen van internetbestanden, zoals bijsnijden of opnieuw optimaliseren, uitvoeren met de

Dreamweaver-functies voor het bewerken van afbeeldingen in de eigenschappencontrole van de afbeelding of met de

menuopdrachten onder Wijzigen > Afbeelding. Het bron-PSD-bestand wordt niet bijwerkt met deze acties, alleen de

internetafbeelding.

Een Photoshop-afbeelding opnieuw invoegen vanuit Dreamweaver

Als u een afbeelding die is afgeleid van Photoshop vervangt in een Dreamweaver-pagina door een ander PSD-bestand in te

voegen, wordt het dialoogvenster Voorvertoning van afbeelding weer weergegeven en moet u de optimalisatie-instellingen

voor de nieuwe afbeelding invoegen.

1 In Dreamweaver selecteert u op een van de volgende manieren een ander Photoshop PSD-bestand:

• Gebruik het pictogram Wijs bestand aan om een ander PSD-bestand op te halen uit het paneel Bestanden.

• Dubbelklik op een bestaande afbeelding en blader naar een nieuw bestand.

2 Vervolgens zijn de stappen hetzelfde als voor het invoegen van een nieuwe afbeelding: optimalisatie-instellingen

aanpassen en het bestand opslaan op uw site.

Een Photoshop-afbeeldingsselectie opnieuw kopiëren

Als u een van Photoshop afgeleide afbeelding in uw Dreamweaver-pagina vervangt door een gekopieerde selectie van een

PSD-bestand, wordt het dialoogvenster Voorvertoning van afbeelding niet weergegeven. In plaats daarvan gebruikt

Dreamweaver de optimalisatie-instellingen die u voor die afbeelding in uw pagina hebt ingesteld.

1 Bewerk een afbeelding in Photoshop en kopieer deze geheel of gedeeltelijk.

2 Selecteer in Dreamweaver een bestaande afbeelding.

3 Selecteer Bewerken > Plakken.

Optimaliseringsinstellingen voor afbeeldingen kiezen

Het dialoogvenster Voorvertoning van afbeelding heeft drie secties:

• Op het tabblad Opties kunt u definiëren welke bestandsindeling moet worden gebruikt en kunt u voorkeuren instellen

voor bijvoorbeeld kleur.

• Op het tabblad Bestand kunt u de schaal en afmetingen van de afbeelding instellen.

• In het paneel Voorvertoning kunt u een versie van de afbeelding met uw instellingen zien.

Zie ook

“Optimaliseringsinstellingen” op pagina 362

Kies de opties voor het afbeeldingsbestand op het tabblad Opties

1 Kies het type bestand dat moet worden gebruikt in het pop-upmenu Opmaak op het tabblad Opties: JPEG, GIF of PNG.

2 (Optioneel) Kies andere instellingen voor afbeeldingsopties in het tabblad Opties voor het type bestandsindeling dat u

hebt gekozen.

(Optioneel) Bekijk de instellingen in het dialoogvenster Voorvertoning van afbeelding

1 Kies in het dialoogvenster Voorvertoning van afbeelding de optie Voorvertoning als u wilt zien hoe de afbeelding er

uitziet met uw instellingen. Als prestaties van belang zijn, kunt u deze optie beter uitschakelen.

DREAMWEAVER CS3

Handboek

362

2 Selecteer een van de opgeslagen instellingen voor kleurpaletten in het pop-upmenu als u een vooraf ingestelde set opties

wilt gebruiken.

3 Gebruik de aanwijsfunctie om de voorvertoonde afbeelding te nemen en te verschuiven zodat u verschillende delen kunt

zien.

4 Gebruik de uitsnijfunctie om de afmetingen van de afbeelding te verkleinen. U moet misschien eerst uitzoomen om de

hele afbeelding te kunnen zien.

5 Kies een waarde uit het pop-upmenu Zoomen om de weergave van de voorvertoonde afbeelding uit te breiden of te

verminderen. U kunt ook de zoomfunctie gebruiken. Klik om in te zoomen of klik terwijl u Alt (Windows) of Option

(Macintosh) ingedrukt houdt om uit te zoomen.

6 U kunt voorvertoningen van twee of vier verschillende optimalisaties bekijken door op de knop 2 of 4 onderaan in het

voorvertoningsvenster te klikken en verschillende kleurpaletten te kiezen voor elk deelvenster.

7 Besturingselementen voor animaties gelden niet voor Photoshop-afbeeldingen.

(Optioneel) Verander de schaal van de afbeelding of opties voor het exportgebied op de tab Bestand

1 Selecteer het tabblad Bestand.

2 Verklein of vergroot de afbeelding op een van de volgende manieren:

• Geef een percentage voor schalen op.

• Voer absolute pixelwaarden in voor breedte of hoogte.

3 Selecteer Beperken om de oorspronkelijke verhoudingen van de afbeeldingen te behouden bij het opnieuw schalen.

4 Wijzig de vorm van de geplaatste afbeelding door de optie Exportgebied te kiezen en een van de volgende handelingen

uit te voeren:

• Sleep zo nodig de stippelrand rond de voorvertoonde afbeelding. U kunt de afbeelding binnen de randen verslepen om

verborgen gebieden binnen de weergave te plaatsen.

• Geef pixelcoördinaten op voor de randen van de afbeelding.

Exporteer de afbeelding en sla deze op

1 Wanneer u klaar bent met het definiëren van de instellingen, klikt u op OK.

2 U wordt gevraagd het bestand op te slaan in de standaardafbeeldingenmap als u die hebt gedefinieerd voor uw site, of

anders in de hoofdmap van de site. Blader naar de gewenste locatie en klik op OK.

Als u opnieuw wilt optimaliseren, klikt u op de knop Optimaliseren in de eigenschappencontrole om het dialoogvenster

Voorvertoning van afbeelding weer te geven. Als de afbeelding is afgeleid van Photoshop, wordt de Photoshop-afbeelding

weer geïmporteerd en kunt u de optimalisatie-instellingen daar weer op toepassen. Als er geen Photoshop PSD-bestand aan

de afbeelding is gekoppeld, wordt de internetafbeelding weergegeven.

Optimaliseringsinstellingen

Als u een afbeeldingsbestand invoegt of een gedeelte van een afbeelding kopieert uit Photoshop, wordt in Dreamweaver het

dialoogvenster Voorvertoning van afbeelding weergegeven, waarin u instellingen kunt definiëren en bekijken voor een

internetversie van de afbeelding die de juiste kleur, compressie en kwaliteit heeft:

• Bestandsindeling, inclusief opties voor afbeeldingscompressie

• (Optioneel) Kleurpaletaanpassingen voor het elimineren van kleuren en het verkleinen van het bestand

• (Optioneel) Schaal- of exportgebied voor de afbeelding

DREAMWEAVER CS3

Handboek

363

Een internetafbeelding is een afbeelding die kan worden weergegeven door alle moderne webbrowsers en die er altijd

hetzelfde uitziet, ongeacht het systeem of de browser van de gebruiker. Als u een Photoshop-afbeelding invoegt, kunt u in

het dialoogvenster Voorvertoning van afbeelding verschillende instellingen aanpassen voor een optimale

internetpublicatie. In het algemeen komen de instellingen neer op een compromis tussen kwaliteit en bestandsgrootte.

Opmerking: De instellingen die u selecteert, hebben alleen invloed op de geëxporteerde versie van het afbeeldingsbestand. Het

oorspronkelijke Photoshop PSD-bestand blijft altijd ongewijzigd.

Het tabblad Opties bevat veel afbeeldingsopties, afhankelijk van de door u gekozen bestandsindeling. Voor uw gemak bevat

het pop-upmenu Opgeslagen instellingen van het dialoogvenster Voorvertoning van afbeelding verschillende sets opties

voor GIF- en JPEG-afbeeldingen.

JPEG-afbeeldingsopties

U kunt een JPEG-afbeelding optimaliseren door de opties voor compressie en vloeiend maken in te stellen. U kunt het

kleurenpalet niet bewerken.

Kwaliteit Met de schuifregelaar kunt u de kwaliteit van de afbeelding verhogen of verlagen. Een hogere kwaliteit resulteert

in een groter bestand.

Vloeiend maken Hiermee kunt u desgewenst afbeelding vloeiender maken. Voor afbeeldingen met een lagere kwaliteit is

mogelijk een hogere waarde nodig.

Progressieve browserweergave Hiermee wordt een afbeelding aanvankelijk met een lage resolutie weergegeven, waarna de

resolutie tijdens het downloaden geleidelijk wordt verhoogd. Standaard niet ingeschakeld.

Kleurranden scherper maken Hiermee kunt de kwaliteit van de afbeelding verhogen

Matte Hiermee kunt u de achtergrond van de afbeelding instellen. U kunt de transparantie van een PNG van 32-bpc (bits

per kanaal) behouden door op het transparantiepictogram in het dialoogvenster Matte te klikken. U kunt met Matte ook

gebruiken voor het anti-aliassen van objecten met zachte randen die direct boven het canvas liggen door de matte kleur aan

te passen aan de doelachtergrond.

DREAMWEAVER CS3

Handboek

364

Optimaliseren voor grootte Hier geeft u de grootte van de afbeelding, in kilobyte, op. Voor 8-bcp afbeeldingen probeert de

wizard de gevraagde bestandsgrootte te bereiken door het aantal kleuren of de dithering aan te passen.

Opties voor GIF- en PNG-afbeeldingen

Op het tabblad Opties kunt u een transparantiewaarde instellen voor afzonderlijke kleuren in GIF- en 8-bpc PNG-

afbeeldingen, zodat de achtergrond van de webpagina zichtbaar is door de gebieden met die kleuren. U doet dit door het

kleurenpalet links op het tabblad Opties aan te passen. PNG-afbeeldingen met de 32-bpc-indeling bevatten automatisch

transparantie, hoewel u geen transparantieoptie voor 32-bpc PNG-afbeeldingen ziet in het paneel Optimaliseren.

Palet Standaard ingesteld op Adaptief.

Verlies Standaard ingesteld op 0. Niet van toepassing op 8-bpc PNG-afbeeldingen.

Dithering Hiermee worden kleuren die niet in het huidige palet zitten benaderd door het afwisselen van pixels met

gelijksoortige kleuren, zodat ze samen de ontbrekende kleur lijken te vormen. Dithering is vooral handig bij het exporteren

van afbeeldingen met complexe mengkleuren of gradiënten, of bij het exporteren van foto's naar een 8-bpc grafische

indeling, zoals GIF. Standaard niet ingeschakeld.

Opmerking: Door dithering kan het bestand aanzienlijk groter worden.

Lijst met aantal kleuren Standaard ingesteld op 256. Het aantal kleuren is afhankelijk van het huidige gedrag van het palet.

Het palet "Web 216" geeft bijvoorbeeld slechts 216 kleuren weer.

Kleurenpalet De weergave van kleuren is afhankelijk van het gedrag van het geselecteerde gedrag en het maximale aantal

kleuren.

Paletfuncties Klik op een pixel in het palet en klik vervolgens op deze pictogrammen om kleuren te wijzigen, toe te voegen

of te verwijderen of om een kleur transparant, webveilig of vergrendeld te maken.

Pictogrammen voor het selecteren van transparantiekleuren Met deze knoppen kunt u een paletkleur selecteren,

toevoegen of verwijderen. Als u bijvoorbeeld de optie Transparantiekleur selecteren kiest, kunt u op een pixel in het palet

of op een kleurpunt in het voorvertoningspaneel klikken om de pixel of het punt transparant te maken.

Pop-upmenu Transparantie Hiermee kunt u index-, alfa- of geen transparantie instellen. Een grijs-wit geblokt symbool op

documentvoorvertoningen geeft transparante gebieden aan. Als u de invloed van uw keuzes op de afbeelding wilt zien, kiest

u de dubbele of vierdubbele voorvertoningsweergave voor afbeeldingen en klikt u op een andere afbeelding dan het

origineel.

• Index Gebruik indextransparantie bij het exporteren van GIF-afbeeldingen die transparante gebieden bevatten. Met

indextransparantie stelt u specifieke kleuren in die bij het exporteren transparant moeten worden. Met indextransparantie

worden pixels met bepaalde kleurwaarden in- of uitgeschakeld.

• Alfa Gebruik alfatransparantie bij het exporteren van 8-bpc PNG-afbeeldingen die transparante gebieden bevatten. Bij

alfatransparantie zijn graduele transparantie en semi-doorzichtige pixels mogelijk.

Randkleur Hiermee kunt u de achtergrond van de afbeelding instellen. U kunt de transparantie van een PNG van 32-bpc

behouden door op het transparantiepictogram in het dialoogvenster Matte te klikken. U kunt met Matte ook gebruiken

voor het anti-aliassen van objecten met zachte randen die direct boven het canvas liggen door de matte kleur aan te passen

aan de doelachtergrond.

Ongebruikte kleuren verwijderen Hiermee wordt het bestand verkleind doordat kleuren die niet in de afbeelding worden

gebruikt, worden verwijderd.

Geïnterlinieerde browserweergave Hiermee wordt een geïnterlinieerde afbeelding aanvankelijk met een lage resolutie

weergegeven, waarna de resolutie tijdens het downloaden geleidelijk wordt verhoogd. Standaard niet ingeschakeld.

Optimaliseren voor grootte Hiermee kunt u een grootte, in kilobyte, opgeven voor de afbeelding. Voor 8-bcp afbeeldingen

probeert de wizard de gevraagde bestandsgrootte te bereiken door het aantal kleuren of de dithering aan te passen.

DREAMWEAVER CS3

Handboek

365

Opgeslagen instellingen

Dreamweaver heeft verschillende optie-instellingen. Afhankelijk van de door u gekozen opgeslagen instellingen kunnen de

hierboven beschreven bestandstype-specifieke afbeeldingsopties variëren.

GIF Web 216 Hiermee wordt van alle kleuren webveilige kleuren gemaakt. Het kleurenpalet bevat maximaal 216 kleuren.

GIF webafstemming 256 Hiermee worden webonveilige kleuren geconverteerd naar de dichtstbijzijnde webveilige kleur.

Het kleurenpalet bevat maximaal 256 kleuren.

GIF webafstemming 128 Hiermee worden webonveilige kleuren geconverteerd naar de dichtstbijzijnde webveilige kleur.

Het kleurenpalet bevat maximaal 128 kleuren.

GIF adaptief 256 Een kleurenpalet dat alleen de kleuren bevat die daadwerkelijk in de afbeelding worden gebruikt. Het

kleurenpalet bevat maximaal 256 kleuren.

JPEG - betere kwaliteit Hiermee wordt de kwaliteit ingesteld op 80 en de vereffening op 0, waardoor een grotere afbeelding

met een hogere kwaliteit ontstaat.

JPEG - kleiner bestand Hiermee wordt de kwaliteit ingesteld op 60 en de vereffening op 2, waardoor een afbeelding ontstaat

die meer dan twee keer zo klein is als een JPEG met hogere kwaliteit, maar die een lagere kwaliteit heeft.

GIF-animatie webafstemming 128 Hiermee wordt de bestandsindeling ingesteld op GIF-animatie en worden webonveilige

kleuren geconverteerd naar de dichtstbijzijnde webveilige kleur. Het kleurenpalet bevat maximaal 128 kleuren.

Zie ook

“Optimaliseringsinstellingen voor afbeeldingen kiezen” op pagina 361

Werken met Flash

Een SWF-bestand van Dreamweaver bewerken in Flash

Als u zowel Flash als Dreamweaver hebt geïnstalleerd, kunt u een SWF-bestand in een Dreamweaver-document selecteren

en het bewerken met Flash. Het SWF-bestand wordt niet rechtstreeks bewerkt in Flash. Alleen het brondocument (het FLA-

bestand) wordt bewerkt en vervolgens wordt het SWF-bestand opnieuw geëxporteerd.

1 Open Eigenschappencontrole in Dreamweaver (Venster > Eigenschappen).

2 Ga in het Dreamweaver-document op een van de volgende manieren te werk:

• Klik op de tijdelijke aanduiding van het SWF-bestand om het bestand te selecteren en klik vervolgens in

Eigenschappencontrole op Bewerken.

• Klik met de rechtermuisknop (Windows) of klik terwijl u Command ingedrukt houdt (Macintosh) op de tijdelijke

aanduiding voor het SWF-bestand en selecteer Bewerken met Flash in het snelmenu.

De focus gaat van Dreamweaver naar Flash en Flash probeert het Flash-ontwerpbestand (FLA) voor het geselecteerde SWF-

bestand te vinden. Als het Flash-ontwerpbestand niet kan worden gevonden, wordt u gevraagd het bestand te zoeken.

Opmerking: Als het FLA- of SWF-bestand vergrendeld is, checkt u het bestand uit in Dreamweaver.

3 Bewerk het FLA-bestand in Flash. In het Flash-documentvenster wordt aangegeven dat u het bestand wijzigt vanuit

Dreamweaver.

4 Klik op Gereed wanneer u de gewenste wijzigingen hebt aangebracht.

Flash werkt het FLA-bestand bij en exporteert het weer als SWF-bestand. Vervolgens wordt Flash afgesloten en gaat de

focus terug naar het Dreamweaver-document.

Opmerking: Selecteer in Flash Bestand > Bijwerken voor Dreamweaver om het SWF-bestand bij te werken en Flash open te

houden.

5 Als u het bijgewerkte SWF-bestand in het document wilt bekijken, klikt u op Afspelen in Eigenschappencontrole van

Dreamweaver of drukt u op F12 om een voorbeeld van de pagina in een browservenster weer te geven.

DREAMWEAVER CS3

Handboek

366

Koppelingen in een SWF-bestand bijwerken

U kunt Dreamweaver gebruiken om een URL-koppeling in een Flash-bestand (SWF-bestand) bij te werken. Vervolgens

kunt u de wijziging doorvoeren in het Flash-ontwerpdocument (FLA-bestand).

1 Stel een introductiepagina voor de site in als u dat nog niet hebt gedaan.

Als u een site-overzicht wilt maken, moet u een introductiepagina instellen. U moet afhankelijke bestanden in de weergave

Site-overzicht weergeven om een koppeling in een SWF-bestand bij te werken. Standaard worden in het site-overzicht geen

afhankelijke bestanden weergegeven, dus u moet ze weergeven.

2 Selecteer in het paneel Bestanden de optie Overzichtsweergave in het vervolgkeuzemenu Beeld.

3 Als u afhankelijke bestanden wilt weergeven, selecteert u Weergave in het menu Opties in de rechterbovenhoek van het

paneel Bestanden en selecteert u vervolgens Opties voor site-overzicht > Afhankelijke bestanden tonen.

4 Wijzig in het site-overzicht de koppeling onder het SWF-bestand op een van de volgende manieren:

• Als u de koppeling in het geselecteerde SWF-bestand wilt wijzigen, klikt u met de rechtermuisknop (Windows) of terwijl

u Control ingedrukt houdt (Macintosh) op de koppeling, selecteert u Koppeling wijzigen en typt u vervolgens het pad

van de nieuwe URL in het dialoogvenster.

• Als u alle instanties van de koppeling wilt bijwerken, selecteert u Site > Koppeling overal op de site wijzigen. Blader in

het tekstvak Alle koppelingen wijzigen in, naar de koppeling die u wijzigt of typ het pad naar de koppeling. Blader in het

tekstvak In koppelingen naar, naar de nieuwe URL of typ het pad naar de URL.

5 Klik op OK.

Elke koppeling die door Dreamweaver in het SWF-bestand wordt bijgewerkt, wordt doorgegeven aan het FLA-bronbestand

als u Flash start om dit bestand te bewerken. In Dreamweaver wordt elke wijziging die u aanbrengt in koppelingen naar het

SWF-bestand, automatisch vastgelegd in ontwerpnotities. Wanneer de wijzigingen door Flash worden doorgegeven aan het

FLA-bestand, worden ze uit de ontwerpnotities verwijderd.

Zie ook

“Site-overzichten gebruiken” op pagina 49

“Site-overzichtbestanden weergeven of verbergen” op pagina 52

Werken met Bridge

Over Adobe Bridge

Dreamweaver bied naadloze integratie met Adobe® Bridge, een op zichzelf staande toepassing voor het bladeren door

bestanden. Adobe Bridge is een platform-overschrijdende toepassing, die wordt geleverd bij de Adobe® Creative Suite® 3-

componenten en waarmee u de middelen die u nodig hebt om afgedrukte inhoud en web-, video- en audio-inhoud te

maken, kunt zoeken en ordenen. U kunt Bridge starten vanuit elke Creative Suite-component (behalve Acrobat 8) en deze

toepassing gebruiken om toegang te krijgen tot middelen van Adobe en andere middelen.

Vanuit Adobe Bridge kunt u het volgende doen:

• Afbeeldingsbestanden beheren: U kunt bestanden voorvertonen, zoeken, sorteren en verwerken in Bridge zonder

afzonderlijke toepassingen te openen. U kunt ook metagegevens voor bestanden bewerken en Bridge gebruiken om

bestanden in uw documenten, projecten of composities te plaatsen.

• Uw foto's beheren: U kunt foto's van de geheugenkaart van uw digitale camera importeren en bewerken, verwante foto's

groeperen in stapels en Camera Raw-bestanden openen of importeren en de instellingen van deze bestanden aanpassen

zonder Photoshop te starten. U kunt ook zoeken in toonaangevende fotobibliotheken en via Adobe Stock Photos

afbeeldingen downloaden waarvoor geen royalty's betaald hoeven te worden.

• U kunt werken met beheerde Adobe Version Cue®-elementen.

• U kunt geautomatiseerde taken uitvoeren, zoals batchopdrachten.

DREAMWEAVER CS3

Handboek

367

• U kunt kleurinstellingen van Creative Suite-componenten synchroniseren met kleurbeheer.

Zie www.adobe.com/go/vid0192_nl voor een zelfstudie over Adobe Bridge en het werkproces voor webontwikkeling.

Bridge starten vanuit Dreamweaver

U kunt Bridge starten vanuit Dreamweaver om uw bestanden te bekijken voordat u ze in uw pagina-indeling plaatst of

sleept.

❖ U kunt Bridge op verschillende manieren starten:

• Selecteer Bestand > Bladeren in Bridge.

• Klik op de knop Bladeren in Bridge op de werkbalk Standaard.

• Druk op de snelkoppeling Bladeren in Bridge op het toetsenbord: Control+Alt+O (Windows) of Command+Option+O

(Macintosh).

Bridge wordt geopend in de bestandsbladermodus, waarin de inhoud wordt weergegeven van de map die het laatst in

Dreamweaver is geopend. Als Bridge al was geopend, wordt het het actieve venster.

Opmerking: Als u Bridge niet hebt geïnstalleerd, wordt een foutbericht weergegeven in Dreamweaver en moet u de toepassing

installeren voordat u deze functies kunt gebruiken.

Bestanden vanuit Bridge in Dreamweaver plaatsen

U kunt bestanden invoegen in Dreamweaver-pagina's door ze vanuit Bridge in uw pagina in te voegen of te slepen. Als u

deze functie wilt gebruiken, moet het Dreamweaver-document waarin u het bestand wilt invoegen, geopend zijn in de

ontwerpweergave.

U kunt de meeste bestandstypen invoegen in uw pagina's, maar Dreamweaver behandelt ze op verschillende manieren:

• Als u een internetafbeelding (JPEG, GIF of PNG) invoegt, worden de afbeeldingsbestand rechtstreeks in de pagina

ingevoegd en wordt een kopie in de standaardafbeeldingenmap van uw website geplaatst.

• Als u een Photoshop PSD-bestand invoegt, moet u de optimalisatie-instellingen definiëren voordat het bestand in uw

pagina kan worden geplaatst.

• Als u een niet-afbeeldingsbestand invoegt, zoals een mp3-bestand, een PDF-bestand of een bestand met een onbekend

bestandstype, wordt een koppeling naar het bronbestand ingevoegd.

• Als u een HTML-bestand invoegt, wordt een koppeling naar het bronbestand ingevoegd.

• (Alleen Windows) Als u Microsoft Office hebt geïnstalleerd en u een Microsoft Word- of Excel-bestand invoegt, moet u

opgeven of u het bestand zelf of een koppeling naar het bronbestand wilt invoegen. Als u het bestand wilt invoegen, kunt

u opgeven hoeveel van de opmaak van het bestand u wilt behouden.

Zie ook

“Een Photoshop-afbeelding in uw pagina invoegen” op pagina 358

“Werken met Photoshop” op pagina 357

Een Bridge-bestand op uw pagina plaatsen

1 Plaats in Dreamweaver (ontwerpweergave) de invoegpositie op de pagina op de locatie waarop het bestand moet worden

ingevoegd.

2 Selecteer het bestand in Bridge en kies Bestand > Plaatsen in Dreamweaver.

3 Als het bestand niet in de hoofdmap van de site staat, wordt u gevraagd of het daarheen moet worden gekopieerd.

4 Als u Bewerken > Voorkeuren > Toegankelijkheid zo hebt ingesteld dat er kenmerken worden weergegeven bij

ingevoegde afbeeldingen, worden het dialoogvenster Toegankelijkheidskenmerken van de afbeeldingstag weergegeven als

u internetafbeeldingen zoals JPEG en GIF invoegt.

DREAMWEAVER CS3

Handboek

368

Opmerking: Als de invoegpositie in de codeweergave staat, wordt Bridge op de gebruikelijke manier gestart, maar kan het

bestand niet worden geplaatst. U kunt alleen bestanden plaatsen in de ontwerpweergave.

Een bestand van Bridge naar uw pagina slepen

1 Plaats in Dreamweaver (ontwerpweergave) de invoegpositie op de pagina op de locatie waarop de afbeelding moet

worden ingevoegd.

2 Start Bridge als dit nog niet is geopend.

3 Selecteer een of meer bestanden in Bridge en sleep ze naar uw Dreamweaver-pagina.

4 Als een bestand niet in de hoofdmap van de site staat, wordt u gevraagd of het daarheen moet worden gekopieerd.

5 Als u Bewerken > Voorkeuren > Toegankelijkheid zo hebt ingesteld dat er kenmerken worden weergegeven bij

ingevoegde afbeeldingen, worden het dialoogvenster Toegankelijkheidskenmerken van de afbeeldingstag weergegeven als

u webveilige afbeeldingen zoals JPEG en GIF invoegt.

Opmerking: Als de invoegpositie in de codeweergave staat, wordt Bridge op de gebruikelijke manier gestart, maar kan het

bestand niet worden geplaatst. U kunt alleen bestanden plaatsen in de ontwerpweergave.

Dreamweaver starten vanuit Bridge

❖ Selecteer een bestand in Bridge en voer een van de volgende handelingen uit:

• Selecteer Bestand > Openen met > Adobe Dreamweaver.

• Klik met de rechtermuisknop (of terwijl u Control ingedrukt houdt in Macintosh) en kies Openen met > Adobe

Dreamweaver in het snelmenu.

Opmerking: Als Dreamweaver al is geopend, wordt het programma hierdoor actief. Als Dreamweaver niet is geopend, wordt

het door Bridge gestart, waarbij het welkomstscherm wordt overgeslagen.

Werken met Device Central

Adobe Device Central gebruiken met Dreamweaver

Device Central biedt webontwerpers en -ontwikkelaars die Dreamweaver gebruiken, de mogelijkheid om vooraf te

controleren hoe Dreamweaver-bestanden eruit zullen zien op een groot aantal verschillende mobiele apparaten. Device

Central maakt gebruik van de renderfunctie voor kleine schermen van Opera (Small-Screen Rendering™) om ontwerpers

en ontwikkelaars een indruk te geven van hoe hun webpagina's er uitzien op een klein beeldscherm. Deze functie biedt

ontwerpers en ontwikkelaars ook de mogelijkheid om te testen of hun CSS goed werkt.

Een webontwikkelaar heeft bijvoorbeeld een klant die een website beschikbaar wil maken op mobiele telefoons. De

webontwikkelaar kan Dreamweaver gebruiken om voorlopige pagina's te maken en vervolgens Device Central gebruiken

om na te gaan hoe deze pagina's er op verschillende mobiele telefoons uitzien.

Tips voor het maken van Dreamweaver-webinhoud voor mobiele apparaten

In Device Central kunt u webpagina's die zijn gemaakt in Dreamweaver, voorvertonen met behulp van de renderfunctie

voor kleine schermen van Opera. Via deze voorvertoning krijgt u een goede indruk van de webpagina zoals deze eruit komt

te zien op een mobiel apparaat.

Opmerking: De renderfunctie voor kleine schermen van Opera kan al dan niet vooraf zijn geïnstalleerd op een geëmuleerd

apparaat.DeviceCentrallaateenvoudigwegzienhoedeinhouderuitzouzienalsderenderfunctievoorkleineschermenvan

Opera zou zijn geïnstalleerd.

DREAMWEAVER CS3

Handboek

369

Gebruik onderstaande tips om ervoor te zorgen dat webpagina's die in Dreamweaver zijn gemaakt, goed worden

weergegeven op mobiele apparaten.

• Als u het Adobe® Spry-framework gebruikt om inhoud te ontwikkelen, moet u de volgende regel HTML aan uw pagina's

toevoegen, zodat de pagina's CSS kunnen renderen en JavaScript™ goed kunnen uitvoeren in Device Central:

• De renderfunctie voor kleine schermen van Opera ondersteunt geen frames, pop-ups, onderstreping, doorhalingen,

strepen boven de tekst, knipperende tekst of tekst die over het scherm schuift. Deze ontwerpelementen kunt u daarom

beter niet gebruiken.

• Houd webpagina's voor mobiele apparaten eenvoudig. Gebruik ook vooral zo weinig mogelijk lettertypen, tekengrootten

en kleuren.

• Als u de afbeeldingen kleiner maakt en het aantal vereiste kleuren beperkt, is de kans groter dat de afbeeldingen goed

worden weergegeven op het beeldscherm. Gebruik CSS of HTML om de exacte hoogte en breedte op te geven voor elke

gebruikte afbeelding. Zorg voor alternatieve tekst voor alle afbeeldingen.

Opmerking: De Opera-softwarewebsite is een uitstekende informatiebron die u kunt raadplegen wanneer u webpagina's

optimaliseert voor mobiele apparaten.

370

Hoofdstuk 14: Sjablonen maken en

beheren

Een sjabloon is handig wanneer u veel op hetzelfde ontwerp gebaseerde pagina's wilt maken of wanneer u op een pagina

bepaalde gebieden wilt maken die gebruikers kunnen bewerken. Adobe® Dreamweaver® CS3 biedt veel gereedschappen

voor het maken en beheren van sjablonen.

Over sjablonen van Dreamweaver

Wat zijn Dreamweaver-sjablonen?

Een sjabloon is een speciaal type document waarmee u een “vaste” paginalay-out kunt ontwerpen. Vervolgens kunt u op

deze sjabloon gebaseerde documenten maken, die de paginalay-out ervan overnemen. Bij het ontwerpen van een sjabloon

geeft u aan welke inhoud gebruikers kunnen bewerken in een document dat is gebaseerd op de sjabloon. Sjablonen bieden

sjabloonauteurs de gelegenheid om te bepalen welke pagina-elementen sjabloongebruikers—zoals schrijvers, grafici of

andere webontwikkelaars—kunnen bewerken. Er zijn verschillende typen sjabloongebieden die de sjabloonauteur in een

document kan opnemen.

Opmerking: Sjablonen geven u de controle over een groot ontwerpgebied en bieden de mogelijkheid van hernieuwd gebruik

van complete lay-outs. Als u afzonderlijke ontwerpelementen opnieuw wilt gebruiken, bijvoorbeeld een logo of de

auteursrechtelijke informatie van een site, kunt u bibliotheekitems maken.

Door sjablonen te gebruiken kunt u meerdere pagina's tegelijk bijwerken. Een document dat is gemaakt op basis van een

sjabloon, blijft gekoppeld aan die sjabloon (tenzij u het document later loskoppelt). U kunt een sjabloon aanpassen en het

ontwerp in alle erop gebaseerde documenten onmiddellijk bijwerken.

Opmerking: Sjablonen in Dreamweaver verschillen in die zin van sjablonen in bepaalde andere software van de Adobe

Creative Suite dat paginagedeelten van Dreamweaver-sjablonen standaard vast (dat wil zeggen niet-bewerkbaar) zijn.

Zie ook

“Beheer van elementen en bibliotheken” op pagina 105

“Een Dreamweaver-sjabloon maken” op pagina 377

Typen sjabloongebieden

Als u een document opslaat als een sjabloon, zijn de meeste gebieden van een document vergrendeld. Als sjabloonauteur

bepaalt u welke gebieden van een op een sjabloon gebaseerd document bewerkbaar zijn door bewerkbare gebieden of

bewerkbare parameters in de sjabloon in te voegen.

Terwijl u de sjabloon maakt, kunt u zowel in bewerkbare als vergrendelde gebieden wijzigingen aanbrengen. In een op de

sjabloon gebaseerd document kan een sjabloongebruiker echter alleen wijzigingen aanbrengen in de bewerkbare gebieden;

de vergrendelde gebieden kunnen niet worden gewijzigd.

Er zijn vier typen sjabloongebieden:

Een bewerkbaar gebied Een niet-vergrendeld gebied in een op een sjabloon gebaseerd document—een gedeelte dat een

sjabloongebruiker kan bewerken. Een sjabloonauteur kan elk gebied van een sjabloon aanmerken als bewerkbaar. Een

sjabloon is pas doelmatig als het ten minste één bewerkbaar gebied bevat; Als dit niet het geval is, kunnen pagina's die op

de sjabloon zijn gebaseerd, niet worden bewerkt.

Een herhalingsgebied Een gedeelte van de documentlay-out dat dusdanig is ingesteld dat de sjabloongebruiker desgewenst

kopieën van het herhalingsgebied kan toevoegen aan of verwijderen uit een document dat op de sjabloon is gebaseerd. Zo

DREAMWEAVER CS3

Handboek

371

kunt u instellen dat een tabelrij moet worden herhaald. Herhalingsgedeelten zijn bewerkbaar zodat de sjabloongebruiker

de inhoud in het herhalingselement wel kan bewerken, maar dat het ontwerp zelf onder de controle van de sjabloonauteur

blijft.

Er zijn twee typen herhalingsgebieden die u in een sjabloon kunt invoegen: een herhalingsgebied en een herhalingstabel.

Een optioneel gebied Een gedeelte van een sjabloon dat inhoud—zoals tekst of een afbeelding—bevat die al dan niet in een

document wordt weergegeven. Op de op een sjabloon gebaseerde pagina bepaalt meestal de sjabloongebruiker of de

inhoud wordt weergegeven.

Met een kenmerk voor bewerken in de tag Ontgrendelt u een tagkenmerk in een sjabloon, waardoor het kenmerk kan

worden bewerkt in een op een sjabloon gebaseerde pagina. Zo kunt u “vergrendelen” welke afbeelding wordt weergegeven

in het document, waarbij de sjabloongebruiker nog wel de uitlijning kan instellen op links, rechts of gecentreerd.

Zie ook

“Inhoud in een op een sjabloon gebaseerd document bewerken” op pagina 395

“Bewerkbare gebieden maken” op pagina 380

“Herhalingsgebieden maken” op pagina 381

“Optionele gebieden gebruiken” op pagina 383

“Bewerkbare tagkenmerken definiëren” op pagina 386

Koppelingen in sjablonen

Alsueensjabloonbestandmaaktdooreenbestaandepaginaopteslaanalseensjabloon,wordendenieuwesjablooninde

map Sjablonen en eventuele koppelingen in het bestand bijgewerkt, zodat hun documentafhankelijke relatieve paden

correct zijn. Later, wanneer u een document maakt dat op deze sjabloon is gebaseerd, en dit opslaat, worden alle

documentafhankelijke relatieve koppelingen opnieuw bijgewerkt om deze naar de juiste bestanden te laten verwijzen.

Als u een nieuwe documentafhankelijke relatieve koppeling toevoegt aan een sjabloonbestand, bestaat het gevaar dat u een

onjuiste padnaam opgeeft als u in het tekstvak voor de koppeling in de eigenschappencontrole het pad typt. Het correcte

pad in een sjabloonbestand is het pad van de map Sjablonen naar het gekoppelde document, niet het pad van de map van

het op een sjabloon gebaseerde document naar het gekoppelde document. Zorg ervoor dat de correcte paden voor

koppelingen bestaan door bij het maken van koppelingen in sjablonen het pictogram met de map of het pictogram Wijzen

naar bestand in de eigenschappencontrole te gebruiken.

Voorkeuren voor het bijwerken van koppelingen in Dreamweaver 8.01

Vóór Dreamweaver 8 (dat wil zeggen Dreamweaver MX 2004 en eerder), werkte Dreamweaver geen koppelingen bij naar

bestanden die zich in de map Sjablonen bevonden. (Als u bijvoorbeeld een bestand met de naam main.css in de map

Sjablonen had en href=“main.css” had geschreven als de koppeling in het sjabloonbestand, zou Dreamweaver deze

koppeling niet bijwerken bij het maken van een op een sjabloon gebaseerde pagina.)

Bepaalde gebruikers haalden hun voordeel uit de manier waarop Dreamweaver koppelingen naar bestanden in de map

Sjablonen behandelde en gebruikten deze inconsistentie voor het maken van koppelingen die ze doelbewust niet wilden

bijwerken bij het maken van op een sjabloon gebaseerde pagina's. Als u bijvoorbeeld nog steeds Dreamweaver MX 2004

gebruikt en een site met verschillende mappen voor verschillende toepassingen hebt—Dreamweaver, Flash en Photoshop.

Elke productmap bevat een op een sjabloon gebaseerde pagina index.html en een unieke versie van het bestand main.css

op hetzelfde niveau. Als het sjabloonbestand de documentafhankelijke relatieve koppeling href=“main.css” (een koppeling

naar een versie van het bestand main.css in de map Sjablonen) bevat en als u wilt dat uw op een sjabloon gebaseerde pagina's

index.html deze koppeling ook geschreven bevatten, kunt u de op een sjabloon gebaseerde pagina's index.html maken

zonder dat u er zich zorgen over hoeft te maken of Dreamweaver deze specifieke koppelingen bijwerkt. Als Dreamweaver

MX 2004 de op een sjabloon gebaseerde pagina's index.html maakt, verwijzen de (niet-bijgewerkte) koppelingen

href=“main.css” naar de bestanden main.css die zich in de mappen voor Dreamweaver, Flash en Photoshop bevinden en

niet naar het bestand main.css dat zich in de map Sjablonen bevindt.

DREAMWEAVER CS3

Handboek

372

In Dreamweaver 8 is dit gedrag echter dusdanig gewijzigd dat alle documentafhankelijke relatieve koppelingen worden

bijgewerkt wanneer u op een sjabloon gebaseerde pagina's maakt, ongeacht de schijnbare locatie van de gekoppelde

bestanden. Bij dit scenario controleert Dreamweaver de koppeling in het sjabloonbestand (href=“main.css”) en maakt een

koppelingindeopeensjabloongebaseerdepagina,dierelatief is aan de locatie van het nieuwe document.Alsubijvoorbeeld

een op een sjabloon gebaseerd document maakt dat één niveau hoger ligt dan de map Sjablonen, zou Dreamweaver de

koppeling in het nieuwe document schrijven als href=“Sjablonen/main.css”. Deze manier van bijwerken in Dreamweaver 8

verbreekt koppelingen op pagina's die waren gemaakt door ontwerpers die de eerdere gang van zaken in Dreamweaver

gebruikten, waarbij koppelingen naar bestanden in de map Sjablonen niet werden bijgewerkt.

In Dreamweaver 8.01 is een voorkeur toegevoegd waarmee u het gedrag van bijwerken van relatieve koppelingen in en uit

kunt schakelen. (Deze speciale voorkeur geldt alleen voor koppelingen naar bestanden in de map Sjablonen, niet voor

koppelingen in het algemeen.) Het standaardgedrag is dat deze koppelingen niet worden bijgewerkt (zoals in Dreamweaver

MX 2004 en eerder), maar als u wilt dat Dreamweaver dit soort koppelingen bij het maken van op een sjabloon gebaseerde

pagina's bijwerkt, kunt u de selectie van de voorkeur uitschakelen. (Dit zou u bijvoorbeeld alleen doen als u een pagina met

trapsgewijs opmaakprofiel (CSS), main.css, in uw map Sjablonen hebt en u wilt dat een op een sjabloon gebaseerd

document de koppeling href=“Sjablonen/main.css” bevat. Deze handelwijze wordt echter niet aangeraden, aangezien zich

alleen sjabloonbestanden van Dreamweaver (DWT) in de map Sjablonen horen te bevinden.)

Als u Dreamweaver documentafhankelijke relatieve paden naar niet-sjabloonbestanden in de map Sjablonen wilt laten

bijwerken, selecteert u de categorie Sjablonen op het tabblad Geavanceerd van het dialoogvenster Sitedefinitie en schakelt

u de optie Documentafhankelijke relatieve paden niet herschrijven uit.

Zie de Dreamweaver TechNote op de Adobe-website op www.adobe.com/go/f55d8739_nl voor meer informatie.

Zie ook

“Documenten koppelen met het pictogram Wijs bestand aan” op pagina 271

“Documentafhankelijke relatieve paden” op pagina 268

Serverscripts in sjablonen en op een sjabloon gebaseerde documenten

Bepaalde serverscripts worden ingevoegd in het allereerste begin of uiterste einde van het document (vóór de tag <html>

of na de tag </html>). Dergelijke scripts moeten op een speciale manier worden behandeld in sjablonen en op een sjabloon

gebaseerde documenten. Normaal gesproken geldt dat als u wijzigingen aanbrengt aan scriptcode vóór de tag

<html> of na

de tag

</html> in een sjabloon, de wijzigingen niet worden gekopieerd naar documenten die op die sjabloon zijn gebaseerd.

Hierdoor ontstaan serverfouten als andere serverscripts, binnen de hoofdtekst van de sjabloon, afhankelijk zijn van de

scripts die niet worden gekopieerd. U ontvangt een waarschuwing als u scripts vóór de tag

<html> of na de tag </html> in

een sjabloon wijzigt.

Als u dit probleem wilt vermijden, kunt u de volgende code invoegen in het gedeelte

head van de sjabloon:

Met deze code in een sjabloon worden wijzigingen aan scripts vóór de tag <html> of na de tag </html> gekopieerd naar

documenten die op deze sjabloon zijn gebaseerd. U kunt deze scripts in documenten die op de sjabloon zijn gebaseerd, dan

echter niet meer bewerken. U hebt dan ook de keuze tussen deze scripts in de sjabloon bewerken en deze scripts bewerken

in documenten die op de sjabloon zijn gebaseerd; beide mogelijkheden hebben is niet mogelijk.

Sjabloonparameters

Sjabloonparameters geven waarden voor het bepalen van de inhoud in documenten die zijn gebaseerd op een sjabloon.

Gebruik sjabloonparameters voor optionele gebieden of bewerkbare tagkenmerken, of voor het instellen van waarden die

u wilt doorgeven aan een bijgevoegd document. Voor elke parameter selecteert u een naam, een gegevenstype en een

standaardwaarde. Elke parameter moet een unieke naam hebben die hoofdlettergevoelig is. Ze moeten een van de vijf

toegestane gegevenstypen zijn: text (tekst), boolean (Booleaans), color (kleur), URL of number (getal).

DREAMWEAVER CS3

Handboek

373

Sjabloonparameters worden aan het document doorgegeven als objectparameters. In de meeste gevallen kan een

sjabloongebruiker de standaardwaarde van de parameter bewerken om datgene wat in een op een sjabloon gebaseerd

document wordt weergegeven, aan te passen. In andere gevallen bepaalt sjabloonauteur wat er in het document wordt

weergegeven, op basis van de waarde van een sjabloonexpressie.

Opmerking: Een handig, hieraan verwant artikel is online beschikbaar op

http://www.adobe.com/devnet/dreamweaver/articles/template_parameters.html.

Zie ook

“Optionele gebieden gebruiken” op pagina 383

“Bewerkbare tagkenmerken definiëren” op pagina 386

Sjabloonexpressies

Sjabloonexpressies zijn instructies die een waarde berekenen of beoordelen.

U kunt een expressie gebruiken om een waarde op te slaan en deze in een document weer te geven. Een expressie kan

bijvoorbeeld gewoon de waarde van een parameter zijn, zoals

@@(Param)@@, maar kan ook complex genoeg zijn om waarden

te berekenen, die de achtergrondkleur in een tabelrij wisselen, zoals

@@((_index & 1) ? rood : blauw)@@..

Ook kunt u expressies definiëren voor enkelvoudige en meervoudige if-voorwaarden. Als een expressie wordt gebruikt in

een voorwaardelijke instructie, beoordeelt Dreamweaver deze als

true (waar) of false (onwaar). Als de voorwaarde waar

is, wordt het optionele gebied in het op een sjabloon gebaseerde document weergegeven; als deze onwaar is, wordt het niet

weergegeven.

U kunt expressies definiëren in de codeweergave of in het dialoogvenster Optioneel gebied wanneer u een optioneel gebied

invoegt.

In de codeweergave kunt u op twee manieren sjabloonexpressies definiëren: gebruik de

<!-- TemplateExpr expr="uw

expressie"-->

of gebruik @@(uw expressie)@@. Als u de expressie invoegt in de sjablooncode, wordt in de

ontwerpweergave een markering voor de expressie weergegeven. Als u een sjabloon toepast, beoordeelt Dreamweaver de

expressie en geeft de waarde in het op een sjabloon gebaseerde document weer.

Zie ook

“Taal voor sjabloonexpressies” op pagina 373

“Meerdere if-voorwaarden in sjablooncode” op pagina 374

Taal voor sjabloonexpressies

De taal voor sjabloonexpressies bestaat uit een kleine subset van JavaScript en gebruikt de JavaScript-syntaxis en

voorrangsregels. Gebruik JavaScript-operatoren om een expressie als de volgende te schrijven:

@@(firstName+lastName)@@

De volgende functies en operatoren worden ondersteund:

• numerieke constanten, tekenreeksconstanten (uitsluitend syntaxis met dubbele aanhalingstekens), Booleaanse

constanten (

true (waar) of false (onwaar))

• variabele verwijzing (zie de lijst van gedefinieerde variabelen verderop in dit gedeelte)

• veldverwijzing (de “punt”-operator)

• monadische operatoren: +, -, ~, !

• binaire operatoren: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>

• voorwaardelijke operator: ?:

• haakjes: ()

DREAMWEAVER CS3

Handboek

374

De volgende gegevenstypes worden gebruikt: Booleaans, IEEE 64-bpc drijvende komma, tekenreeks en object.

Dreamweaver-sjablonen ondersteunen niet het gebruik van de typen “null” of “undefined” van JavaScript. Ook zijn geen

schaalbare typen toegestaan die impliciet moeten worden omgezet naar een object; de expressie

"abc".length zou dan ook

tot een fout leiden in plaats van de waarde 3 als resultaat.

De enige beschikbare objecten zijn die die worden gedefinieerd door het expressieobjectmodel. De volgende variabelen

zijn gedefinieerd:

_document Bevat de sjabloongegevens op documentniveau met een veld voor elke parameter in de sjabloon.

_repeat Alleen gedefinieerd voor expressies die voorkomen binnen een herhalingsgebied. Biedt ingebouwde informatie

over het gebied:

_index De numerieke index (vanaf 0) van de huidige vermelding

_numRows Het totaal aantal vermeldingen in dit herhalingsgebied

_isFirst True (waar) als de huidige vermelding de eerste vermelding is in het herhalingsgebied ervan

_isLast True (waar) als de huidige vermelding de laatste vermelding is in het herhalingsgebied ervan

_prevRecord Het object _repeat voor de vorige vermelding. Deze eigenschap kan niet worden gebruikt voor de eerste

vermelding in het gebied.

_nextRecord Het object _repeat voor de volgende vermelding. Deze eigenschap kan niet worden gebruikt voor de laatste

vermelding in het gebied.

_parent In een genest herhaald gebied krijgt u hiermee het object _repeat voor het omgevende (buitenste) herhaalde

gebied. Toegang tot deze eigenschap buiten een genest herhaald gebied leidt tot een foutsituatie.

Tijdens de beoordeling van een expressie zijn alle velden van het object _document en het object _repeat impliciet

beschikbaar. Zo kunt u

title opgeven in plaats van _document.title voor toegang tot de titelparameter van het

document.

In gevallen waarin sprake is van een conflict tussen velden, krijgen velden van het object _repeat voorrang op velden van

het object _document. Daarom zou u bij de verwijzing naar documentparameters die worden verborgen door parameters

van een herhaald gebied, alleen een expliciete verwijzing naar _document of _repeat moeten gebruiken wanneer

_document zich mogelijk binnen een herhalingsgebied bevindt.

Als geneste herhaalde gebieden worden gebruikt, zijn alleen velden van de binnenste herhaalde gebieden impliciet

beschikbaar. Naar buitenste gebieden moet expliciet worden verwezen door middel van _parent.

Meerdere if-voorwaarden in sjablooncode

U kunt expressies definiëren voor enkelvoudige en meervoudige if-voorwaarden. Het volgende voorbeeld toont de manier

waarop u een parameter met de naam “Dept” definieert, een aanvankelijke waarde instelt en een meervoudige if-

voorwaarde definieert die bepaalt welk logo wordt weergegeven.

Hieronder ziet u een voorbeeld van de code die u zou kunnen invoeren in het gedeelte

head van de sjabloon:

De volgende instructie voor een voorwaarde controleert de waarde die is toegewezen aan de parameter Dept. Als de

voorwaarde true (waar) is (dat wil zeggen wanneer eraan wordt voldaan), wordt de juiste afbeelding weergegeven.

<img src=".../sales.gif">

<img src=".../support.gif">

<img src=".../hr.gif">

<img src=".../spacer.gif">

Als u een op een sjabloon gebaseerd document maakt, worden de sjabloonparameters er automatisch aan doorgegeven. De

sjabloongebruiker bepaalt welke afbeelding moet worden weergegeven.

DREAMWEAVER CS3

Handboek

375

Zie ook

“Sjablooneigenschappen wijzigen” op pagina 396

Sjablonen en op een sjabloon gebaseerde documenten

herkennen

Sjablonen herkennen in de ontwerpweergave

In de ontwerpweergave worden bewerkbare gebieden weergegeven in het documentvenster met een rechthoekige omtrek

in een vooraf ingestelde markeringskleur. In de linkerbovenhoek van elk gebied verschijnt een kleine tab met daarin de

naam van het gebied.

U kunt een sjabloonbestand herkennen door naar de titelbalk in het documentvenster te kijken. De titelbalk van een

sjabloonbestand bevat het woord <<Sjabloon>> in de titelbalk, terwijl de extensie van de bestandsnaam van het bestand

.dwt is.

Sjablonen herkennen in de codeweergave

In de codeweergave worden gebieden met bewerkbare inhoud in HTML gemarkeerd met de volgende commentaren:

Door middel van de voorkeuren voor codekleuren kunt u uw eigen kleurschema instellen, zodat u sjabloongebieden

eenvoudig kunt onderscheiden wanneer u een document in de codeweergave bekijkt.

Alles tussen deze commentaren is bewerkbaar in documenten die op de sjabloon zijn gebaseerd. De HTML-broncode van

een bewerkbaar gebied zou er als volgt kunnen uitzien:

DREAMWEAVER CS3

Handboek

376

<td><font color="#FFFFFF">Address</font></td>

<td><font color="#FFFFFF">Telephone Number</font></td>

</tr>

<tr>

<td>Enter name</td>

<td>Enter Address</td>

<td>Enter Telephone</td>

</tr>

</table>

Opmerking: Als u sjablooncode bewerkt in de codeweergave, dient u ervoor te zorgen dat u geen van de aan de sjabloon

gerelateerde tags voor de commentaar wijzigt, waarop Dreamweaver vertrouwt.

Zie ook

“De voorkeuren voor codekleuren wijzigen voor een sjabloon” op pagina 399

Op een sjabloon gebaseerde documenten herkennen in de ontwerpweergave

In de ontwerpweergave worden bij een document dat is gebaseerd op een sjabloon (een op een sjabloon gebaseerd

document), bewerkbare gebieden in het documentvenster weergegeven met een rechthoekige omtrek in een vooraf

ingestelde markeringskleur. In de linkerbovenhoek van elk gebied verschijnt een kleine tab met daarin de naam van het

gebied.

Naast de omtrekken van bewerkbare gebieden wordt de gehele pagina omgeven door een omtrek met een andere kleur; een

tab in de rechterbovenhoek vermeldt de naam van de sjabloon waarop het document is gebaseerd. Deze gemarkeerde

rechthoek herinnert u eraan dat het document is gebaseerd op een sjabloon en dat u de inhoud buiten de bewerkbare

gebieden niet kunt wijzigen.

Zie ook

“Voorkeuren voor de markering van sjabloongebieden instellen” op pagina 399

DREAMWEAVER CS3

Handboek

377

Op een sjabloon gebaseerde documenten herkennen in de codeweergave

In de codeweergave worden bewerkbare gebieden van een document dat is ontleend aan een sjabloon, weergegeven in een

andere kleur dan code in de niet-bewerkbare gebieden. U kunt alleen wijzigingen aanbrengen aan code in de bewerkbare

gebieden of bewerkbare parameters, maar u kunt niet typen in vergrendelde gebieden.

Bewerkbare inhoud wordt in HTML aangeduid met de volgende Dreamweaver-commentaren:

Alles tussen deze commentaren is bewerkbaar in een op een sjabloon gebaseerd document. De HTML-broncode van een

bewerkbaar gebied zou er als volgt kunnen uitzien:

<td><font color="#FFFFFF">Address</font></td>

<td><font color="#FFFFFF">Telephone Number</font></td>

</tr>

<tr>

<td>Enter name</td>

<td>Enter Address</td>

<td>Enter Telephone</td>

</tr>

</table>

</body>

De standaardkleur voor niet-bewerkbare tekst is grijs. U kunt een andere kleur voor de bewerkbare en niet-bewerkbare

gebieden selecteren in het dialoogvenster Voorkeuren.

Zie ook

“De voorkeuren voor codekleuren wijzigen voor een sjabloon” op pagina 399

Een Dreamweaver-sjabloon maken

Over het maken van Dreamweaver-sjablonen

U kunt een sjabloonformulier maken op basis van een bestaand document (zoals een HTLM-, een Macromedia

ColdFusion- of een Microsoft Active Server Pages-document); u kunt er ook een maken op basis van een nieuw document.

Nadat u een sjabloon gemaakt heeft, kunt u hem in sjabloongebieden invoegen en sjabloonvoorkeuren voor codekleuren

en voor markeringskleuren voor sjabloongebieden instellen.

U kunt aanvullende informatie over een sjabloon (zoals degene die het aangemaakt heeft, het tijdstip van de laatste

wijziging of de reden van bepaalde beslissingen over de indeling) in een ontwerpnotitiebestand voor de sjabloon opslaan.

Op een sjabloon gebaseerde documenten nemen de ontwerpnotities van de sjabloon over.

Opmerking: Sjablonen in Adobe Dreamweaver verschillen in die zin van sjablonen in bepaalde andere producten van de

Adobe Creative Suite dat paginagedeelten van Dreamweaversjablonen standaard vast (dat wil zeggen niet-bewerkbaar) zijn.

Zie www.adobe.com/go/vid0157_nl voor een zelfstudie over sjablonen maken.

Zie www.adobe.com/go/vid0158_nl voor een zelfstudie over gebruik van sjablonen.

DREAMWEAVER CS3

Handboek

378

Zie ook

“Typen sjabloongebieden” op pagina 370

“Voorkeuren voor het schrijven van sjablonen instellen” op pagina 399

“Ontwerpnotities koppelen aan bestanden” op pagina 99

Een sjabloon maken op basis van een bestaand document

U kunt een sjabloon maken op basis van een bestaand document

1 Open het document dat u als sjabloon wilt opslaan.

2 Voer een van de volgende handelingen uit:

• Selecteer Bestand > Opslaan als sjabloon.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Sjablonen en selecteer het pictogram Sjablonen

maken uit het pop-upmenu.

Opmerking: U zult een waarschuwing ontvangen waarin wordt gemeld dat het document dat u wilt opslaan, geen bewerkbare

gebieden bevat, tenzij u vooraf Deze dialoog niet meer weergeven hebt geselecteerd. Klik op OK om het document als sjabloon

te bewaren of klik op Annuleren om dit dialoogvenster af te sluiten zonder een sjabloon te maken.

3 Selecteer een site in het pop-upmenu Site om uw sjabloon in op te slaan en voer een unieke naam voor het sjabloon in

het vakje Opslaan als in.

4 Klik op Opslaan. Dreamweaver bewaart het sjabloonbestand in de map Sjablonen in de lokale hoofdmap van de site met

als bestandsextensie .dwt. Als de map Sjablonen nog niet bestaat in de site, dan maakt Dreamweaver die automatisch

wanneer u een nieuwe sjabloon bewaart.

Opmerking: Verplaats uw sjablonen niet buiten de map Sjablonen en zet geen niet-sjabloonbestanden in de map Sjablonen.

Verplaats de map Sjablonen ook niet buiten uw lokale hoofdmap. Hierdoor zouden fouten in paden in de sjablonen ontstaan.

Zie ook

“Een lege sjabloon maken” op pagina 67

“Documenten maken en openen” op pagina 65

Het paneel Middelen gebruiken voor het maken van een nieuwe sjabloon

1 Selecteer in het paneel Middelen (Venster > Middelen) de categorie Sjablonen aan de linkerzijde van het paneel .

2 Klik op de knop Nieuw sjabloon onder aan het middelenpaneel.

Er is een nieuwe naamloze sjabloon toegevoegd aan de lijst met sjablonen in het middelenpaneel.

3 Terwijl de sjabloon nog steeds is geselecteerd, geeft u een naam ervoor op en drukt u op Enter (Windows) of Return

(Macintosh).

Dreamweaver maakt een lege sjabloon in het middelenpaneel en in de map Sjablonen.

Over het maken van sjablonen voor Contribute-sites

Met Dreamweaver kunt u sjablonen maken, waardoor gebruikers van Adobe® Contribute® de mogelijkheid hebben om

nieuwe pagina's te maken, waardoor uw site consistent blijft in stijl en sfeer, en waardoor u de indeling van meerdere

pagina's in een keer kunt bijwerken.

Wanneerueensjabloonmaaktennaardeserveruploadt,komthetbeschikbaarvoorallegebruikersvanContributedieeen

verbinding maken met uw site, tenzij u beperkingen op sjabloongebruik heeft ingesteld voor bepaalde Contribute-rollen.

Als u beperkingen op sjabloongebruik heeft ingesteld, moet u mogelijk elke nieuwe sjabloon toevoegen aan de sjablonenlijst

die een gebruiker van Contribute te zien krijgt (zie Contribute beheren).

DREAMWEAVER CS3

Handboek

379

Opmerking: Zorg ervoor dat de hoofdmap van de site zoals gedefinieerd in elke sitedefinitie van de gebruiker van Contribute

dezelfde is als de hoofdmap van de site die in uw sitedefinitie gedefinieerd is in Dreamweaver. Als een hoofdmap van een

gebruikerssite niet overeenkomt met de uwe, dan zal die gebruiker geen sjablonen kunnen gebruiken.

Naast Dreamweaversjablonen kunt u met gebruik van de beheersfuncties van Contribute ook niet-Dreamweaversjablonen

maken . Een niet-Dreamweaversjabloon is een bestaande pagina die gebruikers van Contribute kunnen gebruiken om

nieuwe pagina's te maken; hij komt overeen met een Dreamweaversjabloon, behalve dat pagina's die hierop gebaseerd zijn

niet bijgewerkt worden als u de sjabloon wijzigt. Niet-Dreamweaversjablonen kunnen ook geen

Dreamweaversjabloonelementen bevatten, zoals bewerkbare, vergrendelde, zich herhalende en optionele gebieden.

AlseengebruikervanContributeeennieuwdocumentmaaktbinneneensitedieDreamweaversjablonenbevat,dangeeft

Contribute de beschikbare sjablonen (zowel Dreamweaver-, als niet-Dreamweaversjablonen) weer in het dialoogvenster

Nieuwe pagina.

Om pagina's die gebruik maken van andere coderingen dan Latin-1 in uw site op te nemen kan het gebeuren dat u sjablonen

moet maken (Dreamweaversjablonen of niet-Dreamweaversjablonen). Gebruikers van Contribute kunnen pagina's maken

die gebruik maken van om het even welke codering, maar wanneer een gebruiker van Contribute een nieuwe lege pagina

maakt, maakt die gebruik van de Latin-1 codering. Om een pagina te maken die een andere codering gebruikt, kan een

gebruiker van Contribute een kopie van een bestaande pagina die een andere codering gebruikt maken of hij kan gebruik

maken van een sjabloon die een andere codering gebruikt. Als er echter geen pagina's of sjablonen in de site zitten die

gebruik maken van andere coderingen, dan moet u eerst een pagina of sjabloon in Dreamweaver maken die van die andere

codering gebruik maken.

Een sjabloon maken voor een Contribute-site

1 Selecteer Site > Sites beheren.

2 Selecteer een site en klik op Bewerken.

3 Klik in het dialoogvenster Sitedefinitie op het tabblad Geavanceerd.

4 Selecteer de categorie Contribute in de lijst met categorieën aan de linkerkant.

5 U moet de Contribute-compatibiliteit inschakelen al u dit nog niet gedaan heeft.

Selecteer Contribute-compatibiliteit inschakelen en voer dan de URL van een hoofdmap.

6 Klik op De site beheren in Contribute.

DREAMWEAVER CS3

Handboek

380

7 Typ desgevraagd het beheerderswachtwoord en klik op OK.

8 Selecteer een rol in de categorie Gebruikers en rollen, en klik op de knop Rolinstellingen bewerken.

9 Selecteer de categorie Nieuwe pagina's en voeg dan de bestaande pagina's toe aan de lijst onder Maak een nieuwe pagina

door een pagina uit deze lijst te kopiëren.

Zie Contribute beheren voor meer informatie.

10 Klik twee maal op OK om de dialoogvensters te sluiten.

Zie ook

“Een site voorbereiden voor gebruik met Contribute” op pagina 56

Bewerkbare gebieden maken

Een bewerkbaar gebied invoegen

Bewerkbare sjabloongebieden bepalen welke gebieden van een op een sjabloon gebaseerde pagina een gebruiker kan

bewerken. Voordat u een bewerkbaar gebied invoegt, slaat u het document waarin u aan het werk bent, op als een sjabloon.

Opmerking: Als u een bewerkbaar gebied invoegt in a document in plaats van een sjabloonbestand, wordt de waarschuwing

weergegeven dat het document automatisch als een sjabloon zal worden opgeslagen.

U kunt een bewerkbaar gebied op een willekeurige plaats op uw pagina plaatsen, maar denk aan de volgende punten als u

een tabel of een absoluut gepositioneerd element (AP-element) bewerkbaar maakt:

• U kunt een gehele tabel of een afzonderlijke tabelcel as bewerkbaar aanduiden, maar u kunt niet meerdere tabelcellen als

één bewerkbaar gebied aanduiden. Als een tag <td> wordt geselecteerd, omvat het bewerkbare gebied tevens het gebied

om de cel. Als dit niet het geval is, heeft het bewerkbare gebied alleen betrekking op de inhoud binnen de cel.

• AP-elementen en de inhoud van AP-elementen vormen afzonderlijke elementen. Door een AP-element bewerkbaar te

maken, kunt u zowel de positie van het AP-element als de inhoud ervan wijzigen, maar door de inhoud van een AP-

element bewerkbaar te maken, kunt u alleen de inhoud van het AP-element wijzigen en niet de positie ervan.

1 Voer een van de volgende handelingen uit in het documentvenster om het gebied te selecteren:

• Selecteer de tekst of inhoud die u wilt instellen als een bewerkbaar gebied.

• Plaats de invoegpositie op de plaats waar u een bewerkbaar gebied wilt invoegen.

2 Voer een van de volgende handelingen uit om een bewerkbaar gebied in te voegen:

• Selecteer Invoegen > Sjabloonobjecten > Bewerkbaar gebied.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens

Sjablonen > Nieuw bewerkbaar gebied.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Sjablonen en selecteer het pictogram Bewerkbaar

gebied uit het pop-upmenu.

3 Geef in het vakje Naam een unieke naam voor het gebied op. (U kunt niet dezelfde naam voor meer dan één bewerkbaar

gebied in een bepaalde sjabloon gebruiken.)

Opmerking: Gebruik in het vakje Naam geen speciale lettertekens.

4 Klik op OK. Het bewerkbare gebied wordt omgeven door een gemarkeerde rechthoekige omtrek in de sjabloon, waarbij

de markeerkleur wordt gebruikt die is ingesteld in uw voorkeuren. Een tabblad in de linkerbovenhoek van het gebied toont

de naam van het gebied. Als u een leeg bewerkbaar gebied invoegt in het document, wordt de naam van het gebied ook

binnen het gebied weergegeven.

DREAMWEAVER CS3

Handboek

381

Zie ook

“Een Dreamweaver-sjabloon maken” op pagina 377

“Voorkeuren voor de markering van sjabloongebieden instellen” op pagina 399

Bewerkbare gebieden selecteren

U kunt sjabloongebieden in zowel het sjabloondocument als op een sjabloon gebaseerde documenten gemakkelijk

herkennen en selecteren.

Een bewerkbaar gebied selecteren in het documentvenster

❖

Klik op de tab in de linkerbovenhoek van het bewerkbare gebied.

Een bewerkbaar gebied zoeken en dit selecteren in het document

❖

Selecteer Wijzigen > Sjablonen en selecteer vervolgens de naam van het gebied in de lijst onder aan dat vervolgmenu.

Opmerking: Bewerkbare gebieden die binnen een herhaald gebied vallen, worden niet weergegeven in het menu. U dient deze

gebieden te zoeken door in het documentvenster op randen met tabs te zoeken.

Het bewerkbare gebied wordt geselecteerd in het document.

Een bewerkbaar gebied verwijderen

Als u een gebied van uw sjabloonbestand hebt aangeduid als bewerkbaar en als u dit opnieuw wilt vergrendelen (dat wil

zeggen het niet-bewerkbaar maken in documenten die op een sjabloon zijn gebaseerd), gebruikt u de opdracht

Sjabloonopmaak verwijderen.

1 Klik op de tab in de linkerbovenhoek van het bewerkbare gebied om het selecteren.

2 Ga op een van de volgende manieren te werk:

• Selecteer Wijzigen > Sjablonen > Sjabloonopmaak verwijderen.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens

Sjablonen > Sjabloonopmaak verwijderen.

Het gebied is niet meer bewerkbaar.

De naam van een bewerkbaar gebied wijzigen

Als u een bewerkbaar gebied hebt ingevoegd, kunt u later de naam ervan wijzigen.

1 Klik op de tab in de linkerbovenhoek van het bewerkbare gebied om het selecteren.

2 Geef in de eigenschappencontrole (Venster > Eigenschappen) een nieuwe naam op.

3 Druk op Enter (Windows) of Return (Macintosh).

Herhalingsgebieden maken

Over herhalingsgebieden in een sjabloon

Een herhalingsgebied is een gedeelte van een sjabloon dat vele malen in een op een sjabloon gebaseerde pagina kan worden

gedupliceerd. Doorgaans worden herhalingsgebieden gebruikt bij tabellen, maar u kunt ook een herhalingsgebied

definiëren voor andere pagina-elementen.

Met herhalingsgebieden kunt u uw paginalay-out bepalen door bepaalde items te herhalen, zoals de lay-out voor een artikel

in een catalogus en de omschrijving ervan, of een rij voor gegevens zoals een lijst van artikelen.

Er zijn twee sjabloonobjecten voor herhalingsgebieden die u kunt gebruiken: een herhalingsgebied en een herhalingstabel.

DREAMWEAVER CS3

Handboek

382

Zie ook

“Typen sjabloongebieden” op pagina 370

Een herhalingsgebied in een sjabloon maken

Met herhalingsgebieden kunnen sjabloongebruikers zo vaak ze maar willen een bepaald gebied in een sjabloon dupliceren.

Een herhalingsgebied is niet noodzakelijkerwijs een bewerkbaar gebied.

Om de inhoud in een herhalingsgebied bewerkbaar te maken (zodat een gebruiker bijvoorbeeld tekst in een tabelcel in een

op een sjabloon gebaseerd document kan invoeren), moet u een bewerkbaar gebied invoegen in het herhalingsgebied.

1 Voer een van de volgende handelingen uit in het documentvenster:

• Selecteer de tekst of inhoud die u wilt instellen als een herhalingsgebied.

• Plaats de invoegpositie op de plaats waar u een herhalingsgebied wilt invoegen.

2 Voer een van de volgende handelingen uit:

• Selecteer Invoegen > Sjabloonobjecten > Herhalingsgebied.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens

Sjablonen > Nieuw herhalingsgebied.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Sjablonen en selecteer het pictogram

Herhalingsgebied uit het pop-upmenu.

3 Geef in het vakje Naam een unieke naam voor het sjabloongebied op. (U kunt niet dezelfde naam voor meer dan één

herhalingsgebied in een sjabloon gebruiken.)

Opmerking: Als u een gebied een naam geeft, mag u geen speciale lettertekens gebruiken.

4 Klik op OK.

Zie ook

“Een bewerkbaar gebied invoegen” op pagina 380

Een herhalingstabel invoegen

U kunt een herhalingstabel gebruiken om een bewerkbaar gebied (in tabelindeling) met zich herhalende rijen te maken. U

kunt tabelkenmerken definiëren en bepalen welke tabelcellen bewerkbaar zijn.

1 Plaats de invoegpositie in het documentvenster op de plaats waar u de herhalingstabel wilt invoegen.

2 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Sjabloonobjecten > Herhalingstabel.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Sjablonen en selecteer het pictogram Herhalingstabel

uit het pop-upmenu.

3 Geef de volgende opties op en klik op OK.

Rijen Hiermee bepaalt u het aantal rijen in de tabel.

Kolommen Hiermee bepaalt u het aantal kolommen in de tabel.

Celopvulling Hiermee bepaalt u het aantal pixels tussen de inhoud van een cel en de grenzen van de cel.

Celafstand Hiermee wordt het aantal pixels tussen aangrenzende tabelcellen vastgelegd.

Als u niet expliciet waarden voor celopvulling en celafstand toewijst, wordt de tabel in de meeste browsers weergegeven alsof

de celopvulling was ingesteld op 1 en celafstand op 2. Als u wilt dat de tabel in een browser zonder opvulling of afstand

wordt weergegeven, stelt u Celopvulling en Celafstand in op 0.

Breedte Hiermee bepaalt u de tabelbreedte in pixels of als percentage van de breedte van het browservenster.

Kader: Hiermee wordt de breedte van de tabelranden in pixels vastgelegd.

DREAMWEAVER CS3

Handboek

383

Als u niet expliciet een waarde voor de rand toewijst, wordt de tabel in de meeste browsers weergegeven alsof de rand was

ingesteld op 1. Als u wilt dat de tabel in browsers zonder randen wordt weergegeven, stelt u Rand in op 0. Als u de cel- en

tabelgrenzen wilt weergeven wanneer de randdikte is ingesteld op 0, selecteert u Weergave > Visuele hulpmiddelen >

Tabelrand en.

Rijen van de tabel herhalen Hiermee bepaalt u welke rijen in de tabel worden opgenomen in het herhalingsgebied.

Beginrij Hiermee stelt u het ingevoerde rijnummer in als de eerste rij die moet worden opgenomen in het herhalingsgebied.

Slotrij Hiermee stelt u het ingevoerde rijnummer in als de laatste rij die moet worden opgenomen in het herhalingsgebied.

Gebiedsnaam Hiermee stelt u een unieke naam in voor het herhalingsgebied.

Wisselende achtergrondkleuren in een herhalingstabel instellen

Nadat u een herhalingstabel hebt ingevoegd in een sjabloon, kunt u deze verder aanpassen door de achtergrondkleur van

de tabelrijen af te wisselen.

1 Selecteer in het documentvenster een rij in de herhalingstabel.

2 Klik op de knop Codeweergave tonen of Code- en ontwerpweergave tonen in de werkbalk van het document, zodat u

toegang hebt tot de code voor de geselecteerde tabelrij.

3 Bewerk in de codeweergave de tag

<tr> dusdanig dat deze de volgende code bevat:

U kunt de hexadecimale waarden #FFFFFF en #CCCCCC vervangen door uw keuze voor andere kleuren.

4 Sla de sjabloon op.

Hieronder ziet u een codevoorbeeld van een tabel met afwisselende achtergrondkleuren voor tabelrijen:

<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

</td>

<td>  phone

</td>

<td>  email

</td>

</tr>

</table>

Optionele gebieden gebruiken

Over optionele gebieden in een sjabloon

Een optioneel gebied is een gebied in een sjabloon dat door gebruikers kan worden ingesteld op weergeven of verbergen in

een op een sjabloon gebaseerd document. Gebruik een optioneel gebied wanneer u de voorwaarden voor de weergave van

inhoud in een document wilt instellen.

Als u een optioneel gebied invoegt, kunt u specifieke waarden voor een sjabloonparameter instellen of voorwaardelijke

instructies (“if...else”-instructies) voor sjabloongebieden definiëren. Gebruik eenvoudige true (waar)-/false (onwaar)-

bewerkingen of definieer complexere voorwaardelijke instructies en expressies. U kunt het optionele gebied desgewenst

later wijzigen. Op basis van de voorwaarden die u definieert, kunnen sjabloongebruikers de parameters in op een sjabloon

gebaseerde, door hun gemaakte documenten bewerken en bepalen of het optionele gebied wordt weergegeven.

U kunt meerdere optionele gebieden koppelen aan een benoemde parameter. In het op een sjabloon gebaseerde document

worden beide gebieden als een eenheid weergegeven of verborgen. Zo kunt u een “close-out”-afbeelding en tekstgebied

voor de verkoopprijs van een artikel weergeven.

DREAMWEAVER CS3

Handboek

384

Zie ook

“Sjablooneigenschappen wijzigen” op pagina 396

“Typen sjabloongebieden” op pagina 370

Een optioneel gebied invoegen

Gebruik een optioneel gebied om de inhoud te bepalen die al dan niet wordt weergegeven in een op een sjabloon gebaseerd

document. Er zijn twee typen optionele gebieden:

• Niet-bewerkbare optionele gebieden, waarmee sjabloongebruikers speciaal aangeduide gebieden kunnen weergeven en

verbergen zonder dat ze de inhoud ervan kunnen bewerken.

De sjabloontab van een optioneel gebied wordt voorafgegaan door het woord if. Opbasisvandeindesjablooningestelde

voorwaarde kunnen sjabloongebruikers definiëren of het gebied kan worden bekeken op pagina's die ze maken.

• Bewerkbare optionele gebieden, waarmee sjabloongebruikers kunnen instellen of het gebied wordt weergegeven of

verborgen en waarmee ze de inhoud in het gebied kunnen bewerken.

Als het optionele gebied bijvoorbeeld een afbeelding of tekst omvat, kan de sjabloongebruiker zowel instellen of de inhoud

wordt weergegeven, als desgewenst wijzigingen aanbrengen in de inhoud. Een bewerkbaar gebied wordt aangestuurd door

een voorwaardelijke instructie.

Zie ook

“Sjablooneigenschappen wijzigen” op pagina 396

Een niet-bewerkbaar optioneel gebied invoegen

1 Selecteer in het documentvenster het element dat u wilt instellen als een optioneel gebied.

2 Ga op een van de volgende manieren te werk:

• Selecteer Invoegen > Sjabloonobjecten > Optioneel gebied.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op de geselecteerde inhoud

en selecteer vervolgens Sjablonen > Nieuw optioneel gebied.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Sjablonen en selecteer het pictogram Optioneel

gebied uit het pop-upmenu.

3 Geef een naam voor het optionele gebied op, klik op het tabblad Geavanceerd als u waarden voor het optionele gebied

wilt instellen, en klik vervolgens op OK.

Een bewerkbaar optioneel gebied invoegen

1 Plaats de invoegpositie in het documentvenster op de plaats waar u het optionele gebied wilt invoegen.

Bij een selectie kunt u geen omloop gebruiken om een bewerkbaar optioneel gebied te maken. Voeg het gebied in en voeg

vervolgens de inhoud in het gebied in.

2 Voer een van de volgende handelingen uit:

• Selecteer Invoegen > Sjabloonobjecten > Bewerkbaar optioneel gebied.

• Ga naar de categorie Algemeen van de invoegbalk, klik op de knop Sjablonen en selecteer het pictogram Bewerkbaar

optioneel gebied uit het pop-upmenu.

3 Geef een naam voor het optionele gebied op, klik op het tabblad Geavanceerd als u waarden voor het optionele gebied

wilt instellen, en klik op OK.

Waarden voor een optioneel gebied instellen

U kunt instellingen van het optionele gebied bewerken nadat u het gebied hebt ingevoegd in een sjabloon. Zo kunt u

wijzigen of de standaardinstelling van de inhoud moet worden weergegeven of niet, een parameter koppelen aan een

optioneel gebied of een sjabloonexpressie wijzigen.

DREAMWEAVER CS3

Handboek

385

Maak sjabloonparameters en definieer voorwaardelijke instructies (“if...else”-instructies) voor sjabloongebieden. U kunt

eenvoudige true (waar)-/false (onwaar)-bewerkingen gebruiken of complexere voorwaardelijke instructies en expressies

definiëren.

Op het tabblad Geavanceerd kunt u meerdere optionele gebieden koppelen aan een benoemde parameter. In het op een

sjabloon gebaseerde document worden beide gebieden als een eenheid weergegeven of verborgen. Zo kunt u een “close-

out”-afbeelding en tekstgebied voor de verkoopprijs van een artikel weergeven.

U kunt het tabblad Geavanceerd ook gebruiken om een sjabloonexpressie te schrijven die een waarde voor het optionele

gebied beoordeelt en het op basis van deze waarde weergeeft of verbergt.

1 Voer een van de volgende handelingen uit in het documentvenster:

• Klik in de ontwerpweergave op de sjabloontab van het optionele gebied dat u wilt wijzigen.

• Plaats in de ontwerpweergave de invoegpositie in het sjabloongebied; selecteer vervolgens in de tagkiezer onder aan het

documentvenster de sjabloontag,

<mmsjabloon:if>.

• Klik in de codeweergave op de commentaartag van het sjabloongebied dat u wilt wijzigen.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op Bewerken.

3 Geef op het tabblad Standaard een naam voor de parameter op in het vakje Naam.

4 Selecteer Standaard tonen om in te stellen dat het geselecteerde gebied moet worden weergegeven in het document.

Schakel de selectie uit om de standaardwaarde in te stellen op false (onwaar).

Opmerking: Als u een andere waarde voor de parameter wilt instellen, zoekt u in de codeweergave naar de parameter in het

gedeelte van het document en bewerkt u de waarde.

5 (Optioneel) Klik op het tabblad Geavanceerd en stel vervolgens de volgende opties in:

• Als u parameters voor optionele gebieden wilt koppelen, klikt u op het tabblad Geavanceerd, selecteert u Parameter

gebruiken en selecteert u vervolgens in het pop-upmenu de bestaande parameter die u wilt koppelen aan de geselecteerde

inhoud.

• Als u een sjabloonexpressie wilt schrijven om de weergave van een optioneel gebied aan te sturen, klikt u op het tabblad

Geavanceerd, selecteert u Expressie opgeven en geeft u vervolgens de expressie op in het tekstvak.

Opmerking: Dreamweaver voegt dubbele aanhalingstekens in om de tekst die u opgeeft.

6 Klik op OK.

Als het sjabloonobject Optioneel gebied gebruikt, voegt Dreamweaver sjablooncommentaren in de code in. Een

sjabloonparameter wordt gedefinieerd in het gedeelte

head (zie het volgende voorbeeld):

op de plaats waar het optionele gebied is ingevoegd, wordt code die lijkt op de onderstaande code, weergegeven:

U kunt sjabloonparameters openen en bewerken in het op een sjabloon gebaseerde document.

Zie ook

“Sjablooneigenschappen wijzigen” op pagina 396

“Sjabloonexpressies” op pagina 373

DREAMWEAVER CS3

Handboek

386

Bewerkbare tagkenmerken definiëren

Bewerkbare tagkenmerken in een sjabloon opgeven

U kunt de gebruiker van een sjabloon toestaan om opgegeven tagkenmerken te wijzigen in een document dat op basis van

een sjabloon is gemaakt.

Zo kunt u een achtergrondkleur in het sjabloondocument instellen en sjabloongebruikers toch in staat stellen om een

andere achtergrondkleur in te stellen voor de pagina's die ze maken. Gebruikers kunnen alleen de kenmerken bijwerken

die u als bewerkbaar hebt ingesteld.

Ook kunt u meerdere bewerkbare kenmerken op een pagina dusdanig instellen dat sjabloongebruikers de kenmerken in op

een sjabloon gebaseerde documenten kunnen wijzigen. De volgende gegevenstypes worden ondersteund: text (tekst),

boolean (Booleaans), (

true (waar)/false (onwaar)), color (kleur), URL of number (getal).

Door een bewerkbaar tagkenmerk te maken voegt u een sjabloonparameter in de code in. In het sjabloondocument wordt

een aanvankelijke waarde voor het kenmerk ingesteld. Als een op een sjabloon gebaseerd document wordt gemaakt, neemt

dit de parameter over. Vervolgens kan sjabloongebruiker de parameter in het op een sjabloon gebaseerde document

bewerken.

Opmerking: Als u de koppeling naar een stijlpagina tot een bewerkbaar kenmerk maakt, zijn de kenmerken van de stijlpagina

vervolgens niet langer beschikbaar om te bekijken of te bewerken in het sjabloonbestand.

1 Selecteer in het documentvenster een item waarvoor u een bewerkbaar tagkenmerk wilt instellen.

2 Selecteer Wijzigen > Sjablonen > Kenmerk bewerkbaar maken.

3 Geef in het tekstvak Kenmerk een naam op of selecteer een kenmerk in het dialoogvenster Bewerkbare tagkenmerken

door een van de volgende handelingen uit te voeren:

• Als het kenmerk dat u bewerkbaar wilt maken, voorkomt in het pop-upmenu Kenmerk, selecteert u het.

• Als het kenmerk dat u bewerkbaar wilt maken, niet voorkomt in het pop-upmenu Kenmerk, klikt u op Toevoegen en

geeft u in het dialoogvenster dat wordt geopend, de naam op van het kenmerk dat u wilt toevoegen, waarna u op OK

klikt.

4 Zorg ervoor dat de optie Kenmerk bewerkbaar maken is geselecteerd.

5 Geef in het tekstvak Label een unieke naam voor het kenmerk op.

Als u een bepaald bewerkbaar tagkenmerk later gemakkelijker wilt kunnen herkennen, gebruikt u een label waaraan het

element en het kenmerk kunnen worden herkend. Zo zou u een afbeelding waarvan de bron bewerkbaar is, het label

logoSrc, of de bewerkbare achtergrondkleur van een body-tag het label bodyBgcolor kunnen geven.

6 Selecteer in het menu Type het type waarde dat is toegestaan voor dit kenmerk, door een van de volgende opties in te

stellen:

• Selecteer Tekst als u een gebruiker wilt toestaan dat deze een tekstwaarde voor het kenmerk kan invoeren. Zo kunt u

tekst gebruiken met het kenmerk

align (uitlijnen). Vervolgens kan de gebruiker de waarde van het kenmerk instellen op

left (links), right (rechts) of center (gecentreerd).

• Als u een koppeling naar een element wilt invoegen (bijvoorbeeld het bestandspad naar een afbeelding), selecteert u

URL. Door het gebruik van deze optie wordt het in een koppeling gebruikte pad automatisch bijgewerkt. Als de

gebruiker de afbeelding naar een nieuwe map verplaatst, wordt het dialoogvenster Koppelingen bijwerken weergegeven.

• Als u de kleurkiezer beschikbaar wilt maken om een waarde te selecteren, selecteert u Kleur.

• Als u een sjabloongebruiker in staat wilt stellen om een numerieke waarde te typen om een kenmerk bij te werken

(bijvoorbeeld om de waarden voor hoogte of breedte, of een afbeelding, te wijzigen), selecteert u Nummer.

7 Het tekstvak Standaardwaarde toont de waarde van het geselecteerde tagkenmerk in de sjabloon. Geef een nieuwe

waarde in dit tekstvak op om een andere aanvankelijke waarde voor de parameter in te stellen in het op een sjabloon

gebaseerde document.

8 (Optioneel) Als u wijzigingen wilt aanbrengen aan een ander kenmerk van de geselecteerde tag, selecteert u het kenmerk

en stelt u de opties voor dat kenmerk in.

DREAMWEAVER CS3

Handboek

387

9 Klik op OK.

Zie ook

“Sjablooneigenschappen wijzigen” op pagina 396

Een bewerkbaar tagkenmerk niet-bewerkbaar maken

Een tag die eerder werd aangeduid als bewerkbaar, kan als niet-bewerkbaar worden aangeduid.

1 Klik in het sjabloondocument op het element dat aan het bewerkbare kenmerk is gekoppeld, of gebruik de tagkiezer om

de tag te selecteren.

2 Selecteer Wijzigen > Sjablonen > Kenmerk bewerkbaar maken.

3 Selecteer in het pop-upmenu Kenmerken het desbetreffende kenmerk.

4 Schakel de optie Kenmerk bewerkbaar maken uit en klik op OK.

5 Werk op de sjabloon gebaseerde documenten bij.

Een geneste sjabloon maken

Over geneste sjablonen

Een geneste sjabloon is een sjabloon waarvan het ontwerp en de bewerkbare gebieden gebaseerd zijn op een andere

sjabloon. Geneste sjablonen zijn handig om de inhoud te controleren bij pagina's van een site die veel ontwerpelementen

gemeenschappelijk hebben, maar kunnen per pagina enigszins verschillen. Een basissjabloon kan bijvoorbeeld een breder

ontwerpgebied bevatten en bruikbaar zijn voor veel content contributors voor een site, terwijl een geneste sjabloon verder

de bewerkbare gebieden in pagina's kan definiëren voor een specifieke sectie in een site.

Bewerkbare gebieden in een basissjabloon zijn door de geneste sjabloon doorgegeven en blijven bewerkbaar in pagina's die

vanuit een geneste sjabloon gemaakt zijn, tenzij er nieuwe sjabloongebieden in deze gebieden ingevoegd zijn.

Wijzigingen in een basissjabloon worden automatisch bijgewerkt in de sjablonen op basis van het basissjabloon en in alle

sjabloongebaseerde documenten op basis van de hoofd- en geneste sjablonen.

DREAMWEAVER CS3

Handboek

388

In het volgende voorbeeld bevat de sjabloon trioHome drie bewerkbare gebieden, namelijk Body, Nav, Bar en Footer:

Er is om een geneste sjabloon te maken een nieuw document op basis van de sjabloon gemaakt, het is vervolgens bewaard

als een sjabloon onder de naam TrioNested. In het geneste sjabloon zijn er twee bewerkbare gebieden in het bewerkbare

gebied

Body toegevoegd.

DREAMWEAVER CS3

Handboek

389

Als u een nieuw bewerkbaar gebied toevoegt aan een bewerkbaar gebied dat aan een geneste sjabloon is doorgegeven, dan

wijzigt de markeerkleur van het bewerkbare gebied in oranje. De inhoud die u buiten het bewerkbare gebied toevoegt, zoals

de afbeelding in de

editableColumn kan niet meer bewerkt worden in documenten op basis van de geneste sjabloon. De

met blauw gemarkeerde bewerkbare gebieden, of ze nu toegevoegd zijn aan de geneste sjabloon of via de basissjabloon

doorgegeven, blijven bewerkbaar in documenten die op de geneste sjabloon gebaseerd zijn. Sjabloongebieden die geen

bewerkbaar gebied bevatten komen als bewerkbare gebieden door op sjablonen gebaseerde documenten.

Een geneste sjabloon maken

Met geneste sjablonen kunt u variaties op een basissjabloon maken. U kunt meerdere sjablonen nesten om steeds meer

specifieke indelingen te definiëren.

Alle bewerkbare sjabloongebieden van de basissjabloon worden standaard doorgegeven van de geneste sjabloon aan het

document op basis van het geneste sjabloon. Dat betekent dat wanneer u een bewerkbaar gebied in een basissjabloon maakt,

en dan een geneste sjabloon maakt, het bewerkbare gebied in documenten verschijnt die gebaseerd zijn op de geneste

sjabloon (als u geen nieuwe sjabloongebieden in dat gebied in de geneste sjabloon invoegde).

Opmerking: U kunt sjabloonopmaakcodes in een bewerkbaar gebied invoegen zodat het niet als een bewerkbaar gebied

doorgegeven wordt in documenten op basis van de geneste sjabloon. Dergelijke gebieden hebben een oranje in plaats van een

blauwe rand.

1 Wanneer u een document wilt maken uit de sjabloon waarop u de geneste sjabloon wilt baseren, voert u de volgende

handelingen uit:

• Klik in de categorie Sjablonen in het middelenpaneel met de rechtermuisknop (Windows) of klik terwijl u Control

ingedrukt houdt (Macintosh) op de sjabloon van waaruit u een nieuw document wilt maken, en selecteer vervolgens

Nieuw van sjabloon uit het contextmenu.

• Selecteer Bestand > Nieuw. Selecteer in het dialoogvenster Nieuw document de categorie Pagina uit voorbeeld, selecteer

dan de site die de sjabloon die u wilt gebruiken bevat; dubbelklik in de lijst Sjablonen op de sjabloon om een nieuw

document te maken.

2 Selecteer Bestand > Opslaan als sjabloon om het nieuwe document als een genest sjabloon op te slaan:

3 Typ een naam in het tekstvak Opslaan als en klik op OK.

Zie ook

“Serverscripts in sjablonen en op een sjabloon gebaseerde documenten” op pagina 372

Voorkomen dat een bewerkbaar gebied wordt doorgegeven aan een geneste sjabloon

Doorgegeven bewerkbare gebieden in geneste sjablonen hebben een blauwe rand. U kunt sjabloonopmaakcodes in een

bewerkbaar gebied invoegen zodat het niet als een bewerkbaar gebied doorgegeven wordt in documenten op basis van de

geneste sjabloon. Dergelijke gebieden hebben een oranje in plaats van een blauwe rand.

1 Zoek in codeweergave het bewerkbare gebied dat u niet wilt laten doorgeven.

Bewerkbare gebieden zijn gedefinieerd door commentaartags bij sjablonen.

2 Doorloop het bewerkbare gebied (waaronder de commentaartags) met de volgende markeringen:

@@("")@@

Zie TechNote 16416 op de website van Adobe op www.adobe.com/go/16416_nl voor meer informatie.

DREAMWEAVER CS3

Handboek

390

Sjablonen bewerken, bijwerken en verwijderen

Over het bewerken en bijwerken van sjablonen

Als u wijzigingen aanbrengt aan een sjabloon en deze opslaat, worden alle op de sjabloon gebaseerde documenten

bijgewerkt. U kunt een op een sjabloon gebaseerd document of desnoods de gehele site ook handmatig bijwerken.

Opmerking: VoorhetbewerkenvaneensjabloonvooreenContribute-sitemoetuDreamweavergebruiken;inContributekunt

u geen sjablonen bewerken.

Gebruik de categorie Sjablonen of het paneel Middelen om bestaande sjablonen te beheren, inclusief het wijzigen van de

naam van sjabloonbestanden en het verwijderen van sjabloonbestanden.

U kunt de volgende sjabloonbeheertaken uit voeren via het paneel Middelen:

• Een sjabloon maken

• Sjablonen bewerken en bijwerken

• Een sjabloon uit een bestaand document toepassen of verwijderen

Dreamweaver controleert de sjabloonsyntaxis wanneer u een sjabloon opslaat, maar het is altijd een goed idee om de

syntaxis van de sjabloon handmatig te controleren terwijl u een sjabloon bewerkt.

Zie ook

“Een Dreamweaver-sjabloon maken” op pagina 377

“Sjabloonsyntaxis controleren” op pagina 399

“Een sjabloon uit een bestaand document toepassen of verwijderen” op pagina 394

Naam van een sjabloon wijzigen

1 Selecteer in het paneel Middelen (Venster > Middelen) de categorie Sjablonen aan de linkerzijde van het paneel .

2 Klik op de naam van de sjabloon om deze te selecteren.

3 Klik opnieuw op de naam om de tekst selecteerbaar te maken en geef vervolgens een nieuwe naam op.

Deze manier van naam wijzigen werkt op dezelfde manier als de naam van een bestand wijzigen in Windows Verkenner

(Windows) of de Kiezer (Macintosh). Evenals bij Windows Verkenner en de Kiezer moet u tussen de klikken kort pauzeren.

Dubbelklik niet op de naam omdat u daarmee de sjabloon opent voor bewerken.

4 Klik op een ander gebied van het paneel Middelen of druk op Enter (Windows) of Return (Macintosh) om de wijziging

door te voeren.

In een melding wordt u gevraagd of u de documenten die op deze sjabloon zijn gebaseerd, wilt bijwerken.

5 Voor het bijwerken van alle documenten op de site die op deze sjabloon zijn gebaseerd, klikt u op Bijwerken. Als u geen

enkel document wilt bijwerken die op deze sjabloon zijn gebaseerd, klikt u op Niet bijwerken.

Zie ook

“Een Dreamweaver-sjabloon maken” op pagina 377

“Een sjabloon uit een bestaand document toepassen of verwijderen” op pagina 394

Een sjabloon openen voor bewerken

U kunt een sjabloonbestand rechtstreeks voor bewerken openen, of u kunt een op een sjabloon gebaseerd document openen

en vervolgens de gekoppelde sjabloon voor bewerken openen.

Als u wijzigingen aanbrengt aan een sjabloon, geeft Dreamweaver een melding om de op de sjabloon gebaseerde

documenten bij te werken.

DREAMWEAVER CS3

Handboek

391

Opmerking: Desgewenst kunt u de documenten ook handmatig bijwerken op wijzigingen in de sjabloon.

Zie ook

“Sjabloonsyntaxis controleren” op pagina 399

Een sjabloonbestand openen en bewerken

1 Selecteer in het paneel Middelen (Venster > Middelen) de categorie Sjablonen aan de linkerzijde van het paneel .

Het paneel Middelen vermeldt alle beschikbare sjablonen voor uw site en geeft een voorvertoning van de geselecteerde

sjabloon weer.

2 Voer een van de volgende handelingen uit in de lijst van beschikbare sjablonen:

• Dubbelklik op de naam van de sjabloon die u wilt bewerken.

• Selecteer een sjabloon om te bewerken en klik vervolgens op de knop Bewerken onder aan het paneel Middelen.

3 Wijzig de inhoud van de sjabloon.

Als u de pagina-eigenschappen van de sjabloon wilt wijzigen, selecteert u Wijzigen > Pagina-eigenschappen. (Op een

sjabloon gebaseerde documenten nemen de pagina-eigenschappen van de sjabloon over.)

4 Sla de sjabloon op. Dreamweaver vraagt u om de op de sjabloon gebaseerde pagina's bij te werken.

5 Klik op Bijwerken om alle op de gewijzigde sjabloon gebaseerde documenten bij te werken. Klik op Niet bijwerken als u

de op de gewijzigde sjabloon gebaseerde documenten niet wilt bijwerken.

Dreamweaver geeft een logboekbestand weer dat de bestanden aangeeft die werden bijgewerkt.

De aan het huidige document gekoppelde sjabloon openen en wijzigen

1 Open het op een sjabloon gebaseerde document in het documentvenster.

2 Ga op een van de volgende manieren te werk:

• Selecteer Wijzigen > Sjablonen > Gekoppelde sjabloon openen.

• Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens

Sjablonen > Gekoppelde sjabloon openen.

3 Wijzig de inhoud van de sjabloon.

Als u de pagina-eigenschappen van de sjabloon wilt wijzigen, selecteert u Wijzigen > Pagina-eigenschappen. (Op een

sjabloon gebaseerde documenten nemen de pagina-eigenschappen van de sjabloon over.)

4 Sla de sjabloon op. Dreamweaver vraagt u om de op de sjabloon gebaseerde pagina's bij te werken.

5 Klik op Bijwerken om alle op de gewijzigde sjabloon gebaseerde documenten bij te werken. Klik op Niet bijwerken als u

de op de gewijzigde sjabloon gebaseerde documenten niet wilt bijwerken.

Dreamweaver geeft een logboekbestand weer dat de bestanden aangeeft die werden bijgewerkt.

Op sjablonen gebaseerde documenten handmatig bijwerken

Als u wijzigingen aanbrengt aan een sjabloon, geeft Dreamweaver een melding om de op de sjabloon gebaseerde

documenten bij te werken, maar u kunt het huidige document of desnoods de gehele site ook handmatig bijwerken. Het

handmatig bijwerken van op een sjabloon gebaseerde documenten is hetzelfde als de sjabloon opnieuw toepassen.

Sjabloonwijzigingen toepassen op het huidige, op een sjabloon gebaseerde document

1 Open het document in het documentvenster.

2 Selecteer Wijzigen > Sjablonen > Huidige pagina bijwerken.

Dreamweaver werkt het document bij met alle sjabloonwijzigingen.

DREAMWEAVER CS3

Handboek

392

De gehele site of alle documenten bijwerken waarin een bepaalde sjabloon wordt gebruikt

U kunt alle pagina's op de site bijwerken, of alleen pagina's voor een bepaalde sjabloon.

1 Selecteer Wijzigen > Sjablonen > Pagina's bijwerken.

2 Voer in het menu Zoeken in een van de volgende handelingen uit:

• Voor het bijwerken van alle bestanden op de geselecteerde site op basis van de overeenkomstige sjablonen selecteert u

Gehele site en vervolgens in het naastgelegen contextmenu de naam van de site.

• Voor het bijwerken van bestanden voor een bepaalde sjabloon selecteert u eerst Bestanden met en vervolgens de naam

van de sjabloon in het aangrenzende pop-upmenu.

3 Zorg ervoor dat Sjablonen is geselecteerd in de optie Bijwerken.

4 Als u geen logboekbestand wilt zien van de bestanden die Dreamweaver bijwerkt, schakelt u de optie Logboek tonen uit.

Als u de bestanden wel wilt zien, laat u de optie ingeschakeld.

5 Klik op Start om de aangegeven bestanden bij te werken. Als u de optie Logboek tonen hebt geselecteerd, geeft

Dreamweaver informatie over de bestanden die het probeert bij te werken, inclusief informatie of ze met succes zijn

bijgewerkt.

6 Klik op Sluiten.

Sjablonen bijwerken op een Contribute-site

Gebruikers van Contribute kunnen geen wijzigingen aanbrengen aan een Dreamweaver-sjabloon. Ze kunnen

Dreamweaver echter wel gebruiken om een sjabloon voor een Contribute-site te wijzigen.

Denk aan het volgende wanneer u sjablonen op een Contribute-site bijwerkt:

• Contribute haalt alleen nieuwe en bijgewerkte sjablonen van de site op wanneer Contribute wordt geopend en wanneer

een gebruiker van Contribute de verbindingsgegevens ervan wijzigt. Als u wijzigingen aanbrengt aan een sjabloon

terwijl een gebruiker van Contribute een bestand bewerkt dat is gebaseerd op de sjabloon, ziet de gebruiker de

wijzigingen aan de sjabloon pas wanneer Contribute opnieuw wordt geopend.

• Als u een bewerkbaar gebied verwijdert uit een sjabloon, kan een gebruiker van Contribute die een pagina aan het

bewerken is die is gebaseerd op die sjabloon, in verwarring raken over wat deze moet doen met de inhoud die in dat

bewerkbare gebied stond.

Ga als volgt te werk om een sjabloon in een Contribute-site bij te werken.

1 Open de Contribute-sjabloon in Dreamweaver, bewerk het en sla het op. Zie “Een sjabloon openen voor bewerken” op

pagina 390 voor instructies.

2 Meld aan alle gebruikers van Contribute die aan de site werken, om Contribute opnieuw te openen.

Een sjabloonbestand verwijderen

1 Selecteer in het paneel Middelen (Venster > Middelen) de categorie Sjablonen aan de linkerzijde van het paneel .

2 Klik op de naam van de sjabloon om deze te selecteren.

3 Klik op de knop Verwijderen onder aan het paneel en bevestig vervolgens dat u de sjabloon wilt verwijderen.

Belangrijk: Nadatueensjabloonbestandhebtverwijderd,kuntuditnietmeerterughalen. Desjabloonbestandwordtvanuw

site verwijderd.

Documenten die zijn gebaseerd op een verwijderde sjabloon, worden niet van de sjabloon losgekoppeld. Ze behouden de

structuur en bewerkbare gebieden die de sjabloonbestand had voordat het werd verwijderd. U kunt een dergelijk document

omzetten naar een HTML-bestand zonder bewerkbare of vergrendelde gebieden.

DREAMWEAVER CS3

Handboek

393

Zie ook

“Een document loskoppelen van een sjabloon” op pagina 395

“Een sjabloon uit een bestaand document toepassen of verwijderen” op pagina 394

“Een Dreamweaver-sjabloon maken” op pagina 377

Sjablooninhoud exporteren en importeren

Over XML-inhoud van een sjabloon

U kunt zich een op een sjabloon gebaseerd document voorstellen als een bestand met gegevens in de vorm van naam-

waardeparen. Elk paar bestaat uit de naam van een bewerkbaar gebied en de inhoud van dat gebied.

U kunt de naam-waardeparen exporteren naar een XML-bestand, zodat u buiten Dreamweaver met de gegevens kunt

werken (bijvoorbeeld in een XML-editor of een teksteditor, of in een databasetoepassing). Omgekeerd kunt u bij een XML-

document met de juiste structuur de gegevens ervan importeren in een document dat is gebaseerd op een Dreamweaver-

sjabloon.

Bewerkbare gebieden van een document exporteren als XML

1 Open een op een sjabloon gebaseerd document dat bewerkbare gebieden bevat.

2 Selecteer Bestand > Exporteren > Sjabloongegevens als XML.

3 Selecteer een van de opties voor Notatie:

• Als de sjabloon herhalingsgebieden of sjabloonparameters bevat, selecteert u Standaard Dreamweaver-XML-tags

gebruiken.

• Alsdesjabloongeenherhalingsgebiedenofsjabloonparametersbevat,selecteertuNamenvanbewerkbaregebiedenals

XML-tags gebruiken.

4 Klik op OK.

5 Selecteer in het dialoogvenster dat nu verschijnt de locatie van een map, geef een naam voor het XML-bestand op en klik

vervolgens op Opslaan.

Er wordt een XML-bestand gegenereerd dat het materiaal op basis van de parameters en bewerkbare gebieden van het

document bevat, inclusief bewerkbare gebieden binnen herhalingsgebieden of optionele gebieden. Het XML-bestand is

ook inclusief zowel de naam van de oorspronkelijke sjabloon als de naam en inhoud van elk sjabloongebied.

Opmerking: Inhoud in de niet-bewerkbare gebieden wordt niet naar het XML-bestand geëxporteerd.

XML-inhoud importeren

1 Selecteer Bestand > Importeren > XML in sjabloon importeren.

2 Selecteer het XML-bestand en klik op Openen.

Dreamweaver maakt een nieuwe document dat is gebaseerd op de in het XML-bestand opgegeven sjabloon. Het vult de

inhoud van elk bewerkbare gebied in dat document in met behulp van de gegevens uit het XML-bestand. Het resulterende

document wordt nu in een nieuw documentvenster weergegeven.

Als uw XML-bestand niet op exact dezelfde manier is ingesteld als Dreamweaver verwacht, kunt u uw gegevens mogelijk

niet importeren. Eén oplossing voor dit probleem is het exporteren naar een dummy-XML-bestand vanuit Dreamweaver,

zodat u toch een XML-bestand met exact de juiste structuur krijgt. Vervolgens kopieert u de gegevens van uw oorspronkelijke

XML-bestand naar het geëxporteerde XML-bestand. Het resultaat is een XML-bestand met de correcte structuur dat toch de

juiste gegevens bevat en klaar is voor import.

DREAMWEAVER CS3

Handboek

394

Een site exporteren zonder sjabloonopmaakcodes

U kunt op een sjabloon gebaseerde documenten exporteren van de ene site naar de andere site zonder daarbij de

sjabloonopmaakcodes op te nemen.

1 Selecteer Wijzigen > Sjablonen > Exporteren zonder opmaakcodes.

2 Geef in het tekstvak Map het bestandspad op naar de map waarnaar u het bestand wilt exporteren, of klik op Bladeren

en selecteer de map.

Opmerking: U moet een map buiten de huidige site selecteren.

3 Als u een XML-versie van geëxporteerde, op een sjabloon gebaseerde documenten wilt opslaan, selecteert u

Sjabloongegevensbestanden behouden.

4 Als u wijzigingen aan eerder geëxporteerde bestanden wilt bijwerken, selecteert u Alleen gewijzigde bestanden

extraheren en klikt u op OK.

Een sjabloon uit een bestaand document toepassen of

verwijderen

Een sjabloon toepassen op een bestaand document

Als u een sjabloon toepast op een document dat bestaande inhoud bevat, probeert Dreamweaver de bestaande inhoud

overeen te stemmen met een gebied in de sjabloon. Als u een gereviseerde versie van een van uw bestaande sjablonen

toepast, komen de namen waarschijnlijk overeen.

Als u een sjabloon toepast op een document waarop nog geen sjabloon is toegepast, zijn er bewerkbare gebieden om te

vergelijken en zijn er geen overeenkomende gebieden. Dreamweaver houdt deze niet overeenkomende gebieden op een

dusdanige wijze bij dat u kunt selecteren naar welk gebied of welke gebieden u de inhoud van de huidige pagina wilt

verplaatsen; hierbij kunt u de niet overeenkomende inhoud ook verwijderen.

U kunt een sjabloon toepassen op een bestaand document met behulp van het paneel Middelen of vanuit het

documentvenster. U kunt de toepassing van een sjabloon desgewenst ongedaan maken.

Belangrijk: Als u een sjabloon toepast op een bestaand document, vervangt de sjabloon de inhoud van het document met de

'boilerplate'-inhoud van de sjabloon. Maak altijd een reservekopie van de inhoud van de pagina voordat u een sjabloon erop

toepast.

Een sjabloon toepassen op een bestaand document met behulp van het paneel Middelen

1 Open het document waarop u de sjabloon wilt toepassen.

2 Selecteer in het paneel Middelen (Venster > Middelen) de categorie Sjablonen aan de linkerzijde van het paneel .

3 Ga op een van de volgende manieren te werk:

• Sleep de sjabloon die u wilt toepassen vanuit het paneel Middelen naar het documentvenster.

• Selecteer de sjabloon die u wilt toepassen en klik vervolgens op de knop Toepassen onder aan het paneel Middelen.

Als het document inhoud bevat die niet automatisch kan worden toegewezen aan een sjabloongebied, verschijnt het

dialoogvenster Inconsistente gebiedsnamen.

4 Selecteer een bestemming voor de inhoud door middel van het menu Inhoud naar nieuw gebied verplaatsen om een van

de volgende opties te selecteren:

• Selecteer een gebied in de nieuwe sjabloon waarnaar de bestaande inhoud wordt verplaatst.

• Selecteer Nergens om de inhoud uit het document te verwijderen.

5 Als u alle inhoud waarvoor geen overeenkomstig gebied kan worden gevonden naar het geselecteerde gebied wilt

verplaatsen, klikt u op Voor alles gebruiken.

DREAMWEAVER CS3

Handboek

395

6 Klik op OK om de sjabloon toe te passen of klik op Annuleren om de toepassing van de sjabloon op het document te

annuleren.

Belangrijk: Als u een sjabloon toepast op een bestaand document, vervangt de sjabloon de inhoud van het document met de

“boilerplate”-inhoud van de sjabloon. Maak altijd een reservekopie van de inhoud van de pagina voordat u een sjabloon erop

toepast.

Een sjabloon toepassen op een bestaand document vanuit het documentvenster

1 Open het document waarop u de sjabloon wilt toepassen.

2 Selecteer Wijzigen > Sjablonen > Sjabloon toepassen op pagina.

Het dialoogvenster Sjabloon selecteren wordt geopend.

3 Kies een sjabloon in de lijst en klik vervolgens op Selecteren.

Als het document inhoud bevat die niet automatisch kan worden toegewezen aan een sjabloongebied, verschijnt het

dialoogvenster Inconsistente gebiedsnamen.

4 Svoor de inhoud door middel van het menu Inhoud naar nieuw gebied verplaatsen om een van de volgende opties te

selecteren:

• Selecteer een gebied in de nieuwe sjabloon waarnaar de bestaande inhoud wordt verplaatst.

• Selecteer Nergens om de inhoud uit het document te verwijderen.

5 Als u alle inhoud waarvoor geen overeenkomstig gebied kan worden gevonden naar het geselecteerde gebied wilt

verplaatsen, klikt u op Voor alles gebruiken.

6 Klik op OK om de sjabloon toe te passen of klik op Annuleren om de toepassing van de sjabloon op het document te

annuleren.

Belangrijk: Als u een sjabloon toepast op een bestaand document, vervangt de sjabloon de inhoud van het document met de

“boilerplate”-inhoud van de sjabloon. Maak altijd een reservekopie van de inhoud van de pagina voordat u een sjabloon erop

toepast.

Sjabloonwijzigingen ongedaan maken

❖

Selecteer Bewerken > Toepassen sjabloon ongedaan maken.

Het document wordt teruggebracht naar de toestand voordat de sjabloon werd toegepast.

Een document loskoppelen van een sjabloon

Als u wijzigingen wilt aanbrengen aan de vergrendelde gebieden van een document dat is gebaseerd op een sjabloon, moet

u het document loskoppelen van de sjabloon. Als het document wordt losgekoppeld, wordt het gehele document

bewerkbaar.

1 Open het op een sjabloon gebaseerde document dat u wilt loskoppelen.

2 Selecteer Wijzigen > Sjablonen > Loskoppelen van sjabloon.

Het document wordt losgekoppeld van de sjabloon en alle sjablooncode wordt verwijderd.

Inhoud in een op een sjabloon gebaseerd document

bewerken

Over het bewerken van inhoud in op een sjabloon gebaseerde documenten

Dreamweaver-sjablonen geven voor op een sjabloon gebaseerde documenten gebieden aan die zijn vergrendeld (niet-

bewerkbaar), en andere die wel bewerkbaar zijn.

DREAMWEAVER CS3

Handboek

396

Op op sjablonen gebaseerde pagina's kunnen sjabloongebruikers alleen inhoud in bewerkbare gebieden bewerken. Voor

het bewerken van inhoud kunt u bewerkbare gebieden gemakkelijk herkennen en selecteren. Sjabloongebruikers kunnen

geen inhoud in vergrendelde gebieden bewerken.

Opmerking: Als u probeert om een vergrendeld gebied te bewerken in een document dat is gebaseerd op een sjabloon terwijl

markering is uitgeschakeld, verandert de muisaanwijzer van vorm om aan te geven dat u niet in een vergrendeld gebied kunt

klikken.

Sjabloongebruikers kunnen ook eigenschappen wijzigen en ingangen voor een herhalingsgebied in op een sjabloon

gebaseerde documenten bewerken.

Zie ook

“Een pagina maken op basis van een bestaande sjabloon” op pagina 69

“Over sjablonen van Dreamweaver” op pagina 370

“Bewerkbare gebieden selecteren” op pagina 381

Sjablooneigenschappen wijzigen

Als sjabloonauteurs parameters in een sjabloon maken, nemen documenten die op de sjabloon zijn gebaseerd automatisch

de parameters en hun instellingen voor aanvankelijke waarden over. Een sjabloongebruiker kan bewerkbare tagkenmerken

en andere sjabloonparameters (zoals instellingen van het optionele gebied) bijwerken.

Zie ook

“Sjabloonparameters” op pagina 372

“Optionele gebieden gebruiken” op pagina 383

“Bewerkbare tagkenmerken definiëren” op pagina 386

Een bewerkbaar tagkenmerk wijzigen

1 Open het op een sjabloon gebaseerde document.

2 Selecteer Wijzigen > Sjablooneigenschappen.

Het dialoogvenster Sjablooneigenschappen wordt geopend en geeft een lijst van beschikbare eigenschappen weer. Het

dialoogvenster toont optionele gebieden en bewerkbare tagkenmerken.

3 Selecteer de eigenschap in de lijst Naam.

Het onderste gedeelte van het dialoogvenster wordt bijgewerkt om de label en de daaraan toegekende waarde van de

geselecteerde eigenschap te tonen.

4 Bewerk in het veld rechts naast de label van de eigenschap de waarde om de eigenschap in het document te wijzigen.

Opmerking: De veldnaam en waarden die kunnen worden bijgewerkt, worden gedefinieerd in de sjabloon. Kenmerken die niet

in de lijst Naam staan, kunnen niet worden gebruikt in het op een sjabloon gebaseerde document.

5 Selecteer Geneste sjablonen toestaan voor de aansturing hiervan als u de bewerkbare eigenschap wilt doorgeven aan

documenten die op de geneste sjabloon zijn gebaseerd.

Sjabloonparameters van optionele gebieden wijzigen

1 Open het op een sjabloon gebaseerde document.

2 Selecteer Wijzigen > Sjablooneigenschappen.

Het dialoogvenster Sjablooneigenschappen wordt geopend en geeft een lijst van beschikbare eigenschappen weer. Het

dialoogvenster toont optionele gebieden en bewerkbare tagkenmerken.

3 Selecteer een eigenschap in de lijst Naam.

DREAMWEAVER CS3

Handboek

397

Het dialoogvenster wordt bijgewerkt om het label en de daaraan toegekende waarde van de geselecteerde eigenschap te

tonen.

4 Selecteer Tonen om het optionele gebied in het document weer te geven, of schakel de optie Tonen uit om het optionele

gebied te verbergen.

Opmerking: De veldnaam en standaardinstelling worden gedefinieerd in de sjabloon.

5 Selecteer Geneste sjablonen toestaan voor de aansturing hiervan als u de bewerkbare eigenschap wilt doorgeven aan

documenten die op de geneste sjabloon zijn gebaseerd.

De gegevens van een herhalingsgebied toevoegen, verwijderen en de volgorde ervan

wijzigen

Gebruik besturingselementen van herhalingsgebieden om gegevens in op een sjabloon gebaseerde documenten toe te

voegen, te verwijderen of de volgorde ervan te wijzigen. Als u de gegevens van een herhalingsgebied toevoegt, wordt er een

kopie van het gehele herhalingsgebied toegevoegd. Voor het bijwerken van de inhoud in de herhalingsgebieden moet de

oorspronkelijke sjabloon een bewerkbaar gebied in het herhalingsgebied bevatten.

Zie ook

“Herhalingsgebieden maken” op pagina 381

Een herhalingsgebied toevoegen, verwijderen of de volgorde ervan wijzigen

1 Open het op een sjabloon gebaseerde document.

2 Plaats de invoegpositie in het herhalingsgebied om het te selecteren.

3 Ga op een van de volgende manieren te werk:

• Klik op de knop Plus (+) om gegevens voor een herhalingsgebied toe te voegen onder de op dat moment geselecteerde

gegevens.

• Klik op de knop Minus (–) om de gegevens van het geselecteerde herhalingsgebied te verwijderen.

• Klik op de knop pijl-omlaag om de geselecteerde gegevens één positie naar beneden te verplaatsen.

• Klik op de knop pijl-omhoog om de geselecteerde gegevens één positie naar boven te verplaatsen.

Opmerking: Desgewenst kunt u ook Wijzigen > Sjabloon selecteren en vervolgens een van de opties voor zich herhalende

gegevens onder aan het contextmenu selecteren. U kunt dit menu gebruiken om nieuwe, zich herhalende gegevens in te voegen

of om de positie van de zich herhalende gegevens te wijzigen.

Gegevens knippen, kopiëren en verwijderen

1 Open het op een sjabloon gebaseerde document.

2 Plaats de invoegpositie in het herhalingsgebied om het te selecteren.

3 Ga op een van de volgende manieren te werk:

• Selecteer Bewerken > Herhalingsingangen > Herhalingsingang knippen om zich herhalende gegevens te verwijderen.

• Selecteer Bewerken > Herhalingsingangen > Herhalingsingang kopiëren om zich herhalende gegevens te kopiëren.

• Selecteer Bewerken > Herhalingsingangen > Herhalingsingang verwijderen om zich herhalende gegevens te

verwijderen.

DREAMWEAVER CS3

Handboek

398

• Als u zich herhalende gegevens wilt plakken, selecteert u Bewerken > Plakken.

Opmerking: Bij plakken worden nieuwe gegevens ingevoegd; deze bewerking is niet bedoeld om bestaande gegevens te

vervangen.

Sjabloonsyntaxis

Algemene syntaxisregels

Dreamweaver gebruikt HTML-commentaartags om gebieden in sjablonen en op een sjabloon gebaseerde documenten aan

te geven, zodat op een sjabloon gebaseerde documenten nog steeds geldige HTML-bestanden zijn. Als u een sjabloonobject

invoegt, worden sjabloontags ingevoegd in de code.

Algemene syntaxisregels zijn als volgt:

• Telkens waar een spatie voorkomt, kunt u elke willekeurige hoeveelheid witruimte (spaties, tabs, regeleinden) vervangen.

De witruimte is verplicht, behalve aan het uiterste begin of einde van een opmerking.

• Kenmerken kunnen in elke willekeurige volgorde worden gegeven. Zo kunt u in een TemplateParam eerst het type en

dan pas de naam opgeven.

• Namen van commentaar en kenmerken zijn hoofdlettergevoelig.

• Alle kenmerken moeten tussen aanhalingstekens staan. U kunt enkelvoudige of dubbele aanhalingstekens gebruiken.

Sjabloontags

Dreamweaver gebruikt de volgende sjabloontags:

(equivalent to @@...@@)

Objecttags

Dreamweaver gebruikt de volgende objecttags:

DREAMWEAVER CS3

Handboek

399

Sjabloonsyntaxis controleren

Dreamweaver controleert de sjabloonsyntaxis wanneer u een sjabloon opslaat, maar u kunt de sjabloonsyntaxis ook

handmatig controleren voordat u de sjabloon opslaat. Als u bijvoorbeeld een sjabloonparameter of een expressie in de

codeweergave toevoegt, kunt u controleren of de code de juiste syntaxis volgt.

1 Open het te controleren document in het documentvenster.

2 Selecteer Wijzigen > Sjablonen > Sjabloonsyntaxis controleren.

Alsdesyntaxisnietgoedisgeformuleerd,verschijntereenfoutbericht. Hetfoutberichtbeschrijftdefoutenverwijstnaar

een specifieke regel in de code, waarin de fout voorkomt.

Zie ook

“Sjablonen en op een sjabloon gebaseerde documenten herkennen” op pagina 375

“Sjabloonexpressies” op pagina 373

Voorkeuren voor het schrijven van sjablonen instellen

De voorkeuren voor codekleuren wijzigen voor een sjabloon

Voorkeuren voor codekleuren bepalen de tekst-, achtergrondkleur- en stijlkenmerken van de tekst, zoals wordt

weergegeven in de codeweergave. U kunt uw eigen kleurschema instellen, zodat u sjabloongebieden eenvoudig kunt

onderscheiden wanneer u een document in de codeweergave bekijkt.

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Codekleuren in de lijst Categorie aan de linkerkant.

3 Selecteer HTML in de lijst Documenttype en klik vervolgens op de knop Kleurenschema bewerken.

4 Selecteer in de lijst Stijlen voor de optie Sjabloontags.

5 Stel de kleur-, achtergrondkleur- en stijlkenmerken voor de tekst in de codeweergave in door een van de volgende

handelingen uit te voeren:

• Als u de tekstkleur wilt wijzigen, typt u in het tekstvak Tekstkleur de hexadecimale waarde voor de kleur die u wilt

toepassen op de geselecteerde tekst, of gebruikt u de kleurkiezer om een kleur toe te passen op de tekst. Doe hetzelfde

in het veld Achtergrond om een bestaande achtergrondkleur toe te voegen of te wijzigen voor de geselecteerde tekst.

• Als u aan de geselecteerde code een stijlkenmerk wilt toevoegen, klikt u op de knop V (vet), C (cursief) of O

(onderstrepen) om de gewenste indeling in te stellen.

6 Klik op OK.

Opmerking: Als u globale wijzigingen wilt aanbrengen, kunt u het bronbestand bewerken waarin uw voorkeuren worden

opgeslagen. De locatie van dit bestand is C:\Documents and Settings\%username%\Application Data\Adobe\Dreamweaver

9\Configuration\CodeColoring\Colors.xml (Windows).

Voorkeuren voor de markering van sjabloongebieden instellen

U kunt de markeringsvoorkeuren van Dreamweaver gebruiken om de markeringskleuren van de omtrekken om de

bewerkbare en vergrendelde gebieden van een sjabloon in de ontwerpweergave aan te passen. De kleur van het bewerkbare

gebied wordt weergegeven in zowel de sjabloon als in documenten die op de sjabloon zijn gebaseerd.

Zie ook

“Op een sjabloon gebaseerde documenten herkennen in de ontwerpweergave” op pagina 376

“Sjablonen herkennen in de ontwerpweergave” op pagina 375

DREAMWEAVER CS3

Handboek

400

Markeringskleuren van de sjabloon wijzigen

1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

2 Selecteer Markering in de lijst Categorie aan de linkerkant.

3 Klik op het kleurvak voor Bewerkbare gebieden, Geneste gebieden of Vergrendelde gebieden en selecteer vervolgens een

markeringskleur met behulp van de kleurkiezer (of geef de hexadecimale waarde voor de markeringskleur op in het

tekstvak).

Zie “De kleurkiezer gebruiken” op pagina 214 voor meer informatie over het gebruik van de kleurkiezer.

4 (Optioneel) Herhaal desgewenst deze procedure voor andere typen sjabloongebieden.

5 Klik op de optie Tonen om de weergave van kleuren in het documentvenster in of uit te schakelen.

Opmerking: De optie Geneste gebieden beschikt niet over de optie Tonen. De weergave ervan wordt aangestuurd door de optie

Bewerkbare gebieden.

6 Klik op OK.

Markeringskleuren bekijken in het documentvenster

❖

Selecteer Weergave > Visuele hulpmiddelen > Onzichtbare elementen.

Markeringskleuren worden alleen in het documentvenster weergegeven wanneer Weergave > Visuele hulpmiddelen >

Onzichtbare elementen is ingeschakeld en ook de juiste opties zijn ingeschakeld bij de voorkeuren voor Markering.

Opmerking: Als onzichtbare elementen wel worden weergegeven, maar de markeringskleuren niet, selecteert u Bewerken >

Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteert u vervolgens de categorie Markering. Zorg

ervoor dat de optie Tonen naast de juiste markeringskleur is geselecteerd. Zorg er ook voor dat de gewenste kleur zichtbaar is

tegen de achtergrondkleur van uw pagina.

401

Hoofdstuk 15: XML-gegevens weergeven

Adobe® Dreamweaver® CS3 bevat functies waarmee u XML-gegevens (Extensible Markup Language) op uw webpagina

kunt weergeven en pagina's kunt maken, die XSLT-transformaties (Extensible Stylesheet Language Transformations)

uitvoeren op de client of de server.

Over XML en XSLT

XML en XSL gebruiken in webpagina's

Extensible Markup Language (XML) is een taal waarmee u informatie kunt structureren. Evenals bij HTML kunt u bij XML

informatie met tags structureren, maar XML-tags zijn niet vooraf gedefinieerd zoals de HTML-tags. Bij XML kunt u

daarentegen tags maken die uw gegevensstructuur (schema) het best definiëren. Tags worden binnen andere tags genest en

vormen een schema van boven- en onderliggende tags. Zoals bij de meeste HTML-tags hebben alle tags in een XML-

schema een begin- en een eindtag.

Het volgende voorbeeld toont de basisstructuur van een XML-bestand.

<?xml version=“1.0”>

<title>Displaying XML Data with Adobe Dreamweaver</title>

<author>Charles Brown</author>

</book>

<title>Understanding XML</title>

<author>John Thompson</author>

</book>

</mybooks>

In dit voorbeeld heeft elke bovenliggende tag <book> drie onderliggende tags: <pubdate>, <title> en <author>. Elke tag

<book> is echter ook een onderliggende tag van de tag <mybooks>, die één niveau hoger ligt in het schema. U kunt XML-

tags willekeurige namen en structuren geven, zolang u ze dienovereenkomstig binnen andere nest en aan elke begintag een

corresponderende eindtag toewijst.

XML-documenten bevatten geen opmaak – het zijn slechts containers van gestructureerde informatie. Als u eenmaal een

XML-schema hebt, kunt u de informatie met Extensible Stylesheet Language (XSL) weergeven. Op dezelfde manier als u

HTML met Cascading Style Sheets (CSS) kunt opmaken, kunt u XML-gegevens opmaken met XSL. U kunt stijlen, pagina-

elementen, opmaak, enzovoort definiëren in een XSL-bestand en dit aan een XML-bestand koppelen. Als een gebruiker de

XML-gegevens in een browser bekijkt, worden de gegevens volgens uw definities in het XSL-bestand opgemaakt. De

inhoud (de XML-gegevens) en de presentatie (in het XSL-bestand gedefinieerd) zijn volledig gescheiden, zodat u beter kunt

bepalen hoe uw informatie op een webpagina verschijnt. In wezen is XSL de presentatietechnologie voor XML en de

primaire uitvoer is een HTML-pagina.

Extensible Stylesheet Language Transformations (XSLT) is een hulptaal van XSL waarmee u feitelijk de XML-gegevens op

een webpagina kunt weergeven, waarbij deze, samen met XSL-stijlen, 'transformeert' naar leesbare en opgemaakte

informatie in HTML-vorm. Met Dreamweaver kunt u XSLT-pagina's maken voor het uitvoeren van XSL-transformaties

met een toepassingsserver of een browser. Bij een server-side XSL-transformatie zorgt de server voor het transformeren van

XML en XSL en voor het weergeven op de pagina. Bij een client-side transformatie zorgt de browser (bijvoorbeeld Internet

Explorer) daarvoor.

Welke benadering u uiteindelijk kiest (server-side dan wel client-side transformaties), is afhankelijk van het eindresultaat

dat u beoogt, van de technologieën waarover u beschikt, van het toegangsniveau dat u hebt voor XML-bronbestanden, en

van andere factoren. Beide benaderingen hebben hun eigen voordelen en beperkingen. Server-side transformaties werken

DREAMWEAVER CS3

Handboek

402

bijvoorbeeld op alle browsers, terwijl client-side transformaties alleen werken op moderne browsers (Internet Explorer 6,

Netscape 8, Mozilla 1.8 en Firefox 1.0.2). Bij server-side transformaties kunt u XML-gegevens dynamisch weergeven vanuit

uw eigen server of vanuit overal elders op het web, terwijl client-side transformaties XML-gegevens moeten gebruiken die

op uw eigen webserver aanwezig zijn. Tenslotte is voor server-side transformaties vereist dat u uw pagina's implementeert

op een geconfigureerde toepassingsserver, terwijl voor client-side transformaties alleen toegang tot een webserver vereist is.

Zie www.adobe.com/go/vid0165_nl voor een zelfstudie over XML.

Server-side XSL-transformaties

Dreamweaver biedt methoden voor het maken van XSLT-pagina's waarmee u server-side XSL-transformaties kunt

uitvoeren. Als een toepassingsserver de XSL-transformatie uitvoert, kan het bestand met de XML-gegevens zich op uw

eigen server bevinden of elders op het web. Bovendien kan elke browser de getransformeerde gegevens weergeven. Het

implementeren van pagina's voor server-side transformaties is echter enigszins gecompliceerd en daarvoor is toegang

vereist tot een toepassingsserver.

Als u met server-side XSL-transformaties werkt, kunt u met Dreamweaver XSLT-pagina's maken die volledige HTML-

documenten (hele XSLT-pagina's) genereren, of kunt u XSLT-fragmenten maken die een deel van een HTML-document

genereren. Een hele XSLT-pagina komt overeen met een gewone HTML-pagina. Het bevat een

<body>-tag en een <head>-

tag en u kunt een combinatie van HTML- en XML-gegevens op de pagina weergeven. Een XSLT-fragment is stuk code in

een afzonderlijk document dat opgemaakte XML-gegevens weergeeft. In tegenstelling tot een hele XSLT-pagina is het een

onafhankelijke bestand dat geen

<body>- of <head>-tag heeft. Als u XML-gegevens op een eigen pagina wilt weergeven,

dient u een hele XSLT-pagina te maken en uw XML-gegevens daaraan te binden. Als u echter XML-gegevens in een

bepaalde sectie van een bestaande dynamische pagina wilt weergeven, bijvoorbeeld een dynamische startpagina voor een

winkel van sportartikelen met sportuitslagen van een RSS-bron aan één zijde van de pagina, dient u een XSLT-fragment te

maken en de verwijzing hiernaar in de dynamische pagina op te nemen. XSLT-fragmenten maken en deze samen met

andere dynamische pagina's gebruiken voor het weergeven van XML-gegevens, is het gebruikelijke scenario.

Het maken van het XSLT-fragment is de eerste stap bij het maken van dit soort pagina's. Het is een afzonderlijk bestand

met de indeling, opmaak en dergelijke van de XML-gegevens die u uiteindelijk in de dynamische pagina wilt weergeven.

Als u een XSLT-fragment maakt, plaatst u een verwijzing hiernaar in uw dynamische pagina (bijvoorbeeld een PHP- of

ColdFusion-pagina). De ingevoegde verwijzing naar het fragment werkt ongeveer als een Server Side Include (SSI). De

opgemaakte XML-gegevens (het fragment) bevinden zich in een afzonderlijk bestand en in de ontwerpweergave verschijnt

DREAMWEAVER CS3

Handboek

403

een tijdelijke aanduiding op de dynamische pagina zelf. Als een browser de dynamische pagina met de verwijzing naar het

fragment opvraagt, verwerkt de server de opgenomen instructie en maakt een nieuw document met de opgemaakte inhoud

van het fragment in plaats van de tijdelijke aanduiding.

U gebruikt het servergedrag voor XSL-transformatie voor het invoegen van de verwijzing naar een XSLT-fragment in een

dynamische pagina. Bij het invoegen van de verwijzing genereert Dreamweaver in de hoofdmap van de site een map

includes/MM_XSLTransform/ met een runtime bibliotheekbestand. De toepassingsserver gebruikt de in dit bestand

gedefinieerde functies bij het transformeren van de opgegeven XML-gegevens. Het bestand haalt de XML-gegevens en de

XSLT-fragmenten op, voert de XSL-transformatie uit en plaatst de resultaten op de webpagina.

Het bestand met het XSLT-fragment, het XML-bestand met uw gegevens en het gegenereerde runtime bibliotheekbestand

moeten alle op de server aanwezig zijn om de pagina correct te kunnen weergeven. (Als u een extern XML-bestand als

gegevensbron gebruikt–bijvoorbeeld van een RSS-bron–moet dat bestand zich uiteraard elders op internet bevinden.)

U kunt met Dreamweaver ook hele XSLT-pagina's maken voor gebruik bij server-side transformaties. Een hele XSLT-

pagina werkt op dezelfde manier als een XSLT-fragment, zij het dat, wanneer u de verwijzing naar de hele XSLT-pagina

invoegt met het servergedrag voor XSL-transformatie, u de volledige inhoud van een HTML-pagina invoegt. De

dynamische pagina (de .cfm-, .php-, .asp- of .net-pagina die als de containerpagina fungeert) moet dus van alle HTML

worden ontdaan voordat u de verwijzing invoegt.

Dreamweaver ondersteunt XSL-transformaties voor ColdFusion-, ASP-, ASP.NET- en PHP-pagina's.

Opmerking: Uw server moet correct zijn geconfigureerd voor het uitvoeren van server-side transformaties. Neem contact op

met uw serverbeheerder of ga naar www.adobe.com/go/dw_xsl_nl voor meer informatie.

Zie ook

“XSL-transformaties op de server uitvoeren” op pagina 408

DREAMWEAVER CS3

Handboek

404

Client-side XSL-transformaties

U kunt XSL-transformaties op de client uitvoeren zonder een toepassingsserver. Met Dreamweaver kunt u een hele XSLT-

pagina maken die de transformaties uitvoert. Voor client-side transformaties is echter manipulatie van het XML-bestand

vereist met de gegevens die u wilt weergeven. Bovendien werken client-side transformaties alleen in moderne browsers

(Internet Explorer 6, Netscape 8, Mozilla 1.8 en Firefox 1.0.2). Zie www.w3schools.com/xsl/xsl_browsers.asp voor meer

informatie over browsers die XSL-transformaties wel of niet ondersteunen.

Maak eerst een hele XSLT-pagina en koppel daaraan een XML-gegevensbron. (Dreamweaver vraagt u om de gegevensbron

te koppelen wanneer u de nieuwe pagina maakt.) U kunt een XSLT-pagina helemaal zelf samenstellen of u kunt een

bestaande HTML-pagina omzetten naar een XSLT-pagina. Als u een bestaande HTML-pagina omzet naar een XSLT-

pagina, moet u daaraan met het paneel Bindingen (Venster > Bindingen) een XML-gegevensbron koppelen.

Als uw XSLT-pagina klaar is, moet u deze koppelen aan het XML-bestand met de XML-gegevens door in het XML-bestand

zelf een verwijzing in te voegen naar de XSLT-pagina (ongeveer zoals u een verwijzing invoegt naar een externe CSS-

stijlpagina in de sectie

<head> van een HTML-pagina). In een browser moeten bezoekers het XML-bestand zien (niet de

XSLT-pagina). Als bezoekers de pagina bekijken, voert de browser de XSL-transformatie uit en geeft de XML-gegevens

weer die door de gekoppelde XSLT-pagina zijn opgemaakt.

De relatie tussen de gekoppelde XSLT- en XML-pagina's is in principe dezelfde, maar is anders dan de externe CSS/HTML-

paginamodellen. Als u een HTML-pagina met inhoud hebt (bijvoorbeeld tekst), gebruikt u een externe stijlpagina voor de

opmaak van die inhoud. De HTML-pagina bepaalt de inhoud. De externe CSS-code, die de gebruiker nooit te zien krijgt,

bepaalt de presentatie. Bij XSLT en XML is de situatie omgekeerd. Het XML-bestand (dat de gebruiker nooit ziet in zijn

ruwe vorm) bepaalt de inhoud en de XSLT-pagina bepaalt de presentatie. De XSLT-pagina bevat de tabellen, opmaak,

afbeeldingen enzovoort die de standaard HTML gewoonlijk bevat. Als een gebruiker het XML-bestand in een browser

bekijkt, wordt de inhoud door de XSLT-pagina opgemaakt.

Als u Dreamweaver gebruikt om een XSLT-pagina aan een XML-pagina te koppelen, voegt Dreamweaver bovenaan in de

XML-pagina de juiste code voor u in. Als u eigenaar bent van de XML-pagina waaraan u koppelt (dat wil zeggen dat het

XML-bestand alleen op uw webserver aanwezig is), hoeft u alleen met Dreamweaver de juiste code in te voegen die de beide

pagina's koppelt. Als u eigenaar bent van het XML-bestand, zijn de door de client uitgevoerde XSL-transformaties volledig

dynamisch. Dit houdt in dat, telkens als u de gegevens in het XML-bestand bijwerkt, elke HTML-uitvoer met de

gekoppelde XSLT-pagina automatisch wordt bijgewerkt aan de hand van de nieuwe informatie.

DREAMWEAVER CS3

Handboek

405

Opmerking: De XML- en XSL-bestanden voor client-side transformaties moeten zich in dezelfde directory bevinden. Anders

leest de browser het XML-bestand en zoekt deze de XSLT-pagina voor de transformatie, maar zal deze de elementen

(stijlpagina's, afbeeldingen en dergelijke) die door de relatieve koppelingen in de XSLT-pagina gedefinieerd zijn, niet vinden.

Als u niet de eigenaar bent van de XML-pagina waaraan u koppelt (bijvoorbeeld als u XML-gegevens van een RSS-bron

ergens op het web wilt gebruiken), is de workflow iets gecompliceerder. Voor het uitvoeren van client-side transformaties

met XML-gegevens van een externe bron moet u eerst het XML-bronbestand downloaden naar de directory waarin uw

XSLT-pagina zich bevindt. Als de XML-pagina op uw lokale site aanwezig is, kunt u met Dreamweaver de juiste code

toevoegen die de XML-pagina aan de XSLT-pagina koppelt en beide pagina's (het gedownloade XML-bestand en de

gekoppelde XSLT-pagina) naar uw webserver posten. Als de gebruiker in een browser de XML-pagina bekijkt, wordt de

inhoud door de XSLT-pagina opgemaakt, net als in het vorige voorbeeld.

Het nadeel van het uitvoeren van client-side XSL transformaties op XML-gegevens uit een externe bron is dat de XML-

gegevens slechts gedeeltelijk "dynamisch" zijn. Het XML-bestand dat u downloadt, is slechts een "momentopname" van het

bestand dat zich elders op het web bevindt. Als het oorspronkelijke XML-bestand ergens op het web gewijzigd wordt, moet

u het opnieuw downloaden, het opnieuw aan de XSLT-pagina koppelen, en het XML-bestand opnieuw naar uw webserver

posten. De browser geeft alleen de gegevens weer die het van het XML-bestand op uw webserver ontvangt, niet de gegevens

die het oorspronkelijke XML-bronbestand bevat.

Zie ook

“XSL-transformaties op de client uitvoeren” op pagina 424

XML-gegevens en herhalende elementen

Met Herhalingsgebied XSLT-object kunt u herhalende elementen van een XML-bestand op een pagina herhalen. Elk gebied

met een tijdelijke aanduiding voor XML-gegevens kan als herhalingsgebied worden aangemerkt. De meest voorkomende

gebieden zijn echter een tabel, tabelrij of een reeks tabelrijen.

DREAMWEAVER CS3

Handboek

406

In het volgende voorbeeld wordt geïllustreerd hoe het Herhalingsgebied XSLT-object wordt toegepast op een tabelrij met

menu-informatie voor een restaurant. De eerste rij toont drie elementen van het XML-schema: gerecht, beschrijving en

prijs. Als Herhalingsgebied XSLT-object op de tabelrij wordt toegepast en de pagina wordt verwerkt door een

toepassingsserver of een browser, wordt de tabel herhaald met in elke nieuwe tabelrij unieke ingevoegde gegevens.

Als u Herhalingsgebied XSLT-object op een element in het documentvenster toepast, verschijnt een dunne , grijze omtrek

met een tab rond het herhaalde gebied. Als u uw werk in een browser bekijkt (Bestand > Voorvertoning in browser),

verdwijnt de grijze omtrek, wordt de selectie uitgebreid en geeft deze de opgegeven herhalende elementen in het XML-

bestand weer, zoals in de vorige afbeelding.

Als u een Herhalingsgebied XSLT-object aan de pagina toevoegt, wordt de lengte van de tijdelijke aanduiding voor de XML-

gegevens in het documentvenster ingekort. Dat komt omdat Dreamweaver het XPath (SML Path language) voor de

tijdelijke aanduiding voor de XML-gegevens bijwerkt, zodat dit gerelateerd is aan het pad van het herhalende element.

De volgende code is voor een tabel met twee dynamische tijdelijke aanduidingen en waarbij geen Herhalingsgebied XSLT-

object is toegepast:

<tr>

</tr>

<tr>

</tr>

</table>

De volgende code is voor dezelfde tabel maar waarbij wel het Herhalingsgebied XSLT-object is toegepast:

DREAMWEAVER CS3

Handboek

407

<xsl:for-each select="rss/channel/item">

<tr>

</tr>

<tr>

</tr>

</table>

</xsl:for-each>

In het vorige voorbeeld heeft Dreamweaver het XPath bijgewerkt voor alle elementen die binnen het Herhalingsgebied

vallen (titel en omschrijving), en relatief zijn ten opzichte van het XPath in de ingesloten

<xsl:for-each>-tags in plaats van

het volledige document.

Dreamweaver genereert ook in andere gevallen contextrelatieve XPath-expressies. Als u bijvoorbeeld een tijdelijke

aanduiding voor XML-gegevens naar een tabel sleept waarin al een Herhalingsgebied XSLT-object is toegepast, geeft

Dreamweaver automatisch het XPath weer dat gerelateerd is aan het bestaande XPath in de ingesloten

<xsl:for-each>-tags.

Zie ook

“Herhalende XML-elementen weergeven” op pagina 412

XML-gegevens voorvertonen

Als u Voorvertoning in browser (Bestand > Voorvertoning in browser) gebruikt om de XML-gegevens te bekijken die u in

een XSLT-fragment of een hele XSLT-pagina hebt ingevoegd, is de engine die de XSL-transformatie uitvoert, voor elke

situatie verschillend. Voor dynamische pagina's met XSLT-fragmenten voert de toepassingsserver telkens de transformatie

uit. Andere keren kan Dreamweaver of de browser dat doen.

De volgende tabel geeft een overzicht van de situaties bij gebruik van Voorvertoning in browser en de engines die de

verschillende transformaties uitvoeren.

De volgende onderwerpen bevatten richtlijnen voor het bepalen van de juiste voorvertoningsmethodes op basis van uw

wensen.

Pagina's bekijken voor server-side transformaties

Bij server-side transformaties ziet de bezoeker van de site uiteindelijk de inhoud die door uw toepassingsserver

getransformeerd is. Bij het bouwen van XSLT- en dynamische pagina's voor gebruik met server-side transformaties is het

altijd raadzaam om de dynamische pagina met het XSLT-fragment te bekijken in plaats van het XSLT-fragment zelf. In het

eerste scenario gebruikt u de toepassingsserver, die zorgt dat uw voorvertoning overeenstemt met wat de bezoekers van de

site zullen zien als ze uw pagina bezoeken. In het tweede scenario voert Dreamweaver de transformatie uit en kunnen de

resultaten lichtelijk afwijken. Tijdens het bouwen van uw XSLT-fragment kunt u dit ook bekijken met Dreamweaver, maar

u krijgt de meest accurate resultaten bij de gegevensweergave als u de toepassingsserver gebruikt voor het bekijken van uw

dynamische pagina nadat u het XSLT-fragment hebt ingevoegd.

Pagina's voor client-side transformaties voorvertonen

Bij client-side transformaties ziet de bezoeker van de site uiteindelijk de inhoud die door een browser getransformeerd is.

U bereikt dat door een koppeling toe te voegen van het XML-bestand naar de XSLT-pagina. Als u het XML-bestand in

Dreamweaver opent en in een browser bekijkt, dwingt u de browser om het XML-bestand te laden en de transformatie uit

te voeren. U ervaart dan hetzelfde als de bezoeker van uw site.

In browser bekeken paginatype Datatransformatie uitgevoerd door

Dynamische pagina met XSLT-fragment Toepassingsserver

XSLT-fragment of hele XSLT-pagina Dreamweaver

XML-bestand met koppeling naar hele XSLT-pagina Browser

DREAMWEAVER CS3

Handboek

408

Deze benadering bemoeilijkt echter foutoplossingen voor uw pagina, omdat de browser de XML transformeert en intern

de HTML genereert. Als u de optie Bron weergeven (of het equivalent daarvan) kiest om fouten in de gegenereerde HTML

op te lossen, ziet u alleen de originele XML die de browser heeft ontvangen, niet de volledige HTML (tags, stijlen enzovoort)

die voor de weergave van de pagina zorgt. Om de volledige HTML zichtbaar te maken bij het bekijken van de broncode

moet u de XSLT-pagina in een browser bekijken.

Hele XSLT-pagina's en XSLT-fragmenten voorvertonen

Bij het maken van hele XSLT-pagina's en XSLT-fragmenten zult u uw werk willen bekijken om te kunnen zorgen dat uw

gegevens correct worden weergegeven. Als u een hele XSLT-pagina of een XSLT-fragment met Voorvertoning in Browser

bekijkt, voert Dreamweaver de transformatie uit met een ingebouwde transformatie-engine. Deze methode geeft u snelle

resultaten en vergemakkelijkt het u om uw pagina stapsgewijs op te bouwen en de fouten erin op te lossen. Het biedt u ook

een manier om de volledige HTML (tags, stijlen enzovoort) te bekijken met de optie Bron weergeven (of het equivalent

daarvan) in de browser.

Opmerking: DezemethodewordtdoorgaansgebruiktwanneerubegintmethetbouwenvanXSLT-pagina's,ongeachtdevraag

of u uw gegevens op de client dan wel de server laat transformeren.

XSL-transformaties op de server uitvoeren

Workflow voor het uitvoeren van server-side XSL-transformaties

U kunt server-side XSL-transformaties op de server uitvoeren. Lees meer over server-side en client-side XSL-

transformaties en over het gebruik van XML en XSL bij webpagina's voordat u pagina's gaat bouwen die XML-gegevens

weergeven.

Opmerking: Uw server moet correct zijn geconfigureerd voor het uitvoeren van server-side transformaties. Neem contact op

met uw serverbeheerder of ga naar www.adobe.com/go/dw_xsl_nl voor meer informatie.

De algemene workflow voor het uitvoeren van server-side XSL-transformaties is als volgt (elke stap is in andere

onderwerpen beschreven).

1. Zet een Dreamweaver-site op.

2. Kies een server-technologie en stel een toepassingsserver in.

3. Test de toepassingsserver.

Maak bijvoorbeeld een pagina die verwerking vereist, en zorg ervoor dat de toepassingsserver de pagina verwerkt. Ga naar

www.adobe.com/go/dw_xsl_nl voor een zelfstudie over hoe dit in zijn werk gaat.

4. Maak een XSLT-fragment of -pagina of zet een HTML-pagina om in een XSLT-pagina.

• Maak op uw Dreamweaver-site een XSLT-fragment of een hele XSLT-pagina.

• Zet een bestaande HTML-pagina om in een hele XSLT-pagina.

5. Koppel een XML-gegevensbron aan de pagina.

6. Geef XML-gegevens weer door de gegevens aan het XSLT-fragment of de hele XSLT-pagina te binden.

7. Voeg zo nodig een Herhalingsgebied XSLT-object aan de tabel of de tabelrij toe met de tijdelijke aanduidingen

voor XML-gegevens.

8. Voer verwijzingen in.

• Gebruik het servergedrag voor XSL-transformatie voor het invoegen van een verwijzing naar een XSLT-fragment in een

dynamische pagina.

DREAMWEAVER CS3

Handboek

409

• Om een verwijzing naar de hele XSLT-pagina in de dynamische pagina in te voegen, verwijdert u alle HTML-code van

een dynamische pagina en gebruikt u het servergedrag voor XSL-transformatie.

9. Publiceer de pagina en het fragment.

Publiceer zowel de dynamische pagina als het XSLT-fragment (of de hele XSLT-pagina) naar de toepassingsserver. Als u

een lokaal XML-bestand gebruikt, moet ook dit gepubliceerd worden.

10. Bekijk de dynamische pagina in een browser.

De toepassingsserver transformeert dan de XML-gegevens, voegt deze aan de dynamische pagina toe en geeft ze in de

browser weer.

Zie ook

“Een Dreamweaver-site opzetten” op pagina 38

“De toepassingsserver kiezen” op pagina 477

“XML en XSL gebruiken in webpagina's” op pagina 401

“Client-side XSL-transformaties” op pagina 404

“Server-side XSL-transformaties” op pagina 402

XSLT-pagina maken

U kunt XSLT-pagina's maken waarmee u XML-gegevens kunt weergeven op webpagina's. U kunt een hele XSLT-pagina

maken (een XLST-pagina die een

<body>-code en een <head>-code bevat), of u kunt een XSLT-fragment maken. Als u een

XSLT-fragment maakt, maakt u een onafhankelijke bestand dat geen body- of head-code bevat; een eenvoudig stukje code

dat later wordt ingevoegd in een dynamische pagina.

Opmerking: Als u begint met een bestaande XSLT-pagina, moet u daar een XML-gegevensbron aan koppelen.

1 Selecteer Bestand > Nieuw.

2 Selecteer in de categorie Lege pagina van het dialoogvenster Nieuw document een van de volgende opties in de kolom

Paginatype:

• Selecteer XSLT (hele pagina) om een hele XSLT-pagina te maken.

• Selecteer XSLT (fragment) om een XSLT-fragment te maken.

3 Klik op Maken en voer een van de volgende handelingen uit in het dialoogvenster XML-bron lokaliseren:

• Selecteer Lokaal bestand koppelen, klik op Bladeren, ga naar een lokaal XML-bestand op uw computer en klik op OK.

• Kies Extern bestand koppelen, voer de URL in van een XML-bestand op internet (bijvoorbeeld een van een RSS-bron)

en klik op OK.

Opmerking: Als u op de knop Annuleren klikt, wordt een nieuwe XSLT-pagina zonder gekoppelde XML-gegevensbron

gegenereerd.

DREAMWEAVER CS3

Handboek

410

Het paneel Bindingen wordt gevuld met het schema van uw XML-gegevensbron.

De volgende tabel bevat een uitleg van de verschillende elementen in het schema die kunnen worden weergegeven:

4 Sla uw nieuwe pagina op (Bestand > Opslaan) met de extensie .xsl of .xslt (.xsl is de standaardextensie).

HTML-pagina's omzetten naar XSLT-pagina's

U kunt ook bestaande HTML-pagina's omzetten naar XSLT-pagina's. Als u bijvoorbeeld een vooraf ontworpen statische

pagina hebt waaraan u XML-gegevens wilt toevoegen, kunt u de pagina omzetten naar een XSLT-pagina in plaats van een

XSLT-pagina te maken en deze volledig zelf op te bouwen.

1 Open de HTML-pagina die u wilt omzetten.

2 Kies Bestand > Omzetten > XSLT 1.0.

In het documentvenster wordt een kopie van de pagina geopend. De nieuwe pagina is een XSL-stijlpagina, opgeslagen met

de extensie .xsl.

Element Vertegenwoordigt Details

<> Verplicht niet-herhalend XML-

element

Een element dat precies één keer

voorkomt binnen het bovenliggende

knooppunt

<>+ Herhalend XML-element Een element dat een of meer keer

voorkomt binnen het bovenliggende

knooppunt

<>+ Optioneel XML-element Een element dat nul of meer keer

voorkomt binnen het bovenliggende

knooppunt

Vetgedrukt elementknooppunt Huidig contextelement Normaal gesproken het herhalende

element als de invoegpositie in een

herhalende regio staat

@XML-kenmerk

DREAMWEAVER CS3

Handboek

411

XML-gegevensbronnen koppelen

Als u met een bestaande XSLT-pagina start of geen XML-gegevensbron koppelt bij het maken van een nieuwe XSLT-pagina

met Dreamweaver, moet u een XML-gegevensbron koppelen met het paneel Bindingen.

1 Klik op de XML-koppeling in het paneel Bindingen (Venster > Bindingen).

Opmerking: U kunt ook op de koppeling Bron klikken rechtsboven in het paneel Bindingen om een XML-gegevensbron toe te

voegen.

2 Ga op een van de volgende manieren te werk:

• Selecteer Lokaal bestand koppelen, klik op Bladeren, ga naar een lokaal XML-bestand op uw computer en klik op OK.

• Kies Extern bestand koppelen, voer de URL in van een XML-bestand op internet (bijvoorbeeld een van een RSS-bron).

3 Klik op OK om het dialoogvenster XML-bron lokaliseren te sluiten.

Het paneel Bindingen wordt gevuld met het schema van uw XML-gegevensbron.

XML-gegevens weergeven op XSLT-pagina's

Nadat u een XSLT-pagina hebt gemaakt en een XML-gegevensbron hebt gekoppeld, kunt u gegevens aan de pagina binden.

Daarvoor moet u een tijdelijke aanduiding voor XML-gegevens aan de pagina toevoegen en vervolgens met de

expressiebouwer voor XPath of met de eigenschappencontrole de geselecteerde gegevens opmaken die op de pagina worden

weergegeven.

1 Open een XSLT-pagina met de gekoppelde XML-gegevensbron.

2 Kies Invoegen > Tabel om een tabel aan de pagina toe te voegen (optioneel). Een tabel helpt u bij het ordenen van uw

XML-gegevens.

Opmerking: Doorgaans kunt u Herhalingsgebied XSLT-object gebruiken om herhalende XML-elementen op een pagina weer

te geven. Ditmaal zou u een tabel met één rij en een of meer kolommen of een tabel met twee rijen kunnen maken als u een

tabelkop wilt opnemen.

DREAMWEAVER CS3

Handboek

412

3 In het paneel Bindingen kiest u een XML-element en sleept het naar een plaats op de pagina waar u gegevens wilt

invoegen.

Op de pagina verschijnt een tijdelijke aanduiding voor XML-gegevens. Deze aanduiding wordt gemarkeerd en staat tussen

accolades. Hij gebruikt de XPath-syntaxis (XML Path-taal) om de hiërarchische structuur van het XML-schema te

beschrijven. Als u bijvoorbeeld het onderliggende element title naar de pagina sleept en dat element de bovenliggende

elementen rss, channel en item heeft, is de syntaxis van de tijdelijke aanduiding voor de dynamische inhoud

rss/channel/item/title.

Dubbelklik op de tijdelijke aanduiding voor XML-gegevens op de pagina om de expressiebouwer voor XPath te openen.

Met de expressiebouwer voor XPath kunt u geselecteerde gegevens opmaken en andere items in het XML-schema

selecteren.

4 (Optioneel) Pas stijlen toe op uw XML-gegevens door een tijdelijke aanduiding voor XML-gegevens te selecteren en er,

zoals bij elk ander deel van de inhoud, stijlen op toe te passen met de eigenschappencontrole of het paneel CSS-stijlen. U

kunt ook Design-Time stijlpagina's gebruiken om stijlen toe te passen op XSLT-fragmenten. Beide methoden hebben hun

eigen voordelen en beperkingen.

5 Bekijk uw werk in een browser (Bestand > Voorvertoning in browser).

Opmerking: Als u uw werk met Voorvertoning in browser bekijkt, voert Dreamweaver een interne transformatie uit zonder

een toepassingsserver te gebruiken.

Zie ook

“XML-gegevens voorvertonen” op pagina 407

“Inhoud in tabellen presenteren” op pagina 169

Herhalende XML-elementen weergeven

Met Herhalingsgebied XSLT-object kunt u herhalende elementen van een XML-bronbestand op een webpagina herhalen.

Als u bijvoorbeeld titels van artikelen en beschrijvingen van een nieuwsbron met 10 tot 20 artikelen weergeeft, is elke titel

en beschrijving in het XML-bestand waarschijnlijk een onderliggend element van een herhalend element.

Elk gebied in de ontwerpweergave met een tijdelijke aanduiding voor XML-gegevens kan gewijzigd worden in een herhaald

gebied. De meest voorkomende gebieden zijn echter een tabel, tabelrij of een reeks tabelrijen.

1 Selecteer in de ontwerpweergave een of meerdere gebieden met tijdelijke aanduidingen voor XML-gegevens.

DREAMWEAVER CS3

Handboek

413

De selectie kan van alles zijn, een tabel, een tabelrij en zelfs een alinea tekst.

Als u een gebied op de pagina nauwkeurig wilt selecteren, gebruikt u de tagkiezer in de linkerbenedenhoek van het

documentvenster. Als het gebied bijvoorbeeld een tabel is, klikt u in de tabel op de pagina en daarna op de tag in de

tagkiezer.

2 Ga op een van de volgende manieren te werk

• Kies Invoegen > XSLT-objecten > Herhalingsgebied.

• Klik op Herhalingsgebied in de categorie XSLT van de invoegbalk.

3 Selecteer in de expressiebouwer voor XPath het herhalende element dat door een klein plusteken aangeduid wordt.

4 Klik op OK.

In het documentvenster verschijnt een dunne grijze omtrek met tab rond het herhaalde gebied. Als u uw werk in een

browser bekijkt (Bestand > Voorvertoning in browser), verdwijnt de grijze omtrek, wordt de selectie uitgebreid en geeft

deze de opgegeven herhalende elementen in het XML-bestand weer.

Als u het Herhalingsgebied XSLT-object aan de pagina toevoegt, wordt de lengte van de tijdelijke aanduiding voor de XML-

gegevens in het documentvenster ingekort. Dat komt omdat Dreamweaver het XPath voor de tijdelijke aanduiding voor de

XML-gegevens bijwerkt, zodat deze gerelateerd is aan het pad van het herhalende element.

DREAMWEAVER CS3

Handboek

414

Zie ook

“Expressies voor XML-gegevens toevoegen met de expressiebouwer voor XPath” op pagina 420

“XML-gegevens en herhalende elementen” op pagina 405

Eigenschappen herhalingsgebied instellen (XSL)

In de eigenschappencontrole kunt u een ander XML-knooppunt selecteren om het herhalingsgebied te maken.

❖ Voer in het vak Selecteren een nieuw knooppunt in, druk dan op het pictogram met de bliksemflits en selecteer het

knooppunt uit het XML-schema dat verschijnt.

Herhalingsgebied XSLT-object bewerken

Nadat u een Herhalingsgebied XSLT-object aan een gebied hebt toegevoegd, kunt u dit met de eigenschappencontrole

bewerken.

1 Selecteer het object door op de grijze tab rond het herhaalde gebied te klikken.

2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op het dynamische pictogram naast het tekstveld

Selecteren.

3 Breng in de expressiebouwer voor XPath de wijzigingen aan en klik op OK.

XSLT-fragmenten invoegen in dynamische pagina's

Nadat u een XSLT-fragment hebt gemaakt, kunt u het met het servergedrag voor XSL-transformatie invoegen in een

dynamische webpagina. Als u het servergedrag aan uw pagina toevoegt en de pagina in een browser bekijkt, voert een

toepassingsserver een transformatie uit die de XML-gegevens van het geselecteerde XSLT-fragment weergeeft.

Dreamweaver ondersteunt XSL-transformaties voor ColdFusion-, ASP-, ASP.NET- en PHP-pagina's.

Opmerking: Als u de inhoud van een hele XSLT-pagina in een dynamische pagina wilt invoegen, is de procedure hetzelfde.

Voordat u servergedrag voor XSL-transformatie gebruikt om de hele XSLT-pagina in te voegen, moet u alle HTML-code

verwijderen uit de dynamische pagina.

1 Open een bestaande ColdFusion-, ASP-, ASP.NET- of PHP-pagina.

2 Plaats de invoegpositie in de ontwerpweergave op de plaats waar u het XSLT-fragment wilt invoegen.

Opmerking: Bij het invoegen van XSLT-fragmenten dient u altijd op Code- en ontwerpweergaven tonen te klikken nadat u de

invoegpositie op de pagina hebt geplaatst, om te zorgen dat de invoegpositie op de juiste plaats staat. Als dat niet het geval is,

kunt u elders in codeweergave klikken om de invoegpositie op de gewenste plaats te zetten.

DREAMWEAVER CS3

Handboek

415

3 Klik in het paneel Servergedrag (Venster > Servergedrag) op de knop Plus (+) en kies XSL-transformatie.

4 Klik in het dialoogvenster XSL-transformatie op Bladeren en blader naar een XSLT-fragment of een hele XSLT-pagina.

Dreamweaver vult het volgende tekstveld met het bestandspad of de URL van het XML-bestand dat aan het opgegeven

fragment is gekoppeld. Klik op Bladeren als u dit wilt wijzigen en ga naar een ander bestand.

5 Klik op de knop Plus (+) om een XSLT-parameter toe te voegen (optioneel).

6 Klik op OK om een verwijzing naar het XSLT-fragment in de pagina in te voegen. Het fragment kan niet worden

bewerkt. U kunt dubbelklikken op het fragment om het bronbestand ervan te openen en te bewerken.

In de hoofdmap van de site wordt ook een map includes/MM_XSLTransform/ gemaakt met een runtime

bibliotheekbestand. De toepassingsserver gebruikt de in dit bestand gedefinieerde functies voor het uitvoeren van de

transformatie.

7 Upload de dynamische pagina naar uw server (Site > Plaatsen) en klik op Ja om de afhankelijke bestanden op te nemen.

Het bestand met het XSLT-fragment, het XML-bestand met uw gegevens en het gegenereerde runtime bibliotheekbestand

moeten alle op de server aanwezig zijn om de pagina correct te kunnen weergeven. (Als u een extern XML-bestand als

gegevensbron hebt geselecteerd, moet dat bestand zich elders op internet bevinden.)

Zie ook

“XSLT-pagina maken” op pagina 409

“Server-side XSL-transformaties” op pagina 402

XSLT-fragmenten verwijderen uit dynamische pagina's

U kunt een XSLT-fragment uit een pagina verwijderen door het servergedrag voor XSL-transformatie te verwijderen dat

gebruikt is voor het invoegen van het fragment. Door het servergedrag te verwijderen, wordt alleen het XSLT-fragment

verwijderd, niet de bijbehorende XML-, XSLT- en runtime bibliotheekbestanden.

1 Selecteer in het paneel Servergedrag (Venster > Servergedrag) het servergedrag voor XSL-transformatie dat u wilt

verwijderen.

2 Klik op de minknop (-).

Opmerking: Servergedrag moet u altijd op deze manier verwijderen. Door de gegenereerde code handmatig te verwijderen

wordt het servergedrag slechts gedeeltelijk verwijderd, ook als het servergedrag uit het paneel Servergedrag verdwijnt.

DREAMWEAVER CS3

Handboek

416

Servergedrag voor XSL-transformaties bewerken

Nadat u een XSLT-fragment aan een dynamische webpagina hebt toegevoegd, kunt u te allen tijde het servergedrag voor

XSL-transformatie bewerken.

1 Dubbelklik in het paneel Servergedrag (Venster > Servergedrag) op het servergedrag voor XSL-transformatie dat u wilt

bewerken.

2 Breng de gewenste wijzigingen aan en klik op OK.

Een dynamische koppeling maken

U kunt een dynamische koppeling op uw XSLT-pagina maken die verwijst naar een specifieke URL als de gebruiker op een

bepaald woord of een groep woorden in uw XML-gegevens klikt. Zie de Dreamweaver-errata op

www.adobe.com/go/dw_documentation_nl voor volledige instructies.

Stijlen toepassen op XSLT-fragmenten

Als u een hele XSLT-pagina maakt (dat wil zeggen een XSLT-pagina met <body>- en <head>-tags), kunt u XML-gegevens

op de pagina weergeven en de gegevens met de eigenschappencontrole of het paneel CSS-stijlen opmaken zoals elk ander

deel van de inhoud. Als u een XSLT-fragment maakt om dit in een dynamische pagina in te voegen (bijvoorbeeld in een

ASP-, PHP- of ColdFusion-pagina), is het weergeven van stijlen in het fragment en in de dynamische pagina echter iets

gecompliceerder. Hoewel u afzonderlijk en buiten de dynamische pagina om aan een XSLT-fragment werkt, is het

belangrijk eraan te denken dat het fragment bedoeld is voor gebruik binnen de dynamische pagina en dat de uitvoer van

het XSLT-fragment uiteindelijk ergens tussen de

<body>-tags van de dynamische pagina terechtkomt. Bij deze workflow

moet u goed opletten dat u geen

<head>-elementen (zoals stijldefinities en koppelingen naar externe stijlpagina's) in XSLT-

fragmenten opneemt. Anders plaatst de toepassingsserver deze elementen in de

<body> van de dynamische pagina en

genereert dan een ongeldige opmaak.

Stel dat u een XSLT-fragment wilt maken dat in een dynamische pagina wordt ingevoegd en het fragment opmaakt met

dezelfde externe stijlpagina als de dynamische pagina. Als u dezelfde stijlpagina aan het fragment koppelt, bevat de

resulterende HTML-pagina een dubbele koppeling naar de stijlpagina (een in de

<head>-sectie van de dynamische pagina

en een andere in de

<body>-sectie van de pagina, waarin de inhoud van het XSLT-fragment verschijnt). In plaats van deze

benadering te kiezen dient u Design-Time stijlpagina's te gebruiken voor verwijzing naar de externe stijlpagina.

Gebruik bij het opmaken van de inhoud van XSLT-fragmenten de volgende workflow.

• Koppel eerst een externe stijlpagina aan de dynamische pagina. (Dit is de beste werkwijze voor het toepassen van stijlen

op de inhoud van elke webpagina.)

• Koppel vervolgens dezelfde externe stijlpagina aan het XSLT-fragment als een Design-Time stijlblad. Zoals de naam

aangeeft, werken Design-Time stijlpagina's alleen in de ontwerpweergave van Dreamweaver.

Nadatudevorigetweestappenhebtuitgevoerd,kuntunieuwestijlenmakeninuwXSLT-fragmentmetdezelfdestijlpagina

als u aan uw dynamische pagina hebt gekoppeld. De HTML-uitvoer zal schoner zijn (omdat de verwijzing naar de

stijlpagina alleen geldig is terwijl u in Dreamweaver werkt) en het fragment zal toch de juiste stijlen weergeven in de

ontwerpweergave. Bovendien worden al uw stijlen toegepast op zowel het fragment als de dynamische pagina wanneer u

de dynamische pagina in de ontwerpweergave bekijkt of in een browser voorvertoont.

Opmerking: Als u het XSLT-fragment in een browser voorvertoont, geeft deze de stijlen niet weer. In plaats daarvan dient u

dedynamischepaginaindebrowservoortevertonenomhetXSLT-fragmentindecontextvandedynamischepaginatezien.

Zie www.adobe.com/go/dw_xsl_styles_nl voor meer informatie over het gebruik van CSS voor het opmaken van XSLT-

fragmenten.

Zie ook

“Design-Time stijlpagina's gebruiken” op pagina 138

DREAMWEAVER CS3

Handboek

417

Parameters met XSL-transformaties gebruiken

Bij het toevoegen van het servergedrag voor XSL-transformatie aan een webpagina kunt u parameters voor uw XSL-

transformatie definiëren. Een parameter regelt hoe XML-gegevens worden verwerkt en weergegeven. U kunt bijvoorbeeld

een parameter gebruiken om een bepaald artikel van een nieuwsbron aan te duiden en op te nemen. Als de pagina in een

browser wordt geladen, verschijnt alleen het door u met de parameter opgegeven artikel.

XSLT-parameter aan een XSL-transformatie toevoegen

1 Open het dialoogvenster XSL-transformatie. U kunt deze dialoog openen door te dubbelklikken op een servergedrag

voor XSL-transformatie in het paneel Servergedrag (Venster > Servergedrag) of door een nieuw servergedrag voor XSL-

transformatie toe te voegen.

2 In het dialoogvenster XSL-transformatie klikt u op de knop Plus (+) naast XSLT-parameters.

3 In het vak Naam in het dialoogvenster Parameter toevoegen typt u een naam voor de parameter. Deze naam mag alleen

alfanumerieke tekens bevatten. Er mogen geen spaties in voorkomen.

4 Ga op een van de volgende manieren te werk:

• Als u een statische waarde wilt gebruiken, typt u deze in het vak Waarde.

• Als u een dynamische waarde wilt gebruiken, klikt u op het dynamische pictogram naast het vak Waarde, vult u het

dialoogvenster Dynamische gegevens in en klikt u op OK. Klik op Help in het dialoogvenster Dynamische gegevens voor

meer informatie.

5 In het vak Standaardwaarde typt u de waarde die de parameter moet gebruiken als de pagina geen runtimewaarde

ontvangt. Klik daarna op OK.

XSLT-parameter bewerken

1 Open het dialoogvenster XSL-transformatie. U kunt deze dialoog openen door te dubbelklikken op een servergedrag

voor XSL-transformatie in het paneel Servergedrag (Venster > Servergedrag) of door een nieuw servergedrag voor XSL-

transformatie toe te voegen.

2 Selecteer een parameter uit de lijst van XSLT-parameters.

3 Klik op Bewerken.

4 Breng de gewenste wijzigingen aan en klik op OK.

XSLT-parameter verwijderen

1 Open het dialoogvenster XSL-transformatie. U kunt deze dialoog openen door te dubbelklikken op een servergedrag

voor XSL-transformatie in het paneel Servergedrag (Venster > Servergedrag) of door een nieuw servergedrag voor XSL-

transformatie toe te voegen.

2 Selecteer een parameter uit de lijst van XSLT-parameters.

3 Klik op de minknop (-).

DREAMWEAVER CS3

Handboek

418

Voorwaardelijke XSLT-gebieden maken en bewerken

U kunt enkel- en meervoudige voorwaardelijke gebieden maken op een XSLT-pagina. U kunt in de ontwerpweergave een

element selecteren en daarop een voorwaardelijk gebied toepassen en u kunt een voorwaardelijk gebied invoegen op de

plaats van de invoegpositie in het document.

Als u bijvoorbeeld naast de prijs van een uitverkocht artikel het woord "Uitverkocht" wilt plaatsen, typt u "Uitverkocht" op

de pagina, selecteert u het woord en past u daarna een voorwaardelijk gebied toe op de geselecteerde tekst. Dreamweaver

plaatst de selectie tussen

<xsl:if>-tags en geeft het woord "Uitverkocht" alleen op de pagina weer als de gegevens voldoen

aan de voorwaarden van de voorwaardelijke expressie.

Voorwaardelijk XSLT-gebied toepassen

U kunt een enkelvoudige voorwaardelijke expressie schrijven en in uw XSLT-pagina invoegen. Als de inhoud geselecteerd

is wanneer u het dialoogvenster Voorwaardelijk gebied opent, wordt de inhoud door een

<xsl:if>-blok omsloten. Als de

inhoud niet geselecteerd is, wordt het

<xsl:if>-blok toegevoegd op de plaats van de invoegpositie op de pagina. Het is

raadzaam om met het dialoogvenster te beginnen en de expressie daarna in codeweergave aan te passen.

Het

<xsl:if>-element komt overeen met de if-instructie in andere talen. Door middel van het element kunt u een

voorwaarde testen en op basis van het resultaat een bepaalde actie nemen. Met het

<xsl:if>-element kunt u een expressie

testen voor een enkelvoudige waarde van waar of onwaar.

1 Selecteer Invoegen > XSLT-objecten > Voorwaardelijk gebied of klik op het pictogram Voorwaardelijk gebied in de

categorie XSLT van de invoegbalk.

2 Typ in het dialoogvenster Voorwaardelijk gebied de voorwaardelijke expressie voor het gebied.

Inhetvolgendevoorbeeldwiltutestenofdewaardevanhetkenmerk

@available van het contextknooppunt true (waar) is.

3 Klik op OK.

De volgende code wordt in de XSLT-pagina ingevoegd.

<xsl:if test="@available='true'">

Content goes here

</xsl:if>

Opmerking: Tekenreekswaarden als "true" moet u tussen aanhalingstekens plaatsen. Dreamweaver codeert de

aanhalingstekens voor u (') zodat deze als geldige XHTML worden ingevoerd.

Naast het testen van waarden van knooppunten kunt u alle ondersteunde XSLT-functies in een voorwaardelijke expressie

gebruiken. De voorwaarde wordt getest voor het huidige knooppunt in uw XML-bestand. In het volgende voorbeeld wilt

u het laatste knooppunt in de resultaten testen.

DREAMWEAVER CS3

Handboek

419

Zie de sectie <xsl:if> in het paneel Referentie (Help > Referentie) voor meer informatie en voorbeelden desbetreffende

het schrijven van voorwaardelijke expressies.

Meervoudige voorwaardelijke XSLT-gebieden toepassen

U kunt een enkelvoudige voorwaardelijke expressie schrijven en in uw XSLT-pagina invoegen. Als de inhoud geselecteerd

is wanneer u het dialoogvenster Voorwaardelijk gebied opent, wordt de inhoud door een

<xsl:if>-blok omsloten. Als u

geen inhoud selecteert, wordt het

<xsl:choose>-blok toegevoegd op de plaats van de invoegpositie op de pagina. Het is

raadzaam om met het dialoogvenster te beginnen en de expressie daarna in codeweergave aan te passen.

Het

<xsl:choose>-element komt overeen met de case-instructie in andere talen. Door middel van het element kunt u een

voorwaarde testen en op basis van het resultaat een bepaalde actie nemen. Met het

<xsl:choose>-element kunt u

meervoudige voorwaarden testen.

1 Selecteer Invoegen > XSLT-objecten > Meervoudig voorwaardelijk gebied of klik op het pictogram Meervoudig

voorwaardelijk gebied in de categorie XSLT van de invoegbalk.

2 Typ in het dialoogvenster Meervoudig voorwaardelijk gebied de eerste voorwaarde.

In het volgende voorbeeld wilt u testen of het subelement

price van het contextknooppunt kleiner is dan 5.

3 Klik op OK.

In het voorbeeld wordt de volgende code in uw XSLT-pagina ingevoegd.

<xsl:choose>

<xsl:when test="price<5">

Content goes here

</xsl:when>

<xsl:otherwise>

Content goes here

</xsl:otherwise>

</xsl:choose>

4 Om een andere voorwaarde in te voegen, plaatst u de invoegpositie in codeweergave tussen de paren <xsl:when>-tags

of vlak voor de

<xsl:otherwise>-tag en voegt daarna een voorwaardelijk gebied in (Invoegen > XSLT-objecten >

Voorwaardelijk gebied).

Nadat u de voorwaarde hebt opgegeven en op OK hebt geklikt, wordt een volgende

<xsl:when>-tag ingevoegd in het

<xsl:choose>-blok.

Zie de secties <xsl:choose> in het paneel Referentie (Help > Referentie) voor meer informatie en voorbeelden

desbetreffende het schrijven van voorwaardelijke expressies.

Eigenschappen voorwaardelijk gebied (If) instellen

Doel van de eigenschappencontrole Voorwaardelijk gebied instellen is het wijzigen van de in een voorwaardelijk gebied van

uw XSL-pagina gebruikte voorwaarde. Het voorwaardelijke gebied test de voorwaarde en neemt een bepaalde actie op basis

van het resultaat.

❖ Voer in het vak Test een nieuwe voorwaarde in en druk op Enter.

DREAMWEAVER CS3

Handboek

420

Eigenschappen voorwaarden (When) instellen

Doel van de eigenschappencontrole Voorwaardelijk gebied instellen is het wijzigen van de in een voorwaardelijk gebied van

uw XSL-pagina gebruikte meervoudige voorwaarde. Het meervoudige voorwaardelijke gebied test de voorwaarde en

neemt een bepaalde actie op basis van het resultaat.

❖ Voer in het vak Test een nieuwe voorwaarde in en druk op Enter.

XSL-commentaar invoegen

U kunt XSL-commentaartags aan een document toevoegen en een selectie in XSL-commentaartags omsluiten.

XSL-commentaartags aan een document toevoegen

❖

Ga op een van de volgende manieren te werk:

• Kies in de ontwerpweergave Invoegen > XSLT-objecten > XSL-commentaar, typ de opmerking (of laat het vak leeg) en

klik op OK.

• Kies in codeweergave Invoegen > XSLT-objecten > XSL-commentaar.

U kunt ook op het pictogram XSL-commentaar klikken in de categorie XSLT van de invoegbalk.

Selectie in XSL-commentaartags omsluiten

1 Schakel naar de codeweergave (Weergave > Code).

2 Selecteer de code waarbij u een commentaar wilt maken.

3 Klik in de werkbalk Commentaar toepassen en kies Toepassen <xsl:comment></xsl:comment> Commentaar.

Expressies voor XML-gegevens toevoegen met de expressiebouwer voor XPath

XPath (XML Path Language) is een niet-XML syntaxis voor het adresseren van delen van een XML-document. Deze

syntaxis wordt meestal als een querytaal voor XML-gegevens gebruikt, zoals SQL wordt gebruik voor het zoeken naar

gegevens in databases. Zie de XPath taalspecificatie op de W3C-website van www.w3.org/TR/xpath voor meer informatie

over XPath.

De expressiebouwer voor XPath is een Dreamweaver-functie waarmee u enkelvoudige XPath-expressies kunt bouwen voor

het aanduiden van specifieke knooppunten en herhalingsgebieden. Deze methode heeft, vergeleken met het slepen van

waarden vanuit het XML-schema, als voordeel dat u de weergegeven waarde kunt opmaken. De huidige context wordt

aangeduid op basis van de invoegpositie in het XSL-bestand wanneer het dialoogvenster Expressiebouwer voor XPath

wordt geopend. De huidige context heeft een vet lettertype in het XML-schema. Als u in deze dialoog selecties maakt,

worden ten aanzien van uw huidige context de juiste XPath-instructies gegenereerd. Dat vereenvoudigt het schrijven van

correcte XPath-expressies, zowel voor beginnende als gevorderde gebruikers.

Opmerking: Deze functie is bedoeld om u te helpen bij het bouwen van enkelvoudige XPath-expressies voor het aanduiden van

een bepaald knooppunt of van herhalingsgebieden. U kunt de expressies hiermee niet handmatig bewerken. Als u meervoudige

expressies moet maken, begin dan met de expressiebouwer voor XPath en pas uw expressies aan in codeweergave of met de

eigenschappencontrole.

XPath-expressie maken om een bepaald knooppunt aan te duiden

1 Dubbelklik op de tijdelijke aanduiding voor XML-gegevens op de pagina om de expressiebouwer voor XPath te openen.

2 Selecteer in het dialoogvenster Expressiebouwer voor XPath (Dynamische tekst) een knooppunt in het XML-schema.

De correcte XPath-expressie wordt in het vak Expressie geschreven om het knooppunt aan te duiden.

Opmerking: Als u een ander knooppunt in het XML-schema kiest, wordt de expressie aan uw keuze aangepast.

DREAMWEAVER CS3

Handboek

421

In het Opmerking: Tekenreekswaarden als "true" moet u tussen aanhalingstekens plaatsen. Dreamweaver codeert de

olgende voorbeeld wilt u het subelement

price van het knooppunt item weergeven.

Deze selectie voegt de volgende code in op uw XSLT-pagina:

<xsl:value-of select="price"/>

3 (Optioneel) Selecteer een opmaakoptie in het pop-upmenu Opmaak.

Opmaken van een selectie is handig wanneer het knooppunt een getal als waarde retourneert. Dreamweaver biedt een

voorgedefinieerde lijst van opmaakfuncties. Zie het paneel Referenties voor een volledige lijst van opmaakfuncties en

voorbeelden.

In het volgende voorbeeld wilt u het subelement

price opmaken als een valuta met twee decimalen.

Deze opties voegen de volgende code in op uw XSLT-pagina:

<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>

4 Klik op OK.

DREAMWEAVER CS3

Handboek

422

5 Om de waarde van elk knooppunt in het XML-bestand weer te geven past u een herhalingsgebied toe op het element met

de dynamische tekst (bijvoorbeeld een HTML-tabelrij of een alinea).

Ziedesectie

<xsl:value-of/> in het paneel Referentie voor meer informatie en voorbeelden desbetreffende het selecteren

van knooppunten voor het retourneren van waarden.

Te herhalen knooppunt selecteren

U kunt een knooppunt selecteren om te herhalen en de resultaten eventueel filteren. In het dialoogvenster Expressiebouwer

voor XPath wordt de geselecteerde inhoud omsloten binnen een

<xsl:for-each>-blok. Als u geen inhoud hebt

geselecteerd, wordt het

<xsl:for-each>-blok ingevoerd op de plaats van de invoegpositie.

1 Dubbelklik op de tijdelijke aanduiding voor XML-gegevens op de pagina om de expressiebouwer voor XPath te openen.

2 Selecteer in het dialoogvenster Expressiebouwer (Herhalingsgebied) het item dat herhaald moet worden in het XML-

schema.

De correcte XPath-expressie wordt in het vak Expressie geschreven om het knooppunt aan te duiden.

Opmerking: Herhalende items worden in het XML-schema aangeduid met een plusteken (+).

In het volgende voorbeeld wilt u elk knooppunt

item in het XML-bestand herhalen.

Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd.

<xsl:for-each select="provider/store/items/item">

Content goes here

</xsl:for-each>

Soms wilt u wellicht werken met een subset van de herhalende knooppunten–bijvoorbeeld als u alleen artikelen wilt met

een kenmerk van een bepaalde waarde. In dat geval moet u een filter maken.

Te herhalen gegevens filteren

Gebruik een filter om herhalende knooppunten met bepaalde kenmerkwaarden aan te duiden.

1 Selecteer in het XML-schema een knooppunt om te herhalen.

2 Klik op de uitvouwknop van Filter bouwen.

3 Klik op de knop Plus (+) om een leeg filter te maken.

4 Voer in de volgende velden de filtercriteria in.

Filteren op Geeft het herhalende knooppunt met de gegevens waarop u wilt filteren. Het pop-upmenu biedt een lijst van

bovenliggende knooppunten ten opzichte van het knooppunt dat u in het XML-schema hebt geselecteerd.

DREAMWEAVER CS3

Handboek

423

Waar Geeft het kenmerk of het subelement van het knooppunt voor Filteren op dat gebruikt wordt om de resultaten te

beperken. U kunt een kenmerk of subelement in het pop-upmenu selecteren en u kunt in dit veld uw eigen XPath-expressie

invoeren om onderliggende elementen aan te duiden die lager liggen in het schema.

Operator Geeft de vergelijkingsoperator aan voor gebruik in de filterexpressie.

Waarde Geeft de waarde aan die gecontroleerd moet worden in het knooppunt voor Filteren op. Voer de waarde in. Als

dynamische parameters voor uw XSLT-pagina gedefinieerd zijn, kunt u een daarvan selecteren in het pop-upmenu.

5 Klik nogmaals op de knop Plus (+) om een ander filter op te geven.

Als u waarden invoert of iets in de pop-upmenu's selecteert, wordt XPath-expressie in het vak Expressie aangepast.

In het volgende voorbeeld wilt u de resultaten beperken tot die

item-knooppunten waarbij de waarde van het kenmerk

@availabletrue (waar) is.

Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd.

<xsl:for-each select="provider/store/items/item[@available = 'true']">

Content goes here

</xsl:for-each>

Opmerking: Tekenreekswaarden als "true" moet u tussen aanhalingstekens plaatsen. Dreamweaver codeert de

aanhalingstekens voor u (') zodat deze als geldige XHTML worden ingevoerd.

DREAMWEAVER CS3

Handboek

424

U kunt meer meer complexe filters maken waarmee u bovenliggende knooppunten kunt opgeven als deel van uw

filtercriteria. In het volgende voorbeeld wilt u de resultaten beperken tot die

item-knooppunten waarbij het @id-kenmerk

van de

store gelijk is aan 1 en het price-knooppunt van het item groter is dan 5.

Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd.

<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]">

Content goes here

</xsl:for-each>

Zie de sectie <xsl:for-each> in het paneel Referentie voor meer informatie en voorbeelden van desbetreffende

herhalingsgebieden.

Problemen bij XSL-transformaties oplossen

Zie de gids voor probleemoplossing op www.adobe.com/go/dw_xsl_faq_nl als uw XSL-transformaties niet goed werken.

De site geeft ook antwoorden op veel vaak gestelde vragen.

XSL-transformaties op de client uitvoeren

Workflow voor het uitvoeren van client-side XSL-transformaties

U kunt client-side XSL-transformaties uitvoeren. Lees meer over server-side en client-side XSL-transformaties en over het

gebruik van XML en XSL bij webpagina's voordat u pagina's gaat bouwen die XML-gegevens weergeven.

De algemene workflow voor het uitvoeren van client-side XSL-transformaties is als volgt (elke stap is in andere

onderwerpen beschreven).

1. Zet een Dreamweaver-site op.

2. Maak een XSLT-pagina of zet een HTML-pagina om naar XSLT.

• Maak in uw Dreamweaver-site een hele XSLT-pagina.

• Zet een bestaande HTML-pagina om in een hele XSLT-pagina.

DREAMWEAVER CS3

Handboek

425

3. Koppel een XML-gegevensbron aan de pagina (als u dat nog niet gedaan hebt).

Het gekoppelde XML-bestand moet zich in dezelfde directory bevinden als de XSLT-pagina.

4. Bind uw XML-gegevens aan de XSLT-pagina.

5. Geef de XML-gegevens weer door de gegevens aan de hele XSLT-pagina te binden.

6. Voeg zo nodig een Herhalingsgebied XSLT-object aan de tabel of de tabelrij toe met de tijdelijke aanduiding(en)

voor XML-gegevens.

7. Koppel de XSLT-pagina aan de XML-pagina.

8. Publiceer zowel de XML-pagina als de gekoppelde XSLT-pagina naar uw webserver.

9. Bekijk de XML-pagina in een browser.

De browser transformeert dan de XML-gegevens, maakt ze op met de XSLT-pagina en geeft de opgemaakte pagina weer in

de browser.

Zie ook

“Een Dreamweaver-site opzetten” op pagina 38

“De toepassingsserver kiezen” op pagina 477

“Een XSLT-pagina aan een XML-pagina koppelen” op pagina 425

“XML en XSL gebruiken in webpagina's” op pagina 401

“Client-side XSL-transformaties” op pagina 404

“Server-side XSL-transformaties” op pagina 402

Hele XSLT-pagina's en XSLT-fragmenten maken en gegevens weergeven

U moet een hele XSLT-pagina gebruiken voor client-side transformaties. (XSLT-fragmenten werken niet voor dit type

transformatie.) Volg deze algemene stappen voor het maken van, het binden van XML-gegevens aan en het opmaken van

XSLT-pagina's voor client-side transformaties:

1. Maak de XSLT-pagina.

2. Geef gegevens weer in de XSLT-pagina.

3. Geef herhalende elementen weer in de XSLT-pagina.

4. Los problemen op.

Zie ook

“XSLT-pagina maken” op pagina 409

“XML-gegevens weergeven op XSLT-pagina's” op pagina 411

“Herhalende XML-elementen weergeven” op pagina 412

“Problemen bij XSL-transformaties oplossen” op pagina 424

Een XSLT-pagina aan een XML-pagina koppelen

Als u een hele XSLT-pagina hebt met tijdelijke aanduidingen voor dynamische inhoud voor uw XML-gegevens, moet u in

de XML-pagina een verwijzing invoegen naar de XSLT-pagina.

DREAMWEAVER CS3

Handboek

426

Opmerking: De XML- en XSL-bestanden voor client-side transformaties moeten zich in dezelfde directory bevinden. Anders

leest de browser het XML-bestand en zoekt deze de XSLT-pagina voor de transformatie, maar zal deze de elementen

(stijlpagina's, afbeeldingen en dergelijke) die door de relatieve koppelingen in de XSLT-pagina gedefinieerd zijn, niet vinden.

1 Open het XML-bestand dat u aan uw XSLT-pagina wilt koppelen.

2 Kies Opdrachten > XSLT-stijlblad koppelen.

3 Klik in het dialoogvenster op Bladeren, blader naar de XSLT-pagina waaraan u wilt koppelen, selecteer deze en klik op OK.

4 Klik op OK om het dialoogvenster te sluiten en voeg de verwijzing naar de XSLT-pagina bovenaan in het XML-

document in.

Problemen bij XSL-transformaties oplossen

Zie de gids voor probleemoplossing op www.adobe.com/go/dw_xsl_faq_nl als uw XSL-transformaties niet goed werken.

De site geeft ook antwoorden op veel vaak gestelde vragen.

Ontbrekende tekeneenheden

Ontbrekende tekeneenheid opgeven

In XSLT zijn sommige tekens niet toegestaan in bepaalde contexten. U mag bijvoorbeeld het teken kleiner dan (<) en het

en-teken (&) niet gebruiken in de tekst tussen tags of in de waarde van een kenmerk. De engine voor de XSLT-transformatie

geeft een foutmelding als deze tekens niet correct zijn gebruikt. Om dat probleem op te lossen kunt u tekeneenheden

specificeren die deze speciale tekens vervangen.

Een tekeneenheid is een tekenreeks die andere tekens vertegenwoordigt. Tekeneenheden krijgen een naam of een getal.

Een eenheid met een naam begint met een en-teken (&) gevolgd door de naam of door tekens en eindigt met een

puntkomma (;).

< vertegenwoordigt bijvoorbeeld de beginpunthaak (<). Genummerde tekeneenheden beginnen op

dezelfde manier, maar een hekje (#) plus een getal vertegenwoordigen het teken.

XSLT heeft de volgende voorgedefinieerde tekeneenheden:

Als u andere tekeneenheden in een XSL-bestand gebruikt, moet u deze in de DTD-sectie van het XSL-bestand definiëren.

Dreamweaver biedt verschillende standaard eenheiddefinities die u bovenaan in een XSL-bestand ziet dat in Dreamweaver

gemaakt is. Deze standaardeenheden behelzen een brede selectie van de vaakst gebruikte tekens.

Als u uw XSL-bestand in een browser wordt voorvertoond, controleert Dreamweaver het XSL-bestand op niet

gedefinieerde tekeneenheden en wordt een melding weergegeven als er een gevonden is.

Als u een aan een XSLT-bestand gekoppeld XML-bestand of een server-side pagina met een XSLT-transformatie

voorvertoont, meldt de server of de browser (in plaats van Dreamweaver) dat een niet gedefinieerde tekeneenheid is

aangetroffen. Het volgende voorbeeld is een melding die Internet Explorer u kan geven als u een XSL-bestand aanvraagt

dat door een XML-bestand getransformeerd is en waarin de definitie van een tekeneenheid ontbreekt.

Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'.

Line 28, Position 20

-------------------^

Teken Eenheidcode

< (kleiner dan)<

& (en-teken)&

> (groter dan)>

" (dubbel aanhalingsteken)"

‘ (apostrof)'

DREAMWEAVER CS3

Handboek

427

Om de fout in uw pagina te corrigeren moet u de definitie van de tekeneenheid handmatig aan de pagina toevoegen.

Ontbrekende tekeneenheid opgeven

1 U kunt het ontbrekende teken opzoeken in de pagina over tekeneenheden op de W3C-website van

www.w3.org/TR/REC-html40/sgml/entities.html.

Deze webpagina bevat de 252 in HTML 4 en XHTML 1.0 toegestane tekeneenheden.

Als bijvoorbeeld E met accent grave ontbreekt, zoekt u naar "Egrave" op de W3C-webpagina. U treft dan de volgende

vermelding aan:

<!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->

2 Noteer de naam van de genoemde tekeneenheid en de eenheidcode.

In het voorbeeld is

Egrave de entiteitsnaam en is &#200 de entiteitscode.

3 Schakel naar codeweergave en voer bovenaan in uw XSL-bestand (na de DOCTYPE-declaratie en samen met de andere

eenheidtags) de volgende eenheidtag in:

<!ENTITY entityname "entitycode;">

In het voorbeeld voert u de volgende eenheidtag in:

<!ENTITY Egrave "È">

4 Sla uw bestand op.

Als u herhaaldelijk dezelfde tekeneenheden gebruikt, kunt u de definities daarvoor permanent opnemen in de XSL-

bestanden die Dreamweaver standaard maakt wanneer u Bestand > Nieuw kiest.

Eenheiddefinities toevoegen aan de XSL-bestanden die Dreamweaver standaard maakt

1 Zoek het volgende configuratiebestand in de toepassingsmap Dreamweaver en open het in een teksteditor:

Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml

2 Zoek de declaratie met de naam mm_xslt_1:

3 Voeg de nieuwe eenheidtag op de volgende wijze toe aan de lijst van eenheidtags:

<!ENTITY entityname "entitycode;">

4 Sla het bestand op en start Dreamweaver opnieuw.

428

Hoofdstuk 16: Spry-pagina's visueel

opbouwen

Het Spry-framework is een JavaScript- en CSS-bibliotheek waarmee u betere webpagina's kunt bouwen. Met het framework

kunt u XML-gegevens weergeven en interactieve pagina-elementen maken die dynamische gegevens weergeven zonder dat

de hele pagina moet worden vernieuwd.

Over het Spry-framework

Het Spry-framework is een JavaScript-bibliotheek met behulp waarvan webontwerpers webpagina's kunnen bouwen die de

bezoekers een prettiger ervaring geven. Met Spry kunt u HTML, CSS en een minimale hoeveelheid JavaScript gebruiken

om XML-gegevens op te nemen in uw HTML-documenten. U kunt objecten maken, zoals accordeons en menubalken, en

diverse effecten toevoegen aan allerhande pagina-elementen. Het Spry-framework is zo ontworpen dat opmaak eenvoudig

en makkelijk is te gebruiken door mensen die een basiskennis hebben van HTML, CSS en JavaScript.

Het Spry-framework is voornamelijk bedoeld voor professionele webontwerpers of voor geavanceerde amateurs. Het is niet

bedoeld als een volwaardig webtoepassingsframework voor webontwikkeling op ondernemingsniveau (hoewel het wel

samen met andere pagina's op ondernemingsniveau kan worden gebruikt).

Ga voor meer informatie over het Spry-framework naar www.adobe.com/go/learn_dw_spryframework_nl.

Zie www.adobe.com/go/vid0166_nl voor een zelfstudie over het gebruik van Spry voor het bouwen van webpagina's.

Spry-objecten toevoegen

Over Spry-objecten

Een Spry-object is een pagina-element dat interactie met de gebruiker mogelijk maakt. Een Spry-object bestaat uit de

volgende onderdelen:

Objectstructuur Een HTML-codeblok dat de structurele samenstelling van het object definieert.

Objectgedrag JavaScript dat aanstuurt hoe het object reageert op door de gebruiker op gang gebrachte gebeurtenissen.

Objectopmaak CSS die bepaalt hoe het object er uitziet.

Het Spry-framework ondersteunt een reeks herbruikbare objecten, die zijn geschreven in standaard-HTML, CSS en

JavaScript. U kunt deze objecten eenvoudig invoegen—de code bestaat uit de eenvoudigste HTML en CSS—en het object

daarna opmaken. Het gedrag in het framework omvat functionaliteit waarmee gebruikers onder andere inhoud op de

pagina kunnen weergeven of verbergen, de weergave (zoals de kleur) van de pagina kunnen wijzigen, en menu-items

kunnen beïnvloeden.

Elk object in het Spry-framework is gekoppeld aan unieke CSS- en JavaScript-bestanden. Het CSS-bestand bevat alles wat

nodig is om het object op te maken, en het JavaScript-bestand geeft het object zijn functionaliteit. Wanneer u een object

invoegt via de interface van Dreamweaver, koppelt Dreamweaver deze bestanden automatisch aan uw pagina zodat uw

object functionaliteit en opmaak bevat.

DREAMWEAVER CS3

Handboek

429

De CSS- en JavaScript-bestanden die aan een bepaald object zijn gekoppeld, worden naar dat object genoemd zodat u direct

ziet welke bestanden bij welke objecten horen. (Bestanden die bijvoorbeeld zijn gekoppeld aan het accordeonobject, worden

SpryAccordion.css en SpryAccordion.js genoemd). Wanneer u een object invoegt in een opgeslagen pagina, maakt

Dreamweaver een map SpryAssets in uw site, waarin de corresponderende JavaScript- en CSS-bestanden worden

opgeslagen.

Zie www.adobe.com/go/vid0167_nl voor een zelfstudie over het gebruik van Spry-objecten.

Zie ook

“Wat zijn CSS-stijlpagina's (Cascading Style Sheets)” op pagina 117

Een Spry-object invoegen

❖ Kies Invoegen > Spry en selecteer het object dat u wilt invoegen.

Wanneer u een object invoegt, neemt Dreamweaver automatisch de noodzakelijke Spry JavaScript- en CSS-bestanden in

uw site op wanneer u de pagina opslaat.

Opmerking: U kunt Spry-objecten ook invoegen met behulp van de categorie Spry op de invoegbalk.

Een Spry-object selecteren

1 Houd de muisaanwijzer boven het object tot de blauwe tabsgewijze omtrek van het object wordt weergegeven.

2 Klik in de linkerbovenhoek van het object op de objecttab.

Een Spry-object bewerken

❖ Selecteer het object dat u wilt bewerken en breng de wijzigingen aan in de eigenschappencontrole (Venster >

Eigenschappen).

Raadpleeg de desbetreffende secties voor elk object voor details over hoe u wijzigingen aanbrengt in de specifieke objecten.

Een Spry-object opmaken

❖ Zoek het desbetreffende CSS-bestand voor het object in de map SpryAssets van uw site, en bewerk de CSS volgens uw

voorkeuren.

Raadpleeg de desbetreffende secties voor elk object voor details over hoe u de specifieke objecten opmaakt.

U kunt een Spry-object ook opmaken door stijlen te bewerken in het paneel CSS, net zoals u een ander opgemaakt element

op de pagina kunt wijzigen.

De standaardmap Spry-gegevensset

Wanneer u een Spry-object, -gegevensset of -effect invoegt in een opgeslagen pagina, maakt Dreamweaver een map

SpryAssets in uw site, waarin de corresponderende JavaScript- en CSS-bestanden worden opgeslagen. U kunt de

standaardlocatie waar Dreamweaver Spry-elementen opslaat wijzigen als u ze liever elders opslaat.

1 Selecteer Sites > Sites beheren.

2 Selecteer uw site in het dialoogvenster Sites beheren en klik op Bewerken.

3 Selecteer de categorie Spry in het dialoogvenster Sitedefinitie.

4 Voer in de map die u voor Spry-gegevens wilt gebruiken een pad in en klik op OK. U kunt ook op het mappictogram

klikken om naar een locatie te bladeren.

Zie ook

“Een Spry XML-gegevensset definiëren” op pagina 457

“Spry-effecten, overzicht” op pagina 463

DREAMWEAVER CS3

Handboek

430

Werken met het accordeonobject

Over het accordeonobject

Een accordeonobject is een reeks inklapbare panelen die een grote hoeveelheid inhoud op een beperkte ruimte kunnen

opslaan. Sitebezoekers kunnen de inhoud in de accordeon verbergen of weergeven door op de paneeltab te klikken. De

panelen van de accordeon worden open- of dichtgeklapt al naargelang de bezoeker op de diverse tabs klikt. In een

accordeon is slechts één inhoudspaneel tegelijk geopend en zichtbaar. In het volgende voorbeeld ziet u een accordeonobject

waarvan het tweede paneel is opengeklapt:

A. Paneeltab van accordeon B. Paneelinhoud van accordeon C. Accordeonpaneel (open)

De standaard-HTML voor het accordeonobject bestaat uit een buitenste div-tag die alle panelen bevat, een div-tag voor

elk paneel, en een kop-

div en inhouds-div in de tag voor elk paneel. Een accordeonobject kan een willekeurig aantal

afzonderlijke panelen bevatten. De HTML voor het accordeonobject bevat eveneens

script-tags in de kop van het

document en na de HTML-opmaak van de accordeon.

Voor een uitvoerige uitleg van de werking van het accordeonobject, waaronder een volledige anatomie van de code van het

accordeonobject, gaat u naar www.adobe.com/go/learn_dw_spryaccordion_nl.

Over het accordeonobject

❖ Kies Invoegen > Spry > Spry-accordeon.

Opmerking: U kunt een accordeonobject ook invoegen met behulp van de categorie Spry op de invoegbalk.

Een paneel toevoegen aan een accordeonobject

1 Selecteer een accordeonobject in het documentvenster.

2 Klik op de plusknop (+) Panelen in de eigenschappencontrole (Venster > Eigenschappen).

3 (Optioneel) Verander de naam van het paneel door in de ontwerpweergave de tekst van het paneel te selecteren en

vervolgens te wijzigen.

Een paneel verwijderen uit een accordeonobject

1 Selecteer een accordeonobject in het documentvenster.

2 Open het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen), selecteer de naam van het paneel dat

u wilt verwijderen en klik op de minknop (-).

DREAMWEAVER CS3

Handboek

431

Een paneel openen voor bewerken

❖ Voer een van de volgende handelingen uit:

• Plaats de muisaanwijzer boven de tab van het paneel om het in de ontwerpweergave te openen, en klik op het

oogpictogram dat rechts van de tab wordt weergegeven.

• Selecteer een accordeonobject in het documentvenster en klik in het menu Panelen van de eigenschappencontrole

(Venster > Eigenschappen) op de naam van het paneel dat u wilt bewerken.

De volgorde van panelen wijzigen

1 Selecteer een accordeonobject in het documentvenster.

2 Selecteer in de eigenschappencontrole (Venster > Eigenschappen) de naam van het accordeonpaneel dat u wilt

verplaatsen.

3 Klik op de pijlen omhoog of omlaag om het paneel omhoog of omlaag te verplaatsen.

Het accordeonobject aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een accordeonobject kunt uitvoeren, worden

aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het accordeonobject wijzigen en een accordeon

maken die naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar

www.adobe.com/go/learn_dw_spryaccordion_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryAccordion.css.

Dreamweaver slaat het bestand SpryAccordion.css in de map SpryAssets van uw site op wanneer u een Spry-

accordeonobject maakt. Dit bestand bevat ook informatie met commentaar over diverse stijlen die van toepassing zijn op

het object, dus misschien kunt u ook dit bestand bekijken.

Hoewel u de regels voor het accordeonobject gemakkelijk rechtstreeks in het CSS-bestand kunt bewerken, kunt u ook het

paneel CSS-stijlen gebruiken om de CSS van een accordeon te bewerken. Het paneel CSS-stijlen is handig om de CSS-

klassentezoekendieaandeverschillendeonderdelenvanhetobjectzijntoegewezen,metnamealsudemodusHuidigvanhet

paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

Tekst opmaken van accordeonobject

U kunt de tekst van een accordeonobject opmaken door eigenschappen in te stellen voor de gehele accordeoncontainer of

voor de componenten van het specifieke object.

❖ Als u de tekstopmaak van een accordeonobject wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-

regel op te zoeken. Daarna voegt u uw eigen tekstopmaakeigenschappen en -waarden toe:

De achtergrondkleur wijzigen van accordeonobject

❖

Als u de achtergrondkleuren van verschillende delen van een accordeonobject wilt wijzigen, gebruikt u de volgende tabel

om de desbetreffende CSS-regel op te zoeken. Daarna voegt u eigenschappen en waarden voor de achtergrondkleur toe of

wijzigt u deze:

Te wijzigen tekst Relevante CSS-regel Voorbeeld van toe te voegen

eigenschappen en waarden

Tekst in de gehele accordeon (inclusief

tab en inhoudspaneel)

.Accordion of .AccordionPanel font: Arial; font-size:medium;

Alleen tekst op paneeltabs van

accordeon

.AccordionPanelTab font: Arial; font-size:medium;

Alleen tekst op inhoudspanelen van

accordeon

AccordionPanelContent font: Arial; font-size:medium;

DREAMWEAVER CS3

Handboek

432

De breedte van een accordeon beperken

Standaard wordt het accordeonobject opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen. U kunt de

breedte van een accordeonobject echter beperken door een breedte-eigenschap voor de accordeoncontainer in te stellen.

1 Zoek de CSS-regel .Accordion door het bestand SpryAccordion.css te openen. Dit is de regel die eigenschappen

definieert voor het hoofdcontainerelement van het accordeonobject.

U vindt de regel ook door het accordeonobject te selecteren en het paneel CSS-stijlen te bekijken (Venster > CSS). Zorg

ervoor dat het paneel is ingesteld op de modus Huidig.

2 Voeg een breedte-eigenschap en -waarde aan de regel toe, bijvoorbeeld

width:. 300px;.

Werken met het menubalkobject

Over het menubalkobject

Een menubalkobject is een reeks menuknoppen voor navigatie die vervolgmenu's weergeven wanneer een sitebezoeker een

van de knoppen aanwijst. Met menubalken kunt u op een beperkte ruimte een groot aantal navigatie-informatie weergeven,

en de bezoeker een idee geven van wat op de site beschikbaar is zonder dat de bezoeker eerst intensief moet bladeren.

In Dreamweaver kunt u twee soorten menubalkobjecten gebruiken: verticale en horizontale. In het volgende voorbeeld ziet

u een horizontaal menubalkobject, waarvan het derde menu-item is opengeklapt:

Menubalkobject (bestaat uit <ul>, <li> en <a>-tags)

A. Menu-item heeft vervolgmenu B. Vervolgmenu-item heeft vervolgmenu

De HTML voor het menubalkobject bestaat uit een buitenste ul-tag die een li-tag bevat voor elk menu-item op het hoogste

niveau. De menu-items op het hoogste niveau (

li-tags) bevatten op hun beurt weer ul- en li-tags die de vervolgmenu-

items van deze items definiëren, en ook deze vervolgmenu's kunnen weer vervolgmenu's bevatten. De menu's op het

hoogste niveau en hun vervolgmenu's kunnen net zoveel vervolgmenu's bevatten als u wilt.

Voor een uitvoerige uitleg van de werking van het menubalkobject, waaronder een volledige anatomie van de code van het

menubalkobject, gaat u naar www.adobe.com/go/learn_dw_sprymenubar_nl.

Zie www.adobe.com/go/vid0168_nl voor een zelfstudie over het maken van een Spry-menubalk.

Te wijzigen deel van object Relevante CSS-regel Voorbeeld van toe te voegen of te

wijzigen eigenschap en waarde

Achtergrondkleur van paneeltabs van

accordeon

.AccordionPanelTab background-color: #CCCCCC; (Dit is de

standaardwaarde)

Achtergrondkleur van inhoudspanelen

van accordeon

.AccordionPanelContent background-color: #CCCCCC;

Achtergrondkleur van geopend

accordeonpaneel

.AccordionPanelOpen

.AccordionPanelTab

background-color: #EEEEEE; (Dit is

standaardwaarde)

Achtergrondkleur van paneeltabs bij

aanwijzen

.AccordionPanelTabHover kleur: #555555; (Dit is de

standaardwaarde)

Achtergrondkleur van geopende

paneeltab bij aanwijzen

.AccordionPanelOpen

.AccordionPanelTabHover

kleur: #555555; (Dit is de

standaardwaarde)

A B

DREAMWEAVER CS3

Handboek

433

Het menubalkobject invoegen

1 Kies Invoegen > Spry > Spry-menubalk.

2 Selecteer Horizontaal of Verticaal en klik op OK.

Opmerking: U kunt een menubalkobject ook invoegen met behulp van de categorie Spry op de invoegbalk.

Opmerking: Het Spry-menubalkobject gebruikt DHTML-lagen om delen van HTML over andere delen heen weer te geven. Als

uw pagina Flash-inhoud bevat, kan dit problemen geven omdat Flash-films altijd over alle andere DHTML-lagen heen worden

weergegeven. In dat geval is het dus mogelijk dat de Flash-inhoud over uw vervolgmenu's heen wordt weergegeven. U kunt deze

situatie omzeilen door de parameters voor de Flash-film te wijzigen zodat

wmode="transparent" wordt gebruikt. Zie

www.adobe.com/go/15523_nl voor meer informatie.

Menu's en vervolgmenu's toevoegen of verwijderen

Gebruik de eigenschappencontrole (Venster > Eigenschappen) om menu-items toe te voegen aan en te verwijderen uit het

menubalkobject.

Een hoofdmenu-item toevoegen

1 Selecteer een menubalkobject in het documentvenster.

2 Klik in de eigenschappencontrole op de plusknop boven de eerste kolom.

3 (Optioneel) Verander de naam van het nieuwe menu-item door de standaardtekst te wijzigen in het documentvenster of

in het tekstvak van de eigenschappencontrole.

Een vervolgmenu-item toevoegen

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole en selecteer de naam van het hoofdmenu-item waaraan u het vervolgmenu wilt

toevoegen.

3 Klik op de plusknop boven de tweede kolom.

4 (Optioneel) Verander de naam van het nieuwe vervolgmenu-item door de standaardtekst te wijzigen in het

documentvenster of in het tekstvak van de Eigenschappencontrole.

Als u een vervolgmenu aan een vervolgmenu wilt toevoegen, selecteert u de naam van het vervolgmenu-item waaraan u

nog een vervolgmenu-item wilt toevoegen, en klikt u op de plusknop boven de derde kolom in de eigenschappencontrole.

Opmerking: Dreamweaver ondersteunt twee niveaus van vervolgmenu's in de ontwerpweergave, maar u kunt in de

codeweergave net zoveel vervolgmenu's toevoegen als u wilt.

Een hoofd- of vervolgmenu-item verwijderen

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole, selecteer de naam van het hoofd- of vervolgmenu-item dat u wilt verwijderen en klik

op de minknop.

De volgorde van menu-items wijzigen

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het menu-item dat u wilt

verplaatsen.

3 Klik op de pijlen omhoog of omlaag om het menu-item omhoog of omlaag te verplaatsen.

De tekst van een menu-item wijzigen

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het menu-item waarvan u de

tekst wilt wijzigen.

DREAMWEAVER CS3

Handboek

434

3 Verander de tekst in het tekstvak.

Een menu-item koppelen

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het menu-item waarop u een

koppeling wilt toepassen.

3 Typ de koppeling in het tekstvak Koppeling of klik op het mappictogram om naar een bestand te bladeren.

Knopinfo maken voor een menu-item

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het menu-item waarvoor u

knopinfo wilt maken.

3 Typ de tekst voor de knopinfo in het tekstvak Titel.

Een doelkenmerk toewijzen voor een menu-item

Het doelkenmerk bepaalt waar u een gekoppelde pagina wilt openen. U kunt bijvoorbeeld een doelkenmerk aan een menu-

item toekennen zodat de gekoppelde pagina in een nieuw browservenster wordt geopend wanneer de bezoeker op de

koppeling klikt. Als u framesets gebruikt, kunt u ook de naam opgeven van een frame waarin u de gekoppelde pagina wilt

openen.

1 Selecteer een menubalkobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het menu-item waaraan u een

doelkenmerk wilt toekennen.

3 Voer een van de vier kenmerken in het vak Doel in:

_blank Hiermee opent u de gekoppelde pagina in een nieuw browservenster.

_self Hiermee laadt u de gekoppelde pagina in hetzelfde browservenster. Dit is de standaardoptie. Als de pagina zich in een

frame of frameset bevindt, wordt de pagina binnen dat frame geladen.

_parent Hiermee laadt u het gekoppelde document in de direct daarboven gelegen frameset van het document.

_top Hiermee laadt u de gekoppelde pagina in het meest bovenaan gelegen venster van een frameset.

Stijlen uitschakelen

UkuntdeopmaakvaneenmenubalkobjectuitzettenzodatdeHTML-structuurvanhetobjectindeontwerpweergavebeter

zichtbaar is. Wanneer u de opmaak uitschakelt, worden menubalkitems bijvoorbeeld als een opsomming op de pagina

weergegeven, in plaats van als de opgemaakte items van de menubalk.

1 Selecteer een menubalkobject in het documentvenster.

2 Klik op de knop Stijlen uitschakelen in de eigenschappencontrole (Venster > Eigenschappen).

De richting van een menubalkobject wijzigen

U kunt de richting van een menubalkobject wijzigen van horizontaal in verticaal en andersom. U hoeft alleen de HTML-

code voor de menubalk aan te passen en ervoor te zorgen dat het juiste CSS-bestand in de map SpryAssets staat.

In het volgende voorbeeld wordt een horizontaal menubalkobject gewijzigd in een verticaal menubalkobject.

1 In Dreamweaver wordt de pagina geopend die een horizontaal menubalkobject bevat.

2 Voeg een verticaal menubalkobject in (Invoegen > Spry > Spry-menubalk) en sla de pagina op. Met deze stap zorgt u

ervoor dat het juiste CSS-Bestand voor een verticale menubalk op uw site wordt opgenomen.

DREAMWEAVER CS3

Handboek

435

Opmerking: Als de site al ergens anders een verticaal menubalkobject heeft, hoeft u deze stap niet uit te voeren. U kunt het

bestand SpryMenuBarVertical.css ook heel eenvoudig aan de pagina koppelen door in het paneel CSS-stijlen (Venster > CSS-

stijlen) op de knop Stijlpagina koppelen te klikken.

3 Verwijder de verticale menubalk.

4 Ga naar de codeweergave (Beeld > Code), zoek de klasse MenuBarHorizontal en verander deze in MenuBarVertical. De

klasse MenuBarHorizontal is gedefinieerd in de tag

ul in de container van de menubalk (<ul id="MenuBar1"

class="MenuBarHorizontal">

5 Zoek na de code voor de menubalk de constructor van de menubalk:

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",

imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

6 Verwijder de laadoptie imgDown (inclusief komma) uit de constructor:

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

Opmerking: Als u echter een verticale menubalk in een horizontale converteert, voegt u de laadoptie imgDown en de komma toe.

7 (Optioneel) Als de pagina geen andere horizontale menubalkobjecten meer bevat, verwijdert u de koppelingen naar het

voormalige bestand MenuBarHorizontal.css in de kop van het document.

8 Sla de pagina op.

Het menubalkobject aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een menubalkobject kunt uitvoeren, worden

aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het menubalkobject wijzigen en een menubalk

maken die naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar

www.adobe.com/go/learn_dw_sprymenubar_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryMenuBarHorizontal.css

of SpryMenuBarVertical.css (afhankelijk van uw selectie). Wanneer u een Spry-menubalkobject maakt, slaat Dreamweaver

deze CSS-bestanden op in de map SpryAssets van uw site. Deze bestanden bevatten ook nuttige informatie over diverse

stijlen die u op het object kunt toepassen.

Hoewel u de regels voor het menubalkobject gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken, kunt

u ook het paneel CSS-stijlen gebruiken om de CSS van een menubalk te bewerken. Het paneel CSS-stijlen is handig om de

CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de modus Huidig

van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

De tekststijl van een menu-item wijzigen

De CSS die aan de tag <a> is gekoppeld, bevat de informatie over de tekstopmaak. Er zijn diverse waarden voor

tekstopmaakklassen die zijn gekoppeld aan de tag <a> en die iets zeggen over de verschillende menutoestanden.

❖ Als u de tekstopmaak van een menu-item wilt wijzigen, gebruikt u de volgende tabel om de juiste CSS-regel op te zoeken,

en verandert u de standaardwaarde:

Te wijzigen stijl CSS-regel voor verticale of

horizontale menubalk

Relevante eigenschappen en

standaardwaarden

Standaardtekst ul.MenuBarVertical a,

ul.MenuBarHorizontal a

kleur: #333; text-decoration: none;

Tekstkleur wanneer de muisaanwijzer

eroverheen schuift

ul.MenuBarVertical a:hover,

ul.MenuBarHorizontal a:hover

kleur: #FFF;

DREAMWEAVER CS3

Handboek

436

De achtergrondkleur wijzigen van een menu-item

De CSS die aan de tag <a> is gekoppeld, bevat de informatie over de achtergrondkleur van een menu-item. Er zijn diverse

waarden voor achtergrondkleurklassen die zijn gekoppeld aan de tag <a> en die iets zeggen over de verschillende

menutoestanden.

❖ Als u de achtergrondkleur van een menu-item wilt wijzigen, gebruikt u de volgende tabel om de juiste CSS-regel op te

zoeken, en verandert u de standaardwaarde:

De afmeting van menu-items wijzigen

U verandert de afmetingen van menu-items door de breedte-eigenschappen van de tags li en ul van het menu-item te

wijzigen.

1 Zoek de regel

ul.MenuBarVertical li of ul.MenuBarHorizontal li op:

2 Verander de breedte-eigenschap in een gewenste breedte (of verander de eigenschap in

auto als u een ingestelde breedte

wilt opheffen, en voeg de eigenschap en waarde

white-space nowrap; aan de regel toe).

3 Zoek de regel

ul.MenuBarVertical ul of ul.MenuBarHorizontal ul op.

4 Verander de breedte-eigenschap in een gewenste breedte (of verander de eigenschap in

auto als u een vaste breedte wilt

opheffen).

5 Zoek de regel

ul.MenuBarVertical li of ul.MenuBarHorizontal li op:

6 Voeg de volgende eigenschappen toe aan de regel:

zweven: none; en background-color: transparant;.

7 Ver wijder de

breedte: 8.2em; eigenschap en waarde.

Tekstkleur bij focus ul.MenuBarVertical a:focus,

ul.MenuBarHorizontal a:focus

kleur: #FFF;

Kleur van menubalkitem wanneer

muisaanwijzer eroverheen schuift

ul.MenuBarVertical

a.MenuBarItemHover,

ul.MenuBarHorizontal

a.MenuBarItemHover

kleur: #FFF;

Kleur van vervolgmenu-item wanneer

de muisaanwijzer eroverheen schuift

ul.MenuBarVertical

a.MenuBarItemSubmenuHover,

ul.MenuBarHorizontal

a.MenuBarItemSubmenuHover

kleur: #FFF;

Te wijzigen kleur CSS-regel voor verticale of

horizontale menubalk

Relevante eigenschappen en

standaardwaarden

Standaardachtergrond ul.MenuBarVertical a,

ul.MenuBarHorizontal a

background-color: #EEE;

Achtergrondkleur wanneer de

muisaan

wijzer eroverheen schuift

ul.MenuBarVertical a:hover,

ul.MenuBarHorizontal a:hover

background-color: #33C;

Achtergrondkleur bij focus ul.MenuBarVertical a:focus,

ul.MenuBarHorizontal a:focus

background-color: #33C;

Kleur van menubalkitem wanneer

muisaanwijz

er eroverheen schuift

ul.MenuBarVertical

a.MenuBarItemHover,

ul.MenuBarHorizontal

a.MenuBarItemHover

background-color: #33C;

Kleur van vervolgmenu-item wanneer

de muisaanwijzer eroverheen schuift

ul.MenuBarVertical

a.MenuBarItemSubmenuHover,

ul.MenuBarHorizontal

a.MenuBarItem

SubmenuHover

background-color: #33C;

Te wijzigen stijl CSS-regel voor verticale of

horizontale menubalk

Relevante eigenschappen en

standaardwaarden

DREAMWEAVER CS3

Handboek

437

Vervolgmenu's plaatsen

De positie van Spry-menubalken wordt geregeld met de marge-eigenschap voor ul-tags van vervolgmenu's.

1 Zoek de regel ul.MenuBarVertical ul of ul.MenuBarHorizontal ul op.

2 Wijzig de

marge: -5% 0 0 95%; standaardwaarden naar de gewenste waarden.

Werken met het inklapbaar-paneelobject

Over het inklapbaar-paneelobject

Een inklapbaar-paneelobject is een paneel dat inhoud opslaat op een vrij beperkte ruimte. Gebruikers kunnen de inhoud

in het inklapbare paneel verbergen of weergeven door op de tab van het object te klikken. In het volgende voorbeeld ziet u

een inklapbaar-paneelobject, opengeklapt en dichtgeklapt:

A. Uitgevouwen B. Samengevouwen

De HTML voor het inklapbaar-paneelobject bestaat uit een buitenste div-tag die de div-tag voor de inhoud en de div-tag

voor de tabcontainer bevat. De HTML voor het inklapbaar-paneelobject bevat eveneens script-tags in de kop van het

document en na de HTML-opmaak van het inklapbare paneel.

Voor een uitvoerige uitleg van de werking van het inklapbaar-paneelobject, waaronder een volledige anatomie van de code

van het inklapbaar-paneelobject, gaat u naar www.adobe.com/go/learn_dw_sprycollapsiblepanel_nl.

Het inklapbaar-paneelobject invoegen

❖ Kies Invoegen > Spry > Inklapbaar Spry-paneel.

Opmerking: U kunt een inklapbaar-paneelobject ook invoegen met behulp van de categorie Spry op de invoegbalk.

Het inklapbare paneel openen of sluiten in de ontwerpweergave

❖ Voer een van de volgende handelingen uit:

• Plaats de muisaanwijzer in de ontwerpweergave boven de tab van het paneel en klik op het oogpictogram dat rechts van

de tab wordt weergegeven.

• Selecteer een inklapbaar-paneelobject in het documentvenster en kies Geopend of Gesloten in het pop-upmenu

Weergave in de eigenschappencontrole (Venster > Eigenschappen).

De standaardtoestand van een inklapbaar-paneelobject instellen

U kunt instellen welke toestand (geopend of gesloten) een inklapbaar-paneelobject standaard heeft wanneer de webpagina

in een browser wordt geopend.

1 Selecteer een inklapbaar-paneelobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer Geopend of Gesloten in het pop-upmenu

Standaardtoestand.

DREAMWEAVER CS3

Handboek

438

Animatie voor het inklapbaar-paneelobject in- of uitschakelen

Wanneer u animatie voor een inklapbaar-paneelobject inschakelt, wordt het paneel standaard geleidelijk en in een

vloeiende beweging geopend en gesloten wanneer de bezoeker op de paneeltab klikt. Als u animatie uitschakelt, wordt het

inklapbare paneel abrupt open- en dichtgeklapt.

1 Selecteer een inklapbaar-paneelobject in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel Animatie inschakelen in of uit.

Het inklapbaar-paneelobject aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een inklapbaar-paneelobject kunt uitvoeren,

worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het inklapbaar-paneelobject wijzigen en een

inklapbaar paneel maken dat naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u

naar www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryCollapsiblePanel.css.

Dreamweaver slaat het bestand SpryCollapsiblePanel.css in de map SpryAssets van uw site op wanneer u een inklapbaar

Spry-paneel maakt. Dit bestand bevat ook nuttige informatie over diverse stijlen die u op het object kunt toepassen.

Hoewel u de regels voor het inklapbaar-paneelobject gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt

bewerken, kunt u ook het paneel CSS-stijlen gebruiken om de CSS van een inklapbaar paneel te bewerken. Het paneel CSS-

stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als

u de modus Huidig van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

Tekst opmaken van inklapbaar-paneelobject

U kunt de tekst van een inklapbaar-paneelobject opmaken door eigenschappen in te stellen voor de gehele inklapbaar-

paneelcontainer of voor de componenten van het specifieke object.

❖ Als u de tekstopmaak van een inklapbaar-paneelobject wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende

CSS-regel op te zoeken. Daarna voegt u uw eigen tekstopmaakeigenschappen en -waarden toe:

De achtergrondkleur wijzigen van een inklapbaar-paneelobject

❖

Als u de achtergrondkleuren van verschillende delen van een inklapbaar-paneelobject wilt wijzigen, gebruikt u de

volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna voegt u eigenschappen en waarden voor de gewenste

achtergrondkleur toe of wijzigt u deze:

Te wijzigen stijl Relevante CSS-regel Voorbeeld van toe te voegen of te

wijzigen eigenschappen en waarden

Tekst in het gehele inklapbare paneel .CollapsiblePanel fo nt: Arial; font-size:medium;

Tekst op de paneeltab .CollapsiblePanelTab font: bold 0.7em sans-serif; (Dit is de

standaardwaarde)

Tekst in het inhoudspaneel .C

ollapsiblePanelContent font: Arial; font-size:medium;

Te wijzigen kleur Relevante CSS-regel Voorbeeld van toe te voegen of te

wijzigen eigenschap en waarde

Achtergrondkleur van paneeltab .CollapsiblePanelTab background-color: #DDD; (Dit is de

standaardwaarde)

DREAMWEAVER CS3

Handboek

439

De breedte van een inklapbaar paneel beperken

Standaard wordt het inklapbaar-paneelobject opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen. U

kunt de breedte van een inklapbaar-paneelobject echter beperken door een breedte-eigenschap voor de inklapbaar-

paneelcontainer in te stellen.

1 Zoek de CSS-regel .CollapsiblePanel op door het bestand SpryCollapsible Panel.css te openen. Deze regel definieert

eigenschappen voor het hoofdcontainerelement van het inklapbaar-paneelobject.

U vindt de regel ook door het inklapbaar-paneelobject te selecteren en het paneel CSS-stijlen te bekijken (Venster > CSS-

stijlen). Zorg ervoor dat het paneel is ingesteld op de modus Huidig.

2 Voeg een breedte-eigenschap en -waarde aan de regel toe, bijvoorbeeld

width:. 300px;.

Werken met het object paneel met tabs

Over het object panelen met tabs

Een object panelen met tabs is een reeks panelen die inhoud opslaat op een vrij beperkte ruimte. Sitebezoekers kunnen de

inhoud in de panelen met tabs verbergen of weergeven door op de tab te klikken van het paneel dat ze willen bekijken. De

panelen van het object worden geopend naarmate de bezoeker op deverschillendetabsklikt.Ineenobjectpanelenmettabs

is maar één paneel tegelijk geopend. In het volgende voorbeeld ziet u een object panelen met tabs, waarvan het derde paneel

is geopend:

A. Tab B. Inhoud C. Object panelen met tabs D. Paneel met tabs

De HTML-code voor het object panelen met tabs bestaat uit een buitenste div-tag die alle panelen bevat, een lijst voor de

tabs, een

div-tag voor de inhoudspanelen en een div-tag voor elk inhoudspaneel. De HTML voor het object panelen met

tabs bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van het object panelen met tabs.

Voor een uitvoerige uitleg van de werking van het object panelen met tabs, waaronder een volledige anatomie van de code

van het object panelen met tabs, gaat u naar www.adobe.com/go/learn_dw_sprytabbedpanels_nl.

Het object panelen met tabs invoegen

❖ Kies Invoegen > Spry > Spry-panelen met tabs.

Opmerking: U kunt een object panelen met tabs ook invoegen met behulp van de categorie Spry op de invoegbalk.

Achtergrondkleur van inhoudspaneel .CollapsiblePanelContent background-color: #DDD;

Achtergrondkleur van tab wanneer

paneel is geopend

.CollapsiblePanelOpen

.CollapsiblePanelTab

background-color: #EEE; (Dit is de

standaardwaarde)

Achtergrondkleur van geopende

paneeltab wanneer de muisaan

wijzer

eroverheen beweegt

.CollapsiblePanelTabHover,

.CollapsiblePanelOpen

.CollapsiblePanelTabHover

background-color: #CCC; (Dit is de

standaardwaarde)

Te wijzigen kleur Relevante CSS-regel Voorbeeld van toe te voegen of te

wijzigen eigenschap en waarde

DREAMWEAVER CS3

Handboek

440

Een paneel toevoegen aan het object panelen met tabs

1 Selecteer een object panelen met tabs in het documentvenster.

2 Klik op de plusknop (+) Panelen in de eigenschappencontrole (Venster > Eigenschappen).

3 (Optioneel) Verander de tabnaam door in de ontwerpweergave de tekst van de tab te selecteren en deze te wijzigen.

Een paneel verwijderen uit een object panelen met tabs

1 Selecteer een object panelen met tabs in het documentvenster.

2 Open het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen), selecteer de naam van het paneel dat

u wilt verwijderen en klik op de minknop (-).

Een paneel openen voor bewerken

❖ Voer een van de volgende handelingen uit:

• Plaats de muisaanwijzer boven de tab van het paneel dat u in de ontwerpweergave wilt openen, en klik op het

oogpictogram dat rechts van de tab wordt weergegeven.

• Selecteer een object panelen met tabs in het documentvenster en klik in het menu Panelen van de eigenschappencontrole

(Venster > Eigenschappen) op de naam van het paneel dat u wilt bewerken.

De volgorde van panelen wijzigen

1 Selecteer een object panelen met tabs in het documentvenster.

2 Open het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het paneel

dat u wilt verplaatsen.

3 Klik op de pijlen omhoog of omlaag om het paneel omhoog of omlaag te verplaatsen.

Het standaard geopende paneel instellen

U kunt instellen welk paneel van het object panelen met tabs standaard is geopend wanneer de pagina in een browser wordt

geopend.

1 Selecteer een object panelen met tabs in het documentvenster.

2 Ganaardeeigenschappencontrole(Venster>Eigenschappen)enselecteerhetpaneeldatustandaardwiltopeneninhet

pop-upmenu Standaardpaneel.

Het object panelen met tabs aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een object panelen met tabs kunt uitvoeren, worden

aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het object panelen met tabs wijzigen en een object

maken dat naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar

www.adobe.com/go/learn_dw_sprytabbedpanels_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryTabbedPanels.css.

Dreamweaver slaat het bestand SpryTabbedPanels.css in de map SpryAssets van uw site op wanneer u Spry-panelen met

tabs maakt. Dit bestand bevat ook nuttige informatie over diverse stijlen die u op het object kunt toepassen.

Hoewel u de regels voor het object panelen met tabs gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt

bewerken, kunt u ook het paneel CSS-stijlen gebruiken om de CSS van het object te bewerken. Het paneel CSS-stijlen is

handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de

modus Huidig van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

DREAMWEAVER CS3

Handboek

441

Tekst opmaken van het object panelen met tabs

U kunt de tekst van een object panelen met tabs opmaken door eigenschappen in te stellen voor de gehele objectcontainer

met panelen met tabs of voor de componenten van het specifieke object.

❖ Als u de tekstopmaak van een object panelen met tabs wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende

CSS-regel op te zoeken. Daarna voegt u uw eigen tekstopmaakeigenschappen en -waarden toe:

De achtergrondkleur wijzigen van een object panelen met tabs

❖

Als u de achtergrondkleuren van verschillende delen van een object panelen met tabs wilt wijzigen, gebruikt u de

volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna voegt u eigenschappen en waarden voor de gewenste

achtergrondkleur toe of wijzigt u deze:

De breedte van panelen met tabs beperken

Standaardwordthetobjectpanelenmettabsopengeklaptzodatdebeschikbareruimtegeheelinbeslagwordtgenomen.U

kunt de breedte van een object panelen met tabs echter beperken door een breedte-eigenschap voor de container in te

stellen.

1 Zoek de CSS-regel .TabbedPanels door het bestand SpryTabbedPanels.css te openen. Deze regel definieert

eigenschappen voor het hoofdcontainerelement van het object panelen met tabs.

U vindt de regel ook door het object panelen met tabs te selecteren en het paneel CSS-stijlen te bekijken (Venster > CSS-

stijlen). Zorg ervoor dat het paneel is ingesteld op de modus Huidig.

2 Voeg een breedte-eigenschap en -waarde aan de regel toe, bijvoorbeeld

width:. 300px;.

Werken met het object tekstveld voor validatie

Over het tekstveld voor validatie

Een Spry-object tekstveld voor validatie is een tekstveld dat geldige of ongeldige toestanden weergeeft wanneer de

sitebezoeker tekst invoert. U kunt bijvoorbeeld een Object tekstveld voor validatie toevoegen aan een formulier waarin

bezoekers hun e-mailadressen invoeren. Als de bezoeker bijvoorbeeld het symbool “@” in het e-mailadres vergeet op te

nemen, wordt het bericht geretourneerd dat de informatie die de gebruiker heeft ingevoerd, ongeldig is.

In het volgende voorbeeld ziet u de diverse toestanden van een object tekstveld voor validatie:

Te wijzigen tekst Relevante CSS-regel Voorbeeld van toe te voegen

eigenschappen en waarden

Tekst in het hele object .TabbedPanels font: Arial; font-size:medium;

Tekst op de paneeltabs .TabbedPanelsTabGroup of

.TabbedPanelsTab

font: Arial; font-size:medium;

Tekst in de inhoudspanelen .TabbedPanelsC

ontentGroup of

.TabbedPanelsContent

font: Arial; font-size:medium;

Te wijzigen kleur Relevante CSS-regel Voorbeeld van toe te voegen of te

wijzigen eigenschap en waarde

Achtergrondkleur van paneeltabs .TabbedPanelsTabGroup of

.TabbedPanelsTab

background-color: #DDD; (Dit is de

standaardwaarde)

Achtergrondkleur van inhoudspanelen .Tabbed PanelsContentGroup of

.TabbedPanelsContent

background-color: #EEE; (Dit is de

standaardwaarde)

Achtergrondkleur van geselecteerde

tab

.TabbedPanelsTabSelected background-color: #EEE; (Dit is de

standaardwaarde)

Achtergrondkleur van paneeltabs

wanneer de muisaanwijzer eroverheen

beweegt

.TabbedPanelsTabHover background-

color: #CCC; (Dit is de

standaardwaarde)

DREAMWEAVER CS3

Handboek

442

A. Object tekstveld, tip geactiveerd B. Object tekstveld, toestand Geldig C. Object tekstveld, toestand Ongeldig D. Object tekstveld, toestand

Vereist

Het object tekstveld voor validatie kent een aantal toestanden (bijvoorbeeld geldig, ongeldig, verplichte waarde enzovoort).

Al naargelang de gewenste validatieresultaten kunt u de eigenschappen van deze toestanden wijzigen met de

eigenschappencontrole.Eenobjecttekstveldvoorvalidatiekanopverschillendemomentenvalideren,bijvoorbeeldophet

moment dat de bezoeker buiten het object klikt, tijdens het invoeren van de informatie of wanneer de bezoeker het

formulier probeert te verzenden.

Status bij openen De toestand van het object wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het

formulier opnieuw instelt.

Toestand Focus De toestand van het object wanneer de gebruiker de invoegpositie in het object plaatst.

Toestand Geldig De toestand van het object wanneer de gebruiker informatie correct heeft ingevoerd en het formulier kan

worden verzonden.

Toestand Ongeldig De toestand van het object wanneer de gebruiker tekst in een ongeldige notatie heeft ingevoerd.

(Bijvoorbeeld 07 voor het jaartal in plaats van 2007).

Toestand Vereist De toestand van het object wanneer de gebruiker geen tekst heeft ingevoerd in een verplicht tekstveld.

Toestand Minimum aantal tekens De toestand van het object wanneer de gebruiker minder tekens heeft ingevoerd dan het

minimum aantal tekens dat in het tekstveld is verplicht.

Toestand Maximum aantal tekens De toestand van het object wanneer de gebruiker meer tekens heeft ingevoerd dan het

maximum aantal tekens dat in het tekstveld is verplicht.

Toestand minimumwaarde De toestand van het object wanneer de gebruiker een waarde heeft ingevoerd die kleiner is dan

de waarde die in het tekstveld is vereist. (Is van toepassing op validaties van het gegevenstype Geheel getal en reëel getal.)

Toestand Maximumwaarde De toestand van het object wanneer de gebruiker een waarde heeft ingevoerd die groter is dan

de waarde die in het tekstveld is vereist. (Is van toepassing op validaties van het gegevenstype Geheel getal en reëel getal.)

Wanneer een object tekstveld voor validatie na een gebruikersactie één van deze toestanden krijgt, past de Spry-

frameworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor het object. Als een gebruiker

bijvoorbeeld een formulier verstuurt waarin geen tekst is ingevuld in een verplicht tekstveld, past Spry een klasse op het

object toe die ervoor zorgt dat het foutbericht “Een waarde is verplicht” wordt weergegeven. De regels die de opmaak en

weergavetoestanden van foutberichten bepalen, vindt u in het CSS-bestand bij het object, SpryValidationTextField.css.

De standaard-HTML voor het object tekstveld voor validatie bevindt zich gewoonlijk in een formulier, en bevat een

containertag <span> met daarbinnen de <input>-tag van het tekstveld. De HTML voor het object tekstveld voor validatie

bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van het object.

Voor een uitvoerige uitleg van de werking van het object tekstveld voor validatie, waaronder een volledige anatomie van de

code van het object tekstveld voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprytextfield_nl.

Het object tekstveld voor validatie invoegen

1 Kies Invoegen > Spry > Spry-tekstveld voor validatie.

2 Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.

DREAMWEAVER CS3

Handboek

443

Opmerking: U kunt een object tekstveld voor validatie ook invoegen met behulp van de categorie Spry op de invoegbalk.

Zie ook

“Toegankelijke HTML-formulieren maken” op pagina 582

Een validatietype en -notatie opgeven

U kunt voor het object tekstveld voor validatie verschillende validatietypen opgeven. U kunt bijvoorbeeld het validatietype

creditcard opgeven als in het tekstveld creditcardnummers worden ingevoerd.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer een validatietype in het menu Type.

3 Selecteer indien van toepassing een notatie in het pop-upmenu Notatie.

Bijdemeestevalidatietypenverwachthettekstveldeenstandaardnotatie. Als u bijvoorbeeld het validatietype Geheel getal

op een tekstveld toepast, wordt het object alleen gevalideerd als de gebruiker een getal in het tekstveld invoert. Bij sommige

validatietypen kunt u echter kiezen welke notatie door het tekstveld wordt geaccepteerd. In de volgende tabel vindt u een

overzicht van validatietypen en notaties die beschikbaar zijn via de eigenschappencontrole:

Validatietype Indeling

Geen Geen specifieke notatie vereist.

Geheel getalTekstveld accepteert alleen getallen.

E-mailTekstveld accepteert e-mailadressen die een @ en een punt

(.) bevatten, die beide worden voorafgegaan en worden

gevolgd door minstens één letter.

Datum Notaties variëren. Maak uwkeuze uit het menu Formaat van

eigenschappencontrole.

Tijd Notaties variëren. Maak uwkeuze uit het menu Formaat van

de eigenschappencontrole. (“tt” staat voor de notatie

am/pm, en “t” staat voor de notatie a/p.)

Creditcard Notaties variëren. Maak uwkeuze uit het menu Formaat van

de eigenschappencontrole. U kunt kiezen of alle creditcards

worden geaccepteerd, of alleen een bepaalde creditcard,

bij

voorbeeld MasterCard, Visa enzovoort.. Het tekstveld

accepteert geen spaties in creditcardnummer, dus 4321

3456 4567 4567.

Postcode Notaties variëren. Maak uwkeuze uit het menu Formaat van

de eigenschappencontrole.

Telefoonnummer Tekstveld accepteert telefoonnummers in de Amerikaanse

en Canadese notatie (000) 000-0000, of een aangepaste

notatie. Als u voor een aangepaste

notatie kiest, voert u de

notatie, bijvoorbeeld 000-0000000 in het tekstvak Patroon

in.

SOFI-nummer Tekstveld accepteert sofinummers met de notatie 000-00-

0000.

Valuta Tekstveld accepteert valuta, opgemaakt als 1,000,000.00 of

1.000.000,00.

Reëel-getal/wetenschappelijke notatie V

alideert diverse soor ten getallen; gehele getallen

(bijvoorbeeld, 1); zwevende waarden (bijvoorbeeld 12.123)

en zwevende waarden in de wetenschappelijke notatie

(bijvoorbeeld 1.212e+12, 1.221e-12 waarbij e een macht van

10 is).

DREAMWEAVER CS3

Handboek

444

Opgeven wanneer validatie wordt uitgevoerd

U kunt opgeven wanneer de validatie wordt uitgevoerd—op het moment dat de bezoeker buiten het object klikt, tijdens de

invoer of wanneer de bezoeker het formulier probeert te verzenden.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie die aangeeft wanneer de validatie

moet worden uitgevoerd. U kunt alle opties of geen enkele optie selecteren.

Vervagen Valideert op het moment dat de gebruiker buiten het tekstveld klikt.

Wijzigen Valideert terwijl de gebruiker tekst in het tekstveld wijzigt.

Verzenden Valideert op het moment dat de gebruiker het formulier probeert te verzenden.

Een minimum en maximum aantal tekens opgeven

Deze optie is alleen beschikbaar voor de validatietypen Geen, Geheel getal, E-mailadres en URL.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een getal in het vak Min. tekens en Max. tekens

in. Als u in het vak Min. tekens bijvoorbeeld 3 invoert, valideert het object alleen als de gebruikers minstens drie tekens

heeft ingevoerd.

Minimum- en maximumwaarden opgeven

Deze optie is alleen beschikbaar voor de validatietypen Geheel getal, Tijd, Valuta en Reëel-getal/wetenschappelijke notatie.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een waarde in het vak Min. waarde en Max.

waarde in. Als u in het vak Min. waarde bijvoorbeeld 3 invoert, valideert het object alleen als de gebruiker het getal 3 of

hoger (4, 5, 6 enzovoort) in het tekstveld invoert.

Objecttoestanden weergeven in de ontwerpweergave

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-

upmenu Voorvertoningsstatus. Bijvoorbeeld, selecteer Geldig als u het object in de toestand Geldig wilt weergeven.

Verplichte status van een tekstveld wijzigen

Standaard moeten alle objecten tekstveld voor validatie die u met Dreamweaver invoegt, door de gebruiker worden

ingevuldvóórpublicatieopeenwebpagina.Ukunthetinvullenvandetekstveldenvoordegebruikerechterookoptioneel

maken.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit.

IP-adres Notaties variëren. Maak uwkeuze uit het menu Formaat van

de eigenschappencontrole.

URL Tekstveld accepteert URL's die zijn opgemaakt als

http://xxx.xxx.xxx of ftp://xxx.xxx.xxx.

Aangepast Hiermee geeft u een aangepast validatietype en -notatie.

Voer het notatiepatroon (en -tip indien gewenst)

in de

eigenschappencontrole in.

Validatietype Indeling

DREAMWEAVER CS3

Handboek

445

Een tip voor een tekstveld maken

Omdat er voor tekstvelden zoveel verschillende notaties zijn, is het handig om uw gebruikers een tip te geven met

betrekking tot de notatie die ze moeten invoeren. Een tekstveld dat is ingesteld met het validatietype Telefoonnummer

accepteert bijvoorbeeld alleen telefoonnummers in de vorm (000) 000-0000. U kunt deze voorbeeldnummers als een tip

instellen zodat in het tekstveld de juiste notatie wordt weergegeven wanneer een gebruiker de pagina in een browser laadt.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een tip in het tekstvak Tip in.

Ongeldige tekens blokkeren

U kunt voorkomen dat gebruikers ongeldige tekens in een object tekstveld voor validatie invoeren. Als u deze optie

bijvoorbeeld inschakelt voor een object waarvoor het validatietype Geheel getal is ingesteld, verschijnt niets in het tekstveld

als de gebruiker een letter probeert te typen.

1 Selecteer een object tekstveld voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie Patroon afdwingen.

Het object tekstveld voor validatie aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een object tekstveld voor validatie kunt uitvoeren,

worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het object tekstveld voor validatie wijzigen

en een object maken dat naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar

www.adobe.com/go/learn_dw_sprytextfield_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationTextField.css.

Wanneer u een Spry-object tekstveld voor validatie maakt, slaat Dreamweaver het bestand SpryValidationTextField.css op

in de map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie

bevat over de diverse stijlen die u op het object kunt toepassen.

Hoewel u de regels voor het object tekstveld voor validatie gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt

bewerken, kunt u ook het paneel CSS-stijlen gebruiken om de CSS van het object te bewerken. Het paneel CSS-stijlen is

handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de

modus Huidig van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

Tekst opmaken van foutbericht voor object tekstveld voor validatie

Standaard worden foutberichten voor het object tekstveld voor validatie weergegeven in een kader met een rode rand van

1 pixel dik.

❖ Als u de tekstopmaak van de foutberichten voor een object tekstveld voor validatie wilt wijzigen, gebruikt u de volgende

tabel om de desbetreffende CSS-regel op te zoeken. Daarna verandert u de standaardeigenschappen of voegt u uw eigen

tekstopmaakeigenschappen en -waarden toe:

Te wijzigen tekst Relevante CSS-regel Relevante eigenschappen om te

wijzigen

Tekst van

foutbericht

.textfieldRequiredState .textfieldRequiredMsg,

.textfieldInvalidFormatState .textfieldInvalidFormatMsg,

.textfieldMinValueState .textfieldMinValueMsg,

.textfieldMaxValueState .textfieldM

axValueMsg,

.textfieldMinCharsState .textfieldMinCharsMsg,

.textfieldMaxCharsState .textfieldMaxCharsMsg

kleur: #CC3333; rand: 1px solid

#CC3333;

DREAMWEAVER CS3

Handboek

446

De achtergrondkleur wijzigen van het object tekstveld voor validatie

❖

Als u de achtergrondkleuren van het object tekstveld voor validatie in de diverse toestanden wilt wijzigen, gebruikt u de

volgende tabel om de desbetreffende CSS-regel op te zoeken, en verandert u de standaardwaarden voor de

achtergrondkleur:

Werken met het object tekstgebied voor validatie

Over het tekstgebied voor validatie

Een Spry-object tekstgebied voor validatie is een tekstgebied dat alleen geldige of ongeldige toestanden weergeeft wanneer

de gebruiker enkele regels tekst invoert. Als het tekstgebied een verplicht veld is en de gebruiker geen tekst invoert,

retourneert het object het bericht dat een waarde verplicht.

In het volgende voorbeeld ziet u de diverse toestanden van een object tekstgebied voor validatie:

A. Teller Resterende tekens B. Object tekstveld in focus, toestand Maximum aantal tekens C. Object tekstveld in focus, geldige toestand

D. Object tekstgebied, toestand Vereist E. Teller Ingevoerde tekens

Het object tekstgebied voor validatie kent een aantal toestanden (bijvoorbeeld geldig, ongeldig, verplichte waarde

enzovoort). Al naargelang de gewenste validatieresultaten kunt u de eigenschappen van deze toestanden wijzigen met de

eigenschappencontrole. Een object tekstgebied voor validatie kan op verschillende momenten valideren, bijvoorbeeld op

het moment dat de gebruiker buiten het object klikt, tijdens het invoeren van de informatie of wanneer de bezoeker het

formulier probeert te verzenden.

Status bij openen De toestand van het object wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het

formulier opnieuw instelt.

Te wijzigen kleur Relevante CSS-regel Relevante eigenschap om te

wijzigen

Achtergrondkleur van

object in toestand Geldig

.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;

Achtergrondkleur van

object in toestand

Ongeldig

input.textfieldRequiredState, .textfieldRequiredState

input, input.textfieldInvalidFormatState,

.textfieldInvalidFormatState input,

input.textfieldMinValueState, .textfieldMinValueState

input, input.textfieldMaxValueState,

.textfieldMaxValueState input,

input.textfieldMinCharsState, .textfieldMinCharsState

input, input.textfie

ldMaxCharsState,

.textfieldMaxCharsState input

background-color: #FF9F9F;

Achtergrondkleur van

object bij focus

.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;

DREAMWEAVER CS3

Handboek

447

Toestand Focus De toestand van het object wanneer de gebruiker de invoegpositie in het object plaatst.

Toestand Geldig De toestand van het object wanneer de gebruiker informatie correct heeft ingevoerd en het formulier kan

worden verzonden.

Toestand Vereist De objecttoestand wanneer de gebruiker geen tekst heeft ingevoerd.

Toestand Minimum aantal tekens De toestand van het object wanneer de gebruiker minder tekens heeft ingevoerd dan het

minimum aantal tekens dat in het tekstgebied is verplicht.

Toestand Maximum aantal tekens De toestand van het object wanneer de gebruiker meer tekens heeft ingevoerd dan het

maximum aantal tekens dat in het tekstgebied is verplicht.

Wanneer een object tekstgebied voor validatie na een gebruikersactie één van deze toestanden krijgt, past de Spry-

frameworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor het object. Als een gebruiker

bijvoorbeeld een formulier verstuurt waarin geen tekst is ingevuld in een verplicht tekstgebied, past Spry een klasse op het

object toe die ervoor zorgt dat het foutbericht “Een waarde is verplicht” wordt weergegeven. De regels die de opmaak en

weergavetoestanden van foutberichten bepalen, vindt u in het CSS-bestand bij het object, SpryValidationTextArea.css.

De standaard-HTML voor het object tekstgebied voor validatie bevindt zich gewoonlijk in een formulier, en bevat een

containertag <span> met daarbinnen de <textarea>-tag van het tekstgebied. De HTML voor het object tekstgebied voor

validatie bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van het object.

Voor een uitvoerige uitleg van de werking van het object tekstgebied voor validatie, waaronder een volledige anatomie van

de code van het object tekstgebied voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprytextarea_nl.

Het object tekstgebied voor validatie invoegen

1 Kies Invoegen > Spry > Spry-tekstgebied voor validatie.

2 Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.

Opmerking: U kunt een object tekstgebied voor validatie ook invoegen met behulp van de categorie Spry op de invoegbalk.

Zie ook

“Toegankelijke HTML-formulieren maken” op pagina 582

Opgeven wanneer validatie wordt uitgevoerd

U kunt opgeven wanneer de validatie wordt uitgevoerd—op het moment dat de gebruiker buiten het object klikt, tijdens de

invoer of wanneer de gebruiker het formulier probeert te verzenden.

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ganaardeeigenschappencontrole(Venster>Eigenschappen)enselecteerdeValiderenbij-optiedieaangeeftwanneer

de validatie moet worden uitgevoerd. U kunt alle opties of geen enkele optie selecteren.

Vervagen Valideert op het moment dat de gebruiker buiten het tekstveld klikt.

Wijzigen Valideert terwijl de gebruiker tekst in het tekstveld wijzigt.

Verzenden Valideert op het moment dat de gebruiker het formulier probeert te verzenden.

Een minimum en maximum aantal tekens opgeven

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een getal in het vak Min. tekens en Max. tekens

in. Als u in het vak Min. tekens bijvoorbeeld 20 invoert, valideert het object alleen als de gebruikers minstens 20 tekens in

het tekstgebied heeft ingevoerd.

DREAMWEAVER CS3

Handboek

448

Een tekenteller toevoegen

U kunt een tekenteller toevoegen zodat de gebruiker kan zien hoeveel tekens hij of zij al heeft getypt en hoeveel tekens er

nog in het tekstgebied ingevoerd kunnen worden. Wanneer u een tekenteller toevoegt, wordt deze standaard buiten de

rechterbenedenhoek van het object weergegeven.

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Aantal tekens of Resterende tekens in.

Opmerking: De optie Resterende tekens is alleen beschikbaar als u eerder hebt ingesteld hoeveel tekens maximaal zijn

toegestaan.

Objecttoestanden weergeven in de ontwerpweergave

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-

upmenu Voorvertoningsstatus. Bijvoorbeeld, selecteer Geldig als u het object in de toestand Geldig wilt weergeven.

Verplichte status van een tekstgebied wijzigen

Standaard moeten alle objecten tekstgebied voor validatie die u met Dreamweaver invoegt, door de gebruiker worden

ingevuld vóór publicatie op een webpagina. U kunt de validatie van tekstvelden echter optioneel maken.

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit.

Een tip voor een tekstgebied maken

U kunt een tip aan het tekstgebied toevoegen, bijvoorbeeld 'Typ hier uw beschrijving', zodat de gebruiker weet wat voor

informatie in het tekstgebied moet worden ingevoerd. In het tekstgebied wordt de tekst van de tip weergegeven wanneer de

pagina in een browser wordt geladen.

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een tip in het tekstvak Tip in.

Extra tekens blokkeren

U kunt voorkomen dat gebruikers meer tekens invoeren dan maximaal is toegestaan in een object tekstgebied voor

validatie. Als u deze optie bijvoorbeeld voor een object selecteert zodat niet meer dan 20 tekens mogen worden ingevoerd,

kan de gebruiker in het tekstgebied niet meer dan 20 tekens invoeren.

1 Selecteer een object tekstgebied voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Extra tekens blokkeren in.

Het object tekstgebied voor validatie aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een object tekstgebied voor validatie kunt

uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het object tekstgebied voor

validatie wijzigen en een object maken dat naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met

opmaaktaken gaat u naar www.adobe.com/go/learn_dw_sprytextarea_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationTextArea.css.

Wanneer u een Spry-object tekstgebied voor validatie maakt, slaat Dreamweaver het bestand SpryValidationTextArea.css

op in de map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie

bevat over de diverse stijlen die u op het object kunt toepassen.

DREAMWEAVER CS3

Handboek

449

Hoewel u de regels voor het object tekstgebied voor validatie gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt

bewerken, kunt u ook het paneel CSS-stijlen gebruiken om de CSS van het object te bewerken. Het paneel CSS-stijlen is

handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de

modus Huidig van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

Tekst opmaken van foutbericht voor object tekstgebied voor validatie

Standaard worden foutberichten voor het object tekstgebied voor validatie weergegeven in een kader met een rode rand van

1 pixel dik.

❖ Als u de tekstopmaak van de foutberichten voor een object tekstgebied voor validatie wilt wijzigen, gebruikt u de

volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna verandert u de standaardeigenschappen of voegt u uw

eigen tekstopmaakeigenschappen en -waarden toe:

De achtergrondkleur wijzigen van het object tekstgebied voor validatie

❖

Als u de achtergrondkleuren van het object tekstgebied voor validatie in de diverse toestanden wilt wijzigen, gebruikt u

de volgende tabel om de desbetreffende CSS-regel op te zoeken, en verandert u de standaardwaarden voor de

achtergrondkleur:

Werken met het object Validatie selecteren

Over het object Validatie selecteren

Een Spry-object validatie selecteren is een vervolgkeuzemenu dat geldige of ongeldige toestanden weergeeft wanneer de

gebruiker een selectie maakt. U kunt bijvoorbeeld een object validatie selecteren invoegen dat een lijst met toestanden

bevat, die in verschillende secties zijn gegroepeerd en met horizontale lijnen zijn gescheiden. Als de gebruiker per ongeluk

een van de scheidingslijnen selecteert in plaats van een van de toestanden, retourneert het object Validatie selecteren het

bericht dat de selectie van de gebruiker ongeldig is.

In het volgende voorbeeld ziet u een opengeklapt object validatie selecteren evenals de dichtgeklapte vorm van het object

in diverse toestanden:

Te wijzigen tekst Relevante CSS-regel Relevante eigenschappen om te

wijzigen

Tekst van foutbericht .textareaRequiredState

.textareaRequiredMsg,

.textareaMinCharsState

.textareaMinCharsMsg,

.textareaMaxCharsState

.textareaMaxCharsMsg

kleur: #CC3333; rand: 1px solid

#CC3333;

Te wijzigen achtergrondkleur Relevante CSS-regel Relevante eigenschap om te wijzigen

Achtergrondkleur van object in

toestand Geldig

.textareaValidS

tate textarea,

textarea.textareaValidState

background-color: #B8F5B1;

Achtergrondkleur van object in

toestand Ongeldig

textarea.textareaRequiredState,

.textareaRequiredState textarea,

textarea.textareaMinCharsState,

.textareaMinCharsState textarea,

textarea.textareaMaxCharsS

tate,

.textareaMaxCharsState textarea

background-color: #FF9F9F;

Achtergrondkleur van object bij focus .textareaFocusState textarea,

textarea.textareaFocusState

background-color: #FFFFCC;

DREAMWEAVER CS3

Handboek

450

A. Object validatie selecteren bij focus B. Object selecteren, toestand Geldig C. Object selecteren, toestand Vereist D. Object selecteren,

toestand Ongeldig

Het object Validatie selecteren kent een aantal toestanden (bijvoorbeeld geldig, ongeldig, verplichte waarde enzovoort). Al

naargelang de gewenste validatieresultaten kunt u de eigenschappen van deze toestanden wijzigen met de

eigenschappencontrole. Een object validatie selecteren kan op verschillende momenten valideren, bijvoorbeeld op het

moment dat de gebruiker buiten het object klikt, tijdens het maken van een selectie of wanneer de gebruiker het formulier

probeert te verzenden.

Status bij openen De toestand van het object wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het

formulier opnieuw instelt.

Toestand Focus De toestand van het object wanneer de gebruiker op het object klikt.

Toestand Geldig De toestand van het object wanneer de gebruiker een geldig item heeft geselecteerd en het formulier kan

worden verzonden.

Toestand Ongeldig De toestand van het object wanneer de gebruiker een ongeldig item heeft geselecteerd.

Toestand Vereist De toestand van het object wanneer de gebruiker geen geldig item heeft geselecteerd.

Wanneer een object validatie selecteren na een gebruikersactie één van deze toestanden heeft gekregen, past de Spry-

frameworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor het object. Als een gebruiker

bijvoorbeeld een formulier probeert te verzenden zonder dat hij of zij een item in het menu heeft geselecteerd, past Spry

een klasse op het object toe die het foutbericht “Selecteer een item” weergeeft. De regels die de opmaak en

weergavetoestanden van foutberichten bepalen, vindt u in het CSS-bestand bij het object, SpryValidationSelect.css.

De standaard-HTML voor het object Validatie selecteren bevindt zich gewoonlijk in een formulier, en bevat een

containertag <span> met daarbinnen de <select>-tag van het tekstgebied. De HTML voor het object Validatie selecteren

bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van het object.

Voor een uitvoerige uitleg van de werking van het object Validatie selecteren, waaronder een volledige anatomie van de

code van het menubalkobject, gaat u naar www.adobe.com/go/learn_dw_spryselect_nl.

Het object Validatie selecteren invoegen

1 Kies Invoegen > Spry > Spry-validatie selecteren.

2 Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.

3 Ga naar de codeweergave en voeg option-tags toe die menu-items en -waarden bevatten. Dit wordt niet automatisch in

Dreamweaver gedaan. Zie het voorgaande onderwerp voor meer informatie.

Opmerking: U kunt een object validatie selecteren ook invoegen met behulp van de categorie Spry op de invoegbalk.

Zie ook

“Toegankelijke HTML-formulieren maken” op pagina 582

DREAMWEAVER CS3

Handboek

451

Opgeven wanneer validatie wordt uitgevoerd

U kunt opgeven wanneer de validatie wordt uitgevoerd; op het moment dat de gebruiker buiten het object klikt, tijdens de

invoer of wanneer de gebruiker het formulier probeert te verzenden.

1 Selecteer een object validatie selecteren in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie die aangeeft wanneer de validatie

moet worden uitgevoerd. U kunt alle opties of geen enkele optie selecteren.

Vervagen Valideert op het moment dat de gebruiker buiten het object klikt.

Wijzigen Valideert wanneer de gebruiker selecties maakt.

Verzenden Valideert op het moment dat de gebruiker het formulier probeert te verzenden.

Objecttoestanden weergeven in de ontwerpweergave

1 Selecteer een object validatie selecteren in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-

upmenu Voorvertoningsstatus. Bijvoorbeeld, selecteer Geldig als u het object in de toestand Geldig wilt weergeven.

Lege waarden verbieden of toestaan

Standaard moeten gebruikers voor alle objecten validatie selecteren die u met Dreamweaver invoegt, een menu-item

selecteren voordat het object op een webpagina wordt gepubliceerd. U kunt deze optie echter uitschakelen.

1 Selecteer een object validatie selecteren in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Lege waarden niet toestaan in of uit.

Een ongeldige waarde opgeven

U kunt opgeven dat een waarde als ongeldig wordt geregistreerd als de gebruiker een menu-item selecteert dat niet aan die

waarde is gekoppeld. Als u bijvoorbeeld opgeeft dat -1 een ongeldige waarde is en u de waarde als volgt toekent aan een

option-tag, retourneert het object een foutbericht als de gebruiker dat menu-item selecteert.

1 Selecteer een object validatie selecteren in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer in het vak Ongeldige waarde een getal in dat u als

een ongeldige waarde wilt gebruiken.

Het object Validatie selecteren aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een object validatie selecteren kunt uitvoeren,

worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het object Validatie selecteren wijzigen en

een object maken dat naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar

www.adobe.com/go/learn_dw_spryselect_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationSelect.css.

Wanneer u een Spry-object validatie selecteren maakt, slaat Dreamweaver het bestand SpryValidationSelect.css op in de

map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie bevat

over de diverse stijlen die u op het object kunt toepassen.

Hoewel u de regels voor het object validatie selecteren gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt

bewerken, kunt u ook het paneel CSS-stijlen gebruiken om de CSS van het object te bewerken. Het paneel CSS-stijlen is

handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de

modus Huidig van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

DREAMWEAVER CS3

Handboek

452

Tekst opmaken van foutbericht voor object validatie selecteren

Standaard worden foutberichten voor het object Validatie selecteren weergegeven in een kader met een rode rand van 1

pixel dik.

❖ Als u de tekstopmaak van de foutberichten voor een object validatie selecteren wilt wijzigen, gebruikt u de volgende tabel

om de desbetreffende CSS-regel op te zoeken. Daarna verandert u de standaardeigenschappen of voegt u uw eigen

tekstopmaakeigenschappen en -waarden toe:

De achtergrondkleur wijzigen van het object Validatie selecteren

❖

Als u de achtergrondkleuren van het object Validatie selecteren in de diverse toestanden wilt wijzigen, gebruikt u de

volgende tabel om de desbetreffende CSS-regel op te zoeken, en verandert u de standaardwaarden voor de

achtergrondkleur:

Werken met het object selectievakje voor validatie

Over het object selectievakje voor validatie

Een Spry-object selectievakje voor validatie is een selectievakje of groep selectievakjes in een HTML-formulier waarin

geldige of ongeldige toestanden worden weergegeven wanneer de gebruiker een selectievakje al dan niet inschakelt. U kunt

bijvoorbeeld een object selectievakje voor validatie aan een formulier toevoegen waarin een gebruiker drie selecties zou

kunnen opgeven. Als de gebruiker niet alledrie de selecties opgeeft, retourneert het object het bericht dat niet aan het

minimum aantal selecties is voldaan.

In het volgende voorbeeld ziet u de diverse toestanden van een object selectievakje voor validatie:

A. Objectgroep selectievakje voor validatie, status minimum aantal selecties B. Validatie Selectievakje object, toestand Vereist

Op te maken tekst Relevante CSS-regel Relevante eigenschappen om te

wijzigen

Tekst van foutbericht .selectRequiredState

.selectRequiredMsg, .selectInvalidState

.selectInvalidMsg

kleur: #CC3333; rand: 1px solid

#CC3333;

Te wijzigen achtergrondkleur Relevante CSS-regel Relevante eigenschap om te wijzigen

Achtergrondkleur van object in

toestand Geldig

.selectValidState select,

select.selectValidState

background-co

lor: #B8F5B1;

Achtergrondkleur van object in

toestand Ongeldig

select.selectRequiredState,

.selectRequiredState select,

select.selectInvalidState,

.selectInvalidState select

background-color: #FF9F9F;

Achtergrondkleur van object bij focus .selectFocusState select,

select.se

lectFocusState

background-color: #FFFFCC;

DREAMWEAVER CS3

Handboek

453

Het object selectievakje voor validatie kent een aantal toestanden (bijvoorbeeld geldig, ongeldig, verplichte waarde

enzovoort). Al naargelang de gewenste validatieresultaten kunt u de eigenschappen van deze toestanden wijzigen met de

eigenschappencontrole. Een object selectievakje voor validatie kan op verschillende momenten valideren, bijvoorbeeld op

het moment dat de gebruiker buiten het object klikt, tijdens het opgeven van een selectie of wanneer de gebruiker het

formulier probeert te verzenden.

Status bij openen De toestand van het object wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het

formulier opnieuw instelt.

Toestand Geldig De toestand van het object wanneer de gebruiker een selectie heeft opgegeven, of het juiste aantal selecties,

en het formulier kan worden verzonden.

Toestand Vereist De toestand van het object wanneer de gebruiker een vereiste selectie niet heeft opgegeven.

Toestand Minimum aantal selecties De toestand van het object wanneer de gebruiker minder selectievakjes heeft

ingeschakeld dan minimaal is vereist.

Toestand Maximum aantal selecties De toestand van het object wanneer de gebruiker meer selectievakjes heeft

ingeschakeld dan maximaal is toegestaan.

Wanneer een object selectievakje voor validatie na een gebruikersactie één van deze toestanden krijgt, past de Spry-

frameworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor het object. Als een gebruiker

bijvoorbeeld een formulier probeert te versturen, maar geen selecties heeft opgegeven, past Spry een klasse op het object

toe die ervoor zorgt dat het foutbericht “Selecteer een optie” wordt weergegeven. De regels die de opmaak en

weergavetoestanden van foutberichten bepalen, vindt u in het CSS-bestand bij het object, SpryValidationCheckbox.css.

De standaard-HTML voor het object selectievakje voor validatie bevindt zich gewoonlijk in een formulier, en bevat een

containertag <span> met daarbinnen de <input type=“checkbox”> tag van het selectievakje. De HTML voor het object

selectievakje voor validatie bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van het object.

Voor een uitvoerige uitleg van de werking van het object selectievakje voor validatie, waaronder een volledige anatomie van

de code van het object selectievakje voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprycheckbox_nl.

Het object selectievakje voor validatie invoegen

1 Kies Invoegen > Spry > Spry-selectievakje voor validatie

2 Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.

Opmerking: U kunt een object selectievakje voor validatie ook invoegen met behulp van de categorie Spry op de invoegbalk.

Zie ook

“Toegankelijke HTML-formulieren maken” op pagina 582

Opgeven wanneer validatie wordt uitgevoerd

U kunt opgeven wanneer de validatie wordt uitgevoerd; op het moment dat de gebruiker buiten het object klikt, tijdens het

opgeven van selecties of wanneer de gebruiker het formulier probeert te verzenden.

1 Selecteer een object selectievakje voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie die aangeeft wanneer de validatie

moet worden uitgevoerd. U kunt alle opties of geen enkele optie selecteren.

Vervagen Valideert op het moment dat de gebruiker buiten het selectievakje klikt.

Wijzigen Valideert wanneer de gebruiker selecties maakt.

Verzenden Valideert op het moment dat de gebruiker het formulier probeert te verzenden.

DREAMWEAVER CS3

Handboek

454

Een minimum- en maximumselectiebereik opgeven

Een object selectievakje voor validatie is standaard ingesteld op Vereist. Als u op uw pagina echter een aantal selectievakjes

invoegt, kunt u een minimum- en maximumselectiebereik opgeven. Als u bijvoorbeeld zes selectievakjes hebt met een

<span>-tag voor een enkel object selectievakje voor validatie, en als u ervoor wilt zorgen dat de gebruikers minstens drie

selectievakjes selecteert, kunt u een voorkeur instellen voor het hele object.

1 Selecteer een object selectievakje voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie Bereik afdwingen.

3 Voer een minimum of maximum aantal (of beide) selectievakjes in dat de gebruiker moet of mag selecteren.

Objecttoestanden weergeven in de ontwerpweergave

1 Selecteer een object selectievakje voor validatie in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-

upmenu Weergavestatus. Selecteer bijvoorbeeld Bij openen om het object in de status bij openen weer te geven.

Foutberichten aanpassen voor het object selectievakje voor validatie

Standaard worden foutberichten voor het object selectievakje voor validatie weergegeven in een kader met een rode rand

van 1 pixel dik. U kunt de CSS-regels voor het object selectievakje voor validatie wijzigen en een object maken dat naar uw

eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar

www.adobe.com/go/learn_dw_sprycheckbox_custom_nl.

1 Open het bestand SpryValidationCheckbox.css.

Wanneer u een Spry-object selectievakje voor validatie maakt, slaat Dreamweaver het bestand SpryValidationCheckbox.css

op in de map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie

bevat over de diverse stijlen die u op het object kunt toepassen.

2 Gebruik de volgende tabel om de desbetreffende CSS-regel te vinden, en verander vervolgens de

standaardeigenschappen of voeg uw eigen tekstopmaakeigenschappen en -waarden toe:

Hoewel u de regels voor het object selectievakje voor validatie gemakkelijk rechtstreeks in het bijbehorende CSS-bestand

kunt bewerken, kunt u ook het paneel CSS-stijlen gebruiken om de CSS van het object te bewerken. Het paneel CSS-stijlen

is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de

modus Huidig van het paneel gebruikt.

Zie ook

“Het paneel CSS-stijlen in de modus Huidig” op pagina 121

Op te maken tekst Relevante CSS-regel Relevante eigenschappen om te

wijzigen

Tekst van foutbericht .checkboxRequiredState

.checkboxRequiredMsg,

.checkboxMinSelectionsState

.checkboxMinSelectionsMsg,

.checkboxMaxSelectionsState

.checkboxMaxSelectionsMsg

kleur: #CC3333; rand: 1px solid

#CC3333;

DREAMWEAVER CS3

Handboek

455

Gegevens weergeven met Spry

Over Spry-gegevenssets

Met het Spry-framework kunt u gegevensobjecten invoegen waarmee gebruikers vanuit een browservenster snel en op

dynamische wijze met een pagina kunnen werken. U kunt bijvoorbeeld een sorteerbare tabel invoegen waarvan gebruikers

de volgorde kunnen wijzigen, of u kunt een dynamisch Spry-tabelobject invoegen dat een gegevensupdate elders op de

pagina activeert zonder dat de gehele pagina moet worden vernieuwd.

Daartoe dient u in Dreamweaver eerst een of meer XML-bronbestanden (de 'Spry-gegevensset') te identificeren die uw

gegevens bevatten. Daarna voegt u een of meer Spry-gegevensobjecten in om deze gegevens weer te geven. Wanneer de

gebruiker de pagina in een browser opent, wordt de gegevensset geladen als een platte array met XML-gegevens die er

uitziet als een standaardtabel met rijen en kolommen.

Stel, u hebt de volgende XML-gegevensstructuur in uw XML-bestand:

<name>Adobe Photoshop CS2</name>

<category>Digital Imaging</category>

<boximage>images/photoshop.gif</boximage>

<descheader>The professional standard in desktop digital imaging</descheader>

<desc>Adobe Photoshop CS2 software, the professional image-editing ...</desc>

</product>

<name>Adobe Illustrator CS2</name>

<category>Print Publishing</category>

<boximage>images/illustrator.gif</boximage>

<descheader>Vector graphics reinvented</descheader>

<desc>Adobe Illustrator CS2 software gives you new creative freedom ...</desc>

</product>

</products>

Als u <product> als herhalend element selecteert, levert de platte array met XML-gegevens een kolom met gegevens op voor

elk productelement, bijvoorbeeld <name>, in de gegevensset:

U kunt objecten invoegen die deze gegevens op diverse manieren weergeven. In het volgende voorbeeld ziet u hoe u op een

webpagina een tabel kunt maken die maar drie elementen bevat:

DREAMWEAVER CS3

Handboek

456

Met Spry kunt u een dergelijke tabel eenvoudig aan een Dreamweaver-pagina toevoegen. U kunt ook een of meer

kolommen sorteerbaar maken zodat een gebruiker slechts op een kolom hoeft te klikken om deze te sorteren.

U kunt eveneens een dynamische tabel en een afzonderlijk gebied (een Spry-detailgebied) op de pagina invoegen, en de

gegevens vervolgens binden aan het detailgebied dat alleen het element <desc>—de gedetailleerde productomschrijving—

voor een enkel product weergeeft. Nadat de gegevens aan beide gebieden (de dynamische tabel en het detailgebied) zijn

gebonden, wordt het detailgebied bijgewerkt met de productdetails wanneer de gebruiker op een rij in de dynamische tabel

klikt.

Wanneer de gebruiker op een ander product in de tabel klikt, wordt het detailgebied met die informatie over het product

bijgewerkt. De browser hoeft bij geen van beide acties—het sorteren van de tabel of het bijwerken van een detailgebied

wanneer een gebruiker erop klikt—de gehele pagina te vernieuwen.

U kunt Spry-gegevensobjecten op vele manieren op uw Dreamweaver-pagina's opnemen. Enkele manieren vereisen een

goede kennis van het Spry-framework. Ga voor meer informatie over het framework naar

www.adobe.com/go/learn_dw_spryframework_nl. Ga voor meer informatie over het Spry-gegevenssets naar

www.adobe.com/go/learn_dw_sprydataset_nl.

Over dynamische Spry-tabellen

Spry-gegevenssets worden het meest gebruikt om een of meer HTML-tabellen te maken die andere paginagegevens op

dynamische wijze bijwerken als gevolg van een gebruikersactie. Als een gebruiker bijvoorbeeld een product in een

tabeloverzicht selecteert, kan Dreamweaver onmiddellijk gegevens elders op uw pagina bijwerken met gedetailleerde

specificaties over dat ene product, zonder dat de hele pagina moet worden vernieuwd.

Naam Categorie Desc-Kop

Adobe Photoshop CS2 Digitale

beeldverwerking

De professionele standaard in

digitalebeeldverwerking metde

pc.

Adobe Illustrator CS2 Print Publishing Vectorafbeeldingen herontdekt

DREAMWEAVER CS3

Handboek

457

Dit worden dynamische hoofd-endetailgebieden genoemd. Gewoonlijk geeft één gebied op de pagina (de hoofdtabel) een

verkorte reeks kolommen uit de gegevensset weer, en bevat een ander gebied van de pagina (het detailgebied) meer

informatie over een geselecteerde record. Omdat het detailgebied afhankelijk is van de hoofdtabel, hebben wijzigingen in

de gegevens van de hoofdtabel tot gevolg dat ook de gegevens in het detailgebied veranderen.

Wanneer u met dynamische gebieden werkt, maakt u telkens twee gebieden: de hoofdtabel en een detailgebied. Als u een

detailgebied aan de tabel wilt binden, moet u de optie Detailregio bijwerken als op rij wordt geklikt inschakelen.

Wanneer de gebruiker een rij in de hoofdtabel selecteert, identificeert Spry de rij waarop de selectie betrekking heeft en

worden de gegevens die in het bijbehorende detailgebied worden weergegeven, op dynamische wijze bijgewerkt.

Een Spry XML-gegevensset definiëren

Voordat u Spry-gebieden, -tabellen of -lijsten aan een HTML-pagina kunt toevoegen, moet u aangeven met welke gegevens

u wilt werken.

Opmerking: Als u nog geen XML-gegevensset hebt om voor testdoeleinden te gebruiken, vindt u in de Spry-elementen die

beschikbaar zijn via www.adobe.com/go/learn_dw_spryframework_nl verschillende voorbeeldgegevenssets.

1 Kies Invoegen > Spry > Spry XML-gegevensset.

U kunt ook op de knop Spry XML-gegevensset in de categorie Spry van de invoegbalk klikken.

2 U kunt de standaardnaam 'ds1' voor de Spry-gegevensset accepteren of een naam invoeren die voor u meer betekenis

heeft.

3 Als u een XML-gegevensbestand hebt waarmee u wilt werken, klikt u op de knop Bladeren om het te selecteren.

4 Als u de pagina wilt ontwerpen door een voorbeeldbron op uw testserver te gebruiken, klikt u op de koppeling Invoer

ontwerptijd.

5 Wanneer u hebt aangegeven welke gegevensset u wilt gebruiken, klikt u op de knop Schema ophalen om het paneel Rij-

elementen te vullen. In dit paneel ziet u welke elementen worden herhaald (gemarkeerd met een klein plusteken “+”) en

welke ondergeschikt zijn aan andere (ingesprongen).

DREAMWEAVER CS3

Handboek

458

6 In het paneel Rij-elementen selecteert u het element met de gegevens die u wilt weergegeven. Gewoonlijk is dit een

herhalend knooppunt, zoals <product>, met verschillende onderliggende velden, zoals <naam>, <categorie> en

<desckop>.

7 Het tekstvak XPath bevat een expressie die laat zien waar het gekozen knooppunt zich in het XML-bronbestand bevindt.

Als u bijvoorbeeld een gegevensset gebruikt met een schema zoals dat in de afbeelding hierboven, en daarna het herhalende

knooppunt <product> selecteert, bevat het tekstvak XPath de tekst “

products/product” om aan te geven dat de gegevens

die zijn gevonden in het herhalende knooppunt <product> in de gegevensset <products> moeten worden weergegeven.

Opmerking: XPath (XML Path Language) is een syntaxis voor het adresseren van delen van een XML-document. Deze

syntaxiswordtmeestalalseenquerytaalvoorXML-gegevensgebruikt,zoalsSQLwordtgebruiktvoorhetzoekennaargegevens

in databases. Voor meer informatie over XPath raadpleegt u de taalspecificatie van XPath op de W3C-website op

www.w3.org/TR/xpath.

8 Klik op de knop Voorvertoning als u wilt weten hoe uw gegevens er in een browser uitzien. Nu worden de eerste twintig

rijen van het XML-gegevensbestand weergegeven, met voor elk element een kolom.

9 Soms is het handig om een veld te definiëren als een specifiek type, bijvoorbeeld numeriek, om validatie van de

gegevensinvoer mogelijk te maken of om een specifieke sorteervolgorde te definiëren. Als u het gegevenstype voor een

bepaald element wilt wijzigen, selecteert u het element in het paneel Gegevenssetkolommen en kiest u een andere waarde

in het menu Gegevenstype.

DREAMWEAVER CS3

Handboek

459

10 Als u wilt dat de gegevens automatisch worden gesorteerd wanneer ze worden geladen, selecteert u een element in het

menu Sorteren. Als u later een sorteerbare Spry-tabel met een andere sorteervolgorde invoegt, heeft die sorteervolgorde

prioriteit.

11 Selecteer Oplopend of Aflopend in het menu Richting om de sorteervolgorde op te geven.

12 Schakel de optie Onderscheiden bij laden in als u ervoor wilt zorgen dat er geen dubbele kolommen zijn.

13 Schakel de optie XML-caching uitschakelen in als u de gegevens rechtstreeks van de server wilt laden. Om de prestaties

te verbeteren, wordt de Spry XML-gegevensset standaard geladen in een lokale cache op de computer van de gebruiker. Als

u echter met uiterst dynamische gegevens werkt, heeft deze methode geen voordelen.

14 Selecteer de optie Gegevens automatisch vernieuwen en voer een waarde in milliseconden in. Als u deze optie

inschakelt, vernieuwt de gegevensset de XML-gegevens automatisch na het opgegeven interval vanaf de server. Dit is handig

bij gegevens die regelmatig veranderen.

15 Klik op OK om deze gegevensset aan uw pagina te koppelen.

Belangrijk: Wanneer u een Spry-gegevensset definieert, worden verschillende regels code aan uw bestand toegevoegd om de

Spry-elementen: de bestanden xpath.js en SpryData.js, te identificeren. Verwijder deze code niet, anders werken de functies

voor de Spry-gegevensset niet.

Een invoer ontwerptijd gebruiken

Als u met gegevens werkt die nog in ontwikkeling zijn, is het soms handig om met een invoer ontwerptijd te werken. Als

de serverontwikkelaar bijvoorbeeld nog bezig is met het voltooien van de database achter uw XML-gegevensbestand, kunt

u een testversie van het bestand gebruiken om uw pagina onafhankelijk van de database-ontwikkeling te ontwerpen.

Als u met invoer ontwerp wilt werken, moet u eerst de categorie Testserver van het dialoogvenster Sitedefinitie invullen.

❖ U verkrijgt een invoer ontwerptijd door het bestand te zoeken en op OK te klikken. (U opent dit dialoogvenster door in

het dialoogvenster Spry-gegevensset definiëren op de koppeling te klikken.)

Opmerking: Wanneer u het uiteindelijke bestand laadt, moet u eraan denken om de bestandslocatie van het gegevensbestand

te wijzigen in die van het serverbestand.

Zie ook

“Een testserver instellen” op pagina 45

Een Spry-gebied maken

Het Spry-framework gebruikt twee typen gebieden: het ene is een Spry-gebied dat gegevensobjecten bevat, zoals tabellen

en herhalingen, en het andere is een Spry-detailgebied dat samen met een hoofdtabelobject wordt gebruikt om het

dynamisch bijwerken van gegevens op een Dreamweaver-pagina mogelijk te maken.

Alle Spry-gegevensobjecten moeten in een Spry-gebied zijn ingesloten. (Als u een Spry-gegevensobject probeert toe te

voegen voordat u een Spry-gebied aan een pagina hebt toegevoegd, wordt u in Dreamweaver gevraagd eerst een Spry-

gebied toe te voegen.) Standaard zijn Spry-gebieden HTML-<div>-containers. U kunt deze toevoegen voordat u een tabel

toevoegt, u kunt ze automatisch laten toevoegen wanneer u een tabel of herhaling invoegt en u kunt ze rond bestaande

tabel- of herhalingsobjecten plaatsen.

Als u een detailgebied toevoegt, voegt u doorgaans eerst het hoofdtabelobject toe en selecteert u de optie Detailgebieden

bijwerken. De enige waarde die anders is, en specifiek voor een detailgebied, is de optie Type in het dialoogvenster Spry-

gebied invoegen.

1 Kies Invoegen > Spry > Spry-gebied.

U kunt ook op de knop Spry-gebied in de categorie Spry van de invoegbalk klikken.

2 Voor de objectcontainer selecteert u de optie <div> of <span>. Standaard wordt een <div>-container gebruikt.

DREAMWEAVER CS3

Handboek

460

3 Kies een van de volgende opties:

• Als u een Spry-gebied wilt maken, selecteert u Gebied (de standaardinstelling) als het type gebied dat u wilt invoegen.

• Als u een Spry-detailgebied wilt maken, selecteert u de optie Detailgebied. Gebruik een detailgebied alleen als u

dynamische gegevens wilt binden die worden bijgewerkt wanneer gegevens in andere Spry-gebieden veranderen.

Belangrijk: U dient een detailgebied in te voegen in een andere <div> dan die voor het hoofdtabelgebied. Misschien moet u

naar de codeweergave gaan om de invoegpositie op de juiste plaats neer te zetten.

4 Kies de Spry-gegevensset in het menu.

5 Als u het gebied wilt maken of wijzigen dat voor een object is gedefinieerd, selecteert u het object en kiest u een van de

volgende opties:

Rondom selectie plaatsen Hiermee plaatst u een nieuw gebied rond een object.

Selectie vervangen Hiermee vervangt u een bestaand gebied voor een object.

6 Wanneer u op OK klikt, plaatst Dreamweaver een tijdelijke aanduiding voor het gebied op de pagina, met de tekst 'Plaats

hier de inhoud van Spry-gebied'. U kunt deze tekst vervangen door een Spry-gegevensobject, zoals een tabel of herhaling,

of door dynamische gegevens uit het paneel Bindingen.

7 Als u de tekst van de tijdelijke aanduiding wilt vervangen door een Spry-gegevensobject (bijvoorbeeld een Spry-tabel),

klikt u op de knop van het desbetreffende Spry-gegevensobject in de categorie Spry van de invoegbalk.

8 Als u de tekst van de tijdelijke aanduiding wilt vervangen door dynamische gegevens, gebruikt u een van de volgende

methoden:

• Sleep een of meer elementen van het paneel Bindingen over de geselecteerde tekst heen.

Opmerking: In het paneel Bindingen worden ook een aantal ingebouwde Spry-elementen, ds_RowID, ds_CurrentRowID en

ds_RowCount, genoemd. Met behulp van deze elementen kan Spry definiëren in welke rij een gebruiker heeft geklikt, wanneer

wordt bepaald hoe dynamische detailgebieden moeten worden bijgewerkt.

• Ga naar de codeweergave en voer de code voor een of meer elementen rechtstreeks in. Gebruik de volgende notatie:

{naam-gegevensset::naam-element}, zoals in {ds1::category}. of {dsProducts::desc}. Als u maar één gegevensset

in uw bestand gebruikt, of als u gegevenselementen gebruikt uit dezelfde gegevensset die u voor het gebied hebt

gedefinieerd, kunt u de naam van de gegevensset weglaten en gewoon

{category} of {desc} schrijven.

Ongeacht welke methode u gebruikt om de inhoud van het gebied te definiëren, in alle gevallen worden de volgende regels

aan uw HTML-code toegevoegd:

<div spry:region="ds1">{name}{category}</div>

<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Een Spry-tabel maken

Er zijn twee typen Spry-tabellen: een eenvoudige tabel en een dynamische hoofdtabel waaraan een detailgebied wordt

gebonden om het dynamisch bijwerken van gegevens op een Dreamweaver-pagina mogelijk te maken.

DREAMWEAVER CS3

Handboek

461

Als u een eenvoudige tabel maakt, kunt u een of meer kolommen instellen als sorteerbaar, en CSS-stijlen voor diverse

tabelelementen definiëren.

U maakt een dynamische hoofdtabel op dezelfde manier als een gewone tabel. Aan een hoofdtabel kunt u echter een

dynamisch detailgebied binden zodat de gegevens in het detailgebied dynamisch worden bijgewerkt wanneer de gebruiker

in een rij van de hoofdtabel klikt.

AlsueendynamischeSpry-hoofdtabelwiltbouwen,voegtueersteenhoofdtabelin,diedegegevensweergeeftdieworden

gebruikt om de dynamische wijzigingen te activeren. Daarna voegt u een detailgebied in, dat de gegevens bevat die de

wijzigingen ondergaan.

1 Kies Invoegen > Spry > Spry-tabel.

U kunt ook op de knop Spry-tabel in de categorie Spry van de invoegbalk klikken.

2 Kies de Spry-gegevensset in het menu.

Opmerking: Als u een tabel probeert in te voegen maar nog geen gebied hebt gemaakt, wordt u in Dreamweaver gevraagd om

eerst een gebied toe te voegen voordat u de tabel invoegt. Alle Spry-gegevensobjecten moeten in een gebied zijn opgenomen.

3 Ga naar het paneel Kolommen en pas op de volgende wijze de kolommen voor uw tabel aan:

• Klik op het plusteken (+) of minteken (-) om kolommen toe te voegen of te verwijderen.

• Klik op de pijlen omhoog of omlaag om een kolom te verplaatsen. Door een kolom hoger te plaatsen, verplaatst u deze

meer naar links in de weergegeven tabel. Door een kolom lager te plaatsen, verplaatst u deze meer naar rechts.

4 Alsueensorteerkolomwiltdefiniëren,selecteertudekolominhetpaneelKolommenenkiestuKolomsorterenalsop

kop wordt geklikt. Herhaal dit voor elke kolom waarop u wilt sorteren.

5 Als u CSS-stijlen aan uw pagina hebt gekoppeld, als een gekoppelde stijlpagina of als een reeks afzonderlijke stijlen in de

HTML-pagina, kunt u een CSS-klasse kiezen voor een of meer van de volgende opties:

Klasse met oneven rijen Hiermee verandert u de weergave van de oneven genummerde rijen.

Klasse met even rijen Hiermee verandert u de weergave van de even genummerde rijen.

Aanwijsklasse Hiermee verandert u de weergave van een rij wanneer u de muis erboven houdt.

Klasse selecteren Hiermee verandert u de weergave van een rij wanneer u erop klikt.

6 Als u een eenvoudige Spry-tabel maakt, schakelt u de standaardoptie, Detailregio bijwerken als op rij wordt geklikt, uit.

Laat de optie ingeschakeld als u een dynamische Spry-hoofdtabel maakt.

Opmerking: Als u een dynamische hoofdtabel invoegt, kunt u in de codeweergave zien dat Dreamweaver HTML-table-tags en

een spry:repeat-tag met een onClick-bewerking voor de huidige rij heeft ingevoegd. Op die manier bepaalt Spry waar de

gebruiker heeft geklikt en welke gegevens dynamisch moeten worden bijgewerkt.

7 Klik op OK om de tabel in de ontwerpweergave te bekijken met een rij koppen en een rij gegevensverwijzingen, tussen

accolades ({}), voor elk ingesloten element. In de codeweergave worden HTML-table-tags in het bestand ingevoegd, samen

met code die de sorteerbare naam en categoriekolommen aangeeft.

Een Spry-herhalingsgebied maken

U kunt herhalingsgebieden toevoegen om uw gegevens weer te geven. Een herhalingsgebied is een eenvoudige

gegevensstructuur die u naar behoefte kunt opmaken om uw gegevens weer te geven. Stel, u hebt een reeks fotominiaturen

die u achter elkaar in een pagina-indelingsobject wilt plaatsen, bijvoorbeeld een AP-element

div.

1 Kies Invoegen > Spry > Spry-herhaling.

U kunt ook op de knop Spry-herhaling in de categorie Spry van de invoegbalk klikken.

2 Voor de objectcontainer selecteert u de optie <div> of <span>, afhankelijk van het gewenste type tag. Standaard wordt

een <div>-container gebruikt.

3 Selecteer de optie Herhalen (standaard) of Onderliggende niveaus herhalen.

DREAMWEAVER CS3

Handboek

462

Voor meer flexibiliteit kunt u de optie Onderliggende niveaus herhalen gebruiken, waarbij gegevensvalidatie wordt

uitgevoerd voor elke regel in een lijst op het onderliggende niveau. Als u bijvoorbeeld een <ul>-lijst hebt, worden de gegevens

op het <li>-niveau gecontroleerd. Als u de optie Herhalen kiest, worden de gegevens op het <ul>-niveau gecontroleerd. De optie

Onderliggende niveaus herhalen is met name nuttig als u in uw code voorwaardelijke expressies gebruikt.

4 Kies de Spry-gegevensset in het menu.

5 Als u al tekst of elementen hebt geselecteerd, kunt u deze verpakken of ze vervangen.

6 Klik op OK om een herhalingsgebied op de pagina weer te geven.

Opmerking: Als u een herhalingsgebied probeert in te voegen maar nog geen gebied hebt gemaakt, wordt u in Dreamweaver

gevraagd om eerst een herhalingsgebied toe te voegen voordat u de tabel invoegt. Alle Spry-gegevensobjecten moeten in een

gebied zijn opgenomen.

7 Wanneer u op OK klikt, plaatst Dreamweaver een tijdelijke aanduiding voor het gebied op de pagina, met de tekst 'Plaats

hier de inhoud van Spry-gebied'. U kunt deze tekst vervangen door een Spry-gegevensobject, zoals een tabel of herhaling,

of door dynamische gegevens uit het paneel Bindingen.

8 Als u de tekst van de tijdelijke aanduiding wilt vervangen door een Spry-gegevensobject, klikt u op de knop van het

desbetreffende Spry-gegevensobject op de invoegbalk.

9 Als u de tekst van de tijdelijke aanduiding wilt vervangen door een of meer dynamische gegevens, gebruikt u een van de

volgende methoden: