Handleiding Adobe DREAMWEAVER CS5 (pagina 9 van 725) (Nederlands)

618544

Verklein

Vergroot

Pagina terug

1/725

Pagina verder

ADOBE

DREAMWEAVER

CS5 & CS5.5

gebruiken

Laatst bijgewerkt 2/5/2011

Juridische kennisgevingen

Zie http://help.adobe.com/nl_NL/legalnotices/index.html voor juridische kennisgevingen.

iii

Laatst bijgewerkt 2/5/2011

Inhoud

Hoofdstuk 1: Nieuwe functies

Nieuwe functies (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Nieuwe functies (CS5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Hoofdstuk 2: Werkruimte

Dreamweaver-werkwijze en -werkruimte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Werken in het documentvenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Werkbalken, controles en snelmenu's gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

De werkruimte van CS5 aanpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Sneltoetsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Extensies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Hoofdstuk 3: Werken met Dreamweaver-sites

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

Contribute-sites beheren met Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Hoofdstuk 4: Bestanden maken en beheren

Documenten maken en openen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Bestanden en mappen beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

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

Bestanden in- en uitchecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Bestanden synchroniseren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

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

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

Bestanden en mappen op uw site camoufleren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Bestandsgegevens opslaan in ontwerpnotities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Uw site testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Hoofdstuk 5: Beheer van elementen en bibliotheken

Over elementen en bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Werken met elementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

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

Werken met bibliotheekitems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Hoofdstuk 6: Pagina's maken met CSS

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

CSS maken en beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Pagina's met CSS opmaken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Werken met labels voor div-tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Hoofdstuk 7: Pagina's opmaken met HTML

Visuele lay-outhulpmiddelen gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Inhoud in tabellen presenteren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Frames gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

DREAMWEAVER GEBRUIKEN

Inhoud

Laatst bijgewerkt 2/5/2011

Hoofdstuk 8: Inhoud toevoegen aan pagina's

Werken met pagina's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Tekst toevoegen en opmaken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Afbeeldingen toevoegen en wijzigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Video's insluiten in webpagina's (HTML5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

SWF-bestanden invoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

FLV-bestanden invoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Webwidgets toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Geluid toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Andere mediaobjecten toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Taken automatiseren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Hoofdstuk 9: Koppelingen en navigatie

Over koppelingen en navigatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Koppelingen maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Snelmenu's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Navigatiebalken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Afbeeldingen met hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Problemen met koppelingen oplossen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Hoofdstuk 10: Pagina's voorvertonen

Pagina's voorvertonen in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Pagina's voorvertonen in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Pagina's voorvertonen op mobiele apparaten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Hoofdstuk 11: Werken met paginacode

Algemene informatie over coderen in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

De codeeromgeving opzetten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Codeervoorkeuren instellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

Code schrijven en bewerken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

Code samenvouwen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Code optimaliseren en fouten opsporen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

Code bewerken in de ontwerpweergave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

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

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

Tagbibliotheken beheren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

Aangepaste tags importeren in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Hoofdstuk 12: JavaScript-gedrag toevoegen

JavaScript-gedrag gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Ingebouwd Dreamweaver-gedrag toepassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

Hoofdstuk 13: Werken met andere toepassingen

Integratie tussen diverse toepassingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

Werken met Fireworks en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Werken met Photoshop en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

Werken met Flash en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393

Werken met Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394

DREAMWEAVER GEBRUIKEN

Inhoud

Laatst bijgewerkt 2/5/2011

Werken met Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

Werken met ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Extensie AIR voor Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Hoofdstuk 14: Sjablonen maken en beheren

Over sjablonen van Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

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

Een Dreamweaver-sjabloon maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Bewerkbare gebieden maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

Herhalingsgebieden maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Optionele gebieden gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Bewerkbare tagkenmerken definiëren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Een geneste sjabloon maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Sjablonen bewerken, bijwerken en verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Sjablooninhoud exporteren en importeren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

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

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

Sjabloonsyntaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

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

Hoofdstuk 15: Spry-pagina's visueel opbouwen

Over het Spry-framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Werken met Spry-widgets (algemene instructies) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Werken met de accordeonwidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Werken met de menubalkwidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Werken met de inklapbaar-deelvensterwidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450

Werken met de widget deelvensters met tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452

Werken met de knopinfo-widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455

Werken met de widget groep met validatiekeuzerondjes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457

Werken met de widget tekstveld voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461

Werken met de widget tekstgebied voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466

Werken met de widget Validatie selecteren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Werken met de widget selectievakje voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

Werken met de widget Wachtwoord voor validatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

Werken met de widget Validatie bevestigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

Gegevens weergeven met Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482

Spry-effecten toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496

Hoofdstuk 16: Ontwerpen voor meerdere schermen en apparaten

Mediaquery's maken (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Oriëntatie van de pagina wijzigen (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503

Webtoepassingen voor mobiele apparaten maken (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503

Webtoepassingen distribueren als systeemeigen mobiele toepassingen (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

Pagina's voorvertonen met het deelvenster Voorvertoning voor meerdere schermen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

DREAMWEAVER GEBRUIKEN

Inhoud

Laatst bijgewerkt 2/5/2011

Hoofdstuk 17: Onlineservices van Adobe gebruiken

Adobe-onlineservices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

BrowserLab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

Business Catalyst InContext Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

Hoofdstuk 18: XML-gegevens met XSLT weergeven

Over XML en XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518

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

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

Ontbrekende tekeneenheden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

Hoofdstuk 19: Voorbereidingen voor het bouwen van dynamische websites

Wat zijn webtoepassingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547

Uw computer instellen voor de ontwikkeling van toepassingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554

Databaseverbindingen voor ColdFusion-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560

Databaseverbindingen voor ASP-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561

Databaseverbindingen voor PHP-ontwikkelaars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569

Problemen met databaseverbindingen oplossen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571

Verbindingsscripts verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576

Hoofdstuk 20: Pagina's dynamisch maken

De werkruimte optimaliseren voor visuele ontwikkeling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577

Dynamische pagina's ontwerpen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580

Overzicht van dynamische inhoudsbronnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582

Panelen voor dynamische inhoud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587

Bronnen met dynamische inhoud definiëren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

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

Dynamische inhoud wijzigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

Databaserecords weergeven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610

Live-gegevens weergeven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619

Aangepast servergedrag toevoegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

Hoofdstuk 21: Toepassingen visueel samenstellen

Hoofd- en detailpagina's samenstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632

Zoekpagina's en resultatenpagina's maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639

Een pagina voor het invoegen van records maken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645

Pagina's maken om een record bij te werken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649

Pagina's maken om een record te verwijderen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654

Pagina's samenstellen met geavanceerde gegevensmanipuleringsobjecten (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . 662

Een registratiepagina samenstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666

Een aanmeldingspagina samenstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669

Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671

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

ColdFusion-componenten gebruiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675

DREAMWEAVER GEBRUIKEN

Nieuwe functies

Laatst bijgewerkt 2/5/2011

Integratie met Business Catalyst

Adobe Business Catalyst is een hosttoepassing waarmee traditionele desktopgereedschappen worden vervangen door

één centraal platform voor webontwikkelaars. De toepassing werkt in combinatie met Dreamweaver en biedt u

mogelijkheid om veel verschillende oplossingen te ontwikkelen, van algemene gegevensgestuurde websites tot

krachtige onlinewinkels. Raadpleeg http://www.adobe.com/go/business_catalyst_get_extension_nl.

Verbeteringen voor CSS

CSS uit-/inschakelen

Met CSS uit-/inschakelen kunt u rechtstreeks vanuit het deelvenster CSS-stijlen de CSS-eigenschappen uitschakelen

en weer inschakelen. Als u een CSS-eigenschap uitschakelt, wordt er commentaar geplaatst voor de betreffende

eigenschap, maar de eigenschap wordt niet echt verwijderd. Zie “CSS uit-/inschakelen” op pagina 151.

CSS-controlemodus

Met de CSS-controlemodus kunt u gedetailleerde eigenschappen van het CSS-kadermodel, waaronder opvulling, rand

en marge, weergeven zonder dat u code hoeft te lezen of een hulpprogramma van derden zoals Firebug hoeft te

gebruiken. Zie “CSS controleren in Live View” op pagina 152.

CSS-startlay-outs

Dreamweaver CS5 bevat bijgewerkte en vereenvoudigde CSS-startlay-outs. De complexe, afhankelijke kiezers uit CS4-

lay-outs zijn verwijderd en vervangen door vereenvoudigde, gemakkelijk te begrijpen klassen. Zie “Een pagina met een

CSS-lay-out maken” op pagina 161.

Dynamisch verwante bestanden

De functie Dynamisch verwante bestanden kunt u gebruiken om alle externe bestanden en scripts te detecteren die

nodig zijn voor PHP-pagina's van inhoudsbeheersystemen. De bestandsnamen worden vervolgens weergegeven op de

werkbalk Verwante bestanden. Dreamweaver biedt standaard ondersteuning voor detectie van bestande voor de

raamwerken Wordpress, Drupal en Joomla! . Zie “Dynamisch verwante bestanden openen” op pagina 72.

Live View-navigatie

Met Live View-navigatie worden koppelingen in Live View geactiveerd voor interactie met servertoepassingen en

dynamische gegevens. Met deze functie kunt u ook een URL opgeven om pagina's op een live webserver te controleren

en pagina's te bewerken die u hebt weergegeven als deze pagina's aanwezig zijn op een van uw lokaal gedefinieerde

sites. Zie “Pagina's voorvertonen in Dreamweaver” op pagina 299.

Coderingstips voor aangepaste PHP-klassen

Met coderingstips voor aangepaste PHP-klassen wordt de juiste syntaxis weergegeven voor PHP-functies, -objecten

en -constanten zodat u code nauwkeurig kunt invoeren. Coderingstips zijn ook geschikt voor uw eigen functies en

klassen en voor raamwerken van derden, zoals het Zend-raamwerk.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

A. Toepassingsbalk B. Werkbalk Document C. Werkruimteschakelaar D. Documentvenster E. CS Live F. Paneelgroepen G. Tagkiezer

H. Eigenschappencontrole I. Paneel Bestanden

Voor een zelfstudie over het werken met diverse Dreamweaver-werkruimten gaat u naar

www.adobe.com/go/lrvid4042_dw_nl.

Meer Help-onderwerpen

“Werkbalken, controles en snelmenu's gebruiken” op pagina 22

“De werkruimte van CS5 aanpassen” op pagina 24

“Documenten met tabs weergeven (Dreamweaver Macintosh)” op pagina 30

Zelfstudie over de Dreamweaver-werkruimte

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.

Het welkomstscherm Hiermee kunt u een onlangs geopend document openen of een nieuw document maken. Vanuit

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

De toepassingsbalk Langs de bovenrand van het toepassingsvenster vindt u een werkruimteschakelaar, menu's (alleen

Windows) en andere toepassingsbesturingselementen.

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 DC E F

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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, Bladeren in Bridge,

Opslaan, Alles opslaan, Code afdrukken, Knippen, 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 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 object heeft verschillende 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.

Panelen Help uw werk te bewaken en te wijzigen. Voorbeelden zijn het paneel Invoegen, het deelvenster CSS-stijlen

en het paneel Bestanden. Als u een paneel wilt uitvouwen, dubbelklikt u op de tab van het paneel.

Het paneel Invoegen Deze balk bevat knoppen waarmee u diverse typen objecten in een document kunt invoegen,

zoals afbeeldingen, tabellen en media-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 het paneel

Invoegen te klikken. Desgewenst kunt u het menu Invoegen in plaats van het paneel Invoegen gebruiken om objecten

in te voegen.

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).

Meer Help-onderwerpen

“Werken in het documentvenster” op pagina 18

“Werkbalken, controles en snelmenu's gebruiken” op pagina 22

“Vensters en deelvensters beheren” op pagina 24

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.

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.

Gesplitste codeweergave Met een gesplitste versie van de codeweergave kunt u zo bladeren dat u tegelijkertijd aan

verschillende gedeelten van het document kunt werken.

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

document in een enkel venster.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Weergave Live Net als in de ontwerpweergave wordt in de Live weergave een realistischere weergave getoond van hoe

uw document er in een browser uit zal zien; het document werkt net zoals in een browser. In de Live weergave kunt u

geen bewerkingen uitvoeren. U kunt de bewerkingen echter in de codeweergave uitvoeren en de Live weergave

vernieuwen om uw wijzigingen te zien.

Live codeweergave Deze is alleen beschikbaar wanneer u een document in de Live weergave bekijkt. In de Live

codeweergave wordt de werkelijke code weergegeven die een browser gebruikt om de pagina uit te voeren. De

weergave reageert op uw handelingen in de Live weergave. In de Live codeweergave kunt u geen bewerkingen

uitvoeren.

Wanneer een documentvenster is gemaximaliseerd (standaard), ziet u boven in het documentvenster tabs met daarop

de bestandsnamen van alle geopende documenten. Dreamweaver geeft een sterretje achter de bestandsnaam weer als

u wijzigingen hebt aangebracht en deze nog niet hebt opgeslagen.

Klik op een tab om naar het desbetreffende document te gaan.

Onder het tabblad van het document (of onder de titelbalk van het document als u documenten in afzonderlijke

vensters weergeeft) geeft Dreamweaver eveneens de werkbalk Verwante bestanden weer. Gerelateerde documenten

zijn documenten die aan het huidige bestand zijn gekoppeld, zoals CSS-bestanden of JavaScript-bestanden. Als u een

van deze verwante bestanden in het documentvenster wilt openen, klikt u op de betreffende bestandsnaam op de

werkbalk Verwante bestanden.

Meer Help-onderwerpen

“Werken in het documentvenster” op pagina 18

“De Live weergave” op pagina 299

“Verwante bestanden openen” op pagina 70

“Algemene informatie over coderen in Dreamweaver” op pagina 304

Overzicht van de werkbalk Document

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

document. 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. In de onderstaande afbeelding ziet u de

uitgevouwen werkbalk Document.

A. Codeweergave tonen B. Code- en ontwerpweergave tonen C. Ontwerpweergave tonen D. Live codeweergave E. Browsercompatibiliteit

controleren F. Weergave Live G. CSS-controlemodus H. Voorvertonen/fouten opsporen in browser I. Visuele hulpmiddelen

J. Ontwerpweergave vernieuwen K. Documenttitel L. Bestandsbeheer

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 Weergaveopties.

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.

A B C D E G H I J K LF

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Weergave Live Toont een niet-bewerkbare, interactieve, browser-gestuurde weergave van het document.

Live codeweergave Toont de werkelijke code die door de browser wordt gebruikt om de pagina uit te voeren.

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 u bovenaan

wilt weergeven. 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.

Meer Help-onderwerpen

“Werkbalken weergeven” op pagina 22

“Pagina's voorvertonen in de live weergave” op pagina 299

“Codeervoorkeuren instellen” op pagina 311

“Kopinhoud weergeven en bewerken” op pagina 348

“Visuele lay-outhulpmiddelen gebruiken” op pagina 179

Overzicht van de standaardwerkbalk

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

Openen, Bladeren in Bridge, Opslaan, Alles opslaan, Code afdrukken, Knippen, Kopiëren, Plakken, Ongedaan maken

en Opnieuw. Gebruik deze knoppen zoals u de equivalente menu-opdrachten zou gebruiken.

Meer Help-onderwerpen

“Werkbalken weergeven” op pagina 22

“Documenten maken en openen” op pagina 61

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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.

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.

Design-Time stijlpagina's Hier geeft u een unieke naam op voor de Design-Time stijlpagina.

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

handheld-apparaten.

Meer Help-onderwerpen

“Werkbalken weergeven” op pagina 22

Overzicht van werkbalk Browsernavigatie

De werkbalk Browsernavigatie wordt actief in Live View en geeft het adres weer van de pagina die u bekijkt in het

documentvenster. Vanaf Dreamweaver CS5 werkt Live View net als een normale browser. Als u dus naar een site

buiten uw lokale site bladert (bijvoorbeeld http://www.adobe.com/nl), wordt de pagina geladen in het

documentvenster.

A. Besturingselementen voor browser B. Adresvak C. Live View-opties

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Koppelingen in Live View zijn standaard niet actief. Hierdoor kunt u in het documentvenster de tekst van de koppeling

selecteren of erop klikken zonder dat u naar een andere pagina gaat. Als u koppelingen wilt testen in Live View, kunt

u koppelingen eenmalig of doorlopend actief maken door Koppelingen volgen of Koppelingen continu volgen te

kiezen in het menu met Live View-opties rechts van het adresvak.

Meer Help-onderwerpen

“Pagina's voorvertonen in Dreamweaver” op pagina 299

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 wordt verticaal aan de linkerzijde van het documentvenster weergegeven. Deze werkbalk is alleen te zien als

de codeweergave is ingeschakeld.

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

Werkbalken > Coderen).

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.

Meer Help-onderwerpen

“Werkbalken weergeven” op pagina 22

“Code invoegen met de werkbalk Codering” op pagina 321

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Overzicht van de statusbalk

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

A. Tagkiezer B. Selectie C. Handje D. Het gereedschap Zoomen E. Vergroting instellen F. Pop-upmenu Venstergrootte G. Documentgrootte

en geschatte downloadtijd H. Coderingssymbool

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 (Niet beschikbaar in de codeweergave.) Hiermee kunt u de grootte van het

documentvenster wijzigen met vooraf ingestelde of aangepaste afmetingen. Als u de weergavegrootte van een pagina

wijzigt in de ontwerpweergave of in Live View, worden alleen de afmetingen van de weergavegrootte aangepast. De

documentgrootte blijft ongewijzigd.

In Dreamweaver worden naast vooraf ingesteld en aangepaste afmetingen ook de afmetingen weergegeven die zijn

opgegeven in een mediaquery. Als u een grootte selecteert die overeenkomt met een mediaquery, gebruikt

Dreamweaver de mediaquery om de pagina weer te geven. U kunt ook de oriëntatie van de pagina wijzigen om de

pagina voor te vertonen voor mobiele apparaten waarbij de paginalay-out afhankelijk is van de wijze waarop het

apparaat wordt vastgehouden.

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

inclusief alle afhankelijke bestanden, zoals afbeeldingen en andere mediabestanden.

Coderingssymbool Toont de tekstcodering voor het huidige document.

Meer Help-onderwerpen

“Venstergrootte en verbindingssnelheid instellen” op pagina 21

“In- en uitzoomen” op pagina 224

“De grootte van het documentvenster wijzigen” op pagina 20

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

A B C D E F G H

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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 langs de onderrand van de werkruimte, maar u kunt deze losmaken

uit het dok en er een zwevend paneel in de werkruimte van maken.

Meer Help-onderwerpen

“Deelvensters koppelen en ontkoppelen” op pagina 25

“De eigenschappencontrole gebruiken” op pagina 23

Overzicht van paneel Invoegen

Het paneel Invoegen bevat knoppen voor het maken en invoegen van objecten zoals tabellen, afbeeldingen en

koppelingen. De knoppen zijn in diverse categorieën geordend, waartussen u kunt schakelen door de gewenste

categorie in het pop-upmenu Categorie te selecteren. Aanvullende categorieën worden weergegeven wanneer het

huidige document servercode bevat, zoals ASP- of CFML-documenten.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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.

Het paneel Invoegen 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, tabelelementen, div-tags, frames en Spry-widgets 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-validatiewidgets.

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-widgets.

De categorie InContext Editing Bevat knoppen voor het samenstellen van InContext Editing-pagina's, waaronder

knoppen voor bewerkbare gebieden, herhalingsgebieden en het beheer van CSS-klassen.

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

De categorie Favorieten Hiermee kunt u de knoppen in het paneel Invoegen die u het meest gebruikt op één

gemeenschappelijke plaats groeperen en organiseren.

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

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

objecten die u in de codeweergave kunt invoegen.

In tegenstelling tot andere panelen in Dreamweaver kunt u het paneel Invoegen uit de standaard gedokte positie slepen

en horizontaal, boven in het venster Document, neerzetten. Wanneer u dat doet, verandert het paneel in een werkbalk

(al kunt u de balk niet op dezelfde wijze als andere werkbalken verbergen en weergeven).

Meer Help-onderwerpen

“Het paneel Invoegen gebruiken” op pagina 212

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

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Overzicht van het deelvenster Bestanden

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 of de SVN-gegevensopslagruimte als een lijst met

bestanden weergegeven. Als het is uitgevouwen, geeft het de lokale site en de externe site, de testserver of de SVN-

gegevensopslagruimte weer.

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.

(CS5.5) Het deelvenster Bestanden controleert regelmatig de server om de inhoud van het deelvenster bij te werken.

Er wordt een foutbericht weergegeven als u een handeling wilt uitvoeren wanneer een dergelijke automatische update

wordt uitgevoerd. Als u de automatische updates wilt uitschakelen, opent u het optiemenu van het deelvenster

Bestanden en schakelt u Automatisch bijwerken uit in het menu Weergave.

Gebruik de knop Vernieuwen als u de inhoud van het deelvenster handmatig wilt bijwerken. De huidige uitcheckstatus

van bestanden wordt echter alleen bijgewerkt als de automatische updates zijn ingeschakeld.

Meer Help-onderwerpen

“Werken met bestanden in het deelvenster Bestanden” op pagina 78

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Overzicht van het deelvenster CSS-stijlen

Met het deelvenster 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 deelvenster CSS-stijlen kunt u schakelen tussen de twee modi.

Via het deelvenster 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 deelvenster 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 deelvenster 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.

Meer Help-onderwerpen

“CSS maken en beheren” op pagina 132

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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®.

• 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.

Meer Help-onderwerpen

“Visuele lay-outhulpmiddelen gebruiken” op pagina 179

GoLive-gebruikers

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

werkruimte en werkwijze van Dreamweaver bekijken, waarin tevens wordt uitgelegd op welke manieren u uw sites

naar Dreamweaver kunt migreren.

Meer Help-onderwerpen

Zelfstudie over Dreamweaver voor GoLive-gebruikers

Werken in het documentvenster

Schakelen tussen weergaven in het documentvenster

U kunt een document in het documentvenster weergeven in de codeweergave, gesplitste codeweergave,

ontwerpweergave of in de code- en de ontwerpweergaven of Live weergave. U kunt er ook voor kiezen om de gesplitste

code weergave of code- en ontwerpweergaven horizontaal of verticaal weer te geven. (Horizontale weergave is de

standaardweergave.)

Overschakelen naar de codeweergave

❖ Voer een van de volgende handelingen uit:

• Selecteer Beeld > Code.

• Klik in de werkbalk Document op de knop Codeweergave tonen.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Overschakelen naar de gesplitste codeweergave

In de gesplitste codeweergave wordt het document in tweeën gesplitst zodat u tegelijkertijd aan twee onderdelen van

de code kunt werken.

❖ Selecteer Beeld > Gesplitste code.

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.

Standaard wordt de codeweergave boven in het documentvenster en de ontwerpweergave onder in het

documentvenster weergegeven. Kies Beeld > Ontwerpweergave bovenaan als u de ontwerpweergave bovenaan wilt

weergeven.

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.

Weergaven verticaal splitsen

Deze optie is alleen beschikbaar voor de gesplitste codeweergave en code- en ontwerpweergaven (gesplitste weergave).

Deze is uitgeschakeld voor de codeweergave en de ontwerpweergave.

1 Zorg ervoor dat u in de gesplitste codeweergave (Beeld > Gesplitste code) of Code- en ontwerpweergaven (Beeld >

Code en ontwerp) werkt.

2 Selecteer Beeld > Verticaal splitsen.

Als u in de code- en ontwerpweergaven werkt, kunt u ervoor kiezen om de ontwerpweergave links weer te geven

(Beeld > Ontwerpweergave links).

Meer Help-onderwerpen

“Overzicht van het documentvenster” op pagina 8

“Pagina's voorvertonen in de live weergave” op pagina 299

Documentvensters trapsgewijs of naast elkaar weergeven

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

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Meer Help-onderwerpen

“Vensters en deelvensters beheren” op pagina 24

“Documenten met tabs weergeven (Dreamweaver Macintosh)” op pagina 30

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.

Als u de weergavegrootte van een pagina wijzigt in de ontwerpweergave of in Live View, worden alleen de afmetingen

van de weergavegrootte aangepast. De documentgrootte blijft ongewijzigd.

In Dreamweaver worden naast vooraf ingesteld en aangepaste afmetingen ook de afmetingen weergegeven die zijn

opgegeven in een mediaquery. Als u een grootte selecteert die overeenkomt met een mediaquery, gebruikt

Dreamweaver de mediaquery om de pagina weer te geven. U kunt ook de oriëntatie van de pagina wijzigen om de

pagina voor te vertonen voor mobiele apparaten waarbij de paginalay-out afhankelijk is van de wijze waarop het

apparaat wordt vastgehouden.

Het formaat van het documentvenster wijzigen in een vooraf ingestelde grootte

❖ Selecteer een van de formaten uit het pop-upmenu Venstergrootte onder aan het documentvenster. In

Dreamweaver CS5.5 en latere versies is een uitgebreide lijst met opties beschikbaar, onder andere voor

veelgebruikte mobiele apparaten (hierna afgebeeld).

De weergegeven venstergrootte komt overeen met de binnenmaten van het browservenster, zonder randen. De grootte

van het scherm of mobiele apparaat wordt aan rechterkant weergegeven.

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.

Opmerking: (Alleen Windows) Documenten in het documentvenster zijn standaard gemaximaliseerd, en u kunt het

formaat van een document niet wijzigen wanneer het venster is gemaximaliseerd. Als u het document niet-

gemaximaliseerd wilt weergeven, klikt u op de knop Vorig formaat in de rechterbovenhoek van het document.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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.

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 (CS5) of Venstergrootten (CS5.5 en hoger) 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.

Meer Help-onderwerpen

“Overzicht van de statusbalk” op pagina 13

“De grootte van het documentvenster wijzigen” op pagina 20

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.

Referentie Hiermee zoekt u naar handig referentiemateriaal.

Validatie Hiermee kunt u controleren op code- of syntaxisfouten.

Browsercompatibiliteit 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.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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 krijgt u informatie over het debuggen van een Adobe® ColdFusion®-

toepassing.

Meer Help-onderwerpen

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

“Taalspecifiek referentiemateriaal gebruiken” op pagina 332

“Uw site testen” op pagina 110

“XML-documenten valideren” op pagina 337

“Controleren op browsercompatibiliteit” op pagina 337

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

“Bestanden op een externe server plaatsen” op pagina 87

“Bestanden van een externe server ophalen” op pagina 85

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

Werkbalken, controles en snelmenu's 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 in 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.

Meer Help-onderwerpen

“Overzicht van de werkbalk Document” op pagina 9

“Overzicht van de standaardwerkbalk” op pagina 10

“Overzicht van de werkbalk Codering” op pagina 12

“Overzicht Werkbalk Stijl renderen” op pagina 11

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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.

Als u Help-informatie wilt bekijken over een bepaald item in de eigenschappencontrole, klikt u op de knop Help

rechtsboven in de eigenschappencontrole of selecteert u Help in het menu Opties van de eigenschappencontrole.

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

weer te geven en te bewerken.

Meer Help-onderwerpen

“Overzicht van de eigenschappencontrole” op pagina 14

“Teksteigenschappen instellen in de eigenschappencontrole” op pagina 235

“Deelvensters koppelen en ontkoppelen” op pagina 25

“Kenmerken wijzigen met de tagcontrole” op pagina 342

De eigenschappencontrole weergeven of verbergen

❖ Selecteer Venster > Eigenschappen.

De eigenschappencontrole uitvouwen of samenvouwen

❖ Klik op de uitvouwpijl in de rechterbenedenhoek van de eigenschappencontrole.

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.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

2 Selecteer een opdracht in het contextmenu.

De werkruimte van CS5 aanpassen

Vensters en deelvensters beheren

U kunt een aangepaste werkruimte maken door documentvensters en deelvensters te verplaatsen en te manipuleren.

U kunt aangepaste werkruimten opslaan en schakelen tussen deze werkruimten. Als u in Fireworks de naam wijzigt

van aangepaste werkruimten, kan dit leiden tot onverwacht gedrag.

Opmerking: In de volgende voorbeelden wordt ter demonstratie Photoshop gebruikt. De werkruimte werkt in alle

producten op dezelfde manier.

Documentvensters opnieuw rangschikken, koppelen of laten zweven

Als u meerdere bestanden opent, worden de documentvensters als tabbladen weergegeven.

• Als u de rangschikking van dergelijke documentvensters wilt wijzigen, sleept u de tab van een venster naar een

nieuwe locatie in de groep.

• Als u een documentvenster wilt loskoppelen (zweven of verwijderen uit tabbladgroep) van een groep vensters,

sleept u het tabblad van dat venster uit de groep.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Opmerking: In Photoshop kunt u ook Venster > Ordenen > Zweven in venster selecteren één documentvenster te laten

zweven of Venster > Ordenen > Alles zweven in vensters om alle documentvensters tegelijkertijd te laten zweven. Zie

TechNote kb405298 voor meer informatie.

Opmerking: Dreamweaver biedt geen ondersteuning voor het koppelen en loskoppelen van documentvensters.

Gebruik de knop Minimaliseren van het documentvenster om vensters te laten zweven (Windows) of kies Venster >

Naast elkaar om documentvensters naast elkaar weer te geven. Zoek op ‘Naast elkaar’ in Dreamweaver Help voor

meer informatie over dit onderwerp. De werkwijze voor Macintosh-gebruikers wijkt enigszins af.

• Als u een documentvenster wilt koppelen aan een afzonderlijke groep documentvensters, sleept u het venster naar

de groep.

• Als u groepen gestapelde of naast elkaar geplaatste documenten wilt maken, sleept u het venster naar een van de

neerzetzones boven, onder of aan een zijde van een ander venster. U kunt ook een lay-out voor de groep selecteren

aan de hand van de knop Lay-out op de toepassingsbalk.

Opmerking: Niet alle producten bieden ondersteuning voor deze functie. U kunt echter de opdrachten Trapsgewijs

en Naast elkaar in het menu Venster gebruiken om de lay-out van uw documenten te bepalen.

• Als u een selectie sleept en wilt overschakelen naar een ander document in een als tabblad weergegeven groep,

houdt u de selectie een ogenblik boven het tabblad van een document.

Opmerking: Niet alle producten bieden ondersteuning voor deze functie.

Deelvensters koppelen en ontkoppelen

Een koppelingsgebied is een verzameling deelvensters of deelvenstergroepen die samen en meestal in een verticale

positie worden weergegeven. U koppelt en ontkoppelt deelvensters door ze in en uit een koppelingsgebied te

verplaatsen.

• Om een deelvenster te koppelen, sleept u het aan de tab naar het koppelingsgebied bovenaan, onderaan of tussen

andere deelvensters.

• Om een deelvenstergroep te koppelen, sleept u het aan de titelbalk (de effen, lege balk boven de tabs) in het

koppelingsgebied.

• Om een deelvenster of deelvenstergroep te verwijderen, sleept u deze aan de tab of de titelbalk uit het

koppelingsgebied. U kunt ze naar een ander koppelingsgebied slepen of ze vrij laten zweven.

Deelvenster Navigator dat naar een nieuw koppelingsgebied wordt gesleept, aangeduid met een blauwe, verticale markering

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Deelvenster Navigator dat is gekoppeld in een eigen koppelingsgebied

U kunt voorkomen dat deelvensters alle ruimte in een koppelingsgebied in beslag nemen. Sleep de onderrand van het

koppelingsgebied zodat deze de rand van de werkruimte niet meer raakt.

Deelvensters verplaatsen

Terwijl u een deelvenster verplaatst, ziet u blauw gemarkeerde neerzetzones. Dit zijn gebieden waarnaar u het

deelvenster kunt verplaatsen. U kunt een deelvenster bijvoorbeeld omhoog of omlaag in een koppelingsgebied

verplaatsen door het naar de smalle blauwe neerzetzone boven of onder een ander deelvenster te slepen. Als u het naar

een gebied sleept dat geen neerzetzone is, zweeft het venster vrij in de werkruimte.

Opmerking: De neerzetzone wordt geactiveerd door de positie van de muisaanwijzer (en niet door de positie van het

deelvenster), dus als de neerzetzone niet wordt weergegeven, kunt u de muisaanwijzer naar de positie slepen waar de

neerzetzone zich moet bevinden.

• U verplaatst een deelvenster door de tab van het deelvenster te slepen.

• Als u een deelvenstergroep wilt verplaatsen, sleept u de titelbalk.

De smalle, blauwe neerzetzone geeft aan dat het deelvenster Kleur zal worden gekoppeld boven het deelvenster Lagen.

A. Titelbalk B. Tab C. Neerzetzone

Druk op Ctrl (Windows) of Command (Mac OS) terwijl u een deelvenster verplaatst om te voorkomen dat het wordt

gekoppeld. Druk tijdens het verplaatsen van het deelvenster op Esc om de bewerking te annuleren.

Deelvensters toevoegen en verwijderen

Als u alle deelvensters uit een koppelingsgebied verwijdert, verdwijnt het koppelingsgebied. U kunt een

koppelingsgebied maken door deelvensters naar de rechterrand van het werkgebied te verplaatsen totdat u een

neerzetzone ziet.

• Als u een deelvenster wilt verwijderen, klikt u met de rechtermuisknop (Windows) of houdt u Control ingedrukt

en klikt u (Mac) op het tabblad van het deelvenster en selecteert u Sluiten. U kunt de selectie van het deelvenster

ook opheffen in het menu Venster.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

• Als u een deelvenster wilt toevoegen, selecteert u het in het menu Venster en koppelt u het op de gewenste positie.

Deelvenstergroepen bewerken

• Om een deelvenster in een groep te verplaatsen, sleept u de tab van het deelvenster naar de gemarkeerde

neerzetzone in de groep.

Een deelvenster toevoegen aan een deelvenstergroep

• Om deelvensters in een groep te herschikken, sleept u de tab van het deelvenster naar een nieuwe locatie in de

groep.

• Om een deelvenster uit de groep te verwijderen zodat het vrij zweeft, sleept u het deelvenster aan de tab buiten de

groep.

• Als u een groep wilt verplaatsen, sleept u de titelbalk (het gebied boven de tabbladen).

Zwevende deelvensters stapelen

Als u een deelvenster uit het koppelingsgebied sleept, maar niet neerzet in een neerzetzone, wordt het een vrij zwevend

venster. U kunt zwevende vensters overal in de werkruimte plaatsen. U kunt zwevende deelvensters of

deelvenstergroepen stapelen, zodat ze zich verplaatsen als een eenheid wanneer u de bovenste titelbalk versleept.

Vrij zwevende gestapelde deelvensters

• Om zwevende deelvensters te stapelen, sleept u het deelvenster aan de tab naar de neerzetzone onder aan een ander

deelvenster.

• Om de stapelvolgorde te wijzigen, sleept u een deelvenster omhoog of omlaag aan de tab.

Opmerking: Zorg ervoor dat u de tab boven de smalle neerzetzone tussen deelvensters loslaat en niet in de brede

neerzetzone in een titelbalk.

• Om een deelvenster of deelvenstergroep uit de stapel te verwijderen, zodat het uit zichzelf zweeft, sleept u het aan

de tab of titelbalk uit de stapel.

De grootte van deelvensters wijzigen

• Dubbelklik op een tabblad van een deelvenster, deelvenstergroep of stapel deelvensters om deze op minimale of

maximale grootte weer te geven. U kunt dubbelklik in het tabbladgebied (de lege ruimte naast de tabbladen).

• Als u het formaat van een deelvenster wilt wijzigen, sleept u een van de zijden van het deelvenster. Bepaalde

deelvensters, zoals het deelvenster Kleur in Photoshop, kunnen niet worden vergroot of verkleind door te slepen.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Deelvensterpictogrammen samenvouwen en uitvouwen

U kunt deelvensters samenvouwen tot pictogrammen om de werkruimte overzichtelijk te houden. In bepaalde

gevallen worden deelvensters samengevouwen tot pictogrammen in de standaardwerkruimte.

Deelvensters samengevouwen tot pictogrammen

Deelvensters die vanuit pictogrammen zijn uitgevouwen

• Klik op de dubbele pijl boven in het koppelingsgebied om alle deelvensterpictogrammen in een kolom samen of uit

te vouwen.

• Als u het pictogram van één deelvenster wilt uitvouwen, klikt u erop.

• Als u het formaat van deelvensterpictogrammen zodanig wilt aanpassen dat u alleen de pictogrammen ziet (en niet

de titels), versmalt u het koppelingsgebied totdat de tekst verdwijnt. Maak het koppelingsgebied breder als u de

pictogramtekst weer wilt weergeven.

• Om een uitgevouwen deelvenster opnieuw samen te vouwen tot een pictogram, klikt u op de tab, het pictogram of

de dubbele pijl in de titelbalk van het deelvenster.

Als u in bepaalde producten Pictogramdeelvensters automatisch samenvouwen in de voorkeuren van de interface-

of gebruikersinterface-opties selecteert, wordt een pictogram van een uitgevouwen deelvenster automatisch

samengevouwen wanneer u elders klikt.

• Om een zwevend deelvenster of een zwevende deelvenstergroep aan een koppelingsgebied voor pictogrammen toe

te voegen, sleept u het venster of de groep aan de tab of de titelbalk naar het koppelingsgebied. (Deelvensters

worden automatisch samengevouwen tot pictogrammen als ze aan een pictogramkoppelingsgebied worden

toegevoegd.)

• Als u een deelvensterpictogram (of groep met deelvensterpictogrammen) wilt verplaatsen, sleept u het pictogram.

U kunt pictogrammen van deelvensters omhoog of omlaag slepen in het koppelingsgebied, naar andere

koppelingsgebieden (waar ze worden weergegeven in de deelvensterstijl van dat koppelingsgebied) of buiten het

koppelingsgebied (waar ze verschijnen als zwevende pictogrammen).

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Werkruimten opslaan en schakelen tussen werkruimten

Door de huidige grootte en positie van deelvensters als een benoemde werkruimte op te slaan, kunt u die werkruimte

ook herstellen wanneer u een deelvenster verplaatst of sluit. De namen van de opgeslagen werkruimten worden

weergegeven via de schakeloptie Werkruimte op de toepassingsbalk.

Een aangepaste werkruimte opslaan

1 Als de werkruimte de configuratie heeft die u wilt opslaan, gaat u op een van de volgende manieren te werk:

• (Illustrator) Kies Venster > Werkruimte > Werkruimte opslaan.

• (Photoshop, InDesign, InCopy) Kies Venster > Werkruimte > Nieuwe werkruimte.

• (Dreamweaver) Kies Venster > Lay-out werkruimte > Nieuwe werkruimte.

• (Flash) Kies Nieuwe werkruimte in de schakeloptie voor werkruimte op de toepassingsbalk.

• (Fireworks) Kies Huidige opslaan in de schakeloptie Werkruimte op de toepassingsbalk.

2 Typ een naam voor de werkruimte.

3 (Photoshop, InDesign) Onder Vastleggen selecteert u een of meer opties:

Locaties van deelvensters Hiermee slaat u de huidige deelvensterlocaties op (alleen InDesign).

Sneltoetsen Hiermee slaat u de huidige set sneltoetsen op (alleen Photoshop).

Menu's of Menu's aanpassen Hiermee slaat u de huidige set menu's op.

Werkruimten weergeven of schakelen tussen werkruimten

❖ Selecteer een werkruimte met de schakeloptie Werkruimte op de toepassingsbalk.

In Photoshop kunt u sneltoetsen aan elke werkruimte toewijzen om snel tussen werkruimten te kunnen navigeren.

Een aangepaste werkruimte verwijderen

• Selecteer Werkruimten beheren via de schakeloptie voor werkruimte op de toepassingsbalk, selecteer de

werkruimte en klik op Verwijderen. (Deze optie is niet beschikbaar in Fireworks.)

• (Photoshop, InDesign, InCopy) Selecteer Werkruimte verwijderen via de schakeloptie voor werkruimte.

• (Illustrator) Kies Venster > Werkruimte > Werkruimten beheren, selecteer de werkruimte en klik vervolgens op

het pictogram Verwijderen.

• (Photoshop, InDesign) Kies Venster > Werkruimte > Werkruimten verwijderen, selecteer de werkruimte en klik

vervolgens op Verwijderen.

De standaardwerkruimte herstellen

1 Selecteer de werkruimte Standaard of Hoofdpunten via de schakeloptie voor werkruimten op de toepassingsbalk.

Raadpleeg het artikel http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html voor

Fireworks.

Opmerking: in Dreamweaver is Ontwerpen de standaardwerkruimte.

2 Verwijder voor Fireworks (Windows) de volgende mappen:

Windows Vista \\Gebruikers\<gebruikersnaam>\AppData\Roaming\Adobe\Fireworks CS4\

Windows XP \\Documents and Settings\<gebruikersnaam>\Application Data\Adobe\Fireworks CS4

3 (Photoshop, InDesign, InCopy) Selecteer Venster > Werkruimte > [Naam werkruimte] opnieuw instellen.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

(Photoshop) Indeling van een opgeslagen werkruimte herstellen

In Photoshop wordt werkruimten automatisch weergegeven in de rangschikking die u het laatst hebt ingesteld, maar

u kunt oorspronkelijke, opgeslagen rangschikking van de deelvensters herstellen.

• Als u een afzonderlijke werkruimte opnieuw wilt instellen, kiest u Venster > Werkruimte > Naam werkruimte

opnieuw instellen.

• Als u alle werkruimten die met Photoshop zijn geïnstalleerd, opnieuw wilt instellen, klikt u op

Standaardwerkruimten opnieuw instellen bij Interfacevoorkeuren.

Als u de volgorde van de werkruimten op de toepassingsbalk wilt wijzigen, moet u de werkruimten slepen.

Documenten met tabs weergeven (Dreamweaver 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

❖ Houd Control ingedrukt en klik op de tab en kies Ga naar 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.

Gekleurde pictogrammen inschakelen

Standaard worden in Dreamweaver CS4 en later zwart-witte pictogrammen gebruikt die in gekleurde pictogrammen

veranderen wanneer u de muis erboven houdt. U kunt gekleurde pictogrammen permanent inschakelen zodat u de

muis er niet boven hoeft te houden.

❖ Voer een van de volgende handelingen uit:

• Kies Weergave > Gekleurde pictogrammen.

• Schakel naar de klassieke werkruimte of codeerwerkruimte.

Als u de gekleurde pictogrammen weer wilt uitschakelen, schakelt u Gekleurde pictogrammen in het menu Weergave

weer uit of schakelt u naar een andere werkruimte.

Meer Help-onderwerpen

“Werkruimten weergeven of schakelen tussen werkruimten” op pagina 29

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Het welkomstscherm van Dreamweaver 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.

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 Selecteer in de categorie Algemeen de optie Welkomstscherm tonen.

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 zijn ze bijvoorbeeld opgeslagen in C:\Documents and Settings\gebruikersnaam\Application

Data\Adobe\Dreamweaver\nl_NL\Configuration, die standaard is verborgen. Als u verborgen bestanden en mappen

wilt weergeven, kiest u Extra > Mapopties in Windows Explorer, klikt u op het tabblad Weergave en selecteert u de

optie Verborgen bestanden en mappen weergeven.

In Windows Vista zijn ze opgeslagen in C:\Users\gebruikersnaam\AppData\Roaming\Adobe\Dreamweaver

\nl_NL\Configuration, die standaard is verborgen. Als u verborgen bestanden en mappen wilt weergeven, kiest u Extra

> Mapopties in Windows Explorer, klikt u op het tabblad Weergave en selecteert u de optie Verborgen bestanden en

mappen weergeven.

In Mac OS X worden ze opgeslagen in de map Home, met name in Users/gebruikersnaam/Library/Application

Support/Adobe/Dreamweaver /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).

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

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.

Verwante bestanden inschakelen Hiermee kunt u zien welke bestanden aan het huidige document zijn gekoppeld

(bijvoorbeeld CSS- of JavaScript-bestanden). Dreamweaver geeft voor elk verwant bestand boven in het document een

knop weer, en opent het bestand als u op de knop klikt.

Dynamisch verwante bestanden detecteren Hiermee bepaalt u of dynamisch verwante bestanden automatisch

worden weergegeven op de werkbalk Verwante bestanden of dat dit handmatig moet worden ingesteld. U kunt

desgewenst ook het detecteren van dynamisch verwante bestanden uitschakelen.

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 290.)

Dialoogvenster tonen bij het invoegen van objecten Met deze optie bepaalt u of u door Dreamweaver wordt gevraagd

om aanvullende informatie op te geven als u afbeeldingen, tabellen, Shockwave-films en bepaalde andere objecten

invoegt met het paneel Invoegen 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.

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 mensen die gewend zijn aan typen in tekstverwerkers. Als deze optie is uitgeschakeld, worden meerdere spaties

behandeld 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 zou worden toegepast, en dat de tag em 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

Formaat > Stijl > Vet of Formaat > 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.

Waarschuwen wanneer bewerkbare gebieden binnen de tags <p> of <h1>-<h6> worden geplaatst Hiermee geeft u

aan of een waarschuwingsbericht moet worden weergegeven als u een Dreamweaver-sjabloon opslaat dat een

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

bewerkbaar gebied 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 bepaalt u of u elementen wilt centreren met divalign="center" of de tag center wanneer u in

de eigenschappencontrole op de knop Centreren 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 275 voor meer informatie.

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.

Meer Help-onderwerpen

“Overzicht van de indeling van de werkruimte” op pagina 5

“Koppelingen automatisch bijwerken” op pagina 290

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 in het dialoogvenster Voorkeuren voor lettertypen selecteert, hebben

echter alleen invloed op de manier waarop lettertypen worden weergegeven in Dreamweaver; ze hebben geen invloed

op de manier waarop het document in de browser van de bezoeker wordt weergegeven. Als u de manier wilt wijzigen

waarop lettertypen in een browser worden weergegeven, moet u de tekst met de eigenschappencontrole wijzigen of er

een CSS-regel op toepassen.

Zie “Documenten maken en openen” op pagina 61 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.

DREAMWEAVER GEBRUIKEN

Werkruimte

Laatst bijgewerkt 2/5/2011

Vast lettertype Het lettertype dat in Dreamweaver wordt gebruikt voor het weergeven van tekst binnen pre-, code-

tt-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.

Meer Help-onderwerpen

“Over het coderen van documenten” op pagina 219

Markeringskleuren van Dreamweaver aanpassen

Gebruik de markeervoorkeuren om de kleuren aan te passen waarmee sjabloongebieden, bibliotheekitems, tags van

derden, indelingselementen en code in Dreamweaver worden gemarkeerd.

Meer Help-onderwerpen

“De kleurkiezer gebruiken” op pagina 223

“De markeringskleur van labels voor div-tags wijzigen” op pagina 165

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.

Standaardvoorkeuren herstellen

Raadpleeg Tech Note 83912 voor procedures waarmee u de standaardvoorkeuren voor Dreamweaver kunt herstellen.

Sneltoetsen

Een verwijzingspagina maken voor de huidige sneltoetsset

Een verwijzingspagina is een record van de huidige sneltoetsset. De informatie wordt opgeslagen in de HTML-

tabelindeling. U kunt de verwijzingspagina weergegeven in een webbrowser of afdrukken.

1 Kies Bewerken > Sneltoetsen (Windows) of Dreamweaver > Sneltoetsen (Macintosh).

2 Klik op de knop Set exporteren als HTML. Dit is de derde knop in de set van vier knoppen bovenaan in het

dialoogvenster.

3 Geef in het dialoogvenster Opslaan dat wordt weergegeven de naam op voor de verwijzingspagina en selecteer de

locatie waarin u het bestand wilt opslaan.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

7 Voer in het tekstvak URL de URL van uw website in (bijvoorbeeld http://www.mysite.com). Dreamweaver gebruikt

de URL om hoofdmapafhankelijke relatieve koppelingen te maken en om koppelingen te controleren als u de

koppelingencontrole gebruikt.

Zie “Categorie Geavanceerde instellingen” op pagina 47 voor een meer gedetailleerde uitleg van deze optie.

8 Klik op Opslaan om het scherm Standaard te sluiten. Geef vervolgens bij de categorie Servers op of de server die u

zojuist hebt toegevoegd, een externe server, testserver of beide is.

Opties instellen voor FTP-verbindingen

Gebruik deze instelling als u met FTP verbinding maakt met uw webserver.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop Nieuwe server toevoegen om een nieuwe server toe te voegen

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken

De volgende illustratie laat het scherm Standaard van de categorie Servers zien waarin de tekstvelden al zijn ingevuld.

Scherm Standaard van de categorie Server in het dialoogvenster Site-instelling.

4 Geef een naam voor de nieuwe server op in het tekstvak Servernaam. U kunt elke gewenste naam gebruiken.

5 Selecteer FTP in het pop-upmenu Verbinding maken via.

6 Voer in het tekstvak FTP-adres het adres in van de FTP-server waarnaar u bestanden voor uw website uploadt.

Het FTP-adres is de volledige internetnaam van een computersysteem, bijvoorbeeld ftp.mindspring.com. Voer het

volledige adres in zonder extra tekst. Voeg vooral geen protocolnaam toe vóór het adres.

Als u niet weet wat het FTP-adres is, neemt u contact op met uw webhostingbedrijf.

Opmerking: Poort 21 is de standaardpoort voor het ontvangen van FTP-verbindingen. U kunt het

standaardpoortnummer bewerken in het tekstvak aan de rechterkant. Wanneer u de instellingen opslaat, wordt in het

vak een dubbele punt weergegeven en wordt het nieuwe poortnummer toegevoegd aan het FTP-adres (bijvoorbeeld

ftp.mindspring.com:29).

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

7 Voer in de tekstvakken Gebruikersnaam en Wachtwoord de gebruikersnaam en het wachtwoord in dat u gebruikt

om verbinding te maken met de FTP-server.

8 Klik op Testen om uw FTP-adres, gebruikersnaam en wachtwoord te testen.

Opmerking: U ontvangt uw FTP-adres, gebruikersnaam en wachtwoord van de systeembeheerder van het bedrijf dat als

host optreedt voor uw site. Niemand anders heeft toegang tot deze gegevens. Voer de informatie exact in zoals de

systeembeheerder deze aan u heeft gegeven.

9 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.

10 Voer in het tekstvak Hoofddirectory de directory (map) 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 hoofddirectory, 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 gebruikersnaam wordt weergegeven in de weergave Extern bestand in het deelvenster

Bestanden, is dat waarschijnlijk de map die u moet invoeren in het tekstvak Hoofddirectory.

11 Voer in het tekstvak URL de URL van uw website in (bijvoorbeeld http://www.mysite.com). Dreamweaver gebruikt

de URL om hoofdmapafhankelijke relatieve koppelingen te maken en om koppelingen te controleren als u de

koppelingencontrole gebruikt.

Zie “Categorie Geavanceerde instellingen” op pagina 47 voor een meer gedetailleerde uitleg van deze optie.

12 Vouw de sectie Meer opties uit als u nog meer opties moet instellen.

13 Selecteer Passieve FTP gebruiken als bij uw proxyconfiguratie 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 twijfelt of u passieve FTP moet gebruiken, vraagt u dit na bij uw

systeembeheerder of probeert u het met de optie Passieve FTP gebruiken in- en uitgeschakeld.

Zie TechNote 15220 op de website van Adobe op www.adobe.com/go/tn_15220_nl voor meer informatie.

14 Selecteer IPv6-overdrachtsmodus gebruiken 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.

15 Selecteer Proxy gebruiken als een een proxyhost of -poort wilt opgeven.

Als u meer informatie wilt, klikt u op de koppeling om naar het dialoogvenster Voorkeuren te gaan en klikt u

vervolgens op de knop Help in de categorie Site van het dialoogvenster Voorkeuren.

16 Klik op Opslaan om het scherm Standaard te sluiten. Geef vervolgens bij de categorie Servers op of de server die u

zojuist hebt toegevoegd, een externe server, testserver of beide is.

Zie TechNote kb405912 op de Adobe-website op www.adobe.com/go/kb405912_nl voor hulp bij het oplossen van

problemen met FTP-verbindingen.

Opties instellen voor FTPS-verbindingen (CS5.5)

FTPS (FTP over SSL) biedt ondersteuning voor codering en verificatie, in tegenstelling to SFTP dat alleen

ondersteuning biedt voor codering.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

Als u FTPS gebruikt voor gegevensoverdracht, kunt u uw referenties coderen en de gegevens die worden overgedragen

naar de server. Daarnaast kunt u ervoor kiezen om de referenties en verbindingen van de server te verifiëren. De

referenties van een server worden gevalideerd tegen de huidige verzameling vertrouwde CA-servercertificaten in de

database van Dreamweaver. Certificeringsinstanties (CA's), zoals VeriSign, Thawte enzovoort, geven digitaal

ondertekende servercertificaten uit

Opmerking: Deze procedure beschrijft de specifieke opties voor FTPS. Zie de voorgaande sectie voor meer informatie over

de gewone FTP-opties.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop ‘+’ (Nieuwe server toevoegen) om een nieuwe server toe te voegen.

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken.

4 Typ een naam voor de nieuwe server in het vak Servernaam.

5 Selecteer bij Verbinding maken via een van de volgende opties op basis van uw vereiste.

FTP over SSL/TLS (impliciete codering) De server verbreekt de verbinding als het beveiligingsverzoek niet is

ontvangen.

FTP over SSL/TLS (expliciete codering) Als de client niet om beveiliging vraagt, kan de server doorgaan met een

onveilige transactie of de verbinding weigeren of beperken.

6 Geef bij Verificatie een van de volgende opties op:

Geen De ondertekende of zelfondertekende serverreferenties worden weergegeven. Als u de referenties van de

server accepteert, wordt het certificaat toegevoegd aan een certificaatopslagplaats,

trustedSites.db, in

Dreamweaver. Dreamweaver maakt rechtstreeks verbinding met de server wanneer u de volgende keer verbinding

met deze server verbinding wilt maken.

Opmerking: als de referenties van een zelfondertekend certificaat zijn gewijzigd op de server, moet u de nieuwe

referenties accepteren.

Vertrouwde server Het aangeboden certificaat wordt gevalideerd tegen de huidige verzameling vertrouwde CA-

servercertificaten in de database van Dreamweaver. De lijst met vertrouwde servers wordt opgeslagen in het

bestand

cacerts.pem.

Opmerking: er wordt een foutbericht weergegeven als u Vertrouwde server hebt geselecteerd en verbinding maakt met

een zelfondertekend certificaat.

7 Vouw het gedeelte Meer opties uit als u nog meer opties wilt instellen.

Alleen opdrachtkanaal coderen Selecteer deze optie als u alleen de opdrachten die worden overgedragen, wilt

coderen. Gebruik deze optie als de gegevens die u overdraagt, al gecodeerd zijn of geen gevoelige informatie

bevatten.

Alleen gebruikersnaam en wachtwoord coderen Selecteer deze optie als u alleen uw gebruikersnaam en

wachtwoord wilt coderen.

8 Klik op Opslaan om het scherm Standaard te sluiten. Geef vervolgens bij de categorie Servers op of de server die u

hebt toegevoegd of bewerkt, een externe server, testserver of beide is.

Zie TechNote kb405912 op de Adobe-website op www.adobe.com/go/kb405912_nl voor hulp bij het oplossen van

problemen met FTP-verbindingen.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

Opties instellen voor SFTP-verbindingen

Selecteer de optie Beveiligde FTP (SFTP) gebruiken als bij uw proxyconfiguratie het gebruik van beveiligde FTP

verplicht is. SFTP maakt gebruik van codering en openbare sleutels voor het beveiligen van een verbinding met uw

testserver.

Opmerking: Deze optie kan alleen worden geselecteerd als er op uw server een SFTP-service actief is. Als u twijfelt of op

uw server SFTP actief is, vraagt u dit na bij uw systeembeheerder.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop Nieuwe server toevoegen om een nieuwe server toe te voegen

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken

4 Geef een naam voor de nieuwe server op in het tekstvak Servernaam. U kunt elke gewenste naam gebruiken.

5 Selecteer SFTP in het pop-upmenu Verbinding maken via.

De overige opties zijn gelijk aan de opties voor FTP-verbindingen. Zie de voorgaande sectie voor meer informatie.

Opmerking: Poort 22 is de standaardpoort voor het ontvangen van SFTP-verbindingen.

Opties instellen voor WebDAV-verbindingen

Gebruik deze instelling als u verbinding maakt met uw webserver via het WebDAV-protocol (Web-based Distributed

Authoring and Versioning).

Voor deze verbindingsmethode 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 als verbindingsmethode selecteert en Dreamweaver gebruikt in een omgeving met meerdere

gebruikers, moet u ook ervoor zorgen dat alle gebruikers WebDAV selecteren als verbindingsmethode. Als sommige

gebruikers WebDAV selecteren en andere gebruikers andere verbindingsmethoden selecteren (bijvoorbeeld FTP), werkt

de functie van Dreamweaver voor het in- en uitchecken van bestanden niet goed, omdat WebDAV een eigen

vergrendelingssysteem gebruikt.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop Nieuwe server toevoegen om een nieuwe server toe te voegen

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken

4 Geef een naam voor de nieuwe server op in het tekstvak Servernaam. U kunt elke gewenste naam gebruiken.

5 Selecteer WebDAV in het pop-upmenu Verbinding maken via.

6 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.

7 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.

8 Klik op Testen om uw verbindingsinstellingen te testen.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

9 Selecteer de optie Opslaan als u wilt dat Dreamweaver uw wachtwoord onthoudt elke keer dat u een nieuwe sessie

start.

10 Voer in het tekstvak URL de URL van uw website in (bijvoorbeeld http://www.mysite.com). Dreamweaver gebruikt

de URL om hoofdmapafhankelijke relatieve koppelingen te maken en om koppelingen te controleren als u de

koppelingencontrole gebruikt.

Zie “Categorie Geavanceerde instellingen” op pagina 47 voor een meer gedetailleerde uitleg van deze optie.

11 Klik op Opslaan om het scherm Standaard te sluiten. Geef vervolgens bij de categorie Servers op of de server die u

zojuist hebt toegevoegd, een externe server, testserver of beide is.

Opties instellen voor RDS-verbindingen

Gebruik deze instelling als u verbinding maakt met uw webserver via RDS (Remote Development Services). Voor deze

verbindingsmethode met uw externe server zich op een computer bevinden waarop Adobe® ColdFusion® wordt

uitgevoerd.

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop Nieuwe server toevoegen om een nieuwe server toe te voegen

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken

4 Geef een naam voor de nieuwe server op in het tekstvak Servernaam. U kunt elke gewenste naam gebruiken.

5 Selecteer RDS in het pop-upmenu Verbinding maken via.

6 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 bij

de beveiligingsinstellingen voor ColdFusion-beheer.

• Schakel de optie Opslaan in als u wilt dat Dreamweaver uw instellingen onthoudt.

7 Klik op OK om het dialoogvenster RDS-server configureren te sluiten.

8 Voer in het tekstvak URL de URL van uw website in (bijvoorbeeld http://www.mysite.com). Dreamweaver gebruikt

de URL om hoofdmapafhankelijke relatieve koppelingen te maken en om koppelingen te controleren als u de

koppelingencontrole gebruikt.

Zie “Categorie Geavanceerde instellingen” op pagina 47 voor een meer gedetailleerde uitleg van deze optie.

9 Klik op Opslaan om het scherm Standaard te sluiten. Geef vervolgens bij de categorie Servers op of de server die u

zojuist hebt toegevoegd, een externe server, testserver of beide is.

Opties instellen voor Microsoft Visual SourceSafe-verbindingen

Microsoft Visual SourceSafe wordt niet meer ondersteund vanaf Dreamweaver CS5.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

Geavanceerde opties instellen

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop Nieuwe server toevoegen om een nieuwe server toe te voegen

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken

4 Geef de benodigde basisopties op en klik op de knop Geavanceerd.

5 Selecteer Synchronisatie-informatie bijhouden als u uw lokale en externe bestanden automatisch wilt

synchroniseren. (Deze optie is standaard geselecteerd.)

6 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.

7 Selecteer de optie Het uitchecken van bestanden inschakelen als u het systeem voor in- en uitchecken wilt activeren.

8 Als u een testserver gebruikt, selecteert u een servermodel in het pop-upmenu Servermodel. Zie “Een testserver

instellen” op pagina 48 voor meer informatie.

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.

Bezoek de Adobe-website op www.adobe.com/go/kb405912_nl voor een uitgebreide technische bijlage met specifieke

oplossingen voor FTP-problemen.

• De FTP-implementatie van Dreamweaver werkt mogelijk niet goed met bepaalde proxyservers, proxy's 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. Dubbele punten, schuine strepen, punten en afkappingstekens in namen van bestanden

of mappen kunnen problemen veroorzaken.

• 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.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

Categorie Versiebeheer

U kunt Subversion gebruiken om bestanden te verkrijgen en in te checken. Zie “Subversion (SVN) gebruiken om

bestanden te verkrijgen en in te checken” op pagina 93 voor meer informatie.

Categorie Geavanceerde instellingen

Lokale informatie

Standaardmap voor afbeeldingen De map waarin u de afbeeldingen wilt bewaren die worden gebruikt voor uw site.

Voer het pad naar de map in of klik op het mappictogram om naar de map te bladeren. Dreamweaver gebruikt het pad

naar de map wanneer u afbeeldingen toevoegt aan documenten.

Koppelingen ten opzichte van Hiermee bepaalt u welke koppelingen Dreamweaver maakt wanneer u koppelingen

naar andere middelen of pagina's op uw site maakt. In Dreamweaver kunt u twee soorten koppelingen maken:

documentafhankelijke en hoofdmapafhankelijke relatieve koppelingen. Zie “Absolute, documentafhankelijke

relatieve en hoofdmapafhankelijke relatieve paden” op pagina 282 voor meer informatie over de verschillen tussen de

koppelingen.

Dreamweaver maakt standaard documentafhankelijke relatieve koppelingen. Als u de standaardinstelling wijzigt en

de optie Hoofdmap selecteert, moet u controleren of de juiste URL voor de site is ingevoerd in het tekstvak URL (zie

verderop). 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.

Opmerking: Inhoud die is gekoppeld via hoofdmapafhankelijke relatieve koppelingen, wordt niet weergegeven wanneer

u documenten voorvertoont in een lokale browser, tenzij u een testserver hebt ingesteld of de optie Voorvertoning met

tijdelijk bestand hebt geselecteerd bij Bewerken > Voorkeuren > Voorvertoning in browser. De reden daarvoor is dat

browsers de hoofdmap van sites niet herkennen en servers wel.

URL De URL van uw website. Dreamweaver gebruikt de URL om hoofdmapafhankelijke relatieve koppelingen te

maken en om koppelingen te controleren als u de koppelingencontrole gebruikt.

Hoofdmapafhankelijke relatieve koppelingen zijn handig als u niet weet wat de uiteindelijke locatie in de

mappenstructuur is van de pagina waaraan u werkt, of als u denkt dat u bestanden met koppelingen later nog moet

verplaatsen of opnieuw indelen. Hoofdmapafhankelijke koppelingen zijn koppelingen met paden naar andere

sitemiddelen die relatief zijn ten opzichte van de hoofdmap en niet ten opzichte van het document. Hierdoor blijft het

pad naar de middelen behouden wanneer u het document verplaatst.

Stel, u hebt http://www.mysite.com/mycoolsite (de hoofdmap op de externe server) ingesteld als URL en u gebruikt

tevens een map met afbeeldingen in de map mycoolsite op de externe server

(http://www.mysite.com/mycoolsite/images). Tevens bevindt het bestand index.html file zich in de map mycoolesite.

Als u een hoofdmapafhankelijke relatieve koppelingen maakt van het bestand index.html naar een afbeelding in de

map met afbeeldingen, ziet de koppeling er als volgt uit:

Deze koppeling is anders dan een documentafhankelijke relatieve koppeling, die er simpelweg als volgt zou uitzien:

De toevoeging van /mycoolsite/ aan de afbeeldingsbron zorgt ervoor dat de afbeelding relatief ten opzichte van de

hoofdmap wordt gekoppeld en niet ten opzichte van het document. Als we ervan uitgaan dat de afbeelding aanwezig

blijft in de map met afbeeldingen, blijft het bestandspad naar de afbeelding (/mycoolsite/images/image1.jpg) altijd

juist, zelfs als u het bestand index.html naar een andere map verplaatst.

Zie “Absolute, documentafhankelijke relatieve en hoofdmapafhankelijke relatieve paden” op pagina 282 voor meer

informatie.

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

De URL is nodig voor de controle van de koppelingen om te bepalen of een koppeling intern of extern is voor een site.

Als uw URL bijvoorbeeld http://www.mysite.com/mycoolsite is en de koppelingencontrole vindt een koppeling met de

URL http://www.yoursite.com op uw pagina, wordt vastgesteld dat de tweede koppeling een externe koppeling is en

wordt koppeling als zodanig gerapporteerd. Daarnaast gebruikt de koppelingencontrole de URL om te controleren of

koppelingen interne koppelingen voor de site zijn en om na te gaan of de betreffende interne koppelingen verbroken zijn.

Hoofdlettergevoelige koppelingencontrole 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.

Camoufleren en andere categorieën

Klik op de knop Help in het dialoogvenster voor meer informatie over de categorieën Camoufleren, Ontwerpnotities,

Kolommen Bestandsweergave, Contribute, Sjablonen of Spry.

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.

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.

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.

Zie het Dreamweaver Developer Center-artikel van David Power, Setting up a local testing server in Dreamweaver CS5

(Een lokale testserver instellen in Dreamweaver CS5) voor een gedetailleerd overzicht van de doelstellingen van een

testserver.

Meer Help-onderwerpen

“Een toepassingsserver kiezen” op pagina 556

“Voorbereidingen voor het bouwen van dynamische websites” op pagina 547

Een testserver instellen

1 Selecteer Site > Sites beheren.

2 Klik op Nieuw om een nieuwe site in te stellen of selecteer een bestaande Dreamweaver-site en klik op Bewerken.

3 Selecteer de categorie Servers in het dialoogvenster Site-instelling en voer een van de volgende handelingen uit:

• Klik op de knop Nieuwe server toevoegen om een nieuwe server toe te voegen

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

• Selecteer een bestaande server en klik op de knop Bestaande server bewerken

4 Geef de benodigde basisopties op en klik op de knop Geavanceerd.

Opmerking: Als u een testserver opgeeft, moet u een URL invoeren in het scherm Standaard. Zie de volgende sectie

voor meer informatie.

5 Selecteer bij Testserver het servermodel dat u voor de webtoepassing wilt gebruiken.

Opmerking: Vanaf Dreamweaver CS5 installeert Dreamweaver geen ASP.NET-, ASP-, JavaScript of JSP-

servergedrag meer. Als u echter met ASP.NET-, ASP-, JavaScript- of JSP-pagina's werkt, blijft Dreamweaver voor deze

pagina's ondersteuning bieden voor Live View, codekleuren en coderingstips. U hoeft in het dialoogvenster

Sitedefinitie niet ASP.NET, ASP, JavaScript of JSP te selecteren om deze functies in te schakelen.

6 Klik op Opslaan om het scherm Geavanceerd te sluiten. Geef vervolgens bij de categorie Servers de server die u

zojuist hebt toegevoegd of bewerkt, op als testserver.

Over de URL voor de testserver

U moet een URL 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 voor een testserver 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. Voer de

volgende URL 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. Voer de volgende URL 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's die u dan moet invoeren voor bepaalde webservers:

DREAMWEAVER GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

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 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 de URL:

http://localhost/~MijnGebruikersnaam/voorraad/

Sites beheren en bewerken

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.

Meer Help-onderwerpen

“Site-instellingen importeren en exporteren” op pagina 51

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.

Webserver URL

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 GEBRUIKEN

Werken met Dreamweaver-sites

Laatst bijgewerkt 2/5/2011

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 Bestand(en) 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 Bestanden naar het bestand of de map en klikt u op Bestand(en) ophalen op de werkbalk om dat bestand

naar uw lokale vaste schijf 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

Als u een Dreamweaver-site en alle instellingen daarvan verwijdert uit uw lijst met sites, worden de bestanden van de

sites 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 Als u een back-up wilt maken van uw instellingen, selecteert u de eerste optie in het dialoogvenster Site exporteren

en klikt u op OK. Dreamweaver slaat de aanmeldingsgegevens voor de externe server op, zoals de gebruikersnaam

en het wachtwoord, maar ook de lokale padgegevens.

4 Als u uw instellingen wilt delen met andere gebruikers, selecteert u de tweede optie in het dialoogvenster Site

exporteren 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.)

107

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

Bestandsgegevens opslaan in ontwerpnotities.

Over ontwerpnotities

Ontwerpnotities zijn notities die u maakt voor een bestand. Ontwerpnotities worden gekoppeld aan het bestand

waarvan 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 opent in Adobe® Fireworks® of Flash 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:

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.

Meer Help-onderwerpen

“Een externe editor openen voor mediabestanden” op pagina 268

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 de optie Ontwerpnotitie inschakelt, kunt u desgewenst ook opgeven dat u deze notities met anderen

wilt delen.

1 Selecteer Site > Sites beheren.

2 Selecteer in het dialoogvenster Sites beheren een site en klik vervolgens op Bewerken.

108

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

3 Vouw de categorie Geavanceerde instellingen in het dialoogvenster Site-instelling uit en selecteer de categorie

Ontwerpnotities.

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 externe ontwerpnotitiebestanden wilt verwijderen, moet u die handmatig verwijderen.)

Opmerking: Met de opdracht voor het opschonen van ontwerpnotities verwijdert u alleen MNO-bestanden

(ontwerpnotities). U verwijdert hiermee niet de map _notes of het bestand dwsync.xml in de map _notes. Dreamweaver

gebruikt het bestand dwsync.xml voor onderhoud van informatie over de sitesynchronisatie.

6 Selecteer de optie Ontwerpnotities uploaden om ze met anderen te delen inschakelen als u de ontwerpnotities die

aan uw site zijn gekoppeld, wilt uploaden met de rest van de documenten 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

U kunt een ontwerpnotitiebestand maken voor elk document of elke sjabloon op uw site. U kunt ook ontwerpnotities

voor 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 deelvenster Bestanden 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.

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.

109

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Bestanden ophalen van en plaatsen op de server” op pagina 84

“Bestanden inchecken in of uitchecken uit een externe map” op pagina 90

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 deelvenster Bestanden en selecteer Ontwerpnotities.

• Dubbelklik in de kolom Notities van het deelvenster Bestanden 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 > Geavanceerde instellingen > Kolommen Bestandsweergave. 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.

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.

110

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

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.

Bedenk ook dat een pagina die bestaat uit één grote tabel, in bepaalde browsers pas zichtbaar wordt voor bezoekers als

de 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.

111

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Verbroken koppelingen herstellen” op pagina 297

“Koppelingen testen in Dreamweaver” op pagina 291

“Het gedrag Browser controleren toepassen” op pagina 364

“XML-documenten valideren” op pagina 337

“Controleren op browsercompatibiliteit” op pagina 337

Zelfstudie over het oplossen van publicatieproblemen

Rapporten gebruiken om uw site te testen

U kunt siterapporten uitvoeren voor workflow- of HTML-kenmerken. 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 geneste lettertypetags die kunnen worden gecombineerd, ontbrekende Alt-tekst, overbodige geneste

tags, lege tags die kunnen worden verwijderd 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.

112

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

Meer Help-onderwerpen

“Rapporten in Dreamweaver” op pagina 21

“Koppelingen testen in Dreamweaver” op pagina 291

“Extensies toevoegen en beheren in Dreamweaver” op pagina 37

Rapporten uitvoeren om een site te testen

1 Selecteer Site > Rapporten.

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

deelvenster Bestanden.

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.

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.

113

DREAMWEAVER GEBRUIKEN

Bestanden maken en beheren

Laatst bijgewerkt 2/5/2011

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, meerdere

titeltags 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).

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

deelvenster Siterapporten voor een beschrijving van het probleem.

• 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.

114

Laatst bijgewerkt 2/5/2011

Hoofdstuk 5: Beheer van elementen en

bibliotheken

Over elementen en bibliotheken

Over elementen

Met Adobe® Dreamweaver® CS5 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.

Middelen zijn beschikbaar via verschillende bronnen. Zo kunt u middelen maken in een toepassing als Adobe®

Fireworks® of Adobe® Flash®, middelen ontvangen van een collega of middelen kopiëren vanaf een cd met clip-art of

een website met afbeeldingen.

Dreamweaver biedt tevens toegang tot twee speciale typen elementen: bibliotheken en sjablonen. Beide zijn

gekoppelde elementen: als u een bibliotheekitem of sjabloon bewerkt, werkt Dreamweaver alle 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.

Meer Help-onderwerpen

“Over sjablonen van Dreamweaver” op pagina 404

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 kunt opslaan in een bibliotheek zijn afbeeldingen, tabellen, geluiden en

bestanden die zijn gemaakt met Adobe Flash. 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 maakt 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 van elk element in de

body-sectie van een document, waaronder tekst, tabellen,

formulieren, Java-applets, insteekmodules, 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.

115

DREAMWEAVER GEBRUIKEN

Beheer van elementen en bibliotheken

Laatst bijgewerkt 2/5/2011

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. Als u dit doet, kunt u gemakkelijk de alt-tekst van de afbeelding, of

zelfs het

src-kenmerk, wijzigen op de gehele 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.)

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 maakt met een element waaraan een Dreamweaver-gedrag is gekoppeld, kopieert

Dreamweaver het element en de bijbehorende gebeurtenishandler (het kenmerk dat aangeeft door welke gebeurtenis

de actie wordt geactiveerd, zoals

onClick, onLoad of onMouseOver, en welke actie moet worden aangeroepen wanneer

de gebeurtenis plaatsvindt) naar het bibliotheekitembestand. Dreamweaver kopieert de gekoppelde JavaScript-

functies niet naar het bibliotheekitem. Wanneer u het bibliotheekitem invoegt in een document, voegt Dreamweaver

in plaats daarvan automatisch de benodigde JavaScript-functies toe aan de

head-sectie van dat document (als deze

functies nog niet zijn toegevoegd).

Opmerking: Als u JavaScript handmatig codeert (dat wil zeggen, als u de code maakt 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 die elementen deel uitmaakt van de

head-sectie.

Meer Help-onderwerpen

“Gedrag in een bibliotheekitem bewerken” op pagina 126

Werken met elementen

Overzicht van middelenpaneel

Gebruik het paneel Elementen (Venster > Elementen) 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.

116

DREAMWEAVER GEBRUIKEN

Beheer van elementen en bibliotheken

Laatst bijgewerkt 2/5/2011

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.

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 opmaakprofielen, inclusief kleuren voor tekst,

achtergronden en koppelingen.

URL's Externe koppelingen in uw huidige sitedocumenten, zoals FTP-, gopher-, HTTP-, HTTPS-, JavaScript-,

e-mail- (

mailto) en local file- (file://) koppelingen.

Flash Bestanden van een willekeurige versie van Adobe Flash. In het paneel Elementen worden alleen SWF-

bestanden (gecomprimeerde bestanden die zijn gemaakt met Flash) 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.

127

Laatst bijgewerkt 2/5/2011

Hoofdstuk 6: Pagina's maken met CSS

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.

Meer Help-onderwerpen

“Werken met labels voor div-tags” op pagina 163

“Pagina's met CSS opmaken” op pagina 156

Inzicht in CSS-zelfstudie

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:

128

DREAMWEAVER GEBRUIKEN

Pagina's maken met CSS

Laatst bijgewerkt 2/5/2011

h1 {

font-size: 16 pixels;

font-family: Helvetica;

font-weight:bold;

}

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: de tekst voor alle labels h1 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:

• Klassenstijlen, 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.

hoofd.html

Externe stijlpagina

evenementen.html

H1 {

font-family: Arial;

font-size: 16px;

font-weight: bold;

}

Waar kunnen we

overnachten

Lentefestival

Wat is er te doen

129

DREAMWEAVER GEBRUIKEN

Pagina's maken met CSS

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Klassenstijlen toepassen, verwijderen of hernoemen” op pagina 146

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 kunnen gebruikers bijvoorbeeld Beeld > Tekengrootte > Extra groot selecteren om het paginalettertype uit te

breiden naar een grootte die beter leesbaar is als ze vinden 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—alineatags erven bijvoorbeeld bepaalde eigenschappen van de body-tag over, span-

tags voor een lijst met opsommingstekens erven bepaalde eigenschappen van alineatags over, enzovoort. Bijvoorbeeld

wanneer u in uw stijlpagina de volgende regel maakt:

130

DREAMWEAVER GEBRUIKEN

Pagina's maken met CSS

Laatst bijgewerkt 2/5/2011

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.

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 deelvenster CSS-stijlen gebruiken om CSS-regels en -eigenschappen te maken en te bewerken. Het

deelvenster 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 deelvenster 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.

Meer Help-onderwerpen

“Tekst toevoegen en opmaken” op pagina 225

“Deelvenster CSS-stijlen” op pagina 132

131

DREAMWEAVER GEBRUIKEN

Pagina's maken met CSS

Laatst bijgewerkt 2/5/2011

“Een nieuwe CSS-regel maken” op pagina 138

Zelfstudie tekst opmaken met CSS

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

font-size-adjust.

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 deelvenster CSS-stijlen maakt regels met uitsluitend de lange notatie. Als u een pagina of CSS-stijlpagina

maakt met behulp van het deelvenster 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.

204

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

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.

205

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

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 Shift+Alt (Windows) of Shift -Option (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.

207

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

Opmerking: Als u een document met Bestand > Openen in frame hebt geopend in een frame en u slaat de frameset op,

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 toegangskenmerken van een frame wilt bewerken,

gebruikt u de Tagcontrole om de HTML-code direct te bewerken.

Meer Help-onderwerpen

“Dreamweaver en toegankelijkheid” op pagina 715

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.

208

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

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 <frameset> bewerken.

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.

209

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

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.

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 Hier kunt u opgeven dat de hoogte of breedte van de geselecteerde kolom of rij een percentage van de totale

hoogte of breedte van de bijbehorende frameset moet zijn. Aan frames met eenheden in percentages wordt ruimte

210

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

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.

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 koppelt naar een pagina buiten uw site, moet u altijd

target="_top" of target="_blank" gebruiken om te

voorkomen dat het lijkt alsof de pagina deel uitmaakt van uw site.

211

DREAMWEAVER GEBRUIKEN

Pagina's opmaken met HTML

Laatst bijgewerkt 2/5/2011

Inhoud opgeven voor browsers zonder frameondersteuning

U kunt in Dreamweaver inhoud opgeven voor weergave in een op tekst gebaseerde browser en in oudere grafische

browsers 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 Voer een van de volgende handelingen uit:

• 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 in 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.

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 “JavaScript-gedrag toevoegen” op pagina 360 voor meer informatie.

Meer Help-onderwerpen

“Het gedrag Tekst van frame instellen toepassen” op pagina 370

“Het gedrag Ga naar URL toepassen” op pagina 367

“Het gedrag Navigatiebalkafbeelding instellen toepassen” op pagina 370

“Het gedrag Snelmenu toepassen” op pagina 368

212

Laatst bijgewerkt 2/5/2011

Hoofdstuk 8: Inhoud toevoegen aan

pagina's

Werken met pagina's

Het paneel Invoegen gebruiken

Het paneel Invoegen bevat knoppen voor het maken en invoegen van objecten zoals tabellen en afbeeldingen. De

knoppen zijn georganiseerd in categorieën.

Meer Help-onderwerpen

“Overzicht van paneel Invoegen” op pagina 14

“Tags bewerken met tageditors” op pagina 324

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

Het paneel Invoegen verbergen of weergeven

❖ Selecteer Venster > Invoegen.

Opmerking: Als u met bepaalde bestandstypen werkt, zoals XML, JavaScript, Java en CSS, worden het paneel Invoegen

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

De knoppen in een bepaalde categorie weergeven

❖ Selecteer de categorienaam in het pop-upmenu Categorie. Selecteer bijvoorbeeld Lay-out als u knoppen voor de

categorie Lay-out wilt weergeven.

213

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Het pop-upmenu voor een knop weergeven

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

Een object invoegen

1 Selecteer de juiste categorie in het pop-upmenu Categorie van het paneel Invoegen.

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 Ctrl of

Option ingedrukt terwijl u op de knop Afbeelding klikt.

214

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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

objecten, zoals AP-elementen en framesets, worden geen tijdelijke aanduidingen of objecten met een standaardwaarde

ingevoegd.

Voorkeuren voor het paneel Invoegen wijzigen

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

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 het paneel Invoegen toevoegen, verwijderen of

beheren

1 Selecteer een categorie in het paneel Invoegen.

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

knoppen worden weergegeven, en kies Favorieten aanpassen.

3 Geef in het dialoogvenster Favoriete objecten aanpassen de noodzakelijke wijziging op en klik op OK.

• 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.

4 Als u zich niet in de categorie Favorieten van het paneel Invoegen bevindt, selecteert u die categorie om uw

wijzigingen te zien.

Objecten invoegen met knoppen in de categorie Favorieten

❖ Selecteer de categorie Favorieten in het pop-upmenu Categorie van het paneel Invoegen en klik op de knop voor

een van de favoriete objecten die u hebt toegevoegd.

215

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Het paneel Invoegen als een horizontale invoegbalk weergeven

In tegenstelling tot andere panelen in Dreamweaver kunt u het paneel Invoegen uit de standaard gedokte positie slepen

en horizontaal, boven in het venster Document, neerzetten. Wanneer u dat doet, verandert het paneel in een werkbalk

(al kunt u de balk niet op dezelfde wijze als andere werkbalken verbergen en weergeven).

1 Klik op de tab van het paneel Invoegen en sleep het naar de bovenkant van het documentvenster.

2 Zet het paneel Invoegen neer zodra een horizontale blauwe lijn dwars over het documentvenster wordt

weergegeven.

Opmerking: De horizontale invoegbalk is ook een standaardonderdeel van de klassieke werkruimte. Als u naar de

klassieke werkruimte wilt schakelen, selecteert u Klassiek in de werkruimteschakelaar op de toepassingsbalk.

De horizontale invoegbalk weer veranderen in een paneelgroep

1 Klik op de greep van de horizontale invoegbalk (links van de invoegbalk) en sleep de balk naar de plaats waar uw

panelen zijn gedokt.

2 Zoek een geschikte plaats voor het paneel Invoegen en zet het paneel neer. Een blauwe lijn geeft aan waar u het

paneel kunt neerzetten.

Categorieën op de horizontale invoegbalk weergeven als tabs

❖ Klik op de pijl naast de categorienaam aan de linkerkant van de horizontale invoegbalk en selecteer de optie voor

het weergeven als tabs.

216

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Categorieën op de horizontale invoegbalk weergeven als een menu

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

op de horizontale invoegbalk en kies de opdracht Weergeven als menu.

Pagina-eigenschappen instellen

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. Wijzigingen die u in het dialoogvenster

Pagina-eigenschappen doorgeeft, worden op de hele pagina toegepast.

Dreamweaver definieert CSS-regels voor alle eigenschappen die zijn opgegeven in de categorieën Weergave (CSS),

Koppelingen (CSS) en Koppen (CSS) van het dialoogvenster Pagina-eigenschappen. De regels zijn ingesloten in de

sectie

head van de pagina. U kunt nog steeds pagina-eigenschappen instellen met HTML, maar daartoe moet u de

categorie Weergave (HTML) in het dialoogvenster Pagina-eigenschappen selecteren. (In de dialoogvensters

Titel/codering en Overtrekafbeelding worden ook pagina-eigenschappen ingesteld met HTML.)

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.

1 Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de

eigenschappencontrole.

2 Bewerk de pagina-eigenschappen en klik op OK.

Meer Help-onderwerpen

“CSS-eigenschappen instellen” op pagina 138

“HTML-opmaak gebruiken” op pagina 238

“XHTML-code” op pagina 305

Lettertype, achtergrondkleur en achtergrondafbeeldingseigenschappen voor een CSS-

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 (CSS) 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.

244

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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.

• 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.

Meer Help-onderwerpen

“Afbeeldingen dynamisch maken” op pagina 605

“Afbeeldingen met hyperlinks” op pagina 294

“De werkomgeving optimaliseren voor het ontwerp van toegankelijke pagina's” op pagina 716

“Pagina-eigenschappen instellen” op pagina 216

Zelfstudie Afbeeldingen invoegen

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.)

245

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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 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.

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.

Afbeeldingsinstellingen bewerken Hiermee opent u het dialoogvenster the Voorvertoning van afbeelding waarin

u de afbeelding kunt optimaliseren.

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.

246

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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.

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: HTML biedt geen manier om tekst rond de randen van een afbeelding te laten lopen, zoals wel kan met

sommige 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.

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.

247

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

De grootte van een afbeelding visueel wijzigen

U kunt de grootte van elementen als afbeeldingen, insteekmodules, Shockwave- of SWF-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 Adobe 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.

Meer Help-onderwerpen

“Afbeeldingen bewerken in Dreamweaver” op pagina 250

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.

248

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

2 Klik op de knop Nieuw voorbeeld in de eigenschappencontrole voor de afbeelding.

Opmerking: U kunt geen nieuw voorbeeld maken van voorlopige afbeeldingen of andere elementen dan

bitmapafbeeldingen.

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 > Tijdelijke aanduiding voor 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.

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.

Meer Help-onderwerpen

“De grootte van een afbeelding visueel wijzigen” op pagina 247

“Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen” op pagina 378

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.

259

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

transparanties bevat en u DHTML-elementen daarachter wilt weergeven. Selecteer de optie Venster om de parameter

Wmode uit de code te verwijderen zodat het SWF-bestand boven andere DHTML-elementen wordt weergegeven.

Afspelen Hiermee speelt u de film af in het venster Document.

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.

FlashPaper-documenten invoegen

De functie FlashPaper invoegen wordt vanaf Dreamweaver CS5 niet meer ondersteund.

FLV-bestanden invoegen

U kunt heel eenvoudig een FLV-video aan een webpagina toevoegen; u hebt het hulpprogramma voor het maken van

Flash-objecten niet nodig. U hebt een gecodeerd FLV-bestand nodig voordat u begint.

Dreamweaver voegt een SWF-onderdeel in dat het FLV-bestand weergeeft; wanneer het onderdeel in een browser

wordt weergegeven, wordt het geselecteerde FLV-bestand en een reeks afspeelbesturingen weergegeven.

In Dreamweaver hebt u de volgende opties voor het afspelen van FLV-video voor de bezoekers van uw site:

Progressief downloadbare video Hiermee wordt het FLV-bestand 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 video-inhoud gestroomd en op een webpagina afgespeeld na een korte

bufferperiode die zorgt voor ononderbroken afspelen. Om streamingvideo mogelijk te maken op uw webpagina's, hebt

u toegang nodig tot Adobe® Flash® Media Server.

U moet een gecodeerd FLV-bestand hebben voordat u het in Dreamweaver kunt gebruiken. U kunt videobestanden

invoegen die zijn gemaakt met twee soorten codecs (technologieën voor compressie/decompressie): Sorenson Squeeze

en On2.

260

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Net als met gewone SWF-bestanden voegt Dreamweaver wanneer u een FLV-bestand invoegt code in waarmee wordt

gedetecteerd of de gebruiker over de juiste versie van Flash Player beschikt om de video weer te geven. Als de gebruiker

niet over de correcte versie beschikt, wordt alternatieve inhoud op de pagina weergegeven waarmee de gebruiker wordt

gevraagd de meest recente versie van Flash Player te downloaden.

Opmerking: Gebruikers kunnen FLV-bestanden alleen bekijken als Flash Player 8 of later op hun computer is

geïnstalleerd. Als een gebruiker niet de vereiste versie van Flash Player heeft geïnstalleerd, maar wel Flash Player 6.0 r65

of later heeft geïnstalleerd, wordt in de browser een installatieoptie voor Flash Player weergegeven in plaats van de

alternatieve inhoud. Als de gebruiker dit installatieprogramma niet accepteert, wordt de alternatieve inhoud op de

pagina weergegeven.

Ga naar het Video Technology Center op www.adobe.com/go/flv_devcenter_nl voor meer informatie over het werken

met video.

Een FLV-bestand invoegen

1 Selecteer Invoegen > Media >FLV.

2 Selecteer in het dialoogvenster FLV invoegen de optie Progressief downloadbare video of Streamingvideo in het

pop-upmenu Type video.

3 Vul de overige opties in het dialoogvenster in en klik op OK.

Opmerking: Microsoft Internet Information Server (IIS) verwerkt geen geneste object-tags. Voor ASP-pagina's gebruikt

Dreamweaver bij het invoegen van SWF- of FLV-bestanden geneste object- of insluitingscode inplaats van geneste

objectcode.

Opties instellen voor progressieve downloadvideo's

In het dialoogvenster FLV invoegen kunt u opties instellen voor het via progressief downloaden afspelen van een FLV-

bestand dat is ingevoegd in een webpagina.

1 Selecteer Invoegen > Media > FLV (of klik op het pictogram FLV in de categorie Media van de algemene

invoegbalk).

2 Selecteer in het dialoogvenster FLV invoegen de optie Progressief downloadbare video 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.

Skin Hiermee wordt de weergave van het video-onderdeel opgegeven. Er wordt een voorbeeld van de geselecteerde

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 video-onderdeel. Deze optie

is standaard geselecteerd.

261

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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.

4 Klik op OK om het dialoogvenster te sluiten en het FLV-bestand toe te voegen aan uw webpagina.

Met de opdracht FLV invoegen worden een SWF-bestand voor de videospeler en een skin-SWF-bestand ingevoegd

die worden gebruikt om de video-inhoud 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 video-inhoud toevoegt. Als u de HTML-pagina met het FLV-bestand uploadt,

worden deze bestanden geüpload als afhankelijke bestanden (als u tenminste op Ja klikt in het dialoogvenster

Afhankelijke bestanden plaatsen).

Opties instellen voor streaming video

In het dialoogvenster FLV invoegen kunt u opties instellen voor het streamen van een videodownload van een FLV-

bestand dat is ingevoegd in een webpagina.

1 Selecteer Invoegen > Media > FLV (of klik op het pictogram FLV in de categorie Media van de algemene

invoegbalk).

2 Selecteer Streamingvideo in 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.

Skin Hiermee wordt de weergave van het video-onderdeel opgegeven. Er wordt een voorbeeld van de geselecteerde

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 video-onderdeel. Deze optie

is standaard geselecteerd.

Live video Geeft aan of de inhoud van de 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.

262

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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.

3 Klik op OK om het dialoogvenster te sluiten en het FLV-bestand toe te voegen aan uw webpagina.

Met de opdracht FLV invoegen worden een SWF-bestand voor de videospeler en een skin-SWF-bestand ingevoegd

die worden gebruikt om de 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 mogelijk op de knop Vernieuwen in het deelvenster Bestanden klikken.) Deze bestanden zijn opgeslagen in dezelfde

map als het HTML-bestand waaraan u video-inhoud toevoegt. Als u de HTML-pagina uploadt die het FLV-bestand

bevat, 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 FLV invoegen.

U kunt alle vereiste mediabestanden gemakkelijk uploaden door de tijdelijke aanduiding van het 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 video-inhoud niet geüpload.

Downloadinformatie voor Flash Player bewerken

Wanneer u een FLV-bestand op een pagina invoegt, voegt Dreamweaver code in waarmee wordt gedetecteerd of de

gebruiker over de juiste versie van Flash Player beschikt. Als dat niet het geval is, wordt op de pagina standaard

alternatieve inhoud weergegeven waarmee de gebruiker wordt gevraagd om de meest recente versie te downloaden. U

kunt deze alternatieve inhoud op elk moment wijzigen.

Deze procedure is ook van toepassing op SWF-bestanden.

Opmerking: Als een gebruiker niet over de vereiste versie beschikt, maar wel over Flash Player 6.0 r65 of later, wordt een

installatieoptie voor Flash Player weergegeven. Als de gebruiker dit installatieprogramma niet accepteert, wordt de

alternatieve inhoud op de pagina weergegeven.

1 Selecteer het SWF-bestand of FLV-bestand in de ontwerpweergave van het documentvenster.

2 Klik op het oogje op de tab van het SWF- of FLV-bestand.

U kunt ook op Ctrl + ] drukken om naar de weergave van alternatieve inhoud te schakelen. Als u naar de SWF/FLV-

weergave wilt teruggaan, drukt u op Ctrl + [ totdat alle alternatieve inhoud is geselecteerd. Druk vervolgens nogmaals

op Ctrl + [.

3 Bewerk de inhoud zoals u elke andere inhoud in Dreamweaver bewerkt.

Opmerking: U kunt SWF- of FLV-bestanden niet als alternatieve inhoud toevoegen.

4 Klik opnieuw op het oogje om naar de weergave van het SWF- (of FLV-) bestand terug te gaan.

Problemen met FLV-bestanden oplossen

In deze sectie worden enkele van de meestvoorkomende oorzaken van problemen met FLV-bestanden behandeld.

265

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

U kunt ook een webwidget toevoegen aan een Dreamweaver-pagina (CS5.5 en hoger) door de volgende handelingen

uit te voeren:

1 Blader in de Widgetbrowser naar My Widgets (Mijn widgets).

2 Selecteer de widget die u wilt toevoegen.

3 Klik op het pictogram voor slepen en neerzetten in Dreamweaver in de linkerbovenhoek van het tabblad Live View

en houd het pictogram ingedrukt. Sleep de widget naar Dreamweaver in de ontwerpweergave (Windows) of de

ontwerp- of codeweergave (Macintosh OS).

U kunt de widget niet slepen en neerzetten in Live View, maar u kunt Live View wel gebruiken om de widget te testen

nadat u deze op de pagina hebt neergezet.

Meer Help-onderwerpen

Adobe Widget Browser Help

“Werken met Spry-widgets (algemene instructies)” op pagina 439

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 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

266

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Mediaobjecten invoegen en bewerken” op pagina 267

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 het paneel Invoegen, klik op de knop Media en selecteer het pictogram

Insteekmodule uit het pop-upmenu.

• Selecteer Invoegen > Media > Insteekmodule.

267

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

2 Blader naar het audiobestand en klik op OK.

3 Geef de breedte en hoogte op door de waarden in de desbetreffende tekstvakken in de eigenschappencontrole 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.

Meer Help-onderwerpen

“Inhoud voor insteekmodules invoegen voor Netscape Navigator” op pagina 270

Andere mediaobjecten toevoegen

Mediaobjecten invoegen en bewerken

Naast SWF- en FLV-bestanden kunt u ook QuickTime- of Shockwave-films, Java-applets, ActiveX-

besturingselementen en andere audio- of video-objecten in een Dreamweaver-document invoegen. Als u

toegankelijkheidskenmerken hebt ingevoegd 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 het paneel Invoegen, 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 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.

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, houdt u Control (Windows) of Option (Macintosh) ingedrukt terwijl u het object invoegt. (Als u

bijvoorbeeld 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

het paneel Invoegen, of selecteert u Invoegen > Media > Shockwave.)

3 Vul het dialoogvenster Bestand selecteren 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

268

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“De werkomgeving optimaliseren voor het ontwerp van toegankelijke pagina's” op pagina 716

“Inhoud voor insteekmodules invoegen voor Netscape Navigator” op pagina 270

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.

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 houd Control ingedrukt en klik (Macintosh)

op de bestandsnaam en selecteer Openen met in het contextmenu.

• Klik in de ontwerpweergave met de rechtermuisknop (Windows) of houd Control ingedrukt en klik (Macintosh)

op het media-element binnen de huidige pagina en selecteer Bewerken met in 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.

269

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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 voor pagina in het contextmenu.

3 Typ de gewenste informatie in de ontwerpnotitie.

U kunt ook vanuit het paneel Bestanden een ontwerpnotitie toevoegen aan een mediaobject door het bestand te

selecteren, het contextmenu weer te geven en Ontwerpnotities te kiezen in het contextmenu.

Meer Help-onderwerpen

“Ontwerpnotities inschakelen en uitschakelen voor een site.” op pagina 107

“Bestandsgegevens opslaan in ontwerpnotities.” op pagina 107

270

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

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 Adobe® 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 het paneel Invoegen, 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.

Meer Help-onderwerpen

“Eigenschappen van SWF-bestanden instellen” op pagina 258

Video (niet-FLV) toevoegen

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.

Nadat u inhoud voor een insteekmodule voor Netscape Navigator hebt ingevoegd, gebruikt u de

eigenschappencontrole om 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.

278

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Een selectie maken of uitbreiden

❖ Houd Shift ingedrukt terwijl u op een pijltoets drukt.

Als er een zwarte lijn verschijnt om een muisbeweging aan te geven terwijl u een taak uitvoert die u later wilt herhalen,

kunt u vóór die stap een bewerking voor ongedaan maken uitvoeren en een andere benadering proberen, bijvoorbeeld

door de pijltoetsen te gebruiken.

Stappen in het paneel Historie toepassen op objecten

U kunt een reeks stappen uit het paneel Historie toepassen op een willekeurig object in het documentvenster.

Als u meerdere objecten selecteert en er vervolgens stappen uit het paneel Historie op toepast, worden de objecten als

één selectie beschouwd en probeert Dreamweaver de stappen toe te passen op de gecombineerde selectie. U kunt een

reeks stappen echter ook toepassen op één object tegelijk.

Als u de stappen wilt toepassen op elk object in een reeks objecten, dient u ervoor te zorgen dat de laatste stap in de

reeks het volgende object in de groep selecteert. De tweede werkwijze demonstreert dit principe in een bepaald

scenario: het instellen van de verticale en horizontale afstand in een reeks afbeeldingen.

Stappen toepassen op één ander object

1 Selecteer het object.

2 Selecteer de relevante stappen in het paneel Historie en klik op Opnieuw afspelen.

Stappen toepassen op meerdere objecten

1 Open een document waarin elke regel bestaat uit een kleine afbeelding (zoals een bullet met een afbeelding of een

pictogram) gevolgd door tekst.

Het doel is om de afbeeldingen door middel van wat ruimte zowel van de tekst als van de andere afbeeldingen erboven

en eronder te scheiden.

2 Open de eigenschappencontrole (Venster > Eigenschappen), als deze nog niet is geopend.

3 Selecteer de eerste afbeelding.

4 Geef in de eigenschappencontrole getallen op in de vakken V-ruimte en H-ruimte om de afstanden van de

afbeelding in te stellen.

5 Klik opnieuw op de afbeelding om het documentvenster actief te maken zonder de invoegpositie te verplaatsen.

6 Druk op de pijltoets links om de invoegpositie te verplaatsen en links van de afbeelding te zetten.

7 Druk op de pijltoets omlaag om de invoegpositie één regel naar onderen te verplaatsen, zodat het net links van de

tweede afbeelding in de reeks komt te staan.

8 Druk op Shift+pijltoets rechts om de tweede afbeelding te selecteren.

Opmerking: Selecteer de afbeelding niet door erop te klikken; als u dit doet, kunt u niet alle stappen opnieuw afspelen.

279

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

9 Selecteer in het paneel Historie de stappen die overeenkomen met het instellen van de afstanden van de afbeelding

en het selecteren van de volgende afbeelding. Klik op Opnieuw afspelen om die stappen opnieuw af te spelen.

De afstanden van de huidige afbeelding worden gewijzigd en de volgende afbeelding wordt geselecteerd.

10 Blijf klikken op Opnieuw afspelen totdat alle afbeeldingen zijn voorzien van de juiste afstanden.

Stappen kopiëren en plakken tussen documenten

Elk open document heeft zijn eigen historie van stappen. U kunt stappen kopiëren uit het ene document en deze

plakken in een ander document.

Door een document te sluiten wist u de historie ervan. Als u weet dat u stappen uit een document later wilt gebruiken,

kopieert u de stappen (of slaat u deze op) voordat u het document sluit.

1 Selecteer in het document met de stappen die u wilt hergebruiken, de stappen in het paneel Historie.

2 Klik op Stappen kopiëren in het paneel Historie .

Opmerking: De knop Stappen kopiëren in het paneel Historie is anders dan de opdracht Kopiëren in het menu Bewerken.

U kunt geen gebruikmaken van Bewerken > Kopiëren voor het kopiëren van stappen, maar u kunt wel Bewerken >

Plakken gebruiken om stappen te plakken.

Wees voorzichtig wanneer u stappen kopieert die een opdracht Kopiëren of Plakken bevatten:

• Gebruik Stappen kopiëren niet als een van de stappen bestaat uit de opdracht Kopiëren. Mogelijk kunt u dergelijke

stappen niet op de gewenste manier plakken.

• Als uw stappen de opdracht Plakken bevatten, kunt u deze stappen alleen plakken wanneer de stappen zelf ook de

opdracht Kopiëren vóór de opdracht Plakken bevatten.

3 Open het andere document.

4 Plaats de invoegpositie op de gewenste locatie of selecteer een object waarop u de stappen wilt toepassen

5 Selecteer Bewerken > Plakken.

De stappen worden opnieuw afgespeeld terwijl ze worden geplakt in het paneel Historie van het document. Het paneel

Historie geeft deze als één stap weer, onder de naam Stappen plakken.

Als u stappen hebt geplakt in een teksteditor, de codeweergave of de codecontrole, zien ze eruit als JavaScript-code.

Dit kan handig zijn om u uw eigen scripts te leren schrijven.

Meer Help-onderwerpen

“Code schrijven en bewerken” op pagina 316

280

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Opdrachten uit historiestappen maken en gebruiken

Sla een reeks historiestappen op als een benoemde opdracht, die vervolgens beschikbaar komt in het menu

Opdrachten. Maak een nieuwe opdracht en sla deze op als u de reeks stappen de volgende keer dat u Dreamweaver

start mogelijk opnieuw kunt gebruiken.

Een opdracht maken

1 Selecteer een stap of een reeks stappen in het paneel Historie.

2 Klik op de knop Opslaan als opdracht of selecteer Opslaan als opdracht in het contextmenu van paneel Historie.

3 Geef een naam op voor de opdracht en klik op OK.

De opdracht verschijnt in het menu Opdrachten.

Opmerking: De opdracht wordt opgeslagen als een JavaScript-bestand (of soms als HTML-bestand) in uw map

Dreamweaver/Configuratie/Opdrachten. Als u Dreamweaver gebruik onder een besturingssysteem voor meerdere

gebruikers, wordt het bestand opgeslagen in de map Opdrachten van die bepaalde gebruiker.

Een opgeslagen opdracht gebruiken

1 Selecteer een object waarop de opdracht moet worden toegepast of plaats de invoegpositie op de plaats waar u de

opdracht wilt toepassen.

2 Selecteer de opdracht in het menu Opdrachten.

De naam van een opdracht bewerken

1 Selecteer Opdrachten > Opdrachtlijst bewerken.

2 Selecteer een opdracht waarvan u de naam wilt wijzigen, geef een nieuwe naam voor de opdracht op en klik op

Sluiten.

Een naam verwijderen uit het menu Opdrachten

1 Selecteer Opdrachten > Opdrachtlijst bewerken.

2 Selecteer een opdracht.

3 Klik op Verwijderen en vervolgens op Sluiten.

Opdrachten vastleggen en opslaan

Leg een tijdelijke opdracht vast voor gebruik op de korte termijn of leg een opdracht vast en sla deze op voor gebruik

later. Dreamweaver houdt slechts één vastgelegde opdracht tegelijk vast. Zodra u begint met het vastleggen van een

nieuwe opdracht, gaat de vorige opdracht verloren, tenzij u deze hebt opgeslagen voordat u de nieuwe opdracht

vastlegde.

Een reeks stappen tijdelijk vastleggen

1 Selecteer Opdrachten > Opname starten of druk op Control+Shift+X (Windows) of Command+Shift+X

(Macintosh).

De aanwijzer verandert van vorm om aan te geven dat u bezig bent met het vastleggen van een opdracht.

2 Wanneer u klaar bent met opnemen (vastleggen), selecteert u Opdrachten > Opname stoppen of drukt u op

Control+Shift+X (Windows) of Command+Shift+X (Macintosh).

281

DREAMWEAVER GEBRUIKEN

Inhoud toevoegen aan pagina's

Laatst bijgewerkt 2/5/2011

Een vastgelegde opdracht afspelen

❖ Selecteer Opdrachten > Opgenomen opdracht afspelen of druk op Control+Shift+R (Windows) of

Command+Shift+R (Macintosh).

Een vastgelegde opdracht opslaan

1 Selecteer Opdrachten > Opgenomen opdracht afspelen.

2 Selecteer de stap Opdracht uitvoeren die in de stappenlijst van het paneel Historie verschijnt, en klik vervolgens op

de knop Opslaan als opdracht.

3 Geef een naam op voor de opdracht en klik op OK.

De opdracht verschijnt in het menu Opdrachten.

282

Laatst bijgewerkt 2/5/2011

Hoofdstuk 9: Koppelingen en navigatie

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.

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.

Meer Help-onderwerpen

“Koppelingen testen in Dreamweaver” op pagina 291

Absolute, documentafhankelijke relatieve en hoofdmapafhankelijke

relatieve paden

Voor het maken van koppelingen is het belangrijk om te begrijpen hoe het bestandspad tussen het brondocument en

het doeldocument of doelmiddel 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. Door naar doelbestanden te bladeren in plaats van het pad in te typen, bent u er zeker van dat

het pad juist is.

Meer Help-onderwerpen

“Relatieve paden instellen voor nieuwe koppelingen” op pagina 287

“Nieuwe site instellen” op pagina 39

283

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

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. Voor een

afbeelding kan de volledige URL bijvoorbeeld http://www.adobe.com/support/dreamweaver/images/image1.jpg zijn.

Als u een koppeling wilt maken naar een document of middel 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 of doelmiddel zich (permanent) in dezelfde map

bevinden. U kunt documentafhankelijke relatieve paden ook gebruiken voor koppelingen naar documenten of

middelen 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 vanuit contents.html 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 vanuit contents.html een koppeling wilt maken naar index.html (in de hoofdmap, één niveau boven

contents.html), gebruikt u het relatieve pad ../index.html. Twee punten en een schuine streep (../) brengen u één

niveau hoger in de mapstructuur.

• Als u vanuit contents.html 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.

mijn_site(hoofdmap)

ondersteuning

inhoud.html

uren.html

tips.html

bronnen

catalogus.html

producten

index.html (introductiepagina)

292

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

Meer Help-onderwerpen

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

“Verbroken koppelingen herstellen” op pagina 297

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.

Meer Help-onderwerpen

“Het gedrag Snelmenu toepassen” op pagina 368

“Het gedrag Snelmenu Go toepassen” op pagina 368

Snelmenu's invoegen

1 Open een document en plaatst de invoegpositie in het documentvenster.

2 Voer een van de volgende handelingen uit:

• 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.

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.

293

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Eigenschappen en kenmerken van frames weergeven en instellen” op pagina 207

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.

Meer Help-onderwerpen

“Het gedrag Snelmenu toepassen” op pagina 368

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 volledige menu.

Navigatiebalken

Over navigatiebalken

De navigatiebalkfunctie wordt vanaf Dreamweaver CS5 niet meer ondersteund.

Als u een navigatiebalk wilt gebruiken, kunt u het beste de Spry-menubalkwidget gebruiken.

294

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

Meer Help-onderwerpen

“Werken met de menubalkwidget” op pagina 444

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.

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

maken.

• Selecteer het gereedschap Rechthoek en sleep de muisaanwijzer over de afbeelding om een rechthoekige

hotspot te maken.

• 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.

295

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

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.

2 Voer een van de volgende handelingen uit:

• 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 Voer een van de volgende handelingen uit:

• Sleep de hotspot naar een andere plaats.

• Druk op Control 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.

296

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Ongebruikte bestanden opsporen en verwijderen” op pagina 81

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.

3 Begin de controle door een van de volgende handelingen uit te voeren:

• Klik met rechtermuisknop (Windows) of houd Control ingedrukt en 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).

297

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

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.

298

DREAMWEAVER GEBRUIKEN

Koppelingen en navigatie

Laatst bijgewerkt 2/5/2011

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.

299

Laatst bijgewerkt 2/5/2011

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. Live weergave biedt een nauwkeurigere weergave en geeft u de mogelijkheid om in de

codeweergave te werken en de wijzigingen in het ontwerp te bekijken. Met de functie Voorvertoning in browser kunt

u zien hoe pagina's er in specifieke browsers uitzien.

Pagina's voorvertonen in Dreamweaver

De Live weergave

Live weergave verschilt van de traditionele ontwerpweergave van Dreamweaver in dat opzicht dat deze een niet-

bewerkbare, realistischere weergave geeft van hoe uw pagina er in een browser uitziet. De live weergave is geen

vervanging van de opdracht Voorvertoning in browser, maar is slechts een andere manier om te zien hoe uw pagina

er 'live' uitziet, zonder dat u de Dreamweaver-werkruimte moet verlaten.

Vanuit de ontwerpweergave kunt op elk moment naar de live weergave schakelen. Het schakelen naar de live weergave

houdt echter geen verband met het schakelen tussen een van de andere traditionele weergaven in Dreamweaver

(codeweergave/gesplitste weergave/ontwerpweergave). Wanneer u vanuit de ontwerpweergave naar de live-weergave

schakelt, schakelt u de ontwerpweergave gewoon van bewerkbaar naar 'live'.

Hoewel de ontwerpweergave bevriest wanneer u de live weergave activeert, kunt u de codeweergave blijven bewerken.

U kunt de code dus wijzigen en daarna de live weergave vernieuwen om het effect van uw wijzigingen te bekijken. In

de live weergave hebt u de extra mogelijkheid om live code te bekijken. De live codeweergave is te vergelijken met de

live weergave in die zin dat deze een versie van de code toont die de browser uitvoert om de pagina weer te geven. Net

als de live weergave is de live codeweergave een weergave die u niet kunt bewerken.

Een extra voordeel van de live weergave is de mogelijkheid om JavaScript te bevriezen. U kunt bijvoorbeeld naar de live

weergave schakelen en de muis boven Spry-tabelrijen houden die van kleur veranderen door de interactie van de

gebruiker. Wanneer u JavaScript bevriest, wordt de huidige status van de pagina in de live weergave bevroren. U kunt

vervolgens het CSS of JavaScript bewerken en de pagina vernieuwen om het effect van de wijzigingen te bekijken. Het

bevriezen van JavaScript in de live weergave is handig als u eigenschappen wilt bekijken en wijzigen voor de diverse

toestanden van pop-upmenu's of andere interactieve elementen die u in de traditionele ontwerpweergave niet kunt zien.

Ga naar www.adobe.com/go/dw10liveview_nl voor een video-overzicht van het technische Dreamweaver-team over

het werken met Live View.

Ga naar www.adobe.com/go/dwcs5livenav_nl voor een video-overzicht van het technische Dreamweaver-team over

het werken met Live View-navigatie.

Voor een video voor zelfstudie met Live View, verwante bestanden en de codenavigator gaat u naar

www.adobe.com/go/lrvid4044_dw_nl.

Pagina's voorvertonen in de live weergave

1 Zorg ervoor dat u in de ontwerp weergave (Weergave > Ontwerp) of Code- en ontwerpweergaven (Weergave >

Code en ontwerp) werkt.

300

DREAMWEAVER GEBRUIKEN

Pagina's voorvertonen

Laatst bijgewerkt 2/5/2011

2 Klik op de knop Live View.

3 (Optioneel) Breng wijzigingen aan in de codeweergave, in het deelvenster CSS-stijlen, in een extern CSS-stijlblad

of in een ander verwant bestand.

De opties voor het bewerken van andere gebieden (bijvoorbeeld in het deelvenster CSS-stijlen of in de

codeweergave) veranderen zodra u in Live weergave klikt, ook al kunt u niet bewerken in de live weergave.

U kunt met verwante bestanden werken (bijvoorbeeld met CSS-stijlbladen) terwijl de live weergave de focus houdt.

Daartoe opent u het verwante bestand vanaf de werkbalk Verwante bestanden, boven het document.

4 Als u wijzigingen aanbrengt in de codeweergave of in een verwant bestand, vernieuwt u Live View door op de

werkbalk Document op de knop Vernieuwen te klikken of door op F5 te drukken.

5 Als u weer naar de bewerkbare ontwerpweergave wilt terugkeren, klikt u opnieuw op de knop Live weergave.

Live code voorvertonen

De code die in de live codeweergave wordt weergegeven, komt overeen met de code die u zou zien als u de paginabron

vanuit een browser zou openen. Dergelijke paginabronnen zijn statisch, en tonen alleen de bron van de pagina vanuit

de browser. De live codeweergave is echter dynamisch, en wordt bijgewerkt op basis van uw interacties met de pagina

in de live weergave.

1 Zorg ervoor dat u in de live weergave werkt.

2 Klik op de knop Live code.

Dreamweaver toont de live code die de browser zou gebruiken om de pagina uit te voeren. De code wordt in het

geel gemarkeerd en kan niet worden bewerkt.

Met Live code worden tijdens interactie met de interactieve elementen op de pagina de dynamische wijzigingen in

de code gemarkeerd.

3 Als u markeringen voor wijzigingen in de weergave Live code wilt uitschakelen, kiest u Weergave > Live View-

opties > Wijzigingen in Live code markeren.

4 Als u weer naar de bewerkbare codeweergave wilt terugkeren, klikt u opnieuw op de knop Live code.

Als u de voorkeuren voor Live code wilt wijzigen, kiest u Bewerken > Voorkeuren (Windows) of Dreamweaver >

Voorkeuren (Macintosh OS) en selecteert u de categorie Codekleuren.

JavaScript bevriezen

Voer een van de volgende handelingen uit:

• Druk op F6

• Selecteer JavaScript bevriezen in het pop-upmenu van de live weergave.

Een informatiebalk, boven het document, toont de mededeling dat JavaScript is bevroren. Klik op de sluitkoppeling

om de informatiebalk te sluiten.

301

DREAMWEAVER GEBRUIKEN

Pagina's voorvertonen

Laatst bijgewerkt 2/5/2011

Opties van live weergave

Naast de optie JavaScript bevriezen, zijn nog enkele andere opties beschikbaar in het pop-upmenu van de knop Live

weergave of via het menu-item Weergave > Live weergave-opties.

JavaScript bevriezen Hiermee worden elementen die door JavaScript worden beïnvloed, in hun huidige toestand

bevroren.

JavaScript uitschakelen Hiermee wordt JavaScript uitgeschakeld en wordt de pagina opnieuw weergegeven zoals in

een browser waarvoor JavaScript niet is ingeschakeld.

Invoegtoepassingen uitschakelen Hiermee worden invoegtoepassingen uitgeschakeld en wordt de pagina opnieuw

weergegeven zoals in een browser waarvoor invoegtoepassingen niet zijn ingeschakeld.

Wijzigingen in Live code markeren Hiermee schakelt u markeringen voor wijzigingen in Live code in of uit.

De Live View-pagina in een nieuw tabblad bewerken Hiermee kunt u nieuwe tabbladen openen voor sitedocumenten

waar u naartoe bladert met de werkbalk Browsernavigatie of de functie Koppelingen volgen. U moet eerst naar het

document bladeren en De Live View-pagina in een nieuw tabblad bewerken selecteren voor u een nieuw tabblad kunt

maken.

Koppeling volgen Hiermee wordt de volgende koppeling waarop u klikt, actief in Live View. U kunt een koppeling

ook actief maken door Control ingedrukt te houden en in Live View op de koppeling te klikken.

Koppelingen continu volgen Hiermee maakt u de koppelingen in Live View blijvend actief totdat u de koppelingen

weer uitschakelt of de pagina sluit.

Externe bestanden automatisch synchroniseren Hiermee worden het lokale en externe bestand automatisch

gesynchroniseerd wanneer u op het pictogram Vernieuwen op de werkbalk Browsernavigatie klikt. Dreamweaver

plaatst uw bestand op de server voordat het wordt vernieuwd waardoor de bestanden worden gesynchroniseerd.

Testserver voor documentbron gebruiken Wordt voornamelijk gebruikt door dynamische pagina's (zoals

ColdFusion-pagina's), en wordt standaard geselecteerd voor dynamische pagina's. Als deze optie is geselecteerd,

gebruikt Dreamweaver de versie van het bestand op de testserver van de site als de bron voor de weergave van de live

weergave.

Lokale bestanden voor documentkoppelingen gebruiken De standaardinstelling voor niet-dynamische sites. Als deze

optie is geselecteerd voor dynamische sites die een testserver gebruiken, gebruikt Dreamweaver de lokale versies van

bestanden die aan het document zijn gekoppeld (zoals CSS- en JavaScript-bestanden) in plaats van de bestanden op de

testserver. U kunt dan lokale wijzigingen in verwante bestanden aanbrengen zodat u kunt zien hoe ze er uitzien

voordat u ze op de testserver zet. Als deze optie is uitgeschakeld, gebruikt Dreamweaver de testserverversies van

verwante bestanden.

HTTP-aanvraaginstellingen Kies deze optie om een dialoogvenster met geavanceerde instellingen te openen waarin u

waarden kunt invoeren voor de weergave van live gegevens. Klik op in het dialoogvenster op Help voor meer

informatie.

Meer Help-onderwerpen

“Overzicht van werkbalk Browsernavigatie” op pagina 11

“Schakelen tussen weergaven in het documentvenster” op pagina 18

“Verwante bestanden openen” op pagina 70

“Live-gegevens weergeven” op pagina 619

Zelfstudievideo voor live weergave

302

DREAMWEAVER GEBRUIKEN

Pagina's voorvertonen

Laatst bijgewerkt 2/5/2011

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.

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.

Meer Help-onderwerpen

“Hoofdmapafhankelijke relatieve paden” op pagina 284

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.

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.

303

DREAMWEAVER GEBRUIKEN

Pagina's voorvertonen

Laatst bijgewerkt 2/5/2011

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 Selecteer Voorvertonen met een tijdelijk bestand om een tijdelijke kopie te maken voor het bekijken van een

voorbeeld en het oplossen van fouten op de server. (Schakel deze optie uit als u het document rechtstreeks wilt

bijwerken.)

Pagina's voorvertonen op mobiele apparaten

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.

2 Een bestand openen.

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.

Meer Help-onderwerpen

“Werken met Device Central” op pagina 396

304

Laatst bijgewerkt 2/5/2011

Hoofdstuk 11: Werken met paginacode

Algemene informatie over coderen in Dreamweaver

Meer Help-onderwerpen

“Coderingstips” op pagina 316

“Codeervoorkeuren instellen” op pagina 311

“Sneltoetsen aanpassen” op pagina 310

“Pagina's XHTML-compatibel maken” op pagina 339

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

“Zoekpatronen opslaan en terughalen” op pagina 331

“De werkruimte optimaliseren voor visuele ontwikkeling” op pagina 577

“Databaserecords weergeven” op pagina 610

Ondersteunde talen

Naast tekstverwerkingsmogelijkheden biedt Adobe® Dreamweaver® CS5 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)

• VBScript (voor ASP)

• C# en Visual Basic (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.

Ongeldige opmaak

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.

Opmerking: De optie om ongeldige code in de weergave Code te markeren, is standaard uitgeschakeld. Als u de optie wilt

inschakelen, gaat u naar de codeweergave (Weergave > Code) en selecteert u Weergave > Codeweergaveopties >

Ongeldige code markeren.

305

DREAMWEAVER GEBRUIKEN

Werken met paginacode

Laatst bijgewerkt 2/5/2011

U kunt ook voorkeuren instellen voor het automatisch herschrijven van diverse soorten ongeldige code wanneer u een

document opent.

Automatische codewijzigingen

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.

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 overlapt met een

andere tag (bijvoorbeeld

<MyNewTag><em>text</MyNewTag></em>), markeert Dreamweaver deze als fout maar

wordt de code niet herschreven.

• 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.

XHTML-code

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:

306

DREAMWEAVER GEBRUIKEN

Werken met paginacode

Laatst bijgewerkt 2/5/2011

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 als volgt het namespace-kenmerk toe aan het html-element:

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.

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 HTML-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 of de begintag

moet eindigen op

/>. <br> is bijvoorbeeld niet geldig. De juiste vorm

<br></br> of <br/>. De volgende elementen zijn lege

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 lege elementen met een spatie ingevoegd voor 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 <a id="section1"

name="intro"> 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.

307

DREAMWEAVER GEBRUIKEN

Werken met paginacode

Laatst bijgewerkt 2/5/2011

Gewone uitdrukkingen

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 wanneer 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-elementen 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

ontbrekende

alt-kenmerken.

Teken Vindt Voorbeeld

^ Begin van invoer of regel. Met

^T vindt u de “T” in “Terug naar 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 één of 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 exact 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”

{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”

XHTML-vereiste Acties die Dreamweaver uitvoert

347

DREAMWEAVER GEBRUIKEN

Werken met paginacode

Laatst bijgewerkt 2/5/2011

Een script bewerken

1 Selecteer de scriptmarkering.

2 Klik in de eigenschappencontrole op de knop Bewerken.

Het script verschijnt in het dialoogvenster Scripteigenschappen.

Als u een koppeling naar een extern scriptbestand had toegevoegd, wordt het bestand geopend in de codeweergave

waar u 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.

Meer Help-onderwerpen

“Scripts schrijven en bewerken in de ontwerpweergave” op pagina 346

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 364 voor meer informatie.

348

DREAMWEAVER GEBRUIKEN

Werken met paginacode

Laatst bijgewerkt 2/5/2011

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.

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, copyright of trefwoorden. Deze tags kunnen ook worden gebruikt om informatie door te geven aan de server,

zoals de vervaldatum, het vernieuwingsinterval en de POWDER-classificatie voor de pagina. (POWDER, het Protocol

for Web Description Resources, 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).

349

DREAMWEAVER GEBRUIKEN

Werken met paginacode

Laatst bijgewerkt 2/5/2011

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.

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

catering

sportevenementen in Haarlem, Noord-Holland of webpagina's ontwerpen tegen redelijke prijzen voor

klanten wereldwijd).

442

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

A. Tabblad in accordeonpaneel B. Inhoud van accordeonpaneel C. Accordeonpaneel (geopend)

De standaard-HTML voor de accordeonwidget 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 accordeonwidget kan een willekeurig

aantal afzonderlijke panelen bevatten. De HTML voor de accordeonwidget 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 de accordeonwidget, waaronder een volledige anatomie van de code van

de accordeonwidget, gaat u naar www.adobe.com/go/learn_dw_spryaccordion_nl.

Een zelfstudie over werken met de accordeonwidget vindt u op www.adobe.com/go/vid0167_nl.

De accordeonwidget invoegen en bewerken

Over de accordeonwidget

❖ Kies Invoegen > Spry > Spry-accordeon.

Opmerking: U kunt een accordeonwidget ook invoegen met behulp van de categorie Spry in het paneel Invoegen.

Een paneel toevoegen aan een accordeonwidget

1 Selecteer een accordeonwidget 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 accordeonwidget

1 Selecteer een accordeonwidget 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 om het in de ontwerpweergave te openen, en klik op het

oogpictogram dat rechts van de tab wordt weergegeven.

443

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

• Selecteer een accordeonwidget 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 accordeonwidget 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.

De accordeonwidget aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een accordeonwidget kunt uitvoeren, worden

aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de accordeonwidget wijzigen en een accordeon

maken die naar uw eigen smaak is opgemaakt.

Raadpleeg het artikel Quick guide to styling Spry tabbed panels, accordions, and collapsible panels van David Powers

voor informatie over het wijzigen van de kleuren van de accordeonwidget.

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-

accordeonwidget maakt. Dit bestand bevat ook informatie met commentaar over diverse stijlen die van toepassing zijn

op de widget, dus misschien kunt u ook dit bestand bekijken.

Hoewel u de regels voor de accordeonwidget gemakkelijk rechtstreeks in het CSS-bestand kunt bewerken, kunt u ook

het deelvenster CSS-stijlen gebruiken om de CSS van een accordeon te bewerken. Het deelvenster CSS-stijlen is handig

om de CSS-klassen te zoeken die aan de verschillende onderdelen van de widget zijn toegewezen, met name als u de modus

Huidig van het paneel gebruikt.

Meer Help-onderwerpen

“Het deelvenster CSS-stijlen in de modus Huidig” op pagina 132

Tekst opmaken van accordeonwidget

U kunt de tekst van een accordeonwidget opmaken door eigenschappen in te stellen voor de gehele

accordeoncontainer of voor de componenten van de specifieke widget.

❖ Als u de tekstopmaak van een accordeonwidget wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende

CSS-regel op te zoeken. Daarna voegt u uw eigen tekstopmaakeigenschappen en -waarden toe:

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;

444

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

De achtergrondkleur wijzigen van accordeonwidget

❖ Als u de achtergrondkleuren van verschillende delen van een accordeonwidget 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:

De breedte van een accordeon beperken

Standaard wordt de accordeonwidget opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen. U

kunt de breedte van een accordeonwidget 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 de accordeonwidget.

U vindt de regel ook door de accordeonwidget te selecteren en het deelvenster 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 de menubalkwidget

Over de menubalkwidget

Een menubalkwidget 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 menubalkwidgets gebruiken: verticale en horizontale. In het volgende voorbeeld

ziet u een horizontale menubalkwidget, waarvan het derde menu-item is opengeklapt:

Te wijzigen deel van widget 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 de

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)

445

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Menubalkwidget (bestaat uit <ul>, <li> en <a>-tags)

A. Menu-item heeft vervolgmenu B. Vervolgmenu-item heeft vervolgmenu

De HTML voor de menubalkwidget 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 de menubalkwidget, waaronder een volledige anatomie van de code van

de menubalkwidget, 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.

Meer Help-onderwerpen

Zelfstudie over Spry-menubalk

De menubalkwidget invoegen en bewerken

De menubalkwidget invoegen

1 Kies Invoegen > Spry > Spry-menubalk.

2 Selecteer Horizontaal of Verticaal en klik op OK.

Opmerking: U kunt een menubalkwidget ook invoegen met behulp van de categorie Spry in het paneel Invoegen.

Opmerking: De Spry-menubalkwidget gebruikt DHTML-lagen om delen van HTML over andere delen heen weer te

geven. Als uw pagina inhoud bevat die met Adobe Flash is gemaakt, kan dit problemen geven omdat SWF-films altijd

over alle andere DHTML-lagen heen worden weergegeven. In dat geval is het dus mogelijk dat het SWF-bestand over uw

vervolgmenu's heen wordt weergegeven. U kunt deze situatie omzeilen door de parameters voor de SWF-film te wijzigen

zodat

wmode="transparent" wordt gebruikt. Dit is heel eenvoudig; u selecteert het SWF-bestand in het venster

Document en stelt de optie

wmode in de eigenschappencontrole in op transparant. 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

de menubalkwidget.

Een hoofdmenu-item toevoegen

1 Selecteer een menubalkwidget 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.

A B

446

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Een vervolgmenu-item toevoegen

1 Selecteer een menubalkwidget 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 menubalkwidget 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 menubalkwidget 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 menubalkwidget in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het menu-item waarvan u

de tekst wilt wijzigen.

3 Verander de tekst in het tekstvak.

Een menu-item koppelen

1 Selecteer een menubalkwidget 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 menubalkwidget 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.

447

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

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 menubalkwidget 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

U kunt de opmaak van een menubalkwidget uitzetten zodat de HTML-structuur van de widget in de ontwerpweergave

beter 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 menubalkwidget in het documentvenster.

2 Klik op de knop Stijlen uitschakelen in de eigenschappencontrole (Venster > Eigenschappen).

De richting van een menubalkwidget wijzigen

U kunt de richting van een menubalkwidget 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 horizontale menubalkwidget gewijzigd in een verticale menubalkwidget.

1 In Dreamweaver wordt de pagina geopend die een horizontale menubalkwidget bevat.

2 Voeg een verticale menubalkwidget 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.

Opmerking: Als de site al ergens anders een verticale menubalkwidget 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 deelvenster 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:

448

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

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 menubalkwidgets meer bevat, verwijdert u de koppelingen naar

het voormalige bestand MenuBarHorizontal.css in de kop van het document.

8 Sla de pagina op.

De menubalkwidget aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een menubalkwidget kunt uitvoeren, worden

aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de menubalkwidget 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.

Raadpleeg het artikel Customizing a Spry Menu Bar van David Powers voor een zelfstudie over het uitvoeren van de

meestvoorkomende opmaaktaken.

Raadpleeg het artikel Spry-menubalken aanpassen in Dreamweaver van Ryan Grabenstein voor meer webbronnen

over het aanpassen van de menubalkwidget.

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-

menubalkwidget 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 de widget kunt toepassen.

Hoewel u de regels voor de menubalkwidget gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken,

kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van een menubalk te bewerken. Het deelvenster CSS-

stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van de widget zijn toegewezen, met

name als u de modus Huidig van het paneel gebruikt.

Meer Help-onderwerpen

“Het deelvenster CSS-stijlen in de modus Huidig” op pagina 132

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;

449

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

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 Verwijder 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 muisaanwijzer

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

muisaanwijzer 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.MenuBarItemSubmenuHover

background-color: #33C;

Te wijzigen stijl CSS-regel voor verticale of horizontale

menubalk

Relevante eigenschappen en

standaardwaarden

450

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

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 de inklapbaar-deelvensterwidget

Over de inklapbaar-deelvensterwidget

Een inklapbaar-deelvensterwidget is een deelvenster dat inhoud opslaat op een vrij beperkte ruimte. Gebruikers

kunnen de inhoud in het inklapbare paneel verbergen of weergeven door op de tab van de widget te klikken. In het

volgende voorbeeld ziet u een inklapbaar-deelvensterwidget, opengeklapt en dichtgeklapt:

A. Uitgevouwen B. Samengevouwen

De HTML voor de inklapbaar-deelvensterwidget bestaat uit een buitenste div-tag die de div-tag voor de inhoud en

div-tag voor de tabcontainer bevat. De HTML voor de inklapbaar-deelvensterwidget 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 de inklapbaar-deelvensterwidget, waaronder een volledige anatomie

van de code van de inklapbaar-deelvensterwidget, gaat u naar www.adobe.com/go/learn_dw_sprycollapsiblepanel_nl.

De inklapbaar-deelvensterwidget invoegen en bewerken

De inklapbaar-deelvensterwidget invoegen

❖ Kies Invoegen > Spry > Inklapbaar Spry-paneel.

Opmerking: U kunt een inklapbaar-deelvensterwidget ook invoegen met behulp van de categorie Spry in het paneel

Invoegen.

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-deelvensterwidget in het documentvenster en kies Geopend of Gesloten in het pop-

upmenu Weergave in de eigenschappencontrole (Venster > Eigenschappen).

451

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

De standaardtoestand van een inklapbaar-deelvensterwidget instellen

U kunt instellen welke toestand (geopend of gesloten) een inklapbaar-deelvensterwidget standaard heeft wanneer de

webpagina in een browser wordt geopend.

1 Selecteer een inklapbaar-deelvensterwidget in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer Geopend of Gesloten in het pop-

upmenu Standaardtoestand.

Animatie voor de inklapbaar-deelvensterwidget in- of uitschakelen

Wanneer u animatie voor een inklapbaar-deelvensterwidget inschakelt, wordt het deelvenster 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-deelvensterwidget in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel Animatie inschakelen in of uit.

De inklapbaar-deelvensterwidget aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een inklapbaar-deelvensterwidget kunt

uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget Inklapbaar

deelvenster wijzigen en een inklapbaar deelvenster maken dat naar uw eigen smaak is opgemaakt.

Raadpleeg het artikel Quick guide to styling Spry tabbed panels, accordions, and collapsible panels van David Powers

voor informatie over het wijzigen van de kleur van de widget Inklapbaar deelvenster.

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

de widget kunt toepassen.

Hoewel u de regels voor de inklapbaar-deelvensterwidget gemakkelijk rechtstreeks in het bijbehorende CSS-bestand

kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van een inklapbaar paneel te bewerken.

Het deelvenster CSS-stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van de widget zijn

toegewezen, met name als u de modus Huidig van het paneel gebruikt.

Meer Help-onderwerpen

“Het deelvenster CSS-stijlen in de modus Huidig” op pagina 132

Tekst opmaken van inklapbaar-deelvensterwidget

U kunt de tekst van een inklapbaar-deelvensterwidget opmaken door eigenschappen in te stellen voor de gehele

inklapbaar-deelvenstercontainer of voor de componenten van de specifieke widget.

❖ Als u de tekstopmaak van een inklapbaar-deelvensterwidget wilt wijzigen, gebruikt u de volgende tabel om de

desbetreffende CSS-regel op te zoeken. Daarna voegt u uw eigen tekstopmaakeigenschappen en -waarden toe:

452

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

De achtergrondkleur wijzigen van een inklapbaar-deelvensterwidget

❖ Als u de achtergrondkleuren van verschillende delen van een inklapbaar-deelvensterwidget 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 een inklapbaar paneel beperken

Standaard wordt de inklapbaar-deelvensterwidget opengeklapt zodat de beschikbare ruimte geheel in beslag wordt

genomen. U kunt de breedte van een inklapbaar-deelvensterwidget echter beperken door een breedte-eigenschap voor

de inklapbaar-deelvenstercontainer 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 de inklapbaar-deelvensterwidget.

U vindt de regel ook door de inklapbaar-deelvensterwidget te selecteren en het deelvenster 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 de widget deelvensters met tabs

Over de widget deelvensters met tabs

Een widget deelvensters met tabs is een reeks panelen die inhoud opslaat op een vrij beperkte ruimte. Sitebezoekers

kunnen de inhoud in de deelvensters met tabs verbergen of weergeven door op de tab te klikken van het paneel dat ze

willen bekijken. De deelvensters van de widget worden geopend naarmate de bezoeker op de verschillende tabs klikt.

In een widget deelvensters met tabs is maar één deelvenster tegelijk geopend. In het volgende voorbeeld ziet u een

widget deelvensters met tabs, waarvan het derde deelvenster is geopend:

Te wijzigen stijl Relevante CSS-regel Voorbeeld van toe te voegen of te wijzigen

eigenschappen en waarden

Tekst in het gehele inklapbare paneel .CollapsiblePanel font: Arial; font-size:medium;

Tekst op de paneeltab .CollapsiblePanelTab font: bold 0.7em sans-serif; (Dit is de standaardwaarde)

Tekst in het inhoudspaneel .CollapsiblePanelContent 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)

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 muisaanwijzer eroverheen

beweegt

.CollapsiblePanelTabHover,

.CollapsiblePanelOpen

.CollapsiblePanelTabHover

background-color: #CCC; (Dit is de

standaardwaarde)

453

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

A. Tab B. Inhoud C. Widget deelvensters met tabs D. Paneel met tabs

De HTML-code voor de widget deelvensters 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 de widget

deelvensters met tabs bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget

deelvensters met tabs.

Voor een uitvoerige uitleg van de werking van de widget deelvensters met tabs, waaronder een volledige anatomie van

de code van de widget deelvensters met tabs, gaat u naar www.adobe.com/go/learn_dw_sprytabbedpanels_nl.

De widget deelvensters met tabs invoegen en bewerken

De widget deelvensters met tabs invoegen

❖ Kies Invoegen > Spry > Spry-deelvensters met tabs.

Opmerking: U kunt een widget deelvensters met tabs ook invoegen met behulp van de categorie Spry in het paneel

Invoegen.

Een paneel toevoegen aan de widget deelvensters met tabs

1 Selecteer een widget deelvensters 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 deelvenster verwijderen uit een widget deelvensters met tabs

1 Selecteer een widget deelvensters 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 widget deelvensters 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 widget deelvensters met tabs in het documentvenster.

454

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

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 deelvenster van de widget deelvensters met tabs standaard is geopend wanneer de pagina in een

browser wordt geopend.

1 Selecteer een widget deelvensters met tabs in het documentvenster.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer het paneel dat u standaard wilt openen

in het pop-upmenu Standaardpaneel.

De widget deelvensters met tabs aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget deelvensters met tabs kunt

uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget Deelvensters met

tabs wijzigen en een widget maken die naar uw eigen smaak is opgemaakt.

Raadpleeg het artikel Quick guide to styling Spry tabbed panels, accordions, and collapsible panels van David Powers

voor informatie over het wijzigen van de kleuren van de widget Deelvensters met tabs.

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-

deelvensters met tabs maakt. Dit bestand bevat ook nuttige informatie over diverse stijlen die u op de widget kunt

toepassen.

Hoewel u de regels voor de widget deelvensters met tabs gemakkelijk rechtstreeks in het bijbehorende CSS-bestand

kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van de widget te bewerken. Het

deelvenster CSS-stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van dee widget zijn

toegewezen, met name als u de modus Huidig van het paneel gebruikt.

Meer Help-onderwerpen

“Het deelvenster CSS-stijlen in de modus Huidig” op pagina 132

Tekst opmaken van de widget deelvensters met tabs

U kunt de tekst van een widget deelvensters met tabs opmaken door eigenschappen in te stellen voor de gehele

objectcontainer met deelvensters met tabs of voor de componenten van de specifieke widget.

❖ Als u de tekstopmaak van een widget deelvensters 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:

Te wijzigen tekst Relevante CSS-regel Voorbeeld van toe te voegen

eigenschappen en waarden

Tekst in de hele widget .TabbedPanels font: Arial; font-size:medium;

Tekst op de paneeltabs .TabbedPanelsTabGroup of .TabbedPanelsTab font: Arial; font-size:medium;

Tekst in de inhoudspanelen .TabbedPanelsContentGroup of

.TabbedPanelsContent

font: Arial; font-size:medium;

455

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

De achtergrondkleur wijzigen van een widget deelvensters met tabs

❖ Als u de achtergrondkleuren van verschillende delen van een widget deelvensters 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 deelvensters met tabs beperken

Standaard wordt de widget deelvensters met tabs opengeklapt zodat de beschikbare ruimte geheel in beslag wordt

genomen. U kunt de breedte van een widget deelvensters 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 de widget Deelvensters met tabs.

U vindt de regel ook door de widget deelvensters met tabs te selecteren en het deelvenster 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 de knopinfo-widget

Over de knopinfo-widget

Met de Spry-knopinfo-widget wordt aanvullende informatie weergegeven wanneer een gebruiker met de muis over

een bepaald element op een webpagina beweegt. De aanvullende inhoud verdwijnt wanneer de gebruiker niet meer

boven het element beweegt. U kunt ook knopinfo instellen om langer geopend te blijven zodat gebruikers iets met de

inhoud van de knopinfo kunnen doen.

Een knopinfo-widget bestaat uit de volgende drie elementen:

• De knopinfo-container. Dit is het element dat het bericht of de inhoud bevat die u wilt weergeven wanneer de

gebruiker de knopinfo activeert.

• De pagina-elementen die de knopinfo activeren.

• Het constructor-script. Dit is JavaScript dat Spry opdraagt de knopinfo-functionaliteit te maken.

Wanneer u een knopinfo-widget invoegt, maakt Dreamweaver een knopinfo-container met behulp van

div-tags en

omhult het “trigger”-element (het pagina-element dat de knopinfo activeert) met

span-tags. Deze tags worden

standaard door Dreamweaver gebruikt, maar de tags voor het knopinfo- en het trigger-element kunnen alle tags zijn,

mits deze zich in het hoofdtekstgedeelte van de pagina bevinden.

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)

456

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Denk aan de volgende punten wanneer u met de knopinfo-widget werkt:

• Een geopende knopinfo wordt gesloten voordat de volgende wordt geopend.

• Knopinfo blijft in beeld zolang de gebruiker boven het triggergebied beweegt.

• Er zijn geen beperkingen aan het soort tags dat u kunt gebruiken voor triggers en voor knopinfo-inhoud.

(Elementen op blokniveau zijn echter altijd aan te raden, om mogelijke weergaveproblemen tussen verschillende

browsers te voorkomen.)

• Standaard wordt de knopinfo 20 pixels rechtsonder de cursor weergegeven. U kunt de opties voor horizontale en

verticale verschuiving in de eigenschappencontrole gebruiken om een ander weergavepunt op te geven.

• Op dit moment is het nog niet mogelijk om knopinfo weer te geven terwijl een pagina in een browser wordt geladen.

Voor de knopinfo-widget is bijzonder weinig CSS nodig. Spry gebruikt JavaScript om de knopinfo weer te geven, te

verbergen en te plaatsen. Andere stijlkenmerken voor de knopinfo kunt u met standaard-CSS-technieken bereiken,

volgens de vereisten van de pagina. De enige regel in het standaard-CSS-bestand is een oplossing voor problemen met

Internet Explorer 6 zodat de knopinfo boven formulierelementen of Flash-objecten wordt weergegeven.

Zie www.adobe.com/go/learn_dw_sprytooltip_nl voor een uitgebreidere uitleg van de werking van de Spry-knopinfo-

widget, inclusief een volledige anatomie van de widgetcode.

Zie www.adobe.com/go/lrvid4046_dw_nl als u een video wilt bekijken waarin wordt uitgelegd hoe u met de Spry-

knopinfo-widget werkt.

De knopinfo-widget invoegen

❖ Selecteer Invoegen > Spry > Spry-knopinfo.

Opmerking: U kunt een knopinfo-widget ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.

Hiermee wordt een nieuwe knopinfo-widget met een container voor de inhoud van de knopinfo ingevoegd, plus een

tijdelijke aanduiding in de vorm van een zin, die als trigger voor de knopinfo dient.

U kunt ook een bestaand element op de pagina selecteren (bijvoorbeeld een afbeelding) en vervolgens de knopinfo

invoegen. Wanneer u dit doet, werkt het door u geselecteerde element als de nieuwe trigger van de knopinfo. De

selectie moet een volledig tag-element zijn (bijvoorbeeld een

img-tag of een p-tag), zodat Dreamweaver er een id aan

kan toewijzen, als dat nog niet is gebeurd.

Opties voor knopinfo-widget bewerken

U kunt opties instellen waarmee u het gedrag van de knopinfo-widget kunt aanpassen.

1 Beweeg het invoegpunt over of plaats het in de inhoud van de knopinfo op de pagina.

2 Klik op de blauwe tab van de knopinfo-widget om deze te selecteren.

3 Stel de gewenste opties in de eigenschappencontrole van de knopinfo-widget in.

Naam De naam van de knopinfo-container. De container bevat de inhoud van de knopinfo. Standaard gebruikt

Dreamweaver een

div-tag als de container.

Trigger Het element op de pagina dat de knopinfo activeert. Standaard voegt Dreamweaver als trigger een tijdelijke

aanduiding in de vorm van een zin in, omgeven door

span-tags, maar u kunt elk element op de pagina met een unieke

id selecteren.

Muis volgen Wanneer u deze optie selecteert, volgt de knopinfo de muis wanneer deze over het trigger-element

beweegt.

457

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Verbergen bij muis buiten Wanneer u deze optie selecteert, blijft de knopinfo geopend zolang de muis over de

knopinfo beweegt (zelfs als de muis het trigger-element verlaat). Het is handig om de knopinfo op de voorgrond te

houden als deze nog koppelingen of andere interactieve elementen bevat. Als deze optie niet is geselecteerd, sluit het

knopinfo-element wanneer de muis het trigger-gebied verlaat.

Horizontale verschuiving Berekent de horizontale positie van de knopinfo ten opzichte van de muis. De

verschuivingswaarde is in pixels, en de standaardverschuiving is 20 pixels.

Verticale verschuiving Berekent de verticale positie van de knopinfo ten opzichte van de muis. De

verschuivingswaarde is in pixels, en de standaardverschuiving is 20 pixels

Vertraging tonen De vertraging in milliseconden voordat de knopinfo verschijnt nadat deze het trigger-element is

binnengegaan. De standaardwaarde is 0.

Vertraging verbergen De vertraging in milliseconden voordat de knopinfo verdwijnt nadat deze het trigger-element

heeft verlaten. De standaardwaarde is 0.

Effect Het type effect dat u wilt gebruiken wanneer de knopinfo verschijnt. Met Luxaflex worden jaloezieën

nagebootst die omhoog en omlaag beweegt om de knopinfo te verbergen en te tonen. Met Vervagen wordt de knopinfo

vervaagd en weer getoond. De standaardinstelling is Geen.

Werken met de widget groep met

validatiekeuzerondjes

Over de widget groep met validatiekeuzerondjes

De widget groep met validatiekeuzerondjes is een groep keuzerondjes met validatieondersteuning voor de selectie. De

widget bevestigt de selectie van een keuzerondje in de groep.

Hierna volgt een voorbeeld van een widget groep met validatiekeuzerondjes in verschillende staten.

A. Foutberichten bij de widget groep met validatiekeuzerondjes B. Widget groep met validatiekeuzerondjes

De widget groep met validatiekeuzerondjes bevat naast de oorspronkelijke staat nog drie staten: geldig, ongeldig en

vereiste waarde. U kunt de eigenschappen van deze staten wijzigen door het bijbehorende CSS-bestand te bewerken

(SpryValidationRadio.css), afhankelijk van de gewenste validatieresultaten. Een widget groep met

validatiekeuzerondjes kan op verschillende momenten valideren: wanneer de gebruiker buiten de widget klikt, terwijl

de gebruiker selecties maakt of wanneer de gebruiker het formulier probeert te verzenden.

Status bij openen Wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het formulier opnieuw

instelt.

458

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Toestand Geldig Wanneer de gebruiker een selectie maakt en het formulier kan worden verzonden.

Toestand Vereist Wanneer de gebruiker geen vereiste selectie heeft gemaakt.

Toestand Ongeldig Wanneer de gebruiker een keuzerondje selecteert waarvan de waarde niet acceptabel is.

Wanneer een widget groep met validatiekeuzerondjes door een handeling van een gebruiker een van deze staten

aanneemt, past de Spry-frameworklogica tijdens de uitvoering een specifieke CSS-klasse toe op de HTML-container

voor de widget. Als een gebruiker bijvoorbeeld een formulier probeert te verzenden, maar geen selecties heeft gemaakt,

past Spry een klasse op de widget toe waardoor het foutbericht “Selecteer een optie” wordt weergegeven. De regels die

de opmaak en weergavestaten van foutberichten bepalen, staan in het bestand dat bij de widget hoort,

SpryValidationRadio.css.

De standaard-HTML-code voor de widget groep met validatiekeuzerondjes, meestal in een formulier, bestaat uit een

container

span-tag om de tag input type="radio" van de groep keuzerondjes heen. De HTML-code voor de widget

Groep met validatiekeuzerondjes bevat ook

script-tags in de koptekst van het document en na de HTML-code van

de widget.

Zie www.adobe.com/go/learn_dw_spryradio_nl voor een uitgebreidere uitleg van de werking van de widget Groep

met validatiekeuzerondjes, inclusief een volledige anatomie van de code van de widget Groep met

validatiekeuzerondjes.

De widget groep met validatiekeuzerondjes invoegen en bewerken

De widget groep met validatiekeuzerondjes invoegen

1 Selecteer Invoegen > Spry > Groep met Spry-validatiekeuzerondjes.

2 Typ in het tekstvak Naam een naam voor de groep keuzerondjes.

3 Keuzerondjes toevoegen aan of verwijderen uit de groep door op de knop plus (+) of minus (-) te klikken.

4 Klik in de kolom Label op de naam van een keuzerondje om het bewerkbaar te maken en wijs een unieke naam toe

aan elk keuzerondje.

5 Klik in de kolom Waarde op een waarde om deze bewerkbaar te maken en wijs een unieke waarde toe aan elk

keuzerondje.

6 (Optioneel) Klik op een keuzerondje of op de bijbehorende waarde om een specifieke rij te selecteren en klik op de

pijl omhoog of omlaag om de rij naar boven of naar beneden te verplaatsen.

7 Selecteer een lay-outtype voor de groep keuzerondjes.

Regeleinden Plaatst elk keuzerondje op een afzonderlijke regel met behulp van regeleinden (br-tags).

Tabel Plaatst elk keuzerondje op een afzonderlijke regel met behulp van de individuele rijen in de tabel (tr-tags).

8 Klik op OK.

Opmerking: U kunt een widget groep keuzerondjes ook invoegen met behulp van de categorie Spry in het deelvenster

Invoegen.

Opgeven wanneer validatie wordt uitgevoerd

U kunt opgeven wanneer de validatie wordt uitgevoerd; op het moment dat de gebruiker buiten de widget klikt, tijdens

het opgeven van selecties of wanneer de gebruiker het formulier probeert te verzenden.

1 Selecteer een widget groep validatiekeuzerondjes in het documentvenster door op de blauwe tab te klikken.

459

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie die aangeeft wanneer de

validatie moet worden uitgevoerd. U kunt alle opties of alleen Verzenden selecteren.

Vervagen Valideert zodra de gebruiker buiten de groep keuzerondjes klikt.

Wijzigen Valideert wanneer de gebruiker selecties maakt.

Verzenden Valideert op het moment dat de gebruiker het formulier probeert te verzenden. De optie Verzenden is

standaard geselecteerd en kan niet worden uitgeschakeld.

Widgettoestanden weergeven in de ontwerpweergave

1 Selecteer een widget groep validatiekeuzerondjes in het documentvenster door op de blauwe tab te klikken.

2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-

upmenu Voorvertoningsstatus. Selecteer bijvoorbeeld Bij openen om de widget in de status bij openen weer te

geven.

Status wijziging vereist voor keuzerondjes

Standaard moet de gebruiker bij een widget groep met validatiekeuzerondjes een selectie maken alvorens het formulier

te verzenden. U kunt selecties echter optioneel maken voor de gebruiker.

1 Selecteer een widget groep validatiekeuzerondjes in het documentvenster door op de blauwe tab te klikken.

2 Schakel in de eigenschappencontrole (Venster > Eigenschappen) de optie Vereist in.

Een lege of ongeldige waarde opgeven

U kunt een waarde opgeven die als leeg of ongeldig wordt geregistreerd als de gebruiker een keuzerondje selecteert dat

aan een van die waarden is gekoppeld. Als de gebruiker een keuzerondje met een lege waarde selecteert, geeft de

browser het foutbericht “Selecteer een optie.” Als de gebruiker een keuzerondje met een ongeldige waarde selecteert,

geeft de browser het foutbericht “Selecteer een geldige waarde.”

Widget groep met keuzerondjes met een keuzerondje met een lege waarde.

1 Selecteer het keuzerondje in de widget groep met keuzerondjes dat u wilt gebruiken als leeg of ongeldig

keuzerondje. Wanneer u lege of ongeldige waarden voor de widget opgeeft, moet u eerst bijbehorende keuzerondjes

maken waaraan die waarden al zijn toegewezen.

2 Wijs in de eigenschappencontrole voor keuzerondjes (Venster > Eigenschappen) aan het keuzerondje een

geselecteerde waarde toe. Als u een keuzerondje met een lege waarde wilt maken, typt u geen in het vak

Ingeschakelde waarde. Als u een keuzerondje met een ongeldige waarde wilt maken, typt u ongeldig in het vak

Ingeschakelde waarde.

3 Selecteer de gehele widget groep met validatiekeuzerondjes door op de blauwe tab van de widget te klikken.

4 Geef in de eigenschappencontrole lege of ongeldige waarden op. Als u een widget wilt maken die het foutbericht

voor lege waarden 'Selecteer een optie' weergeeft, typt u geen in het vak Lege waarde. Als u een widget wilt maken

die het foutbericht voor ongeldige waarden 'Selecteer een geldige waarde' weergeeft, typt u ongeldig in het vak

Ongeldige waarde.

460

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Zowel aan het keuzerondje zelf als aan de widget groep met keuzerondjes moeten de waarden geen of ongeldig zijn

toegewezen, anders worden deze berichten niet juist weergegeven.

De widget groep keuzerondjes aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget groep met validatiekeuzerondjes

kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget groep met

validatiekeuzerondjes wijzigen en een widget maken die naar uw eigen smaak is opgemaakt. Zie

www.adobe.com/go/learn_dw_spryradio_custom_nl voor een uitgebreidere lijst met opmaaktaken.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand

SpryValidationRadio.css. Dreamweaver slaat het bestand SpryValidationRadio.css op in de map SpryAssets van uw

site wanneer u een widget groep met Spry-validatiekeuzerondjes maakt. Het is wellicht interessant om dit bestand te

raadplegen omdat het nuttige informatie bevat over de diverse stijlen die u op de widget kunt toepassen.

Hoewel u de regels voor de widget groep met validatiekeuzerondjes gemakkelijk rechtstreeks in het bijbehorende CSS-

bestand kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van de widget te bewerken. Het

deelvenster 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.

Meer Help-onderwerpen

“Het deelvenster CSS-stijlen in de modus Huidig” op pagina 132

Een widget groep met validatiekeuzerondjes opmaken (algemene instructies)

1 Open het bestand SpryValidationRadio.css.

2 Ga naar de CSS-regel voor het gedeelte van de widget dat u wilt wijzigen. Als u bijvoorbeeld de achtergrondkleur

van de vereiste status van de widget groep keuzerondjes wilt wijzigen, bewerkt u de

radioRequiredState-regel in

het bestand SpryValidationRadio.css.

3 Breng de gewenste wijzigingen in de CSS-regel aan en sla het bestand op.

Het bestand SpryValidationRadio.css bevat een uitgebreid commentaar, waarin de code en het doel van bepaalde

regels worden uitgelegd. Zie het commentaar in het bestand voor meer informatie.

Tekst opmaken van het foutbericht voor widget groep met validatiekeuzerondjes

Standaard worden foutberichten voor de widget groep met validatiekeuzerondjes rood weergegeven met een effen

rand van 1 pixel breed om de tekst heen.

❖ Als u de tekstopmaak van de foutberichten voor de widget groep met validatiekeuzerondjes wilt wijzigen, kunt u

de desbetreffende CSS-regel aan de hand van de volgende tabel vinden. Vervolgens wijzigt u de

standaardeigenschappen of voegt u uw eigen tekstopmaakeigenschappen en -waarden toe.

Op te maken tekst Relevante CSS-regel Relevante eigenschappen om te wijzigen

Tekst van foutbericht .radioRequiredState .radioRequiredMsg,

.radioInvalidState .radioInvalidMsg

kleur: #CC3333; rand: 1px solid #CC3333;

461

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Werken met de widget tekstveld voor validatie

Over de widget tekstveld voor validatie

Een Spry-widget tekstveld voor validatie is een tekstveld dat geldige of ongeldige toestanden weergeeft wanneer de

sitebezoeker tekst invoert. U kunt bijvoorbeeld een widget 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 widget tekstveld voor validatie:

A. Widget tekstveld, tip geactiveerd B. Widget tekstveld, toestand Geldig C. Widget tekstveld, toestand Ongeldig D. Widget tekstveld, toestand

Vereist

De widget 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. Een widget tekstveld voor validatie kan op verschillende momenten valideren, bijvoorbeeld

op het moment dat de bezoeker buiten de widget klikt, tijdens het invoeren van de informatie of wanneer de bezoeker

het formulier probeert te verzenden.

Status bij openen De toestand van de widget wanneer de pagina in de browser wordt geladen of wanneer de gebruiker

het formulier opnieuw instelt.

Toestand Focus De toestand van de widget wanneer de gebruiker de invoegpositie in de widget plaatst.

Toestand Geldig De toestand van de widget wanneer de gebruiker informatie correct heeft ingevoerd en het formulier

kan worden verzonden.

Toestand Ongeldig De toestand van de widget wanneer de gebruiker tekst in een ongeldige notatie heeft ingevoerd.

(Bijvoorbeeld 07 voor het jaartal in plaats van 2007).

Toestand Vereist De toestand van de widget wanneer de gebruiker geen tekst heeft ingevoerd in een verplicht

tekstveld.

Toestand Minimum aantal tekens De toestand van de widget wanneer de gebruiker minder tekens heeft ingevoerd dan

het minimum aantal tekens dat verplicht is voor het tekstveld.

Toestand Maximum aantal tekens De toestand van de widget wanneer de gebruiker meer tekens heeft ingevoerd dan

het maximum aantal tekens dat verplicht is voor het tekstveld.

Toestand minimumwaarde De toestand van de widget 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.)

462

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Toestand Maximumwaarde De toestand van de widget 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 widget 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 de widget. Als een gebruiker

bijvoorbeeld een formulier verstuurt waarin geen tekst is ingevuld in een verplicht tekstveld, past Spry een klasse op

de widget 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 de widget,

SpryValidationTextField.css.

De standaard-HTML voor de widget 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 de widget tekstveld voor

validatie bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget.

Voor een uitvoerige uitleg van de werking van de widget tekstveld voor validatie, waaronder een volledige anatomie

van de code van de widget tekstveld voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprytextfield_nl.

De widget tekstveld voor validatie invoegen en bewerken

De widget 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.

Opmerking: U kunt een widget tekstveld voor validatie ook invoegen met behulp van de categorie Spry in het paneel

Invoegen.

Meer Help-onderwerpen

“Toegankelijke HTML-formulieren maken” op pagina 699

Een validatietype en -notatie opgeven

U kunt voor de widget tekstveld voor validatie verschillende validatietypen opgeven. U kunt bijvoorbeeld het

validatietype creditcard opgeven als in het tekstveld creditcardnummers worden ingevoerd.

1 Selecteer een widget 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.

Bij de meeste validatietypen verwacht het tekstveld een standaardnotatie. Als u bijvoorbeeld het validatietype Geheel

getal op een tekstveld toepast, wordt de widget 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 getal Tekstveld accepteert alleen getallen.

E-mailadres Tekstveld 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 uw keuze uit het menu Formaat van de eigenschappencontrole.

463

DREAMWEAVER GEBRUIKEN

Spry-pagina's visueel opbouwen

Laatst bijgewerkt 2/5/2011

Opgeven wanneer validatie wordt uitgevoerd

U kunt opgeven wanneer de validatie wordt uitgevoerd—op het moment dat de bezoeker buiten de widget klikt,

tijdens de invoer of wanneer de bezoeker het formulier probeert te verzenden.

1 Selecteer een widget 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 alleen Verzenden 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. De optie Verzenden is

standaard geselecteerd en kan niet worden uitgeschakeld.

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 widget 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 de widget alleen als de gebruikers minstens

drie tekens heeft ingevoerd.

Tijd Notaties variëren. Maak uw keuze 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 uw keuze uit het menu Formaat van de eigenschappencontrole. U kunt

ervoor kiezen alle creditcards te accepteren of u kunt een bepaalde soort creditcard opgeven

(MasterCard, Visa, enzovoort). Het tekstveld accepteert geen spaties in creditcardnummer, dus

4321 3456 4567 4567.

Postcode Notaties variëren. Maak uw keuze 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. Als u een andere notatie wilt

gebruiken, selecteert u Aangepast als validatietype en geeft u een patroon op. Het mechanisme

voor patroonvalidatie accepteert alleen ASCII-tekens.

Valuta Tekstveld accepteert valuta, opgemaakt als 1,000,000.00 of 1.000.000,00.

Reëel-getal/wetenschappelijke notatie Valideert diverse soorten 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).

IP-adres Notaties variëren. Maak uw keuze 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. Het mechanisme voor patroonvalidatie accepteert

alleen ASCII-tekens.

Validatietype Indeling

511

Laatst bijgewerkt 2/5/2011

Hoofdstuk 17: Onlineservices van Adobe

gebruiken

Adobe-onlineservices

Adobe-onlineservices zijn gehoste webtoepassingen die op dezelfde manier werken als desktoptoepassingen. Het

voordeel van onlineservices is dat u altijd up-to-date bent omdat ze op het web worden gehost en niet op uw computer.

Dreamweaver kan rechtstreeks worden geïntegreerd met Adobe® BrowserLab en Adobe® Business Catalyst InContext

Editing. In de volgende Help-secties vindt u informatie over het gebruik van deze services.

Dreamweaver kan ook worden geïntegreerd met de Adobe® CS Live-onlineservices (inclusief BrowserLab). Zie Adobe

CS Live gebruiken voor meer informatie over het werken met CS Live.

Zie de Adobe-website op www.adobe.com/go/learn_creativeservices_nl voor informatie over het beheren van de

onlineservices van Adobe.

BrowserLab

Met Adobe BrowserLab kunt u lokale webinhoud voorvertonen in Dreamweaver zonder dat u de inhoud eerst moet

posten op een openbaar toegankelijke server. U kunt bestanden voorvertonen vanaf uw lokale Dreamweaver-site of

vanaf een externe of testserver.

Ga naar www.adobe.com/go/dwcs5browserlab_nl voor een video-overzicht van het technische Dreamweaver-team

over het werken met BrowserLab.

Ga naar www.adobe.com/go/lr_abl_nl voor informatie over de onlineservice BrowserLab, inclusief informatie over het

gebruik van BrowserLab met Dreamweaver.

Business Catalyst InContext Editing

Adobe Business Catalyst InContext Editing is een bewerkingscomponent van Adobe Business Catalyst waarmee

gebruikers in een webbrowser eenvoudige wijzigingen kunnen aanbrengen in inhoud. Als gebruikers een webpagina

willen wijzigen, bladeren ze naar de pagina, melden ze zich aan bij InContext Editing en bewerken ze de pagina. De

bewerkingsopties zijn eenvoudig en elegant. Voor het gebruik ervan is geen kennis nodig van HTML-code of bewerken

via het web.

Voordat u het gebruikers mogelijk maakt om live wijzigingen op het web aan te brengen, moet u echter Dreamweaver

gebruiken om de HTML-pagina's bewerkbaar te maken. U doet dit door de gebieden op de pagina's op te geven die

gebruikers mogen bewerken. Zo kunt u een nieuwspagina hebben met titels en flapteksten voor artikels. U kunt deze

inhoud selecteren en vervolgens omzetten in een bewerkbaar InContext Editing-gebied, zodat een gebruiker die zich

aanmeldt bij InContext Editing, de titels en flapteksten rechtstreeks in een browser kan bewerken.

512

DREAMWEAVER GEBRUIKEN

Onlineservices van Adobe gebruiken

Laatst bijgewerkt 2/5/2011

In deze documentatie wordt uitgelegd hoe u met de bewerkbare InContext Editing-gebieden in Dreamweaver kunt

werken. Adobe biedt daarnaast ook andere informatiebronnen die u helpen bij het werken met InContext Editing:

• Zie www.adobe.com/go/learn_dw_incontextediting_browser_nl voor documentatie over het gebruik van

InContext Editing om pagina's te bewerken in een browser.

• Zie www.adobe.com/go/learn_dw_incontextediting_administration_guide_nl voor documentatie over het werken

met het paneel InContext Editing-beheer.

Ga naar www.businesscatalyst.com voor meer informatie over Adobe Business Catalyst.

Opmerking: Adobe AIR biedt geen ondersteuning voor Adobe Business Catalyst InContext Editing. Als u de AIR-

uitbreidingsmodule voor Dreamweaver gebruikt om een toepassing te exporteren die InContext Editing-gebieden bevat,

werkt de functie InContext Editing niet.

Een bewerkbaar InContext Editing-gebied maken

Een bewerkbaar InContext Editing-gebied is een HTML-tagpaar dat het kenmerk ice:editable bevat in de

openingstag. Het bewerkbare gebied definieert een gebied op de pagina dat een gebruiker direct in een browser kan

bewerken.

Opmerking: Als u een bewerkbaar InContext Editing-gebied toevoegt aan een pagina die is gebaseerd op een

Dreamweaver-sjabloon, moet het nieuwe bewerkbare InContext Editing-gebied bestaan in een gebied dat al bewerkbaar is.

1 Voer een van de volgende handelingen uit:

• Selecteer een div-, th- of td-tag die u wilt transformeren in een bewerkbaar gebied.

• Plaats de invoegpositie op de plaats waar u een nieuw bewerkbaar gebied op de pagina wilt invoegen.

• Selecteer exact één bewerkbaar gebied in een Dreamweaver-sjabloon (DWT-bestand).

• Selecteer andere inhoud op de pagina die u bewerkbaar wilt maken (zoals een tekstblok).

2 Kies Invoegen > InContext Editing > Bewerkbaar gebied maken.

3 De opties zijn afhankelijk van uw selectie.

• Als u een div-, th- of td-tag hebt geselecteerd, transformeert Dreamweaver de tag in een bewerkbaar gebied

zonder meer stappen te volgen.

• Als u een nieuw, leeg bewerkbaar gebied invoegt, voert u een van de volgende stappen uit:

• Selecteer Nieuw bewerkbaar gebied invoegen op huidige invoegpositie en klik op OK. Dreamweaver voegt

een

div-tag in de code in met het kenmerk ice:editable in de openingstag.

• Selecteer De bovenliggende tag omzetten in een bewerkbaar gebied als u wilt dat Dreamweaver de

bovenliggende tag van de selectie het containerelement voor het gebied maakt. Alleen bepaalde HTML-tags

zijn geschikt voor omzetting:

div, th en td.

Opmerking: Deze tweede optie is alleen beschikbaar als het bovenliggende knooppunt exact voldoet aan de

criteria voor omzetting. Het knooppunt moet bijvoorbeeld een van de genoemde omzetbare tags zijn en mag

niet betrokken zijn bij een van de fouten die worden vermeld in “Foutberichten van InContext Editing” op

pagina 516.

• Klik in het dialoogvenster Bewerkbaar gebied maken op OK wanneer u een bewerkbaar gebied van een

Dreamweaver-sjabloon hebt geselecteerd. Dreamweaver plaatst het bewerkbare gebied van de sjabloon tussen

div-tags die als een container fungeren voor het nieuwe bewerkbare InContext Editing-gebied.

513

DREAMWEAVER GEBRUIKEN

Onlineservices van Adobe gebruiken

Laatst bijgewerkt 2/5/2011

• Als u andere inhoud hebt geselecteerd om bewerkbaar te maken, voert u één van de volgende stappen uit:

• Selecteer Huidige selectie tussen DIV-tags plaatsen en het vervolgens omzetten als u het geselecteerde item

tussen

div-tags wilt plaatsen en in een bewerkbaar gebied wilt omzetten. De div-tags waartussen

Dreamweaver de inhoud plaatst, fungeert als de container voor het bewerkbare gebied.

Opmerking: Door

div-tags aan pagina's toe te voegen, kunnen de paginaweergave en de effecten van CSS-regels

veranderen. Als u bijvoorbeeld een CSS-regel hebt waarmee een rode rand wordt toegepast rond

div-tags, ziet

u een rode rand rond de huidige selectie wanneer Dreamweaver deze tussen

div-tags plaatst en omzet. U kunt

dit soort conflicten vermijden, door de CSS-regels te herschrijven die de huidige selectie beïnvloeden of de

omzetting ongedaan te maken (Bewerken > Ongedaan maken), en een ondersteunde tag om te zetten die

Dreamweaver niet tussen

div-tags hoeft te plaatsen.

• Selecteer De bovenliggende tag omzetten in een bewerkbaar gebied als u wilt dat Dreamweaver de

bovenliggende tag van de selectie het containerelement voor het bewerkbare gebied maakt. Alleen bepaalde

HTML-tags zijn geschikt om om te zetten:

div, th en td.

4 Klik in de Ontwerpweergave op de blauwe tab van het bewerkbare gebied om het te selecteren, als dit nog niet is

gebeurd.

Opmerking: Als u in een Dreamweaver-sjabloon werkt, moet u erop letten dat u het bewerkbare InContext Editing-

gebied selecteert (het containergebied) en niet het bewerkbare gebied van de Dreamweaver-sjabloon.

5 Schakel opties in de eigenschappencontrole Bewerkbare gebieden in of uit. De opties die u selecteert, zijn

beschikbaar voor een gebruiker wanneer deze de inhoud van het bewerkbare gebied in een browser bewerkt. Als u

bijvoorbeeld de optie Vet selecteert, kan de gebruiker de tekst vet maken. Selecteert u de optie Genummerde lijst

en lijst met opsommingstekens, dan kan de gebruiker genummerde lijsten en lijsten met opsommingstekens

maken, en als u de optie Koppeling selecteert, kan de gebruiker koppelingen maken. Beweeg de cursor boven het

pictogram van elke optie om knopinfo over de optie weer te geven.

6 Sla de pagina op.

Als u de functie InContext Editing voor het eerst aan een pagina toevoegt, krijgt u bericht van Dreamweaver dat er

ondersteunende bestanden van InContext Editing aan uw site worden toegevoegd: ice.conf.js, ice.js, en ide.html.

Laad deze bestanden naar de server wanneer u de pagina laadt, anders zal de InContext Editing-functie niet werken

in een browser.

Een InContext Editing-herhalingsgebied maken

Een InContext Editing-herhalingsgebied is een HTML-tagpaar dat het kenmerk ice:repeating bevat in de

openingstag. Het herhalingsgebied definieert een gebied op de pagina dat een gebruiker kan "herhalen" en waaraan een

gebruiker inhoud kan toevoegen tijdens het bewerken in een browser. U kunt bijvoorbeeld een koptekst met alinea

omzetten in een herhalingsgebied dat door een gebruiker kan worden gedupliceerd op een pagina.

514

DREAMWEAVER GEBRUIKEN

Onlineservices van Adobe gebruiken

Laatst bijgewerkt 2/5/2011

Herhalingsgebieden zoals weergegeven in een bewerkbaar InContext Editing-browservenster. Het onderste gebied is geselecteerd en kan worden

gedupliceerd, verwijderd of omhoog en omlaag worden verplaatst.

Behalve het toevoegen van herhalingsgebieden die gebaseerd zijn op het oorspronkelijke gebied, kunt u de gebruiker

ook de mogelijkheid geven om gebieden te verwijderen, volledig nieuwe gebieden toe te voegen (niet gebaseerd op de

inhoud van het oorspronkelijke gebied) en de gebieden omhoog en omlaag te schuiven.

Wanneer u een herhalingsgebied maakt, laat Dreamweaver deze in een andere container teruglopen. Dit wordt een

groep herhalingsgebieden genoemd. Deze container (een

div-tag met het kenmerk ice:repeatinggroup toegevoegd

aan de openingstag) fungeert als de container voor alle bewerkbare herhalingsgebieden die een gebruiker kan

toevoegen aan de groep. U kunt herhalingsgebieden niet buiten hun groepscontainers met herhalingsgebieden

plaatsen. Bovendien mag u niet handmatig groepstags voor herhalingsgebieden aan uw pagina toevoegen.

Dreamweaver voegt deze automatisch voor u toe wanneer dat nodig is.

Opmerking: Wanneer u een herhalingsgebied van een tabelrij maakt (tag

tr), past Dreamweaver het groepskenmerk

voor de herhalingsgebieden op de bovenliggende tag toe (bijvoorbeeld de tag

table) en wordt geen div-tag ingevoegd.

Als u aan een pagina werkt die al een groep herhalingsgebieden bevat en u direct achter de bestaande groep een

herhalingsgebied probeert toe te voegen, detecteert Dreamweaver dat het gebied dat u probeert toe te voegen wordt

voorafgegaan door een groep herhalingsgebieden, en krijgt u de mogelijkheid om het nieuwe gebied aan de bestaande

groep toe te voegen. U kunt kiezen of u het nieuwe herhalingsgebied wilt toevoegen aan de bestaande groep of een

geheel nieuwe groep herhalingsgebieden wilt maken.

Opmerking: Als u een InContext Editing-herhalingsgebied toevoegt aan een pagina die is gebaseerd op een

Dreamweaver-sjabloon, moet het nieuwe InContext Editing-herhalingsgebied bestaan in een gebied dat al bewerkbaar is.

Volg onderstaande stappen om een herhalingsgebied te maken in Dreamweaver.

1 Voer een van de volgende handelingen uit:

• Selecteer een tag die u wilt omzetten in een herhalingsgebied. De lijst met mogelijke tags is zeer omvangrijk: a,

abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2,

h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub,

sup, table, tbody, tr, tt, u, ul en var.

515

DREAMWEAVER GEBRUIKEN

Onlineservices van Adobe gebruiken

Laatst bijgewerkt 2/5/2011

Opmerking: Alleen div-tags kunnen tegelijkertijd de kenmerken voor een bewerkbaar gebied als die voor een

herhalingsgebied bevatten.

• Plaats de invoegpositie daar waar u een nieuw herhalingsgebied op de pagina wilt plaatsen.

• Selecteer exact één herhalingsgebied in een Dreamweaver-sjabloon (DWT-bestand).

• Selecteer andere inhoud op de pagina die u wilt kunnen herhalen (zoals een kop of een tekstblok).

2 Kies Invoegen > InContext Editing > Herhalingsgebied maken.

3 De opties zijn afhankelijk van uw selectie.

• Als u een omzetbare tag hebt geselecteerd, zet Dreamweaver de tag om in een herhalingsgebied zonder meer

stappen uit te voeren.

• Als u een nieuw, leeg herhalingsgebied invoegt, voert u een van de volgende stappen uit:

• Selecteer Nieuw herhalingsgebied invoegen op huidige invoegpositie en klik op OK.

• Selecteer De bovenliggende tag omzetten in een herhalingsgebied als u wilt dat Dreamweaver de

bovenliggende tag van de selectie het containerelement voor het gebied maakt. Alleen bepaalde HTML-tags

zijn omzetbaar:

a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl,

dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span,

strike, strong, sub, sup, table, tbody, tr, tt, u, ul en var.

Opmerking: Deze tweede optie is alleen beschikbaar als het bovenliggende knooppunt exact voldoet aan de

criteria voor omzetting. Het knooppunt moet bijvoorbeeld een van de genoemde omzetbare tags zijn en mag

niet betrokken zijn bij een van de fouten die worden vermeld in “Foutberichten van InContext Editing” op

pagina 516.

• Klik in het dialoogvenster Herhalingsgebied maken op OK wanneer u een herhalingsgebied van een

Dreamweaver-sjabloon hebt geselecteerd. Dreamweaver plaatst het herhalingsgebied van de sjabloon tussen

div-tags die als een container fungeren voor het nieuwe InContext Editing-herhalingsgebied.

• Als u andere inhoud hebt geselecteerd als herhalingsgebied, voert u één van de volgende stappen uit:

• Selecteer Huidige selectie tussen DIV-tags plaatsen en het vervolgens omzetten als u het geselecteerde item

tussen

div-tags wilt plaatsen en in een herhalingsgebied wilt omzetten. De div-tags waartussen

Dreamweaver de inhoud plaatst, fungeert als de container voor het herhalingsgebied.

• Selecteer De bovenliggende tag omzetten in een herhalingsgebied als u wilt dat Dreamweaver de

bovenliggende tag van de selectie het containerelement voor het herhalingsgebied maakt. Alleen bepaalde

HTML-tags zijn omzetbaar:

a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn,

dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp,

small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul en var.

4 Klik in de Ontwerpweergave op de blauwe tab van het herhalingsgebied om het te selecteren, als dit nog niet is

gebeurd. Dreamweaver dwingt u in feite om de tab te selecteren voor de groep herhalingsgebieden. Alle

herhalingsgebieden liggen namelijk binnen een groep herhalingsgebieden en u kunt alleen opties instellen voor één

herhalingsgebied als u die voor de hele groep instelt.

5 Schakel opties in de eigenschappencontrole Groep herhalingsgebieden in of uit. Er zijn twee opties: Opnieuw

ordenen en Toevoegen/verwijderen Wanneer u Opnieuw ordenen kiest, kunnen gebruikers herhalingsgebieden

omhoog of omlaag verplaatsen bij het bewerken in een browser. Kiest u Toevoegen/verwijderen, dan kunnen

gebruikers herhalingsgebieden toevoegen of verwijderen bij het bewerken in een browser. Beide opties zijn

standaard geselecteerd, en een van beide moet altijd ingeschakeld zijn.

6 Sla de pagina op.

541

DREAMWEAVER GEBRUIKEN

XML-gegevens met XSLT weergeven

Laatst bijgewerkt 2/5/2011

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.

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.

542

DREAMWEAVER GEBRUIKEN

XML-gegevens met XSLT weergeven

Laatst bijgewerkt 2/5/2011

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.

543

DREAMWEAVER GEBRUIKEN

XML-gegevens met XSLT weergeven

Laatst bijgewerkt 2/5/2011

U kunt 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.

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.

544

DREAMWEAVER GEBRUIKEN

XML-gegevens met XSLT weergeven

Laatst bijgewerkt 2/5/2011

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.

Meer Help-onderwerpen

“Een Dreamweaver-site opzetten” op pagina 38

“Een toepassingsserver kiezen” op pagina 556

“Een XSLT-pagina aan een XML-pagina koppelen” op pagina 545

“XML en XSL gebruiken in webpagina's” op pagina 518

“Client-side XSL-transformaties” op pagina 521

“Server-side XSL-transformaties” op pagina 519

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.

Meer Help-onderwerpen

“XSLT-pagina maken” op pagina 526

“XML-gegevens weergeven op XSLT-pagina's” op pagina 528

“Herhalende XML-elementen weergeven” op pagina 530

545

DREAMWEAVER GEBRUIKEN

XML-gegevens met XSLT weergeven

Laatst bijgewerkt 2/5/2011

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.

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.

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.

Teken Eenheidcode

< (kleiner dan) <

& (en-teken) &

> (groter dan) >

" (dubbel aanhalingsteken) "

‘ (apostrof) '

546

DREAMWEAVER GEBRUIKEN

XML-gegevens met XSLT weergeven

Laatst bijgewerkt 2/5/2011

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

-------------------^

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.

547

Laatst bijgewerkt 2/5/2011

Hoofdstuk 19: Voorbereidingen voor het

bouwen van dynamische websites

Voordat u kunt beginnen met het bouwen van dynamische webpagina's, moeten er enkele voorbereidingen worden

getroffen, zoals het opstellen van een webtoepassingsserver en het verbinden met een database voor ColdFusion-, ASP-

, - en PHP-toepassingen. Afhankelijk van uw servertechnologie worden databaseverbindingen in

Adobe® Dreamweaver® CS5 verschillend behandeld.

Wat zijn webtoepassingen

Over webtoepassingen

Een webtoepassing is een website die pagina's bevat met gedeeltelijk of geheel onbepaalde inhoud. De uiteindelijke

inhoud van een pagina wordt pas bepaald wanneer de bezoeker een pagina opvraagt bij de webserver. Omdat de

uiteindelijke inhoud van de pagina per verzoek kan verschillen omdat deze afhankelijk is van de acties van de bezoeker,

wordt dit type pagina een dynamische pagina genoemd.

Webtoepassingen zijn bedoeld als oplossing voor diverse uitdagingen en problemen. In deze sectie worden

veelvoorkomende toepassingen voor webtoepassingen beschreven en vindt u een eenvoudig voorbeeld.

Veelvoorkomende toepassingen voor webtoepassingen

Webtoepassingen kennen veel toepassingen voor zowel sitebezoekers als siteontwikkelaars, waaronder de volgende:

• Bezoekers de mogelijkheid geven om snel en eenvoudig informatie te zoeken op een website met een uitgebreide

inhoud.

Met dergelijke webtoepassingen kunnen bezoekers naar eigen inzicht inhoud doorzoeken en ordenen en door de

inhoud navigeren. Voorbeelden zijn bedrijfsintranetten, Microsoft MSDN (www.msdn.microsoft.com) en

Amazon.com (www.amazon.com).

• Gegevens van sitebezoekers verzamelen, opslaan en analyseren.

In het verleden werden gegevens die in HTML-formulieren werden ingevoerd, als e-mailberichten naar

werknemers of CGI-toepassingen verstuurd om te worden verwerkt. Een webtoepassing kan formuliergegevens

rechtstreeks in een database opslaan en ook de gegevens uit een database ophalen en op het web gebaseerde

rapporten maken voor analyse. Voorbeelden zijn pagina's voor online bankieren, winkelkassapagina's,

onderzoeken en feedbackformulieren.

• Updatewebsites hebben inhoud die continu verandert.

Dankzij een webtoepassing hoeft de webontwerper de HTML van de site niet voortdurend bij te werken.

Contentproviders zoals nieuwsredacteuren voorzien de webtoepassing van inhoud, waarna de webtoepassing de

site automatisch bijwerkt. Voorbeelden zijn The Economist (www.economist.com) en CNN (www.cnn.com).

548

DREAMWEAVER GEBRUIKEN

Voorbereidingen voor het bouwen van dynamische websites

Laatst bijgewerkt 2/5/2011

Voorbeeld van webtoepassing

Janet is een professionele webontwerper en is altijd de Dreamweaver-gebruiker geweest die verantwoordelijk was voor

het onderhoud van de intranet- en internetsites van een middelgroot bedrijf met 1000 werknemers. Op een dag komt

Chris van Personeelszaken bij haar met een probleem. Personeelszaken beheert een fitnessprogramma dat

werknemers punten toekent voor elke kilometer die de werknemer heeft gelopen, gefietst of gerend. Elke werknemer

moet maandelijks zijn of haar totaal aantal kilometers via e-mail doorgeven aan Chris. Aan het einde van de maand

verzamelt Chris alle e-mailberichten en geeft de werknemers een kleine bonus op basis van hun puntentotaal.

Het probleem van Chris is dat het fitnessprogramma iets te succesvol is geworden. Er doen momenteel zoveel

werknemers mee dat Chris aan het einde van de maand wordt overstelpt met e-mailberichten. Chris vraagt Janet of er

misschien een weboplossing bestaat.

Janet stelt een intranetwebtoepassing voor die de volgende taken uitvoert:

• De werknemers kunnen hun kilometerstand op een webpagina invoeren via een eenvoudig HTML-formulier.

• De kilometerstanden van de werknemers worden in een database opgeslagen.

• Het programma berekent de fitnesspunten op basis van de kilometergegevens.

• Werknemers kunnen hun maandelijkse voortgang volgen.

• Chris heeft met één klik toegang tot het puntentotaal aan het einde van elke maand.

Janet heeft de toepassing vóór lunchtijd geschreven en geactiveerd met Dreamweaver, dat de hulpmiddelen heeft

die nodig zijn om een dergelijke toepassing snel en eenvoudig samen te stellen.

De werking van een webtoepassing

Een webtoepassing is een verzameling statische en dynamische webpagina's. Een statische webpagina is een webpagina

die niet verandert als een sitebezoeker de pagina opvraagt: de webserver verzendt de pagina ongewijzigd naar de

desbetreffende webbrowser. Een dynamische webpagina daarentegen, wordt door de server gewijzigd voordat deze

naar de desbetreffende browser wordt gestuurd. Vanwege de veranderlijke aard van de pagina wordt de pagina

dynamisch genoemd.

U kunt bijvoorbeeld een pagina ontwerpen om fitnessresultaten weer te geven, waarbij bepaalde informatie (zoals de

naam en de resultaten) worden bepaald op het moment dat de pagina wordt opgevraagd door een bepaalde

werknemer.

In de volgende secties wordt gedetailleerder beschreven hoe webtoepassingen werken.

Statische webpagina's verwerken

Een statische website bestaat uit een reeks gerelateerde HTML-pagina's en -bestanden die worden beheerd op een

computer waarop een webserver wordt uitgevoerd.

Een webserver is software die webpagina's verwerkt in reactie op aanvragen van webbrowsers. Een paginaverzoek

wordt gegenereerd wanneer een bezoeker op een koppeling op een webpagina klikt, een bladwijzer in een browser

selecteert of een URL in het tekstvak Adres van de browser invoert.

De uiteindelijke inhoud van een statische webpagina wordt bepaald door de paginaontwerper en verandert niet op het

moment dat de pagina wordt opgevraagd. Hieronder ziet u een voorbeeld:

549

DREAMWEAVER GEBRUIKEN

Voorbereidingen voor het bouwen van dynamische websites

Laatst bijgewerkt 2/5/2011

<html>

<head>

<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

</body>

</html>

Elke regel HTML-code van de pagina wordt door de ontwerper geschreven voordat de pagina op de server wordt

geplaatst. Omdat de HTML niet meer verandert wanneer deze eenmaal op de server staat, wordt dit soort pagina een

statische pagina genoemd.

Opmerking: Strikt gesproken hoeft een “statische” pagina helemaal niet statisch te zijn. Een rollover-afbeelding of Flash-

inhoud (een SWF-bestand) kan een statische pagina tot leven brengen. In deze documentatie wordt een pagina echter

statisch genoemd als deze zonder wijzigingen naar de browser wordt verstuurd.

Wanneer de webserver een verzoek voor een statische pagina ontvangt, leest de server het verzoek, wordt de pagina

gezocht en wordt deze naar de desbetreffende browser verzonden, zoals u in het volgende voorbeeld kunt zien:

1. Webbrowser vraagt een statische pagina op. 2. Webserver zoekt en vindt de pagina. 3. Webserver verzendt de pagina naar de betreffende

browser.

In het geval van webtoepassingen zijn bepaalde coderegels onbepaald wanneer de bezoeker de pagina aanvraagt. Deze

regels moeten door enkele mechanismen worden bepaald voordat de pagina naar de browser kan worden verzonden.

Het mechanisme wordt in de volgende sectie besproken.

Dynamische pagina's verwerken

Wanneer een webserver een verzoek voor een statische webpagina ontvangt, verzendt de server de pagina rechtstreeks

naar de desbetreffende browser. Wanneer de webserver echter een verzoek voor een dynamische pagina ontvangt,

reageert de server anders: De server geeft de pagina door aan een speciaal stukje software dat voor de afhandeling van

de pagina moet zorgen. Deze speciale software wordt een toepassingsserver genoemd.

De toepassingsserver leest de code op de pagina, verwerkt de pagina volgens de instructies in de code en verwijdert de

code vervolgens van de pagina. Het resultaat is een statische pagina die de toepassingsserver weer teruggeeft aan de

webserver, die de pagina op zijn beurt verzendt naar de browser die de pagina heeft opgevraagd. Als de pagina

arriveert, ontvangt de browser alleen HTML. Hier volgt een weergave van het proces:

<HTML>

<p>H1

</HTML>

Webbrowser

WEBSERVER

Antwoord

Verzoek

550

DREAMWEAVER GEBRUIKEN

Voorbereidingen voor het bouwen van dynamische websites

Laatst bijgewerkt 2/5/2011

1. Webbrowser vraagt een dynamische pagina op. 2. Webserver zoekt de pagina en geeft deze door aan de toepassingsserver.

3. Toepassingsserver scant de pagina voor instructies en voltooit de pagina. 4. Toepassingsserver geeft de voltooide pagina weer terug aan de

webserver 5. Webserver verzendt de voltooide pagina naar de betreffende browser.

Toegang krijgen tot een database

Door middel van een toepassingsserver kunt u bronnen aan de serverzijde gebruiken, bijvoorbeeld databases. Een

dynamische pagina kan bijvoorbeeld de toepassingsserver de instructie geven om gegevens uit een database op te halen

en deze in de HTML van de pagina in te voegen. Voor meer informatie, zie www.adobe.com/go/learn_dw_dbguide_nl.

Door een database te gebruiken voor het opslaan van inhoud kunt u het ontwerp van uw website scheiden van de

inhoud die u voor de gebruikers van de site wilt weergeven. U hoeft niet meer voor elke pagina een afzonderlijk

HTML-bestand te maken, maar u kunt nu een pagina (of sjabloon) maken voor de verschillende soorten informatie

die u wilt presenteren. Vervolgens kunt u de inhoud uploaden naar een database en deze inhoud vervolgens door de

website laten ophalen als antwoord op een verzoek van de gebruiker. Tevens kunt u de informatie in één bron

bijwerken en deze wijziging vervolgens door de gehele website doorvoeren zonder dat elke pagina handmatig moet

gaan bewerken. U kunt Adobe® Dreamweaver® CS5 gebruiken om webformulieren te ontwerpen voor het invoegen,

bijwerken of verwijderen van gegevens uit de database.

De instructie om gegevens uit een database op te halen, wordt een databasequery genoemd. Een query bestaat uit

zoekcriteria die worden uitgedrukt in een databasetaal die SQL (Structured Query Language) wordt genoemd. De

SQL-query wordt geschreven in scripts of tags op de server van de pagina.

Een toepassingsserver kan niet rechtstreeks met een database communiceren omdat de typische indeling van de

database de gegevens onleesbaar weergeeft, net zoals een Microsoft Word-document onleesbaar is wanneer het in

Kladblok of BBEdit wordt geopend. De toepassingsserver kan uitsluitend met de database communiceren met behulp

van een databasestuurprogramma: software die als een vertaler tussen de toepassingsserver en de database fungeert.

Nadat het stuurprogramma de communicatie tot stand heeft gebracht, wordt de query voor de database uitgevoerd en

wordt een recordset gemaakt. Een recordset is een reeks gegevens die uit een of meer tabellen in een database zijn

gehaald. De recordset wordt geretourneerd aan de toepassingsserver, die de gegevens gebruikt om de pagina te

voltooien.

Hier volgt een eenvoudige databasequery in SQL:

SELECT lastname, firstname, fitpoints

FROM employees

Toepassings

server

<HTML>

<p>H1

</HTML>

<HTML>

<code>

</HTML>

Webbrowser

WEBSERVER

2 3

Antwoord

Verzoek

551

DREAMWEAVER GEBRUIKEN

Voorbereidingen voor het bouwen van dynamische websites

Laatst bijgewerkt 2/5/2011

Deze instructie maakt een recordset met drie kolommen en vult deze met rijen die de achternaam, voornaam en

fitnesspunten bevatten van alle werknemers in de database. Voor meer informatie, zie

www.adobe.com/go/learn_dw_sqlprimer_nl.

In het volgende voorbeeld ziet u hoe de query voor de database wordt uitgevoerd en de gegevens naar de browser

worden geretourneerd:

1. Webbrowser vraagt een dynamische pagina op. 2. Webserver zoekt de pagina en geeft deze door aan de toepassingsserver.

3. Toepassingsserver scant de pagina voor instructies. 4. Toepassingsserver verzendt de query naar het databasestuurprogramma.

5. Stuurprogramma voert de query uit op de database. 6. Recordset wordt als resultaat gegeven aan het stuurprogramma. 7. Stuurprogramma

geeft de recordset door aan de toepassingsserver. 8. Toepassingsserver voegt de gegevens in op de pagina en geeft de pagina door aan de

webserver. 9. Webserver verzendt de voltooide pagina naar de betreffende browser.

U kunt bijna elke database met uw webtoepassing gebruiken, zolang u maar het juiste databasestuurprogramma op de

server hebt geïnstalleerd.

Als u goedkopere toepassingen wilt samenstellen, kunt u een bestandsgebaseerde database gebruiken, zoals de

databases die met Microsoft Access worden gemaakt. Als u robuuste toepassingen voor belangrijke zakelijke

doeleinden moet maken, gebruikt u beter een servergebaseerde database, zoals de databases die met Microsoft SQL

Server, Oracle 9i of MySQL worden gemaakt.

Als uw database zich op een ander systeem dan uw webserver bevindt, moet u zorgen voor een snelle verbinding tussen

de twee systemen zodat uw webtoepassing snel en doeltreffend kan werken.

Meer Help-onderwerpen

Beginnersgids voor databases

Dynamische pagina's ontwerpen

Als u een dynamische pagina wilt ontwerpen, moet u eerst de HTML schrijven en daarna de scripts of tags aan de

serverzijde aan de HTML toevoegen om de pagina dynamisch te maken. Als u de resulterende code weergeeft, wordt

de taal in de HTML van de pagina ingesloten weergegeven. Deze talen worden dan ook in HTML ingesloten

programmeertalen genoemd. In het volgende eenvoudige voorbeeld wordt gebruik gemaakt van CFML (ColdFusion

Markup Language):

Toepassings

server

<HTML>

<p>

Gegevens

</HTML>

<HTML>

<code>

</HTML>

Recordset

Query

Databasestuur

programma

Webbrowser

WEBSERVER

2 3

789

Antwoord

Verzoek

Database

552

DREAMWEAVER GEBRUIKEN

Voorbereidingen voor het bouwen van dynamische websites

Laatst bijgewerkt 2/5/2011

<html>

<head>

<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

<p>Be sure to visit our #department# page.</p>

</cfoutput>

</body>

</html>

Met de ingesloten instructies op deze pagina worden de volgende acties uitgevoerd:

1 Er wordt een variabele met de naam department gemaakt en hieraan wordt de tekenreeks "Sales" toegekend.

2 De waarde van de variabele, "Sales", wordt in de HTML-code ingevoegd.

De toepassingsserver retourneert de volgende pagina aan de webserver:

<html>

<head>

<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

<p>Be sure to visit our Sales page.</p>

</body>

</html>

De webserver verzendt de pagina naar de browser die deze heeft aangevraagd en deze geeft de pagina als volgt weer:

Informatie over Trio Motors

Trio Motors is een toonaangevende automobielfabrikant.

Bezoek onze Sales-pagina.

Bij het kiezen van een scripttaal of op tags gebaseerde taal die u wilt gebruiken, bent u afhankelijk van de

servertechnologie die beschikbaar is op de server. Dit zijn de populairste talen voor de servertechnologieën die worden

ondersteund door Dreamweaver:

Dreamweaver kan de scripts of tags aan de serverzijde maken die nodig zijn om uw pagina's aan de praat te krijgen. U

kunt ze echter ook handmatig schrijven in de codeeromgeving van Dreamweaver.

Servertechnologie Taal

ColdFusion ColdFusion Markup Language (CFML)

Active Server Pages (ASP) VBScript

JavaScript

PHP PHP

583

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

Een query kan een recordset opleveren die alleen bepaalde kolommen, alleen bepaalde records of een combinatie van

beide bevat. Een recordset kan ook alle records en kolommen van een databasetabel bevatten. Omdat toepassingen

echter zelden alle data in een database moeten gebruiken, dient u ernaar te streven om uw recordsets zo klein mogelijk

te houden. Omdat de webserver de recordset tijdelijk in het geheugen vasthoudt, is voor het gebruik van een kleinere

recordset minder geheugen vereist en kunt u de prestaties van de server potentieel verbeteren.

Databasequery's worden geschreven in SQL (Structured Query Language, uitgesproken als "seekwel"), een eenvoudige

taal waarmee u databasegegevens kunt ophalen, toevoegen en verwijderen. Met de SQL builder die bij Dreamweaver

wordt geleverd, kunt u eenvoudige query's maken zonder kennis van SQL. Maar wanneer u complexe SQL-query's wilt

maken, biedt enige elementaire kennis van deze taal u de mogelijkheid geavanceerdere query's te maken, en biedt die

meer flexibiliteit bij het ontwikkelen van dynamische pagina's.

Voordat u een recordset definieert voor gebruik met Dreamweaver, moet u een verbinding met een database maken

en gegevens in de database invoeren als dat nog niet is gebeurd. Als u nog geen databaseverbinding voor uw site hebt

gedefinieerd, raadpleegt u het hoofdstuk over databaseverbindingen voor de servertechnologie waarvoor u ontwikkelt,

en volgt u de instructies voor het maken van een databaseverbinding.

Meer Help-onderwerpen

“Een recordset definiëren zonder SQL te schrijven” op pagina 589

Over URL- en formulierparameters

URL-parameters slaan opgehaalde informatie-invoer van gebruikers op. Als u een URL-parameter wilt definiëren,

maakt u een formulier- of hypertekstkoppeling die de methode

GET gebruikt om gegevens te verzenden. De informatie

wordt toegevoegd aan de URL van de gevraagde pagina en wordt aan de server doorgegeven. Als u URL-variabelen

gebruikt, bevat de queryreeks een of meer naam-/waardeparen die aan de formuliervelden zijn gekoppeld. Deze naam-

/waardeparen worden aan de URL toegevoegd.

Formulierparameters slaan opgehaalde informatie op die in de HTTP-aanvraag voor een webpagina is opgenomen.

Als u een formulier maakt dat de methode

POST gebruikt, worden de gegevens die door het formulier zijn verzonden,

doorgegeven aan de server. Voordat u begint, moet u ervoor zorgen dat u een formulierparameter aan de server

doorgeeft.

Meer Help-onderwerpen

“URL-parameters” op pagina 683

“Formulierparameters definiëren” op pagina 596

Over sessievariabelen

Met sessievariabelen kunt u informatie opslaan en weergeven die gedurende het bezoek van een gebruiker (een

gebruikerssessie) wordt vastgehouden. De server maakt voor elke gebruiker een afzonderlijk sessieobject en

onderhoudt dat gedurende een ingestelde periode of tot het object expliciet wordt beëindigd.

Omdat sessievariabelen gedurende een hele gebruikerssessie bestaan, ook wanneer de gebruiker van de ene pagina

naar de andere binnen de website gaat, zijn ze bijzonder geschikt om gebruikersvoorkeuren op te slaan.

Sessievariabelen kunnen ook worden gebruikt om een waarde in de HTML-code van een pagina in te voegen, om een

waarde aan een lokale variabele toe te wijzen of om een waarde op te geven om een voorwaardelijke expressie te

evalueren.

584

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

Voordat u sessievariabelen voor een pagina definieert, moet u ze in de broncode maken. Wanneer u een sessievariabele

in de broncode van de webtoepassing hebt gemaakt, kunt u met Dreamweaver de waarde ervan ophalen en op een

webpagina gebruiken.

Hoe werken sessievariabelen

Sessievariabelen slaan informatie (doorgaans door gebruikers ingediende formulier- of URL-parameters) op en stellen

deze voor de duur van het bezoek van de gebruiker beschikbaar aan alle pagina's van de webtoepassing. Wanneer

gebruikers zich bijvoorbeeld aanmelden bij een webportaal dat toegang biedt tot e-mail, aandelenprijzen,

weerberichten en dagelijks nieuws, slaat de webtoepassing de aanmeldingsgegevens op in een sessievariabele die de

gebruiker identificeert voor de pagina's van de gehele site. Hierdoor ziet de gebruiker alleen de typen inhoud die de

gebruiker heeft geselecteerd bij het navigeren door de site. Sessievariabelen kunnen ook een beveiligingsmechanisme

bieden waarmee de sessie van de gebruiker wordt beëindigd als de account een bepaalde tijd inactief is. Dit maakt ook

geheugen op de server en verwerkingsresources vrij als de gebruiker vergeet om zich bij een website af te melden.

Sessievariabelen slaan informatie op voor de duur van de gebruikssessie. De sessie begint wanneer de gebruiker een

pagina binnen de toepassing opent en eindigt wanneer de gebruiker niet binnen een bepaalde tijd een andere pagina

in de toepassing opent of wanneer de gebruiker expliciet de sessie beëindigt (doorgaans door op de koppeling voor

afmelden te klikken). Zolang deze bestaat, is de sessie specifiek voor een afzonderlijke gebruiker, waarbij elke gebruiker

een afzonderlijke sessie heeft.

Gebruik sessievariabelen om gegevens op te slaan, waartoe elke pagina in een webtoepassing toegang kan hebben. Dit

kunnen zeer uiteenlopende gegevens zijn, zoals de gebruikersnaam, de gewenste tekengrootte of een vlag die aangeeft

of de gebruiker zich met succes heeft aangemeld. Sessievariabelen worden ook vaak gebruikt voor het bijhouden van

een lopend aantal, bijvoorbeeld het aantal vragen dat tot dusverre correct is beantwoord bij een online-quiz of de

producten die de gebruiker tot dan heeft geselecteerd in een onlinecatalogus.

Sessievariabelen kunnen alleen functioneren als de browser van de gebruiker is geconfigureerd voor het accepteren van

cookies. De server genereert een id-nummer voor de sessie waarmee de gebruiker op unieke wijze wordt

geïdentificeerd wanneer de sessie wordt gestart, en zendt vervolgens een cookie met het id-nummer naar de browser

van de gebruiker. Wanneer de gebruiker om een andere pagina op de server verzoekt, leest de server het cookie op de

browser om de gebruiker te identificeren en de in het geheugen van de server opgeslagen sessievariabelen van de

gebruiker op te halen.

Informatie in sessievariabelen verzamelen, opslaan en ophalen

Voordat u een sessievariabele maakt, moet u eerst de informatie die u wilt opslaan, verzamelen en deze vervolgens naar

de server verzenden waar de informatie wordt opgeslagen. U kunt informatie verzamelen en naar de server verzenden

met behulp van HTML-formulieren of hypertextkoppelingen met URL-parameters. U kunt ook informatie

verzamelen via cookies die op de computer van de gebruiker zijn opgeslagen, via HTTP-koppen die door de browser

van de gebruiker met een paginaverzoek worden verzonden of vanuit een database.

URL-parameters die worden opgeslagen in sessievariabelen, vindt u bijvoorbeeld vaak in productcatalogi. In een

productcatalogus worden 'hard-coded' URL-parameters die worden gemaakt met een koppeling, gebruikt om

productinformatie terug te sturen naar de server, zodat deze informatie kan worden opgeslagen in een sessievariabele.

Wanneer een gebruiker op de koppeling 'Toevoegen aan winkelwagentje' klikt, wordt de product-id opgeslagen in een

sessievariabele terwijl de gebruiker doorgaat met winkelen. Wanneer de gebruiker naar de betalingspagina gaat, wordt

de in de sessievariabele opgeslagen product-ID opgehaald.

Een op formulieren gebaseerde enquête is een typisch voorbeeld van een pagina waarop formulierparameters worden

opgeslagen in sessievariabelen. Het formulier verzendt de geselecteerde informatie terug naar de server, waar een

toepassingspagina een score aan de enquête toekent en de antwoorden opslaat in een sessievariabele die moet worden

doorgegeven aan een toepassing die mogelijk een totaalberekening maakt van de reacties die zijn verzameld van alle

deelnemers aan de enquête. Of de informatie wordt in een database voor later gebruik opgeslagen.

585

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

Nadat er informatie naar de server is verzonden, slaat u de informatie op in sessievariabelen door de juiste code voor

uw servermodel toe te voegen aan de pagina die wordt opgegeven door de URL- of formulierparameter. Wordt de

doelpagina genoemd. Deze pagina wordt in het kenmerk

action van het HTML-formulier of in het kenmerk href van

de hypertekstkoppeling op de startpagina opgegeven.

Nadat u de waarde hebt opgeslagen in een sessievariabele, kunt u Dreamweaver gebruiken om de waarde op te halen

uit sessievariabelen en deze te gebruiken in een webtoepassing. Nadat u de sessievariabele hebt gedefinieerd in

Dreamweaver, kunt u de waarde ervan invoegen in een pagina.

De HTML-syntaxis hiervoor ziet er als volgt uit:

Zowel de gebruiker servertechnologie als de methode die u gebruikt voor het in bezit krijgen van de informatie, bepaalt

de code die wordt gebruikt voor de opslag van de informatie in een sessievariabele. De basissyntaxis voor elke

servertechnologie is als volgt:

ColdFusion

ASP

<% Session("variable_name") = value %>

De value-expressie is doorgaans een serverexpressie, zoals Request.Form("lastname"). Als u bijvoorbeeld een

URL-parameter met de naam

product (of een HTML-formulier met de methode GET en een tekstveld met de naam

product) gebruikt om informatie op te vragen, kunt u de volgende instructies geven om de informatie op te slaan in

een sessievariabele met de naam

prodID:

ColdFusion

ASP

<% Session("prodID") = Request.QueryString("product") %>

Als u een HTML-formulier met de methode post en een tekstveld met de naam txtProduct gebruikt om informatie

te verzamelen, kunt u de volgende instructies geven om de informatie op te slaan in de sessievariabele:

ColdFusion

ASP

<% Session("prodID") = Request.Form("txtProduct") %>

593

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

URL-parameters in de kolom Runtimewaarde:

Formulierparameters in de kolom Runtimewaarde:

5 Klik op Testen om de database te verbinden en een instantie van de recordset te maken.

Als de SQL-instructie variabelen bevat, moet u ervoor zorgen dat de kolom Standaardwaarde van het vak Variabelen

geldige testwaarden bevat voordat u op Testen klikt.

Als de instructie is geslaagd, wordt een tabel met de gegevens in de recordset weergegeven. Elke rij bevat een record en

elke kolom stelt een veld in die record voor. Klik op OK om de recordset te wissen.

6 Klik op OK als u tevreden bent met uw werk.

Opties voor het dialoogvenster Geavanceerde recordset (ColdFusion)

Gebruik het dialoogvenster Geavanceerde recordset om aangepaste SQL-query's te schrijven, of gebruik de structuur

Database-items om SQL-query's te schrijven met een wijs-en-klik-interface.

1 Voer in het vak Naam een naam voor de recordset in.

Dikwijls wordt het voorvoegsel rs vóór recordsetnamen geplaatst om ze te onderscheiden van andere objectnamen in

de code. Bijvoorbeeld:

rsPressReleases

Recordsetnamen mogen alleen letters, cijfers en het onderstrepingsteken (_) bevatten. U mag geen speciale tekens of

spaties gebruiken.

Als u een recordset voor een ColdFusion-component definieert (dus als op dat moment een CFC-bestand in

Dreamweaver is geopend), selecteert u een bestaande CFC-functie in het pop-upmenu Functie of klikt u op de knop

Nieuwe functie om een nieuwe functie te maken.

Opmerking: Het pop-upmenu Functie is alleen beschikbaar als het huidige document een CFC-bestand is en als u toegang

hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd.

De recordset wordt in de functie gedefinieerd.

2 Selecteer een gegevensbron in het pop-upmenu Gegevensbron.

Als het pop-upmenu geen gegevensbronnen bevat, moet u een ColdFusion-gegevensbron maken.

3 Voer in de vakken Gebruikersnaam en Wachtwoord de gebruikersnaam en het wachtwoord voor de ColdFusion-

toepassingsserver in als dat is vereist.

Soms moet u voor gegevensbronnen in ColdFusion een gebruikersnaam en een wachtwoord opgeven om toegang te

krijgen. Als u geen gebruikersnaam en wachtwoord hebt om toegang te krijgen tot een gegevensbron in ColdFusion,

neemt u contact op met de ColdFusion-beheerder van uw organisatie.

4 Voer een SQL-instructie in het tekstgebied SQL in of gebruik de grafische structuur Database-items onder in het

dialoogvenster om een SQL-instructie uit de gekozen recordset op te bouwen.

Servermodel Runtimewaarde-expressie voor URL-parameter

ASP Request.QueryString(“formFieldName”)

PHP $_GET['formFieldName']

Servermodel Runtimewaarde-expressie voor formulierparameter

ASP Request.Form(“formFieldName”)

PHP $_POST['formFieldName']

594

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

5 (Optioneel) Ga als volgt te werk om de SQL-instructie op te bouwen met behulp van de grafische structuur

Database-items:

• Zorg ervoor dat het tekstgebied SQL leeg is.

• Vouw de elementen van de structuur uit tot u het gewenste databaseobject hebt gevonden, bijvoorbeeld een kolom

in een tabel.

• Selecteer het databaseobject en klik op een van de knoppen aan de rechterzijde van de structuur.

Als u bijvoorbeeld een tabelkolom selecteert, zijn de knoppen SELECT, WHERE en ORDER BY beschikbaar. Klik op

een van de knoppen om de desbetreffende expressie aan de SQL-instructie toe te voegen.

Als de SQL-instructie parameters bevat, definieert u de waarden daarvan in het gebied Parameters door op de

plusknop (+) te klikken en de naam en de standaardwaarde (de waarde die de parameter krijgt als geen runtimewaarde

wordt geretourneerd) van de variabele in te voeren.

Als de SQL-instructie parameters bevat, moet u ervoor zorgen dat de kolom Standaardwaarde van het vak Parameters

geldige testwaarden bevat.

Met de paginaparameters kunt u standaardwaarden opgeven voor verwijzingen naar runtimewaarden in de SQL die u

schrijft. Met de volgende SQL-instructie wordt bijvoorbeeld een werknemersrecord geselecteerd op basis van de

waarde van de werknemers-id. U kunt deze parameter een standaardwaarde geven om ervoor te zorgen dat altijd een

runtimewaarde wordt geretourneerd. In dit voorbeeld verwijst

FormFieldName naar een formulierveld waarin de

gebruiker een werknemers-id invoert:

SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))

Het dialoogvenster Paginaparameters toevoegen zal dan een naam-/waardecombinatie bevatten, zoals bijvoorbeeld:

De runtimewaarde is gewoonlijk een URL of formulierparameter die een gebruiker in een HTML-formulierveld

invoert.

6 Klik op Testen om de database te verbinden en een instantie van de recordset te maken.

Als de SQL-instructie runtimeverwijzingen bevat, moet u ervoor zorgen dat de kolom Standaardwaarde van het veld

Paginaparameters geldige testwaarden bevat voordat u op Testen klikt.

Als de instructie is geslaagd, wordt een tabel met de gegevens in de recordset weergegeven. Elke rij bevat een record en

elke kolom stelt een veld in die record voor. Klik op OK om de recordset te wissen.

7 Klik op OK als u tevreden bent met uw werk.

Parameters definiëren in een SQL-instructie (ColdFusion)

Definieer parameters in een SQL-instructie. De standaardwaarde is de waarde die de parameter moet gebruiken als

geen runtimewaarde wordt geretourneerd.

1 Selecteer een parameternaam in het pop-upmenu Naam.

2 Voer een standaardwaarde voor de parameter in het tekstvak Standaardparameter in en klik op OK.

Naam Standaardwaarden

FormFieldName

0001

595

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

Parameters definiëren in een SQL-instructie (PHP)

Definieer parameters in een SQL-instructie. De standaardwaarde is de waarde die de parameter moet gebruiken als

geen runtimewaarde wordt geretourneerd.

1 Typ een parameternaam in het vakje Naam.

2 Voer een standaardwaarde voor de parameter in het vakje Standaardparameter in.

3 Voer een runtimewaarde voor een parameter in het vakje Runtimewaarde in en klik op OK.

SQL-query's maken met de structuur Database-items

In plaats van handmatig SQL-instructies in het vakje SQL te typen, kunt u de wijs-en-klik-interface van Database-

items gebruiken om complexe SQL-query's te maken. Met de structuur Database-items kunt u databaseobjecten

selecteren en ze koppelen met behulp van de SQL SELECT-, WHERE- en ORDER BY-expressies. Wanneer u een SQL-

query hebt gemaakt, kunt u eventuele variabelen definiëren in de sectie Variabelen van het dialoogvenster.

In de volgende twee voorbeelden worden twee SQL-instructies beschreven en wordt beschreven hoe u deze instructies

maakt met de structuur Database-items van het dialoogvenster Geavanceerde recordset.

Voorbeeld: Een tabel selecteren

In dit voorbeeld wordt de hele inhoud van de tabel Employees geselecteerd. De SQL-instructie voor het definiëren van

de query, luidt als volgt:

SELECT * FROM Employees

Ga als volgt te werk om deze query te maken.

1 Vouw het element Tabellen uit om alle tabellen in de geselecteerde database weer te geven.

2 Selecteer de tabel Employees.

3 Klik op de knop Selecteren.

4 Klik op OK om de recordset aan het paneel Bindingen toe te voegen.

Voorbeeld: Specifieke rijen in een tabel selecteren en de resultaten ordenen

In het volgende voorbeeld worden twee rijen in de tabel Employees geselecteerd en wordt het taaktype geselecteerd

met een variabele die u moet definiëren. Vervolgens worden de resultaten op werknemersnaam geordend.

SELECT emplNo, emplName

FROM Employees

WHERE emplJob = 'varJob'

ORDER BY emplName

1 Vouw het element Tabellen uit om alle tabellen in de geselecteerde database weer te geven. Vouw vervolgens de

tabel

Employees uit om de afzonderlijke tabelrijen weer te geven.

2 Bouw de SQL-instructie als volgt op:

• Selecteer emplNo en klik op de knop Selecteren.

• Selecteer emplName en klik op de knop SELECT.

• Selecteer emplJob en klik op de knop WHERE.

• Selecteer emplName en klik op de knop ORDER BY.

3 Plaats de invoegpositie achter WHERE emplJob in het SQL-tekstgebied en typ ='varJob' (inclusief het 'is gelijk'-

teken).

596

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

4 Definieer de variabele 'varJob' door op de plusknop (+) in het gebied Variabelen te klikken en de volgende

waarden in de kolommen Naam, Standaardwaarde en Runtime waarde in te voeren:

varJob, CLERK,

Request("job").

5 Klik op OK om de recordset aan het paneel Bindingen toe te voegen.

URL-parameters definiëren

URL-parameters slaan opgehaalde informatie-invoer van gebruikers op. Voordat u begint, moet u ervoor zorgen dat

u een formulier- of URL-parameter aan de server doorgeeft. Nadat u de URL-variabele hebt gedefinieerd, kunt u de

waarde ervan op de geselecteerde pagina gebruiken.

1 Ga naar het documentvenster en open de pagina waarop de variabele gebruikt zal worden.

2 Kies Venster > Bindingen om het paneel Bindingen weer te geven.

3 Klik in het paneel Bindingen op de plusknop (+) en kies een van de volgende opties in het snelmenu:

4 Voer in het dialoogvenster URL-variabele de naam van de URL-variabele in het vakje in en klik op OK.

De naam van de URL-variabele is doorgaans de naam van het HTML-formulierveld of het object dat wordt gebruikt

om deze waarde te verkrijgen.

5 De URL-variabele wordt in het paneel Bindingen weergegeven.

Meer Help-onderwerpen

“Over URL- en formulierparameters” op pagina 583

“Dynamische inhoud toevoegen aan pagina's” op pagina 604

“URL-parameters” op pagina 683

“ColdFusion-servervariabelen” op pagina 587

Formulierparameters definiëren

Formulierparameters slaan opgehaalde informatie op die in de HTTP-aanvraag voor een webpagina is opgenomen.

Als u een formulier maakt dat de methode

POST gebruikt, worden de gegevens die door het formulier zijn verzonden,

doorgegeven aan de server. Voordat u begint, moet u ervoor zorgen dat u een formulierparameter aan de server

doorgeeft. Wanneer u de formulierparameter als inhoudsbron hebt gedefinieerd, kunt u de waarde ervan op de pagina

gebruiken.

1 Ga naar het documentvenster en open de pagina waarop de variabele gebruikt zal worden.

2 Kies Venster > Bindingen om het paneel Bindingen weer te geven.

3 Klik in het paneel Bindingen op de plusknop (+) en kies een van de volgende opties in het snelmenu:

Documenttypen Menu-item in paneel Bindingen voor URL-variabele

ASP Request-variabele > Request.QueryString

ColdFusion URL-variabele

PHP URL-variabele

597

DREAMWEAVER GEBRUIKEN

Pagina's dynamisch maken

Laatst bijgewerkt 2/5/2011

4 Voer in het dialoogvenster Formuliervariabele de naam van de formuliervariabele in en klik op OK. De naam van

de formuliervariabele is doorgaans de naam van het HTML-formulierveld of het object dat wordt gebruikt om deze

waarde te verkrijgen.

De formuliervariabele wordt in het paneel Bindingen weergegeven.

Meer Help-onderwerpen

“Over dynamische inhoudsbronnen” op pagina 582

“Over URL- en formulierparameters” op pagina 583

“Servervariabelen definiëren” op pagina 599

Sessievariabelen definiëren

Met sessievariabelen kunt u informatie opslaan en weergeven die gedurende het bezoek van een gebruiker (een

gebruikerssessie) wordt vastgehouden. De server maakt voor elke gebruiker een afzonderlijk sessieobject en

onderhoudt dat gedurende een ingestelde periode of tot het object expliciet wordt beëindigd.

Voordat u sessievariabelen voor een pagina definieert, moet u ze in de broncode maken. Wanneer u een sessievariabele

in de broncode van de webtoepassing hebt gemaakt, kunt u met Dreamweaver de waarde ervan ophalen en op een

webpagina gebruiken.

1 Maak een sessievariabele in de broncode en ken daar een waarde aan toe.

Zo wordt in het volgende ColdFusion-voorbeeld een sessie gestart met de naam

username, en kent daaraan de waarde

Cornelius toe:

2 Kies Venster > Bindingen om het paneel Bindingen weer te geven.

3 Klik op de plusknop (+) en selecteer Sessievariabele in het pop-upmenu.

4 Voer de naam in van de variabele die u in de broncode van de toepassing hebt gedefinieerd, en klik op OK.

Documenttypen Menu-item in paneel Bindingen voor formuliervariabele

ASP Request-variabele > Request.Form

ColdFusion Formuliervariabele

PHP Formuliervariabele

643

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

De zoekpagina gebruikt een formuliervariabele of een URL-parameter om informatie aan de resultatenpagina door te

geven.

4 In het vierde vak voert u de naam in van het formulierobject waarin de zoekparameter op de zoekpagina wordt

opgeslagen.

De naam van het object wordt gekopieerd als de naam van de formuliervariabele of URL-parameter. Als u de naam

wilt weten, gaat u naar de zoekpagina, klikt u op het formulierobject op het formulier om het object te selecteren, en

leest u de naam van het object af in de eigenschappencontrole.

Stel dat u een recordset wilt maken die alleen avontuurlijke reizen naar een specifiek land bevat. Stel dat er in de tabel

een kolom met de naam

TRIPLOCATION voorkomt. Ga er eveneens van uit dat het HTML-formulier op de zoekpagina

de methode

GET gebruikt en een menuobject Locatie bevat dat een lijst met landen weergeeft. In het volgende

voorbeeld ziet u hoe de sectie Filter er moet uitzien:

5 (Optioneel) Klik op Testen, voer een testwaarde in en klik op OK om de database te verbinden en een instantie van

de recordset te maken.

De testwaarde simuleert de waarde die anders door de zoekpagina zou worden geretourneerd. Klik op OK om de

testrecordset te sluiten.

6 Klik op OK als u tevreden bent met de recordset.

Op de pagina wordt een script ingevoegd dat op de server is opgeslagen en dat elke record in de databasetabel

controleert wanneer het op de server wordt uitgevoerd. Als het opgegeven veld in een record voldoet aan de

filtervoorwaarde, wordt de record in de recordset opgenomen. Het script stelt een recordset samen die alleen de

zoekresultaten bevat.

In de volgende stap wordt de recordset op de resultatenpagina weergegeven. Zie “De zoekresultaten weergeven” op

pagina 644 voor meer informatie.

Een geavanceerde resultatenpagina samenstellen

Als de zoekpagina meerdere zoekparameters bij de server indient, moet u een SQL-query voor de resultatenpagina

schrijven en de zoekparameters in SQL-variabelen gebruiken.

Opmerking: Als u maar één zoekvoorwaarde hebt, kunt u het dialoogvenster Eenvoudige recordset gebruiken om de

recordset te definiëren (zie “Een basisresultatenpagina samenstellen” op pagina 641).

1 Open de resultatenpagina in Dreamweaver en maak een recordset door het paneel Bindingen te openen (Venster >

Bindingen), op de plusknop te klikken (+) en Recordset in het pop-upmenu te kiezen.

2 Controleer of het dialoogvenster Geavanceerde recordset wordt geopend.

Het geavanceerde dialoogvenster bevat een tekstgebied waarin SQL-instructies kunnen worden ingevoerd. Als in

plaats daarvan het eenvoudige dialoogvenster wordt geopend, klikt u op de knop Geavanceerd om over te schakelen

naar het geavanceerde dialoogvenster.

3 Voer een naam voor de recordset in en selecteer een verbinding.

De verbinding moet een verbinding zijn met een database die gegevens bevat waarin de gebruiker kan zoeken.

4 Voer een SELECT-instructie in het tekstgebied SQL in.

644

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Zorg ervoor dat de instructie een WHERE-clausule met variabelen bevat om de zoekparameters in op te slaan. In het

volgende voorbeeld worden de variabelen

varLastName en varDept genoemd:

SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬

WHERE LASTNAME LIKE 'varLastName' ¬

AND DEPARTMENT LIKE 'varDept'

U kunt typewerk besparen door gebruik te maken van de structuur met database-items, onder in het dialoogvenster

Geavanceerde recordset. Zie “Een geavanceerde recordset definiëren door SQL te schrijven” op pagina 591 voor

instructies.

Raadpleeg voor hulp bij het werken met de SQL-syntaxis de SQL primer op

www.adobe.com/go/learn_dw_sqlprimer_nl.

5 Geef de SQL-variabelen de waarden van de zoekparameters. Daartoe klikt u op de plusknop (+) in het gebied

Variabelen en voert u de naam van de variabelen in, de standaardwaarde (de waarde die de variabele krijgt als geen

runtime-waarde wordt geretourneerd) en een runtime-waarde (gewoonlijk een serverobject dat een waarde bevat

die door een browser wordt verzonden, bijvoorbeeld een request-variabele).

In het volgende ASP-voorbeeld gebruikt het HTML-formulier op de zoekpagina de methode

GET en bevat het

formulier een tekstveld met de naam LastName en een tekstveld met de naam Department:

In ColdFusion zouden de runtime waarden

#LastName# en #Department# zijn. In PHP zouden de runtime waarden

$_REQUEST["LastName"] en $_REQUEST["Department"] zijn.

6 (Optioneel) Klik op Testen om een instantie van de recordset te maken met de standaardwaarden voor de

variabelen.

De standaardwaarden simuleren de waarden die anders door de zoekpagina zouden worden geretourneerd. Klik op

OK om de testrecordset te sluiten.

7 Klik op OK als u tevreden bent met de recordset.

De SQL-query wordt in de pagina ingevoegd.

In de volgende stap wordt de recordset op de resultatenpagina weergegeven.

De zoekresultaten weergeven

Wanneer u een recordset hebt gemaakt die de zoekresultaten bevat, moet u de informatie op de resultatenpagina

weergeven. Het weergeven van de records kan een eenvoudige kwestie zijn van het slepen van afzonderlijke kolommen

van het paneel Bindingen naar de resultatenpagina. U kunt navigatiekoppelingen toevoegen om de recordset voor- en

achterwaarts te doorlopen, of u kunt een herhalingsgebied maken om meerdere records op de pagina weer te geven. U

kunt ook koppelingen aan een detailpagina toevoegen.

Zie “Databaserecords weergeven” op pagina 610 voor meer informatie over methoden om dynamische inhoud anders

op een pagina weer te geven dan in de vorm van resultaten in een dynamische tabel.

1 Plaats de invoegpositie waar u de dynamische tabel op de resultatenpagina wilt weergeven en kies Invoegen >

Gegevensobjecten > Dynamische gegevens > Dynamische tabel.

645

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

2 Vul het dialoogvenster Dynamische tabel in door de recordset te selecteren die u voor de opslag van de

zoekresultaten hebt gedefinieerd.

3 Klik op OK. Op de resultatenpagina wordt een dynamische tabel ingevoegd die de zoekresultaten weergeeft.

Een detailpagina maken voor een resultatenpagina

Uw set met zoek- en resultatenpagina's kan een detailpagina bevatten om meer informatie over specifieke records op

de resultatenpagina weer te geven. In dit geval wordt de resultatenpagina eveneens als hoofdpagina gekopieerd in een

hoofd-/detailpaginaset.

Meer Help-onderwerpen

“In één bewerking hoofd- en detailpagina's maken” op pagina 638

“De zoekpagina samenstellen” op pagina 640

“Een basisresultatenpagina samenstellen” op pagina 641

Een koppeling maken om een gerelateerde pagina te openen (ASP)

U kunt een koppeling maken die een aanverwante pagina opent en bestaande parameters aan die pagina doorgeeft.

Het servergedrag is alleen beschikbaar wanneer het ASP-servermodel wordt gebruikt.

Voordat u een servergedrag Ga naar aanverwante pagina aan een pagina toevoegt, moet u ervoor zorgen dat de pagina

formulier- of URL-parameters van een andere pagina ontvangt. Het servergedrag heeft als taak om deze parameters

door te geven aan een derde pagina. U kunt bijvoorbeeld zoekparameters die u van een resultatenpagina hebt

ontvangen, aan een andere pagina doorgeven zodat de gebruiker de zoekparameters niet nogmaals hoeft in te voeren.

U kunt eveneens tekst of een afbeelding op de pagina selecteren die als koppeling naar de aanverwante pagina fungeert,

of u kunt de aanwijzer op de pagina plaatsen zonder iets te selecteren, waarna de koppelingstekst wordt ingevoegd.

1 Klik in het vak Ga naar aanverwante pagina op Bladeren en zoek het bestand van de aanverwante pagina.

Als de huidige pagina gegevens naar zichzelf verzendt, voert u de bestandsnaam van de huidige pagina in.

2 Als de parameters die u wilt doorgeven, rechtstreeks zijn ontvangen vanuit een HTML-formulier met de methode

GET of in de URL van de pagina worden vermeld, selecteert u de optie URL-parameters.

3 Als de parameters die u wilt doorgeven, rechtstreeks zijn ontvangen vanuit een HTML-formulier met de methode

POST, selecteert u de optie Formulierparameters.

4 Klik op OK.

Wanneer op de nieuwe koppeling wordt geklikt, geeft de pagina de parameters met een queryreeks aan de aanverwante

pagina door.

Meer Help-onderwerpen

“Informatie van gebruikers verzamelen” op pagina 682

Een pagina voor het invoegen van records maken

Over het samenstellen van recordinvoegpagina's

Uw toepassing kan een pagina bevatten waarmee gebruikers nieuwe records in een database kunnen invoegen.

646

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Een invoegpagina bestaat uit twee elementen:

• Een HTML-formulier waarmee gebruikers gegevens kunnen invoeren;

• Een servergedrag Record invoegen waarmee de database wordt bijgewerkt.

Wanneer een gebruiker op een formulier op Verzenden klikt, voegt het servergedrag records in een databasetabel in.

U kunt deze elementen in een enkele bewerking toevoegen met behulp van het gegevensobject Formulier Record

invoegen. U kunt ze echter ook afzonderlijk toevoegen met de formuliergereedschappen van Dreamweaver en het

paneel Servergedrag.

Opmerking: De invoegpagina kan slechts één servergedrag voor het bewerken van records tegelijk bevatten. U kunt

bijvoorbeeld niet zowel een servergedrag Record bijwerken als een servergedrag Record verwijderen aan de

invoegpagina toevoegen.

Een invoegpagina bloksgewijs samenstellen

U kunt een invoegpagina ook samenstellen met behulp van formuliergereedschappen en servergedragingen.

Meer Help-onderwerpen

“Webformulieren maken” op pagina 685

Een HTML-formulier aan een invoegpagina toevoegen

1 Maak een dynamische pagina (Bestand > Nieuw > Lege pagina) en deel de pagina in met de

ontwerpgereedschappen van Dreamweaver.

2 Voeg een HTML-formulier toe door de invoegpositie te plaatsen waar u het formulier wilt weergeven en

Invoegen > Formulier > Formulier te kiezen.

Op de pagina wordt een leeg formulier gemaakt. Misschien moet u onzichtbare elementen inschakelen (Weergave >

Visuele hulpmiddelen > Onzichtbare elementen) om de grenzen van het formulier te zien. Deze worden met dunne

rode lijnen aangeduid.

3 Geef het HTML-formulier een naam door te klikken op de tag <form> onderaan in het documentvenster om het

formulier te selecteren. Open vervolgens de eigenschappencontrole (Venster > Eigenschappen) en voer een naam

in het vak Formuliernaam in.

U hoeft geen

action- of method-kenmerk voor het formulier op te geven om op te geven hoe de recordgegevens

moeten worden verzonden en waar ze naartoe moeten worden gestuurd wanneer de gebruiker op de knop Verzenden

klikt. Deze kenmerken zijn al ingesteld door het servergedrag Record invoegen.

4 Voeg een formulierobject, bijvoorbeeld een tekstveld, toe (Invoegen > Formulier > Tekstveld) voor elke kolom in

de databasetabel waarin u records wilt invoegen.

De formulierobjecten dienen voor de gegevensinvoer. Gewoonlijk worden tekstvelden voor dit doel gebruikt, maar u

kunt ook menu's, opties en keuzerondjes gebruiken.

5 Voeg een knop Verzenden aan het formulier toe (Invoegen > Formulier > Knop).

U kunt de label van de knop Verzenden veranderen door de knop te selecteren, de eigenschappencontrole te openen

(Venster > Eigenschappen) en een nieuwe waarde in te voeren in het vak Tag

Een servergedrag toevoegen om records in een databasetabel in te voegen (ColdFusion)

1 Klik in het paneel Servergedrag (Venster > Servergedrag) op de plusknop (+) en selecteer Record invoegen in het

pop-upmenu.

647

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

2 Selecteer een formulier in het pop-upmenu 'Waarden verzenden vanaf'.

3 Selecteer in het pop-upmenu Gegevensbron een verbinding met de database.

4 Voer uw gebruikersnaam en wachtwoord in.

5 Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin u de record wilt invoegen.

6 Geef een databasekolom op waarin u de record wilt invoegen, selecteer in het pop-upmenu Waarde het

formulierobject waarmee u de record wilt invoegen en selecteer vervolgens in het pop-upmenu Verzenden als een

gegevenstype voor het formulierobject.

Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties).

Herhaal de procedure voor elk formulierobject in het formulier.

7 Voer in het vak 'Na invoegen, ga naar' de pagina in die u wilt openen nadat de record in de tabel is ingevoegd, of

klik op de knop Bladeren om het bestand te zoeken.

8 Klik op OK.

Dreamweaver voegt servergedrag aan de pagina toe waarmee gebruikers records in een database kunnen invoegen

door het HTML-formulier in te vullen en op de knop Verzenden te klikken.

Een servergedrag toevoegen om records in een databasetabel in te voegen (ASP)

1 Klik in het paneel Servergedrag (Venster > Servergedrag) op de plusknop (+) en selecteer Record invoegen in het

pop-upmenu.

2 Selecteer in het pop-upmenu Verbinding een verbinding met de database.

Klik op de knop Definiëren als u een verbinding moet definiëren.

3 Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin de record moet worden ingevoegd.

4 Voer in het vak 'Na invoegen, ga naar' de pagina in die u wilt openen nadat de record in de tabel is ingevoegd, of

klik op de knop Bladeren om het bestand te zoeken.

5 Selecteer in het pop-upmenu 'Waarden ophalen uit' het HTML-formulier dat wordt gebruikt om de gegevens in te

voeren.

Dreamweaver selecteert automatisch het eerste formulier op de pagina.

6 Geef een databasekolom op waarin u de record wilt invoegen, selecteer in het pop-upmenu Waarde het

formulierobject waarmee u de record wilt invoegen en selecteer vervolgens in het pop-upmenu Verzenden als een

gegevenstype voor het formulierobject.

Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties).

Herhaal de procedure voor elk formulierobject in het formulier.

7 Klik op OK.

Dreamweaver voegt servergedrag aan de pagina toe waarmee gebruikers records in een database kunnen invoegen

door het HTML-formulier in te vullen en op de knop Verzenden te klikken.

Als u het servergedrag wilt bewerken, opent u het paneel Servergedrag (Venster > Servergedrag) en dubbelklikt u op

het gedrag Record invoegen.

Een servergedrag toevoegen om records in een databasetabel in te voegen (PHP)

1 Klik in het paneel Servergedrag (Venster > Servergedrag) op de plusknop (+) en selecteer Record invoegen in het

pop-upmenu.

648

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

2 Selecteer een formulier in het pop-upmenu 'Waarden verzenden vanaf'.

3 Selecteer in het pop-upmenu Verbinding een verbinding met de database.

4 Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin u de record wilt invoegen.

5 Geef een databasekolom op waarin u de record wilt invoegen, selecteer in het pop-upmenu Waarde het

formulierobject waarmee u de record wilt invoegen en selecteer vervolgens in het pop-upmenu Verzenden als een

gegevenstype voor het formulierobject.

Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties).

Herhaal de procedure voor elk formulierobject in het formulier.

6 Voer in het vak 'Na invoegen, ga naar' de pagina in die u wilt openen nadat de record in de tabel is ingevoegd, of

klik op de knop Bladeren om het bestand te zoeken.

7 Klik op OK.

Dreamweaver voegt servergedrag aan de pagina toe waarmee gebruikers records in een database kunnen invoegen

door het HTML-formulier in te vullen en op de knop Verzenden te klikken.

De invoegpagina samenstellen in één bewerking

1 Open de pagina in de ontwerpweergave en kies Invoegen > Gegevensobjecten > Record invoegen > Wizard

Formulier Record invoegen

2 Selecteer in het pop-upmenu Verbinding een verbinding met de database. Klik op Definiëren als u een verbinding

moet definiëren.

3 Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin de record moet worden ingevoegd.

4 Als u ColdFusion gebruikt, voert u een gebruikersnaam en wachtwoord in.

5 Voer in het vak 'Na invoegen, ga naar' de pagina in die u wilt openen nadat de record in de tabel is ingevoegd, of

klik op de knop Bladeren om het bestand te zoeken.

6 Geef in het gebied Formuliervelden de formulierobjecten op die u in het HTML-formulier van de invoegpagina wilt

opnemen, en geef op welke kolommen in de databasetabel elk formulierobject bijwerkt.

Standaard maakt Dreamweaver een formulierobject voor elke kolom in de databasetabel. Als de database automatisch

unieke sleutel-id's genereert voor elke nieuwe record, verwijdert u het formulierobject dat correspondeert met de

sleutelkolom door het object in de lijst te selecteren en op de minknop (-) te klikken. Hiermee sluit u het risico uit dat

de gebruiker van het formulier een bestaande id-waarde invoert.

U kunt de volgorde van de formulierobjecten in het HTML-formulier wijzigen. Daartoe selecteert u het

formulierobject in de lijst en klikt u op de pijl-omhoog of de pijl-omlaag, rechts in het dialoogvenster.

7 Geef op hoe elk gegevensinvoerveld in het HMTL-formulier moet worden weergegeven. Daartoe klikt u in een rij

in de tabel Formuliervelden en voert u de volgende informatie in de vakken onder de tabel in:

• Voer in het vak Label een beschrijvende label in die naast het gegevensinvoerveld wordt weergegeven. Standaard

geeft Dreamweaver de naam van de tabelkolom in de label weer.

• Selecteer in het pop-upmenu Weergeven als een formulierobject dat als gegevensinvoerveld moet fungeren. U kunt

kiezen uit Tekstveld, Tekstgebied, Menu, Selectievakje, Groep keuzerondjes en Tekst. Selecteer Tekst voor alleen-

lezenvermeldingen. U kunt ook Wachtwoordveld, Bestandsveld en Verborgen veld selecteren.

Opmerking: Verborgen velden worden aan het einde van het formulier ingevoegd.

• Selecteer in het pop-upmenu Verzenden als de gegevensindeling die door de databasetabel wordt geaccepteerd. Als

de tabelkolom bijvoorbeeld alleen numerieke gegevens accepteert, selecteert u Numeriek.

649

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

• Stel de eigenschappen van het formulierobject in. De mogelijke opties hangen af van het formulierobject dat u als

gegevensinvoerveld hebt geselecteerd. Voor tekstvelden, tekstgebieden en tekst kunt u een beginwaarde invoeren.

Voor menu's en groepen keuzerondjes opent u een ander dialoogvenster waarin u de eigenschappen kunt instellen.

Voor opties schakelt u de optie Ingeschakeld of Uitgeschakeld in.

8 Klik op OK.

Dreamweaver voegt zowel een HTML-formulier als het servergedrag Record invoegen aan de pagina toe. De

formulierobjecten worden in de vorm van een basistabel ingedeeld. U kunt de indeling wijzigen met de pagina-

ontwerpgereedschappen van Dreamweaver. (Zorg ervoor dat alle formulierobjecten binnen de grenzen van het

formulier blijven.)

Als u het servergedrag wilt bewerken, opent u het paneel Servergedrag (Venster > Servergedrag) en dubbelklikt u op

het gedrag Record invoegen.

Pagina's maken om een record bij te werken

Over recordupdatepagina's

Uw toepassing kan een set pagina's bevatten waarmee gebruikers bestaande records in een databasetabel kunnen

bijwerken. De pagina's bestaan gewoonlijk uit een zoekpagina, een resultatenpagina en een updatepagina. Met de zoek-

en resultatenpagina kunnen gebruikers de desbetreffende record ophalen en met de updatepagina kunnen ze de record

wijzigen.

De bij te werken record zoeken

Wanneer gebruikers een record willen bijwerken, moeten ze die record eerst in de database vinden. U hebt dus een

zoek- en resultatenpagina nodig om de updatepagina te kunnen gebruiken. De gebruiker voert zoekcriteria op de

zoekpagina in en selecteert de record op de resultatenpagina. Als de gebruiker op de resultatenpagina op de record

klikt, wordt de updatepagina geopend en wordt de record weergegeven in een HTML-formulier.

Meer Help-onderwerpen

“Zoekpagina's en resultatenpagina's maken” op pagina 639

Koppelingen maken met de updatepagina

Wanneer u de zoek- en resultatenpagina's hebt gemaakt, moet u koppelingen aan de resultatenpagina's toevoegen om

de updatepagina te kunnen openen. Daarna wijzigt u de koppelingen zodat ze de id's doorgeven van de records die de

gebruiker selecteert. Op de updatepagina wordt deze id gebruikt om de gevraagde record in de database te zoeken en

weer te geven.

Voor het openen van de updatepagina en het doorgeven van een record-id gebruikt u dezelfde werkwijze die u ook

gebruikt om een detailpagina te openen en een record door te geven. Zie “Koppelingen maken met de detailpagina”

op pagina 634 voor meer informatie.

Meer Help-onderwerpen

“URL-parameters” op pagina 683

650

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

De bij te werken record ophalen

Nadat de resultatenpagina aan de updatepagina een record-ID heeft doorgegeven die aangeeft welke record moet

worden bijgewerkt, moet de updatepagina de parameter lezen, de record opvragen van de databasetabel en die tijdelijk

opslaan in een recordset.

1 Maak een pagina in Dreamweaver en sla deze op.

Deze pagina wordt de updatepagina.

2 Klik in het paneel Bindingen (Venster > Bindingen) op de plusknop (+) en selecteer Recordset.

Als het geavanceerde dialoogvenster wordt geopend, klikt u op Eenvoudig. Het geavanceerde dialoogvenster bevat een

tekstgebied waarin SQL-instructies kunnen worden ingevoerd. Het eenvoudige dialoogvenster bevat zo'n tekstgebied niet.

3 Geef de recordset een naam en geef met behulp van de pop-upmenu's Verbinding en Tabel op waar de bij te werken

gegevens zich bevinden.

4 Klik op Geselecteerd en selecteer een sleutelkolom (gewoonlijk de kolom met de record-id) en de kolommen met

de bij te werken gegevens.

5 Configureer het gebied Filter zo dat de waarde van de sleutelkolom gelijk is aan de waarde van de corresponderende

URL-parameter die door de resultatenpagina is doorgegeven.

Met dit filter maakt u een recordset die alleen de record bevat die door de resultatenpagina is opgegeven. Als de

sleutelkolom bijvoorbeeld record-id-gegevens bevat en de naam PRID heeft en als de resultatenpagina de

corresponderende record-id-gegevens doorgeeft in de URL-parameter met de naam

id, moet het gebied Filter er zo

uitzien als in het volgende voorbeeld wordt weergegeven:

6 Klik op OK.

Wanneer de gebruiker een record op de resultatenpagina selecteert, genereert de bijwerkpagina een recordset die

alleen de geselecteerde record bevat.

De updatepagina bloksgewijs invullen

Een updatepagina bevat drie elementen:

• Een gefilterde recordset om de record uit een databasetabel op te halen

• Een HTML-formulier waarmee gebruikers de gegevens van een record kunnen wijzigen

• Een servergedrag Record bijwerken om de databasetabel bij te werken

U kunt de laatste twee basiselementen van een updatepagina afzonderlijk toevoegen met de formuliergereedschappen

en het paneel Servergedrag.

Meer Help-onderwerpen

“De bij te werken record ophalen” op pagina 650

“Webformulieren maken” op pagina 685

Een HTML-formulier aan een updatepagina toevoegen

1 Maak een pagina (Bestand > Nieuw > Lege pagina). Dit wordt de updatepagina.

651

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

2 Deel de pagina in met de ontwerpgereedschappen van Dreamweaver.

3 Voeg een HTML-formulier toe door de invoegpositie te plaatsen waar u het formulier wilt weergeven en

Invoegen > Formulier > Formulier te kiezen.

Op de pagina wordt een leeg formulier gemaakt. Misschien moet u onzichtbare elementen inschakelen (Weergave >

Visuele hulpmiddelen > Onzichtbare elementen) om de grenzen van het formulier te zien. Deze worden met dunne

rode lijnen aangeduid.

4 Geef het HTML-formulier een naam door te klikken op de tag <form> onderaan in het documentvenster om het

formulier te selecteren. Open vervolgens de eigenschappencontrole (Venster > Eigenschappen) en voer een naam

in het vak Formuliernaam in.

U hoeft geen

action- of method-kenmerk voor het formulier op te geven om door te geven hoe de recordgegevens

moeten worden verzonden en waar ze naartoe moeten worden gestuurd wanneer de gebruiker op de knop Verzenden

klikt. Deze kenmerken zijn al ingesteld door het servergedrag Record bijwerken.

5 Voeg een formulierobject, bijvoorbeeld een tekstveld, toe (Invoegen > Formulier > Tekstveld) voor elke kolom in

de databasetabel die u wilt bijwerken.

De formulierobjecten dienen voor de gegevensinvoer. Gewoonlijk worden tekstvelden voor dit doel gebruikt, maar u

kunt ook menu's, opties en keuzerondjes gebruiken.

Elk formulierobject moet een corresponderende kolom hebben in de recordset die u eerder hebt gedefinieerd. De enige

uitzondering is de kolom met de unieke sleutel. Deze hoeft geen corresponderend formulierobject te hebben.

6 Voeg een knop Verzenden aan het formulier toe (Invoegen > Formulier > Knop).

U kunt de label van de knop Verzenden veranderen door de knop te selecteren, de eigenschappencontrole te openen

(Venster > Eigenschappen) en een nieuwe waarde in te voeren in het vak Label.

De record in het formulier weergeven

1 Zorg ervoor dat u een recordset hebt gedefinieerd voor de record die de gebruiker wilt bijwerken.

Zie “De bij te werken record ophalen” op pagina 650.

2 Koppel elk formulierobject aan gegevens in de recordset, zoals in de volgende onderwerpen wordt beschreven:

• “Dynamische inhoud weergeven in HTML-tekstvelden” op pagina 696

• “Een HTML-selectievakje dynamisch vooraf selecteren” op pagina 696

• “Een HTML-keuzerondje dynamisch vooraf inschakelen” op pagina 697

• “Een dynamisch HTML-formuliermenu invoegen of wijzigen” op pagina 695

• “Bestaande HTML-formuliermenu's dynamisch maken” op pagina 696

Een servergedrag toevoegen om de databasetabel bij te werken

1 Klik in het paneel Servergedrag (Venster > Servergedrag) op de plusknop (+) en selecteer Record bijwerken in het

pop-upmenu.

Het dialoogvenster Record bijwerken wordt geopend.

2 Selecteer een formulier in het pop-upmenu 'Waarden verzenden vanaf'.

3 Selecteer in het pop-upmenu Gegevensbron of Verbinding een verbinding met de database.

4 Voer indien nodig uw gebruikersnaam en wachtwoord in.

5 Selecteer in het pop-upmenu Tabel bijwerken de databasetabel die de record bevat die u bijwerkt.

652

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

6 (ColdFusion, PHP) Geef de databasekolom op die u wilt bijwerken, selecteer in het pop-upmenu Waarde het

formulierobject dat de kolom bijwerkt, selecteer in het pop-upmenu Verzenden als een gegevenstype voor het

formulierobject en selecteer Primaire sleutel als u deze kolom wilt aanduiden als de primaire sleutel.

Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties).

Herhaal de procedure voor elk formulierobject in het formulier.

7 (ASP) Geef in het pop-upmenu Selecteer een record uit de recordset op die de record bevat die in het HTML-

formulier wordt weergegeven. Selecteer in het pop-upmenu 'Kolom voor unieke sleutel' een sleutelkolom

(gewoonlijk de kolom met de record-id) om de record in de databasetabel te identificeren. Selecteer de optie

Numeriek als de waarde een getal is. Een sleutelkolom accepteert gewoonlijk alleen numerieke waarden, maar soms

ook tekstwaarden.

8 Voer in het vak 'Na bijwerken of Na succes, ga naar' de pagina in die u wilt openen nadat de record in de tabel is

bijgewerkt, of klik op de knop Bladeren om het bestand te zoeken.

9 (ASP) Geef de bij te werken databasekolom op, selecteer in het pop-upmenu Waarde het formulierobject waarmee

u de record wilt bijwerken en selecteer vervolgens in het pop-upmenu Verzenden als een gegevenstype voor het

formulierobject. Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst,

numeriek, Booleaanse opties). Herhaal de procedure voor elk formulierobject in het formulier.

10 Klik op OK.

Dreamweaver voegt een servergedrag aan de pagina toe waarmee gebruikers records in een database kunnen bijwerken

door de informatie in het HTML-formulier te wijzigen en op de knop Verzenden te klikken.

Als u het servergedrag wilt bewerken, opent u het paneel Servergedrag (Venster > Servergedrag) en dubbelklikt u op

het gedrag Record bijwerken.

De updatepagina in één bewerking voltooien

Een updatepagina bevat drie elementen:

• Een gefilterde recordset om de record uit een databasetabel op te halen

• Een HTML-formulier waarmee gebruikers de gegevens van een record kunnen wijzigen

• Een servergedrag Record bijwerken om de databasetabel bij te werken

U kunt de twee laatste elementen van een updatepagina in één bewerking toevoegen met het gegevensobject Formulier

Record bijwerken. Het gegevensobject voegt zowel een HTML-formulier als het servergedrag Record bijwerken aan de

pagina toe.

Voordat u het gegevensobject kunt gebruiken, moet uw webtoepassing de bij te werken record kunnen identificeren,

en moet uw updatepagina de record kunnen ophalen.

Wanneer het gegevensobject de elementen op de pagina heeft geplaatst, kunt u de ontwerpgereedschappen van

Dreamweaver gebruiken om het formulier aan uw eigen smaak aan te passen. Met het paneel Servergedrag kunt u het

servergedrag Record bijwerken bewerken.

Opmerking: De updatepagina kan slechts één servergedrag voor het bewerken van records tegelijk bevatten. U kunt

bijvoorbeeld niet zowel een servergedrag Record invoegen als een servergedrag Record verwijderen aan de updatepagina

toevoegen.

1 Open de pagina in de ontwerpweergave en kies Invoegen > Gegevensobjecten > Record bijwerken > Wizard

Formulier Record bijwerken.

Het dialoogvenster Formulier Record bijwerken wordt geopend.

673

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

De toegangsrechten van een pagina kopiëren en plakken naar andere pagina's op de site

1 Open de beveiligde pagina en kies het servergedrag 'Toegang tot pagina beperken' in het paneel Servergedrag (niet

de vermelding in het pop-upmenu dat u met de plusknop (+) opent).

2 Klik op de pijlknop in de rechterbovenhoek van het paneel en kies Kopiëren in het pop-upmenu.

Het servergedrag Toegang tot pagina beperken wordt naar het klembord van het systeem gekopieerd.

3 Open een andere pagina die u op dezelfde manier wilt beveiligen.

4 Klik in het paneel Servergedrag (Venster > Servergedrag) op de pijlknop in de rechterbovenhoek en kies Plakken

in het pop-upmenu.

5 Herhaal de stappen 3 en 4 voor elke pagina die u wilt beveiligen.

Toegangsrechten opslaan in de gebruikersdatabase

Dit element is alleen vereist als u wilt dat bepaalde aangemelde gebruikers andere toegangsrechten hebben. Als

gebruikers zich alleen maar hoeven aan te melden, hoeft u geen toegangsrechten op te slaan.

1 Als u bepaalde aangemelde gebruikers andere toegangsrechten wilt geven, moet u ervoor zorgen dat uw

databasetabel met gebruikers een kolom bevat waarin het toegangsrecht van iedere gebruiker is opgeslagen (Gast,

Gebruiker, Beheerder enzovoort). De toegangsrechten van iedere gebruiker moeten door de sitebeheerder in de

database worden ingevoerd.

In de meeste databasetoepassingen kunt u een kolom telkens wanneer een nieuwe record wordt gemaakt, op een

standaardwaarde instellen. Stel de standaardwaarde in op het meest gangbare toegangsrechten voor de site

(bijvoorbeeld Gast) en verander de uitzonderingen vervolgens handmatig (verander Gast bijvoorbeeld in Beheerder).

De gebruiker heeft u toegang tot alle beheerderspagina's.

2 Zorg ervoor dat iedere gebruiker in de database slechts één toegangsrecht heeft, bijvoorbeeld Gast of Beheerder, en

niet meerdere rechten, zoals Gebruiker, Beheerder. Als u meer toegangsrechten voor uw pagina's wilt instellen

(bijvoorbeeld alle gasten en beheerders mogen deze pagina bekijken), stelt u deze rechten op paginaniveau in, niet

op databaseniveau.

Gebruikers afmelden

Wanneer een gebruiker zich met succes heeft aangemeld, wordt een sessievariabele gemaakt die uit de gebruikersnaam

bestaat. Wanneer de gebruiker uw site verlaat, kunt u met het servergedrag Gebruiker afmelden de sessievariabele

wissen en de gebruiker omleiden naar een andere pagina (gewoonlijk een Tot ziens- of Dank u-pagina).

U kunt het servergedrag Gebruiker afmelden activeren wanneer de gebruiker op een koppeling klikt of wanneer een

specifieke pagina wordt geladen.

Een koppeling toevoegen waarmee gebruikers zich kunnen afmelden

1 Selecteer tekst of een afbeelding op een pagina die als koppeling kan fungeren.

2 Klik in het paneel Servergedrag (Venster > Servergedrag) op de plusknop (+) en selecteer Gebruikersverificatie >

Gebruiker afmelden.

3 Geef de pagina op die u wilt openen wanneer de gebruiker op de koppeling klikt en klik op OK.

Dit is doorgaans een Tot ziens- of een Dank u-pagina.

Gebruikers afmelden wanneer een specifieke pagina wordt geladen

1 Open de pagina die wordt geladen in Dreamweaver.

674

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Dit is doorgaans een Tot ziens- of een Dank u-pagina.

2 Klik in het paneel Servergedrag op de plusknop (+) en selecteer Gebruikersverificatie > Gebruiker afmelden.

3 Selecteer de optie 'Afmelden bij laden van pagina' en klik op OK.

Een map in uw toepassing beveiligen (ColdFusion)

Een map of site op de server beveiligen (ColdFusion)

In Dreamweaver kunt u een specifieke map in uw ColdFusion-toepassing met een wachtwoord beveiligen, ook de

hoofdmap van de toepassing. Wanneer een bezoeker van uw site een pagina in de opgegeven map opvraagt, wordt de

bezoeker naar een gebruikersnaam en een wachtwoord gevraagd. ColdFusion slaat de gebruikersnaam en het

wachtwoord in sessievariabelen op, zodat de gebruiker deze tijdens de sessie niet meer opnieuw hoeft op te geven.

Opmerking: Deze functie is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger

wordt uitgevoerd.

1 Open een ColdFusion-document in Dreamweaver en kies Opdrachten > Wizard Inloggen bij ColdFusion.

2 Voltooi de wizard Inloggen bij ColdFusion.

a Geef het volledige pad op naar de map die u wilt beveiligen en klik op Volgende.

b Selecteer in het volgende scherm een van de volgende verificatietypen:

Eenvoudige verificatie Hiermee beveiligt u uw toepassing met een enkele gebruikersnaam en één wachtwoord voor

alle gebruikers.

Windows NT-verificatie Hiermee beveiligt u uw toepassing met NT-gebruikersnamen en -wachtwoorden.

LDAP-verificatie Hiermee beveiligt u uw toepassing met gebruikersnamen en wachtwoorden die op een LDAP-server

zijn opgeslagen.

c Bepaal of u wilt dat gebruikers zich aanmelden met een ColdFusion-aanmeldingspagina of via een pop-upmenu.

d Geef in het volgende scherm de volgende instellingen op:

• Als u eenvoudige verificatie hebt geselecteerd, geeft u de gebruikersnaam en het wachtwoord op die elke bezoeker

moet invoeren.

• Als u Windows NT-verificatie hebt geselecteerd, geeft u het NT-domein op aan de hand waarvan de validatie moet

worden uitgevoerd.

• Als u LDAP-verificatie hebt geselecteerd, geeft u de LDAP-server op aan de hand waarvan de validatie moet worden

uitgevoerd.

3 Laad de nieuwe bestanden op uw externe site. De bestanden bevinden zich in de map op de lokale site.

Meer Help-onderwerpen

“ColdFusion-verbeteringen inschakelen” op pagina 701

“Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben” op pagina 671

“Een map in uw toepassing beveiligen (ColdFusion)” op pagina 674

675

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

ColdFusion-componenten gebruiken

Over ColdFusion-componenten

Met CFC-bestanden (ColdFusion component) kunt u toepassings- en bedrijfslogica in zelfstandige, herbruikbare

eenheden opnemen. Met CFC's kunt u snel en eenvoudig webservices maken.

Een CFC is een herbruikbare software-eenheid, geschreven in CFML (ColdFusion markup language), die het

hergebruik en onderhoud van uw code eenvoudiger maakt.

U kunt Dreamweaver gebruiken om met CFC's te werken. Raadpleeg de ColdFusion-documentatie vanuit

Dreamweaver (Help > ColdFusion gebruiken) voor informatie over CFC-tags en -syntaxis.

Opmerking: U kunt CFC's alleen gebruiken met ColdFusion MX of hoger. CFC's worden niet ondersteund in ColdFusion 5.

CFC's zijn bedoeld om ontwikkelaars een eenvoudige maar krachtige manier te bieden om elementen van hun websites

te integreren. In het algemeen moet u componenten voor toepassings- of bedrijfslogica gebruiken. Gebruik aangepaste

tags voor presentatie-elementen, zoals aangepaste begroetingen, dynamische menu's enzovoort.

Net als met vele andere typen constructies hebben dynamische sites dikwijls baat bij onderling uitwisselbare

onderdelen. Een dynamische site kan bijvoorbeeld dezelfde query herhaaldelijk uitvoeren, of de totale prijs van

winkelwagenpagina's berekenen en deze telkens opnieuw herberekenen wanneer een item wordt toegevoegd. Deze

taken kunnen door componenten worden afgehandeld. U kunt een component herstellen, verbeteren, uitbreiden en

zelfs vervangen met een minimale invloed op de rest van uw toepassing.

Stel dat een onlinewinkel de verzendkosten berekent op basis van de prijs van de bestelling. Voor bestellingen onder

de 20 euro, wordt 4 euro verzendkosten berekend, voor bestellingen tussen 20 en 40 euro wordt 6 euro verzendkosten

berekend enzovoort. U kunt de logica voor het berekenen van de verzendkosten zowel op de winkelpagina als op de

afrekenpagina invoegen, maar in dat geval zou u HTML-presentatiecode en CFML-logica gaan mengen wat het

onderhoud en hergebruik van de code doorgaans moeilijker maakt.

U besluit om een CFC met de naam Pricing te maken, die onder andere een functie bevat met de naam

ShippingCharge. De functie heeft een prijs als argument en retourneert de verzendkosten. Als de waarde van het

argument bijvoorbeeld 32,80 is, retourneert de functie de waarde 6.

Op zowel de winkelwagenpagina als de afrekenpagina voegt u een speciale tag in om de functie

ShippingCharge te

activeren. Wanneer de pagina wordt opgevraagd, wordt de functie geactiveerd en worden de verzendkosten aan de

pagina geretourneerd.

Later kondigt het bedrijf een speciale aanbieding aan: geen verzendkosten voor alle bestellingen boven 100 euro. U

brengt de wijziging in de verzendkosten aan op één plaats: de functie

ShippingCharge van de component Pricing. Op

alle pagina's die de functie gebruiken, worden nu automatisch de juiste verzendkosten weergegeven.

Overzicht van het paneel CF-componenten (ColdFusion)

Gebruik het paneel Componenten (Venster > Componenten) om ColdFusion-componenten weer te geven en te

bewerken en om code aan de pagina toe te voegen die de functie activeert wanneer de CFM-pagina wordt opgevraagd.

Opmerking: Het paneel Componenten is alleen beschikbaar wanneer u een ColdFusion-pagina weergeeft in

Dreamweaver.

Meer Help-onderwerpen

“Webpagina's samenstellen die CFC's gebruiken” op pagina 678

676

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Een CFC maken of verwijderen in Dreamweaver

Met Dreamweaver kunt u visueel een CFC en de bijbehorende functies definiëren. Dreamweaver maakt een CFC-

bestand en voegt de noodzakelijke CFML-tags voor u in.

Opmerking: Afhankelijk van het component, moet u bepaalde code handmatig afmaken.

1 Open een ColdFusion-pagina in Dreamweaver.

2 Selecteer in het paneel Componenten (Venster > Componenten) CF-componenten in het pop-upmenu.

3 Klik op de plusknop (+) en vul het dialoogvenster Componenten maken in. Klik op OK

a Voer in de sectie Componenten de details over de component in. Hier volgt een gedeeltelijke lijst:

Naam Hier geeft u de bestandsnaam van de component op. De naam mag alleen alfanumerieke tekens en het

onderstrepingsteken (_) bevatten. Geef de bestandsextensie .CFC niet op wanneer u de naam invoert.

Map van componenten Hier geeft u op waar de component wordt opgeslagen. Selecteer de hoofdmap van de

webtoepassing op (zoals \Inetpub\wwwroot\myapp\) of een van de submappen van deze hoofdmap.

b Als u een of meer functies voor de component wilt definiëren, kiest u Functies in de lijst Sectie, klikt u op de

plusknop (+) en voert u de details van de nieuwe functie in.

Zorg ervoor dat u het type opgeeft van de waarde die wordt geretourneerd door de functie in de optie Retourtype.

Als u in het menu Toegang de optie extern kiest, wordt de functie beschikbaar als een webservice.

c Als u een of meer argumenten voor een functie wilt definiëren, kiest u Argumenten in de lijst sectie. Selecteer de

functie in het pop-upmenu, klik op de plusknop (+) en voer rechts de details van het nieuwe argument in.

4 Als u een externe ontwikkelingsserver gebruikt, laadt u het CFC-bestand en alle afhankelijke bestanden (zoals de

bestanden die worden gebruikt om een functie te implementeren of bestanden op te nemen) op de externe server.

Door de bestanden te uploaden, zorgt u ervoor dat Dreamweaver-functies als Live View en Voorvertoning in browser

correct werken.

Dreamweaver schrijft een CFC-bestand en slaat het op in de opgegeven map. De nieuwe component wordt ook in het

paneel Componenten weergegeven (nadat u op Vernieuwen hebt geklikt).

5 Als u een component wilt verwijderen, moet u het CFC-bestand handmatig van de server verwijderen.

Meer Help-onderwerpen

“Webpagina's samenstellen die CFC's gebruiken” op pagina 678

“Over ColdFusion-componenten” op pagina 675

CFC's weergeven in Dreamweaver

Dreamweaver beschikt over een manier om de ColdFusion-componenten (CFC's) die zich in uw sitemap of op de

server bevinden, visueel te bestuderen. Dreamweaver leest de CFC-bestanden en geeft gegevens over de bestanden

weer in een eenvoudig te manipuleren structuur in het paneel Componenten.

Dreamweaver zoekt naar de componenten op de testserver (zie “Verbinden met de database in Dreamweaver” op

pagina 561). Als u CFC's maakt of bestaande CFC's wijzigt, moet u ervoor zorgen dat u de CFC-bestanden op de

testserver laadt zodat ze nauwkeurig worden weergegeven in het paneel Componenten.

Verander de instellingen van de testserver als u de componenten op een andere server wilt weergeven.

677

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

U kunt de volgende informatie over uw CF-componenten weergeven:

• Geef een lijst weer met alle ColdFusion-componenten die op de server zijn gedefinieerd.

• Als u met ColdFusion MX 7 of hoger werkt, filtert u de lijst zodat alleen de CFC's in uw sitemap worden

weergegeven.

• Verken de functies en argumenten van elk component.

• Bekijk de eigenschappen van functies die als webservices fungeren.

Als u Dreamweaver wilt gebruiken om de CFC's in de hoofdmap van de server te inspecteren terwijl u ook de

sitebestanden in een andere hoofdmap van de website beheert, kunt u twee Dreamweaver-sites definiëren. Stel de

eerste site zo in dat deze naar de hoofdmap van de server wijst en laat de tweede naar de hoofdmap van de website wijzen.

Gebruik het pop-upmenu van de site in het paneel Bestanden om snel tussen de twee sites te schakelen.

Ga als volgt te werk om CFC's in Dreamweaver weer te geven:

1 Open een willekeurige ColdFusion-pagina in Dreamweaver.

2 Selecteer in het paneel Componenten (Venster > Componenten) CF-componenten in het pop-upmenu.

3 Klik op de knop Vernieuwen in het paneel om de componenten op te halen.

Het componentenpakket wordt op de server weergegeven. Een componentenpakket is een map die CFC-bestanden

bevat.

Als er geen bestaande componentenpakketten worden weergegeven, klikt u op de paneelwerkbalk op de knop

Vernieuwen.

4 Als u alleen de CFC's in uw sitemap wilt weergeven, klikt u op de knop Alleen CFC's van huidige site weergeven op

de werkbalk van het paneel Componenten.

Opmerking: Deze functie is alleen beschikbaar als u een computer hebt gedefinieerd waarop ColdFusion MX 6 of hoger

als testserver voor Dreamweaver wordt uitgevoerd.

Opmerking: Als de huidige site in een virtuele map op de externe server wordt vermeld, werkt het filter niet.

5 Klik op de plusknop (+) naast de pakketnaam om de componenten in het pakket te bekijken.

• Als u de functies van een component wilt weergeven, klikt u op de plusknop (+) naast de componentnaam.

• Als u wilt zien welke argumenten een functie gebruikt, wat het type van die argumenten is en of de argumenten

verplicht of optioneel zijn, opent u het functie-item in de structuurweergave.

Functies die geen argumenten hebben, hebben geen plusknop (+).

• Als u snel de details van een argument, functie, component of pakket wilt bekijken, selecteert u het item in de

structuurweergave en klikt u op de knop Details ophalen op de paneelwerkbalk.

U kunt ook met de rechtermuisknop (Windows) of Control (Macintosh) ingedrukt op het item klikken en Details

ophalen in het pop-upmenu kiezen.

Details over het item worden in een berichtvak weergegeven.

Meer Help-onderwerpen

“Een testserver instellen” op pagina 48

“ColdFusion-verbeteringen inschakelen” op pagina 701

“Webpagina's samenstellen die CFC's gebruiken” op pagina 678

678

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

CFC's bewerken in Dreamweaver

Dreamweaver biedt een gestroomlijnde manier om de code te bewerken van de ColdFusion-componenten die voor de

site zijn gedefinieerd. U kunt een componentfunctie bijvoorbeeld toevoegen, wijzigen of verwijderen zonder

Dreamweaver te verlaten.

Om deze functie te gebruiken, moet u de ontwikkelomgeving als volgt instellen:

• ColdFusion moet lokaal worden uitgevoerd.

• In het dialoogvenster Geavanceerde sitedefinitie van Dreamweaver moet het toegangstype dat in de categorie

Testserver is opgegeven, Lokaal/Netwerk zijn.

• In het dialoogvenster Geavanceerde sitedefinitie moet het pad naar de lokale hoofdmap hetzelfde zijn als het pad

van de testservermap (bijvoorbeeld c:\Inetpub\wwwroot\cf_projects\myNewApp\). U kunt deze paden bekijken en

wijzigen door Site > Sites bewerken te kiezen.

• De component moet zijn opgeslagen in de lokale sitemap of een van de submappen daarvan op uw vaste schijf.

Open een ColdFusion-pagina in Dreamweaver en geef de componenten weer in het paneel Componenten. Als u de

componenten wilt weergeven, opent u het paneel Componenten (Venster > Componenten), kiest u CF-componenten

in het pop-upmenu van het paneel en klikt u op de knop Vernieuwen in het paneel.

Omdat ColdFusion lokaal wordt uitgevoerd, geeft Dreamweaver componentenpakketten op de vaste schijf weer.

Ga als volgt te werk om een component te bewerken.

1 Open een ColdFusion-pagina in Dreamweaver en geef de componenten weer in het paneel Componenten

(Venster> Componenten).

2 Selecteer CF-componenten in het pop-upmenu van het paneel en klik op de knop Vernieuwen van het paneel.

Omdat ColdFusion lokaal wordt uitgevoerd, geeft Dreamweaver componentenpakketten op de vaste schijf weer.

Opmerking: Als u de CFC-recordset visueel wilt bewerken, dubbelklikt u erop in het paneel Bindingen.

3 Als u een componentenbestand algemeen wilt bewerken, opent u het pakket en dubbelklikt u op de naam van de

component in de structuurweergave.

Het bestand van de component wordt in de codeweergave geopend.

4 Als u een specifieke functie, argument of eigenschap wilt bewerken, dubbelklikt u op het item in de

structuurweergave.

5 Breng de wijzigingen handmatig in de codeweergave aan.

6 Sla het bestand op (Bestand > Opslaan).

7 Als u een nieuwe functie in het paneel Componenten wilt bekijken, vernieuwt u de weergave door op de knop

Vernieuwen op de paneelwerkbalk te klikken.

Meer Help-onderwerpen

“CFC's weergeven in Dreamweaver” op pagina 676

Webpagina's samenstellen die CFC's gebruiken

Een manier om een componentfunctie op uw webpagina's te gebruiken, is door code in de pagina te schrijven die de

functie activeert wanneer de pagina wordt opgevraagd. Dreamweaver kan u helpen bij het schrijven van deze code.

679

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Opmerking: Voor andere manieren waarop u componenten kunt gebruiken, raadpleegt u de ColdFusion-documentatie

vanuit Dreamweaver (Help > ColdFusion gebruiken).

1 Open de ColdFusion-pagina die de componentfunctie zal gebruiken, in Dreamweaver.

2 Schakel naar de codeweergave (Weergave > Code).

3 Open het paneel Componenten (Venster > Componenten) en selecteer CF-componenten in het pop-upmenu van

het paneel.

4 Zoek de gewenste component en voeg deze met een van de volgende technieken in:

• Sleep een functie vanuit de structuurweergave naar de pagina. De code wordt in de pagina ingevoegd om de functie

te activeren.

• Selecteer de functie in het paneel en klik op de knop Invoegen op de paneelwerkbalk (de tweede knop rechts).

Dreamweaver plaatst de code op de plaats van de invoegpositie op de pagina.

5 Als u een functie invoegt die argumenten heeft, maakt u de argumentcode handmatig af.

Voor meer informatie raadpleegt u de ColdFusion-documentatie vanuit Dreamweaver (Help > ColdFusion

gebruiken).

6 Sla de pagina op (Bestand > Opslaan).

Een recordset definiëren in een CFC

Dreamweaver kan u helpen bij het definiëren van een recordset (ook wel een ColdFusion-query genoemd) in een

ColdFusion-component (CFC). Als u een recordset in een CFC definieert, hoeft u de recordset niet te definiëren op

elke pagina die deze gebruikt. U definieert de recordset eenmaal in de CFC en gebruikt de CFC op verschillende

pagina's.

Opmerking: Deze functie is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger

wordt uitgevoerd. Zie “ColdFusion-verbeteringen inschakelen” op pagina 701 voor meer informatie.

1 Maak of open een bestaand CFC-bestand in Dreamweaver.

2 Klik in het paneel Bindingen (Venster > Bindingen) op de plusknop (+) en kies Recordset (Query) in het pop-

upmenu.

Het dialoogvenster Recordset wordt geopend. U kunt in het dialoogvenster Eenvoudige recordset of het

dialoogvenster Geavanceerde recordset werken.

3 Als u een bestaande functie in de CFC wilt gebruiken, selecteert u de functie in het pop-upmenu Functie en gaat u

verder met stap 5.

De recordset wordt in de functie gedefinieerd.

4 Als u een nieuwe functie in de CFC wilt definiëren, klikt u op de knop Nieuwe functie, typt u een naam voor de

functie in het dialoogvenster dat wordt geopend, en klikt u op OK.

De naam mag alleen alfanumerieke tekens en het onderstrepingsteken (_) bevatten.

5 Als u een recordset voor de functie wilt definiëren, geeft u de opties in het dialoogvenster Recordset op.

De nieuwe functie wordt ingevoegd in de CFC die de recordset definieert.

Meer Help-onderwerpen

“Een CFC maken of verwijderen in Dreamweaver” op pagina 676

680

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Een CFC-recordset als een bron van dynamische inhoud gebruiken

U kunt een ColdFusion-component (CFC) als een bron van dynamische inhoud voor uw pagina's gebruiken als de

component een functie bevat die een recordset definieert.

Opmerking: Deze functie is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger

wordt uitgevoerd. Zie De ColdFusion-verbeteringen inschakelen voor meer informatie.

1 Open een ColdFusion-pagina in Dreamweaver.

2 Klik in het paneel Bindingen (Venster > Bindingen) op de plusknop (+) en kies Recordset (Query) in het pop-

upmenu.

Het dialoogvenster Recordset wordt geopend. U kunt in het dialoogvenster Eenvoudige recordset of het

dialoogvenster Geavanceerde recordset werken.

3 Klik op de knop CFC-query.

4 Vul het dialoogvenster CFC-query in, klik op OK en klik nogmaals op OK om de CFC-recordset toe te voegen aan

de lijst met beschikbare inhoudsbronnen in het paneel Bindingen.

5 Gebruik het paneel Bindingen om de recordset aan de verschillende pagina-elementen te binden.

Zie “Dynamische inhoud toevoegen aan pagina's” op pagina 604 voor meer informatie.

Dynamische inhoud definiëren met een CFC

In Dreamweaver kunt u een recordset als een bron van dynamische inhoud definiëren door een CFC te gebruiken dat

een recordsetdefinitie bevat.

1 Voer in het vak Naam een naam voor de CFC-recordset in.

Dikwijls wordt het voorvoegsel rs vóór recordsetnamen geplaatst om ze te onderscheiden van andere objectnamen in

de code, bijvoorbeeld: rsPressRelease.

Recordsetnamen mogen alleen alfanumerieke tekens en het onderstrepingsteken (_) bevatten. U mag geen speciale

tekens of spaties gebruiken.

2 Selecteer een van de pakketten die al op de server zijn gedefinieerd.

Als het pakket niet in het pop-upmenu voorkomt, kunt u de lijst met pakketten vernieuwen door op de knop

Vernieuwen vlakbij het pop-upmenu te klikken.

Zorg ervoor dat u de CFC's eerst op de testserver laadt. Alleen de CFC's op de testserver worden weergegeven.

3 Selecteer een van de componenten die in het geselecteerde pakket zijn gedefinieerd.

Als het pop-upmenu Component geen componenten bevat, of als het menu alleen oudere componenten bevat, moet

u de CFC-bestanden op de testserver laden.

4 (Optioneel) Klik op de knop Nieuwe component maken als u een component wilt maken.

a Voer in het vak Naam de naam voor de nieuwe CFC in. De naam mag alleen alfanumerieke tekens en het

onderstrepingsteken (_) bevatten.

b Voer in het vak 'Map van component' de locatie voor de CFC in, of blader om de map te zoeken.

Opmerking: De map moet het relatieve pad naar de hoofdmap van de site zijn.

5 Selecteer in het pop-upmenu Functie de functie die de recordsetdefinitie bevat.

681

DREAMWEAVER GEBRUIKEN

Toepassingen visueel samenstellen

Laatst bijgewerkt 2/5/2011

Het pop-upmenu functie bevat alleen de functies die in de geselecteerde component zijn gedefinieerd. Als dit pop-

upmenu geen functies bevat of als de laatste wijzigingen niet in de vermelde functies worden weergegeven, controleert

u of de laatste wijzigingen wel op de server zijn geladen.

Opmerking: De vakken Verbinding en SQL zijn alleen-lezen.

6 Bewerk elke parameter (type, waarde en standaardwaarde) die als functieargument moet worden doorgegeven door

op de knop Bewerken te klikken.

a Voer een waarde voor de huidige parameter in door het type van de waarde in het pop-upmenu Waarde te

selecteren en de waarde in het vak aan de rechterkant in te voeren.

Het type van de waarde kan een URL-parameter, een formuliervariabele, een cookie, een sessievariabele, een

toepassingsvariabele of een ingevoerde waarde zijn.

b Voer een standaardwaarde voor de parameter in het vak Standaardwaarde in.

Als geen runtime waarde wordt geretourneerd, wordt de standaardparameterwaarde gebruikt.

c Klik op OK.

U kunt de databaseverbinding en de SQL-query voor de recordset niet wijzigen. Deze velden zijn altijd uitgeschakeld.

De verbinding en SQL-query worden alleen ter informatie weergegeven.

7 Klik op Testen om de database te verbinden en een instantie van de recordset te maken.

Als de SQL-instructie paginaparameters bevat, moet u ervoor zorgen dat de kolom Standaardwaarde van het vak

Parameters geldige testwaarden bevat voordat u op Testen klikt.

Als de query met succes is uitgevoerd, wordt de recordset in een tabel weergegeven. Elke rij bevat een record en elke

kolom stelt een veld in die record voor.

Klik op OK om de CFC-query te wissen.

8 Klik op OK.

682

Laatst bijgewerkt 2/5/2011

Hoofdstuk 22: Formulieren samenstellen

Wanneer een bezoeker informatie invoert in een webformulier dat in een webbrowser wordt weergegeven, en op de

verzendknop klikt, wordt de informatie verstuurd naar de server waar deze wordt verwerkt door een script of

toepassing op de server. De server antwoordt door de verwerkte informatie weer naar de gebruiker (of client) terug te

sturen of door een andere actie uit te voeren op basis van de inhoud van het formulier.

U kunt met Dreamweaver formulieren maken die gegevens verzenden naar de meeste toepassingsservers, zoals PHP,

ASP en ColdFusion. Als u ColdFusion gebruikt, kunt u ook specifieke ColdFusion-formulierbesturingselementen aan

uw formulieren toevoegen. Uw formulieren kunnen tekstvelden, wachtwoordvelden, keuzerondjes, selectievakjes,

pop-upmenu's, knoppen waarop u kunt klikken en andere formulierobjecten bevatten. In Dreamweaver kunt u ook

code schrijven die de informatie controleert die een bezoeker invoert. U kunt bijvoorbeeld controleren of het e-

mailadres dat een gebruiker invoert, een '@'-symbool bevat, of dat een vereist tekstveld een waarde bevat.

Informatie van gebruikers verzamelen

Informatie over het verzamelen van informatie van gebruikers

U kunt webformulieren of hypertekstkoppelingen gebruiken om informatie van gebruikers te verzamelen, deze

informatie in het geheugen van de server op te slaan en vervolgens met die informatie een dynamische reactie te maken

op basis van de invoer van de gebruiker. De meest gebruikelijke hulpmiddelen voor het verzamelen van

gebruikersinformatie zijn HTML-formulieren en hypertextkoppelingen.

Met HTML-formulieren kunt u gegevens van gebruikers verzamelen en deze opslaan in het geheugen van de server. Een

HTML-formulier kan de informatie verzenden als formulierparameters of als URL-parameters.

Ook met hypertextkoppelingen kunt u gegevens van gebruikers verzamelen en deze opslaan in het geheugen van de

server. U geeft een waarde (bijvoorbeeld een voorkeur) op die moet worden verzonden wanneer een gebruiker op een

koppeling klikt, door de waarde toe te voegen aan de URL die wordt opgegeven in de ankertag. Wanneer een gebruiker

op de koppeling klikt, verstuurt de browser de URL en de toegevoegde waarde naar de server.

HTML-formulierparameters

Formulierparameters worden naar de server verzonden met een HTML-formulier dat de methode POST of GET

gebruikt.

Wanneer u de methode

POST, worden parameters als onderdeel van de documentkop verzonden naar de webserver en

zijn deze niet zichtbaar of toegankelijk voor personen die de pagina met standaardmethoden weergeven. De methode

POST moet worden gebruikt voor waarden die de database-inhoud beïnvloeden (bijvoorbeeld het invoegen, bijwerken

of verwijderen van records) of voor waarden die per e-mail worden verzonden.

Bij de methode

GET worden parameters aan de opgevraagde URL toegevoegd. De parameters zijn zichtbaar voor

iedereen die de pagina bekijkt. De methode

GET moet worden gebruikt voor zoekformulieren.

U kunt Dreamweaver gebruiken om snel HTML-formulieren te ontwerpen die formulierparameters naar de server

verzenden. Let goed op bij de methode die u gebruikt voor het verzenden van de informatie van de browser naar de

server.

683

DREAMWEAVER GEBRUIKEN

Formulieren samenstellen

Laatst bijgewerkt 2/5/2011

Formulierparameters nemen de namen van hun overeenkomstige formulierobjecten over. Als uw formulier

bijvoorbeeld een tekstveld

txtLastName bevat, wordt de volgende formulierparameter verzonden naar de server

wanneer de gebruiker op de knop Verzenden klikt:

txtLastName=enteredvalue

In gevallen waarin een webtoepassing een precieze parameterwaarde verwacht (bijvoorbeeld wanneer deze een actie

uitvoert die is gebaseerd op een van vele opties), gebruikt u als formulierobject een keuzerondje, selectievakje of

lijst/menu om de waarden te bepalen die de gebruiker kan indienen. Hierdoor voorkomt u dat gebruikers onjuiste

informatie typen en een toepassingsfout veroorzaken. Het volgende voorbeeld toont een contextmenuformulier dat

drie keuzes biedt:

Elke menukeuze komt overeen met een 'hard-coded' waarde die als een formulierparameter wordt verzonden naar de

server. Het dialoogvenster Lijstwaarden in het volgende voorbeeld koppelt elk onderdeel van de lijst aan een waarde

(Toevoegen, Bijwerken of Verwijderen):

Nadat er een formulierparameter is gemaakt, kan Dreamweaver de waarde ophalen en deze in een webtoepassing

gebruiken. Na het definiëren van de formulierparameter in Dreamweaver kunt u de waarde ervan in een pagina

invoegen.

Meer Help-onderwerpen

“Webformulieren maken” op pagina 685

“Dynamische inhoud toevoegen aan pagina's” op pagina 604

“Toegang krijgen tot een database” op pagina 550

URL-parameters

Met URL-parameters kunt u door de gebruiker opgegeven informatie doorgeven van de browser naar de server.

Wanneer een server een verzoek ontvangt en er parameters worden toegevoegd aan de URL van het verzoek, geeft de

server de opgevraagde pagina toegang tot de parameters voordat die pagina aan de browser wordt doorgegeven.

684

DREAMWEAVER GEBRUIKEN

Formulieren samenstellen

Laatst bijgewerkt 2/5/2011

Een URL-parameter is een naam-waardepaar dat wordt toegevoegd aan een URL. De parameter begint met een

vraagteken (?) en heeft de vorm

naam=waarde. Als er meer dan één URL-parameter is, wordt elke parameter

gescheiden door een en-teken (&). Het volgende voorbeeld toont een URL-parameter met twee naam-waardeparen:

http://server/path/document?name1=value1&name2=value2

In dit voorbeeldstroomschema is de toepassing een op het web gebaseerde winkel. Omdat de ontwikkelaars van de site

een zo breed mogelijk publiek willen bereiken, is de site ontwikkeld voor de ondersteuning voor vreemde valuta's.

Wanneer gebruikers zich aanmelden bij de site, kunnen ze de valuta selecteren waarin ze de prijzen van de beschikbare

artikelen willen zien.

1 De browser vraagt om de pagina report.cfm van de server. Het verzoek omvat de URL-parameter Currency="euro".

De variabele Currency="euro" geeft aan dat alle geldbedragen die worden opgehaald, worden weergegeven in de

euro van de Europese Unie.

2 De server slaat de URL-parameter tijdelijk in het geheugen op.

3 De pagina report.cfm gebruikt de parameter om de kosten van de artikelen in euro's op te halen. De geldbedragen

kunnen worden opgeslagen in een databasetabel van verschillende valuta's of kunnen worden omgerekend vanaf

één valuta die bij elk artikel hoort (elke valuta die door de toepassing wordt ondersteund).

4 De server verzendt de pagina report.cfm naar de browser en geeft de waarde van artikelen weer in de gevraagde

valuta. Wanneer de gebruiker de sessie beëindigt, wist de server de waarde van de URL-parameter, waardoor

servergeheugen wordt vrijgemaakt voor het vasthouden van nieuwe verzoeken.

URL-parameters worden ook gemaakt wanneer de HTTP

GET-methode wordt gebruikt in combinatie met een

HTML-formulier. De methode

GET geeft aan dat de parameterwaarde moet worden toegevoegd aan het URL-

verzoek als het formulier wordt ingediend.

URL-parameters worden bijvoorbeeld vaak gebruikt voor het aanpassen van websites op basis van voorkeuren van

gebruikers. Zo kan een URL-parameter bestaande uit een gebruikersnaam en wachtwoord worden gebruikt om een

gebruiker te verifiëren, waarbij alleen informatie wordt weergegeven waarop de gebruiker zich heeft geabonneerd.

Algemene voorbeelden hiervan zijn financiële websites die persoonlijk gekozen aandelenprijzen weergeven op

basis van op de beurs gebruikte symbolen die de gebruiker eerder heeft gekozen. Ontwikkelaars van

webtoepassingen gebruiken doorgaans URL-parameters om de waarden binnen toepassingen door te geven aan

variabelen. U kunt bijvoorbeeld zoektermen doorgeven aan SQL-variabelen in een webtoepassing om zo

zoekresultaten te genereren.

Valuta="€"

<HTML>

<code>

</HTML>

http://www.mysite.com/

report.cfm?Currency="€"

Rapport.cfm

Webbrowser

WEBSERVER

685

DREAMWEAVER GEBRUIKEN

Formulieren samenstellen

Laatst bijgewerkt 2/5/2011

URL-parameters maken met HTML-koppelingen

U maakt URL-parameters in een HTML-koppeling door het href-kenmerk van de HTML-ankertag te gebruiken. U

kunt de URL-parameters rechtstreeks in het kenmerk opgeven in de codeweergave (Weergave > Code) of u kunt de

URL-parameters toevoegen aan het einde van de koppelings-URL in het vak Koppeling van de eigenschappencontrole.

In het volgende voorbeeld maken drie koppelingen één URL-parameter (

actie) met drie mogelijke waarden

(

Toevoegen, Bijwerken en Verwijderen). Wanneer de gebruiker op een koppeling klikt, wordt er een

parameterwaarde naar de server gezonden en wordt de gevraagde actie uitgevoerd.

<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a>

<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a>

<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>

Met de eigenschappencontrole (Venster > Eigenschappen) kunt u dezelfde URL-parameters maken door de koppeling

te selecteren en de URL-parameterwaarden toe te voegen aan het einde van de koppelings-URL in het vak Koppeling.

Nadat er een URL-parameter is gemaakt, kan Dreamweaver de waarde ophalen en deze in een webtoepassing

gebruiken. Na het definiëren van de URL-parameter in Dreamweaver kunt u de waarde ervan in een pagina invoegen.

Meer Help-onderwerpen

“Over URL- en formulierparameters” op pagina 583

“Koppelingen maken” op pagina 284

“Formulierparameters definiëren” op pagina 596

“Dynamische inhoud toevoegen aan pagina's” op pagina 604

“Toegang krijgen tot een database” op pagina 550

Webformulieren maken

Internetformulieren

Wanneer een bezoeker informatie invoert in een webformulier dat in een webbrowser wordt weergegeven, en op de

verzendknop klikt, wordt de informatie verstuurd naar de server waar deze wordt verwerkt door een script of

toepassing op de server. De server antwoordt door de verwerkte informatie weer naar de gebruiker (of client) terug te

sturen of door een andere actie uit te voeren op basis van de inhoud van het formulier.

U kunt formulieren maken die gegevens verzenden naar de meeste toepassingsservers, waaronder PHP, ASP en

ColdFusion. Als u ColdFusion gebruikt, kunt u ook specifieke ColdFusion-formulierbesturingselementen aan uw

formulieren toevoegen.

Opmerking: U kunt de formuliergegevens ook rechtstreeks naar een e-mailontvanger versturen.

686

DREAMWEAVER GEBRUIKEN

Formulieren samenstellen

Laatst bijgewerkt 2/5/2011

Meer Help-onderwerpen

“Informatie van gebruikers verzamelen” op pagina 682

“ColdFusion-formulieren maken” op pagina 700

Formulierobjecten

In Dreamweaver worden formulierinvoertypen formulierobjecten genoemd. Formulierobjecten zijn de mechanismen

waarmee gebruikers gegevens invoeren. U kunt de volgende formulierobjecten aan een formulier toevoegen:

Tekstvelden Accepteren elk type alfanumerieke tekstinvoer. De tekst kan worden weergegeven op een enkele regel, op

meerdere regels of als een wachtwoordveld waarin ingevoerde tekst wordt vervangen door sterretjes of

opsommingstekens om het wachtwoord voor anderen te verbergen.

Opmerking: Wachtwoorden en andere informatie die via een wachtwoordveld naar een server worden verzonden,

worden niet versleuteld. De overgebrachte gegevens kunnen worden onderschept en als alfanumerieke tekst worden

gelezen. Daarom moet u gegevens die u wilt beveiligen, altijd versleutelen.

Verborgen velden Slaan informatie op die een gebruiker heeft ingevoerd, zoals een naam, e-mailadres of

weergavevoorkeur. Deze gegevens worden opnieuw gebruikt wanneer de gebruiker de site nogmaals bezoekt.

Knoppen Voeren acties uit wanneer erop wordt geklikt. U kunt een aangepaste naam of label voor een knop

toevoegen, of een van de vooraf gedefinieerde tags 'Verzenden' of 'Beginwaarden' gebruiken. Gebruik een knop om

formuliergegevens naar de server te verzenden of de beginwaarden van het formulier te herstellen. U kunt ook andere

verwerkingstaken toekennen die u in een script definieert. U kunt bijvoorbeeld een knop invoegen om de totale kosten

van geselecteerde items te berekenen op basis van toegewezen waarden.

Tekstveld (één regel)

Tekstveld (meerdere regels)

Wachtwoordveld

687

DREAMWEAVER GEBRUIKEN

Formulieren samenstellen

Laatst bijgewerkt 2/5/2011

Selectievakjes Hiermee maakt u meerdere antwoorden in een enkele groep opties mogelijk. Een gebruiker kan net

zoveel opties selecteren als van toepassing kunnen zijn. In het volgende voorbeeld ziet u hoe drie selectievakjes zijn

geselecteerd: Surfen, Mountainbiken en Raften.

Keuzerondjes Hiermee worden exclusieve keuzen voorgesteld. Wanneer u een optie in een groep keuzerondjes

selecteert, worden alle andere opties in de groep uitgeschakeld (een groep bestaat uit twee of meer knoppen met

dezelfde naam). In het onderstaande voorbeeld is de optie Raften geselecteerd. Als de gebruiker op Surfen klikt, wordt

de optie Raften automatisch uitgeschakeld.

Lijstmenu's Geven optiewaarden weer in een bladerlijst waarin gebruikers meerdere opties kunnen selecteren. De

optie Lijst geeft de optiewaarden weer in een menu waarin gebruikers slechts één item kunnen selecteren. Gebruik

menu's wanneer u beperkte ruimte hebt en toch veel items moet weergeven, of als u de waarden die aan de server

worden geretourneerd, moet controleren. In tegenstelling tot tekstvelden, waarin gebruikers alles kunnen typen wat

ze willen, zelfs ongeldige gegevens, stelt u de exacte waarden in die door een menu worden geretourneerd.

Opmerking: Een pop-upmenu in een HTML-formulier is niet hetzelfde als een grafisch pop-upmenu. Voor informatie

over het maken, bewerken en weergeven of verbergen van een grafisch pop-upmenu volgt u de koppeling aan het einde

van deze sectie.

Snelmenu's Navigeerbare lijsten of pop-upmenu's waarmee u een menu kunt invoegen waarin elke optie is gekoppeld

aan een document of bestand.

Met bestandsvelden Kunnen gebruikers naar een bestand op hun computer bladeren en het bestand als

formuliergegevens laden.

Met afbeeldingsvelden Kunt u een afbeelding in een formulier invoegen. Gebruik afbeeldingsvelden om grafische

knoppen te maken zoals de knoppen Verzenden of Beginwaarden. Wanneer u een afbeelding gebruikt om andere

taken dan het verzenden van gegevens uit te voeren, moet u een gedrag aan het formulierobject koppelen.

689

DREAMWEAVER GEBRUIKEN

Formulieren samenstellen

Laatst bijgewerkt 2/5/2011

Als het genoemde venster nog niet is geopend, wordt een nieuw venster met die naam geopend. Stel een van de

volgende doelwaarden in:

_blank Hiermee wordt het doeldocument in een nieuw, naamloos venster geopend.

_parent Hiermee wordt het doeldocument geopend in het bovenliggende venster van het venster waarin het huidige

document wordt weergegeven.

_self Hiermee wordt het doeldocument geopend in hetzelfde venster als het venster waarin het formulier is

verzonden.

_top Hiermee wordt het doeldocument geopend in het huidige venster. Deze waarde kan worden gebruikt om ervoor

te zorgen dat het doeldocument het volledige venster overneemt, zelfs als het originele document in een frame wordt

weergegeven.

4 Voeg formulierobjecten op de pagina in:

a Plaats de invoegpositie op de plaats waar het formulierobject in het formulier moet worden weergegeven.

b Selecteer het object in het menu Invoegen > Formulier of in de categorie Formulieren van het paneel Invoegen.

c Geef de waarden op in het dialoogvenster Toegankelijkheidskenmerken van de invoertag. Klik op in het

dialoogvenster op Help voor meer informatie.

Opmerking: Als het dialoogvenster Toegankelijkheidskenmerken van de invoertag niet wordt weergegeven, was mogelijk

de codeweergave actief voor het invoegpunt toen u hebt geprobeerd om het formulierobject in te voegen. Controleer of de

ontwerpweergave actief is voor het invoegpunt en probeer het opnieuw. Raadpleeg het Engelstalige artikel Creating

HTML forms in Dreamweaver van David Power voor meer informatie over dit onderwerp.

d Stel de eigenschappen van de objecten in.

e Voer een naam voor het object in de eigenschappencontrole in.

Elk tekstveld, verborgen veld, selectievakje en lijst-/menuobject moet een unieke naam hebben die het object in het

formulier aanduidt. Namen van formulierobjecten mogen geen spaties of speciale tekens bevatten. U kunt elke

combinatie van alfanumerieke tekens en een onderstrepingsteken (_) gebruiken. De label die u aan het object toekent,

is de naam van de variabele waarin de waarde van het veld (het ingevoerde gegeven) is opgeslagen. Dit is de waarde die

voor verwerking naar de server wordt verzonden.

Opmerking: Alle keuzerondjes in een groep moeten dezelfde naam hebben.

f Als u het tekstveld-, selectievakje- of keuzerondje-object op de pagina een label wilt geven, klikt u naast het object

en typt u de label.

5 Pas de indeling van het formulier aan.

Gebruik regeleinden, alinea-einden, vooraf opgemaakte tekst of tabellen om uw formulieren op te maken. U kunt geen

formulier in een ander formulier invoegen (u kunt tags dus niet overlappen), maar u kunt wel meer dan één formulier

op een pagina opnemen.

Vergeet niet om bij het ontwerpen van formulieren de formuliervelden van een beschrijvende tekstlabel te voorzien,

zodat gebruikers weten wat ze moeten invoeren, bijvoorbeeld “Typ uw naam” als u de naam wilt verkrijgen.

Gebruik tabellen om formulierobjecten en veldlabels te structureren. Wanneer u tabellen in formulieren gebruikt,

moet u ervoor zorgen dat alle

table-tags zijn opgenomen tussen form-tags.

Zie www.adobe.com/go/vid0160_nl voor een zelfstudie over formulieren maken.

Ga naar www.adobe.com/go/vid0161_nl voor een zelfstudie over stijlformulieren met CSS.

Adobe DREAMWEAVER CS5 Handleiding

Hulp nodig? Stel uw vraag in het forum

Misbruik melden

Product:

Spelregels forum

Abonneren

Ontvang uw handleiding per email

Stel vragen via chat aan uw handleiding

Andere handleiding(en) van Adobe DREAMWEAVER CS5

Uw handleiding is per email verstuurd. Controleer uw email

Er is een email naar u verstuurd om uw inschrijving definitief te maken.

U heeft geen emailadres opgegeven

Uw vraag is op deze pagina toegevoegd

Info