Professional Documents
Culture Documents
Dreamweaver Cs5
Dreamweaver Cs5
Dreamweaver Cs5
2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright
Notice to U.S. Government End Users. The Software and Documentation are Commercial Items, as that term is defined at 48 C.F.R. 2.101, consisting of
Commercial Computer Software and Commercial Computer Software Documentation, as such terms are used in 48 C.F.R. 12.212 or 48 C.F.R. 227.7202,
as applicable. Consistent with 48 C.F.R. 12.212 or 48 C.F.R. 227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and
Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights
as are granted to all other end users pursuant to the terms and conditions herein. Unpublished rights reserved under the copyright laws of the United States.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable
equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment
Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60,
60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
iii
Contedo
Captulo 1: O que h de novo
Captulo 2: rea de trabalho
Fluxo e rea de trabalho do Dreamweaver
Trabalho na janela Documento
............................................................................. 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Contedo
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Menus de salto
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Barras de navegao
Mapas de imagem
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Contedo
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519
Contedo
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688
rea de trabalho
A. Barra de aplicativos B. Barra de ferramentas de documento C. Janela do documento D. Alternador da rea de trabalho E. Grupos de
painis F. CS Live G. Seletor de tags H. Inspetor de propriedades I. Painel Arquivos
No Mac OS, o Dreamweaver pode exibir vrios documentos em uma nica janela com abas que identificam cada
documento. O Dreamweaver tambm pode exibir uma rea de trabalho flutuante na qual cada documento aparece em
sua prpria janela individual. Os grupos de painis esto inicialmente encaixados, mas podem ser desencaixados em
suas prprias janelas. Quando os grupos de painis estiverem encaixados e a rea do documento estiver maximizada,
redimensionar ou mostrar e ocultar painis redimensiona automaticamente o documento principal, da mesma
maneira que no Windows.
rea de trabalho
A. Barra de aplicativos B. Barra de ferramentas de documento C. Alternador da rea de trabalho D. Janela do documento E. CS Live
F. Grupos de painis G. Seletor de tags H. Inspetor de propriedades I. Painel Arquivos
Para assistir a um tutorial sobre como trabalhar com diferentes reas de trabalho do Dreamweaver, consulte
www.adobe.com/go/lrvid4042_dw_br.
voc tambm pode saber mais sobre o Dreamweaver, fazendo um tour pelo produto ou assistindo a um tutorial.
A barra de aplicativos A parte superior da janela do aplicativo contm o alternador da rea de trabalho, os menus
Documento (como as visualizaes de design e de cdigo), vrias opes de visualizao e algumas operaes comuns,
como a visualizao em um navegador.
A barra de ferramentas Padro (No exibida no layout padro da rea de trabalho.) Contm botes para operaes
comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimir cdigo, Recortar,
Copiar, Colar, Desfazer e Refazer. Para exibir a barra de ferramentas Padro, selecione Exibir > Barras de
ferramentas > Padro.
A barra de ferramentas de codificao (Exibida somente na Visualizao de cdigo.) Contm botes que permitem
aparncia do seu projeto em tipos de mdia diferentes se voc usasse folhas de estilos dependentes de mdia. Ela
tambm contm um boto que permite ativar ou desativar a Folha de estilos em cascata (CSS).
A janela do documento Exibe o documento atual medida que criado e editado.
O Inspetor de propriedades Permite visualizar e alterar diversas propriedades do objeto ou texto selecionado. Cada
objeto tem propriedades diferentes. O Inspetor de propriedades no expandido por padro no layout Codificador da
rea de trabalho.
O seletor de tags Localizado na barra de status, na parte inferior da janela Documento. Mostra a hierarquia de tags em
torno da seleo atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu contedo.
Painis Ajudar a monitorar e modificar seu trabalho. Os exemplos incluem o painel Inserir, o painel Estilos de CSS e
o painel Arquivos. Para expandir um painel, clique duas vezes na aba correspondente.
O painel Inserir Contm botes para inserir vrios tipos de objetos em um documento, como imagens, tabelas e
elementos de mdia. Cada objeto uma parte do cdigo HTML que permite definir vrios atributos medida que so
inseridos. Por exemplo, voc pode inserir uma tabela clicando no boto Tabela do painel Inserir. Se preferir, voc pode
inserir objetos usando o menu Inserir em vez do painel Inserir.
O painel Arquivos Permite gerenciar arquivos e pastas, que podem fazer parte de um site do Dreamweaver ou estar em
um servidor remoto. O painel Arquivos tambm permite acessar todos os arquivos do disco local, assim como o
Windows Explorer (Windows) ou o Finder (Macintosh).
rpido do aplicativo. Nessa visualizao, o Dreamweaver exibe uma representao visual completamente editvel do
documento, semelhante visualizao da pgina em um navegador.
Visualizao de cdigo Um ambiente de codificao manual para gravao e edio de cdigo HTML, JavaScript, de
linguagem de servidor (como linguagem PHP ou linguagem de markup do ColdFusion (CFML)) e qualquer outro tipo
de cdigo.
Visualizao Dividir cdigo Uma verso dividida da Visualizao de cdigo que possibilita rolar pelo trabalho em
rea de trabalho
Visualizao dinmica De modo semelhante Visualizao de design, a Visualizao dinmica exibe uma
representao realista de como seu documento ser exibido em um navegador, e permite que voc interaja com o
documento exatamente da maneira como faria em um navegador. A Visualizao dinmica no editvel. No entanto,
voc pode editar na Visualizao de cdigo e atualizar a Visualizao dinmica para exibir suas alteraes.
Visualizao dinmica de cdigo Disponvel apenas durante a exibio de documento na Visualizao dinmica. A
Visualizao dinmica de cdigo exibe o cdigo real que o navegador usa para executar a pgina, e pode alterar
dinamicamente a maneira como voc interage com a pgina na Visualizao dinmica. A Visualizao dinmica de
cdigo no editvel.
Quando uma janela Documento est maximizada (a padro), as abas aparecem na parte superior da janela, mostrando
os nomes de arquivo de todos os documentos abertos. O Dreamweaver exibir um asterisco aps o nome do arquivo
se voc tiver feito alteraes que ainda no foram salvas.
Para acessar um documento, clique na aba correspondente.
O Dreamweaver tambm exibe a barra de ferramentas Arquivos relacionados abaixo da aba do documento (ou abaixo
da barra de ttulo do documento, se voc estiver exibindo documentos em janelas distintas). Documentos relacionados
so associados ao arquivo atual, como arquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na
janela Documento, clique no respectivo nome de arquivo na barra de ferramentas Arquivos relacionados.
A. Mostrar Visualizao de cdigo B. Mostrar Visualizao de cdigo e de design C. Mostrar Visualizao de design D. Visualizao
dinmica de cdigo E. Verificao de compatibilidade do navegador F. Visualizao dinmica G. Modo de Inspeo do CSS
H. Visualizar/depurar no navegador I. Auxlios visuais J. Atualizar Visualizao de design K. Ttulo do documento L. Gerenciamento de
arquivos
Quando voc seleciona essa visualizao combinada, a opo Visualizao de design visvel ativada no menu Opes
de visualizao.
Mostrar Visualizao de design Exibe somente a Visualizao de design na janela Documento.
Nota: Se voc estiver trabalhando com XML, JavaScript, CSS ou outros tipos de arquivo baseados em cdigo, no poder
visualizar os arquivos na Visualizao de design e os botes Design e Dividir sero desativados.
Visualizao dinmica Exibe uma visualizao do documento baseada no navegador, interativa e no editvel.
Visualizao dinmica de cdigo Exibe o cdigo real usado pelo navegador para executar a pgina.
Ttulo do documento Permite inserir um ttulo para o documento, a ser exibido na barra de ttulo do navegador. Se o
documento j tiver um ttulo, esse ttulo ser exibido nesse campo.
Gerenciamento de arquivos Exibe o menu pop-up Gerenciamento de arquivos.
Visualizar/depurar no navegador Permite visualizar ou depurar o documento em um navegador. Selecione um
Nota: Tambm so atualizados recursos de cdigo que dependem de DOM (Modelo de objeto de documento), como a
possibilidade de selecionar tags de abertura e fechamento de um bloco de cdigo.
Opes de visualizao Permite definir opes para as visualizaes de cdigo e de design, incluindo a definio de
que visualizao voc deseja que aparea por cima da outra. As opes do menu so vlidas para a visualizao atual:
de design, de cdigo ou ambas.
Auxlios visuais Permite usar diferentes auxlios visuais para projetar as pginas.
Validar markup Permite validar o documento atual ou uma tag selecionada.
Verificao de compatibilidade do navegador Permite verificar se o CSS compatvel com navegadores diferentes.
rea de trabalho
Essa barra de ferramentas funciona somente se os documentos usam folhas de estilo dependentes de mdia. Por
exemplo, a folha de estilo pode especificar uma regra body para uma mdia de impresso e uma regra body diferente
para dispositivos handheld. Para obter mais informaes sobre como criar folhas de estilo dependentes de mdia,
acesse o site do World Wide Web Consortium em www.w3.org/TR/CSS21/media.html.
Por padro, o Dreamweaver exibe o projeto para o tipo de mdia de tela (que mostra como uma pgina processada
em uma tela de computador). Voc pode visualizar os seguintes processamentos de mdia clicando nos botes
correspondentes da barra de ferramentas Processamento do estilo.
Processar tipo de mdia de tela Mostra como a pgina aparece em uma tela de computador.
Processar tipo de mdia print Mostra como a pgina aparece em um pedao de papel impresso.
Processar tipo de mdia handheld Mostra como a pgina aparece em um dispositivo handheld, como um celular ou
um dispositivo BlackBerry.
Processar tipo de mdia projection Mostra como a pgina aparece em um dispositivo de projeo.
Processar tipo de mdia TTY Mostra como a pgina aparece em um dispositivo de teletipo.
Processar tipo de mdia TV Mostra como a pgina aparece em uma tela de televiso.
Alternar exibio de estilos CSS Permite ativar ou desativar estilos CSS. Esse boto funciona independentemente de
Para assistir a um tutorial sobre como projetar folhas de estilo para dispositivos handheld e de impresso, consulte
www.adobe.com/go/vid0156_br.
Por padro, os links no so ativos na Visualizao ativa. Ter links no ativos permite selecionar ou clicar no texto do
link na janela Documento sem ser levado para outra pgina. Para testar links na visualizao Ativa, possvel ativar o
clique de uma nica vez ou o clique contnuo selecionando Seguir links ou Seguir links continuamente no menu de
opes da visualizao, direita da caixa de endereo.
Voc no pode desencaixar ou mover a barra de ferramentas Codificao, mas possvel ocult-la (Exibir > Barras de
ferramentas > Codificao).
Voc tambm pode editar a Barra de ferramentas de codificao para exibir mais botes (como Quebra automtica de
palavra, Mostrar caracteres ocultos e Recuar automaticamente) ou ocultar botes que no deseja usar. No entanto,
para fazer isso, voc deve evitar o arquivo XML que gera a barra de ferramentas. Para obter mais informaes, consulte
Extenso do Dreamweaver.
rea de trabalho
A. Seletor de tags B. Ferramenta Selecionar C. Ferramenta Mo D. Ferramenta Zoom E. Definir ampliao F. Menu pop-up Tamanho da
janela G. Tamanho do documento e tempo de download estimado H. Indicador de codificao
Seletor de tags Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer tag da hierarquia para
selecionar a tag e todo seu contedo. Clique em <body> para selecionar o corpo inteiro do documento. Para definir os
atributos class ou ID de uma tag no seletor de tags, clique com o boto direito do mouse (Windows) ou com a tecla
Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto.
Ferramenta Selecionar Ativa e desativa a ferramenta Mo.
Ferramenta Mo Permite clicar no documento e arrast-lo na janela Documento.
Ferramenta Zoom e menu pop-up Definir ampliao Permite definir um nvel de ampliao para o documento.
Menu pop-up Tamanho da janela (No disponvel na Visualizao de cdigo.) Permite redimensionar a janela
Por padro, o Inspetor de propriedades fica na borda inferior da rea de trabalho, mas voc pode desencaixar e tornlo um painel flutuante nessa rea.
Algumas categorias tm botes com menus pop-up. Ao selecionar uma opo em um menu pop-up, essa opo se
transforma na ao padro do boto. Por exemplo, se voc selecionar Alocador de espao de imagem no menu popup do boto Imagem, na prxima vez que clicar no boto Imagem, o Dreamweaver vai inserir um alocador de espao
de imagem. Sempre que voc seleciona uma nova opo no menu pop-up, a ao padro do boto muda.
O painel Inserir est organizado nas seguintes categorias:
Categoria Comum Permite criar e inserir os objetos usados com mais freqncia, como imagens e tabelas.
Categoria Layout Permite inserir tabelas, elementos de tabelas, tags div, quadros e widgets do Spry. Voc tambm
pode escolher duas visualizaes para tabelas: Padro (opo padro) e Tabelas expandidas.
Categoria Formulrios Contm botes para criar formulrios e inserir elementos de formulrios, incluindo widgets de
validao do Spry.
Categoria Dados Permite inserir objetos de dados do Spry e outros elementos dinmicos como conjuntos de registros,
regies repetitivas e formulrios de insero e atualizao de registros.
Categoria Spry Contm botes para criar pginas do Spry, incluindo objetos de dados e widgets do Spry.
A categoria do InContext Editing Contm botes para criar pginas do InContext Editing, incluindo botes para
Regies editveis, Regies repetitivas e gerenciamento CSS.
Categoria Texto Permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul.
Categoria Favoritos Permite agrupar e organizar os botes do painel Inserir usados com mais freqncia em um lugar
comum.
Categorias do cdigo do servidor Disponvel somente para pginas que usam uma linguagem de servidor especfica,
incluindo ASP, CFML bsico, fluxo de CFML, CFML avanado e PHP. Cada uma dessas categorias fornece objetos de
cdigo do servidor que podem ser inseridos na Visualizao de cdigo.
Diferente dos outros painis do Dreamweaver, voc pode arrastar o painel Inserir para fora de sua posio de encaixe
padro e solt-lo em uma posio horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um
painel para uma barra de ferramentas (embora voc no possa ocult-lo e exibi-lo da mesma forma que se faz com as
outras barras de ferramentas).
Ao visualizar sites, arquivos ou pastas no painel Arquivos, voc pode alterar o tamanho da rea de visualizao e
expandir ou reduzir o painel Arquivos. Quando est reduzido, o painel Arquivos exibe o contedo do site local, o site
remoto, o servidor de teste ou o repositrio SVN como uma lista de arquivos. Quando expandido, ele exibe o site local
e o site remoto, o servidor de teste ou o repositrio SVN.
Para os sites do Dreamweaver, voc tambm pode personalizar o painel Arquivos alterando a visualizao (site local
ou remoto) que aparece por padro no painel reduzido.
Encaixar instantaneamente a janela Documento no tamanho de janela desejado para ver como os elementos se
ajustam na pgina.
Usar uma imagem de decalque como fundo da pgina para ajudar a duplicar um projeto criado em um aplicativo
de ilustrao ou edio de imagens, como o Adobe Photoshop ou Adobe Fireworks.
Usar rguas e guias para fornecer uma pista visual do posicionamento preciso e do redimensionamento dos
elementos de pgina.
Usar a grade para posicionar com preciso e redimensionar os elementos absolutamente posicionados (elementos PA).
As marcas de grade na pgina ajudam a alinhar os elementos PA e, quando o encaixe est ativado, os elementos PA
se encaixam automaticamente no ponto de grade mais prximo ao serem movidos ou redimensionados. (Outros
objetos, como imagens e pargrafos, no se encaixam na grade.) O encaixe funciona independentemente da
visibilidade da grade.
Usurios do GoLive
Se estiver usando o GoLive e desejar voltar a trabalhar com o Dreamweaver, voc pode encontrar uma apresentao
on-line da rea de trabalho e do fluxo de trabalho do Dreamweaver, bem como maneiras para migrar seus sites para o
Dreamweaver. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_golive_br.
Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, o
Dreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.
Por padro, a Visualizao de cdigo aparece na parte superior e a Visualizao de design aparece na parte inferior da
janela Documento. Para exibir a Visualizao de design na parte superior, selecione Exibir > Visualizao de design na
parte superior.
Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, o
Dreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.
Se as duas visualizaes forem exibidas na janela Documento, esse atalho de teclado mudar o foco do teclado de uma
visualizao para a outra.
Se voc estiver nas visualizaes de cdigo e design, tem a opo de exibir a Visualizao de design esquerda
(Visualizao > Visualizao de design esquerda).
Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, o
Dreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.
Nota: (Apenas Windows) Documentos na janela Documento so, por padro, maximizados, e voc no pode
redimensionar um documento quando ele est maximizado. Para restaurar abaixo o documento, clique no boto
Restaurar abaixo
no canto superior direito do documento.
O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem as bordas; o tamanho do
monitor listado entre parnteses. Por exemplo, voc usaria o tamanho 536 x 196 (640 x 480, Padro) provavelmente
se os visitantes estivessem usando o Microsoft Internet Explorer ou o Netscape Navigator nas configuraes padro
em um monitor de 640 x 480.
Para um redimensionamento menos preciso, use os mtodos padro de redimensionamento de janelas do seu sistema
operacional, como arrastar o canto inferior direito de uma janela.
Para ajustar a janela Documento somente a uma largura especfica (sem alterar a altura), selecione um valor de altura
e exclua-o.
3 Clique na caixa Descrio para inserir um texto descritivo sobre um tamanho especfico.
Por exemplo, voc pode digitar SVGA ou PC mdio prximo a uma entrada de um monitor de 800 x 600 pixels e Mac
de 17 pol. prximo a uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada para
diversas dimenses de pixel.
Relatrios no Dreamweaver
Voc pode executar relatrios no Dreamweaver para localizar contedos, solucionar problemas ou testar contedos.
Voc pode gerar os seguintes tipos de relatrios:
Pesquisa Permite procurar tags, atributos e textos especficos em tags.
Referncia Permite que voc procure informaes de referncia teis.
Validao Permite verificar erros de cdigo ou de sintaxe.
Compatibilidade de navegador Permite testar o HTML dos documentos para verificar se alguma tag ou atributo no
Relatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de
trabalho incluem Design Notes verificadas e modificadas recentemente; os relatrios HTML incluem tags de fonte
aninhadas que podem ser combinadas, acessibilidade, textos alternativos ausentes, tags aninhadas redundantes, tags
vazias removveis e documentos sem ttulo.
Registro de FTP Permite visualizar toda a atividade de transferncia de arquivos via FTP.
Depurao de servidor Permite visualizar informaes para depurar um aplicativo Adobe ColdFusion.
Talvez seja necessrio expandir o Inspetor de propriedades para visualizar todas as propriedades do elemento
selecionado.
2 Altere qualquer propriedade no Inspetor de propriedades.
Nota: Para obter informaes sobre propriedades especficas, selecione um elemento na janela Documento e clique no
cone de Ajuda no canto superior direito do Inspetor de propriedades.
3 Se as alteraes no forem aplicadas imediatamente na janela Documento, siga um destes procedimentos para
aplic-las:
janela.
Para reorganizar a ordem das janelas de Documento tabuladas, arraste uma guia de janela para o novo local no
grupo.
Para desencaixar (flutuar ou separar a guia) uma janela de documento de um grupo de janelas, arraste a guia da
janela para fora do grupo.
Nota: No Photoshop voc tambm pode selecionar Janela > Organizar > Flutuar na janela para flutuar uma nica
janela de documento ou Janela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documento
de uma vez. Consulte as notas tcnicas kb405298 para obter mais informaes.
Nota: o Dreamweaver no oferece suporte a encaixe e desencaixe de janelas de Documento. Use o boto Minimizar
da janela do documento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmente
para criar janelas de documentos lado a lado. Pesquise "Lado a Lado Verticalmente" no Ajuda do Dreamweaver para
obter mais informaes sobre este tpico.
Para encaixar uma janela de Documento em um grupo separado de janelas de Documento, arraste a janela para o
grupo.
Para criar grupos de documentos empilhados ou lado a lado, arraste a janela para uma das zonas de destino nas
partes superior, inferior ou laterais de qualquer janela. Voc tambm pode selecionar um layout para o grupo
usando o boto Layout na barra de aplicativos.
Nota: alguns produtos no tm suporte para essa funcionalidade. No entanto, seu produto pode conter os comandos
Cascata ou Lado a lado no menu Janela para ajud-lo na exibio de documentos.
Para alternar para outro documento em um grupo tabulado, arraste a seleo sobre a guia do documento por alguns
instantes.
Nota: alguns produtos no tm suporte para essa funcionalidade.
Para encaixar um painel, arraste-o pela guia para dentro do encaixe, na parte superior, na parte inferior ou entre
outros painis.
Para encaixar um grupo de painis, arraste-o pela barra de ttulo (a barra slida vazia acima das guias) para dentro
do encaixe.
Para remover um painel ou grupo de painis, arraste-o para fora do encaixe pela guia ou barra de ttulo. possvel
arrast-lo para dentro de outro encaixe ou deix-lo flutuando livremente.
Painel de navegao arrastado para um novo encaixe, indicado pelo realce vertical azul
possvel evitar que os painis preencham todo o espao no encaixe. Arraste a borda inferior do encaixe para cima
de modo que ele no corresponda mais borda do espao de trabalho.
Movimentao de painis
Ao mover painis, voc visualizar zonas para soltar realadas em azul, que so reas nas quais possvel mover o
painel. Por exemplo, possvel mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona para
soltar azul estreita, acima ou abaixo de outro painel. Se for arrastado para uma rea que no uma zona para soltar, o
painel flutuar livremente na rea de trabalho.
Nota: A posio do mouse (ao invs da posio do painel), ativa a rea de destino. Se no puder visualizar a rea de
destino, tente arrastar o mouse para o lugar onde ela deveria estar.
A zona para soltar azul estreita indica que o painel Cor ser encaixado acima do grupo de painis Camadas.
A. Barra de ttulo B. Guia C. Zona para soltar
Pressione Ctrl (Windows) ou Command (Mac OS) enquanto estiver movendo um painel para no encaix-lo.
Pressione Esc enquanto estiver movendo o painel para cancelar a operao.
Para remover um painel, clique com o boto direito e selecione Fechar (Windows) ou, com a tecla Control
pressionada, selecione Fechar (Mac), ou desmarque-o do menu de Janela.
Para adicionar um painel, selecione-o no menu Janela e encaixe-o no local que desejado.
Para reorganizar painis em um grupo, arraste a guia do painel para um novo local no grupo.
Para remover um painel de um grupo para que ele flutue livremente, arraste o painel pela guia para fora do grupo.
Para mover um grupo, arraste a barra de ttulo (a rea acima das guias).
Para empilhar painis flutuantes, arraste um painel pela guia para a zona para soltar na parte inferior de outro
painel.
Para alterar a ordem de empilhamento, arraste um painel para cima ou para baixo pela guia.
Nota: solte a guia sobre a zona para soltar azul estreita entre os painis, em vez de sobre a zona para soltar abrangente
em uma barra de ttulo.
Para remover um painel ou grupo de painis da pilha para que ele flutue sozinho, arraste-o para fora pela guia ou
pela barra de ttulo.
Redimensionamento de painis
Para minimizar ou maximizar um painel, grupo de painis ou pilha de painis, clique duas vezes na guia. Voc
tambm pode clicar duas vezes na rea da guia (no espao vazio prximo s guias).
Para redimensionar um painel, arraste qualquer lado do painel. Alguns painis, como o painel Cor no Photoshop,
no podem ser redimensionados arrastando-os.
Para contrair ou expandir todos os cones de painis numa coluna, clique na seta dupla na parte superior do
encaixe.
Para contrair um painel estendido de volta ao cone, clique na guia, no cone ou na seta dupla na barra de ttulo do
painel.
Em alguns produtos, se voc selecionar Contrair painis de cone automaticamente nas preferncias de Interface
ou Opes de interface do usurio, um cone de painel expandido ser contrado automaticamente quando voc
clicar fora dele.
Para adicionar um painel flutuante ou grupo de painis em um encaixe de cones, arraste-o por sua guia ou barra
de ttulo. (Os painis so contrados automaticamente em cones ao serem adicionados a um encaixe de cones.)
Para mover um cone de painel (ou grupo de cones de painis), arraste o cone. Voc pode arrastar cones do painel
para cima e para baixo no encaixe para outros encaixes (onde aparecem no estilo de painel desse encaixe), ou para
fora do encaixe (onde aparecem como cones flutuantes).
(Illustrator) Escolha Janela > rea de Trabalho > Salvar rea de Trabalho.
(Photoshop, InDesign, InCopy) Escolha Janela > rea de Trabalho > Nova rea de Trabalho.
(Dreamweaver) Escolha Janela > Layout da rea de Trabalho > Nova rea de Trabalho.
(Flash) Escolha Nova rea de Trabalho no alternador de reas de trabalho na Barra de aplicativos.
(Fireworks) Escolha Salvar atual no alternador de reas de trabalho na Barra de aplicativos.
2 Digite um nome para a rea de trabalho.
3 (Photoshop, InDesign) Em Capturar, selecione uma ou mais opes:
Localizaes do painel Salva as localizaes atuais do painel. (somente no InDesign)
Atalhos do teclado Salva o conjunto atual de atalhos do teclado (somente para Photoshop).
Menus ou Personalizao do menu Salva o conjunto atual de menus.
No Photoshop, possvel atribuir atalhos de teclado para cada rea de trabalho para navegar entre elas rapidamente.
(Photoshop, InDesign, InCopy) Selecione Excluir rea de trabalho no alternador de reas de trabalho.
(Illustrator) Escolha Janela > rea de Trabalho > Gerenciar reas de Trabalho, selecione a rea de trabalho e, em
seguida, clique no cone Excluir.
(Photoshp, InDesign) Escolha Janela > rea de Trabalho > Excluir rea de Trabalho, selecione a rea de trabalho
e, em seguida, clique em Excluir.
Para restaurar uma rea de trabalho individual, selecione Janela > rea de Trabalho > Redefinir Nome da rea de
trabalho.
Para restaurar todas as reas de trabalho instaladas com o Photoshop, clique em Restaurar reas de trabalho padro
nas preferncias da interface.
Para reorganizar a ordem das reas de trabalho na barra de aplicativos, arraste-as.
O Dreamweaver no muda a exibio dos documentos que esto atualmente abertos quando as preferncias so
alteradas. No entanto, os documentos abertos depois da seleo de uma nova preferncia so exibidos de acordo com
a preferncia selecionada.
fechado. Se essa opo no for selecionada, o Dreamweaver exibir a tela de boas-vindas ou uma tela em branco ao
inicializar (dependendo da configurao de Mostrar tela de boas-vindas).
Avisar ao abrir arquivos somente leitura Avisa quando um arquivo somente leitura (bloqueado) aberto. Escolha
automaticamente na barra de ferramentas de Arquivos relacionados ou aps interao manual. Tambm possvel
desabilitar a identificao de Arquivos rel. dinamicamente.
Atualizar links ao mover arquivos Determina o que acontece ao mover, renomear ou excluir um documento do seu
site. Defina essa preferncia para atualizar sempre os links automaticamente, para nunca atualizar os links ou para
perguntar antes de atualizar. Consulte Atualizar links automaticamente na pgina 278.
Mostrar caixa de dilogo ao inserir objetos Determina se o Dreamweaver deve perguntar para incluir informaes
adicionais ao inserir imagens, tabelas, filmes do Shockwave e alguns outros objetos usando o painel ou o menu Inserir.
Se essa opo estiver desativada, a caixa de dilogo no aparecer e voc dever usar o Inspetor de propriedades para
especificar o arquivo de origem de imagens, o nmero de linhas de uma tabela, etc. Para imagens de sobreposio e
HTML do Fireworks, uma caixa de dilogo sempre aparece quando voc insere o objeto, independentemente da
configurao dessa opo. Para substituir temporariamente essa configurao, clique com a tecla Control (Windows)
ou a tecla Command (Macintosh) pressionada ao criar e inserir objetos.
Ativar entrada inline de bytes duplos Permite inserir textos de bytes duplos diretamente na janela Documento se
estiver usando um ambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como os
caracteres japoneses). Quando essa opo no est selecionada, uma janela de entrada de texto aparece para a insero
e a converso de textos de bytes duplos; o texto exibido na janela Documento depois de ser aceito.
Alternar para pargrafo simples aps cabealho Especifica que pressionar Enter (Windows) ou Return (Macintosh)
no final de um pargrafo de cabealho na Visualizao de design cria um novo pargrafo com uma tag p no incio e no
final. Um pargrafo de cabealho tem uma tag de cabealho, como h1 ou h2, no incio e no final do pargrafo. Quando
essa opo est desativada, pressionar Enter ou Return no final de um pargrafo de cabealho cria um novo pargrafo
com a mesma tag de cabealho (permitindo que voc digite vrios cabealhos em uma linha e, em seguida, volte para
preencher os detalhes).
Permitir vrios espaos consecutivos Especifica que digitar dois ou mais espaos na Visualizao de design cria
espaos consecutivos que aparecem como vrios espaos no navegador. Por exemplo, voc pode digitar dois espaos
entre sentenas, como faria em uma mquina de escrever. Essa opo foi desenvolvida principalmente para pessoas
que esto acostumadas a digitar em editores de texto. Quando essa opo est desativada, vrios espaos so tratados
como um nico espao (porque os navegadores tratam vrios espaos como espaos nicos).
Usar <strong> e <em> em vez de <b> e <i> Especifica que o Dreamweaver aplica a tag strong sempre que voc
executa uma ao que normalmente aplicaria a tag b e aplica a tag em sempre que voc executa uma ao que
normalmente aplicaria a tag i. Essas aes incluem o clique nos botes Negrito ou Itlico no Inspetor de propriedades
de texto, no modo HTML, e a seleo de Formatar > Estilo > Negrito ou Formatar > Estilo > Itlico. Para usar as tags
b e i nos documentos, desmarque essa opo.
Nota: O World Wide Web Consortium no recomenda o uso das tags b e i; as tags strong e em fornecem informaes
mais semnticas do que as tags b e i.
Avisar ao incluir regies editveis entre tags <p> ou <h1> - <h6> Especifica se uma mensagem de aviso deve ser
exibida sempre que um modelo do Dreamweaver com uma regio editvel em uma tag de pargrafo ou de cabealho
for salvo. A mensagem informa que os usurios no podero criar mais pargrafos na regio. A opo est ativada por
padro.
Centralizao Especifica se voc deseja centralizar elementos usando a tag divalign="center" ou center ao clicar
valor padro deve ser suficiente para a maioria dos usurios.) Se voc ultrapassar o nmero definido de etapas no
painel Histrico, as etapas mais antigas sero descartadas.
Para obter mais informaes, consulte Automao de tarefa na pgina 265.
Dicionrio de ortografia Lista os dicionrios de ortografia disponveis. Se um dicionrio tiver vrios dialetos ou
convenes de ortografia (como ingls americano e ingls britnico), os dialetos sero listados separadamente no
menu pop-up Dicionrio.
Nota: Para exibir um idioma asitico, voc deve usar um sistema operacional que suporte fontes de bytes duplos.
4 Selecione uma fonte e o tamanho a serem usados para cada categoria da codificao selecionada.
Nota: Para aparecer nos menus pop-up, a fonte deve estar instalada no computador. Por exemplo, para ver um texto em
japons, voc deve ter uma fonte japonesa instalada.
Fonte proporcional A fonte usada pelo Dreamweaver para exibir textos normais (por exemplo, textos de pargrafos,
cabealhos e tabelas). O padro depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o
padro a fonte Times New Roman tamanho 12. (Mdio) no Windows e Times 12 pt. no Mac OS.
Fonte fixa A fonte usada pelo Dreamweaver para exibir textos entre as tags pre, code e tt. O padro depende das
fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padro a fonte Courier New 10 pt. (Pequeno)
no Windows e Monaco 12 pt. no Mac OS.
Visualizao de cdigo A fonte usada para todos os textos que aparecem na Visualizao de cdigo e no Inspetor de
Atalhos do teclado
Criar uma folha de referncia para o conjunto de atalhos atual
Uma folha de referncia um registro do conjunto de atalhos atual. As informaes so armazenadas em uma tabela
HTML. Voc pode visualizar a folha de referncia em um navegador da Web ou imprimi-la.
1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).
2 Clique no boto Exportar conjunto como HTML, que o terceiro boto na parte superior da caixa de dilogo.
3 Na caixa de dilogo Salvar exibida, insira o nome da folha de referncia e selecione o local adequado para salvar o
arquivo.
conjunto personalizado que voc tenha definido. Os conjuntos predefinidos esto listados na parte superior do menu.
Por exemplo, se voc estiver familiarizado com os atalhos encontrados no HomeSite ou BBEdit, poder usar esses
atalhos escolhendo o conjunto predefinido correspondente.
Comandos Permite selecionar uma categoria de comandos para edio. Por exemplo, voc pode editar comandos de
menu, como o comando Abrir, ou comandos de edio de cdigo, como Ajustar chaves.
Para adicionar ou editar um atalho do teclado para um snippet de cdigo, selecione Snippet no menu pop-up
Comandos.
Lista de comandos Exibe os comandos associados categoria selecionada no menu pop-up Comandos, junto com os
atalhos designados. A categoria Comandos de menu exibe essa lista como uma exibio em rvore que mostra a
estrutura dos menus. As outras categorias listam os comandos por nome (como Sair do aplicativo), em uma lista
simples.
Atalhos Exibe todos os atalhos atribudos ao comando selecionado.
Adicionar item (+) Adiciona um novo atalho ao comando atual. Clique nesse boto para adicionar uma nova linha em
branco a Atalhos. Insira uma nova combinao de teclas e clique em Alterar para adicionar um novo atalho do teclado
para esse comando. Voc pode atribuir dois atalhos diferentes para cada comando; se j houver dois atalhos atribudos
a um comando, o boto Adicionar item no ter nenhum efeito.
Remover item (-) Remove o atalho selecionado da lista de atalhos.
Pressionar tecla Exibe a combinao de teclas inserida ao adicionar ou alterar um atalho.
Alterar Adiciona a combinao de teclas mostrada em Pressionar tecla lista de atalhos ou altera o atalho selecionado
para a combinao de teclas especificada.
Conjunto duplicado Duplica o conjunto atual. D um nome ao novo conjunto; o nome padro o nome do conjunto
atual com a palavra copy anexada.
Renomear conjunto Renomeia o conjunto atual.
Exportar como arquivo HTML Salva o conjunto atual em uma tabela HTML para facilitar a visualizao e a impresso.
Voc pode abrir o arquivo HTML no seu navegador e imprimir os atalhos para facilitar a referncia.
Excluir conjunto Exclui um conjunto. Voc no pode excluir o conjunto ativo.
Para adicionar um atalho do teclado para um snippet de cdigo, selecione Snippet no menu pop-up Comandos.
Os atalhos atribudos ao comando aparecem em Atalhos.
4 Prepare-se para adicionar um atalho seguindo um destes procedimentos:
Se houver menos de dois atalhos j atribudos ao comando, clique no boto Adicionar item (+). Uma nova linha
em branco exibida em Atalhos e o ponto de insero movido at Pressionar tecla.
Se j houver dois atalhos atribudos ao comando, selecione um deles (que ser substitudo pelo novo atalho). Em
seguida, clique em Pressionar tecla.
5 Pressione uma combinao de teclas. A combinao de teclas exibida em Pressionar tecla.
Nota: Se houver um problema com a combinao de teclas (por exemplo, se a combinao de teclas j tiver sido atribuda
a outro comando), uma mensagem explicativa ser exibida abaixo de Atalhos e voc talvez no consiga adicionar ou
editar o atalho.
6 Clique em Alterar. A nova combinao de teclas atribuda ao comando.
Nota: Se houver um problema com a combinao de teclas (por exemplo, se a combinao de teclas j tiver sido atribuda
a outro comando), uma mensagem explicativa ser exibida abaixo do campo Atalhos e voc talvez no consiga adicionar
ou editar o atalho.
Extenses
Adicionar e gerenciar extenses no Dreamweaver
As extenses so novos recursos que podem ser adicionados facilmente ao Dreamweaver. Voc pode usar muitos tipos
de extenses; por exemplo, existem extenses que permitem reformatar tabelas, conectar-se com bancos de dados
back-end ou ajudar a gravar scripts para navegadores.
Nota: Para instalar extenses s quais todos os usurios tenham acesso em um sistema operacional de vrios usurios,
voc deve estar conectado como Administrador (Windows) ou root (Mac OS X).
Para encontrar as extenses mais recentes para o Dreamweaver, acesse o site do Adobe Exchange em
www.adobe.com/go/dreamweaver_exchange_br. No site, voc poder acessar e baixar extenses (muitas so
gratuitas), participar de grupos de discusso, visualizar classificaes e comentrios de usurios e instalar e usar o
Gerente de extenso. necessrio instalar o Gerente de extenso antes de instalar as extenses.
O Gerente de extenso um aplicativo separado que permite instalar e gerenciar extenses nos aplicativos da Adobe.
Inicie o Gerente de extenso a partir do Dreamweaver escolhendo Comandos > Gerenciar extenses.
1 No site do Adobe Exchange, clique no link de download de uma extenso.
O navegador talvez pergunte se voc deseja abrir e instalar o aplicativo diretamente do site ou salv-lo no disco.
Se voc optar por abrir a extenso diretamente do site, o Gerente de extenso far a instalao automaticamente.
Se voc optar por salvar a extenso no disco, um bom local para salvar o arquivo do pacote de extenso (.mxp) a
pasta Downloaded Extensions na pasta do aplicativo Dreamweaver no seu computador.
2 Clique duas vezes no arquivo do pacote de extenso ou abra o Gerente de extenso e selecione Arquivo > Instalar
extenso. Algumas extenses s podero ser acessadas quando o aplicativo for reiniciado.
Nota: Use o Gerente de extenso para remover extenses ou obter mais informaes sobre uma extenso.
site local. Essa pasta geralmente se localiza no seu computador local, mas tambm pode estar em um servidor de rede.
Pasta remota Armazena seus arquivos para teste, produo, colaborao e assim por diante. O Dreamweaver refere-
se a essa pasta como seu site remoto no painel Arquivos. Normalmente, a sua pasta remota est no computador em
que o servidor Web executado. A pasta remota contm os arquivos que os usurios acessam na Internet.
Juntas, as pastas local e remota permitem que voc transfira arquivos entre o disco rgido local e o servidor Web,
facilitando o gerenciamento de arquivos em sites do Dreamweaver. Voc trabalha nos arquivos na pasta local e depois
os publica na pasta remota, quando deseja que outras pessoas os vejam.
Pasta do servidor de teste A pasta em que o Dreamweaver processa as pginas dinmicas.
37
O exemplo a seguir mostra uma pasta raiz local esquerda e uma pasta remota direita. A pasta raiz local na mquina
local mapeia diretamente para a pasta remota no servidor Web, e no para as subpastas da pasta remota nem para as
pastas localizadas acima da pasta remota na estrutura de diretrios.
no
Diretrio de logon
(No deve ser pasta
remota neste caso)
Pasta local
sim
pblico_html
(Deve ser pasta
remota)
(pasta raiz)
Ativos
no
Ativos
(No deve ser
pasta remota)
HTML
HTML
Nota: O exemplo acima ilustra uma pasta raiz local na mquina local e uma pasta remota de nvel superior no servidor
Web remoto. Se, entretanto, voc mantm diversos sites do Dreamweaver em sua mquina local, ser necessrio um
nmero igual de pastas remotas no servidor remoto. Nesse caso, o exemplo acima no aplicvel, e voc deveria criar,
ento, diversas pastas remotas dentro da pasta public_html e, em seguida, mape-las para as pastas raiz locais
correspondentes em sua mquina local.
Quando voc estabelece uma conexo remota pela primeira vez, a pasta remota no servidor Web em geral est vazia.
Ento, quando voc usa o Dreamweaver para carregar todos os arquivos na pasta raiz local, a pasta remota a preenche
com todos os arquivos da Web. A estrutura de diretrios da pasta remota e da pasta raiz local devem ser sempre iguais.
(Ou seja, sempre deve haver uma correspondncia de um para um entre os arquivos e as pastas da pasta raiz local e os
arquivos e as pastas da pasta remota.) Se a estrutura da pasta remota no corresponder estrutura da pasta raiz local,
o Dreamweaver carregar os arquivos no local incorreto, onde podem no ficar visveis aos visitantes do site. Alm
disso, os caminhos de imagens e links podem ser facilmente rompidos se as estruturas de pastas e arquivos no
estiverem sincronizadas.
A pasta remota j deve existir para que o Dreamweaver possa conectar-se a ela. Se voc no tem uma pasta designada
que atue como sua pasta remota no servidor Web, crie uma ou pea ao administrador do servidor que crie uma para
voc.
Categoria Site
A categoria Site da caixa de dilogo Configurao de site a nica categoria que voc precisa preencher para iniciar o
trabalho no site do Dreamweaver. Essa categoria permite que voc especifique a pasta local em que os arquivos do site
sero armazenados. A pasta local pode estar em seu computador local ou em um servidor de rede
Quando estiver pronto, voc pode preencher as outras categorias na caixa de dilogo Configurao de site, incluindo
a categoria Servidores em que possvel especificar uma pasta remota no seu servidor remoto.
Nota: No preciso especificar uma pasta remota se a pasta raiz local est no sistema que executa o servidor Web. Isso
sugere que o servidor Web est em execuo no computador local.
Nome do site O nome que aparece no painel Arquivos e na caixa de dilogo Gerenciar sites; ele no aparece no
navegador.
Pasta do site local O nome da pasta no disco local onde voc armazena arquivos de site, modelos e itens de biblioteca.
Crie uma pasta no disco rgido ou clique no cone de pasta para ir at a pasta. Quando o Dreamweaver resolve links
relativos raiz do site, ele faz isso com relao a essa pasta.
Categoria Servidores
A categoria Servidores permite que voc especifique servidores remoto e de teste.
O servidor remoto o local em que voc especifica a pasta remota que ir armazenar arquivos para produo,
colaborao, implementao ou diversas outras situaes. Normalmente, a pasta remota est no computador em que
o servidor Web est em execuo.
No painel Arquivos do Dreamweaver, a pasta remota conhecida como site remoto. Ao configurar uma pasta remota,
voc deve selecionar um mtodo de conexo para que o Dreamweaver carregue e baixe arquivos no servidor Web.
Nota: O Dreamweaver aceita conexes com servidores ativados por IPv6. Os tipos de conexo permitidos incluem FTP,
SFTP, WebDav e RDS. Para obter mais informaes, consulte www.ipv6.org/
Definir opes para conexes FTP
Use esta configurao se voc se conectar ao servidor Web usando FTP.
1 Selecione Site > Gerenciar sites.
2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar.
3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes
procedimentos:
4 Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de
sua escolha.
5 No menu pop-up Uso da Conexo, selecione FTP.
6 Na caixa de texto Endereo FTP, digite o endereo do servidor de FTP no qual voc carrega os arquivos do seu site.
O endereo FTP o nome completo na Internet de um sistema de computador, como ftp.mindspring.com. Insira o
endereo completo sem qualquer texto adicional. Em particular, no adicione um nome de protocolo frente do
endereo.
Se no souber o seu endereo FTP, voc dever entrar em contato com a empresa responsvel pela hospedagem na Web.
Nota: A porta 21 a porta padro para receber conexes de FTP. possvel trocar o nmero da porta padro editando
a caixa de texto direita. O resultado quando voc salva as configuraes um caractere de dois pontos e o novo nmero
de porta anexado ao endereo FTP (por exemplo, ftp.mindspring.com:29).
7 Nas caixas de texto Nome do usurio e Senha, digite o nome do usurio e a senha que voc usa para conectar-se ao
servidor de FTP.
8 Clique em Testar para testar o endereo FTP, nome do usurio e senha.
Nota: Voc deve obter as informaes de endereo FTP, nome do usurio e senha com o administrador do sistema da
empresa que hospeda seu site. Ningum mais tem acesso a essas informaes. Digite as informaes exatamente como
forem fornecidas pelo administrador do sistema.
9 O Dreamweaver salva sua senha por padro. Desmarque a opo Salvar se voc preferir que o Dreamweaver solicite
visveis ao pblico.
Caso voc no tenha certeza sobre o que inserir como o diretrio raiz, entre em contato com o administrador do
servidor ou deixe a caixa de texto em branco. Em alguns servidores, o diretrio raiz igual ao diretrio ao qual voc
primeiro se conectou com FTP. Para saber, conecte-se ao servidor. Se uma pasta chamada public_html, ou www, ou
seu nome de usurio, aparecer na Visualizao arquivo remoto do painel Arquivos, provvel que este seja o diretrio
a ser especificado na caixa de texto Diretrio raiz.
11 Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza
o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria
Configuraes avanadas na pgina 45.
12 Expandir a seo Mais opes se ainda for necessrio definir mais opes.
13 Selecione Usar FTP passivo se a configurao de proxy exibir o uso de FTP passivo.
O FTP passivo permite que o software local configure a conexo por FTP, em vez de solicitar que o servidor remoto
configure. Se no tiver certeza quanto ao uso de FTP passivo, verifique com o administrador do sistema ou tente
marcar e desmarcar a opo Usar FTP passivo.
Para obter mais informaes, consulte o TechNote 15220 no site da Adobe em www.adobe.com/go/tn_15220_br.
14 Selecione Usar modo de transferncia IPv6 caso voc esteja usando um servidor de FTP ativado para IPv6.
Com a implementao da verso 6 do protocolo IP (IPv6), EPRT e EPSV substituram os comandos de FTP PORT e
PASV, respectivamente. Portanto, se voc est tentando conectar-se a um servidor FTP ativado por IPv6, use os
comandos passivo estendido (EPSV) e ativo estendido (EPRT) para a conexo dos dados.
Para obter mais informaes, consulte www.ipv6.org/.
15 Selecione Usar proxy se voc quiser especificar um host ou uma porta do proxy.
Para obter mais informaes, clique no link para ir para a caixa de dilogo Preferncias e, em seguida, clique no boto
Ajuda na categoria Site da caixa de dilogo Preferncias.
16 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc
procedimentos:
sua escolha.
5 No menu pop-up Uso da conexo, selecione SFTP.
O restante das opes so as mesmas que as opes para conexes de FTP. Para obter mais informaes, consulte a
seo acima.
Nota: A porta 22 a porta padro para receber conexes de SFTP.
procedimentos:
sua escolha.
5 No menu pop-up Uso da conexo, selecione Local/Rede.
6 Clique no cone de pasta ao lado da caixa de texto Pasta do servidor para procurar e selecionar a pasta onde os
o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria
Configuraes avanadas na pgina 45.
8 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc
procedimentos:
sua escolha.
5 No menu pop-up Uso da conexo, selecione WebDAV.
6 Para o URL, insira o URL completo at o diretrio no servidor WebDAV com o qual voc deseja se conectar.
Esse URL inclui o protocolo, a porta e o diretrio (se no for o diretrio raiz). Por exemplo,
http://webdav.meudomnio.net/meusite.
7 Digite o nome do usurio e a senha.
sesso.
10 Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza
o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria
Configuraes avanadas na pgina 45.
11 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc
procedimentos:
sua escolha.
5 No menu pop-up Uso da conexo, selecione RDS.
6 Clique no boto Configuraes e fornea as seguintes informaes na caixa de dilogo Configurar servidor RDS:
o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria
Configuraes avanadas na pgina 45.
9 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc
procedimentos:
servidor. Para obter mais informaes, consulte Configurar um servidor de teste na pgina 46.
Solucionar problemas da configurao de pastas remotas
Esta lista contm informaes sobre problemas comuns encontrados durante a configurao de pastas remotas e sobre
como solucion-los.
Tambm h uma nota tcnica extensa que fornece especificamente informaes sobre soluo de problemas de FTP
no site da Adobe em www.adobe.com/go/kb405912_br.
A implementao por FTP do Dreamweaver pode no funcionar corretamente com certos servidores proxy,
firewalls de vrios nveis e outras formas de acesso indireto ao servidor. Se ocorrerem problemas com o acesso ao
FTP, solicite ajuda ao administrador de sistema local.
Para uma implementao por FTP do Dreamweaver, conecte-se pasta raiz do sistema remoto. Certifique-se de
indicar a pasta raiz do sistema remoto como o diretrio do host. Se voc especificou o diretrio do host usando uma
barra nica (/), talvez seja necessrio especificar um caminho relativo do diretrio ao qual voc est se conectando
e a pasta raiz remota. Por exemplo, se a pasta raiz remota for um diretrio de nvel superior, pode ser necessrio
especificar um ../../ para o diretrio do host.
Use sublinhados em vez de espaos e evite caracteres especiais nos nomes de arquivo e de pasta sempre que possvel.
Dois-pontos, barras, pontos e apstrofos nos nomes de arquivos ou pastas podem causar problemas.
Se ocorrerem problemas com nomes de arquivo longos, use nomes menores. No Mac OS, os nomes de arquivo no
podem ter mais de 31 caracteres.
Muitos servidores usam links simblicos (UNIX), atalhos (Windows) ou alias (Macintosh) para conectar uma pasta
em uma parte do disco do servidor a outra pasta em outro local. Esses alias em geral no afetam a capacidade de
conexo com a pasta ou o diretrio apropriado, porm, se voc puder se conectar a uma parte do servidor e no a
outra, pode ser que haja uma discrepncia do alias.
Se for exibida uma mensagem de erro do tipo "no possvel colocar o arquivo", pode ser que no haja espao na
pasta remota. Para obter informaes mais detalhadas, verifique o registro de FTP.
Nota: Em geral, quando ocorrer algum problema com uma transferncia por FTP, selecione Janela > Resultados
(Windows) ou Site > FTP Log (Macintosh) e clique na tag de registro de FTP para examinar esse registro.
ou clique no cone de pasta para ir at ela. O Dreamweaver usa o caminho para a pasta quando voc adiciona imagens
nos documentos.
Links relativos a Especifique o tipo de links que o Dreamweaver cria quando voc criar links para outros recursos ou
pginas no site. O Dreamweaver pode criar dois tipos de links: relativo a documento e relativo a raiz do site. Para obter
mais informaes sobre as diferenas entre os dois tipos, consulte Caminhos absolutos, relativos a documentos e
relativos raiz do site na pgina 271.
Por padro, o Dreamweaver cria links relativos a documentos. Se alterar a configurao padro e selecionar a opo
Raiz do site, voc dever certificar-se de que o URL da Web para o site foi digitada na caixa de texto URL da Web
(consulte abaixo). A alterao dessa configurao no converte o caminho de links existentes, a configurao ser
aplicada somente aos novos links que voc criar visualmente com o Dreamweaver.
Nota: O contedo vinculado a links relativos raiz do site no aparece quando voc visualiza documentos em um
navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o arquivo
temporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no reconhecem
razes de site, diferente dos servidores.
URL da Web O URL do site. O Dreamweaver utiliza o URL da Web para criar links relativos raiz do site e verificar
links quando voc usa o verificador de links.
Links relativos raiz do site sero teis se voc no tiver certeza do local final na estrutura do diretrio da pgina em
que est trabalhando ou se voc achar que mais tarde precisar deslocar ou reorganizar os arquivos que contm links.
Links relativos raiz do site so links cujos caminhos para outros recursos de site so relativos raiz do site, no ao
documento, portanto se voc mover o documento para outro local, o caminho para os recursos permanecero
corretos.
Por exemplo, vamos dizer que voc especificou http://www.mysite.com/mycoolsite (o diretrio raiz do site do servidor
remoto) como o URL da Web e que tambm voc tem uma pasta de imagens no diretrio mycoolsite no servidor
remoto (http://www.mysite.com/mycoolsite/images). Vamos tambm dizer que seu arquivo index.html est no
diretrio mycoolsite.
Quando voc criar um link relativo raiz do site no arquivo index.html para uma imagem no diretrio de imagens, o
link ter a seguinte aparncia:
<img src="/mycoolsite/images/image1.jpg" />
O suplemento de /mycoolsite/ para a origem de imagem liga a imagem relativa raiz do site, no ao documento.
Supondo-se que a imagem permanea no diretrio de imagem, o caminho do arquivo para a imagem
(/mycoolsite/images/image1.jpg) estar sempre correta, mesmo que voc mova o arquivo index.html para outro
diretrio.
Para obter mais informaes, consulte Caminhos absolutos, relativos a documentos e relativos raiz do site na
pgina 271.
Considerando-se a verificao de link, o URL da Web ser necessrio para determinar se um link interno ou externo
ao site. Por exemplo, se o URL da Web http://www.mysite.com/mycoolsite e o verificador de link encontra um link
com o URL http://www.yoursite.com na sua pgina, o verificador determina que o ltimo link externo e o registra
como tal. Similarmente, o verificador de link usa o URL da Web para determinar se os links so internos para o site e
em seguida verifica se eles esto interrompidos.
Verificao de links com distino de maisc./minsc. Verifica se as letras maisculas e minsculas dos links
correspondem s dos nomes de arquivo quando o Dreamweaver verifica os links. Essa opo til em sistemas UNIX
em que os nomes de arquivo diferenciam maisculas e minsculas.
Ativar o cache Indica se deve ser criado um cache local para agilizar as tarefas de gerenciamento de sites e links. Se
voc no selecionar esta opo, o Dreamweaver perguntar se voc deseja criar um cache novamente antes que ele crie
o site. recomendvel selecionar esta opo porque o painel Ativos (no grupo de painis Arquivos) funciona somente
se um cache for criado.
Encobrimento e outras categorias
Para obter mais informaes sobre Encobrimento, Design Notes, Colunas de visualizao de arquivos, Contribute,
Modelos ou categorias de Spry, clique no boto Ajuda na caixa de dilogo.
Para conectar-se, clique em Estabelece conexo com host remoto na barra de ferramentas.
Para desconectar-se, clique em Desconectar na barra de ferramentas.
arquivos remotos.
procedimentos:
Nota: Voc deve especificar um URL da Web na tela Bsico quando determinar um servidor de teste. Para obter mais
informaes, consulte a prxima seo.
5 No Servidor de Teste, selecione o modelo do servidor que voc deseja usar para seu aplicativo da Web.
Nota: A partir do Dreamweaver CS5, o Dreamweaver no instala mais comportamentos de servidor ASP.NET, ASP
JavaScript ou JSP. Entretanto, se voc est trabalhando em pginas ASP.NET, ASP JavaScript ou JSP, o Dreamweaver
ainda compatvel com a Visualizao dinmica, a colorao de cdigos e as dicas de cdigos dessas pginas. No
necessrio selecionar ASP.NET, ASP JavaScript ou JSP na caixa de dilogo Definio de sites para que esses recursos
funcionem.
6 Clique em Salvar para fechar a tela Avanado. Em seguida, na categoria Servidores, especifique o servidor que voc
usar para processar pginas dinmicas esteja em c:\sites\company\, e que essa pasta seja seu diretrio inicial (ou seja,
essa pasta mapeada para o nome de domnio do seu site; por exemplo, www.mystartup.com). Nesse caso, o prefixo
de URL http://www.mystartup.com/.
Se a pasta que voc deseja usar para processar pginas dinmicas uma subpasta do seu diretrio inicial, basta
adicionar a subpasta ao URL. Se seu diretrio inicial c:\sites\company\, o nome de domnio do seu site
www.mystartup.com, e a pasta usada para processar pginas dinmicas c:\sites\company\inventory. Insira o seguinte
URL da Web:
http://www.mystartup.com/inventory/
Se a pasta que voc deseja usar para processar pginas dinmicas no seu diretrio inicial ou qualquer um de seus
subdiretrios, crie um diretrio virtual.
Um diretrio virtual Uma pasta que est contida fisicamente no diretrio inicial do servidor, ainda que ela parea estar
no URL. Para criar um diretrio virtual, especifique um alias para o caminho da pasta no URL. Suponha que seu
diretrio inicial c:\sites\company, sua pasta de processamento d:\apps\inventory e voc define um alias para essa
pasta chamado warehouse. Insira o seguinte URL da Web:
http://www.mystartup.com/warehouse/
Host local Refere-se ao diretrio inicial nos seus URLs quando o cliente (em geral um navegador, mas neste caso
Dreamweaver) executado no mesmo sistema do servidor Web. Suponha que o Dreamweaver est em execuo no
mesmo sistema Windows do servidor Web, seu diretrio inicial c:\sites\company, e voc definiu um diretrio virtual
chamado warehouse para referir-se pasta a ser usada para processar pginas dinmicas. Estes so os URLs da Web
que devem ser inseridos para os servidores Web selecionados:
Servidor Web
URL da Web
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
http://localhost:80/warehouse/
http://localhost:8080/warehouse/
Nota: Por padro, o servidor Web ColdFusion MX 7 executado na porta 8500, o servidor Web Apache executado na
porta 80 e o servidor Web Jakarta Tomcat executado na porta 8080.
Para os usurios de Macintosh que executam o servidor Web Apache, o diretrio inicial pessoal
Users/MeuNomeDeUsurio/Sites, em que MeuNomeDeUsurio o nome de usurio do Macintosh. Um alias
chamado ~MeuNomeDeUsurio automaticamente definido para essa pasta quando voc instala o Mac OS 10.1 ou
superior. Portanto, o URL da Web padro Dreamweaver, como:
http://localhost/~MeuNomeDeUsurio/
Se a pasta que voc deseja usar para processar pginas dinmicas Users:MeuNomeDeUsurio:Sites:inventory, o URL
da Web o seguinte:
http://localhost/~MeuNomeDeUsurio/inventory/
Nota: preciso duplicar localmente a estrutura inteira da ramificao relevante do site remoto.
2 Configure uma pasta remota usando as informaes de acesso remoto sobre o site. Conecte-se ao site remoto para
FTP) ou o boto Atualizar para acesso por rede) na barra de ferramentas para visualizar o site remoto.
4 Edite o site:
Para trabalhar com o site inteiro, selecione a pasta raiz do site remoto no painel Arquivos e clique em Obter
arquivo(s) na barra de ferramentas para baixar o site inteiro para o disco local.
Para trabalhar apenas com um dos arquivos ou pastas do site, localize o arquivo ou a pasta na Visualizao remota
do painel Arquivos e clique em Obter arquivo(s) na barra de ferramentas para baixar esse arquivo para o disco local.
O Dreamweaver automaticamente duplica quanto da estrutura do site remoto for necessrio para colocar o arquivo
baixado na parte correta da hierarquia de sites. Ao editar somente uma parte do site, voc deve em geral incluir
arquivos dependentes, como os arquivos de imagem.
Concludo.
Exportar sites
1 Selecione Site > Gerenciar sites.
2 Selecione um ou mais sites cujas configuraes sero exportadas e clique em Exportar:
Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada site.
Para selecionar uma faixa de sites, Shift-clique no primeiro e ltimo sites da faixa.
3 Para fazer backup das configuraes do site, selecione a primeira opo na caixa de dilogo Exportando site e clique
em OK. O Dreamweaver salva as informaes de login do servidor remoto, como o nome de usurio e a senha, e
tambm as informaes de caminho local.
4 Para compartilhar configuraes com outros usurios, selecione a segunda opo na caixa de dilogo Exportando
site e clique em OK. (O Dreamweaver no salva informaes que no funcionam para outros usurios, como suas
informaes de login do servidor remoto e os caminhos locais.)
5 Para cada site cujas configuraes voc deseja exportar, v at um local para salvar o site e clique em Salvar. (O
Dreamweaver salva as configuraes de cada site como um arquivo XML, com uma extenso .ste.)
6 Clique em Concludo.
Nota: Salve o arquivo *.ste na pasta raiz local ou na rea de trabalho para facilitar a localizao. Caso voc no se lembre
de onde o colocou, procure os arquivos com extenso *.ste para localiz-lo.
Importar sites
1 Selecione Site > Gerenciar sites.
2 Clique em Importar.
3 Selecione um ou mais sites (definidos em arquivos com extenso .ste) cujas configuraes sero importadas.
Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada arquivo
.ste. Para selecionar uma faixa de sites, Shift-clique no primeiro e ltimo arquivo da faixa.
4 Clique em Abrir e, em seguida, clique em Concludo.
Depois que o Dreamweaver importa as configuraes, os nomes de site aparecem na caixa de dilogo Gerenciar sites.
Normalmente, uma boa idia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais
recentes dos arquivos dependentes j estejam no disco local, no h necessidade de baix-los novamente. Isso tambm
acontece no carregamento e na devoluo dos arquivos: no h necessidade caso cpias atualizadas j estejam no
destino.
Caso voc desmarque essas opes, os arquivos dependentes no so transferidos. Por isso, para forar a exibio da
caixa de dilogo Arquivos dependentes mesmo quando essas opes esto desmarcadas, mantenha a tecla Alt
(Windows) ou Option (Macintosh) pressionada enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar.
Conexo de FTP Determina se a conexo com o site remoto encerrada aps o nmero especificado de minutos sem
nenhuma atividade.
Tempo limite do FTP Especifica o nmero de segundos em que o Dreamweaver tenta estabelecer uma conexo com o
servidor remoto.
Caso no haja nenhuma resposta aps o tempo especificado, o Dreamweaver exibe uma caixa de dilogo de aviso
alertando voc para esse fato.
Opes de transferncia por FTP Determina se o Dreamweaver seleciona a opo padro, depois de um nmero
especificado de segundos, quando uma caixa de dilogo exibida durante uma transferncia de arquivos e sem
nenhuma resposta do usurio.
Host do proxy Especifica o endereo do servidor de proxy pelo qual voc se conecta a servidores externos caso esteja
atrs de um firewall.
Caso voc no esteja atrs de um firewall, deixe esse espao em branco. Caso voc esteja atrs de um firewall, selecione
a opo Usar proxy na caixa de dilogo Definio de sites (Servidores > Editar servidor existente (cone do lpis) >
Mais opes).
Porta do proxy Especifica a porta do proxy ou do firewall pela qual voc passa para se conectar ao servidor remoto.
Caso voc se conecte por uma porta que no seja a 21 (a padro para FTP), digite o nmero aqui.
Opes de colocao: Salvar os arquivos antes de coloc-los Indica que os arquivos no salvos so salvos
no site remoto.
Gerenciar sites Abre a caixa de dilogo Gerenciar sites, onde voc pode editar um site existente ou criar um novo.
Voc pode definir se os tipos de arquivo que transfere so transferidos como ASCII (texto) ou binrio, personalizando
o arquivo FTPExtensionMap.txt na pasta Dreamweaver/Configurao (no Macintosh, FTPExtensionMapMac.txt).
Para obter mais informaes, consulte, Extenso do Dreamweaver.
O Contribute confere funcionalidade ao site com o CPS (Contribute Publishing Server), um pacote de aplicativos de
publicao e ferramentas de gerenciamento de usurios que permite a integrao do Contribute com o servio de
diretrios de usurios da empresa; por exemplo, protocolo LDAP (Lightweight Directory Access Protocol) ou Active
Directory. Quando voc ativa o site do Dreamweaver como um site do Contribute, o Dreamweaver l as configuraes
de administrao do Contribute sempre que voc se conecta ao site remoto. Se o Dreamweaver detecta que o CPS est
ativado, ele herda algumas funes do CPS, como a reverso de arquivos e o registro de eventos.
Voc pode usar o Dreamweaver para conectar-se a um arquivo no site do Contribute e modific-lo. A maioria dos
recursos do Dreamweaver funcionam com um site do Contribute da mesma forma que funcionam com qualquer outro
site. Contudo, quando voc usa o Dreamweaver com um site do Contribute, o Dreamweaver automaticamente realiza
certas operaes de gerenciamento de arquivos, como salvar vrias revises de um documento e registrar certos
eventos no console do CPS.
Para obter mais informaes, consulte a Ajuda do Contribute.
Simplifique a estrutura do site. No aninhe pastas em muitos nveis. Agrupe itens relacionados em uma pasta.
Configure as permisses apropriadas de leitura e gravao para pastas no servidor.
Adicione pginas de ndice ao criar pastas de forma a estimular os usurios do Contribute a inserir novas pginas
nas pastas corretas. Por exemplo, se os usurios do Contribute fornecem pginas que contm atas de reunio, crie
uma pasta na pasta raiz do site denominada atas_reunio, e crie uma pgina de ndice nessa pasta. Em seguida, crie
um link da pgina principal do site para a pgina de ndice das atas de reunio. O usurio do Contribute poder
ento navegar at essa pgina de ndice e criar uma nova pgina de atas para determinada reunio, com um link a
partir dessa pgina.
Na pgina de ndice de cada pasta, coloque uma lista de links para as pginas de contedo e os documentos dessa
pasta.
Para evitar que um estilo CSS fique disposio dos usurios do Contribute, altere o nome do estilo para que ele
comece com mmhide_. Por exemplo, se voc usa um estilo denominado RightJustified em uma pgina, mas no
quer que os usurios do Contribute usem esse estilo, renomeie o estilo como mmhide_RightJustified.
Nota: Voc tem que adicionar mmhide_ ao nome do estilo na Visualizao de cdigo; no pode faz-lo no painel CSS.
O arquivo de configuraes compartilhadas, que tem um nome de arquivo ofuscado com uma extenso CSI,
aparece em uma pasta chamada _mm na pasta raiz do site, e contm informaes que o Contribute utiliza para
gerenciar o site.
Se sua conexo com o site remoto usar WebDAV, a compatibilidade do Contribute no poder ser ativada porque
os sistemas de controle de origem no so compatveis com Design Notes e sistemas de retirada e devoluo que o
Dreamweaver utiliza para sites do Contribute.
Se voc usa RDS para se conectar ao site remoto, pode ativar a compatibilidade do Contribute mas precisa
personalizar a conexo para compartilh-la com usurios do Contribute.
Se voc no est usando o computador local como servidor Web, configure o site usando uma conexo por FTP ou
rede com o computador (em vez de um caminho de pasta local) para poder compartilhar a conexo com usurios
do Contribute.
Quando voc ativa a compatibilidade do Contribute, o Dreamweaver automaticamente ativa o Design Notes
(incluindo a opo Carregar Design Notes para compartilhamento) e o sistema de retirada/devoluo.
Se o servidor CPS (Contribute Publishing Server) estiver ativado no site remoto ao qual voc est se conectando, o
Dreamweaver notifica o CPS toda vez que voc aciona uma operao de rede como retirada, reverso ou publicao
de um arquivo. O CPS registrar esses eventos e voc poder verificar o registro no console de administrao do CPS.
(Se voc desativar o CPS, esses eventos no sero registrados.) voc ative o CPS usando o Contribute. Para obter mais
informaes, consulte a Ajuda do Adobe Contribute.
Nota: Voc pode tornar um site do Contribute compatvel sem ter o Contribute em seu computador, mas se quiser iniciar
o Contribute Administrator do Dreamweaver, o Contribute dever estar instalado no mesmo computador que o
Dreamweaver e voc dever estar conectado ao site remoto antes de ativar a compatibilidade do Contribute. Caso
contrrio, o Dreamweaver no poder ler as configuraes administrativas do Contribute para determinar se os recursos
CPS e de reverso esto ativados.
Importante: Voc deve certificar-se de que o arquivo de configuraes compartilhado (arquivo CSI) que o Contribute usa
para administrar o site esteja no servidor remoto e no esteja corrompido. O Contribute cria automaticamente esse
arquivo (e sobrescreve as verses antigas dele) sempre que voc administra o Contribute Administrator. Se o arquivo de
configuraes compartilhadas no estiver no servidor ou estiver corrompido, o Dreamweaver retornar o erro "O arquivo
necessrio para compatibilidade do Contribute no existe no servidor" sempre que voc tentar uma operao de rede
(como uma insero). Para garantir que o arquivo correto esteja no servidor, desative a conexo com o servidor no
Dreamweaver, inicie o Contribute Administrator, faa uma alterao de administrao e, em seguida, reconecte o
servidor no Dreamweaver. Para obter mais informaes, consulte a Ajuda do Adobe Contribute.
1 Selecione Site > Gerenciar sites.
2 Selecione um site e, em seguida, clique em Editar.
3 Na caixa de dilogo Configurao de site, expanda Configuraes avanadas, selecione a categoria Contribute e, em
em OK.
5 Se voc ainda no forneceu as informaes de contato de retirada/devoluo, digite seu nome e endereo de email
na caixa de dilogo e clique em OK. O status de reverso, o status de CPS, a caixa de texto URL raiz do site e o boto
Administrar site do Contribute aparecem na caixa de dilogo Definio de sites.
Se Reverso estiver ativado no Contribute, voc poder voltar s verses anteriores de arquivos que voc alterou no
Dreamweaver.
6 Marque o URL na caixa de texto URL raiz do site e corrija-a se necessrio. O Dreamweaver constri um URL raiz
do site com base em outras informaes de definio de site fornecidas, mas s vezes o URL construdo no est
totalmente correto.
7 Clique no boto Testar para verificar se voc inseriu o URL correto.
Nota: Se voc est pronto para enviar uma chave de conexo ou realizar tarefas de administrao do site do
Contribute, ignore as demais etapas.
8 Clique no Site do administrador no Contribute se quiser fazer alteraes de administrao. Lembre-se, o
Contribute deve estar instalado na mesma mquina em que deseja abrir o Contribute Administrator a partir do
Dreamweaver.
9 Clique em Salvar e, em seguida, clique em Concludo.
Para alterar as configuraes administrativas, selecione uma categoria na lista esquerda e altere as configuraes
conforme o necessrio.
Para alterar as configuraes de funo, na categoria Usurios e funes, clique em Editar configuraes de funo
e faa as alteraes necessrias.
Para enviar uma chave de conexo para configurar usurios, na categoria Usurios e funes, clique em Enviar
chave de conexo e conclua o Assistente de conexo.
6 Clique em Fechar, clique em OK e, em seguida, clique em Concludo.
Para obter mais informaes sobre configuraes administrativas, gerenciamento de funes de usurio ou criao de
uma chave de conexo, consulte a Ajuda do Contribute.
Renomear um arquivo remoto ou mov-lo de uma pasta para outra em um site do Contribute funciona como em
qualquer site do Dreamweaver. Em um site do Contribute, o Dreamweaver tambm renomeia ou move as verses
anteriores associadas do arquivo que esto salvas na pasta _baks.
1 Selecione o arquivo no painel Remoto do painel Arquivos (Janela > Arquivos) e pressione Backspace (Windows)
ou Delete (Macintosh).
Ser exibida uma caixa de dilogo pedindo que voc confirme se deseja excluir o arquivo.
2 Na caixa de dilogo de confirmao:
Para excluir todas as verses anteriores do arquivo e tambm a verso atual, marque a opo Excluir verses
anteriores.
Para manter as verses anteriores no servidor, desmarque a opo Excluir verses anteriores.
3 Clique em Sim para excluir o arquivo.
Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz
Em um site do Contribute, voc gerencia as permisses de arquivos e pastas subjacentes no servidor. Ainda que, por
motivos de segurana, voc no possa conceder acesso de leitura pasta /Templates, poder colocar os modelos
disposio dos usurios.
1 Configure o site do Contribute para que sua pasta raiz seja a pasta que os usurios vero como a raiz.
2 Copie manualmente a pasta de modelos da pasta raiz do site principal para a pasta raiz do site do Contribute usando
o painel Arquivos.
3 Depois de atualizar os modelos do site principal, recopie os modelos alterados para as subpastas apropriadas
conforme o necessrio.
Se voc no optar por esse mtodo, no use links relativos raiz do site nas subpastas. Os links relativos raiz do site
referem-se principal pasta raiz no servidor, e no pasta raiz definida no Dreamweaver. Os usurios do Contribute
no podem criar links relativos raiz do site.
Se os links em uma pgina do Contribute parecerem rompidos, possvel que haja algum problema com as permisses
de pasta, principalmente se os links vinculam a pginas fora da pasta raiz do usurio do Contribute. Verifique as
permisses de leitura e gravao para pastas no servidor.
do sistema.
a pasta _mm.
2 Certifique-se de que a pasta _mm contenha um arquivo de configuraes compartilhadas com uma extenso CSI.
3 Se no tiver, use o Assistente de conexo (Windows) ou o Connection Assistant (Macintosh) para criar uma
conexo com o site e tornar-se um administrador do site. O arquivo de configuraes compartilhadas criado
automaticamente quando voc se torna um administrador. Para obter mais informaes sobre como tornar-se um
administrador de um site do Contribute, consulte Administrao do Contribute na Ajuda do Contribute.
para desenhos, logotipos, grficos com reas transparentes e animaes. Os GIFs contm 256 cores no mximo.
JPEG Os arquivos Joint Photographic Experts Group (nomeados aps a criao do formato pela organizao) tm uma
extenso .jpg e costumam ser fotografias ou imagens coloridas de alta resoluo. O formato JPEG mais conhecido
por conta de fotografias digitais ou digitalizadas, imagens que usam texturas, imagens com transies de gradientes de
cores e todas as imagens que exijam mais de 256 cores.
XML Os arquivos em Linguagem de markup extensvel tm uma extenso .xml. Eles contm dados em uma forma no
processada que pode ser formatada usando a XSL (Linguagem de folha de estilos extensvel).
59
XSL Os arquivos em Linguagem de folha de estilos extensvel tm uma extenso .xsl ou .xslt. Eles so usados para
aplicar estilo a dados em XML que voc deseja exibir em uma pgina da Web.
CFML Os arquivos em Linguagem de markup do ColdFusion tm uma extenso .cfm. Eles so usados para processar
pginas dinmicas.
PHP Os arquivos do Pr-processador de hipertexto tm uma extenso .php e so usados para processar pginas
dinmicas.
criar na coluna Tipo de pgina. Por exemplo, selecione HTML para criar uma pgina em HTML simples, selecione
ColdFusion para criar uma pgina do ColdFusion etc.
3 Caso voc queira que a nova pgina contenha um layout de CSS, selecione um layout de CSS previamente criado
na coluna Layout; do contrrio, selecione Nenhum. Com base na seleo, uma visualizao e a descrio do layout
selecionado so exibidas no lado direito da caixa de dilogo.
Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador
ou nas configuraes de texto do visitante do site.
Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se
adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas
configuraes de texto do visitante do site.
4 Selecione um tipo de documento no menu pop-up TipoDoc. Na maior parte dos casos, voc pode usar a seleo
Criar novo arquivo Adiciona CSS do layout a um novo arquivo CSS externo e anexa a nova folha de estilos pgina
que voc est criando.
Vincular a arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS
necessrias ao layout. Para isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione
uma folha de estilos CSS existente. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS
(as regras de CSS contidas em um nico arquivo) em vrios documentos.
6 (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao
criar a pgina. Para fazer isso, clique no cone Anexar folha de estilos
selecione uma folha de estilos CSS.
Para obter uma descrio detalhada desse processo, consulte o artigo de Anexar automaticamente uma folha de estilos
a novos documentos de David Powers.
7 Selecione Ativar edio InContext se quiser criar uma pgina que se tornar ativada para edio InContext assim
que salv-la.
Uma pgina ativada para edio InContext dever ter pelo menos uma tag div que pode ser especificada como regio
editvel. Por exemplo, se tiver selecionado o tipo de pgina HTML, voc dever selecionar um dos layouts de CSS para
sua nova pgina, j que esses layouts j contm tags div pr-definidas. A regio editvel pela edio InContext
automaticamente colocada na tag div com a ID contedo. Voc poder, posteriormente, adicionar mais regies
editveis pgina, se desejar.
8 Clique em Preferncias caso voc queira definir as preferncias de documento padro como, por exemplo, um tipo
Evite o uso de espaos e de caracteres especiais em nomes de arquivo e pasta e no comece um nome de arquivo com
um numeral. Em particular, no use caracteres especiais (como, por exemplo, , , ou ) ou pontuaes (como, por
exemplo, dois-pontos, barras ou pontos) nos nomes de arquivo que voc pretende colocar em um servidor remoto.
Muitos servidores alteram esses caracteres durante o carregamento, o que far com que todos os links para o arquivo
sejam desfeitos.
para criar um modelo HTML simples, selecione o modelo ColdFusion para criar um modelo do ColdFusion etc.
4 Caso voc queira que a nova pgina contenha um layout de CSS, selecione um layout de CSS previamente criado
na coluna Layout; do contrrio, selecione Nenhum. Com base na seleo, uma visualizao e a descrio do layout
selecionado so exibidas no lado direito da caixa de dilogo.
Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador
ou nas configuraes de texto do visitante do site.
Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se
adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas
configuraes de texto do visitante do site.
5 Selecione um tipo de documento no menu pop-up TipoDoc. Na maior parte dos casos, voc desejar deixar a
7 (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao
criar a pgina. Para fazer isso, clique no cone Anexar folha de estilos
selecione uma folha de estilos CSS.
8 Selecione Ativar edio InContext se quiser criar uma pgina que se tornar ativada para edio InContext assim
que salv-la.
Uma pgina ativada para edio InContext dever ter pelo menos uma tag div que pode ser especificada como regio
editvel. Por exemplo, se tiver selecionado o tipo de pgina HTML, voc dever selecionar um dos layouts de CSS para
sua nova pgina, j que esses layouts j contm tags div pr-definidas. A regio editvel pela edio InContext
automaticamente colocada na tag div com a ID contedo. Voc poder, posteriormente, adicionar mais regies
editveis pgina, se desejar.
9 Clique em Preferncias caso voc queira definir as preferncias de documento padro como, por exemplo, um tipo
design de pgina.
11 Clique no boto Criar.
12 Salve o novo documento (Arquivo > Salvar). Caso voc ainda no tenha adicionado regies editveis ao modelo,
uma caixa de dilogo exibida informando voc de que no h regies editveis no documento. Clique em OK para
fechar a caixa de dilogo.
13 Na caixa de dilogo Salvar como, selecione um local para salvar o modelo.
14 Na caixa Nome do arquivo, digite um nome para o novo modelo. Voc no precisa acrescentar uma extenso de
arquivo ao nome do modelo. Quando voc clica em Salvar, a extenso .dwt acrescentada ao novo modelo, salvo
na pasta Modelos do site.
Evite o uso de espaos e de caracteres especiais em nomes de arquivo e pasta e no comece um nome de arquivo com
um numeral. Em particular, no use caracteres especiais (como, por exemplo, , , ou ) ou pontuaes (como, por
exemplo, dois-pontos, barras ou pontos) nos nomes de arquivo que voc pretende colocar em um servidor remoto.
Muitos servidores alteram esses caracteres durante o carregamento, o que far com que todos os links para o arquivo
sejam desfeitos.
design de pgina.
7 Clique em Criar e salvar o documento (Arquivo > Salvar).
Caso tenha acabado de criar o modelo que deseja aplicar, voc talvez precise clicar no boto Atualizar para v-lo.
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no modelo que
O novo documento aberto na janela Documento (Visualizao de cdigo e Visualizao de design). Caso voc tenha
selecionado Folha de Estilo CSS, a folha de estilos CSS aberta na Visualizao de cdigo.
5 Salve o documento (Arquivo > Salvar).
6 Caso a caixa de dilogo Copiar arquivos dependentes seja exibida, defina as opes e, em seguida, clique em Copiar
Salvar um documento
1 Siga um destes procedimentos:
Para sobregravar a verso atual no disco e salvar quaisquer alteraes efetuadas, selecione Arquivo > Salvar.
Para salvar o arquivo em uma pasta diferente ou com outro nome, selecione Arquivo > Salvar como.
2 Na caixa de dilogo Salvar como, v at a pasta em que deseja salvar o arquivo.
3 Na caixa de texto Nome do arquivo, digite um nome para o arquivo.
4 Clique em Salvar para salvar o arquivo.
Uma caixa de dilogo pergunta se voc deseja descartar as alteraes e reverter para a verso salva anteriormente.
2 Clique em Sim para reverter para a verso anterior. Clique em No para manter as alteraes.
Nota: Se voc salvar um documento e sair do Dreamweaver, no poder reverter para a verso anterior do documento
quando reiniciar o Dreamweaver.
Voc tambm pode clicar no boto Preferncias da caixa de dilogo Novo documento para definir as preferncias de
novo documento quando voc cria um novo documento.
2 Clique em Novo documento na lista de categorias esquerda.
3 Defina ou altere as preferncias conforme necessrio e clique em OK para salv-las.
Documento padro Selecione um tipo de documento a ser usado nas pginas que voc criar.
Extenso padro Especifique a extenso de arquivo que voc prefere (.htm ou .html) para novas pginas em HTML
criadas.
Nota: Essa opo est desativada para os demais tipos de arquivo.
Tipo padro de documento (DDT) Selecione uma das definies do tipo padro de documento (DTD) em XHTML
para tornar novas pginas compatveis com XHTML. Por exemplo, voc pode criar um documento HTML compatvel
com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu.
Codificao padro Especifique a codificao a ser usada quando uma nova pgina criada, bem como quando um
documento aberto sem especificar nenhuma codificao.
Se voc selecionar Unicode (UTF-8) como codificao de documento, a codificao de entidade no ser necessria,
pois a codificao UTF-8 poder representar com segurana todos os caracteres. Se voc selecionar outra codificao
de documento, a codificao de entidade provavelmente ser necessria para representar determinados caracteres.
Para obter mais informaes sobre as entidades de caractere, consulte www.w3.org/TR/REChtml40/sgml/entities.html.
Caso selecione Unicode (UTF-8) como codificao padro, voc pode incluir uma BOM (marca de ordem de bytes)
no documento selecionando a opo Incluir assinatura Unicode (BOM).
Uma BOM consiste em 2 a 4 bytes no incio de um arquivo de texto que identifica um arquivo como Unicode, bem
como a ordem dos bytes a seguir. Como a codificao UTF-8 no tem ordem de bytes, a adio de um BOM UTF-8
opcional. Na UTF-16 e UTF-32, ela obrigatria.
Formulrio de normalizao unicode Selecione uma destas opes caso voc escolha Unicode (UTF-8) como
codificao padro.
H quatro formulrios de normalizao unicode. O mais importante deles o formulrio de normalizao C, pois o
formulrio mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros trs para
ser mais completa.
Mostrar caixa de dilogo Novo documento ao pressionar Control+N Desmarque essa opo (on Command+N para
Macintosh) a fim de criar automaticamente um documento do tipo padro quando voc usa o comando principal.
No Unicode, h caracteres que so visualmente semelhantes, mas que podem ser armazenados no documento de
diferentes maneiras. Por exemplo, (e-umlaut) pode ser representado como um caractere nico, e com trema, ou
como dois caracteres, e latino regular + trema. O caractere de combinao Unicode aquele utilizado com o
caractere anterior; sendo assim, o trema apareceria acima do e latino. Os dois formulrios tm como resultado a
mesma tipografia visual, mas o que salvo no arquivo diferente em cada formulrio.
A normalizao o processo que garante que todos os caracteres que podem ser salvos de formas diferentes sero
salvos de uma mesma forma. Ou seja, todos os caracteres de um documento sero salvos como um nico e com
trema ou como e + trema , e no de duas formas em um documento.
Para obter mais informaes sobre a normalizao unicode e as formas especficas que podem ser usadas, consulte o
site da Unicode em www.unicode.org/reports/tr15.
Voc tambm pode clicar no boto Preferncias da caixa de dilogo Novo documento para definir as preferncias de
novo documento quando voc cria um novo documento.
2 Clique em Novo documento na lista de categorias esquerda.
3 Verifique se HTML est selecionado no menu pop-up Documento padro.
4 Na caixa Extenso padro, especifique a extenso de arquivo que voc deseja para novos documentos em HTML
criados no Dreamweaver.
No Windows, voc pode especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
No Macintosh, voc pode especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Voc tambm pode abrir arquivos de texto que no so em HTML como, por exemplo, arquivos do JavaScript,
arquivos em XML, folhas de estilos CSS ou arquivos de texto salvos por processadores ou editores de texto.
1 Selecione Arquivo > Abrir.
Nota: Caso voc ainda no tenha feito isso, uma boa idia organizar os arquivos que voc pretende abrir e editar em
um site do Dreamweaver, em vez de abri-los em outro local.
3 Clique em Abrir.
O documento aberto na janela Documento. Por padro, JavaScript, texto e folha de estilos CSS so abertos na
Visualizao de cdigo. Voc pode atualizar o documento enquanto trabalha no Dreamweaver e salvar as alteraes
no arquivo.
Na barra de ferramentas Arquivos relacionados, na parte superior do documento, clique no nome do arquivo
relacionado que deseja abrir.
Na barra de ferramentas Arquivos relacionados, clique com o boto direito do mouse no nome do arquivo
relacionado que deseja abrir e selecione Abrir como arquivo separado, no menu de contexto. Ao abrir um arquivo
relacionado por este mtodo, o documento principal no permanecer visvel simultaneamente.
de cdigo.
3 Focalize os itens no Navegador de cdigo para exibir mais informaes sobre eles. Por exemplo, se voc deseja
alterar uma propriedade de cor CSS especfica mas no sabe em que regra ela est, possvel localizar a propriedade
focalizando as regras disponveis no Navegador de cdigo.
4 Clique no item desejado para abrir o arquivo relacionado correspondente.
Ao abrir um arquivo relacionado na Visualizao de design ou nas visualizaes de cdigo e de design (visualizao
dividida), os arquivos relacionados so exibidos em uma visualizao dividida acima da visualizao de design do
documento principal.
Em vez disso, voc pode selecionar Exibir > Visualizao de design na parte superior, se desejar exibir o arquivo
relacionado na parte inferior da janela Documento.
Ao abrir um arquivo relacionado nas visualizaes de cdigo e de design divididas verticalmente (Exibir > Dividir
verticalmente), o arquivo relacionado ser exibido em uma visualizao dividida ao lado da Visualizao de design
do documento principal.
Voc pode selecionar ou desmarcar Visualizao de design esquerda (Exibir > Visualizao de design esquerda),
dependendo de onde deseja a Visualizao de design.
Ao abrir um arquivo relacionado na visualizao Dividir cdigo ou Dividir cdigo na vertical (Exibir > Visualizao
Dividir cdigo e Exibir > Dividir verticalmente), o arquivo relacionado exibido em uma visualizao dividida
abaixo, acima ou ao lado do cdigo-fonte do documento principal, dependendo das opes selecionadas.
A "visualizao de cdigo" na opo de exibio se refere ao cdigo-fonte do documento principal. Por exemplo, se
voc seleciona Exibir > Visualizao de cdigo na parte superior, o Dreamweaver exibe o cdigo-fonte do
documento principal na metade superior da janela Documento. Se voc seleciona Exibir > Visualizao de cdigo
esquerda, o Dreamweaver exibe o cdigo-fonte do documento principal no lado esquerdo da janela Documento.
A Visualizao de cdigo padro no permite exibir Documentos relacionados ao mesmo tempo que o cdigofonte do documento principal.
Defina um site Dreamweaver e certifique-se de ter preenchido a caixa de texto URL da Web na caixa de dilogo
Configurao de site.
instalao do WordPress
instalao do Drupal
Instalao doJoomla!
No Dreamweaver, defina uma pasta local em que voc ir fazer o download e editar os arquivos CMS.
Defina o local de instalao dos arquivos WordPress, Drupal ou Joomla! como sua pasta de teste remota.
Faa o download dos arquivos CMS da pasta remota.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com arquivos
dinamicamente relacionados, consulte www.adobe.com/go/dwcs5drf_br.
link Identificar na barra de Informaes que aparece acima na pgina, na janela Documento.
Se a identificao de Arquivos rel. dinamicamente estiver ativada automaticamente, uma lista de Arquivos rel.
dinamicamente ser exibida na barra de ferramentas Arquivos relacionados.
A ordem dos Arquivos rel. dinamicamente na barra de ferramentas Arquivos relacionados a seguinte:
Arquivos relacionados estticos (ou seja, arquivos relacionados que no exigem qualquer tipo de processamento
dinmico)
Arquivos relacionados externos (ou seja, arquivos .css e .js) que esto anexados ao servidor de caminho dinmico
que inclui arquivos
O servidor de caminho dinmico inclui arquivos (ou seja, arquivos .php, .inc e .module)
A caixa de dilogo Filtro personalizado permite somente o filtro de nomes exatos de arquivo (style.css), extenses
de arquivos (.php) e expresses curingas que usam asteriscos (*menu*). possvel filtrar expresses curingas
mltiplas pela separao de cada expresso com um ponto-e-vrgula (por exemplo, style.css; *.js; *tpl.php).
Nota: As configuraes de filtro no se mantm aps o fechamento do arquivo.
O cdigo que o Dreamweaver remove essencialmente usado pelo Word para formatar e exibir documentos no Word,
no sendo necessrio exibio do arquivo em HTML. Mantenha uma cpia do arquivo do Word (.doc) original como
backup porque voc talvez no consiga reabrir o documento em HTML no Word por ter aplicado o recurso Limpar
HTML do Word.
Para limpar HTML ou XHTML que no foi gerado pelo Microsoft Word, use o comando Limpar HTML.
1 Salve o documento do Microsoft Word como um arquivo em HTML.
Nota: No Windows, feche o arquivo do Word para evitar uma violao no compartilhamento.
2 Abra o arquivo em HTML no Dreamweaver.
Para exibir o cdigo HTML gerado pelo Word, alterne para Visualizao de cdigo (Exibir > Cdigo).
3 Selecione Comandos > Limpar HTML do Word.
Nota: Caso o Dreamweaver no consiga determinar qual foi a verso do Word usada para salvar o arquivo, selecione a
verso correta no menu pop-up.
4 Marque (ou desmarque) as opes de limpeza. As preferncias que voc digita so salvas como configuraes de
limpeza padro.
O Dreamweaver aplica as configuraes de limpeza ao documento em HTML, e um registro das alteraes exibido
(a menos que voc tenha desmarcado essa opo na caixa de dilogo).
Remover todos os markups especficos do Word Remove todo o HTML especfico do Microsoft Word, incluindo
XML das tags HTML, metadados personalizados do Word e tags link do cabealho do documento, markups XML do
Word, tags condicionais e seu contedo, alm de pargrafos vazios e margens de estilos. Voc pode selecionar cada
uma dessas opes individualmente usando a aba Detalhado.
Limpar CSS Remove todas as CSS especficas do Word, inclusive estilos de CSS inline quando possvel (onde o estilo
pai tem as mesmas propriedades de estilo), atributos de estilo que comeam com mso, declaraes de estilo no-CSS,
atributos de estilo de CSS de tabelas e todas as definies de estilo no usadas do cabealho. Voc pode personalizar
ainda mais essa opo usando a aba Detalhado.
Limpar tags <font> Remove tags HTML, convertendo o texto do corpo padro em texto HTML tamanho 2.
Corrigir tags aninhadas de forma invlida Remove as tags de markup de fonte inseridas pelo Word fora das tags de
a limpeza concluda.
5 Clique em OK ou clique na aba Detalhado caso voc queira personalizar ainda mais as opes Remover todos os
Nota: As visualizaes Arquivos do site, Servidor de teste e os botes Sincronizar so exibidos somente no painel Arquivos
expandido.
O menu pop-up Site Permite a voc selecionar um site do Dreamweaver e exibir os arquivos deste site. Voc tambm
pode usar o menu Site para acessar todos os arquivos no disco local, assim como o Windows Explorer (Windows) ou
o Finder (Macintosh).
Conectar/desconectar (protocolo FTP, RDS eWebDav) Conecta-se ou desconecta-se do site remoto. Por padro, o
Dreamweaver se desconecta do site remoto caso ele permanea inativo por mais de 30 minutos (somente FTP). Para
alterar o tempo-limite, selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e,
depois, selecione Site na lista de categorias esquerda.
Atualizar Atualiza as listas de diretrios locais e remotos. Use o boto para atualizar manualmente as listas de
diretrios caso voc tenha desmarcado Atualizar automaticamente a lista de arquivos locais ou Atualizar
automaticamente a lista de arquivos remotos na caixa de dilogo Definio do site.
Visualizao Arquivos do site Exibe a estrutura de arquivo dos sites remoto e local nos painis do painel Arquivos.
(Uma configurao de preferncia determina o site exibido no painel esquerda e qual site exibido no painel
direita). Arquivos do site a visualizao padro do painel Arquivos.
Visualizao servidor de teste Exibe a estrutura de diretrio do servidor de teste e o site local.
Nota: Os arquivos que o Dreamweaver copia so os arquivos que voc seleciona no painel ativo do painel Arquivos. Caso
o painel Remoto esteja ativo, os arquivos do servidor de teste ou remotos selecionados so copiados para o site local; caso
o painel Local esteja ativo, o Dreamweaver copia a verso de teste ou remota dos arquivos locais selecionados para o site
local.
Colocar arquivos Copia os arquivos selecionados do site local para o site remoto.
Nota: Os arquivos que o Dreamweaver copia so os arquivos que voc seleciona no painel ativo do painel Arquivos. Caso
o painel Local esteja ativo, os arquivos locais selecionados so copiados para o site remoto ou para o servidor de teste; caso
o painel Remoto esteja ativo, o Dreamweaver copia as verses locais dos arquivos de servidor remoto selecionados para
o site remoto.
Caso voc esteja colocando um arquivo que ainda no existe no site remoto e Ativar devoluo e retirada de arquivos
esteja selecionado, o arquivo adicionado ao site remoto como retirado. Clique no boto devolver arquivos caso voc
queira adicionar um arquivo sem o status retirado.
Retirar arquivos Transfere uma cpia do arquivo do servidor remoto para o site local (substituindo a cpia local
existente do arquivo, caso haja alguma) e marca o arquivo como retirado do servidor. Essa opo no est disponvel
caso Ativar devoluo e retirada de arquivos na caixa de dilogo Definies de sites esteja desativado para o site atual.
Devolver arquivos Transfere uma cpia do arquivo local para o servidor remoto e disponibiliza o arquivo para edio.
O arquivo local se torna somente leitura. Essa opo no est disponvel caso a opo Ativar devoluo e retirada de
arquivos na caixa de dilogo Definies de sites esteja desativada para o site atual.
Sincronizar Sincroniza os arquivos entre as pastas local e remota.
O boto Expandir/reduzir Expande ou reduz o painel Arquivos para exibir um ou mais painis.
da barra de ferramentas.
Nota: Caso voc clique no boto Expandir/reduzir para expandir o painel enquanto ele est encaixado, o painel
maximizado de forma que voc no consiga trabalhar na janela Documento. Para retornar janela Documento, clique
no boto Expandir/reduzir novamente para reduzir o painel. Caso clique no boto Expandir/reduzir para expandir o
painel enquanto ele no est encaixado, voc ainda pode trabalhar na janela Documento. Para encaixar o painel
novamente, voc deve inicialmente reduzi-lo.
Quando o painel Arquivos reduzido, ele exibe o contedo do site local, do site remoto ou o servidor de teste como
uma lista de arquivos. Quando expandido, ele exibe o site local e o site remoto ou o servidor de teste.
Arraste a barra que separa as duas visualizaes para aumentar ou diminuir a rea de visualizao do painel direita
ou esquerda.
Use as barras de rolagem na parte inferior do painel Arquivos para percorrer o contedo das visualizaes.
No painel Arquivos reduzido (Janela > Arquivos), selecione Visualizao local, Visualizao remota, Servidor de
teste ou Visualizao Repositrio no menu pop-up Exibio do site.
Nota: Por padro, Visualizao local exibido no menu Exibio do site.
No painel Arquivos expandido (Janela > Arquivos), clique no boto Arquivos do site (para o site remoto), Servidor
de teste ou Arquivos do repositrio.
A
Nota: Antes de exibir um site remoto, servidor de teste ou repositrio, voc deve configurar um site remoto, servidor de
teste ou repositrio SVN.
Abrir um arquivo
1 No painel Arquivos (Janela > Arquivos), selecione site, servidor ou unidade no menu pop-up (em que o site, o
O Dreamweaver criar o novo arquivo ou pasta dentro da pasta selecionada atualmente ou na mesma pasta do arquivo
selecionado no momento.
2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer
arquivo ou pasta e, em seguida, selecione Atualizar.
(Apenas sites do Dreamweaver) Clique no boto Atualizar da barra de ferramentas no painel Arquivos (essa opo
atualiza ambos os painis).
Nota: O Dreamweaver atualiza o painel Arquivos quando voc faz alteraes em outro aplicativo e, em seguida, retorna
ao Dreamweaver.
2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,
selecione Localizar no site local ou Localizar no site local (dependendo de onde voc selecionou o arquivo).
O Dreamweaver seleciona o arquivo no painel Arquivos.
Localizar e selecionar arquivos que sejam mais novos no site local do que no site remoto
No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel
Localizar e selecionar arquivos que sejam mais novos no site remoto do que no site local
No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel
Para gerar relatrio sobre todos os arquivos modificados nos ltimos dias, selecione Arquivos criados ou
modificados por ltimo e digite o nmero na caixa.
Para gerar relatrio sobre todos os arquivos modificados dentro de um tempo especfico, clique no boto Arquivos
criados ou modificados entre e, em seguida, especifique um intervalo de datas.
3 (Opcional) Digite um nome de usurio na caixa Modificado por para limitar a pesquisa a arquivos modificados por
Nota: Essa opo pressupe que voc tenha definido um Servidor de teste na caixa de dilogo Definio de sites (XREF).
Caso voc no tenha definido um Servidor de teste e digitado um prefixo de URL para o servidor ou caso voc esteja
executando o relatrio para mais de um site, a opo no est disponvel.
Outro local caso voc queira digitar um caminho na caixa de texto.
O Dreamweaver exibe todos os arquivos sem links externos. Isso significa que nenhum arquivo do site tem link com
esses arquivos.
3 Selecione os arquivos que voc deseja excluir e pressione Delete (Windows) ou Command+Delete (Macintosh).
Importante: Embora nenhum outro arquivo do site tenha link com esses arquivos, alguns dos arquivos listados podem
ter links com outros arquivos. Tome cuidado ao excluir os arquivos.
exibida).
ou a unidade exibida).
Nota: Os nomes so exibidos para servidores para os quais voc configurou o Dreamweaver.
2 Navegue at e edite os arquivos como voc faria normalmente.
uma coluna.
Nota: Como a coluna excluda imediatamente e sem confirmao, tenha certeza de que voc deseja excluir a coluna
antes de clicar no boto de subtrao (-).
5 Na caixa Nome da coluna, digite um nome para a coluna.
6 Selecione um valor no menu Associar Design Notes ou digite seu prprio.
Nota: Voc deve associar uma nova coluna a uma Design Note para que haja dados a serem exibidos no painel Arquivos.
7 Selecione um alinhamento para determinar como o texto se alinha dentro da coluna.
8 Marque ou desmarque Mostrar para revelar ou ocultar a coluna.
9 Selecione Compartilhar com todos os usurios deste site para compartilhar a coluna com todos os usurios
Clique no cabealho novamente para inverter a ordem (crescente ou decrescente) com a qual o Dreamweaver
classifica a coluna.
Colocar/obter/devolver/retirar arquivos
Desfazer retirada
Criar uma conexo de banco de dados
Ligar dados dinmicos
Visualizar dados na Visualizao dinmica
Inserir um servio da Web
Excluir arquivos remotos ou pastas
Visualizar em um navegador em um servidor de teste
Salvar um arquivo em um servidor remoto
Inserir uma imagem de um servidor remoto
Abrir um arquivo em um servidor remoto
Colocar automaticamente arquivos ao salvar
Arrastar arquivos para o site remoto
Recortar, copiar ou colar arquivos no site remoto
Atualizar Visualizao remota
Por padro, a caixa de dilogo Atividade de arquivo em segundo plano aberta durante transferncias de arquivos.
Voc pode minimizar a caixa de dilogo clicando no boto Minimizar do canto superior direito. Fechar a caixa de
dilogo durante transferncias de arquivos resulta no cancelamento da operao.
Normalmente voc seleciona esses arquivos na Visualizao remota, mas pode selecionar os arquivos correspondentes
na Visualizao local se preferir. Caso a Visualizao remota esteja ativa, o Dreamweaver copia os arquivos
selecionados para o site local; caso a Visualizao local esteja ativa, o Dreamweaver copia as verses remotas dos
arquivos locais selecionados para o site local.
Nota: Para obter apenas os arquivos cuja verso remota mais recente do que a verso local, use o comando Sincronizar.
2 Siga um dos seguintes procedimentos para obter o arquivo:
cpias locais dos arquivos dependentes, clique em No. O padro no baixar arquivos dependentes. Voc pode
editar essa opo em Editar > Preferncias > Site.
O Dreamweaver baixa os arquivos selecionados da seguinte forma:
Caso voc esteja usando o sistema de devoluo/retirada, a obteno de um arquivo resulta em uma cpia local
somente leitura do arquivo; o arquivo permanece disponvel no site remoto ou no servidor de teste para que os
demais membros da equipe retirem.
Caso voc no esteja usando o sistema de devoluo/retirada, a obteno de um arquivo resultar em uma cpia
com os privilgios de leitura e gravao.
Nota: Caso esteja trabalhando em um ambiente colaborativo ou seja, caso outros estejam trabalhando nos mesmos
arquivos , voc no deve desativar Ativar devoluo e retirada de arquivos. Caso outras pessoas estejam usando o
sistema de devoluo/retirada com o site, voc tambm deve us-lo.
Para parar a transferncia de arquivos a qualquer momento, clique no boto Cancelar da caixa de dilogo Atividade
de arquivo em segundo plano.
Nota: No painel Arquivos expandido, voc pode clicar no boto Registro de FTP para exibir o registro.
Normalmente voc seleciona esses arquivos na Visualizao local, mas pode selecionar os arquivos correspondentes
na Visualizao remota se preferir.
Nota: Voc s pode colocar esses arquivos cuja verso local mais recente do que a verso remota.
2 Siga um dos seguintes procedimentos para colocar o arquivo no servidor remoto:
Site da caixa de dilogo Preferncias) permitindo a voc salvar o arquivo antes de coloc-lo no servidor remoto.
Clique em Sim para salvar o arquivo ou em No para colocar a verso salva anteriormente no servidor remoto.
Nota: Se voc no salvar o arquivo, todas as alteraes que voc fez desde a ltima gravao sero colocadas no servidor
remoto. No entanto, como o arquivo permanece aberto, voc pode continuar salvando as alteraes depois de colocar o
arquivo no servidor caso desejado.
4 Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em No para evitar
o carregamento de arquivos dependentes. O padro no carregar arquivos dependentes. Voc pode editar essa
opo em Editar > Preferncias > Site.
Nota: Normalmente, uma boa idia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as verses
mais recentes dos arquivos dependentes j estejam no servidor remoto, no h necessidade de carreg-los novamente.
Para parar a transferncia de arquivos a qualquer momento, clique no boto Cancelar da caixa de dilogo Atividade
de arquivo em segundo plano.
Nota: No painel Arquivos expandido, voc pode clicar no boto Registro de FTP para exibir o registro.
estiver em exibio, clique no boto Atividade de arquivo na parte inferior do painel Arquivos.
Nota: Voc no pode ocultar ou remover o boto Registro. Trata-se de uma parte permanente do painel.
em segundo plano.
2 Clique na seta de expanso Detalhes.
em segundo plano.
2 Clique no boto Salvar registro e salve as informaes como um arquivo de texto.
Voc pode examinar a atividade de arquivo abrindo o arquivo de log no Dreamweaver ou em qualquer editor de textos.
procedimentos:
5 Selecione Ativar retirada de arquivos caso voc esteja trabalhando em um ambiente em equipe (ou trabalhando
sozinho, mas em vrias mquinas diferentes). Desmarque a opo caso voc queira desativar a devoluo e a
retirada de arquivo no site.
Essa opo til para permitir aos demais saber que voc retirou um arquivo para edio ou alert-lo de que voc talvez
tenha deixado uma verso mais recente do arquivo em outra mquina.
Caso voc no veja as opes de devoluo/retirada, isso significa que voc no configurou um servidor remoto.
6 Selecione a opo Retirar os arquivos na abertura caso voc queira retirar automaticamente os arquivos quando
Nota: Caso voc trabalhe sozinho em vrias mquinas diferentes, use um nome de retirada diferente em cada uma delas
(por exemplo, AmyR-HomeMac e AmyR-OfficePC) para que voc saiba onde a verso mais recente do arquivo est caso
se esquea de devolv-la.
Endereo de email Caso voc digite um endereo de email, quando retira um arquivo, o nome exibido no painel
Arquivos como um link (em azul e sublinhado) prximo ao arquivo. Caso um membro da equipe clique no link, o
programa de email padro abre uma nova mensagem com o endereo de email do usurio e um assunto
correspondente ao arquivo e ao nome do site.
Nota: Voc pode selecionar arquivos na Visualizao local ou remota, mas no na Visualizao servidor de teste.
Uma marca de seleo vermelha indica que outro membro da equipe retirou o arquivo e um smbolo de bloqueio
indica que o arquivo somente leitura (Windows) ou que est bloqueado (Macintosh).
2 Siga um dos seguintes procedimentos para retirar o(s) arquivo(s):
selecionados ou em no para evitar o download desses arquivos. O padro no baixar arquivos dependentes. Voc
pode editar essa opo em Editar > Preferncias > Site.
Nota: Normalmente, uma boa idia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais
recentes dos arquivos dependentes j estejam no disco local, no h necessidade de baix-los novamente.
Uma marca de seleo verde exibida ao lado do cone de arquivo local indicando sua retirada.
Importante: Caso voc tenha retirado o arquivo ativo no momento, a verso aberta atual do arquivo substituda pela
nova verso retirada.
Nota: Voc pode selecionar arquivos na Visualizao local ou remota, mas no na Visualizao servidor de teste.
2 Siga um dos seguintes procedimentos para devolver o(s) arquivo(s):
o carregamento de arquivos dependentes. O padro no carregar arquivos dependentes. Voc pode editar essa
opo em Editar > Preferncias > Site.
Nota: Normalmente, uma boa idia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as verses
mais recentes dos arquivos dependentes j estejam no servidor remoto, no h necessidade de carreg-los novamente.
Um smbolo de bloqueio exibido ao lado do cone de arquivo local indicando que o arquivo agora somente leitura.
Importante: Caso voc devolva o site ativo atualmente, o arquivo pode ser salvo automaticamente antes de ser devolvido,
dependendo das opes de preferncia que voc definiu.
Abra o arquivo na janela Documento e, em seguida, selecione Site > Desfazer retirada.
No painel Arquivos (Janela > Arquivos), clique com o boto direito do mouse (Windows) ou com a tecla Control
pressionada (Macintosh) e, em seguida, selecione Desfazer retirada.
A cpia local do arquivo se torna somente leitura, e todas as alteraes que voc fez nele so perdidas.
procedimentos:
conforme necessrio.
5 Clique no boto Avanado.
6 Selecione a opo Ativar retirada de arquivos e insira as seguintes informaes:
Na caixa Nome de retirada, digite um nome que o identifique aos demais membros da equipe.
Na caixa Endereo de email, digite o seu endereo.
O nome e os endereos de email so usados para identificar a propriedade no servidor WebDAV, sendo exibidos no
painel Arquivos para fins de contato.
7 Clique em Salvar.
O Dreamweaver configura o site para acesso WebDAV. Quando voc usa o comando Devolver ou Retirar em qualquer
arquivo do site, o arquivo transferido usando o WebDAV.
Nota: O WebDAV talvez no consiga retirar corretamente nenhum arquivo com contedo dinmico como tags PHP ou
SSIs porque o HTTP GET os processa como retirados.
A Adobe recomenda que voc use uma outra ferramenta de comparao de arquivos quando estiver trabalhando com
arquivos controlados por verso SVN. Ao comparar arquivos para obter as diferenas, voc pode saber exatamente que
tipo de alteraes outros usurios fizeram nos arquivos. Para obter mais informaes sobre ferramentas de
comparao, use um mecanismo de busca na Web como o Google para procurar comparao de arquivos ou
ferramentas para diferenciar. O Dreamweaver trabalha com a maioria das ferramentas de outros fabricantes.
Para obter uma viso em geral em vdeo sobre como trabalhar com SVN e Dreamweaver, consulte
www.adobe.com/go/lrvid4049_dw_br.
Editar.
Nota: Se ainda no tiver configurado as pastas locais e remotas para um site do Dreamweaver, voc precisar
configurar pelo menos um site local antes de prosseguir. (O site remoto no obrigatrio nesta etapa, mas voc
precisar configur-lo em algum momento, antes de publicar seus arquivos na Web.) Para obter mais informaes,
consulte Configurao de um site do Dreamweaver na pgina 37.
2 Na caixa de dilogo Configurao de site, selecione a categoria Controle de verso.
3 Selecione Subversion no menu pop-up Acesso.
4 Defina as opes de acesso da seguinte forma:
Selecione um protocolo no menu pop-up Protocolo. Os protocolos disponveis so HTTP, HTTPS, SVN e
SVN+SSH.
Nota: O uso do protocolo SVN+SSH requer uma configurao especial. Para obter mais informaes, consulte
www.adobe.com/go/learn_dw_svn_ssh_br.
Digite o endereo do servidor SVN na caixa de texto Endereo do servidor (normalmente no formato
servername.domain.com).
Digite o caminho para o seu repositrio no servidor SVN na caixa de texto Caminho do repositrio
(normalmente algo como /svn/your_root_directory. atribuio do administrador do servidor nomear a pasta
raiz para o repositrio de SVN.)
(Opcional) Se quiser usar uma porta do servidor diferente do padro, selecione No-padro e digite o nmero
da porta na caixa de texto.
5 Clique em Testar para testar sua conexo, ou ento clique em OK para fechar a caixa de dilogo. Depois, clique em
Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.) Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) no arquivo ou na pasta relevante e selecione Controle de verso > Obter verses mais recentes.
Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois,
clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo
ou na pasta relevante e selecione Obter verses mais recentes.
Nota: Voc tambm pode clicar com o boto direito do mouse em um arquivo e escolher Retirar no menu de contexto ou
selecionar o arquivo e clicar no boto Retirar para obter a verso mais recente. No entanto, como o SVN no oferece
suporte a um fluxo de trabalho de retirada, essa ao no retira efetivamente o arquivo no sentido tradicional.
Confirmar arquivos
1 Verifique se voc configurou corretamente uma conexo do SVN.
2 Siga um destes procedimentos:
Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.) Depois, selecione o arquivo que deseja confirmar e clique no boto Devolver.
Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois,
clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo
que deseja confirmar e selecione Devolver.
3 Revise as aes na caixa de dilogo Confirmar, faa as alteraes necessrias e clique em OK.
Voc pode alterar aes selecionando o arquivo cuja ao deseja alterar e clicando nos botes na parte inferior da
caixa de dilogo Confirmar. H duas opes disponveis: confirmar e ignorar.
Nota: Uma marca de seleo verde em um arquivo no painel Arquivos representa um arquivo alterado que ainda no
foi confirmado no repositrio.
Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer
Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.) Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) no arquivo do qual deseja exibir as revises e selecione Controle de verso > Mostrar revises.
Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois,
clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo
do qual deseja exibir as revises e selecione Mostrar revises.
3 Na caixa de dilogo Histrico de reviso, selecione a reviso ou as revises relevantes e siga um destes
procedimentos:
Clique em Comparar com local para comparar a reviso selecionada com a verso local do arquivo.
Nota: Voc deve instalar uma ferramenta para comparao de arquivos de outro fabricante antes de comparar
arquivos. Para obter mais informaes sobre ferramentas de comparao, use um mecanismo de busca na Web
como o Google para procurar comparao de arquivos ou ferramentas para diferenciar. O Dreamweaver
trabalha com a maioria das ferramentas de outros fabricantes.
Clique em Comparar para comparar duas revises selecionadas. Clique com a tecla Control pressionada para
selecionar duas revises simultaneamente.
Clique em Exibir para exibir a reviso selecionada. Essa ao no substitui a cpia local atual do mesmo arquivo.
Voc pode salvar a reviso selecionada no seu disco rgido, assim como faria com qualquer outro arquivo.
Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois,
clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo
relevante e selecione Bloquear ou Desbloquear.
Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.) Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) no arquivo relevante e selecione Bloquear ou Desbloquear.
Para copiar um arquivo, selecione-o, copie-o (Editar > Copiar) e cole (Editar > Colar) o arquivo no novo local.
Quando voc copia e cola um arquivo, o Dreamweaver marca o arquivo no novo local com um sinal Adicionar com
histrico.
Para reverter um arquivo copiado ou movido para seu local original, clique com o boto direito do mouse no
arquivo e selecione Controle de verso > Reverter.
Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo cujo
conflito deseja resolver e selecione Controle de verso > Marcar como resolvido.
Acessar offline
Talvez seja til para voc evitar o acesso ao repositrio durante outras atividades de transferncia de arquivos usando
o acesso offline. O Dreamweaver se reconectar ao repositrio SVN assim que voc invocar uma atividade que exija
uma conexo (Obter verses mais recentes, Confirmar etc).
1 Verifique se voc configurou corretamente uma conexo do SVN.
2 Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up
Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer
arquivo ou pasta no painel Arquivos e selecione Controle de verso > Acessar offline.
Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida
automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo que
Sincronizao de arquivos
Sincronizar os arquivos nos sites local e remoto
Depois de criar arquivos nos sites locais e remotos, voc pode sincronizar os arquivos entre os dois sites.
Nota: Caso o site remoto seja um servidor FTP (e no um servidor em rede), a sincronizao dos arquivos usa FTP.
Antes de sincronizar os sites, voc pode verificar quais arquivos voc deseja colocar, obter, excluir ou ignorar. O
Dreamweaver tambm confirma quais arquivos foram atualizados depois que voc completa a sincronizao.
Verifique quais arquivos so mais novos no site local ou remoto sem sincronizao
No painel Arquivos, siga um destes procedimentos:
Clique no menu Opes no canto superior direito e, em seguida, selecione Editar > Selecionar um local mais novo
ou Editar > Selecionar um remoto mais novo.
No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) e, em seguida, selecione Selecionar > Local mais novo ou Selecionar > Remoto mais novo.
(Macintosh) no arquivo sobre o qual voc deseja obter informaes e, em seguida, selecione Exibir informaes de
sincronizao.
Nota: Para que esse recurso esteja disponvel, a opo Manter informaes sobre sincronizao deve estar selecionada
na categoria Remoto da caixa de dilogo Definio de sites.
Sincronizar os arquivos
1 No painel Arquivos (Janela > Arquivos), selecione um site no menu em que o site atual, o servidor ou a unidade
exibida.
2 (Opcional) Selecione arquivos ou pastas especficas ou avance prxima etapa para sincronizar todo o site.
3 Clique no menu Opes no canto superior direito do painel Arquivos e selecione Site > Sincronizar.
Voc tambm pode clicar no boto Sincronizar na parte superior do painel Arquivos para sincronizar arquivos.
4 No menu Sincronizar, realize um dos seguintes procedimentos:
6 Selecione se voc deseja excluir os arquivos no site de destino sem equivalentes no site de origem. (Isso no est
Nota: Para poder sincronizar os arquivos, voc deve visualizar as aes que o Dreamweaver realiza para cumprir essa
tarefa.
Caso a verso mais recente de cada arquivo escolhido j esteja em ambos os locais e mais nada precise ser excludo, um
alerta exibido informando que nenhuma sincronizao necessria. Do contrrio, a caixa de dilogo Sincronizar
exibida para permitir alterar as aes (colocar, obter, excluir e ignorar) desses arquivos antes da execuo da
sincronizao.
8 Verifique a ao a ser realizada em cada arquivo.
9 Para alterar a ao de um determinado arquivo, selecione-o e, em seguida, clique em um dos cones de ao na parte
local.
A seguinte tabela lista as ferramentas para comparao de arquivos mais comuns para Macintosh e o local das
ferramentas e dos script de inicializao no disco rgido:
Caso voc use
FileMerge
usr/bin/opendiff
BBEdit
usr/bin/bbdiff
TextWrangler
usr/bin/twdiff
Nota: A pasta usr costuma permanecer oculta no Finder. No entanto, voc pode acess-la usando o boto Browse do
Dreamweaver.
Nota: Os resultados reais exibidos dependem da ferramenta para diferenciar que voc est usando. Verifique o manual
do usurio da ferramenta para compreender como interpretar os resultados.
menu de contexto.
Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada em um dos arquivos selecionados.
A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.
direita.
2 Clique com a tecla Control pressionada (Windows) ou Command (Macintosh) nos dois arquivos para selecion-los.
3 Clique com o boto direito do mouse em um dos arquivos selecionados e selecione Comparar arquivos remotos no
menu de contexto.
Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada em um dos arquivos selecionados.
A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.
no menu de contexto.
Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada no arquivo local.
A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.
direita.
2 Clique com o boto direito do mouse em um arquivo no painel e selecione Comparar com local no menu de
contexto.
Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada no arquivo.
Se a verso remota do arquivo tiver sido modificada, voc receber uma notificao com a opo de visualizao das
diferenas.
2 Para exibir as diferenas, clique no boto Comparar.
contexto.
2 Complete a caixa de dilogo Sincronizar arquivos e clique em Visualizar.
Depois que voc clicar em Visualizar, os arquivos selecionados e as aes a serem realizadas durante a sincronizao
sero listados.
3 Na lista, selecione todos os arquivos que voc deseja comparar e clique no boto Comparar (o cone com duas
pginas pequenas).
Nota: O arquivo deve ser baseado em texto como, por exemplo, arquivos em HTML ou do ColdFusion.
O Dreamweaver inicia a ferramenta comparativa, que compara as verses local e remota de todos os arquivos que voc
selecionou.
do painel Arquivos.
2 Selecione Reverter pgina.
Caso haja alguma verso anterior da pgina a ser revertida, a caixa de dilogo Reverter exibida.
3 Selecione a verso da pgina para a qual voc deseja reverter e clique em Reverter.
Voc pode encobrir pastas e tipos de arquivo no site remoto ou local. O encobrimento exclui pastas e arquivos
encobertos das seguintes operaes:
seguintes procedimentos:
Uma linha vermelha no cone da pasta ou do arquivo aparece ou desaparece, indicando que a pasta est encoberta ou
desencoberta.
Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no
painel Arquivos e realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta
substitui o encobrimento.
clique em OK.
Por exemplo, voc pode digitar .jpg para encobrir todos os arquivos com nomes que terminem com .jpg no site.
Separe vrios tipos de arquivo com um espao; no use uma vrgula ou ponto-e-vrgula.
No painel Arquivos, uma linha vermelha exibida em todos os arquivos afetados indicando que eles esto encobertos.
Alguns softwares criam arquivos de backup que terminam com um determinado sufixo como, por exemplo, .bak. Voc
pode encobrir esses arquivos.
Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no
painel Arquivos e realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta
substitui o encobrimento.
Desmarque a opo Encobrir os arquivos terminados com para desencobrir todos os tipos de arquivo listados na
caixa.
As linhas vermelhas desaparecem de todos os arquivos afetados indicando que eles esto desencobertos.
Caso voc queira desencobrir temporariamente todas as pastas e arquivos, encubra novamente esses itens e desative
o encobrimento de site.
1 No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado.
2 Selecione todos os arquivos ou pastas do site.
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,
Nota: Para compartilhar as Design Notes, os usurios devem definir o mesmo caminho de raiz do site, sites/assets/orig).
Quando voc importa o grfico para o Dreamweaver, o arquivo de Design Notes copiado automaticamente para o
site com o grfico. Quando voc seleciona a imagem no Dreamweaver e opta por edit-la usando o Fireworks, este abre
o arquivo original para edio.
Notes.
4 Marque Manter Design Notes para ativar Design Notes (desmarque para desabilit-las).
5 Caso voc queira excluir todos os arquivos de Design Notes do site, clique em Limpar e, depois, clique em Sim. (Se
voc desejar excluir os arquivos remotos de Design Notes, precisar exclu-los manualmente).
Nota: O comando Limpar do Design Note exclui somente arquivos MNO (Design Notes). Ele no exclui a pasta _notes
ou o arquivo dwsync.xml dentro da pasta _notes. O Dreamweaver usa o arquivo dwsync.xml para manter informaes
sobre a sincronizao do site.
6 Selecione Ativar carregamento de Design Notes para compartilhamento para carregar Design Notes associadas ao
Caso selecione essa opo, voc pode compartilhar as Design Notes com o restante da equipe. Quando voc coloca
ou obtm um arquivo, o Dreamweaver coloca ou obtm automaticamente o arquivo de Design Notes associado.
Caso voc no selecione essa opo, o Dreamweaver mantm as Design Notes localmente, mas no as carrega com
os arquivos. Caso voc trabalhe sozinho no site, desmarcar essa opo melhor a o desempenho. As Design Notes
no sero transferidas para o site remoto quando voc devolver ou colocar os arquivos, e voc pode continuar
adicionando e modificando as Design Notes do site localmente.
5 Selecione Mostrar quando o arquivo for aberto para que o arquivo de Design Notes seja exibido sempre que o
O Dreamweaver salva as anotaes em uma pasta chamada _notes, no mesmo local do arquivo atual. O nome de
arquivo o nome de arquivo do documento mais a extenso .mno. Por exemplo, caso o nome de arquivo seja
index.html, o arquivo de Design Notes associado se chama index.html.mno.
Abra o arquivo na janela Documento e, em seguida, selecione Arquivo > Design Notes.
No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) no arquivo e, em seguida, selecione Design Notes.
Na coluna Notas do painel Arquivos, clique duas vezes no cone amarelo Design Notes.
Nota: Para mostrar os cones amarelos Design Notes, selecione Site > Gerenciar sites > [nome do site] > Editar >
Configuraes avanadas > Colunas de visualizao de arquivos. Selecione Notas no painel da lista e escolha a opo
Mostrar. Quando voc clica no boto Expandir na barra de ferramentas Arquivos para mostrar o site local e o site
remoto, uma coluna Notas no site local mostra um cone de nota amarelo para arquivos que tenham uma Design Note.
Nota: Voc s pode ter um valor personalizado no menu de status por vez. Caso voc realize esse procedimento
novamente, o Dreamweaver substitui o valor de status que voc digitou inicialmente pelo novo valor de status que voc
digitou.
O Dreamweaver solicita a voc verificar se ele deve excluir todas as Design Notes que no esto mais associadas a um
arquivo no site.
Caso voc use o Dreamweaver para excluir um arquivo que tenha um arquivo de Design Notes associado, o
Dreamweaver tambm exclui o arquivo de Design Notes. Dessa forma, normalmente s h arquivos de Design Notes
rfos caso voc exclua ou renomeie um arquivo fora do Dreamweaver.
Nota: Caso voc desmarque a opo Manter Design Notes antes de clicar em Limpar, o Dreamweaver exclui todos os
arquivos de Design Notes do site .
Teste do site
Diretrizes de teste do site
Antes de carregar o site em um servidor e declar-lo pronto para visualizao, uma boa idia test-lo localmente. (Na
verdade, uma boa idia testar e solucionar os problemas do site sempre em toda sua criao voc pode identificar
problemas logo e evitar repeti-los.)
Voc deve verificar se as pginas so exibidas e funcionam conforme esperado nos navegadores que voc deseja, se no
h links desfeitos e se elas no demoram muito para serem baixadas. Voc tambm pode testar e solucionar problemas
de todo o site executando um relatrio de site.
As seguintes diretrizes ajudaro voc a criar uma boa experincia para os visitantes do site:
1. Verifique se as pginas funcionam nos navegadores que voc deseja.
As pginas devem ser legveis e funcionais em navegadores que no do suporte a estilos, camadas, plug-ins ou
JavaScript. Em pginas que apresentam falhas em navegadores mais antigos, considere o uso do comportamento
Verificar navegador para redirecionar automaticamente os visitantes para outra pgina.
2. Visualize as pginas em navegadores e plataformas diferentes.
Isso d a voc a oportunidade de ver as diferenas de layout, cor, tamanhos de fonte e tamanho da janela do navegador
padro que no podem ser previstas em uma verificao do navegador de destino.
3. Verifique o site em busca de links desfeitos e os corrija.
Outros sites tambm passam por novos projetos e reorganizaes, e a pgina de link pode ter sido movida ou excluda.
Voc pode executar um relatrio de verificao de link para testar os links.
4. Monitore o tamanho do arquivo das pginas e o tempo de download.
No se esquea de que se uma pgina consistir em uma tabela grande, em alguns navegadores, os visitantes no vero
nada at a concluso do carregamento de toda a tabela. Considere dividir tabelas grandes; caso isso no seja possvel,
considere colocar pouco contedo como uma mensagem de boas-vindas ou um banner publicitrio fora da tabela
na parte superior da pgina para que os usurios possam ver esse material durante o download da tabela.
5. Execute alguns relatrios de site para testar e solucionar problemas de todo o site.
Voc pode verificar todo o site em busca de problemas como, por exemplo, documentos sem ttulo, tags vazias e tags
aninhadas redundantes.
6. Valide o cdigo para localizar erros de tag ou de sintaxe.
7. Atualize e mantenha o site aps a publicao.
A publicao do site ou seja, torn-lo dinmico pode ser realizada de vrias formas, sendo um processo contnuo.
Uma parte importante do processo a definio e a implementao de um sistema de controle de verso, com as
ferramentas do Dreamweaver ou por meio de um aplicativo de controle de verso externo.
8. Use os fruns de discusso.
ignore a etapa.
Nota: Caso tenha selecionado mais de um relatrio de fluxo de trabalho, voc precisa clicar no boto Configuraes de
relatrio de cada relatrio. Selecione um relatrio, clique em Configuraes de relatrio e insira as configuraes; em
seguida, repita o processo para todos os demais relatrios de fluxo de trabalho.
Retirado por Cria um relatrio listando todos os documentos retirados por um membro de equipe especfico. Digite
o nome do membro de uma equipe e, em seguida, clique em OK para retornar caixa de dilogo Relatrios.
Design Notes Cria um relatrio listando todas as Design Notes dos documentos selecionados ou do site. Digite um ou
mais pares nome/valor e, em seguida, selecione os valores de comparao nos menus pop-up correspondentes. Clique
em OK para retornar caixa de dilogo Relatrios.
Modificado recentemente Cria um relatrio listando arquivos que foram alterados durante um tempo especfico.
Insira faixas de datas e locais para os arquivos que voc deseja exibir.
O texto alternativo aparece no lugar das imagens nos navegadores somente de texto ou nos navegadores que fazem
download manual de imagens. Os leitores de tela indicam texto alternativo, e alguns navegadores exibem texto
alternativo quando o usurio massa o mouse pela imagem.
Retirado por Cria um relatrio listando todos os documentos retirados por um membro de equipe especfico.
Tags aninhadas redundantes Cria um relatrio detalhando tags aninhadas que devem ser limpas.
Por exemplo, <i> The rain <i> in</i> Spain stays mainly in the plain</i> relatado.
Tags vazias removveis Cria um relatrio detalhando todas as tags vazias que podem ser removidas para limpar o
cdigo HTML.
Por exemplo, voc pode ter excludo um item ou imagem na Visualizao de cdigo, mas deixado as tags aplicadas ao item.
Documentos sem ttulo Cria um relatrio listando todos os documentos sem ttulo encontrados dentro dos
parmetros selecionados. O Dreamweaver informa todos os documentos com ttulos padro, ttulos duplicados ou
tags de ttulo no encontradas.
Dependendo do tipo de relatrio executado, voc pode ser solicitado a salvar o arquivo, definir o site ou selecionar uma
pasta (caso voc ainda no tenha feito isso).
Uma lista de resultados exibida no painel Relatrios do site (no grupo de painis Resultados).
Selecione uma linha do relatrio e, em seguida, clique no boto Mais informaes esquerda do painel Relatrios
do site para obter uma descrio do problema.
As informaes so exibidas no painel Referncia.
Clique duas vezes em uma linha no relatrio para exibir o cdigo correspondente na janela Documento.
Nota: Caso voc esteja na Visualizao de design, o Dreamweaver altera a exibio para dividi-la e mostrar o problema
informado no cdigo.
3 Clique em Salvar relatrio para salvar o relatrio.
Ao salvar um relatrio, voc pode import-lo para um arquivo de modelo existente. Em seguida, voc pode importar
o arquivo para um banco de dados ou planilha e imprimi-lo, ou use o arquivo para exibir o relatrio em um site.
Depois de executar relatrios em HTML, use o comando Limpar HTML para corrigir todos os erros de HTML listados
pelos relatrios.
110
Nota: Caso o item de biblioteca contenha links, eles podem no funcionar no novo site. Alm disso, as imagens em uma
biblioteca no so copiadas para o novo site.
Quando voc usa um item de biblioteca, o Dreamweaver insere um link para ele, e no o prprio item, na pgina da
Web. Ou seja, o Dreamweaver insere uma cpia do cdigo-fonte HTML do item no documento e adiciona um
comentrio em HTML contendo uma referncia para o item original, externo. essa referncia externa que possibilita
a atualizao automtica.
Quando voc cria um item de biblioteca que inclui um elemento com um comportamento do Dreamweaver
relacionado, o Dreamweaver copia o elemento e seu identificador de evento (o atributo que especifica o evento que
dispara a ao como, por exemplo, onClick, onLoad ou onMouseOver e a ao a ser chamada quando o evento ocorre)
para o arquivo do item de biblioteca. O Dreamweaver no copia as funes JavaScript associadas para o item de
biblioteca. Na verdade, quando voc insere o item de biblioteca em um documento, o Dreamweaver insere
automaticamente as funes JavaScript apropriadas na seo head do documento (caso elas ainda no estejam l).
Nota: Caso codifique manualmente o JavaScript (ou seja, o crie usando os comportamentos do Dreamweaver), voc pode
fazer dele parte de um item de biblioteca se estiver usando o comportamento Chamar JavaScript para executar o cdigo.
Caso voc no use um comportamento do Dreamweaver para executar o cdigo, este no mantido como parte do item
de biblioteca.
H requisitos especiais para a edio dos comportamentos em itens de biblioteca. Os itens de biblioteca no podem
conter folhas de estilos porque o cdigo desses elementos faz parte da seo head.
Painel Ativos com a lista de sites sendo exibida. Os cones de categoria esto esquerda, e a rea de visualizao est acima da lista.
Para alternar essas duas exibies, selecione um dos botes de opo Site ou Favoritos acima da rea de visualizao.
(Essas duas exibies no esto disponveis para as categorias Modelos e Biblioteca.)
Nota: Grande parte das operaes do painel Ativos funciona da mesma forma em ambas as listas. No entanto, h
algumas tarefas que voc s consegue executar na lista Favoritos.
Nas duas listas, os ativos so classificados de acordo com uma das seguintes categorias:
Imagens
Cores
Links externos nos documentos do site atual, inclusive links para FTP, gopher, HTTP, HTTPS, JavaScript,
email (mailto) e arquivo local (file://).
URLs
Arquivos em qualquer verso do Adobe Flash. O painel Ativos exibe somente arquivos SWF (arquivos
compactados criados com Flash) e no arquivos FLA (origem Flash).
Flash
Shockwave
Filmes
Arquivos JavaScript ou VBScript. Scripts em arquivos HTML (ao contrrio de arquivos JavaScript ou
VBScript independentes) no so exibidos no painel Ativos.
Scripts
Modelos
Layouts de pgina mestre usados em vrias pginas. Modificar um modelo modifica automaticamente
todas as pginas vinculadas a ele.
Elementos de design que voc usa em vrias pginas; quando voc modifica um item de
biblioteca, todas as pginas que contm esse item so atualizadas.
Itens de biblioteca
Nota: Para que seja exibido no painel Ativos, um arquivo deve estar classificado de acordo com uma dessas categorias.
s vezes, alguns outros tipos de arquivo so chamados de ativos, embora no sejam mostrados no painel.
Por padro, os ativos em uma categoria so listados em ordem alfabtica pelo nome, embora seja possvel orden-los
por tipo e vrios outros critrios. Voc tambm pode visualizar os ativos e redimensionar as colunas e a rea de
visualizao.
Por exemplo, quando voc seleciona um ativo de filme, a rea de visualizao mostra um cone. Para exibir o filme,
clique no boto Executar (o tringulo verde) no canto superior direito da rea de visualizao.
Ordenar ativos
Clique no cabealho de uma coluna.
Por exemplo, para ordenar a lista de imagens por tipo (de forma que todas as imagens GIF permaneam juntas, assim
como todas as imagens JPEG e assim por diante), clique no cabealho de coluna Tipo.
Para atualizar manualmente a lista de sites, clique no boto Atualizar lista de sites
Para atualizar a lista de sites e recriar manualmente o cache do site, clique com o boto direito do mouse (Windows)
ou clique mantendo a tecla command pressionada (Macintosh) na lista Ativos e selecione Atualizar lista de sites.
Nota: Selecione qualquer categoria exceto Modelos. Um modelo aplicado a um documento inteiro, no podendo ser
inserido em um documento.
3 Selecione Site ou Favoritos na parte superior do painel e, em seguida, o ativo.
No h nenhuma lista de sites ou Favoritos para itens de biblioteca. Ignore esta etapa caso voc esteja inserindo um
item de biblioteca.
4 Siga um destes procedimentos:
Caso o ativo inserido seja uma cor, ela se aplica ao texto exibido do ponto de insero em diante.
est armazenado.
Nota: Por padro, os URLs dos arquivos do site so armazenadas na visualizao Sites. A visualizao Favoritos
mantm os URLs que voc mesmo adicionou.
3 Selecione o URL.
4 Siga um destes procedimentos:
Clique com a tecla Shift pressionada para selecionar uma srie de ativos consecutivos.
Clique mantendo a tecla control (Windows) ou a tecla command pressionada (Macintosh) para adicionar um ativo
individual seleo (independentemente de sua proximidade em relao seleo existente). Clique mantendo a
tecla control ou a tecla command pressionada em um ativo selecionado para desfazer a seleo.
Editar um ativo
Quando voc edita um ativo no painel Ativos, o comportamento varia de acordo com o tipo de ativo. Para alguns ativos
como, por exemplo, as imagens voc usa um editor externo, aberto automaticamente caso voc tenha definido um para
esse tipo de ativo. Voc pode editar cores e URLs somente na lista Favoritos. Ao editar modelos e itens de biblioteca,
voc faz as alteraes dentro do Dreamweaver.
1 No painel Ativos, siga um destes procedimentos:
Nota: Caso o ativo deva ser editado em um editor externo e nenhum seja aberto automaticamente, selecione Editar >
Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh), escolha a categoria Tipos de arquivos/editores e
verifique se voc definiu um editor externo para esse tipo de ativo.
2 Faa as alteraes.
3 Ao terminar, execute um destes procedimentos:
Caso o ativo esteja baseado em arquivo (outro que no seja uma cor ou URL), salve-o (no editor) e feche-o.
Caso o ativo seja um URL, na caixa de dilogo Editar URL clique em OK.
Nota: Caso o ativo seja uma cor, o seletor de cores fechado automaticamente depois que voc seleciona uma cor. Para
ignorar o seletor de cores sem escolher uma cor, pressione Esc.
nome ou no cone do ativo no painel Ativos e selecione Localizar no site no menu de contexto.
Nota: Localizar no site est indisponvel para cores e URLs, que no correspondem aos arquivos do site.
O painel Arquivos aberto com o arquivo de ativo selecionado. O comando Localizar no site localiza o arquivo
correspondente ao prprio ativo, e no arquivos que usam esse ativo.
um ou mais ativos na lista de sites ou Favoritos, selecione Copiar para site e escolha o nome do site de destino no
submenu que lista todos os sites definidos por voc.
Nota: Na lista Favoritos, possvel copiar uma pasta Favoritos, bem como ativos individuais.
Os ativos so copiados para os locais correspondentes no site de destino. O Dreamweaver cria novas pastas na
hierarquia do site de destino conforme necessrio. Os ativos tambm so adicionados lista Favoritos do site de
destino.
Nota: Caso o ativo que voc copiou seja uma cor ou um URL, ele exibido apenas na lista Favoritos do site de destino.
Como as cores e os URLs no correspondem aos arquivos, no h nenhum arquivo a ser copiado para o outro site.
Selecione um ou mais ativos na lista de sites do painel Ativos e clique no boto Adicionar a favoritos
Selecione um ou mais ativos na lista de sites do painel Ativos, clique com o boto direito do mouse (Windows) ou
clique mantendo a tecla control pressionada (Macintosh) e selecione Adicionar a favoritos.
Selecione um ou mais arquivos no painel Arquivos, clique com o boto direito do mouse (Windows) ou clique
mantendo a tecla control pressionada (Macintosh) e selecione Adicionar a favoritos. O Dreamweaver ignora os
arquivos que no correspondam a uma categoria do painel Ativos.
Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) em
um elemento na Visualizao de design da janela Documento e selecione o comando do menu de contexto para
adicionar o elemento a uma categoria Favoritos.
O menu de contexto do texto contm Adicionar a cores favoritas ou Adicionar aos URLs favoritos, dependendo da
existncia de um link anexado ao texto. Voc pode adicionar somente elementos que correspondam a uma das
categorias no painel Ativos.
Digite um URL e um apelido na caixa de dilogo Adicionar novo URL e clique em OK.
Os ativos so removidos da lista Favoritos, e no da lista de sites. Caso voc remova uma pasta Favoritos, ela e todo seu
contedo so removidos.
Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) no
nome ou no cone do ativo no painel Ativos e selecione Editar apelido.
Clique no nome do ativo uma vez, faa uma pausa e clique nele novamente. (No clique duas vezes. Isso abre o item
para edio.)
4 Digite o apelido do ativo e pressione Enter (Windows) ou Return (Macintosh).
.
na parte inferior da categoria Biblioteca.
O Dreamweaver salva cada um dos itens de biblioteca como um arquivo separado (com a extenso .lbi) na pasta
Biblioteca da pasta raiz local do site.
4 Ainda com o item selecionado, digite um nome para ele e pressione Enter (Windows) ou Return (Macintosh).
O Dreamweaver abre uma nova janela, semelhante janela Documento, para edio do item de biblioteca. O fundo
cinza indica que voc est editando um item de biblioteca, e no um documento.
4 Faa e salve as alteraes.
5 Especifique se voc deseja atualizar os documentos no site local que usam o item de biblioteca. Selecione Atualizar
para atualizar imediatamente. Se voc selecionar No atualizar, os documentos no sero atualizados at que voc
escolha Modificar > Biblioteca > Atualizar esta pgina ou Atualizar pginas.
Atualizar o documento atual para usar a verso atual de todos os itens de biblioteca
Selecione Modificar > Biblioteca > Atualizar esta pgina.
Atualizar todo o site ou todos os documentos que usam um determinado item de biblioteca
1 Selecione Modificar > Biblioteca > Atualizar pginas.
2 No menu pop-up Pesquisar, especifique o que voc deseja atualizar:
Para atualizar todas as pginas no site selecionado de forma a usar a verso atual de todos os itens de biblioteca,
selecione Site inteiro e, em seguida, o nome do site no menu pop-up adjacente.
Para atualizar todas as pginas do site atual que usam o item de biblioteca, selecione Arquivos que usam e, em
seguida, o nome de um item de biblioteca no menu pop-up adjacente.
3 Verifique se Itens de biblioteca est selecionado na opo Atualizar.
O Dreamweaver atualiza os arquivos conforme indicado. Caso voc tenha selecionado a opo Mostrar registro, o
Dreamweaver gera um relatrio mostrando se os arquivos foram atualizados com xito, alm das demais informaes.
2 Selecione o item de biblioteca, faa uma pausa e clique nele novamente. (No clique duas vezes. Isso abre o item
para edio.)
Importante: Caso exclua um item de biblioteca, voc no pode usar Desfazer para recuper-lo. No entanto, talvez voc
consiga recri-lo.
informaes.
Aberto Abre o arquivo de origem do item de biblioteca para edio. Isso o equivalente seleo do item no painel
item desanexado no documento, embora ele no seja mais um item de biblioteca e no seja atualizado quando voc
altera o original.
Recriar Sobregrava o item de biblioteca original com a seleo atual. Use essa opo para recriar itens de biblioteca
caso o item original esteja ausente ou tenha sido excludo acidentalmente.
Observe o nome do item de biblioteca, bem como as tags exatas que ele contm. Voc precisar dessas informaes
mais tarde.
2 Selecione o item de biblioteca e clique em Separar do original no Inspetor de propriedades (Janela > Propriedades).
3 Selecione o elemento que apresenta o comportamento anexado a ele.
4 No painel Comportamentos (Janela > Comportamentos), clique duas vezes na ao que voc deseja alterar.
5 Na caixa de dilogo exibida, faa as alteraes e clique em OK.
6 No painel Ativos, selecione a categoria Biblioteca
7 Anote o nome exato e o uso de maisculas e minsculas do item de biblioteca original, selecione-o e clique no boto
Excluir.
8 Na janela Documento, selecione todos os elementos que formam o item de biblioteca.
Tome cuidado para selecionar exatamente os mesmos elementos que estavam no item de biblioteca original.
9 No painel Ativos, clique no boto Novo item de biblioteca
10 Para atualizar o item de biblioteca nos demais documentos do site, selecione Modificar > Biblioteca >
Atualizar pginas.
11 No menu pop-up Pesquisar, selecione Arquivos que usam.
12 No menu pop-up prximo, selecione o nome do item de biblioteca que voc criou h pouco.
123
Uma declarao individual consiste em duas partes: a propriedade (como font-family) e o valor (como Helvetica).
Na regra CSS anterior, um determinado estilo foi criado para as tags h1: o texto de todas as tags h1 vinculadas a esse
estilo ter 16 pixels de tamanho, a fonte Helvetica e ser negrito.
O estilo (que proveniente de uma regra ou de um conjunto de regras) reside em um lugar separado do texto real que
ele est formatando, geralmente em uma folha de estilos externa ou na parte de cabealho de um documento HTML.
Desse modo, uma regra para as tags h1 pode se aplicar a vrias tags simultaneamente (e, no caso das folhas de estilos
externas, a regra pode se aplicar a vrias tags simultaneamente em vrias pginas diferentes). Assim, a CSS oferece
recursos de atualizao extremamente fceis. Quando voc atualizar uma regra CSS em um lugar, a formatao de
todos os elementos que usam o estilo definido sero automaticamente atualizados para o novo estilo.
Os estilos de classe permitem que voc aplique as propriedades de estilo a qualquer elemento na pgina.
Os estilos de tag HTML redefine a formatao de uma tag especfica, como h1. Quando voc criar ou alterar um
estilo CSS para a tag h1, todo o texto formatado com a tag h1 imediatamente atualizado.
Os estilos avanados redefinem a formatao de uma determinada combinao de elementos ou de outras formas
de seletor conforme permitido pela CSS (por exemplo, o seletor td h2 se aplica sempre que um cabealho h2
aparece em uma clula de tabela.) Os estilos avanados tambm podem redefinir a formatao das tags que contm
um atributo id especfico (por exemplo, os estilos definidos por #myStyle se aplicam a todas as tags que contm o
par atributo/valor id="myStyle").
As regras CSS podem residir nos seguintes locais:
Folhas de estilos CSS externas Conjuntos de regras CSS armazenadas em um arquivo CSS (.css) externo separado (e
no em um arquivo HTML). Esse arquivo vinculado a uma ou mais pginas de um site usando um link ou uma regra
@import na seo de cabealho de um documento.
Folhas de estilos CSS internas (ou incorporadas) Conjuntos de regras CSS includas em uma tag style na parte de
O Dreamweaver reconhece os estilos definidos nos documentos existentes, contanto que eles estejam em
conformidade com as diretrizes do estilo CSS. O Dreamweaver tambm processa a maioria dos estilos aplicados
diretamente na Visualizao de design. (A visualizao do documento em uma janela de navegador, no entanto,
proporciona a voc o processamento de pgina ao vivo mais preciso.) Alguns estilos CSS so processados de forma
diferente no Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou outros navegadores, enquanto outros
estilos no so compatveis com nenhum navegador.
Para exibir o guia de referncia de CSS da OReilly includo com o Dreamweaver, selecione Ajuda > Referncia e
selecione Referncia de CSS da OReilly no menu pop-up no painel Referncia.
Quando um usurio carrega a pgina, as configuraes de fonte de pargrafo e tamanho de fonte definidas por voc
como autor substituem as configuraes padro de texto de pargrafo do navegador.
Os usurios podem fazer selees para personalizar a exibio do navegador de uma forma ideal para seu prprio uso.
No Internet Explorer, por exemplo, o usurio pode selecionar Exibir > Tamanho do texto > O maior para expandir a
fonte da pgina para um tamanho mais legvel, caso ele ache que a fonte est muito pequena. Por fim (pelo menos neste
caso), a seleo do usurio substitui os estilos padro de tamanho de fonte do navegador e os estilos de pargrafo
criados pelo autor da pgina da Web.
A herana outra parte importante da cascata. As propriedades da maioria dos elementos de uma pgina da Web so
herdadas; por exemplo, as tags de pargrafo herdam determinadas propriedades das tags de corpo, as tags de lista de
marcadores herdam determinadas propriedades das tags de pargrafo e assim por diante. Desse modo, se voc criar a
seguinte regra na folha de estilos:
body {
font-family: Arial;
font-style: italic;
}
Todo o texto de pargrafo na pgina da Web (bem como o texto que herda propriedades da tag de pargrafo) ser Arial
e itlico, pois a tag de pargrafo herda essas propriedades da tag de corpo. Voc pode, no entanto, ser mais especfico
nas suas regras e criar estilos que substituem a frmula padro para herana. Por exemplo, se voc criar as seguintes
regras na folha de estilos:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Todo o texto do corpo ser Arial e itlico, exceto o texto do pargrafo (e seu texto herdado), que ser exibido como
Courier normal (no-itlico). Tecnicamente, a tag de pargrafo herda primeiro as propriedades definidas para a tag de
corpo, mas depois ela as ignora porque tem as suas prprias propriedades. Em outras palavras, enquanto os elementos
de pgina geralmente herdam as propriedades acima, a aplicao direta de uma propriedade a uma tag sempre resulta
em uma substituio da frmula padro para herana.
A combinao de todos os fatores abordados anteriormente, alm de outros fatores como a especificidade CSS (um
sistema que atribui pesos diferentes a determinados tipos de regras CSS) e a ordem das regras CSS, acaba criando uma
cascata complexa na qual os itens com prioridades mais altas substituem as propriedades com prioridades mais baixas.
Para obter mais informaes sobre as regras que regem a cascata, a herana e a especificidade, acesse
www.w3.org/TR/CSS2/cascade.html.
Reescrita como uma nica propriedade abreviada, a mesma regra poder ter a seguinte aparncia:
h1 { font: bold 16pt/18pt Arial }
Quando a propriedade escrita atravs da notao abreviada, os valores omitidos so definidos automaticamente para
seus valores padro. Desse modo, o exemplo abreviado anterior omite as tags font-variant, font-style, fontstretch e font-size-adjust.
Se voc tiver estilos definidos em mais de um local (por exemplo, incorporado em uma pgina HTML e importado de
uma folha de estilos externa) nos formatos abreviado e longo, saiba que as propriedades omitidas em uma regra
abreviada podem substituir (ou cascata) as propriedades que esto explicitamente definidas em outra regra.
Por esse motivo, o Dreamweaver usa o formato longo da notao CSS, por padro. Isso impede os possveis problemas
ocasionados pela substituio de uma regra longa por uma abreviada. Se voc abrir uma pgina da Web codificada com
a notao CSS abreviada no Dreamweaver, saiba que o Dreamweaver criar novas regras CSS usando o formato longo.
Voc pode especificar como o Dreamweaver criar e editar as regras CSS alterando as preferncias de edio CSS na
categoria Estilos CSS da caixa de dilogo Preferncias (Editar > Preferncias no Windows; Dreamweaver >
Preferncias no Macintosh).
Nota: O painel Estilos CSS cria regras usando somente a notao longa. Se voc criar uma pgina ou folha de estilos CSS
usando o painel Estilos CSS, saiba que a codificao das regras CSS abreviadas pode fazer com que as propriedades
abreviadas sobreponham as criadas em formato longo. Por isso, use a notao CSS longa ao criar seus estilos.
Voc pode redimensionar qualquer um desses painis arrastando as bordas entre os painis ou pode redimensionar as
colunas arrastando os divisores.
O painel Resumo para seleo exibe um resumo das propriedades CSS e seus respectivos valores referentes ao item
atualmente selecionado no documento ativo. O resumo mostra as propriedades de todas as regras que se aplicam
diretamente seleo. Somente as propriedades definidas so mostradas.
Por exemplo, as regras a seguir criam um estilo de classe um e um estilo de tag (neste caso, de pargrafo):
.foo{
color: green;
font-family: 'Arial';
}
p{
font-family: 'serif';
font-size: 12px;
}
Quando voc seleciona um texto de pargrafo com o estilo de classe .foo na janela Documento, o painel Resumo para
seleo exibe as propriedades das duas regras, pois ambas se aplicam seleo. Nesse caso, o painel Resumo para
seleo listar as seguintes propriedades:
font-size: 12px
font-family: 'Arial'
color: green
O painel Resumo para seleo organiza as propriedades em ordem crescente de especificidade. No exemplo acima, o
estilo de tag define o tamanho de fonte, e o estilo de classe define a famlia de fontes e a cor. (A famlia de fontes definida
pelo estilo de classe substitui a famlia de fontes definida pelo estilo de tag porque os seletores de classe tm uma
especificidade maior do que os seletores de tag. Para obter mais informaes sobre a especificidade CSS, consulte
www.w3.org/TR/CSS2/cascade.html.)
O painel Regras exibe duas visualizaes diferentes visualizao Sobre ou visualizao Regras dependendo da
seleo. Na visualizao Sobre (a visualizao padro), o painel exibe o nome da regra que define a propriedade CSS
selecionada e o nome do arquivo que contm a regra. Na visualizao Regras, o painel exibe uma cascata ou hierarquia
de todas as regras que se aplicam direta ou indiretamente seleo atual. (A tag qual a regra se aplica diretamente
aparece na coluna da direita.) Voc pode alternar entre duas visualizaes clicando nos botes Mostrar informaes
ou Mostrar cascata no canto superior direito do painel Regras.
Quando voc seleciona uma propriedade no painel Resumo para seleo, todas as propriedades da regra de definio
aparece no painel Propriedades. (A regra de definio tambm estar selecionada no painel Regras, caso a visualizao
Regras esteja selecionada.) Por exemplo, se voc tiver uma regra chamada .maintext que define uma famlia de fontes,
um tamanho de fonte e a cor, a seleo de qualquer uma dessas propriedades no painel Resumo para seleo exibir
todas as propriedades definidas pela regra .maintext no painel Propriedades, bem como a regra .maintext
selecionada no painel Regras. (Alm disso, a seleo de qualquer regra no painel Regras exibir as propriedades dessa
regra no painel Propriedades.) Em seguida, voc poder usar o painel Propriedades para modificar rapidamente a CSS,
quer ela esteja incorporada no documento atual ou vinculada atravs de uma folha de estilos anexada. Por padro, o
painel Propriedades mostra apenas as propriedades que j foram definidas e as organiza em ordem alfabtica.
Voc pode optar por exibir o painel Propriedades em duas outras visualizaes. A visualizao de categoria exibe as
propriedades agrupadas em categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte
superior de cada categoria, exibidas em texto azul. A visualizao de lista exibe uma lista alfabtica de todas as
propriedades disponveis e, da mesma forma, ordena as propriedades definidas na parte superior, exibindo-as em texto
azul. Para alternar entre as visualizaes, clique no boto Mostrar visualizao de categoria, Mostrar visualizao de
lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades.
Em todas as visualizaes, as propriedades definidas so exibidas em azul. As propriedades irrelevantes para uma
seleo so exibidas com uma linha tachada vermelha. Ao manter o cursor do mouse sobre uma regra irrelevante, voc
far com que seja exibida uma mensagem explicando por que a propriedade irrelevante. Geralmente, uma
propriedade irrelevante porque ela sobreposta ou no uma propriedade herdada.
Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize
enquanto trabalha.
Voc pode redimensionar o painel arrastando a borda entre os painis e pode redimensionar as colunas Propriedades
arrastando seus respectivos divisores.
Quando voc seleciona uma regra no painel Todas as regras, todas as propriedades definidas nessa regra aparecem no
painel Propriedades. Em seguida, use o painel Propriedades para modificar rapidamente a CSS, quer ela esteja
incorporada no documento atual ou vinculada em uma folha de estilos anexada. Por padro, o painel Propriedades
mostra apenas as propriedades que j foram definidas e as organiza em ordem alfabtica.
Voc pode optar por exibir as propriedades em duas outras visualizaes. A visualizao de categoria exibe as
propriedades agrupadas em categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte
superior de cada categoria. A visualizao de lista exibe uma lista alfabtica de todas as propriedades disponveis e, da
mesma forma, ordena as propriedades definidas na parte superior. Para alternar entre as visualizaes, clique no boto
Mostrar visualizao de categoria, Mostrar visualizao de lista ou Mostrar somente propriedades definidas,
localizadas no canto inferior esquerdo do painel Propriedades. Em todas as visualizaes, a propriedades definidas so
exibidas em azul.
Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize
enquanto trabalha.
Visualizao de categoria Divide as propriedades CSS compatveis com o Dreamweaver em oito categorias: fonte,
fundo, bloco, borda, caixa, lista, posicionamento e extenses. As propriedades de cada categoria esto contidas em uma
lista que voc expande ou reduz clicando no boto de adio (+) ao lado do nome de categoria. As propriedades
definidas aparecem (em azul) no topo da lista.
Visualizao de lista Exibe todas as propriedades CSS compatveis com o Dreamweaver em ordem alfabtica. As
A. Anexar folha de estilos B. Nova regra CSS C. Editar estilo D. Desativar/ativar propriedade CSS E. Excluir regra CSS
Anexar folha de estilos Abre a caixa de dilogo Vincular a folha de estilos externa. Selecione uma folha de estilos
estilos externa.
Excluir regra CSS Remove a regra ou propriedade selecionada do painel Estilos CSS e remove a formatao de
qualquer elemento ao qual ela foi aplicada. (No entanto, este recurso no remove as propriedades de classe e ID
referenciadas por esse estilo.) O boto Excluir regra CSS tambm pode desanexar (ou desvincular) uma folha de
estilos CSS anexada.
Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control (Macintosh) enquanto
clica no painel Estilos CSS a fim de abrir o menu de contexto de opes para trabalhar com os comandos de folha de
estilos CSS.
formato abreviado.
Selecione Se original usou formato abreviado para deixar todos os estilos como esto.
Selecione De acordo com as configuraes acima para reescrever os estilos em formato abreviado para as propriedades
selecionadas em Usar formato abreviado para.
Ao clicar duas vezes em painel CSS Permite que voc selecione uma ferramenta para edio das regras CSS.
3 Clique em OK.
regra CSS:
Selecione o texto na janela Documento, selecione Nova regra CSS no menu pop-up Regra-alvo do Inspetor de
propriedades CSS (Janela > Propriedades) e clique no boto Editar regra ou selecione uma opo no Inspetor de
propriedades (por exemplo, clique no boto Negrito) para iniciar uma nova regra.
2 Na caixa de dilogo Nova regra CSS, especifique o tipo de seletor da regra CSS que deseja criar:
Para criar um estilo personalizado que pode ser aplicado como um atributo class a um elemento HTML, selecione
a opo Classe no menu pop-up Tipo de seletor e digite um nome para o estilo na caixa de texto Nome de seletor.
Nota: Os nomes de classe devem comear com um ponto e podem conter qualquer combinao de letras e nmeros (por
exemplo, .myhead1). Se voc no digitar um ponto inicial, o Dreamweaver o inserir automaticamente para voc.
Para definir a formatao de uma tag que contenha um atributo ID especfico, selecione a opo ID no menu popup Tipo de seletor e, em seguida, digite a ID exclusiva (por exemplo, containerDIV) na caixa de texto Nome de
seletor.
Nota: As IDs devem comear com um sinal numrico (#) e conter qualquer combinao de letras e nmeros (por
exemplo, #minhaID1). Se voc no digitar um sinal numrico inicial, o Dreamweaver o inserir automaticamente para
voc.
Para redefinir a formatao padro de uma tag HTML especfica, selecione a opo Tag no menu pop-up Tipo de
seletor e, em seguida, insira uma tag HTML na caixa de texto Nome de seletor ou selecione uma no menu pop-up.
Para definir uma regra de composio que afete simultaneamente duas ou mais tags, classes ou IDs, selecione a
opo Composio e insira os seletores da regra de composio. Por exemplo, se voc digitar div p, todos os
elementos p nas tags div sero afetados pela regra. Uma rea de texto de descrio explica exatamente que
elementos a regra afetar medida que voc adicionar ou excluir seletores.
3 Selecione o local em que deseja definir a regra e clique em OK:
Para colocar a regra em uma folha de estilos que j esteja anexada ao documento, selecione a folha de estilos.
Para criar uma folha de estilos externa, selecione Novo arquivo de folha de estilos.
Para incorporar o estilo no documento atual, selecione Apenas este documento.
4 Na caixa de dilogo Definio de regra CSS, selecione as opes de estilo que voc deseja definir para a nova regra
Nota: Se voc clicar em OK sem definir as opes de estilo, uma nova regra vazia ser criada.
Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Font-family Define a famlia de fontes (ou srie de famlias) para o estilo. Os navegadores exibem o texto na primeira
fonte da srie instalada no sistema do usurio. Para fins de compatibilidade com o Internet Explorer 3.0, liste a fonte
do Windows primeiro. O atributo de fonte compatvel com ambos os navegadores.
Font-size Define o tamanho do texto. Voc pode escolher um tamanho especfico selecionando o nmero e a unidade
de medida, ou voc pode escolher um tamanho relativo. Pixels impede que os navegadores distoram o texto. O
atributo de tamanho compatvel com ambos os navegadores.
Font-style Especifica Normal, Italic ou Oblique como estilo de fonte. A configurao padro Normal. O atributo de
leading. Selecione Normal para que a altura da linha do tamanho da fonte seja calculada automaticamente ou digite
um valor exato e selecione uma unidade de medida. O atributo de altura da linha compatvel com ambos os
navegadores.
Text-decoration Adiciona uma sublinha, sobrelinha ou tachado ao texto ou torna o texto intermitente. A configurao
padro None. A configurao padro para links Underline. Quando voc define a configurao de link para none,
pode remover a sublinha dos links definindo uma classe especial. O atributo de decorao compatvel com ambos os
navegadores.
Font-weight Aplica um valor especfico ou relativo de negrito fonte. Normal equivale a 400; Bold equivale a 700. O
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para
Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Cor de fundo Define a cor de fundo do elemento. O atributo de cor de fundo compatvel com ambos os navegadores.
Imagem de fundo Define a imagem de fundo do elemento. O atributo de imagem de fundo compatvel com ambos
os navegadores.
Background Repeat Determina se e como a imagem de fundo ser repetida. O atributo de repetio compatvel com
ambos os navegadores.
juntamente com o contedo. Observe que alguns navegadores podem tratar a opo Fixa como Rolar. H suporte para
esse atributo no Internet Explorer, mas no no Netscape Navigator.
Background Position (X) e Background Position (Y) Especifica a posio inicial da imagem de fundo em relao ao
elemento. Este recurso pode ser usado para alinhar uma imagem de fundo ao centro da pgina, verticalmente (Y) e
horizontalmente (X). Se a propriedade de anexo for Fixa, a posio ser relativa janela Documento, e no ao
elemento.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para
seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Word Spacing Define o espaamento entre palavras. Para definir um valor especfico no menu pop-up, selecione
Value e digite um valor numrico. No segundo menu pop-up, selecione uma unidade de medida (por exemplo, pixel,
points etc.).
Nota: Voc pode especificar valores negativos, mas a exibio depender do navegador. O Dreamweaver no exibe este
atributo na janela Documento.
Letter Spacing Aumenta ou diminui o espao entre as letras ou caracteres. Para diminuir o espao entre os caracteres,
especifique um valor negativo, por exemplo (-4). As configuraes de espaamento entre letras substitui as
configuraes de texto justificado. H suporte para o atributo de espaamento entre letras no Internet Explorer 4 e
posterior, e no Netscape Navigator 6.
Vertical Align Especifica o alinhamento vertical do elemento ao qual ele aplicado. O Dreamweaver exibe este atributo
os navegadores.
Recuo do texto Especifica a distncia em que a primeira linha de texto ser recuada. Um valor negativo pode ser usado
para diminuir o recuo, mas a exibio depender do navegador. O Dreamweaver exibe este atributo na janela
Documento apenas quando a tag aplicada aos elementos em nvel de bloco. O atributo de recuo de texto compatvel
com ambos os navegadores.
Whitespace Determina como o espao em branco ser tratado no elemento. Selecione entre trs opes: Normal
diminui o espao em branco; Pre trata o espao em branco como se o texto estivesse delimitado por tags pre (ou seja,
todo o espao em branco respeitado, incluindo espaos, tabulaes e retornos); Nowrap especifica que s ocorre uma
quebra de linha automtica no texto quando uma tag br encontrada. O Dreamweaver no exibe este atributo na
janela Documento. H suporte para o atributo de espao em branco no Netscape Navigator e no Internet Explorer 5.5.
Display Especifica se um elemento ser exibido e, em caso afirmativo, como ele ser exibido. None desativa a exibio
de um elemento ao qual ele atribudo.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para
3 Na caixa de dilogo Definio de regra CSS, selecione Caixa e defina qualquer uma das propriedades de estilo a
seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Largura e Altura Define a largura e altura do elemento.
Float Define qual lado de outros elementos, como texto, Divs PA, tabelas etc. flutuar em torno de um elemento Os
outros elementos so dispostos em torno do elemento flutuante, como de costume. O atributo de flutuao
compatvel com ambos os navegadores.
Clear Define os lados que no permitem elementos PA. Se um elemento PA aparecer no lado limpo, o elemento com
a configurao Clear se mover abaixo dele. O atributo de limpeza compatvel com ambos os navegadores.
Padding Especifica a quantidade de espao entre o contedo de um elemento e sua borda (ou margem, caso no haja
borda). Desmarque a opo Igual para tudo a fim de definir o preenchimento de cada lado do elemento
separadamente.
Igual para tudo Define as mesmas propriedades de preenchimento para os lados superior, direito, inferior e esquerdo
e outro elemento. O Dreamweaver exibe este atributo na janela Documento apenas quando ele aplicado aos
elementos em nvel de bloco (pargrafos, cabealhos, listas etc.). Desmarque a opo Igual para tudo a fim de definir
a margem de cada lado do elemento separadamente.
Igual para tudo Define as mesmas propriedades de margem para os lados superior, direito, inferior e esquerdo do
seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Tipo Define a aparncia do estilo da borda. A maneira como o estilo aparecer depende do navegador. Desmarque a
opo Igual para tudo a fim de definir o estilo de borda de cada lado do elemento separadamente.
Igual para tudo Define as mesmas propriedades de estilo de borda para os lados superior, direito, inferior e esquerdo
Desmarque a opo Igual para tudo a fim de definir a largura de borda de cada lado do elemento separadamente.
Igual para tudo Define a mesma largura de borda para os lados superior, direito, inferior e esquerdo do elemento ao
ela aplicada.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para
seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
List style type Define a aparncia dos marcadores ou nmeros. O tipo compatvel em ambos os navegadores.
List style image Permite que voc especifique uma imagem personalizada para os marcadores. Clique em Procurar
(Windows) ou Escolher (Macintosh) para navegar at uma imagem ou digite o caminho da imagem.
List style position Define se haver quebra de linha automtica e recuo do texto do item de linha (externo) ou se o
Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Position Determina como o navegador deve posicionar o elemento selecionado:
Absolute coloca o contedo usando as coordenadas digitadas nas caixas Placement, relativo ao predecessor com
posio relativa ou absoluta, ou, se no houver nenhum predecessor com posio relativa ou absoluta, relativo ao
canto superior esquerdo da pgina.
Relative coloca o bloco de contedo usando as coordenadas digitadas nas caixas Placement relativas posio do
bloco no fluxo de texto do documento. Por exemplo, atribuir a um elemento uma posio relativa, e as coordenadas
superior e esquerda de 20px deslocar o elemento 20px para a direita e 20px para baixo de sua posio normal no
fluxo. Os elementos tambm podem ser posicionados de forma relativa, com ou sem as coordenadas superior,
esquerda, direita ou inferior, a fim de estabelecer um contexto para os filhos com posio absoluta.
Fixed coloca o contedo usando as coordenadas digitadas nas caixas Placement, relativo ao canto superior esquerdo
do navegador. O contedo permanecer fixo nesta posio quando o usurio rolar a pgina.
Static coloca o contedo em seu local no fluxo de texto. Esta a posio padro de todos os elementos HTML
posicionveis.
Visibilidade Determina a condio de exibio inicial do contedo. Se voc no especificar uma propriedade de
visibilidade, o contedo herdar o valor da tag-me, por padro. A visibilidade padro da tag body est visvel.
Selecione uma das seguintes opes de visibilidade:
Visible aumenta o tamanho do continer a fim de que todo o seu contedo fique visvel. O continer se expande
para baixo e para a direita.
Hidden mantm o tamanho do continer e recorta qualquer contedo de modo a ajust-lo dentro do continer.
Nenhuma barra de rolagem fornecida.
Auto faz com que as barras de rolagem apaream somente quando o contedo do continer exceder seus limites.
Esta opo no exibida na janela Documento.
Placement Especifica o local e o tamanho do bloco de contedo. A maneira como o navegador interpretar o local
depende da configurao de tipo. Os valores de tamanho sero substitudos se o contedo do bloco de contedo
exceder o tamanho especificado.
As unidades padro de local e tamanho so pixels. Voc tambm pode especificar as seguintes unidades: pc (paicas),
pt (pontos), in (polegadas), mm (milmetros), cm (centmetros), (ems), (exs) ou % (porcentagem do valor do pai). As
abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm.
Clip Define a parte do contedo que est visvel. Se voc especificar uma regio de corte, poder acess-la com uma
linguagem de script, como JavaScript, e manipular as propriedades para criar efeitos especiais como borrachas. Essas
borrachas podem ser configuradas usando o comportamento Alterar propriedade.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para
a seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Page break before Fora uma quebra de pgina durante a impresso, antes ou aps o objeto controlado pelo estilo.
Selecione a opo desejada no menu pop-up. No h suporte para esta opo em nenhum navegador 4.0, mas os
navegadores posteriores podem oferecer suporte a ela.
Cursor Altera a imagem de ponteiro quando o ponteiro est sobre o objeto controlado pelo estilo. Selecione a opo
desejada no menu pop-up. O Internet Explorer 4.0 e posterior, e o Netscape Navigator 6 oferecem suporte a este
atributo.
Filter Aplica efeitos especiais ao objeto controlado pelo estilo, incluindo desfoque e inverso. Selecione um efeito no
menu pop-up.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para
Clique duas vezes em uma propriedade no painel Resumo para seleo a fim de exibir a caixa de dilogo Definio
de regra CSS e faa suas alteraes.
Selecione uma propriedade no painel Resumo para seleo e edite a propriedade no painel Propriedades abaixo.
Selecione uma regra no painel Regras e edite as propriedades da regra no painel Propriedades abaixo.
Nota: Voc pode alterar o comportamento de duplo clique para edio da CSS, bem como outros comportamentos,
alterando as preferncias do Dreamweaver.
Clique duas vezes em uma regra no painel Todas as regras a fim de exibir a caixa de dilogo Definio de regra CSS
e faa suas alteraes.
Selecione uma regra no painel Todas as regras e edite as propriedades da regra no painel Propriedades abaixo.
Selecione uma regra no painel Todas as regras e clique no boto Editar estilo no canto inferior direito do painel
Estilos CSS.
Nota: Voc pode alterar o comportamento de duplo clique para edio da CSS, bem como outros comportamentos,
alterando as preferncias do Dreamweaver.
Se a visualizao Mostrar somente propriedades definidas estiver selecionada no painel Propriedades, clique no
link Adicionar propriedades e adicione uma propriedade.
No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo, clique com o boto direito do mouse no nome
do estilo a ser aplicado e selecione Aplicar no menu de contexto.
No Inspetor de propriedades HTML, selecione o estilo de classe a ser aplicado no menu pop-up Classe.
Na janela Documento, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) no texto selecionado e, no menu de contexto, selecione Estilos CSS e, em seguida,
selecione o estilo a ser aplicado.
Selecione Formatar > Estilos CSS e, no submenu, selecione o estilo a ser aplicado.
classe.
Voc tambm pode renomear uma classe selecionando Renomear classe no menu de opes do painel Estilos CSS.
2 Na caixa de dilogo Renomear classe, verifique se a classe a ser renomeada est selecionada no menu pop-up
Renomear classe.
3 Na caixa de texto Novo nome, digite o novo nome da nova classe e clique em OK.
Se a classe que voc est renomeando for interna ao cabealho do documento atual, o Dreamweaver alterar o nome
da classe, assim como todas as ocorrncias do nome de classe do documento atual. Se a classe que voc est
renomeando estiver em um arquivo CSS externo, o Dreamweaver abrir e alterar o nome de classe do arquivo. O
Dreamweaver tambm inicia uma caixa de dilogo Localizar e substituir no nvel do site, a fim de que voc possa
procurar todas as ocorrncias do nome de classe antigo no site.
No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o boto direito do mouse
na seleo e selecione Mover regras CSS no menu de contexto. Para selecionar vrias regras, mantenha pressionada
a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a
serem selecionadas.
Na Visualizao de cdigo, selecione a(s) regra(s) que voc deseja mover. Em seguida, clique com o boto direito
do mouse na seleo e selecione Estilos CSS > Mover regras CSS no menu de contexto.
em Salvar.
Quando voc clica em Salvar, o Dreamweaver salva uma nova folha de estilos com as regras selecionadas e a anexa ao
documento atual.
Tambm possvel mover as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao
est disponvel somente na Visualizao de cdigo.
No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o boto direito do mouse
na seleo e selecione Mover regras CSS no menu de contexto. Para selecionar vrias regras, mantenha pressionada
a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a
serem selecionadas.
Na Visualizao de cdigo, selecione a(s) regra(s) que voc deseja mover. Em seguida, clique com o boto direito
do mouse na seleo e selecione Estilos CSS > Mover regras CSS no menu de contexto.
Nota: A seleo parcial de uma regra resultar na realocao de toda a regra.
2 Na caixa de dilogo Mover para folha de estilos externa, selecione uma folha de estilos existente no menu pop-up
arrastar para reordenar as regras em uma folha de estilos ou mover uma regra para outra folha de estilos ou
cabealho de documento.
possvel mover mais de uma regra por vez, mantendo pressionada a tecla Control (Windows) ou mantendo
pressionada a tecla Command (Macintosh) enquanto clica em vrias regras para selecion-las.
convertida.
2 Clique com o boto direito do mouse e selecione Estilos CSS > Converter CSS inline em regra.
3 Na caixa de dilogo Converter CSS inline, digite um nome de classe para a nova regra e siga um destes
procedimentos:
Especifique uma folha de estilos na qual a nova regra CSS deve aparecer e clique em OK.
Selecione o cabealho do documento como o local onde a nova regra CSS deve aparecer e clique em OK.
Tambm possvel converter as regras usando a barra de ferramentas Codificao. A barra de ferramentas
Codificao est disponvel somente na Visualizao de cdigo.
painel.)
3 Siga um destes procedimentos:
Para criar um link entre o documento atual e uma folha de estilos externa, selecione Link. Esse procedimento criar
uma tag de link href no cdigo HTML e referencia o URL no local em que a folha de estilos publicada est
localizada. O Microsoft Internet Explorer e o Netscape Navigator oferecem suporte a esse mtodo.
Voc no pode usar uma tag de link para adicionar uma referncia de uma folha de estilos externa a outra. Para
aninhar folhas de estilos, use uma diretiva de importao. A maioria dos navegadores tambm reconhece a diretiva
de importao em um pgina (e no apenas nas folhas de estilos). H diferenas sutis na maneira como as
propriedades conflitantes so resolvidas quando existem regras sobrepostas em folhas de estilos externas vinculadas
a uma pgina ou importadas para uma pgina. Para importar uma folha de estilos externa, em vez de vincular-se a
ela, selecione Importar.
5 No menu pop-up Mdia, especifique a mdia de destino da folha de estilos.
Para obter mais informaes sobre as folhas de estilos dependentes de mdia, consulte o site da World Wide Web
Consortium em www.w3.org/TR/CSS21/media.html.
6 Clique no boto Visualizar para verificar se a folha de estilos aplica os estilos desejados pgina atual.
Se os estilos aplicados no forem o que voc espera, clique em Cancelar para remover a folha de estilos. A aparncia
da pgina ser revertida para o estado anterior.
7 Clique em OK.
Uma visualizao da CSS de acordo com as opes selecionadas exibida na janela Visualizar abaixo.
Recuar propriedades com Define o valor de recuo das propriedades em uma regra. Voc pode especificar tabulaes
ou espaos.
Cada propriedade em uma linha separada Coloca cada propriedade de uma regra em uma linha separada.
Colchete de abertura em linha separada Coloca o colchete de abertura de uma regra em uma linha separada do
seletor.
Somente se houver mais de 1 propriedade Coloca as regras de propriedade nica na mesma linha do seletor.
Todos os seletores de uma regra na mesma linha Coloca todos os seletores da regra na mesma linha.
Linha em branco entre regras Insere uma linha em branco entre cada regra.
5 Clique em OK.
Nota: A formatao de cdigo CSS tambm herda a preferncia Tipo de quebra de linha definida na categoria Formato
do cdigo da caixa de dilogo Preferncias.
As opes de formatao definidas nas preferncias de formatao de cdigo de origem so aplicadas ao documento
inteiro. Voc no pode formatar selees individuais.
As opes de formatao definidas nas preferncias de formatao do cdigo CSS so aplicadas a todas as regras CSS
apenas no cabealho do documento.
Nota: Voc pode selecionar Comandos > Aplicar formatao de origem para formatar o documento inteiro de acordo
com as preferncias de formatao de cdigo especificadas.
Desativar/Ativar CSS
O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS do painel Estilos CSS, sem ter que
fazer alteraes diretamente no cdigo. Quando voc comenta partes do CSS, pode ver que tipos de efeitos as
propriedades e os valores especficos tm na sua pgina.
Quando voc desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentrios de CSS e um rtulo
[desativado] propriedade do CSS que voc desativou. Voc pode, em seguida, reativar ou excluir a propriedade do
CSS desativada, de acordo com sua preferncia.
Para obter uma viso geral, em vdeo, da equipe de engenharia do Dreamweaver, sobre como trabalhar com
Ativar/desativar CSS, consulte www.adobe.com/go/dwcs5css_br.
1 No painel Propriedades do painel Estilos CSS (Janela > Estilos CSS), selecione a propriedade que deseja desativar.
2 Clique no cone Desativar/Ativar propriedade de CSS no canto direito inferior do painel Propriedades. O cone
direito do mouse (Windows) ou Control-clique (SO Macintosh) em qualquer regra ou propriedade na qual
propriedades estejam desativadas e selecione Ativar todas as desativadas em Regra selecionada ou Excluir todas as
desativadas na regra selecionada.
Nota: Para obter mais informaes sobre o modelo de caixa de CSS, consulte a especificao CSS 2.1.
Alm de ver uma representao visual do modelo de caixa no modo Inspeo, voc tambm pode usar o painel Estilos
CSS, conforme passar o mouse sobre os elementos na janela Documento. Quando voc tem o painel Estilos CSS aberto
no modo Atual e passa com o mouse sobre um elemento da pgina, as regras e as propriedades do painel Estilos CSS
so atualizadas automaticamente para mostrar as regras e propriedades desse elemento. Alm disso, qualquer
visualizao ou painel relacionado ao elemento sobre o qual voc passa o mouse atualizado tambm (por exemplo,
Visualizao de cdigo, o Seletor de tags, o Inspetor de propriedades e assim por diante).
Para obter uma viso geral, em vdeo, da equipe de engenharia do Dreamweaver, sobre como trabalhar com o modo
de inspeo, consulte www.adobe.com/go/dwcs5inspect_br.
1 Com o documento aberto na janela Documento, clique no boto Inspecionar (ao lado do boto Visualizao ativa
destacado. Pressione a seta para a direita para retornar o destaque para o elemento filho.
4 (Opcional) Clique em um elemento para bloquear uma seo destacada.
Nota: Clicar em um elemento para bloquear uma seleo destacada desativa o modo Inspeo.
Um erro indica o cdigo CSS que possivelmente ocasionar um srio problema visvel em um determinado
navegador, como o desaparecimento de partes de uma pgina. (O erro uma designao padro dos problemas de
suporte a navegador; portanto, em alguns casos, o cdigo com um efeito desconhecido tambm marcado como
erro.)
Um aviso indica uma parte do cdigo CSS qual um determinado navegador no oferece suporte, mas no
ocasionar nenhum problema grave de exibio.
Uma mensagem informativa indica o cdigo ao qual um determinado navegador no oferece suporte, mas que no
tem nenhum efeito visvel.
As verificaes de compatibilidade de navegador no alteram o documento de forma alguma.
de ferramentas Documento.
Por exemplo, para saber se os bugs de processamento de CSS podem aparecer no Internet Explorer 5.0 e posterior, e
Netscape Navigator 7.0 e posterior, marque as caixas de seleo ao lado desses nomes de navegador, e selecione 5.0 no
menu pop-up do Internet Explorer e 7.0 no menu pop-up do Netscape.
Clique com o boto direito do mouse no painel Estilos CSS e, no menu de contexto, selecione Em tempo de design.
Selecione Formatar > Estilos CSS > Em tempo de design.
2 Na caixa de dilogo, defina as opes para mostrar ou ocultar uma folha de estilos selecionada:
Para exibir uma folha de estilos CSS em tempo de design, clique no boto de adio (+) acima de Mostrar somente
em tempo de design e, na caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja
mostrar.
Para ocultar uma folha de estilos CSS, clique no boto de adio (+) acima de Ocultar em tempo de design e, na
caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja ocultar.
Para remover uma folha de estilos na lista, clique na folha de estilos a ser removida e clique no boto de subtrao
() apropriado.
3 Clique em OK para fechar a caixa de dilogo.
O painel Estilos CSS atualizado com o nome da folha de estilos selecionada, juntamente com o indicador oculto ou
design, para refletir o status da folha de estilos.
do painel.)
3 Na caixa de dilogo Anexar folha de estilos externa, clique em Exemplo de folhas de estilo.
4 Na caixa de dilogo Exemplo de folhas de estilo, selecione uma folha de estilos na caixa de listagem.
Quando voc selecionar as folhas de estilos na caixa de listagem, o painel Visualizar exibir a formatao de texto e cor
da folha de estilos selecionada.
5 Clique no boto Visualizar para aplicar a folha de estilos e verifique se ele aplica os estilos desejados pgina atual.
Se os estilos aplicados no estiverem como voc espera, selecione outra folha de estilos na lista e clique em Visualizar
ver esses estilos.
6 Por padro, o Dreamweaver salva a folha de estilos em uma pasta chamada CSS imediatamente abaixo da raiz do
site definido para a pgina. Se essa pasta no existir, o Dreamweaver a criar. Voc pode salvar o arquivo em outro
local clicando em Procurar e mudando de pasta.
7 Quando voc localizar uma folha de estilos cujas regras de formatao atendem aos critrios de design, clique em OK.
Se voc fizer alteraes em uma folha de estilos enquanto o usurio do Contribute estiver editando uma pgina que
a utilize, o usurio s ver as alteraes efetuadas na folha de estilos depois que publicar a pgina.
Se voc excluir um estilo de uma folha de estilos, o nome do estilo no ser excludo das pginas que a utilizam.
Como o estilo no existe mais, ele no ser exibido da maneira esperada pelo usurio do Contribute. Desse modo,
se um usurio informar a voc que nada acontece quando ele aplica um determinado estilo, talvez o estilo tenha
sido excludo da folha de estilos.
No exemplo acima, no h nenhum estilo anexado a nenhuma das tags div. Sem as regras CSS definidas, cada tag div
e seu respectivo contedo ficam em uma local padro da pgina. No entanto, se cada tag div tiver uma ID exclusiva
(como no exemplo anterior), voc poder usar suas IDs para criar regras CSS que, quando aplicadas, alteram o estilo
e posicionamento das tags div.
A regra CSS a seguir, que pode residir no cabealho do documento ou em um arquivo CSS externo, cria regras de estilo
para a primeira tag dig, ou a tag div de continer, na pgina:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
A regra #container dita que a tag div de continer deve ter uma largura de 780 pixels, um fundo branco, nenhuma
margem (no lado esquerdo da pgina), uma borda slida preta de 1 pixel, e o texto alinhado esquerda. Os resultados
da aplicao da regra tag div de continer so os seguintes:
A prxima regra CSS cria regras de estilo para a tag div de barra lateral:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
A regra #sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento
superior e inferior de 15 pixels, um preenchimento direita de 10 pixels e um preenchimento esquerda de 20 pixels.
(A ordem padro de preenchimento da parte superior direita para a parte inferior esquerda.) Alm disso, a regra
posiciona a tag div de barra lateral com float: left uma propriedade que coloca a tag div de barra lateral no lado
esquerdo da tag div de continer. Estes so os resultados da aplicao da regra tag div de barra lateral:
Por fim, a regra CSS da tag div de continer principal finaliza o layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
A regra #mainContent dita que a div de contedo principal ter uma margem esquerda de 250 pixels; isso significa que
ela colocar 250 pixels de espao entre o lado esquerdo da div de continer e o lado esquerdo da div de contedo
principal. Alm disso, a regra fornece 20 pixels de espaamento nos lados direito, inferior e esquerdo da div de
contedo principal. Estes so os resultados da aplicao da regra div mainContent:
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
Nota: O exemplo de cdigo acima uma verso simplificada do cdigo que desenvolve o layout de barra lateral esquerda
fixo de duas colunas quando voc cria um novo documento usando os layouts predefinidos fornecidos com o
Dreamweaver.
Nota: Voc deve selecionar um tipo de pgina HTML para o layout. Por exemplo, voc pode selecionar HTML,
ColdFusion, PHP etc. No possvel criar uma pgina ActionScript, CSS, Item de biblioteca, JavaScript, XML, XSLT
ou Componente do ColdFusion com um layout CSS. Alm disso, os tipos de pgina da categoria Outros da caixa de
dilogo Novo documento apresentam restrio na incluso de layouts de pgina CSS.
4 Em Layout, selecione o layout CSS que deseja usar. Voc pode escolher entre 16 layouts diferentes. A janela
adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas
configuraes de texto do visitante do site.
5 Selecione um tipo de documento no menu pop-up TipoDoc.
6 Selecione um local para a CSS do layout em CSS de Layout no menu pop-up.
Adicionar a cabealho Adiciona CSS do layout ao cabealho da pgina que voc est criando.
Criar novo arquivo Adiciona a CSS do layout nova folha de estilos CSS externa e anexa a nova folha de estilos
pgina que voc est criando.
Vincular a arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS
necessrias ao layout. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de
CSS contidas em um nico arquivo) em vrios documentos.
Se voc selecionou Adicionar a cabealho em CSS de layout no menu pop-up (a opo padro), clique em Criar.
Se voc selecionar Criar novo arquivo no menu pop-up CSS de layout, clique em Criar e especifique um nome para
o novo arquivo externo na caixa de dilogo Salvar arquivo de folha de estilos como.
Se voc selecionou Vincular a arquivo existente em CSS de layout no menu pop-up, adicione o arquivo externo
caixa de texto Anexar arquivo CSS, clicando no cone Adicionar folha de estilos, preenchendo a caixa de dilogo
Anexar folha de estilos externa e clicando em OK. Quando terminar, clique em Criar na caixa de dilogo Novo
documento.
Nota: Quando voc selecionar a opo Vincular a arquivo existente, o arquivo especificado j dever ter regras para o
arquivo CSS nele contido.
Quando voc colocar a CSS de layout em um novo arquivo ou vincular-se a um arquivo existente, o Dreamweaver
vincular automaticamente o arquivo pgina HTML que voc est criando.
Nota: Os comentrios condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE,
permanecem incorporados no cabealho do novo documento de layout CSS, mesmo se voc selecionar Novo arquivo
externo ou Arquivo externo existente como local da CSS do layout.
8 (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao
criar a pgina. Para fazer isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e
selecione uma folha de estilos CSS.
Para obter uma descrio detalhada desse processo, consulte o artigo de Anexar automaticamente uma folha de estilos
a novos documentos de David Powers.
dilogo Novo documento. A CSS do layout deve residir no cabealho da pgina HTML.
Para tornar o layout CSS personalizado consistente com os outros layouts fornecidos com o Dreamweaver, salve o
arquivo HTML com a extenso .htm.
2 Adicione a pgina HTML pasta Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts.
3 (Opcional) Adicione uma imagem de visualizao do layout (por exemplo, um arquivo .gif ou .png) pasta Adobe
definidas nessa folha de estilos aparecero na lista. As IDs dos blocos que j esto no documento no so listadas.
Nota: O Dreamweaver informar se voc inserir a mesma ID de outra tag no documento.
Nova regra CSS Abre a caixa de dilogo Nova regra CSS.
4 Clique em OK.
A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o ponteiro
sobre a borda da caixa, o Dreamweaver o reala.
Se a tag div tiver uma posio absoluta, ela se tornar um elemento PA. (Voc pode editar tags div que no possuem
posio absoluta.)
Clique dentro da tag div e pressione Control+A (Windows) ou Command+A (Macintosh) duas vezes.
Clique dentro da tag div e selecione a tag div no seletor de tags na parte inferior da janela Documento.
2 Selecione Janela > Estilos CSS para abrir o painel Estilos CSS caso ele ainda no esteja aberto.
Para alterar a cor de realce das tags div, clique na caixa de cor Passar o mouse, selecione a cor de realce usando o
seletor de cores (ou digite o valor hexadecimal da cor de realce na caixa de texto).
Para ativar ou desativar o realce das tags div, marque ou desmarque a caixa de seleo Mostrar de Passar o mouse.
Nota: Essas opes afetam todos os objetos (por exemplo, as tabelas), que o Dreamweaver reala quando voc move o
ponteiro sobre elas.
O Dreamweaver fornece diversos auxlios visuais para visualizao de blocos de layout CSS. Por exemplo, voc pode
ativar contornos, fundos e o modelo de caixa dos blocos de layout CSS ao criar o design. Tambm possvel visualizar
dicas de ferramentas que exibem as propriedades de um bloco de layout CSS quando voc flutua o ponteiro do mouse
sobre o bloco de layout.
A lista de auxlios de bloco de layout CSS a seguir descreve o que o Dreamweaver processa como visvel para cada:
Contornos do layout CSS Exibe os contornos de todos os blocos de layout CSS na pgina.
Fundos do layout CSS Exibe as cores de fundo temporariamente atribudas de blocos de layout CSS individuais e
oculta qualquer cor ou imagem de fundo que normalmente aparece na pgina.
Sempre que voc ativar o auxlio visual para visualizar fundos de bloco de layout CSS, o Dreamweaver atribui
automaticamente a cada bloco de layout CSS uma cor de fundo distinta. (O Dreamweaver seleciona as cores usando
um processo algortmico; no h nenhuma maneira de voc mesmo atribuir as cores.) As cores atribudas so
visualmente distintas e foram projetadas para ajudar voc a fazer a distino entre os blocos de layout CSS.
Modelo de caixa de layout CSS Exibe o modelo de caixa (ou seja, preenchimento e margens) do bloco de layout CSS
selecionado.
3 Salve o arquivo.
4 Na Visualizao de design, abra a pgina qual voc deseja anexar os novos estilos.
5 Selecione Formatar > Estilos CSS > Em tempo de design.
6 Na caixa de dilogo Folhas de estilo em tempo de design, clique no boto de adio (+) acima da caixa de texto
Mostrar somente em tempo de design, selecione a folha de estilos recm-criada e clique em OK.
7 Clique em OK para fechar a caixa de dilogo Folhas de estilo em tempo de design.
A folha de estilos anexada ao documento. Se voc criou uma folha de estilos usando o exemplo anterior, todos os
pargrafos e itens de lista sero formatados com o atributo display:block, permitindo que voc ative ou desative os
auxlios visuais de bloco de layout CSS para pargrafos e itens de lista.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!-#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>
Voc pode alterar as propriedades das Divs PA (ou qualquer elemento PA) na pgina, incluindo as coordenadas x e y,
o ndice z (tambm chamado de ordem de empilhamento) e a visibilidade.
No primeiro conjunto de tags div, uma div est acima da outra na pgina.l No segundo conjunto, a div apDiv4 est, na
verdade, dentro da div apDiv3. (Voc pode alterar a ordem de empilhamento da Div PA no painel Elementos PA.)
O aninhamento geralmente usado para agrupar as Divs PA. Uma Div PA aninhada movida com sua Div PA me e
pode ser definida para herdar a visibilidade da tag-me.
Voc pode ativar a opo Aninhamento para fazer o aninhamento automtico ao desenhar uma Div PA comeando
dentro de outra Div PA. Para desenhar dentro ou sobre outra Div PA, a opo Evitar sobreposies deve estar
desmarcada.
Desenho de uma Div PA aninhada
1 Verifique se a opo Evitar sobreposies est desmarcada no painel Elementos PA (Janela > Elementos PA).
3 Na Visualizao de design da janela Documento, arraste para desenhar uma Div PA dentro de uma Div PA
existente.
Se a opo Aninhamento estiver desativada nas preferncias de elementos PA, mantenha pressionada a tecla Alt
(Windows) ou mantenha pressionada a tecla Option (Macintosh) enquanto arrasta para aninhar uma Div PA dentro
de uma Div PA existente.
A aparncia das Divs PA aninhadas podem variar de um navegador para outro. Ao criar Divs PA aninhadas,
verifique freqentemente a aparncia delas nos vrios navegadores durante o processo de design.
Insero de uma Div PA aninhada
1 Verifique se a opo Evitar sobreposies est desmarcada.
2 Coloque o ponto de insero dentro de uma Div PA existente na Visualizao de design da janela Documento e
mantenha pressionada a tecla Command (Macintosh) enquanto arrasta o elemento PA para o elemento PA de
destino no painel Elementos PA.
3 Solte o boto do mouse quando o nome do elemento PA de destino estiver realado.
Aninhamento automtico de Divs PA quando voc desenha uma Div PA dentro de outra
Selecione a opo Aninhamento nas Preferncias de elementos PA.
no computador.
Aninhamento: Aninhar quando criado em uma div PA Especifica se uma Div PA comeando em um ponto dentro dos
limites de uma Div PA existente deve ser uma Div PA aninhada. Mantenha pressionada a tecla Alt (Windows) ou a
tecla Option (Macintosh) para alterar temporariamente esta configurao enquanto desenha uma Div PA.
2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito, caso ela
Nota: Se o contedo do elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme
aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no
alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Overflow esteja definida como
Visible.)
A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc
(paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente
do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros.
Z-Index Determina o ndice z ou a ordem de empilhamento do elemento PA.
Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos
navegadores assume Inherit como valor padro.
Classe Especifica a classe CSS usada para criar o estilo do elemento PA.
Estouro Determina como os elementos PA aparecem em um navegador quando o contedo ultrapassa o tamanho
especificado do elemento PA.
Visible indica que o contedo extra aparecer no elemento PA; efetivamente, o elemento PA alongado para
acomod-lo. Hidden especifica que o contedo extra no ser exibido no navegador. Scroll especifica que o navegador
deve adicionar barras de rolagem ao elemento quer elas sejam necessrias ou no. Auto faz com que o navegador exiba
barras de rolagem para o elemento PA somente quando necessrio (ou seja, quando o contedo do elemento PA
ultrapassar seus limites.)
Nota: A opo estouro tem suporte instvel entre os navegadores.
Corte Define a rea visvel de um elemento PA.
Especifica as coordenadas esquerda, superior, direita e inferior para definir um retngulo no espao de coordenada do
elemento PA (contando a partir do canto superior esquerdo do elemento PA). O elemento PA recortado para que
apenas o retngulo especificado fique visvel. Por exemplo, para tornar o contedo de um elemento PA invisvel, a no
ser por um retngulo visvel de 50 pixels de largura e 75 pixels de altura no canto superior esquerdo do elemento PA,
defina E para 0, T para 0, D para 50 e B para 75.
Nota: Embora a CSS especifique uma semntica diferente para clip, o Dreamweaver interpreta clip como a maioria dos
navegadores.
4 Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh)
Nota: Se o contedo de qualquer elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA
(conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda
inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Estouro esteja
definida como Visible).
A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc
(paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente
do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros.
Vis Especifica se os elementos PA estaro inicialmente visveis ou no. Selecione uma das seguintes opes:
Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos
navegadores assume Inherit como valor padro.
4 Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh)
Seleo de elementos PA
Voc pode selecionar um ou mais elementos PA para manipul-los ou alterar suas propriedades.
Seleo de um elemento PA no painel Elementos PA
No painel Elementos PA (Janela > Elementos PA), clique no nome do elemento PA.
No painel Elementos PA (Janela > Elementos PA), mantenha pressionada a tecla Shift enquanto clica em dois ou
mais nomes de elemento PA.
Na janela Documento, mantenha pressionada a tecla Shift enquanto clica dentro ou na borda de dois ou mais
elementos PA.
Uma linha aparece enquanto voc move o elemento PA, indicando onde ele aparecer. Solte o boto do mouse quando
a linha de posicionamento aparecer no local desejado na ordem de empilhamento.
Alterao da ordem de empilhamento dos elementos PA usando o Inspetor de propriedades
1 Selecione Janela > Elementos PA para abrir o painel Elementos PA e verificar a ordem de empilhamento atual.
2 Selecione um elemento PA no painel Elementos PA ou na janela Documento.
3 No Inspetor de propriedades (Janela > Propriedades), digite um nmero na caixa de texto ndice Z.
Digite um nmero maior para mover o elemento PA para a parte superior na ordem de empilhamento.
Digite um nmero menor para mover o elemento PA para a parte inferior na ordem de empilhamento.
Redimensionamento de elementos PA
Voc pode redimensionar um elemento PA de cada vez ou redimensionar vrios elementos PA simultaneamente para
que tenham a mesma largura e altura.
Se a opo Evitar sobreposies estiver ativada, voc no poder redimensionar um elemento PA para que ele seja
sobreposto por outro.
Para redimensionar pelo incremento de encaixe de grade, mantenha pressionadas as teclas Shift e Control
(Windows) ou mantenha pressionadas as teclas Shift e Option (Macintosh) enquanto pressiona uma tecla de seta.
No Inspetor de propriedades (Janela > Propriedades), digite valores para largura (L) e altura (A).
O redimensionamento de um elemento PA altera sua largura e altura. Ele no define quanto do contedo do elemento
PA estar visvel. Voc pode definir a regio visvel de um elemento PA nas preferncias.
Selecione Modificar > Organizar > Tornar larguras iguais ou Modificar > Organizar > Tornar alturas iguais.
Os primeiros elementos PA selecionados tero a mesma largura ou altura do ltimo elemento PA selecionado.
No Inspetor de propriedades (Janela > Propriedades), em Vrios elementos CSS-P, digite os valores de largura e
altura.
Os valores so aplicados a todos os elementos PA selecionados.
Movimentao de elementos PA
Voc pode mover os elementos PA na Visualizao de design quase da mesma maneira que move os objetos na maioria
dos aplicativos grficos bsicos.
Se a opo Evitar sobreposies estiver ativada, voc no poder mover um elemento PA para que ele sobreponha
outro.
1 Na Visualizao de design, selecione um ou vrios elementos PA.
2 Siga um destes procedimentos:
Para mover arrastando, arraste a ala de seleo do ltimo elemento PA selecionado (realado em preto),
Para mover um pixel por vez, use as teclas de seta.
Mantenha pressionada a tecla Shift enquanto pressiona uma tecla de seta para mover o elemento PA pelo incremento
atual de encaixe de grade.
Alinhamento de elementos PA
Use os comandos de alinhamento de elemento PA para alinhar um ou mais elementos PA a uma borda do ltimo
elemento PA selecionado.
Quando voc alinha elementos PA, os elementos PA filho no selecionados podem se mover, pois seu elemento PA pai
selecionado e movido. Para impedir que isso acontea, no use elementos PA aninhados.
1 Na Visualizao de design, selecione o elemento PA.
2 Selecione Modificar > Organizar e selecione uma opo de alinhamento.
Por exemplo, se voc selecionar Top, todos os elementos PA se movero para que suas bordas superiores fiquem na
mesma posio vertical da borda superior do ltimo elemento PA selecionado (realado em preto).
possvel converter e reconverter tabelas e elementos PA para ajustar o layout e otimizar o design da pgina. (No
entanto, quando voc converte novamente uma tabela em elementos PA, o Dreamweaver converte a tabela novamente
em Divs PA, independentemente do tipo de elemento PA que voc possa ter na pgina antes da converso em tabelas.)
No possvel converter uma tabela ou elemento PA em uma pgina. Voc deve converter elementos PA em tabelas,
e tabelas em Divs PA.
Nota: Voc no pode converter elementos PA em tabelas ou tabelas em Divs PA em um documento modelo ou em um
documento ao qual um modelo tenha sido aplicado. Em vez disso, crie o layout em um documento no-modelo e
converta-o antes de salv-lo como modelo.
esquerda da pgina.
Converso de tabelas em Divs PA
1 Selecione Modificar > Converter > Tabelas em Divs PA.
2 Selecione uma das opes a seguir e clique em OK:
Impedir sobreposio de elemento AP Restringe as posies dos elementos PA quando eles forem criados, movidos e
As tabelas so convertidas em Divs PA. As clulas vazias no so convertidas em elementos PA, a menos que tenham
cores de fundo.
Nota: Os elementos de pgina que estavam fora das tabelas tambm so colocados em Divs PA.
No painel Elementos PA (Janela > Elementos PA), selecione a opo Evitar sobreposies.
Na janela Documento, selecione Modificar > Organizar > Impedir sobreposio de elemento AP.
172
Para ativar e desativar as rguas, seleciona Exibir > Rguas > Mostrar.
Para alterar a origem, arraste o cone de origem da rgua
Para redefinir a origem para sua posio padro, selecione Exibir > Rguas > Redefinir origem.
Para alterar a unidade de medida, selecione Exibir > Rguas e, em seguida, selecione Pixels, Polegadas ou
Centmetros.
Nota: Por padro, as guias so registradas como medies de pixel absolutas no lado superior ou esquerdo do documento,
e so exibidas em relao origem da rgua. Para registrar a guia como porcentagem, pressione a tecla Shift enquanto
cria ou move a guia.
pgina.
Bloquear guias Bloqueia as guias no lugar.
Encaixe das guias nos elementos Encaixa as guias nos elementos na pgina enquanto elas so arrastadas.
Limpar tudo Limpa todas as guias da pgina.
Nota: Se Mostrar grade no estiver selecionado, a grade no aparecer no documento e nenhuma alterao ficar visvel.
2 Na caixa de dilogo Selecionar origem da imagem, selecione um arquivo de imagem e clique em OK.
3 Na caixa de dilogo Propriedades da pgina, especifique a transparncia da imagem arrastando o controle
Para especificar precisamente a posio da imagem de decalque, digite os valores de coordenada nas caixas de texto
X e Y.
O canto superior esquerdo da imagem de decalque alinhado ao canto superior esquerdo do elemento selecionado.
Por exemplo, se voc definir a largura de uma coluna para 200 pixels e adicionar um contedo que aumente a largura
em 250 pixels, dois nmeros aparecero para essa coluna: 200 (a largura especificada no cdigo) e (250) entre
parnteses (a largura visual da coluna conforme processada na tela).
Nota: Voc tambm pode dispor o layout das pginas usando o posicionamento CSS.
Por exemplo, se voc definir a cor de fundo de uma nica clula para azul e, depois, definir a cor de fundo de toda a
tabela para amarelo, a clula azul no ser alterada para amarelo, j que a formatao da clula tem precedncia sobre
a formatao da tabela.
Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a
cada clula da coluna.
Nota: O recurso Modo de layout est obsoleto desde o Dreamweaver CS4 e posterior. O Modo de layout criava layouts
de pgina usando tabelas de layout, o que no mais recomendado pela Adobe. Para obter mais informaes sobre o
Modo de layout e sobre por que ele se tornou obsoleto, consulte o Blog da Equipe do Dreamweaver.
1 Na Visualizao de design da janela Documento, coloque o ponto de insero no local em que a tabela deve
aparecer.
Nota: Se o documento estiver em branco, voc s poder colocar o ponto de insero no incio do documento.
Quando voc no atribui explicitamente valores para espessura de tabela ou espaamento e preenchimento de clula,
a maioria dos navegadores exibe a espessura da borda da tabela e o preenchimento da clula definidos como 1 e o
espaamento da clula definido como 2. Para garantir que os navegadores exibiro a tabela sem borda, preenchimento
ou espaamento, defina Preenchimento da clula e Espaamento da clula como 0.
Preenchimento da clula Determina o nmero de pixels entre a borda de uma clula e seu contedo.
Nenhum No ativa cabealhos de coluna ou linha para a tabela.
esquerda Torna a primeira coluna da tabela uma coluna de cabealhos, a fim de que voc possa digitar um cabealho
para cada linha da tabela.
Superior Torna a primeira linha da tabela uma linha de cabealhos, a fim de que voc possa digitar um cabealho para
recomendvel usar cabealhos caso algum visitante do seu site use leitor de tela. Os leitores de tela lem os
cabealhos da tabela e ajudam os usurios de leitores de tela a controlar as informaes da tabela.
Legenda Fornece um ttulo de tabela que exibido fora da tabela.
Alinhar legenda Especifica onde a legenda da tabela aparecer em relao tabela.
Resumo Fornece uma descrio de tabela. Os leitores de tela lem o texto do resumo, mas o texto no aparece no
navegador do usurio.
Se voc selecionar Outro, uma caixa de texto aparecer direita do menu pop-up. Digite o delimitador usado no
arquivo.
Nota: Especifique o delimitador usado quando o arquivo de dados foi salvo. Se voc no fizer isso, o arquivo no ser
importado corretamente e os dados no sero corretamente formatados em uma tabela.
Largura da tabela A largura da tabela.
Selecione Ajustar aos dados para aumentar suficientemente cada coluna para que caiba a seqncia de texto mais
longa.
Selecione Definir para especificar uma largura de tabela fixa em pixels ou como uma porcentagem da largura da
janela do navegador.
Borda Especifica a largura, em pixels, das bordas da tabela.
Preenchimento da clula O nmero de pixels entre o contedo de uma clula e os limites da clula.
Espaamento da clula O nmero de pixels entre as clulas de tabela adjacentes.
Se voc no atribuir explicitamente valores para bordas, espaamento de clula e preenchimento de clula, a maioria
dos navegadores exibir a tabela com as bordas e o preenchimento da clula definidos como 1, e o espaamento da
clula definido como 2. Para garantir que os navegadores exibiro a tabela sem preenchimento ou espaamento, defina
Preenchimento da clula e Espaamento da clula como 0. Para visualizar os limites da clula e da tabela quando a borda
estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da tabela.
Formatar linha superior Determina qual formatao, se houver alguma, est aplicada linha superior da tabela.
Selecione entre as quatro opes de formatao: sem formatao, negrito, itlico ou negrito itlico.
4 Clique em Exportar.
5 Digite um nome para o arquivo e clique em Salvar.
Clique no canto superior esquerdo da tabela, em qualquer lugar da borda superior ou inferior da tabela, ou na borda
de uma linha ou coluna.
Nota: O ponteiro altera-se para o cone de grade de tabela
clique em uma borda de linha ou coluna).
Clique em uma clula de tabela e selecione a tag <table> no seletor de tags no canto inferior esquerdo da janela
Documento.
Clique em uma clula de tabela e selecione Modificar > Tabela > Selecionar tabela.
Clique em uma clula de tabela, clique no menu de cabealho de tabela e selecione Selecionar tabela. As alas de
seleo aparecem nas bordas inferior e direita da tabela selecionada.
Clique na clula e selecione a tag <td> no seletor de tags no canto inferior esquerdo da janela Documento.
Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) na clula.
Clique na clula e selecione Editar > Selecionar tudo.
Selecione Editar > Selecionar tudo novamente quando uma clula estiver selecionada a fim de realar a tabela inteira.
enquanto clica nas clulas, linhas ou colunas que voc deseja selecionar.
Se cada clula, linha ou coluna em que voc mantm pressionada a tecla Control enquanto clica ou mantm
pressionada a tecla Command enquanto clica ainda no estiver selecionada, ela ser adicionada seleo. Se ela j
estiver selecionada, ser removida da seleo.
Para alterar a cor de realce dos elementos de tabela, clique na caixa de cor de Passar o mouse, selecione a cor de
realce usando o seletor de cores (ou digite o valor hexadecimal para a cor de realce na caixa de texto).
Para ativar ou desativar o realce dos elementos de tabela, marque ou desmarque a opo Mostrar de Passar o mouse.
Nota: Essas opes afetam todos os objetos, como elementos com posio absoluta (elementos PA), que so realados
Dreamweaver quando voc move o ponteiro sobre eles.
imagens.
esquerda alinha a tabela esquerda dos outros elementos (a fim de que o texto no mesmo pargrafo seja disposto ao
redor da tabela direita); direita alinha a tabela direita dos outros elementos (com o texto disposto ao redor dela
esquerda) e Centralizado centraliza a tabela (com o texto exibido acima e/ou abaixo da tabela). Padro indica que o
navegador deve usar o alinhamento padro.
Quando o alinhamento for definido como Padro, o outro contedo no ser exibido ao lado da tabela. Para exibir
uma tabela ao lado do outro contedo, use o alinhamento esquerda ou direita.
Borda Especifica a largura, em pixels, das bordas da tabela.
Se voc no atribuir explicitamente valores para a borda, o espaamento de clula e o preenchimento de clula, a
maioria dos navegadores exibir a tabela com a borda e o preenchimento da clula definidos como 1, e o espaamento
da clula definido como 2. Para garantir que os navegadores exibiro a tabela sem preenchimento ou espaamento,
defina Borda, Preenchimento da clula e Espaamento da clula como 0. Para visualizar os limites da clula e da tabela
quando a borda estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da tabela.
Classe define a classe CSS na tabela.
Nota: Talvez seja necessrio expandir o inspetor Propriedades da tabela para ver as opes a seguir. Para expandir o
inspetor Tabela de propriedades, clique na seta de expanso, no canto inferior direito.
Limpar larguras das colunas e Limpar alturas das linhas excluem todos os valores de largura de coluna ou altura de
coluna da tabela para a largura atual em pixels (tambm define a largura da tabela inteira para a largura atual em
pixels).
Converter larguras da tabela em porcentagem e Converter alturas da tabela em porcentagem definem a largura ou
altura de cada coluna da tabela para a largura atual expressa como uma porcentagem da largura da janela Documento
(tambm define a largura da tabela inteira para a largura atual como uma porcentagem da largura da janela
Documento).
Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para
aplicar o valor.
esquerda, direita ou ao centro das clulas, ou pode indicar se o navegador deve usar o alinhamento padro
(geralmente esquerda para clulas regulares e Centralizado para clulas de cabealho).
Vert Especifica o alinhamento vertical do contedo de uma clula, linha ou coluna. Voc pode alinhar o contedo na
parte superior, ao meio, na parte inferior ou na linha de base das clulas, ou indicar se o navegador deve usar o
alinhamento padro (geralmente Meio).
L e A A largura e a altura das clulas selecionadas em pixels ou como uma porcentagem da largura ou altura da tabela
inteira. Para especificar uma porcentagem, insira o smbolo de porcentagem (%) aps o valor. Para permitir que o
navegador determine a largura ou altura apropriada com base no contedo da clula, e as larguras e alturas das outras
colunas e linhas, deixe o campo em branco (o padro).
Por padro, um navegador escolhe uma altura de linha ou largura de coluna para acomodar, e a imagem mais larga ou
a linha mais longa em uma coluna. por isso que, s vezes, uma coluna se torna muito mais larga que as outras colunas
da tabela quando voc adiciona contedo a ela.
Nota: possvel especificar uma altura como porcentagem da altura total da tabela, mas a linha pode no ser exibida
na altura percentual especificada nos navegadores.
Fundo A cor do fundo para uma clula, coluna ou linha, escolhida com o seletor de cores.
Mesclar clulas Combina as clulas, linhas ou colunas selecionadas em uma nica clula. Voc pode mesclar as clulas
somente se elas formarem um bloco retangular ou linear.
Dividir clula Divide uma clula, criando duas ou mais clulas. possvel dividir somente uma clula por vez. Este
boto ficar desativado se mais de uma clula for selecionada.
Sem quebra de linha Impede a quebra automtica de linha, mantendo todo o texto de uma clula em uma nica linha.
Se a opo Sem quebra de linha estiver ativada, as clulas aumentaro para acomodar todos os dados enquanto voc
os digita ou os cola em uma clula. (Normalmente, as clulas se expandem horizontalmente para acomodar a palavra
mais longa ou a imagem mais larga na clula; em seguida, elas se expandem verticalmente quando necessrio para
acomodar outro contedo.)
Cabealho Formata as clulas selecionadas como clulas de cabealho de tabela. O contedo das clulas de cabealho
Nota: Aps fazer a seleo ou colocar o ponto de insero, retorne ao modo Padro da Visualizao de design para fazer
as edies. Algumas operaes visuais, como redimensionamento, no retornaro os resultados esperados no modo
Tabelas expandidas.
Clique em Sair na barra Modo Tabelas expandidas na parte superior da janela Documento.
Selecione Exibir > Modo Tabela > Modo Padro.
Na categoria Layout do painel Inserir, clique em Modo Padro.
Para obter mais informaes sobre as opes, clique no cone Ajuda do Inspetor de propriedades.
Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a
cada clula da coluna. No entanto, quando voc define determinadas propriedades de uma linha, o Dreamweaver altera
os atributos da tag tr em vez de alterar os atributos de cada tag td da linha. Quando voc estiver aplicando o mesmo
formato a todas as clulas de uma linha, a aplicao do formato tag tr produzir um cdigo HTML mais limpo e
conciso.
Para localizar rapidamente as tags no cdigo, clique na tabela, selecione a tag <table> no seletor de tags, na parte
inferior da janela Documento.
Para editar o resumo da tabela, selecione a tabela, clique com o boto direito do mouse (Windows) ou mantenha
pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar cdigo de tag.
Nota: Tambm possvel alterar as larguras e alturas de clula diretamente no cdigo HTML usando a Visualizao de
cdigo.
O Dreamweaver exibe as larguras de coluna, juntamente com os menus de cabealho de coluna, nas partes superiores
ou inferiores das colunas quando a tabela selecionada ou quando o ponto de insero est na tabela. possvel ativar
ou desativar os menus de cabealho de coluna quando necessrio.
A largura da coluna adjacente tambm alterada. Na verdade, voc redimensiona duas colunas. O feedback visual
mostra como as colunas sero ajustadas. A largura geral da tabela no alterada.
Nota: Nas tabelas com larguras baseadas em porcentagem (e no em pixels), se voc arrastar a borda direita da coluna
da extrema direita, a largura da tabela inteira ser alterada e todas as colunas sero aumentadas ou diminudas
proporcionalmente.
A largura de uma coluna alterada. O feedback visual mostra como as colunas sero ajustadas. A largura geral da tabela
alterada para acomodar a coluna que voc est redimensionando.
O Dreamweaver redefine a largura especificada no cdigo para que corresponda largura visual.
Selecione Modificar > Limpar larguras das clulas ou Modificar > Tabela > Limpar alturas das clulas.
No Inspetor de propriedades, (Janela > Propriedades), clique no boto Limpar alturas das linhas
Limpar larguras das colunas
ou no boto
Clique no menu de cabealho de tabela e selecione Limpar todas as alturas ou Limpar todas as larguras.
Selecione Modificar > Tabela > Inserir linha ou Modificar > Tabela > Inserir coluna.
Uma linha aparecer acima do ponto de insero ou uma coluna aparecer esquerda do ponto de insero.
Clique no menu de cabealho de coluna e selecione Inserir coluna esquerda ou Inserir coluna direita.
Clique em uma clula na linha ou coluna a ser excluda e selecione Modificar > Tabela > Excluir linha ou
Modificar > Tabela > Excluir coluna.
Selecione uma linha ou coluna completa e, em seguida, selecione Editar > Limpar ou pressione Delete.
Na ilustrao a seguir, a seleo um retngulo de clulas. Portanto, as clulas podem ser mescladas.
Na ilustrao a seguir, a seleo no um retngulo de clulas. Portanto, as clulas no podem ser mescladas.
Nota: Se o boto no for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para
ver todas as opes.
O contedo das clulas individuais colocado na clula mesclada resultante. As propriedades da primeira clula
selecionada so aplicadas clula mesclada.
Nota: Se o boto no for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para
ver todas as opes.
2 Na caixa de dilogo Dividir clula, especifique como a clula deve ser dividida:
Dividir clula em: Especifica se a clula ser dividida em linhas ou colunas.
Nmero de linhas/Nmero de colunas Especifica em quantas linhas ou colunas a clula ser dividida.
Selecione Modificar > Tabela > Aumentar extenso da linha ou Modificar > Tabela > Aumentar extenso da
coluna.
Selecione Modificar > Tabela > Diminuir extenso da linha ou Modificar > Tabela > Diminuir extenso da coluna.
Na ilustrao a seguir, a seleo um retngulo de clulas. Portanto, as clulas podem ser recortadas ou copiadas.
Na ilustrao a seguir, a seleo no um retngulo. Portanto, as clulas no podem ser recortadas ou copiadas.
Nota: Se voc selecionou uma linha ou coluna inteira e clicar em Editar > Recortar, toda a linha ou coluna ser removida
da tabela (e no apenas o contedo das clulas).
Para substituir as clulas existentes pelas clulas que voc est colando, selecione um conjunto de clulas existentes
com o mesmo layout das clulas na rea de transferncia. (Por exemplo, se voc copiou ou recortou um bloco de
clulas de 3 x 2, poder selecionar outro bloco de clulas de 3 x 2 a ser substitudo pela colagem.)
Para colar uma linha completa de clulas acima de uma clula especfica, clique nessa clula.
Para colar uma coluna completa de clulas esquerda de uma clula especfica, clique nessa clula.
Nota: Se voc tiver menos de uma linha ou coluna completa de clulas na rea de transferncia, e clicar em uma clula
e colar as clulas da rea de transferncia, a clula em que voc clicou e suas vizinhas possivelmente sero substitudas
(dependendo do local dela na tabela) pelas clulas que esto sendo coladas.
Para criar uma nova tabela com as clulas coladas, coloque o ponto de insero fora da tabela.
2 Selecione Editar > Colar.
Se voc estiver colando linhas ou colunas inteiras em uma tabela existente, as linhas ou colunas sero adicionadas
tabela. Se voc estiver colando uma clula individual, o contedo da clula selecionada ser substitudo. Se voc estiver
fazendo a colagem fora de uma tabela, as linhas, colunas ou clulas sero usadas para definir uma nova tabela.
Nota: Se apenas linhas ou colunas completas estiverem selecionadas quando voc clicar em Editar > Limpar ou
pressionar Delete, as linhas ou colunas inteiras, e no apenas seu contedo, sero removidas da tabela.
Aninhamento de tabelas
Uma tabela aninhada uma tabela dentro de uma clula de outra tabela. Voc pode formatar uma tabela aninhada
como faria em qualquer outra tabela. No entanto, sua largura limitada pela largura da clula em que ela aparece.
1 Clique em uma clula da tabela existente.
2 Selecione Inserir > Tabela, defina as opes Inserir tabela e clique em OK.
Ordenao de tabelas
Voc pode ordenar as linhas de um tabela com base no contedo de uma nica coluna. Tambm possvel executar
uma ordenao de tabela mais complexa com base no contedo de duas colunas.
Voc no pode ordenar tabelas que contenham o atributo colspan ou rowspan, ou seja, tabelas que contenham clulas
mescladas.
1 Selecione a tabela ou clique em qualquer clula.
2 Selecione Comandos > Ordenar tabela, defina as opes na caixa de dilogo e clique em OK.
Ordenar por Determina quais valores de coluna sero usados para ordenar as linhas da tabela.
Ordem Determina se a coluna ser ordenada alfabtica ou numericamente, e se ela ser ordenada em ordem crescente
de ordenao secundria no menu pop-up Depois, por e a ordem da ordenao secundria nos menus pop-up Ordem.
A ordenao inclui a primeira linha Especifica se a primeira linha da tabela deve ser includa na ordenao. Se a
primeira linha for um cabealho que no deve ser movido, no selecione esta opo.
Ordenar linhas do cabealho Especifica que todas as linhas da seo thead (se houver alguma) da tabela devem ser
ordenadas usando os mesmos critrios das linhas do corpo. (Observe que as linhas thead permanecem na seo thead
e ainda aparecero na parte superior da tabela, at mesmo depois da ordenao.) Para obter informaes sobre a tag
thead, consulte o painel Referncia (selecione Ajuda > Referncia).
Ordenar linhas do rodap Especifica que todas as linhas da seo tfoot (se houver alguma) da tabela devem ser
ordenadas usando os mesmos critrios das linhas do corpo. (Observe que as linhas tfoot permanecem na seo tfoot
e ainda aparecero na parte inferior da tabela, at mesmo depois da ordenao.) Para obter informaes sobre a tag
tfoot, consulte o painel Referncia (selecione Ajuda > Referncia).
Manter todas as cores de linha inalteradas aps a ordenao Especifica que os atributos de linha de tabela (como cor)
devem permanecer associados ao mesmo contedo aps a ordenao. Se as linhas de tabela forem formatadas com
duas cores alternativas, no selecione esta opo para garantir que a tabela classificada ainda ter linhas com cores
alternativas. Se os atributos de linha forem especficos do contedo de cada linha, selecione esta opo para garantir
que esses atributos permanecero associados s linhas corretas na tabela ordenada.
Uso de quadros
Como funcionam os quadros e os conjuntos de quadros
Um quadro uma regio de uma janela do navegador que pode exibir um documento HTML independentemente do
que est sendo exibido no restante da janela do navegador. Os quadros permitem dividir uma janela do navegador em
vrias regies, cada uma delas podendo exibir um documento HTML diferente. Geralmente, um quadro exibe um
documento que contm controles de navegao, enquanto outro quadro exibe um documento com o contedo.
Um conjunto de quadros um arquivo HTML que define o layout e as propriedades de um conjunto de quadros,
incluindo o nmero de quadros, o tamanho e o posicionamento dos quadros, e o URL da pgina que aparece
inicialmente em cada quadro. O arquivo de conjunto de quadros propriamente no possui contedo HTML a ser
exibido em um navegador, a no ser a seo noframes. O arquivo de conjunto de quadros simplesmente fornece
informaes para o navegador sobre como deve ser a aparncia de um conjunto de quadros e quais documentos devem
aparecer nele.
Para visualizar um conjunto de quadros em um navegador, digite o URL do arquivo do conjunto de quadros. O
navegador abrir os documentos relevantes a serem exibidos nos quadros. O arquivo do conjunto de quadros de um
site geralmente chamado de index.html, a fim de que ele seja exibido por padro caso um visitante no especifique
um nome de arquivo.
O exemplo a seguir mostra um layout de quadro composto por trs quadros: um quadro estreito no lado que contm
uma barra de navegao, um quadro ao longo da parte superior contendo o logotipo e o ttulo do site, e um quadro
grande que ocupa o restante da pgina e possui o contedo principal. Cada um desses quadros exibe um documento
HTML separado.
Neste exemplo, o documento exibido no quadro superior nunca alterado quando o visitante navega no site. A barra
de navegao de quadro lateral contm links; se voc clicar em um desses links, o contedo do quadro principal
alterado, mas o contedo do quadro lateral permanece esttico. O quadro de contedo principal direita exibe o
documento apropriado para o link que o visitante clica esquerda.
Um quadro no um arquivo. fcil considerar o documento que aparece atualmente em um quadro como parte
integrante do quadro, mas, na verdade, o documento no faz parte do quadro. O quadro um continer que retm o
documento.
Nota: Uma pgina se refere a um nico documento HTML ou ao contedo inteiro de uma janela de documento em
um dado momento, mesmo que vrios documentos HTML apaream simultaneamente. A frase uma pgina que usa
quadros, por exemplo, geralmente se refere a um conjunto de quadros e aos documento que aparecem inicialmente
nesses quadros.
Um site que aparece em um navegador como uma pgina nica composta de trs quadros consiste, na verdade, de pelo
menos quatro documentos HTML: o arquivo de conjunto de quadros mais os trs documentos que possuem o
contedo que aparece inicialmente nos quadros. Quando voc projeta uma pgina usando conjuntos de quadros no
Dreamweaver, deve salvar cada um desses quatro arquivos para que a pgina funcione corretamente no navegador.
Para obter informaes mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em
www.tjkdesign.com/articles/frames/.
O alinhamento grfico preciso dos elementos em quadros diferentes podem ser difcil.
O teste da navegao pode ser demorado.
Os URLs das pginas individuais com quadro no aparecem nos navegadores; portanto, pode ser difcil para um
visitante indicar uma pgina especfica (a menos que voc fornea um cdigo de servidor que os permita carregar
uma verso com quadro de uma pgina)
Para obter informaes completas com os motivos pelos quais voc no deve usar quadros, consulte a explicao de
Gary White em http://apptools.com/rants/framesevil.php.
Os quadros so mais utilizados para navegao, caso decida us-los. Um conjunto de quadros geralmente inclui um
quadro que contm uma barra de navegao e outro quadro para exibir as pginas de contedo principais. Usar os
quadros desse modo tem algumas vantagens:
Em muitos casos, possvel criar uma pgina da Web sem quadros que atinja os mesmos objetivos de um conjunto de
quadros. Por exemplo, se voc deseja que uma barra de navegao aparea no lado esquerdo da pgina, substitua a
pgina por um conjunto de quadros ou apenas inclua a barra de navegao em cada pgina do site. (O Dreamweaver
ajuda voc a criar vrias pginas que usam o mesmo layout.) O exemplo a seguir mostra um design de pgina com um
layout semelhante ao de um quadro, mas que no usa quadros.
Os sites criados de modo inadequado usam quadros desnecessariamente, com um conjunto de quadros que recarrega
o contedo dos quadros de navegao cada vez que o visitante clica em um boto de navegao. Quando os quadros
so bem utilizados (por exemplo, para manter os controles de navegao estticos em um quadro e, ao mesmo tempo,
permitir que o contedo de outro quadro seja alterado), eles podem ser muito teis para um site.
Nem todos os navegadores oferecem um suporte satisfatrio aos quadros, dificultando o uso dos quadros pelos
visitantes com dificuldades de navegao. Portanto, se voc usar quadros, sempre fornea uma seo noframes no
conjunto de quadros para os visitantes que no podem visualiz-los. Voc tambm poderia fornecer um link explcito
para uma verso sem quadros do site.
Para obter informaes mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em
www.tjkdesign.com/articles/frames/.
A. Conjunto de quadros principal B. O quadro de menu e o quadro de contedo esto aninhados dentro do conjunto de quadros principal.
O Dreamweaver cuida do aninhamento de conjunto de quadros quando necessrio. Se voc usar as ferramentas de
diviso de quadros do Dreamweaver, no precisar se preocupar com quais quadros esto aninhados e quais no esto.
H duas maneiras de aninhar conjuntos de quadros em HTML: o conjunto de quadros interno pode ser definido no
mesmo arquivo que o conjunto de quadros externo ou em um arquivo separado. Cada conjunto de quadros
predefinido do Dreamweaver define todos os seus conjuntos de quadros no mesmo arquivo.
Os dois tipos de aninhamento produzem os mesmos resultados visuais; no fcil dizer, sem examinar o cdigo, qual
tipo de aninhamento est sendo usado. A situao mais provvel em que um arquivo de conjunto de quadros externo
precisar ser usado no Dreamweaver quando voc utiliza o comando Abrir no quadro para abrir um arquivo de
conjunto de quadros dentro de um quadro. Isso possivelmente resultar em problemas na definio de alvos para links.
geralmente mais simples manter todos os conjuntos de quadros definidos em um nico arquivo.
separado e que voc deve salvar cada documento, juntamente com o arquivo de conjunto de quadros.
3 Defina as propriedades de cada quadro e do conjunto de quadros (incluindo a nomeao de cada quadro, a
Escolha Inserir > HTML > Quadros e selecione um conjunto de quadros predefinido.
Na categoria Layout do painel Inserir, clique na seta suspensa no boto Quadros e selecione um conjunto de
quadros predefinido.
Os cones de conjunto de quadros oferecem uma representao visual de cada conjunto de quadros conforme
aplicados ao documento atual. A rea azul de um cone de conjunto de quadros representa o documento atual e as reas
brancas representam os quadros que exibiro outros documentos.
2 Se voc tiver configurado o Dreamweaver para solicitar atributos de acessibilidade de quadro, selecione um quadro
no menu pop-up, digite um nome para o quadro e clique em OK. (Para os visitantes que usam leitores de tela, o
leitor de tela ler esse nome quando encontrar o quadro em uma pgina.)
Nota: Se voc clicar em OK sem digitar um novo nome, o Dreamweaver atribuir ao quadro um nome que corresponde
sua posio (quadro esquerdo, quadro direito etc.) no conjunto de quadros.
Nota: Se voc pressionar Cancelar, o conjunto de quadros aparecer no documento, mas o Dreamweaver no associar
tags ou atributos de acessibilidade a ele.
Selecione Janela > Quadros para visualizar um diagrama dos quadros que voc est nomeando.
acesso a tag frame aparecer. Preencha a caixa de dilogo de cada quadro e clique em OK.
Nota: Se voc pressionar Cancelar, o conjunto de quadros aparecer no documento, mas o Dreamweaver no associar
tags ou atributos de acessibilidade a ele.
Para dividir um quadro ou conjunto de quadros vertical ou horizontalmente, arraste uma borda de quadro da borda
para o meio da Visualizao de design.
Para dividir um quadro usando uma borda de quadro que no esteja na borda da Visualizao de design, mantenha
pressionada a tecla Alt (Windows) ou mantenha pressionada a tecla Option (Macintosh) enquanto arrasta uma
borda de quadro.
Para dividir um quadro em quatro, arraste uma borda de quadro de um dos cantos da Visualizao de design para
o meio de um quadro.
Para criar trs quadros, comece com dois quadros e divida um deles. No fcil mesclar dois quadros adjacentes sem
editar o cdigo do conjunto de quadros. Portanto, transformar quatro quadros em trs mais difcil do que
transformar dois quadros em trs.
Excluso de um quadro
Arraste uma borda de quadro para fora da pgina ou para uma borda do quadro pai.
Se houver algum contedo no salvo de um documento em um quadro que est sendo removido, o Dreamweaver
solicitar que voc salve o documento.
Nota: No possvel remover totalmente um conjunto de quadros arrastando as bordas. Para remover um conjunto de
quadros, feche a janela Documento que o exibe. Se o arquivo de conjunto de quadros tiver sido salvo, exclua o arquivo.
Redimensionamento de um quadro
Para definir tamanhos aproximados de quadros, arraste as bordas de quadro na Visualizao de design da janela
Documento.
Para especificar tamanhos exatos e a quantidade de espao que o navegador alocar para uma linha ou coluna de
quadros quando o tamanho da janela do navegador no permitir que os quadros sejam exibidos em tamanho
integral, use o Inspetor de propriedades.
O painel Molduras oferece uma representao visual dos quadros em um conjunto de quadros. Ele mostra a hierarquia
da estrutura do conjunto de quadros de uma maneira que pode no ser visvel na janela Documento. No painel
Molduras, uma borda muito espessa envolve cada conjunto de quadros; cada quadro contornado por uma linha cinza
fina e identificado por um nome de quadro.
Na Visualizao de design da janela Documento, quando um quadro selecionado, suas bordas so contornadas com
uma linha pontilhada. Quando um conjunto de quadros selecionado, todas as bordas dos quadros do conjunto de
quadros so contornadas com uma linha pontilhada clara.
Nota: O posicionamento do ponto de insero em um documento exibido em um quadro no o mesmo que selecionar
um quadro. H vrias operaes (como definir as propriedades do quadro) nas quais voc deve selecionar um quadro.
Para selecionar um quadro, clique no quadro. (Um contorno de seleo aparece em torno do quadro no painel
Molduras e na Visualizao de design da janela Documento).
Para selecionar um conjunto de quadros, clique na borda que envolve o conjunto de quadros.
Para selecionar um conjunto de quadros, clique em uma das bordas de quadro internas do conjunto de quadros na
Visualizao de design. (As bordas de quadro devem estar visveis para que isso possa ser feito. Selecione Exibir >
Auxlios visuais > Bordas de quadro para tornar as bordas visveis, caso elas no estejam.)
Nota: geralmente mais fcil selecionar conjuntos de quadros no painel Molduras do que na janela Documento. Para
obter mais informaes, consulte os tpicos anteriores.
Para selecionar o conjunto de quadros pai (o conjunto de quadros que contm a seleo atual), pressione Alt+Seta
para cima (Windows) ou Command+Seta para cima (Macintosh).
Para selecionar o primeiro quadro ou conjunto de quadros filho do conjunto de quadros selecionado (ou seja, o
primeiro na ordem em que eles esto definidos no arquivo de conjunto de quadros), pressione Alt+Seta para baixo
(Windows) ou Command+Seta para baixo (Macintosh).
Nota: Quando voc usa as ferramentas visuais do Dreamweaver para criar um conjunto de quadros, cada novo
documento exibido em um quadro recebe um nome de arquivo padro. Por exemplo, o primeiro arquivo de conjunto de
quadros nomeado como ConjuntodequadrosSemTtulo-1, enquanto o primeiro documento de um quadro nomeado
como QuadroSemTtulo-1.
Para salvar o arquivo de conjunto de quadros, selecione Arquivo > Salvar conjunto de quadros.
Para salvar o arquivo de conjunto de quadros como um novo arquivo, selecione Arquivo > Salvar conjunto de
quadros como.
Nota: Se o arquivo de conjunto de quadros no tiver sido salvo, esses dois comandos sero equivalentes.
Esse procedimento salva todos os documentos abertos no conjunto de quadros, incluindo o arquivo de conjunto de
quadros e todos os documentos com quadro. Se o arquivo de conjunto de quadros ainda no tiver sido salvo, uma
borda espessa aparecer em torno do conjunto de quadros (ou o quadro no salvo) na Visualizao de design e voc
poder selecionar um nome de arquivo.
Nota: Se voc usou Arquivo > Abrir no quadro para abrir um documento no quadro, ao salvar o conjunto de quadros,
o documento que voc abriu no quadro se tornar o documento padro a ser exibido nesse quadro. Caso no queira que
o documento seja o padro, no salve o arquivo de conjunto de quadros.
Mantenha pressionada a tecla Alt enquanto clica (Windows) ou mantenha pressionadas a teclas Shift e Option
enquanto clica (Macintosh) em um quadro na Visualizao de design da janela Documento.
Para fazer com que um link altere o contedo de outro quadro, voc deve atribuir um nome ao quadro de destino.
Para facilitar a criao de links entre quadros posteriormente, atribua nomes a cada quadro ao cri-los.
Origem Especifica o documento de origem a ser exibido no quadro. Clique no cone de pasta desejado e selecione um
arquivo.
Rolar Especifica se as barras de rolagem aparecem no quadro. Se voc definir esta opo como Padro, um valor no
ser definido para o atributo correspondente, permitindo que cada navegador use seu valor padro. A maioria dos
navegadores assume Automtico como valor padro, o que significa que as barras de rolagem aparecero apenas
quando no houver espao suficiente em uma janela de navegador para exibir o contedo completo do quadro atual.
Sem redimensionamento Impede que os visitantes arrastem as bordas de quadro para redimensionar o quadro em um
navegador.
Nota: Voc sempre poder redimensionar os quadros no Dreamweaver; esta opo se aplica apenas aos visitantes que
visualizam os quadros em um navegador.
Bordas Mostra ou oculta as bordas do quadro atual quando ele visualizado em um navegador. A seleo da opo
Bordas em um quadro substitui as configuraes de borda do conjunto de quadros.
As opes de borda so Sim (mostrar bordas), No (ocultar bordas) e Padro. A maioria dos navegadores mostra as
bordas, por padro, a menos que o conjunto de quadros pai esteja com as opes de borda definidas para No. Uma
borda fica oculta somente quando todos os quadros que compartilham a borda esto com as opes de borda definidas
para No, ou quando a propriedade de bordas do conjunto de quadros pai est definida para No e os quadros que
compartilham a borda esto com as opes de borda definidas para Padro.
Cor da borda Define uma cor para todas as bordas do quadro. Esta cor se aplica a todas as bordas que tocam o quadro
o contedo).
Altura da margem Define a altura em pixels das margens superior e inferior (o espao entre as bordas de quadro e o
contedo).
Nota: Definir a largura e altura da margem de um quadro no o mesmo que definir margens na caixa de dilogo
Modificar > Propriedades da pgina.
Para alterar a cor de fundo de um quadro, defina a cor de fundo do documento no quadro, nas propriedades da
pgina.
Visualizao de design.
2 No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de insero em um dos quadros.
Clique em uma borda entre dois quadros do conjunto de quadros na Visualizao de design da janela Documento.
Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros).
2 Na caixa Ttulo da barra de ferramentas Documento, digite um nome para o documento de conjunto de quadros.
Quando um visitante visualiza o conjunto de quadros em um navegador, o ttulo aparece na barra de ttulo do
navegador.
Clique em uma borda entre dois quadros do conjunto de quadros na Visualizao de design da janela Documento.
Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros).
2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito e defina
Seleo de lin./col. Define os tamanhos de quadro para as linhas e colunas do conjunto de quadros selecionado. Clique
em uma aba no lado esquerdo ou superior da rea Seleo de lin./col. e digite uma altura ou largura na caixa de texto
Valor.
3 Para especificar a quantidade de espao que o navegador alocar para cada quadro, selecione entre as seguintes
Nota: Se todas as larguras forem especificadas em pixels e um visitante visualizar o conjunto de quadros de um
navegador que seja muito largo ou estreito para a largura especificada, os quadros sero aumentados ou reduzidos
proporcionalmente para preencher o espao disponvel. O mesmo se aplica s alturas especificadas em pixels. Desse modo,
geralmente recomendvel especificar pelo menos uma largura ou altura como relativa.
Percentual Especifica que a coluna ou linha selecionada deve ser uma porcentagem da largura ou altura total do
conjunto de quadros. O espao dos quadros com unidades definidas para Percentual alocado aps os quadros com
unidades definidas para Pixels, mas antes dos quadros com unidades definidas como Relativo.
Relativo Especifica que a coluna ou linha selecionada deve ser alocada no restante do espao disponvel depois que os
quadros definidos como Pixels e Percentual estiverem com seus espaos alocados. Esse espao restante dividido
proporcionalmente entre os quadros com tamanhos definidos para Relativo.
Nota: Quando voc seleciona Relativo no menu Unidades, qualquer nmero digitado no campo Valor desaparecer. Se
voc precisar especificar um nmero, deve digit-lo novamente. No entanto, se houver apenas uma linha ou coluna
definida como Relativo, no ser necessrio digitar um nmero, j que a linha ou coluna recebe todo o espao restante
depois que as outras linhas e colunas tem seus espaos alocados. Para ter a certeza da compatibilidade entre navegadores,
digite 1 no campo Valor. Isso o mesmo que no digitar nenhum valor.
3 No menu Alvo do Inspetor de propriedades, selecione o quadro ou a janela em que o documento vinculado deve
aparecer:
_blank abre o documento vinculado em uma nova janela de navegador, deixando a janela atual inalterada.
_parent abre o documento vinculado no conjunto de quadros pai do quadro no qual o link aparece, substituindo
_top abre o documento vinculado na janela de navegador atual, substituindo todos os quadros.
Os nomes de quadro tambm aparecem neste menu. Selecione um quadro com nome a fim de abrir o documento
vinculado nesse quadro.
Nota: Os nomes de quadro s aparecem quando voc est editando um documento em um conjunto de quadros. Quando
voc edita um documento em sua prpria janela Documento, os nomes de quadro no aparecem no menu pop-up Alvo.
Se voc estiver editando um documento fora do conjunto de quadros, poder digitar o nome do quadro de destino na
caixa de texto Alvo.
Se voc estiver se vinculando a uma pgina fora do site, sempre use target="_top" ou target="_blank" para
deixar claro que a pgina no parte do site.
O Dreamweaver limpa a Visualizao de design e as palavras Contedo sem quadros aparecem na parte superior da
Visualizao de design.
2 Siga um destes procedimentos:
Na janela Documento, digite ou insira o contedo como voc faria em um documento comum.
Selecione Janela > Inspetor de cdigo, coloque o ponto de insero entre as tags body que aparecem nas tags
noframes e digite o cdigo HTML do contedo.
3 Selecione Modificar > Conjunto de quadros > Editar contedo sem quadros novamente para retornar
Ir para URL Abre uma nova pgina na janela atual ou no quadro especificado. Esta ao especificamente til para
alterar o contedo de dois ou mais quadros com um clique.
Inserir menu de salto Configura uma lista de menus de links que abrem arquivos em uma janela de navegador quando
eles so clicados. Voc tambm pode indicar uma janela ou quadro no qual o documento ser aberto.
Para obter mais informaes, consulte Adio de comportamentos JavaScript na pgina 346
Nota: Se voc estiver trabalhando com determinados tipos de arquivo, como XML, JavaScript, Java e CSS, o painel
Inserir e a opo de Visualizao de design estaro desativados, porque no possvel inserir itens nesses arquivos de
cdigo.
selecione Layout.
205
Inserir um objeto
1 Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir.
2 Siga um destes procedimentos:
Por exemplo, para inserir um alocador de espao em uma imagem sem especificar um arquivo de imagem, clique com
a tecla Control ou Option pressionada no boto Imagem.
Nota: Este procedimento no ignora todas as caixas de dilogo de insero de objetos. Muitos objetos, incluindo
elementos PA e conjuntos de molduras, no inserem alocadores de espao nem objetos de valor padro.
ocultar as caixas de dilogo ao inserir objetos como imagens, tabelas, scripts e elementos de cabealho ou mantenha
pressionada a tecla Control (Windows) ou Option (Macintosh) ao criar o objeto.
Ao inserir um objeto com essa opo desativada, os valores de atributo padro so aplicados. Use o Inspetor de
propriedades para alterar as propriedades de objeto depois de inserir o objeto.
Para adicionar um objeto, selecione-o no painel Objetos disponveis esquerda e, em seguida, clique na seta entre
os dois painis ou clique duas vezes no objeto no painel Objetos disponveis.
Nota: Voc pode adicionar um objeto de cada vez. Voc no pode selecionar o nome de uma categoria, como Comum,
para adicionar uma categoria inteira lista de favoritos.
Para excluir um objeto ou separador, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique
no boto Remover objeto selecionado na lista Objetos favoritos, acima do painel.
Para mover um objeto, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique no boto de
seta para cima ou para baixo, acima do painel.
Para adicionar um separador abaixo de um objeto, selecione um objeto no painel Objetos favoritos direita e, em
seguida, clique no boto Adicionar separador, abaixo do painel.
4 Se voc no estiver na categoria Favoritos do painel Inserir, selecione essa categoria para ver suas alteraes.
2 Quando voc visualizar uma linha azul horizontal na parte superior da janela Documento, solte o painel Inserir na
posio.
Nota: A Barra de insero horizontal, por padro, tambm faz parte da rea de trabalho Clssica. Para alternar para a
rea de trabalho Clssica, selecione Clssica, no alternador de rea de trabalho da Barra de aplicativos.
propriedades de texto.
2 Edite as propriedades da pgina e clique em OK.
propriedades de texto.
de fontes especificada, a menos que outra fonte seja definida para um elemento de texto.
Tamanho Especifica o tamanho de fonte padro a ser usado nas pginas da Web. O Dreamweaver usa o tamanho de
fonte especificado, a menos que outro tamanho de fonte seja definido para um elemento de texto.
Cor do texto Especifica a cor padro em que as fontes sero processadas.
Cor do fundo Define uma cor do fundo para a pgina. Clique na caixa Cor do fundo e selecione uma cor no Seletor de
cores.
Imagem do fundo Define uma imagem do fundo. Clique no boto Procurar e navegue at a imagem para selecion-la.
Se desejar, digite o caminho da imagem do fundo na caixa Imagem do fundo.
O Dreamweaver coloca a imagem do fundo lado a lado (repete a imagem do fundo) caso ela no preencha toda a janela,
assim como fazem os navegadores. (Para evitar que a imagem do fundo seja disposta lado a lado, use as folhas de estilos
em cascata para desativar esse recurso.)
Repetir Especifica como a imagem do fundo ser exibida na pgina:
Selecione a opo No-repeat para exibir a imagem do fundo apenas uma vez.
Selecione a opo Repeat para repetir ou dispor a imagem lado a lado horizontalmente e verticalmente.
Selecione a opo Repeat-x para dispor a imagem lado a lado horizontalmente.
Selecione a opo Repeat-y para dispor a imagem lado a lado verticalmente.
Margem esquerda e Margem direita Especifica o tamanho das margens esquerda e direita da pgina.
Margem superior e Margem inferior Especifica o tamanho das margens superior e inferior da pgina.
propriedades de texto.
2 Selecione a categoria Aparncia (HTLM) e defina as opes.
Imagem do fundo Define uma imagem de fundo. Clique no boto Procurar e navegue at a imagem para selecion-la.
de cores.
Texto Especifica a cor padro em que as fontes sero processadas.
Link Especifica a cor a ser aplicada ao texto do link.
Links visitados Especifica a cor a ser aplicada aos links visitados.
Links ativos Especifica a cor a ser aplicada quando o mouse clicado em um link.
Margem esquerda e Margem direita Especifica o tamanho das margens esquerda e direita da pgina.
Margem superior e Margem inferior Especifica o tamanho das margens superior e inferior da pgina.
propriedades de texto.
2 Escolha a categoria Links (CSS) e defina as opes.
Fonte do link Especifica a famlia de fontes padro a ser usada como texto do link. Por padro, o Dreamweaver usa a
famlia de fontes especificada para a pgina inteira, a menos que voc especifique outra fonte.
Tamanho Especifica o tamanho de fonte padro a ser usado no texto do link.
Cor do link Especifica a cor a ser aplicada ao texto do link.
Links visitados Especifica a cor a ser aplicada aos links visitados.
Links de sobreposio Especifica a cor a ser aplicada quando o ponteiro do mouse colocado sobre um link.
Links ativos Especifica a cor a ser aplicada quando o mouse clicado em um link.
Estilo sublinhado Especifica o estilo de sublinhado a ser aplicado aos links. Se a pgina j tiver um estilo de link
sublinhado definido (atravs de uma folha de estilos CSS externa, por exemplo), o valor padro do menu Estilo
sublinhado ser a opo no alterar. Esta opo informa sobre um estilo de link no definido. Se voc modificar o
estilo de link sublinhado usando a caixa de dilogo Propriedades da pgina, o Dreamweaver alterar a definio de link
anterior.
propriedades de texto.
2 Escolha a categoria Cabealhos (CSS) e defina as opes.
Fonte do cabealho Especifica a famlia de fontes padro a ser usada como cabealhos. O Dreamweaver usar a famlia
de fontes especificada, a menos que outra fonte seja definida para um elemento de texto.
Cabealho 1 a Cabealho 6 Especifica o tamanho e a cor da fonte a serem usados em at seis nveis de tags de
cabealho.
propriedades de texto.
2 Escolha a categoria Ttulo/codificao e defina as opes.
Ttulo Especifica o ttulo de pgina a ser exibido na barra de ttulo da janela Documento e da maioria das janelas de
navegador.
Tipo de documento (DTD) Especifica uma definio de tipo de documento. Por exemplo, voc pode criar um
documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu
pop-up.
Codificao Especifica a codificao usada nos caracteres do documento.
Se voc selecionar Unicode (UTF-8) como codificao de documento, a codificao de entidade no ser necessria,
pois a codificao UTF-8 poder representar com segurana todos os caracteres. Se voc selecionar outra codificao
de documento, a codificao de entidade provavelmente ser necessria para representar determinados caracteres.
Para obter mais informaes sobre as entidades de caractere, consulte www.w3.org/TR/REChtml40/sgml/entities.html.
Recarregar Converte o documento existente ou abre o documento novamente usando a nova codificao.
Formulrio de normalizao unicode Ativado somente se voc selecionar UTF-8 como codificao de documento. H
quatro formulrios de normalizao unicode. O mais importante deles o formulrio de normalizao C, pois o
formulrio mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros trs para
ser mais completa.
No Unicode, alguns caracteres so visualmente similares, mas podem ser armazenados no documento de diferentes
maneiras. Por exemplo, (e-umlaut) pode ser representado como um caractere nico, e com trema, ou como dois
caracteres, e latino regular + trema. O caractere de combinao Unicode aquele utilizado com o caractere
anterior; sendo assim, o trema apareceria acima do e latino. Os dois formulrios tm como resultado a mesma
tipografia visual, mas o que salvo no arquivo diferente em cada formulrio.
A normalizao o processo que garante que todos os caracteres que podem ser salvos de formas diferentes sero
salvos de uma mesma forma. Ou seja, todos os caracteres de um documento sero salvos como um nico e com
trema ou como e + trema , e no de duas formas em um documento.
Para obter mais informaes sobre a normalizao unicode e as formas especficas que podem ser usadas, consulte o
site da Unicode em www.unicode.org/reports/tr15.
Incluir assinatura Unicode (BOM) Inclui uma BOM (marca de ordem de bytes) no documento. Uma BOM consiste em
2 a 4 bytes no incio de um arquivo de texto que identifica um arquivo como Unicode, e se assim for, a ordem dos bytes
a seguir. Como a codificao UTF-8 no tem ordem de bytes, a adio de um BOM UTF-8 opcional. Na UTF-16 e
UTF-32, ela obrigatria.
propriedades de texto.
2 Escolha a categoria Imagem de decalque e defina as opes.
Imagem de decalque Especifica uma imagem a ser usada como guia na cpia de um design. Essa imagem serve apenas
opaco.
O Dreamweaver exibe o documento usando as fontes especificadas em Preferncias de fontes na codificao Europeu
Ocidental (Latim1); um navegador exibe o documento usando as fontes que o usurio especifica para essa codificao.
Se voc especificar Japons (Shift JIS), esta tag meta ser inserida:
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.
O Dreamweaver exibe o documento usando as fontes especificadas na codificao Japons; um navegador exibe o
documento usando as fontes que o usurio especifica para as codificaes Japons.
Voc pode alterar a codificao de documento de uma pgina e a codificao padro que o Dreamweaver usa para criar
novos documentos, incluindo as fontes usadas para exibir cada codificao.
Seleo de elementos
Para selecionar um elemento visvel na janela Documento, clique no elemento ou arraste o ponteiro do mouse sobre ele.
Para selecionar um elemento invisvel, selecione Exibir > Auxlios visuais > Elementos invisveis (caso este item de
menu ainda no esteja selecionado) e clique no marcador do elemento na janela Documento.
Alguns objetos aparecem em um lugar da pgina diferente do local onde seu cdigo foi inserido. Por exemplo, na
Visualizao de design, um elemento de posicionamento absoluto (elemento AP) pode estar em qualquer lugar da
pgina, mas na Visualizao de cdigo, o cdigo que define o elemento AP estar em um local fixo. Quando os
elementos invisveis estiverem visveis, o Dreamweaver exibir os marcadores na janela Documento para mostrar
o local do cdigo desses elementos. A seleo de um marcador selecionar o elemento inteiro; por exemplo, a
seleo do marcador de um elemento AP selecionar o elemento AP inteiro.
Para selecionar uma tag completa (incluindo se contedo, se houver), clique em uma tag no seletor de tags na parte
inferior esquerda da janela Documento. (O seletor de tags exibido nas visualizaes de design e de cdigo.) O
seletor de tags sempre mostra as tags que contm a seleo atual ou o ponto de insero. A tag da extrema esquerda
a tag mais externa que contm a seleo atual ou o ponto de insero. A prxima tag est contida nessa tag mais
externa e assim sucessivamente. A tag da extrema direita a tag mais interna que contm a seleo atual ou o ponto
de insero.
No exemplo a seguir, o ponto de insero est em uma tag de pargrafo, <p>. Para selecionar a tabela que contm
o pargrafo a ser selecionado, selecione a tag <table> esquerda da tag <p>.
Nota: A exibio de elementos invisveis pode alterar um pouco o layout de uma pgina, movendo outros elementos em
alguns pixels. Portanto, para obter um layout preciso, oculte os elementos invisveis.
invisveis.
2 Selecione quais elementos devem ficar visveis e clique em OK.
Nota: Uma marca de seleo ao lado do nome do elemento na caixa de dilogo significa que o elemento estar visvel
quando Exibir > Auxlios visuais > Elementos invisveis for selecionado.
ncoras nomeadas Exibe um cone que marca o local de cada ncora nomeada (um nome = "") no documento.
Scripts Exibe um cone que marca o local do cdigo JavaScript ou VBScript no corpo do documento. Selecione o cone
Inspetor de propriedades.
Quebras de linha Exibe um cone que marca o local de cada quebra de linha (BR). Por padro, esta opo no
selecionada.
Mapas de imagem do cliente Exibe um cone que marca o local de cada mapa de imagens do cliente no documento.
Estilos incorporados Exibe um cone que mostra o local dos estilos CSS incorporados na seo body do documento.
Se os estilos CSS forem colocados na seo head de um documento, eles no aparecero na janela Documento.
Campos ocultos de formulrios Exibe um cone que marca o local dos campos de formulrios que possuem o atributo
type definido como "hidden".
Delimitador de formulrios Exibe uma borda ao redor de um formulrio, para que voc possa ver onde deve inserir os
elementos de formulrio. A borda mostra a extenso da tag form, para que quaisquer elementos de formulrio nessa
borda sejam corretamente delimitados nas tags form.
Pontos de ancoragem de elementos PA Exibe um cone que marca o local do cdigo que define um elemento PA. O
elemento PA pode estar em qualquer lugar da pgina. (Os elementos PA no so elementos invisveis. Somente o
cdigo que define o elemento PA estar invisvel.) Selecione o cone para selecionar o elemento PA. Depois disso, voc
poder ver o contedo do elemento PA, mesmo se ele estiver marcado como oculto.
Pontos de ancoragem de elementos alinhados Exibe um cone que mostra o local do cdigo HTML de elementos que
aceitam o atributo align. Esses elementos incluem imagens, tabelas, objetos ActiveX, plug-ins e applets. Em alguns
casos, o cdigo do elemento pode estar separado do objeto visvel.
Tags visuais de markup de servidores Exibe o local das tags de markup de servidores (como tags de Pginas ativas do
servidor e tags do ColdFusion) cujo contedo no pode ser exibido na janela Documento. Essas tags normalmente
geram tags HTML quando processadas por um servidor. Por exemplo, uma tag <CFGRAPH> gera uma tabela HTML
quando processada por um servidor ColdFusion. O Dreamweaver representa a tag com um elemento invisvel do
ColdFusion, pois o Dreamweaver no pode determinar a sada dinmica final da pgina.
Tags no visuais de markup de servidores Exibe o local das tags de markup de servidores (como tags de Pginas ativas
do servidor e tags do ColdFusion) cujo contedo no pode ser exibido na janela Documento. Essas tags so
normalmente tags lgicas, de configurao ou de processamento (por exemplo, <CFSET>, <CFWDDX> e <CFXML>)
que no geram tags HTML.
Exibio CSS: Nenhum Exibe um cone que mostra o local do contedo oculto pela propriedade display:none na folha
de estilos vinculada ou incorporada.
Mostrar texto dinmico como Por padro, exibe um texto dinmico na pgina no formato {Recordset:Field}. Se esses
valores forem muito extensos a ponto de distorcer a formatao da pgina, altere a exibio para {}.
Incluses do servidor Exibe o contedo real de cada arquivo de incluso do servidor.
Um motivo para o uso da paleta de cores aceitas pela Web o desenvolvimento de dispositivos alternativos da Web,
como PDA e visores de telefone celular. Muitos desses dispositivos oferecem apenas visores em preto-e-branco (1 bpc)
ou visores de 256 cores (8 bpc).
As paletas Cubos de cor (padro) Tom contnuo do Dreamweaver usam a paleta de 216 cores aceitas pela Web. A
seleo de uma cor nessas paletas exibe o valor hexadecimal da cor.
Para selecionar uma cor fora do intervalo de cores aceitas pela Web, abra o seletor de cores do sistema clicando no
boto Roda de cores no canto superior direito do seletor de cores do Dreamweaver. O seletor de cores do sistema no
se limita s cores aceitas pela Web.
As verses UNIX do Netscape Navigator usam uma paleta de cores diferente da oferecida pelas verses do Windows
e Macintosh. Se voc estiver desenvolvendo dispositivos exclusivamente para navegadores UNIX (ou se seu pblicoalvo for usurios do Windows ou Macintosh com monitores de 24 bpc e usurios do UNIX com monitores de 8 bpc),
recomenda-se o uso de valores hexadecimais que combinam os pares 00, 40, 80, BF, ou FF, que produzem cores aceitas
pela Web para SunOS.
Use o conta-gotas para selecionar uma amostra de cores na paleta. Todas as cores das paletas Cubos de cor (padro)
ou Tom contnuo so aceitas pela Web; as outras paletas no.
Use o conta-gotas para selecionar uma cor em qualquer lugar da tela, mesmo que seja fora das janelas do
Dreamweaver. Para selecionar uma cor na rea de trabalho ou em outro aplicativo, mantenha pressionado o boto
do mouse. Isso permitir que o conta-gotas retenha o foco e selecione uma cor fora do Dreamweaver. Se voc clicar
na rea de trabalho ou em outro aplicativo, o Dreamweaver selecionar a cor em que voc clicou. No entanto, se
voc alternar para outro aplicativo, talvez seja necessrio clicar em uma janela do Dreamweaver para continuar
trabalhando no Dreamweaver.
Para expandir a seleo de cor, use o menu pop-up no canto superior direito do seletor de cores. Voc pode
selecionar Cubos de cor, Tom contnuo, SO Windows, Mac OS e Tons de cinza.
Nota: As paletas Cubos de cor e Tom contnuo so aceitas pela Web, ao passo que SO Windows, Mac OS e Tons de cinza no.
Para limpar a cor atual sem escolher outra cor, clique no boto Cor padro
Para abrir o seletor de cores do sistema, clique no boto Roda de cores
Clique no ponto da pgina que voc deseja ampliar at obter a ampliao desejada.
Arraste uma caixa sobre a rea da pgina que voc deseja ampliar e libere o boto do mouse.
Selecione um nvel de ampliao predefinido no menu pop-up Zoom.
Digite um nvel de ampliao na caixa de texto Zoom.
Voc tambm pode aplicar mais zoom sem usar a ferramenta Zoom. Para isso, pressione Control+= (Windows) ou
Command+= (Macintosh).
3 Para aplicar menos zoom (reduzir a ampliao), selecione a ferramenta Zoom, pressione Alt (Windows) ou Option
dentro da pgina.
exemplo, talvez seja necessrio que os visitantes acessem uma pgina caso tenham o Netscape Navigator 4.0 ou
posterior, acessem outra pgina caso tenham o Microsoft Internet Explorer 4.0 ou posterior, e permaneam na pgina
atual caso tenham outro tipo de navegador.
Verificar plug-in Envia os visitantes para pginas diferentes de acordo com o plug-in instalado. Por exemplo, talvez
seja necessrio que os visitantes acessem uma pgina caso eles tenham o Shockwave e outra pgina caso no tenham.
Atalho de teclado
Colar
Control+V (Windows)
Command+V (Macintosh)
Colar especial
Control+Shift+V (Windows)
Command+Shift+V (Macintosh)
Selecione o nome do caractere no submenu Inserir > HTML > Caracteres especiais.
Na categoria Texto do painel Inserir, clique no boto Caracteres e selecione o caractere no submenu.
H vrios outros caracteres especiais disponveis. Para selecionar um deles, selecione Inserir > HTML > Caracteres
especiais > Outros ou clique no boto Caracteres, na categoria Texto do painel Inserir e selecione a opo Outros
caracteres. Selecione um caractere na caixa de dilogo Inserir outro caractere e clique em OK.
Selecione Inserir > HTML > Caracteres especiais > Espao no-separvel.
Pressione Control+Shift+Barra de espaos (Windows) ou Option+Barra de espaos (Macintosh).
Na categoria Texto do painel Inserir, clique no boto Caracteres e selecione o cone Espao no-separvel.
procedimentos:
No Inspetor de propriedades HTML, clique no boto Lista com marcadores ou Lista numerada.
Selecione Formatar > Lista e, em seguida, selecione o tipo de lista desejado: Lista no-ordenada (com marcadores),
Lista ordenada (numerada) ou Lista de definio.
O caractere esquerda do item de lista especificado aparece na janela Documento.
2 Digite o texto do item de lista e pressione Enter (Windows) ou Return (Macintosh) para criar outro item de lista.
3 Para concluir a lista, pressione Enter duas vezes (Windows) ou pressione Return duas vezes (Macintosh).
Formatar > Lista e selecione o tipo de lista desejado: Lista no-ordenada, Lista ordenada ou Lista de definio.
O Dreamweaver recua o texto e cria uma lista separada com os atributos HTML da lista original.
3 Aplique um novo estilo ou tipo de lista ao texto recuado seguindo o mesmo procedimento usado acima.
tipo de lista exibido no menu Tipo de lista. Por exemplo, se o menu Item de lista exibir Lista com marcadores, somente
as opes de marcador estaro disponveis no menu Novo estilo.
Redefinir contagem para Define um nmero especfico a partir do qual as entradas de item de lista sero numeradas.
Todo o site local atual Expande a pesquisa para todos os documentos HTML, arquivos de biblioteca e documentos de
usando esta opo, mas a pesquisa Tag especfica oferece uma abordagem mais flexvel para a procura de tags.
Texto Procura seqncias de texto especficas no texto do documento. Uma pesquisa de texto ignora qualquer HTML
que interrompe a seqncia de caracteres. Por exemplo, a procura de o co preto retornaria o co preto e o co
<i>preto</i>.
Texto (avanado) Procura seqncias de texto especficas que estejam ou no dentro de uma ou mais tags. Por
exemplo, em um documento que contenha o HTML a seguir, se voc procurar tenta e especificar Fora da tag e a tag
i, somente a segunda ocorrncia da palavra tenta ser localizada: Joo <i>tenta</i> terminar o trabalho no
tempo estipulado, mas nem sempre consegue. Ele tenta com afinco. .
Tag especfica Procure tags, atributos e valores de atributo especficos, como todas as tags td com valign definido
como top.
Nota: A combinao de teclas Control+Enter ou Shift+Enter (Windows), ou Control+Return, Shift+Return ou
Command+Return (Macintosh) adicionar quebras de linha nos campos de pesquisa de texto, permitindo que voc
procure um caractere de retorno. Ao realizar uma pesquisa desse tipo, desmarque a opo Ignorar diferenas de espaos
em branco, caso no esteja usando expresses regulares. Essa pesquisa localiza um caractere de retorno especfico, e no
simplesmente a ocorrncia de uma quebra de linha. Por exemplo, ela no localiza uma tag <br> ou <p>. Os caracteres
de retorno aparecem como espaos na Visualizao de design, e no como quebras de linha.
5 Use as opes a seguir para expandir ou limitar a pesquisa:
Coincidir maiscula/minscula Limita a pesquisa ao texto que corresponde exatamente ao uso de maiscula ou
minscula que voc deseja localizar. Por exemplo, se voc procurar brown derby, no encontrar Brown Derby.
Ignorar espao em branco Trata todos os espaos em branco como um nico espao para fins de correspondncia. Por
texto, mas no estetexto.
exemplo, com esta opo selecionada, este texto retornar este texto e este
Esta opo no estar disponvel quando a opo Utilizar expresses regulares estiver selecionada. Escreva
explicitamente a expresso regular para ignorar o espao em branco. Observe que as tags <p> e <br> no contam como
espao em branco.
Coincidir palavra inteira Limita a pesquisa ao texto que corresponde a uma ou mais palavras completas.
Nota: O uso desta opo o mesmo que procurar uma seqncia de pesquisa que inicia e termina com \b, atravs de
uma pesquisa de expresso regular, a expresso regular de limite de palavras.
Utilizar expresses regulares Faz com que determinados caracteres e seqncias de caracteres curtas (como ?, *, \w e
\b) da seqncia de pesquisa sejam interpretados como operadores de expresso regular. Por exemplo, a procura de o
co p\w*\b retornaria o co preto e o co peralta.
Nota: Se voc estiver trabalhando na Visualizao de cdigo e fizer alteraes no documento, e tentar localizar e
substituir algo que no seja o cdigo-fonte, uma caixa de dilogo aparecer informando que o Dreamweaver est
sincronizando as duas visualizaes antes de realizar a pesquisa.
6 Para realizar a pesquisa sem substituir, clique em Localizar prximo ou Localizar tudo:
Localizar prximo Seleciona a prxima ocorrncia do texto de pesquisa ou as tags no documento atual. Se no houver
mais ocorrncias da tag no documento atual, o Dreamweaver ir para o prximo documento, caso voc esteja
realizando a pesquisa em mais de um documento.
Localizar tudo Abre o painel Pesquisa no grupo de painis Resultados. Se voc estiver pesquisando um nico
documento, o recurso Localizar tudo exibir todas as ocorrncias do texto de pesquisa ou das tags, com algum contexto
delimitado. Se voc estiver pesquisando um diretrio ou site, o recurso Localizar tudo exibir uma lista dos
documentos que contm a tag.
7 Para substituir o texto localizado ou as tags, clique em Substituir ou Substituir tudo.
8 Quando terminar, clique em Fechar.
Se voc estiver pesquisando o arquivo atual, a janela documento exibir a linha que contm esse resultado de pesquisa.
Se voc estiver pesquisando um conjunto de arquivos, o arquivo que contm esse resultado de pesquisa ser aberto.
No contendo Especifica um texto ou uma tag que no deve estar contido na tag original.
Dentro da tag Especifica uma tag na qual a tag de destino deve estar contida.
Fora da tag Especifica uma tag na qual a tag de destino no deve estar contida.
5 (Opcional.) Para limitar ainda mais a pesquisa, clique no boto de adio (+) e repita a etapa 3.
6 Se voc no tiver aplicado nenhum modificador de tag nas etapas 3 e 4, clique no boto de subtrao (-) para
7 Para executar uma ao quando a tag for encontrada (como remover ou substituir a tag), selecione a ao no menu
No contendo Especifica um texto ou uma tag que no deve estar contido na tag original.
Dentro da tag Especifica uma tag na qual a tag de destino deve estar contida.
Fora da tag Especifica uma tag na qual a tag de destino no deve estar contida.
Nota: Quando voc colar texto em um documento do Dreamweaver, use o comando Colar ou Colar especial. O comando
Colar especial permite especificar o formato do texto colado de diferentes formas. Por exemplo, se voc deseja colar texto
de um documento formatado do Microsoft Word no documento do Dreamweaver, mas deseja retirar toda a formatao
para que possa aplicar sua prpria folha de estilos CSS ao texto colado, selecione texto no Word, copie-o para a rea de
transferncia e use o comando Colar especial para selecionar a opo que permite colar apenas texto.
Nota: As preferncias definidas na caixa de dilogo Preferncias de cpia/colagem se aplicam apenas ao material colado
na Visualizao de design.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2 Clique na categoria Copiar/colar.
3 Defina as opes a seguir e clique em OK.
Apenas texto Permite que voc cole texto sem formatao. Se o texto original estiver formatado, toda a formatao,
estilos CSS.
Nota: A opo Formatao integral no pode reter estilos CSS provenientes de uma folha de estilos externa nem reter
estilos caso o aplicativo do qual voc esteja colando os dados no retenha estilos aps a colagem para a rea de
transferncia.
Reter quebras de linha Permite manter quebras de linha no texto colado. Esta opo estar desativada se voc tiver
selecionado Apenas texto.
Limpar espaamento de pargrafo do Word Selecione esta opo se tiver selecionado Texto com estrutura ou Texto
com estrutura e formatao bsica, e deseje eliminar espao extra entre pargrafos ao colar o texto.
Quando o Dreamweaver encontrar uma palavra no reconhecida, a caixa de dilogo Verificar ortografia ser
exibida.
2 Selecione a opo apropriada baseado na maneira como voc deseja lidar com a discrepncia.
Adicionar a pessoal Adiciona uma palavra no reconhecida ao seu dicionrio pessoal.
Ignorar Ignora esta ocorrncia da palavra no reconhecida.
Alterar Substitui esta ocorrncia da palavra no reconhecida pelo texto digitado na caixa de texto Alterar para ou
pela seleo da lista Sugestes.
Ignorar tudo Ignora todas as ocorrncias da palavra no reconhecida.
Alterar tudo Substitui todas as ocorrncias da palavra no reconhecida da mesma maneira.
Nota: O Dreamweaver no fornece um modo de excluir entradas que foram adicionadas aos dicionrios pessoais.
tabulares.
2 Procure o arquivo desejado ou digite o nome dele na caixa de texto.
3 Selecione o delimitador usado quando o arquivo foi salvo como texto delimitado. As opes disponveis so
Arraste o arquivo de seu local atual para a pgina em que o contedo deve aparecer.
Selecione Arquivo > Importar > Documento do Word ou Arquivo > Importar > Documento do Excel.
3 Na caixa de dilogo Inserir documento, v at o arquivo desejado, selecione qualquer opo de formatao no menu
Agora a pgina contm um link para o documento do Word ou Excel. O texto do link o nome do arquivo vinculado.
Voc pode alterar o texto do link na janela Documento se desejar.
O uso da CSS uma maneira de controlar o estilo de uma pgina da Web sem comprometer sua estrutura. Ao separar
elementos de design visual (fontes, cores, margens etc.) da lgica estrutural de uma pgina da Web, a CSS proporciona
aos designers da Web controle visual e tipogrfico sem sacrificar a integridade do contedo. Alm disso, a definio
do design tipogrfico e do layout da pgina em um bloco de cdigo nico e distinto sem precisar recorrer a mapas
de imagem, tags font, tabelas e GIFs de espaador permite downloads mais rpidos, manuteno otimizada de sites
e um ponto central a partir do qual os atributos de design sero controlados nas vrias pginas da Web.
No possvel armazenar estilos criados com CSS diretamente no documento ou, para mais eficincia e flexibilidade,
voc pode armazenar estilos em uma folha de estilos externa. Se voc anexar uma folha de estilos externa a vrias pginas
da Web, todas as pginas refletiro automaticamente todas as alteraes feitas na folha de estilos. Para acessar todas as
regras CSS de uma pgina, use o painel Estilos CSS (Janela > Estilos CSS). Para acessar as regras que se aplicam a uma
seleo atual, use o painel Estilos CSS (modo Atual) ou o menu pop-up Regra-alvo no Inspetor de propriedades CSS.
Se preferir, use tags de markup HTML para formatar o texto em suas pginas da Web. Para usar tags HTML em vez
de CSS, formate o texto usando o Inspetor de propriedades HTML.
Nota: possvel combinar a formatao CSS e a formatao HTML 3.2 em uma mesma pgina. A formatao aplicada
de forma hierrquica: a formatao HTML 3.2 substitui a formatao aplicada pelas folhas de estilos CSS externa,
enquanto a CSS incorporada no documento substitui a CSS externa.
Coloque o ponto de insero dentro do bloco de texto que foi formatado por uma regra que voc queira editar. A
regra exibida no menu pop-up Regra-alvo.
pop-up Regra-alvo e clicar no boto Editar regra, o Dreamweaver abrir a caixa de dilogo de definio Nova regra
CSS em vez disso.
Painel CSS Abre o painel de estilos CSS e exibe as propriedades da regra-alvo na visualizao Atual.
Fonte Altera a fonte da regra-alvo.
Tamanho Define o tamanho de fonte da regra-alvo.
Cor do texto Define a cor selecionada como a cor da fonte na regra-alvo. Selecione uma cor aceita pela Web clicando
na caixa de cores ou digite um valor hexadecimal (por exemplo, #FF0000) no campo de texto adjacente.
Negrito Adiciona a propriedade de negrito regra-alvo.
Itlico Adiciona a propriedade de itlico regra-alvo.
Alinhar esquerda, Centralizar e Alinhar direita Adiciona as respectivas propriedades de alinhamento regra-alvo.
Nota: As propriedades Fonte, Tamanho, Cor do texto, Negrito, Itlico e Alinhamento sempre exibem as propriedades da
regra que se aplica seleo atual na janela Documento. Quando voc alterar alguma dessas propriedades, afetar a
regra-alvo.
Para assistir a um tutorial em vdeo sobre como trabalhar com o Inspetor de propriedades CSS, consulte
www.adobe.com/go/lrvid4041_dw_br.
Negrito Aplica <b> ou <strong> ao texto selecionado de acordo com a preferncia de estilo definida na categoria
Geral da caixa de dilogo Preferncias.
Itlico Aplica <i> ou <em> ao texto selecionado de acordo com a preferncia de estilo definida na categoria Geral da
removendo a tag blockquote. Em uma lista, o recuo cria uma lista aninhada e a remoo do recuo desaninha a lista.
Link Cria um link de hipertexto do texto selecionado. Clique no cone de pasta para acessar um arquivo no site; digite
o URL; arraste o cone Apontar para arquivo para um arquivo no painel Arquivos ou arraste um arquivo do painel
Arquivos para a caixa.
Ttulo Especifica a dica de ferramenta de texto para um link de hipertexto.
Alvo Especifica o quadro ou a janela em que o documento vinculado ser carregado:
_parent carrega o arquivo vinculado em um conjunto de quadros pai ou na janela do quadro que contm o link.
Se o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador
em tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Este alvo est implcito; portanto, voc
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
Formatao de pargrafos
Use o menu pop-up Formatar, no Inspetor de propriedades HTML, ou o submenu Formatar > Formato do pargrafo
para aplicar as tags padro de pargrafo e cabealho.
1 Coloque o ponto de insero no pargrafo ou selecione algum texto no pargrafo.
2 Usando o submenu Formatar > Formato do pargrafo ou o menu pop-up Formatar, no Inspetor de propriedades;
Selecione um formato de pargrafo (por exemplo, Cabealho 1, Cabealho 2, Texto pr-formatado etc.) A tag
HTML associada ao estilo selecionado (por exemplo, h1 para Cabealho 1, h2 para Cabealho 2, pre para Texto
pr-formatado etc.) aplicada ao pargrafo inteiro.
Alinhamento do texto
possvel alinhar o texto com HTML, usando o submenu Formatar > Alinhar. Voc pode centralizar qualquer
elemento em uma pgina usando o comando Formatar > Alinhar > Centralizar.
Alinhamento de texto em uma pgina
1 Selecione o texto que voc deseja alinhar ou simplesmente insira o ponteiro no incio do texto.
2 Selecione Formatar > Alinhar e escolha um comando de alinhamento.
Nota: Voc pode alinhar e centralizar blocos de texto completos. No possvel alinhar ou centralizar parte de um
cabealho ou pargrafo.
Recuo do texto
O uso do comando Recuar aplica a tag HTML blockquote a um pargrafo de texto, recuando o texto em ambos os
lados da pgina.
1 Coloque o ponto de insero no pargrafo que voc deseja recuar.
2 Selecione Formatar > Recuar ou Diminuir recuo, ou selecione Lista > Recuar ou Diminuir recuo, no menu de
contexto.
Nota: Voc pode aplicar vrios recuos a um pargrafo. Cada vez que voc seleciona este comando, o texto recua em
ambos os lados do documento.
Para alterar a fonte, selecione uma combinao de fonte no submenu Formatar > Fonte. Selecione Padro para
remover as fontes aplicadas anteriormente. A opo Padro aplica a fonte padro ao texto selecionado (a fonte
padro do navegador ou a fonte atribuda a essa tag na folha de estilos CSS).
Para alterar o estilo da fonte, selecione um estilo de fonte (negrito, itlico, sublinhado etc.) no submenu Formatar
> Estilo.
desejado:
A caixa de texto de ID Permite que voc especifique uma ID para a rgua horizontal.
L e A Especifica a largura e a altura da rgua em pixels ou como uma porcentagem do tamanho da pgina.
Alinhar Especifica o alinhamento da rgua (Padro, esquerda, Centralizar ou direita). Esta configurao se
aplicar somente se a largura da rgua for menor que a largura da janela do navegador.
Sombreado Especifica se a rgua desenhada com sombreado. Desmarque esta opo para desenhar a rgua em uma
cor slida.
Classe Permite que voc anexe uma folha de estilos ou aplique uma classe a partir de uma folha de estilos j anexada.
As fontes da combinao selecionada so relacionadas na lista Fontes escolhidas, no canto inferior esquerdo da caixa
de dilogo. direita, fornecida uma lista de todas as fontes disponveis instaladas no sistema.
3 Siga um destes procedimentos:
Para adicionar ou remover fontes de uma combinao de fontes, clique no boto de setas (<< ou >>) entre as listas
Fontes escolhidas e Fontes disponveis.
Para adicionar ou remover uma combinao de fontes, clique nos botes de adio (+) e subtrao () na parte
superior da caixa de dilogo.
Para adicionar uma fonte no instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes
disponveis e clique no boto << para adicion-la combinao. A adio de uma fonte no instalada no sistema
til, por exemplo, para especificar uma fonte somente para Windows quando voc est desenvolvendo pginas em
um Macintosh.
Para mover a combinao de fontes para cima ou para baixo na lista, clique nos botes de seta na parte superior da
caixa de dilogo.
2 Selecione uma fonte na lista Fontes disponveis e clique no boto << para mover a fonte para a lista Fontes
escolhidas.
3 Repita a etapa 2 para cada fonte subseqente da combinao.
Para adicionar uma fonte no instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes
disponveis e clique no boto << para adicionar a fonte combinao. A adio de uma fonte no instalada no sistema
til, por exemplo, para especificar uma fonte somente para Windows quando voc est desenvolvendo pginas em
um Macintosh.
4 Quando terminar de selecionar fontes especficas, selecione uma famlia de fontes genrica no menu Fontes
disponveis e clique no boto << para mover a famlia de fontes genrica para a lista Fontes escolhidas.
As famlias de fontes genricas incluem cursiva, decorativa, monoespaada, sem serifas e com serifas. Se nenhuma das
fontes da lista Fontes escolhidas estiver disponvel no sistema do usurio, o texto aparecer na fonte padro associada
famlia de fontes genrica. Por exemplo, a fonte monoespaada padro da maioria dos sistemas Courier.
Insero de datas
O Dreamweaver oferece um objeto de data conveniente, que insere a data atual no formato de sua preferncia (com
ou sem a hora) e permite a atualizao da data sempre que voc salva o arquivo.
Nota: As datas e horas mostradas na caixa de dilogo Inserir data no so atuais nem refletem as datas/horas que um
visitante v quando exibe o site. Elas so apenas exemplos da maneira como voc deseja exibir essas informaes.
1 Na janela Documento, coloque o ponto de insero no local em que deseja inserir a data.
2 Siga um destes procedimentos:
automaticamente ao salvar. Se voc deseja que a data fique sem formatao quando for inserida e nunca seja
atualizada automaticamente, desmarque essa opo.
5 Clique em OK para inserir a data.
Se voc tiver selecionado Atualizar automaticamente ao salvar, poder editar o formato de data aps ele ter sido
inserido no documento, clicando no texto formatado e selecionando Editar formato de data no Inspetor de
propriedades.
Os arquivos PNG so mais adequados para quase todos os tipos de grficos da Web devido sua flexibilidade e ao seu
menor tamanho de arquivo. No entanto, a exibio de imagens PNG so apenas parcialmente aceitas no Microsoft
Internet Explorer (navegadores 4.0 e posteriores) e no Netscape Navigator (navegadores 4.04 e posteriormente).
Portanto, a menos que voc esteja criando grficos para um pblico-alvo especfico que use um navegador com suporte
ao formato PNG, use GIFs ou JPEGs para maior acessibilidade.
GIF (Graphic Interchange Format) Os arquivos GIF usam um mximo de 256 cores e so mais adequados para a
exibio de imagens em tom no-contnuo ou imagens grandes de cores simples, como barras de navegao, botes,
cones, logotipos ou outras imagens com cores e tons uniformes.
JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG o formato preferido para imagens fotogrficas
ou em tom contnuo, pois os arquivos JPEG podem conter milhes de cores. medida que a qualidade de um arquivo
JPEG aumenta, tambm aumentam o tamanho e o tempo de download do arquivo. Voc geralmente consegue um
bom equilbrio entre a qualidade da imagem e o tamanho do arquivo compactando um arquivo JPEG.
PNG (Portable Network Group) O formato de arquivo PNG um substituto sem patentes para GIFs que inclui suporte
a imagens true-color, em tons de cinza e de cores indexadas, alm de suporte a canal alfa para transparncia. PNG o
formato de arquivo nativo do Adobe Fireworks. Os arquivos PNG retm todas as informaes originais de camada,
vetor, cor e efeitos (como sombras) e todos os elementos so completamente editveis, continuamente. Os arquivos
devem ter a extenso .png para serem reconhecidos como arquivos PNG pelo Dreamweaver.
procedimentos:
Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem. Com o cone Imagem
exibido no painel Inserir, arraste-o para a janela Documento (ou a janela Visualizao de cdigo, caso voc esteja
trabalhando no cdigo).
Clique no boto Sites e servidores para escolher um arquivo de imagem em uma pasta remota de um dos sites do
Dreamweaver.
3 Navegue para selecionar a origem da imagem ou do contedo que deseja inserir.
Se voc estiver trabalhando em um documento no salvo, o Dreamweaver gerar uma referncia file:// para o arquivo
de imagem. Quando voc salva o documento em qualquer lugar do site, o Dreamweaver converte a referncia em um
caminho relativo a documento.
Nota: Durante a insero de imagens, possvel usar um caminho absoluto para uma imagem que reside em um servidor
remoto (ou seja, uma imagem que no esteja disponvel no disco rgido local). No entanto, se voc tiver problemas de
desempenho enquanto estiver trabalhando, talvez seja necessrio desativar a exibio da imagem na Visualizao de
design, desmarcando Comandos > Exibir arquivos externos.
4 Clique em OK. A caixa de dilogo Atributos de acesso a tag de imagem aparecer ser voc tiver ativado a caixa de
Na caixa Texto alternativo, digite um nome ou uma breve descrio para a imagem. O leitor de tela l as
informaes que voc digita aqui. Voc deve limitar a entrada a aproximadamente 50 caracteres. Em descries
mais longas, recomendvel fornecer um link, na caixa de texto Descrio longa, para um arquivo que fornea mais
informaes sobre a imagem.
Na caixa Descrio longa, digite o local de um arquivo que ser exibido quando o usurio clicar na imagem ou
clique no cone de pasta para navegar at o arquivo. Esta caixa de texto fornece um link para um arquivo
relacionado imagem ou fornece mais informaes sobre a imagem.
Nota: Voc pode digitar informaes em uma ou em ambas as caixas de texto, se necessrio. O leitor de tela l o atributo
Alt da imagem.
Nota: Se voc clicar em Cancelar, a imagem aparecer no documento, mas o Dreamweaver no associar tags ou
atributos de acessibilidade a ela.
6 No Inspetor de propriedades (Janela > Propriedades), defina as propriedades da imagem.
1 Selecione Janela > Propriedades para exibir o Inspetor de propriedades de uma imagem selecionada.
2 Na caixa de texto abaixo da imagem em miniatura, digite um nome com o qual voc se referir imagem ao usar
um comportamento do Dreamweaver (como Trocar imagem) ou ao usar uma linguagem de script como JavaScript
ou VBScript.
3 Defina qualquer uma das opes de imagem.
L e A A largura e a altura da imagem, em pixels. O Dreamweaver atualiza automaticamente essas caixas de texto com
as dimenses originais da imagem quando voc insere uma imagem em uma pgina.
Se voc definir valores L e A que no correspondam largura e altura reais da imagem, esta pode no ser exibida
corretamente em um navegador. (Para restaurar os valores originais, clique nos rtulos de caixa de texto L e A ou no
boto Redefinir tamanho da imagem exibido direita das caixas de texto L e A quando voc digita um novo valor.)
Nota: Voc pode alterar esses valores para dimensionar o tamanho de exibio desta ocorrncia da imagem, mas isso
no reduz o tempo de download, pois o navegador baixa todos os dados da imagem antes do seu dimensionamento. Para
reduzir o tempo de download e garantir que todas as ocorrncias de uma imagem aparecero do mesmo tamanho, use o
aplicativo de edio de imagens para dimensionar as imagens.
Origem Especifica o arquivo de origem da imagem. Clique no cone de pasta para navegar at o arquivo de origem ou
digite o caminho.
Link Especifica um hiperlink para a imagem. Arraste o cone Apontar para arquivo para um arquivo do painel
Arquivos, clique no cone de pasta para ir at um documento no site ou digite manualmente o URL.
Alinhar Alinha uma imagem e um texto na mesma linha.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos
navegadores que foram definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que
usam sintetizadores de fala com navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse
texto tambm aparece quando o ponteiro est sobre a imagem.
Ferramentas Nome do mapa e Ponto ativo Permite que voc identifique e crie um mapa de imagens do cliente.
Espao V e Espao H Adiciona espao, em pixels, ao longo das laterais da imagem. O recurso Espao V adiciona espao
ao longo das bordas superior e inferior de uma imagem. O recurso Espao H adiciona espao esquerda e direita de
uma imagem.
Destino Especifica o quadro ou a janela em que a pgina vinculada ser carregada. (Esta opo no est disponvel
quando a imagem no est vinculada a outro arquivo.) Os nomes de todos os quadros do conjunto de quadros atuais
aparecem na lista Destino. Voc tambm pode escolher entre os nomes de destino reservados:
_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se
o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em
tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no
necessrio especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
imagem.
Cortar
Nova amostra
Faz uma nova amostra de uma imagem redimensionada, aprimorando sua qualidade no seu novo
tamanho e forma.
Brilho e contraste
Nitidez
Redefinir tamanho
Redefine os valores L e A para o tamanho original da imagem. Este boto aparece direita das
caixas de texto L e A quando voc ajusta os valores da imagem selecionada.
Voc pode definir o alinhamento em relao a outros elementos no mesmo pargrafo ou linha.
Nota: O HTML no permite a insero de texto ao redor dos contornos de uma imagem, assim como em alguns editores
de texto.
As opes de alinhamento so as seguintes:
Padro Especifica um alinhamento da linha de base. (O padro pode variar de acordo com o navegador do visitante
do site.)
Linha de base e inferior Alinha a linha de base do texto (ou outro elemento no mesmo pargrafo) parte inferior do
objeto selecionado.
Superior Alinha a parte superior de uma imagem parte superior do item mais alto (imagem ou texto) na linha atual.
Meio Alinha a parte intermediria da imagem linha de base da linha atual.
Parte superior do texto Alinha a parte superior da imagem parte superior do caractere mais alto na linha de texto.
Absoluto ao meio Alinha a parte intermediria da imagem parte intermediria do texto na linha atual.
Absoluto abaixo Alinha a parte inferior da imagem parte inferior da linha de texto (que inclui descendentes, como
na letra g).
esquerda Coloca a imagem selecionada na margem esquerda, colocando automaticamente o texto ao redor dela
direita. Se o texto alinhado esquerda preceder o objeto na linha, ele geralmente far com que os objetos alinhados
esquerda passem para uma nova linha.
direita Coloca a imagem na margem direita, colocando automaticamente o texto ao redor do objeto esquerda. Se
o texto alinhado direita preceder o objeto na linha, ele geralmente far com que os objetos alinhados direita passem
para uma nova linha.
As alas de redimensionamento aparecem nos lados inferior e direito do elemento no canto inferior direito. Se as alas
de redimensionamento no aparecerem, clique em qualquer lugar que no seja o elemento que voc deseja
redimensionar e selecione-o novamente, ou clique na tag apropriada no seletor de tags para selecionar o elemento.
2 Redimensione o elemento executando um dos procedimentos a seguir:
Para ajustar a largura e a altura de um elemento para um tamanho especfico (por exemplo, 1 x 1 pixel), use o
Inspetor de propriedades para digitar um valor numrico. Os elementos podem ser visualmente redimensionados
em, no mnimo, 8 x 8 pixels.
3 Para retornar um elemento redimensionado s suas dimenses originais, no Inspetor de propriedades, exclua os
valores nas caixas de texto L e A ou clique no boto Redefinir tamanho no Inspetor de propriedades de imagem.
Nota: Voc no pode fazer uma nova amostra de alocadores de espao de imagem ou elementos que no sejam imagens
de bitmap.
de texto em branco caso no deseje que o rtulo aparea. O nome deve comear com uma letra e pode conter apenas
letras e nmeros. No so permitidos espaos e caracteres ASCII maisculos.
4 Em Largura e Altura (obrigatrio), digite um nmero para definir o tamanho da imagem em pixels.
5 Em Cor (opcional), siga um destes procedimentos para aplicar uma cor:
A cor, os atributos de tamanho e o rtulo do alocador de espao de imagem aparecem da seguinte maneira:
clique em OK.
No Inspetor de propriedades do alocador de espao, a caixa de texto cinza e a caixa de texto Alinhar esto desativadas.
Voc pode definir essas propriedades no Inspetor de propriedades de imagem ao substituir o alocador de espao por
uma imagem.
Defina uma das seguintes opes:
L e A Define a largura e a altura do alocador de espao de imagem, em pixels.
Origem Especifica o arquivo de origem da imagem. Em uma imagem de alocador de espao, esta caixa de texto aparece
vazia. Clique no boto Procurar para selecionar uma imagem substituta para o grfico de alocador de espao.
Link Especifica um hiperlink para o alocador de espao de imagem. Arraste o cone Apontar para arquivo para um
arquivo do painel Arquivos, clique no cone de pasta para ir at um documento no site ou digite manualmente o URL.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos
navegadores que foram definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que
usam sintetizadores de fala com navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse
texto tambm aparece quando o ponteiro est sobre a imagem.
Criar Inicia o Fireworks para criar uma imagem substituta. O boto Criar estar desativado, a menos que o Fireworks
correspondam ao mximo aparncia da imagem original. A nova amostra de uma imagem reduz seu tamanho de
arquivo e melhora o desempenho do download.
Ao redimensionar uma imagem no Dreamweaver, voc poder fazer uma nova amostra para acomodar suas novas
dimenses. Quando um objeto de bitmap submetido a uma nova amostra, os pixels so adicionados ou removidos
da imagem para torn-la maior ou menor. A nova amostra de uma imagem para uma resoluo mais alta geralmente
prejudica um pouco a qualidade. No entanto, a nova amostra para uma resoluo mais baixa, sempre ocasiona perda
de dados e geralmente uma diminuio da qualidade.
Cortar Edite imagens reduzindo a rea da imagem. Geralmente, voc precisar cortar uma imagem para dar mais
digitaliza uma imagem ou tira uma foto digital, a ao padro da maioria dos softwares de captura de imagem
suavizar as bordas dos objetos na imagem. Isso impede que os detalhes extremamente finos se percam nos pixels em
que as imagens digitais so compostas. No entanto, para ressaltar os detalhes nos arquivos de imagem digital,
geralmente necessrio ajustar a nitidez da imagem, aumentando o contraste da borda e tornando a imagem mais
ntida.
Nota: Os recursos de edio de imagens do Dreamweaver se aplicam somente aos formatos de arquivo de imagem JPEG
e GIF. Os outros formatos de arquivo de imagem bitmap no podem ser editados atravs desses recursos de edio de
imagens.
OK. Cada pixel do bitmap selecionado fora da caixa delimitadora ser removido, mas os outros objetos da imagem
permanecero.
5 Visualize a imagem e verifique se ela atende s suas expectativas. Se a resposta for negativa, selecione Editar >
digitando um valor entre 0 e 10 na caixa de texto. Ao ajustar a nitidez da imagem usando a caixa de dilogo Nitidez,
voc poder visualizar a alterao efetuada.
3 Clique em OK quando estiver satisfeito com a imagem.
4 Salve as alteraes selecionando Arquivo > Salvar ou reverta para a imagem original selecionando Editar > Desfazer
nitidez.
Nota: Voc s pode desfazer o efeito do comando Nitidez (e reverter para o arquivo de imagem original) antes de salvar
a pgina que contm a imagem. Depois que a pgina salva, as alteraes efetuadas na imagem so salvas
definitivamente.
a 100.
3 Clique em OK.
Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem de sobreposio. Com
o cone Imagem de sobreposio exibido no painel Inserir, voc pode arrastar o cone para a janela Documento.
Texto alternativo (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto.
Ao clicar, Ir para URL O arquivo que voc deseja abrir quando um usurio clica na imagem de sobreposio. Digite o
Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione
Tipos de arquivos/editores na lista Categoria esquerda.
Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos de arquivos/editores.
2 Na lista Extenses, selecione a extenso de arquivo para a qual voc deseja definir um editor externo.
3 Clique no boto Adicionar (+) acima da lista Editores.
4 Na caixa de dilogo Selecionar editor externo, navegue at o aplicativo que deseja iniciar como editor desse tipo de
arquivo.
5 Na caixa de dilogo Preferncias, clique em Tornar primrio caso deseje que esse editor seja o editor principal desse
tipo de arquivo.
6 Para configurar um editor adicional para esse tipo de arquivo, repita as etapas 3 e 4.
O Dreamweaver usar automaticamente o editor principal quando voc editar esse tipo de imagem. possvel
selecionar os outros editores listados no menu de contexto da imagem na janela Documento.
Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione
Tipos de arquivos/editores na lista Categoria esquerda.
Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos de arquivos/editores.
2 Na caixa de dilogo Preferncias de tipos de arquivos/editores, clique no boto Adicionar (+) acima da lista
Extenses.
Uma caixa de texto aparece na lista Extenses.
3 Digite a extenso do tipo de arquivo para o qual um editor ser iniciado.
4 Para selecionar um editor externo para o tipo de arquivo, clique em Adicionar (+) acima da lista Editores.
5 Na caixa de dilogo exibida, selecione o aplicativo que voc deseja usar para editar esse tipo de imagem.
6 Clique em Tornar primrio caso deseje que este editor seja o editor principal para o tipo de imagem.
Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione
Tipos de arquivos/editores na lista Categoria esquerda.
Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos de arquivos/editores.
2 Na caixa de dilogo Preferncias de tipos de arquivos/editores, na lista Extenses, selecione o tipo de arquivo que
Clique nos botes Adicionar (+) ou Excluir () acima da lista Editores para adicionar ou remover um editor.
Clique no boto Tornar primrio para alterar qual editor ser iniciado por padro na edio.
por comportamentos, elementos PA ou JavaScript) no cache de navegador. Isso evita atrasos ocasionados por
download quando as imagens devem aparecer.
Trocar imagem Troca uma imagem por outra alterando o atributo SRC da tag img. Use esta ao para criar
sobreposies de boto e outros efeitos de imagem (incluindo a troca de mais de uma imagem simultaneamente).
Restaurar imagem trocada Restaura o ltimo conjunto de imagens trocadas para os arquivos de origem anteriores.
Esta ao adicionada automaticamente sempre que voc anexa a ao Trocar imagem a um objeto por padro. Voc
nunca precisar selecion-la manualmente.
Voc tambm pode usar comportamentos para criar sistemas de navegao mais sofisticados, como menus de salto.
arquivo s pode ser aberto no Flash (e no no Dreamweaver ou nos navegadores). Voc pode abrir o arquivo FLA no
Flash e, em seguida, export-lo como um arquivo SWF ou SWT a ser usado nos navegadores.
O arquivo SWF (.swf) Uma verso compilada do arquivo FLA (.fla), otimizada para visualizao na Web. Esse arquivo
pode ser reproduzido nos navegadores e visualizado no Dreamweaver, mas no pode ser editado no Flash.
O arquivo FLV (.flv) Um arquivo de vdeo que contm udio codificado e dados de vdeo para envio atravs do Flash
Player. Por exemplo, se voc tivesse um arquivo de vdeo do QuickTime ou Windows Media, usaria um decodificador
(como o Flash CS4 Video Encoder ou o Sorensen Squeeze) para converter o arquivo de vdeo em arquivo FLV. Para
obter mais informaes, visite o Video Technology Center em www.adobe.com/go/flv_devcenter_br.
O alocador de espao possui um contorno azul com abas. A aba indica o tipo de ativo (arquivo SWF) e a ID do arquivo
SWF. A aba tambm exibe um cone de olho. Atua para alternar entre o arquivo SWF e as informaes de download
que os usurios vem quando no esto com a verso correta do Flash Player.
3 Salve o arquivo.
O Dreamweaver informa que dois arquivos dependentes, expressInstall.swf e swfobject_modified.js, esto sendo
salvos na pasta Scripts do seu site. No esquea de carregar esses arquivos quando voc carregar o arquivo SWF para
o servidor Web. Navegadores no podem exibir adequadamente os arquivos SWF, a menos que voc tambm carregue
esses arquivos dependentes.
Nota: O Microsoft Internet Information Server (IIS) no processa tags de objeto aninhado. Para as pginas ASP, o
Dreamweaver usa o objeto aninhado/cdigo incorporado em vez do cdigo do objeto aninhado ao inserir arquivos SWF
ou FLV.
Voc tambm pode pressionar Control + ] para alternar entre a visualizao alternativa do contedo. Para retornar
visualizao de SWF/FLV, pressione Control + [ at que todo o contedo alternativo seja selecionado. Em seguida,
pressione novamente Control + [.
3 Edite o contedo como voc editaria qualquer outro contedo no Dreamweaver.
Nota: Voc no pode adicionar arquivos SWF ou FLV como contedo alternativo.
4 Clique novamente no cone de olho para retornar visualizao do arquivo SWF (ou FLV).
a visualizao. Voc tambm pode visualizar o arquivo SWF em um navegador pressionando F12.
Para visualizar todos os arquivos SWF em uma pgina, pressione Control+Alt+Shift+P (Windows) ou
Command+Option+Shift+P (Macintosh). Todos os arquivos SWF sero definidos como Reproduzir.
Propriedades). Para ver todas as propriedades, clique na seta de expanso no canto inferior direito do Inspetor de
propriedades.
ID Especifica um ID exclusivo para o arquivo SWF. Digite um ID na caixa de texto sem rtulo no lado esquerdo do
Inspetor de propriedades. Como com o Dreamweaver CS4, necessrio um ID exclusivo.
L e A Especifica a largura e a altura do filme, em pixels.
Arquivo Especifica o caminho para o arquivo SWF ou filme Shockwave. Clique no cone de pasta para navegar at um
arquivo ou digite um caminho.
Origem Especifica o caminho para um documento de origem (o arquivo FLA), quando o Dreamweaver e o Flash
estiverem instalados no computador. Para editar um arquivo SWF, atualize o documento de origem do filme.
Fundo Especifica uma cor de fundo para a rea do filme. Esta cor tambm aparece enquanto o filme no est sendo
e pra.
Execuo automtica Executa automaticamente o filme quando a pgina carregada.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do filme.
Qualidade Controla a suavizao durante a reproduo do filme. Configuraes altas melhoram a aparncia de filmes.
Entretanto, filmes com configuraes altas requerem um processador mais rpido para processar corretamente a tela.
A configurao baixa favorece a velocidade em relao aparncia, enquanto a configurao alta favorece a aparncia
em detrimento da velocidade. A configurao Baixa automtica inicialmente enfatiza a velocidade, mas melhora a
aparncia quando possvel. Inicialmente, a configurao Alta automtica enfatiza igualmente as duas qualidades, mas
sacrifica a aparncia em detrimento da velocidade, se necessrio.
Escala Determina como o filme se ajusta s dimenses definidas nas caixas de texto de largura e altura. A configurao
O Dreamweaver insere o componente SWF que exibe o arquivo FLV; quando visualizado em um navegador, esse
componente exibe o arquivo FLV selecionado, bem como um conjunto de controles de reproduo.
O Dreamweaver oferece as seguintes opes para enviar vdeo FLV aos visitantes do site:
Vdeo de download progressivo Baixa o arquivo FLV no disco rgido do visitante do site e o reproduz. No entanto,
diferente dos mtodos baixar e reproduzir de envio de vdeo, o download progressivo permite que o arquivo de vdeo
comece a reproduo antes que o download seja concludo.
Vdeo de fluxo contnuo Transmite o contedo do vdeo e o reproduz em uma pgina da Web aps um curto perodo
de buffer que garante a reproduo contnua. Para ativar o vdeo de fluxo contnuo nas pginas da Web, acesse o
Adobe Flash Media Server.
Voc deve ter um arquivo FLV codificado para que possa us-lo no Dreamweaver. possvel inserir os arquivos de
vdeo criados com dois tipos de codecs (tecnologias de compactao/descompactao): Sorenson Squeeze e On2.
Como com arquivos SWF normais, quando voc insere um arquivo FLV, o Dreamweaver insere um cdigo que
detecta se o usurio possui a verso correta do Flash Player para visualizar o vdeo. Se o usurio no tiver a verso
correta, a pgina exibe o contedo alternativo que informa o usurio para baixar a verso mais recente do Flash Player.
Nota: Para visualizar arquivos FLV, os usurios devem ter o Flash Player 8 ou posterior instalado em seus computadores.
Se um usurio no tiver a verso requerida do Flash Player, mas tiver o Flash Player 6.0 r65 ou posterior instalado, o
navegador exibe um instalador expresso do Flash Player em vez do contedo alternativo. Se o usurio declinar a
instalao expressa, ento a pgina exibe o contedo alternativo.
Para obter mais informaes sobre o trabalho com vdeo, visite o Video Technology Center em
www.adobe.com/go/flv_devcenter_br.
Tipo de vdeo.
3 Preencha o restante das opes da caixa de dilogo e clique em OK.
Nota: O Microsoft Internet Information Server (IIS) no processa tags de objeto aninhado. Para as pginas ASP, o
Dreamweaver usa o objeto aninhado/cdigo incorporado em vez do cdigo do objeto aninhado ao inserir arquivos SWF
ou FLV.
pop-up Capa.
Largura Especifica a largura do arquivo FLV, em pixels. Para que o Dreamweaver determine a largura exata do arquivo
FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a largura, digite um valor de largura.
Altura Especifica a altura do arquivo FLV, em pixels. Para que o Dreamweaver determine a altura exata do arquivo
FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a altura, digite um valor de altura.
Nota: Total com capa a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.
Restringir Mantm a mesma proporo entre a largura e a altura do componente de vdeo. Esta opo selecionada
por padro.
Executar automaticamente Especifica se o vdeo ser ou no reproduzido quando a pgina da Web for aberta.
Retroceder automaticamente Especifica se o controle de reproduo retornar posio inicial depois que a
O comando Inserir FLV gera um arquivo SWF de video player e um arquivo SWF de capa que so utilizados para exibir
o contedo de vdeo em uma pgina da Web. (Para ver os novos arquivos, talvez seja necessrio clicar no boto
Atualizar no painel Arquivos.) Esses arquivos so armazenados no mesmo diretrio do arquivo HTML ao qual voc
est adicionando o contedo do vdeo. Quando voc carregar a pgina HTML que possui o contedo FLV, o
Dreamweaver carregar esses arquivos como arquivos dependentes (contanto que voc clique em Sim na caixa de
dilogo Colocar arquivos dependentes).
rtmp://www.example.com/app_name/instance_name.
Nome do fluxo contnuo Especifica o nome do arquivo FLV a ser reproduzido (por exemplo, myvideo.flv). A extenso
.flv opcional.
Capa Especifica a aparncia do componente de vdeo. Uma visualizao da capa selecionada aparece abaixo do menu
pop-up Capa.
Largura Especifica a largura do arquivo FLV, em pixels. Para que o Dreamweaver determine a largura exata do arquivo
FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a largura, digite um valor de largura.
Altura Especifica a altura do arquivo FLV, em pixels. Para que o Dreamweaver determine a altura exata do arquivo
FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a altura, digite um valor de altura.
Nota: Total com capa a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.
Restringir Mantm a mesma proporo entre a largura e a altura do componente de vdeo. Esta opo selecionada
por padro.
Feed de vdeo ao vivo Especifica se o contedo do vdeo dinmico. Se a opo Feed de vdeo dinmico estiver
selecionada, o Flash Player reproduzir a alimentao de vdeo dinmico com fluxo do Flash Media Server. O nome
do feed de vdeo ao vivo o nome especificado na caixa de texto Nome do fluxo contnuo.
Nota: Quando voc seleciona Feed de vdeo ao vivo, somente o controle de volume aparece na capa do componente, pois
no possvel manipular o vdeo ao vivo. Alm disso, as opes Executar automaticamente e Retroceder
automaticamente no tm nenhum efeito.
Executar automaticamente Especifica se o vdeo ser ou no reproduzido quando a pgina da Web for aberta.
Retroceder automaticamente Especifica se o controle de reproduo retornar posio inicial depois que a
3 Clique em OK para fechar a caixa de dilogo e adicionar o arquivo FLV pgina da Web.
O comando Inserir FLV gera um arquivo SWF de video player e um arquivo SWF de capa que so utilizados para exibir
o vdeo em uma pgina da Web. O comando tambm gera um arquivo main.asc que voc deve carregar no Flash
Media Server. (Para ver os novos arquivos, talvez seja necessrio clicar no boto Atualizar no painel Arquivos.) Esses
arquivos so armazenados no mesmo diretrio do arquivo HTML ao qual voc est adicionando o contedo do vdeo.
Ao carregar a pgina HTML que contm o contedo do vdeo Flash, no se esquea de carregar os arquivos SWF para
o servidor Web e o arquivo main.asc para o Flash Media Server.
Nota: Se voc j tiver um arquivo main.asc no servidor, consulte o administrador do servidor antes de carregar o arquivo
main.asc gerado pelo comando Inserir FLV.
Voc pode carregar facilmente todos os arquivos de mdia necessrios selecionando o alocador de espao de
componente do vdeo na janela Documento do Dreamweaver e clicando no boto Carregar mdia no Inspetor de
propriedades (Janela > Propriedades). Para ver uma lista dos arquivos necessrios, clique em Mostrar arquivos
necessrios.
Nota: O boto Carregar mdia no carrega o arquivo HTML que contm o contedo do vdeo.
Voc tambm pode pressionar Control + ] para alternar entre a visualizao alternativa do contedo. Para retornar
visualizao de SWF/FLV, pressione Control + [ at que todo o contedo alternativo seja selecionado. Em seguida,
pressione novamente Control + [.
3 Edite o contedo como voc editaria qualquer outro contedo no Dreamweaver.
Nota: Voc no pode adicionar arquivos SWF ou FLV como contedo alternativo.
4 Clique novamente no cone de olho para retornar visualizao do arquivo SWF ou FLV.
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
O arquivo de capa (por exemplo, Clear_Skin_1.swf)
Observe que existem dois arquivos dependentes a mais para o Dreamweaver CS4, em comparao com o
Dreamweaver CS3.
Os dois primeiros arquivos desse tipo (swfobject_modified.js e expressInstall.swf) so instalados em uma pasta
chamada Scripts, que o Dreamweaver cria na raiz do site se essa pasta no existir.
Os outros dois arquivos (FLVPlayer_Progressive.swf e o arquivo de capa) so instalados na mesma pasta da pgina na
qual o FLV foi incorporado. O arquivo de capa contm os controles do FLV e seu nome depende da capa escolhida nas
opes descritas na Ajuda do DW CS4. Por exemplo, se voc escolher Limpar capa, o arquivo ser nomeado
Clear_Skin_1.swf.
NECESSRIO carregar todos os quatro arquivos dependentes para que o FLV seja exibido corretamente.
Esquecer de fazer upload desses arquivos a causa mais comum de falhas de execuo de arquivos FLV em pginas da
web. Se um desses arquivos estiver ausente, uma "caixa branca" poder ser exibida na pgina.
Para certificar-se de que voc fez uploaded de todos os arquivos dependentes, use o painel Arquivos do Dreamweaver
para carregar a pgina na qual o FLV aparece. Quando voc faz upload da pgina, o Dreamweaver pergunta se voc
deseja carregar os arquivos dependentes (a menos que voc tenha desativado essa opo). Clique em sim para carregar
os arquivos dependentes.
Problemas de exibio quando pginas so visualizadas localmente
Devido s atualizaes de segurana no Dreamweaver CS4, voc no pode usar o comando Visualizao no navegador
para testar uma pgina com um FLV incorporado a menos que voc defina um servidor de teste local para visualizar
a pgina.
Geralmente, voc s precisar de um servidor de teste se estiver desenvolvendo pginas com ASP, ColdFusion ou PHP
(consulte Configurao do computador para o desenvolvimento de aplicativo na pgina 529). Se voc estiver criando
sites que usam apenas HTML e no tiver definido um servidor de teste, pressione F12 (Windows) ou Opt+F12
(Macintosh) para criar vrios controles de capa na tela. A alternativa pode ser definir um servidor de teste e us-lo para
carregar arquivos em um servidor remoto e visualiz-los nesse servidor.
Nota: possvel que as configuraes de segurana tambm sejam responsveis pela incapacidade de visualizar o
contedo FLV local, mas isso no pode ser confirmado pela Adobe. Voc pode tentar alterar as configuraes de
segurana. Para obter mais informaes sobre como alterar as configuraes de segurana, consulte Observao tcnica
117502.
Outras possveis causas de problemas com arquivos FLV
Se voc estiver tendo dificuldade para visualizar arquivos localmente, verifique se a opo Visualizar usando
arquivo temporrio est desmarcada em Editar > Preferncias > Visualizar no navegador
possvel substituir temporariamente o arquivo FLV com problemas por um arquivo FLV em boas condies. Se o
arquivo FLV de substituio funcionar, o problema est no arquivo FLV original e no no navegador ou no
computador.
Nota: Voc no pode alterar os tipos de vdeo (de download progressivo para fluxo contnuo, por exemplo) usando o
Inspetor de propriedades. Para alterar o tipo de vdeo, exclua o componente FLV e reinsira-o selecionando Inserir >
Mdia > FLV.
Adio de som
Formatos de arquivo de udio
Voc pode adicionar som a uma pgina da Web. Existem vrios tipos diferentes do arquivos e formatos de som,
incluindo .wav, .midi e .mp3. Alguns fatores a serem considerados antes de decidir sobre um formato e um mtodo
para adicionar som so objetivo, pblico-alvo, tamanho do arquivo, qualidade do som e diferenas entre navegadores.
Nota: Os arquivos de som so manipulados de formas muito diferentes pelos vrios navegadores. Talvez seja necessrio
adicionar um arquivo de som a um arquivo SWF e incorporar o arquivo SWF para melhorar a consistncia.
A lista a seguir descreve os formatos de arquivo de udio mais comuns juntamente com algumas vantagens e
desvantagens de cada um deles para o design da Web.
.midi ou .mid (Musical Instrument Digital Interface) Este formato para msica instrumental. Os arquivos MIDI so
compatveis com vrios navegadores e no requerem plug-in. Embora sua qualidade de som seja muito boa, ela pode
variar dependendo da placa de som de um visitante. Um arquivo MIDI pequeno pode fornecer um clipe de som longo.
Os arquivos MIDI no podem ser registrados e devem ser sintetizados em um computador com hardware e software
especiais.
.wav (Waveform Extension) Estes arquivos tm boa qualidade de som, so compatveis com vrios navegadores e no
requerem plug-in. Voc pode gravar seus prprios arquivos WAV de um CD, uma fita, um microfone etc. No entanto,
o tamanho de arquivo grande limita seriamente o tamanho dos clipes de som que voc pode usar nas pginas da Web.
.aif (Audio Interchange File Format, or AIFF) O formato AIFF, como o formato WAV, tem uma boa qualidade de som,
pode ser reproduzido pela maioria dos navegadores e no requer plug-in. Voc tambm pode gravar arquivos AIFF de
um CD, uma fita, um microfone etc. No entanto, o tamanho de arquivo grande limita seriamente o tamanho dos clipes
de som que voc pode usar nas pginas da Web.
.mp3 (Motion Picture Experts Group Audio ou MPEG-Audio Layer-3) Um formato compactado que tornar os arquivos
de som consideravelmente menores. A qualidade do som muito boa: se um arquivo mp3 for gravado e compactado
corretamente, sua qualidade poder competir com a qualidade oferecida por um CD. A tecnologia mp3 permite
transmitir o arquivo de modo que um visitante no precise esperar o download do arquivo inteiro para ouvi-lo. No
entanto, o tamanho de arquivo maior do que de um arquivo Real Audio. Portanto, uma msica inteira ainda poder
demorar bastante tempo para ser baixada em uma conexo de modem dial-up comum (linha telefnica). Para
reproduzir arquivos mp3, os visitantes devem baixar e instalar um aplicativo de ajuda ou plug-in, como o QuickTime,
Windows Media Player ou RealPlayer.
.ra, .ram, .rpm ou Real Audio Este formato tem um alto grau de compactao, com tamanhos de arquivo menores do
que mp3. Arquivos de msica inteiros podem ser baixados em um perodo de tempo razovel. Como os arquivos
podem ser transmitidos de um servidor Web normal, os visitantes podem comear a ouvir o som antes que o arquivo
seja completamente baixado. Os visitantes devem baixar e instalar o plug-in ou aplicativo de ajuda RealPlayer para
reproduzir esses arquivos.
.qt, .qtm, .mov ou QuickTime Este formato um formato de udio e vdeo desenvolvido pela Apple Computer. O
QuickTime est includo em sistemas operacionais Apple Macintosh e usado pela maioria dos aplicativos Macintosh
que usam udio, vdeo ou animao. Os PCs tambm podem reproduzir arquivos no formato do QuickTime, mas
precisam de um driver especial do QuickTime. O QuickTime oferece suporte a maioria dos formatos de codificao,
incluindo Cinepak, JPEG e MPEG.
Nota: Alm dos formatos mais comuns listados anteriormente, h vrios formatos de arquivo de udio e vdeo diferentes
disponveis para uso na Web. Se voc encontrar um formato de arquivo de mdia com o qual no esteja familiarizado,
localize o criador do formato para obter informaes sobre qual a melhor forma de us-lo e implant-lo.
procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Plug-in
no menu pop-up.
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone referente ao tipo de objeto a ser
inserido.
Nota: A caixa de dilogo Atributos de acessibilidade exibida se voc tiver optado por mostrar atributos ao inserir a
mdia na caixa de dilogo Editar > Preferncias.
4 Defina os atributos de acessibilidade.
Nota: Voc tambm pode editar os atributos do objeto de mdia selecionando o objeto e editando o cdigo HTML na
Visualizao de cdigo, ou clicando com o boto direito do mouse (Windows) ou mantendo a tecla Control pressionada
enquanto clica (Macintosh), e selecionando Editar cdigo de tag.
Ttulo Digite um ttulo para o objeto de mdia.
Chave de acesso Digite um equivalente de teclado (uma letra) na caixa de texto para selecionar o objeto de formulrio
no navegador. Isso permite que um visitante do site use a tecla Control (Windows) com a tecla de acesso para acessar
o objeto. Por exemplo, se voc digitar B como tecla de acesso, use Control+B para selecionar o objeto no navegador.
ndice de abas Digite um nmero para a ordem de abas do objeto de formulrio. A definio de uma ordem de abas
til quando h outros links e objetos de formulrio na pgina e o usurio precisa percorrer esses itens em uma ordem
especfica. Se voc definir a ordem das abas de um objeto, no deixe de definir essa ordem para todos eles.
Nota: Se voc clicar em Cancelar, um alocador de espao de objeto de mdia aparecer no documento, mas o
Dreamweaver no associar tags ou atributos de acessibilidade a ele.
Para especificar um arquivo de origem ou definir dimenses e outros parmetros e atributos, use o Inspetor de
propriedades para cada objeto. Voc pode editar os atributos de acessibilidade de um objeto.
Para descobrir que editor est associado ao tipo de arquivo, selecione Editar > Preferncias no Dreamweaver e
selecione Tipos de arquivos/editores na lista Categoria. Clique na extenso do arquivo na coluna Extenses para
visualizar o(s) editor(es) associado(s) na coluna Editores. Voc pode alterar o editor associado a um tipo de arquivo.
2 Clique duas vezes no arquivo de mdia no painel Arquivos para abri-lo no editor externo.
O editor iniciado quando voc clica duas vezes no arquivo no painel Arquivos chamado editor principal. Se voc
clicar duas vezes em um arquivo de imagem, por exemplo, o Dreamweaver abrir o arquivo no editor externo de
imagem principal como Adobe Fireworks.
3 Se voc no deseja usar o editor externo principal para editar o arquivo, poder usar outro editor no sistema para
No painel Arquivos, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) no nome de arquivo e selecione Abrir com no menu de contexto.
Na Visualizao de design, clique o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) no elemento de mdia na pgina atual, e selecione Editar com no menu de contexto.
Extenses de nome de arquivo, como .gif, .wav e .mpg, so listadas esquerda, abaixo de Extenses. Os editores
associados de uma extenso selecionada so listados direita, abaixo de Editores.
2 Selecione a extenso de tipo de arquivo na lista Extenses e siga um destes procedimentos:
Para associar um novo editor ao tipo de arquivo, clique no boto de adio (+) acima da lista Editores e preencha
a caixa de dilogo exibida.
Por exemplo, selecione o cone de aplicativo para que o Acrobat o associe ao tipo de arquivo.
Para tornar um editor o editor principal para um tipo de arquivo (ou seja, o editor que aberto quando voc clica
duas vezes no tipo de arquivo no painel Arquivos), selecione o editor na lista Editores e clique em Tornar primrio.
Para dissociar um editor de um tipo de arquivo, selecione o editor na lista Editores e clique no boto de subtrao
(-) acima da lista Editores.
Nota: No possvel desfazer a remoo de um tipo de arquivo. Portanto, preciso ter a certeza de que deseja remov-lo.
Voc tambm pode adicionar uma Design Note a um objeto de mdia no painel Arquivos selecionando o arquivo,
revelando o menu de contexto e escolhendo as Design Notes no menu de contexto.
destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Shockwave
Selecione Inserir > Mdia > Shockwave.
no menu pop-up.
Para vincular o clipe, digite um texto para o link, como Clipe de Download, selecione o texto e clique no cone de
pasta no Inspetor de propriedades. Navegue at o arquivo de vdeo e selecione-o.
Nota: O usurio deve baixar um aplicativo de ajuda (um plug-in) para visualizar formatos comuns de fluxo contnuo,
como Real Media, QuickTime e Windows Media.
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Plug-in
no menu.
nome de arquivo.
URL do Plg Especifica o URL do atributo pluginspace. Digite o URL completo do site em que os usurios podem
baixar o plug-in. Se o usurio que estiver visualizando a pgina no tiver o plug-in, o navegador tentar baix-lo a
partir deste URL.
Alinhar Determina como o objeto alinhado na pgina.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do plug-in.
Borda Especifica a largura da borda em torno do plug-in.
Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao plug-in do
Selecione um dos elementos de mdia inserido e, em seguida, selecione Exibir > Plug-ins > Reproduzir ou clique no
boto Reproduzir no Inspetor de propriedades.
Selecione Exibir > Plug-ins > Reproduzir tudo para reproduzir todos os elementos de mdia na pgina selecionada
baseada nos plug-ins.
Nota: O recurso Reproduzir tudo se aplica somente ao documento atual. Ele no se aplica a outros documentos em um
conjunto de quadros, por exemplo.
Inspetor de propriedades.
Voc tambm pode selecionar Exibir > Plug-ins > Para tudo para interromper a reproduo de todo o contedo de
plug-in.
Verifique se o plug-in associado est instalado no computador e se o contedo compatvel com a verso do plugin que voc tem.
Verifique se h memria suficiente. Alguns plug-ins requerem mais 2 a 5 MB de memria para serem executados.
procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone ActiveX
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone ActiveX . Com o cone ActiveX
exibido no painel Inserir, voc pode arrastar o cone para a janela Documento.
Selecione Inserir > Mdia > ActiveX. Um cone marca o local da pgina em que o controle ActiveX aparecer no
Internet Explorer.
Propriedades do ActiveX
Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expanso no canto
inferior direito para ver todas as propriedades.
Nome Especifica um nome para identificar o objeto ActiveX para script. Digite um nome na caixa de texto sem rtulo
no lado esquerdo do Inspetor de propriedades.
L e A Especifica a largura e a altura do objeto, em pixels.
ID da classe Identifica o controle ActiveX para o navegador. Digite um valor ou selecione um no menu pop-up.
Quando a pgina carregada, o navegador usa a ID da classe para localizar o controle ActiveX necessrio ao objeto
ActiveX associado pgina. Se o navegador no localizar o controle ActiveX especificado, ele tentar baix-lo no local
especificado em Base.
Incorporar Adiciona uma tag embed tag object do controle ActiveX. Se o controle ActiveX tiver um equivalente do
plug-in do Netscape Navigator, a tag embed ativar o plug-in. O Dreamweaver atribui os valores digitados como
propriedades do ActiveX aos equivalentes de plug-in do Netscape Navigator.
Alinhar Determina como o objeto alinhado na pgina.
Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao objeto
ativada. Se voc no digitar um valor, o Dreamweaver tentar determinar o valor das propriedades do ActiveX j
digitadas.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do objeto.
Base Especifica o URL que contm o controle do ActiveX. O Internet Explorer baixar o controle ActiveX nesse local
caso ele ainda no tenha sido instalado no sistema do visitante. Se voc no especificar um parmetro Base e o visitante
ainda no tiver o controle ActiveX relevante instalado, o navegador no poder exibir o objeto ActiveX.
Alt Img Especifica uma imagem a ser exibida se o navegador no oferecer suporte tag object. Esta opo estar
disponvel somente quando a opo Incorporar estiver desmarcada.
Dados Especifica um arquivo de dados para o controle ActiveX carregar. Vrios controles ActiveX, como Shockwave
procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Applet
suporte a applets Java ou estiver com Java desativado. Se voc digitar texto, o Dreamweaver inserir o texto como o
valor do atributo alt do applet. Se voc selecionar um imagem, o Dreamweaver inserir uma tag img entre as tags
applet de abertura e fechamento.
Nota: Para especificar o contedo alternativo que pode ser visualizado no Netscape Navigator (com Java desativado) e
no Lynx (um navegador baseado em texto), selecione uma imagem e adicione manualmente um atributo alt tag img
no Inspetor de cdigo.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do applet.
Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao applet.
arquivo SWF.
Tocar som Permite reproduzir um som; por exemplo, voc pode reproduzir um efeito de som sempre que o usurio
a diferentes URLs, dependendo o plug-in dos visitantes. Isso se aplica somente a plug-ins do Netscape Navigator, j
que o comportamento Verificar plug-in no verifica controles ActiveX.
Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) no objeto e selecione Parmetros no menu de contexto.
Abra o Inspetor de propriedades caso ele ainda no esteja aberto e clique no boto Parmetros localizado na metade
inferior do Inspetor de propriedades. (Verifique se o Inspetor de propriedades est expandido.)
3 Clique no boto de adio (+) e digite o nome e valor de parmetro nas colunas apropriadas.
Remoo de um parmetro
Selecione um parmetro e pressione o boto de subtrao ().
Reordenao de parmetros
Selecione um parmetro e use os botes de seta para cima e para baixo.
Automao de tarefas
Automao de tarefa
O painel Histrico registra as etapas que voc executa ao concluir uma tarefa. Automatize uma tarefa realizada
freqentemente executando novamente essas etapas no painel Histrico ou criando um novo comando que realiza as
etapas automaticamente.
Determinados movimentos do mouse como, por exemplo, de seleo clicando na janela Documento no podem ser
reproduzidos ou salvos. Quando voc faz um movimento desses, uma linha preta exibida no painel Histrico (a linha
no fica evidente at que voc realize outra ao). Para evitar isso, use as teclas de seta em lugar do mouse a fim de
mover o ponto de insero dentro da janela Documento
Outras etapas tambm no podem ser repetidas como, por exemplo, arrastar um elemento de pgina para outro lugar
da pgina. Quando voc realiza uma etapa dessas, um cone com um pequeno X vermelho exibido no painel
Histrico.
Os comandos salvos so mantidos permanentemente (a menos que voc os exclua), ao passo que os comandos
registrados so descartados quando voc sai do Adobe Dreamweaver CS5, e as seqncias copiadas de etapas so
descartadas quando voc copia algo
B
A
D E
A. Controle deslizante (miniatura) B. Etapas C. Boto Reexecutar D. Boto Copiar etapas E. Boto Comando Salvar como
O controle deslizante, ou miniatura, do painel Histrico aponta inicialmente para ltima etapa que voc realizou.
Nota: Voc no pode reorganizar a ordem das etapas no painel Histrico. No veja o painel Histrico como um conjunto
arbitrrio de comandos, e sim como uma forma de exibir as etapas que voc realizou na ordem em que as realizou.
deslizante.
O controle deslizante rola automaticamente at a etapa, desfazendo as etapas em meio rolagem.
Nota: Assim como ao desfazer uma nica etapa, caso desfaa uma srie de etapas e, em seguida, faa algo novo no
documento, voc no pode mais refazer as etapas desfeitas; elas desaparecem do painel Histrico.
Quando o painel Histrico chega ao nmero mximo de etapas, as etapas iniciais so descartadas.
Esse comando tambm apaga todas as informaes para desfazer referentes ao documento atual; depois de escolher
Apagar Histrico, voc no pode desfazer as etapas apagadas. Apagar Histrico no desfaz as etapas; ele apenas remove
o registro das etapas da memria.
Repetir etapas
Use o painel Histrico para repetir a ltima etapa que voc realizou, repetir uma srie de etapas prximas ou repetir
uma srie de etapas no prximas. Execute novamente as etapas diretamente no painel Histrico.
Para selecionar etapas prximas, arraste de uma etapa para outra (no arraste o controle deslizante; basta arrastar
do rtulo do texto de uma etapa para o rtulo do texto de outra etapa) ou selecione a primeira e, em seguida, clique
com a tecla Shift pressionada na etapa mais recente.
Para selecionar etapas no prximas, selecione uma etapa e, em seguida, clique com a tecla Control pressionada
(Windows) ou Command (Macintosh) para marcar ou desmarcar as demais etapas.
As etapas executadas so as selecionadas (realadas), e no necessariamente a etapa para a qual o controle deslizante
aponta no momento.
Nota: Embora voc possa selecionar uma srie de etapas que incluem uma linha preta indicando que uma etapa no
pode ser registrada, essa etapa ignorada quando voc executa novamente as etapas.
As etapas so executadas novamente na ordem, e uma nova etapa, Executar etapas novamente, exibida no painel
Histrico.
Caso uma linha preta indicadora de movimento do mouse seja exibida enquanto voc realiza uma tarefa que deseja
repetir depois, possvel desfaz-la e tentar outra abordagem, talvez usando as teclas de seta.
2 Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto.
3 Selecione a primeira imagem.
4 No Inspetor de propriedades, digite os nmeros nas caixas Espao V e Espao H para definir o espaamento da
imagem.
5 Clique na imagem novamente para ativar a janela Documento sem mover o ponto de insero.
6 Pressione a tecla Seta esquerda para mover o ponto de insero esquerda da imagem.
7 Pressione a tecla Seta abaixo para mover o ponto de insero abaixo da linha, deixando-o esquerda da segunda
imagem da srie.
8 Pressione Shift+Seta direita para selecionar a segunda imagem.
Nota: No selecione a imagem clicando nela, ou voc no poder repetir todas as etapas.
9 No painel Histrico, selecione as etapas que correspondem alterao do espaamento da imagem e seleo da
10 Continue clicando em Executar novamente at que todas as imagens sejam espaadas corretamente.
Nota: O boto Copiar etapas do painel Histrico diferente do comando Copiar do menu Editar. Voc no pode usar
Editar > Copiar para copiar etapas, embora use Editar > Colar para col-las.
Tome cuidado ao copiar as etapas que incluam um comando Copiar ou Colar:
No use Copiar etapas caso uma das etapas seja um comando Copiar; talvez voc no consiga col-las da forma que
deseja.
Caso as etapas incluam um comando Colar, voc no pode col-las, a menos que elas tambm incluam um
comando Copiar antes do comando Colar.
3 Abra o outro documento.
4 Coloque o ponto de insero onde voc deseja ou selecione um objeto ao qual aplicar as etapas.
5 Selecione Editar > Colar.
As etapas so reproduzidas na medida em que so coladas no painel Histrico do documento. O painel Histrico
mostra as etapas como uma s, chamada Colar etapas.
Caso voc tenha colado as etapas em um editor de textos, na Visualizao de cdigo ou no Inspetor de cdigo, elas so
exibidas como cdigo JavaScript. Isso pode ser til no aprendizado sobre como escrever scripts prprios.
Criar um comando
1 Selecione uma etapa ou um conjunto de etapas no painel Histrico.
2 Clique no boto Comando Salvar como ou selecione Comando Salvar como no menu de contexto do painel
Histrico.
3 Digite um nome para o comando e clique em OK.
(Macintosh).
O ponteiro alterado para indicar que voc est gravando um comando.
2 Quando voc concluir a gravao, selecione Comandos > Iniciar Gravao ou pressione Control+Shift+X
Command+Shift+R (Macintosh).
271
Caminhos absolutos
Os caminhos absolutos fornecem o URL completo do documento vinculado, incluindo o protocolo a ser usado
(normalmente http:// para pginas da Web), por exemplo,
http://www.adobe.com/support/dreamweaver/contents.html. Para um ativo de imagem, o URL completo deve ter a
seguinte aparncia: http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Voc deve usar um caminho absoluto para vincular-se a um documento ou ativo em outro servidor. Voc tambm pode
usar caminhos absolutos para links locais (com documentos no mesmo site), mas essa abordagem no recomendada:
se o site for movido para outro domnio, todos os links locais de caminho absoluto sero corrompidos. Usar caminhos
relativos para links locais tambm aumenta a flexibilidade, caso voc tenha que mover arquivos no seu site.
Nota: Ao inserir imagens (no links), voc pode usar um caminho absoluto para uma imagem em um servidor remoto
(isto , uma imagem que no est disponvel na unidade de disco rgido local).
Para vincular contedo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html.
Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em
cada barra (/), voc desce um nvel na hierarquia de pastas.
Para vincular de contents.html a index.html (na pasta pai, um nvel acima de contents.html), use o caminho relativo
../index.html. Dois pontos e uma barra (../), move um nvel acima na hierarquia de pastas.
Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo
../products/catalog.html. Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos.
Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos
dessa pasta mantenham os mesmos caminhos relativos entre si), voc no precisa atualizar os links relativos a
documentos entre esses arquivos. No entanto, ao mover um arquivo individual que contm links relativos a
documentos ou um arquivo individual de destino de um link relativo a documentos, voc precisa atualizar esses
links. (Se voc mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizar todos os links
relevantes automaticamente.)
Vinculao
Vinculao de arquivos e documentos
Antes de criar um link, voc deve entender como funcionam caminhos absolutos, relativos a documentos e relativos
raiz do site. Voc pode criar vrios tipos de links em um documento:
Um link para outro documento ou para um arquivo, como um arquivo grfico, de filme, PDF ou de som.
Um link de ncora nomeado, que salta para um local especfico em um documento.
Um link de email, que cria uma nova mensagem de email em branco com o endereo do destinatrio j preenchido.
Links nulos e de script, usados para anexar comportamentos a um objeto ou para criar um link que executa o cdigo
JavaScript.
Voc pode usar o Inspetor de propriedades e o cone Apontar para arquivo para criar links de uma imagem, objeto ou
texto para outro documento ou arquivo.
O Dreamweaver cria os links para outras pginas no seu site usando caminhos relativos a documentos. Voc tambm
pode configurar o Dreamweaver para criar novos links usando caminhos relativos raiz do site.
Importante: Sempre salve um novo arquivo antes de criar um caminho relativo a documentos; esse tipo de caminho no
vlido sem um ponto inicial definido. Se voc criar um caminho relativo a documentos antes de salvar o arquivo, o
Dreamweaver usar temporariamente um caminho absoluto comeando com arquivo:// at o arquivo ser salvo; quando
voc salvar o arquivo, o Dreamweaver converter o caminho arquivo:// em um caminho relativo.
Para assistir a um tutorial sobre a criao de links, consulte www.adobe.com/go/vid0149_br.
incluindo o nome, o tamanho e seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.).
Menu de salto Edita um menu de salto. Voc pode alterar a lista de menus, especificar um arquivo vinculado diferente
ou alterar o local do navegador no qual o documento vinculado aberto.
O caminho at o documento vinculado aparece na caixa URL. Use o menu pop-up Em relao a na caixa de dilogo
Selecionar arquivo HTML para escolher o tipo de caminho (em relao ao documento ou raiz) e, em seguida, clique
em Selecionar. O tipo de caminho selecionado aplicado somente no link atual. (Voc pode alterar a configurao
padro da caixa Em relao a para o site.)
_parent carrega o documento vinculado no quadro pai ou na janela pai do quadro que contm o link. Se o quadro
que contm o link no estiver aninhado, o documento vinculado ser carregado na janela completa do navegador.
_self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente
no necessrio especific-lo.
_top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros.
Se todos os links da sua pgina forem definidos para o mesmo destino, voc pode especificar esse destino uma vez
selecionando Inserir > HTML > Tags de cabealho > Base e selecionando as informaes de destino. Para obter
informaes sobre quadros de destino, consulte Controle do contedo do quadro com links na pgina 202.
Arraste a partir da seleo feita com shift e ponte para uma ncora visvel no documento atual, uma ncora visvel
em outro documento aberto, um elemento que tenha uma ID exclusiva atribuda a ele ou um documento no painel
Arquivos.
Nota: Voc pode se vincular a outro documento aberto somente se os documentos no estiverem maximizados na janela
Documento. Para dispor os documentos lado a lado, selecione Janela > Em cascata ou Janela > Lado a lado. Ao apontar
para um documento aberto, esse documento vai para o primeiro plano da tela enquanto voc seleciona suas opes.
de pasta
4 No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome.
Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se voc especificar um
quadro que no existe, a pgina vinculada ser aberta em uma nova janela que tem o nome especificado. Voc tambm
pode selecionar um dos seguintes nomes de destino reservados:
_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se
o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em
tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no
necessrio especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
locais.
4 Defina o caminho relativo de novos links selecionando a opo Documento ou Raiz do site.
A alterao dessa configurao no converter o caminho de links existentes depois de voc clicar em OK. A
configurao aplicada somente nos novos links criados com o Dreamweaver.
Nota: O contedo vinculado a um caminho relativo raiz do site no aparece quando voc visualiza documentos em
um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o
arquivo temporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no
reconhecem razes de site, diferente dos servidores. Para visualizar rapidamente o contedo vinculado aos caminhos
relativos raiz do site, coloque o arquivo em um servidor remoto e selecione Arquivo > Visualizar no navegador.
5 Clique em Salvar.
nomeada.
2 Siga um destes procedimentos:
3 Na caixa Nome da ncora, insira um nome para a ncora e clique em OK. O nome da ncora no pode conter
espaos.
O marcador da ncora aparece no ponto de insero.
Nota: Se o marcador da ncora no for exibido, selecione Exibir > Auxlios visuais > Elementos invisveis.
criado.
2 Na caixa Link do Inspetor de propriedades, digite um sinal de nmero (#) e o nome da ncora. Por exemplo, para
vincular-se a uma ncora chamada "top" no documento atual, digite #top. Para vincular-se a uma ncora chamada
"top" em um documento diferente da mesma pasta, digite nome_do_arquivo.html#top.
Nota: Os nomes de ncora diferenciam minsculas de maisculas.
Nota: Se a ncora no for exibida, selecione Exibir > Auxlios visuais > Elementos invisveis para deix-la visvel.
2 Na Visualizao de design da janela Documento, selecione um texto ou uma imagem a partir do qual um link ser
criado. (Se o link for criado a partir de outro documento aberto, necessrio alternar para ele.)
3 Siga um destes procedimentos:
Arraste com a tecla Shift pressionada na janela Documento desde o texto ou a imagem selecionado at a ncora
desejada: seja uma ncora no mesmo documento ou em outro documento aberto.
seja exibido ou selecione o texto ou a imagem que ser exibido como link de email.
2 Escolha uma destas opes para inserir o link:
igual. No digite nenhum espao entre o ponto de interrogao e o final do endereo de email.
A entrada completa deve ser similar ao seguinte:
mailto:someone@yoursite.com?subject=Email do seu site
JavaScript. No digite nenhum espao entre o sinal de dois pontos e o cdigo ou chamada.
3 Na seo Opes do documento das preferncias de Geral, selecione uma opo no menu pop-up Atualizar links
ao mover arquivos.
Sempre Atualiza automaticamente todos os links para e de um documento selecionado sempre que esse documento
movido ou renomeado.
Nunca No atualiza automaticamente todos os links para e de um documento selecionado quando esse documento
movido ou renomeado.
Solicitar Exibe uma caixa de dilogo que lista todos os arquivos afetados pela alterao. Clique em Atualizar para
atualizar os links nesses arquivos ou clique em No atualizar para no alterar os arquivos.
4 Clique em OK.
locais.
4 Na categoria Informaes locais, selecione Ativar o cache.
Na primeira vez em que voc alterar ou excluir links para arquivos na pasta local depois de iniciar o Dreamweaver, o
Dreamweaver solicitar o carregamento do cache. Se voc clicar em Sim, o Dreamweaver carregar o cache e atualizar
todos os links para o arquivo que acaba de ser alterado. Se voc clicar em No, a alterao ser registrada no cache, mas
o Dreamweaver no carregar o cache nem atualizar os links.
O cache talvez demore alguns minutos para ser carregado em sites maiores porque o Dreamweaver deve determinar
se o cache est atualizado comparando os carimbos de data/hora dos arquivos do site local com os carimbos de
data/hora registrados no cache. Se voc no tiver alterado nenhum arquivo fora do Dreamweaver, pode clicar com
segurana no boto Parar quando for exibido.
Recriar o cache
No painel Arquivos, selecione Site > Avanado > Recriar o cache do site.
Nota: Se estiver alterando um link de email, de FTP, nulo ou de script, voc no precisa selecionar um arquivo.
2 Selecione Site > Alterar link no site inteiro.
3 Preencha as seguintes opes na caixa de dilogo Alterar link no site inteiro:
Alterar todos os links para Clique no cone de pasta
para navegar at o arquivo de destino do qual voc deseja se
desvincular e selecion-lo. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do
link que est alterando.
para navegar at o novo arquivo ao qual voc deseja se vincular e selecionlo. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link de substituio.
4 Clique em OK.
O Dreamweaver atualiza todos os documentos vinculados ao arquivo selecionado, fazendo com que eles apontem para
o novo arquivo, usando o formato de caminho j usado no documento (por exemplo, se o caminho antigo era relativo
ao documento, o novo caminho tambm deve ser relativo ao documento).
Depois de alterar um link no site inteiro, o arquivo selecionado fica rfo (isto , nenhum arquivo do disco local aponta
para ele). Voc pode exclu-lo com segurana sem quebrar nenhum link no site local do Dreamweaver.
Importante: Como essas alteraes ocorrem localmente, voc deve excluir de modo manual o arquivo rfo
correspondente na pasta remota e colocar ou verificar todos os arquivos nos quais os links foram alterados; caso contrrio,
os visitantes do site no observaram as mudanas.
Menus de salto
Sobre menus de salto
Um menu de salto um menu pop-up em um documento, visvel aos visitantes do site, que lista os links para
documentos ou arquivos. Voc pode criar links para documentos no seu site, links para documentos em outros sites,
links de email, links para grficos ou links para qualquer tipo de arquivo que possa ser aberto em um navegador.
Cada opo de um menu de salto associada a um URL. Quando escolhem uma opo, os usurios so redirecionados
("saltam") para o URL associado. Os menus de salto so inseridos no objeto de formulrio Menu de salto.
Um menu de salto pode conter trs componentes:
(Opcional) Uma solicitao de seleo de menu, como uma descrio de categoria para os itens de menu ou
instrues como "Escolha uma".
(Obrigatrio) Uma lista de itens de menu vinculados: um usurio seleciona uma opo e um documento ou arquivo
vinculado aberto.
aparecer no menu, feche a caixa de dilogo Inserir menu de salto e nomeie o quadro.
Inserir boto Ir aps menu Selecione para inserir um boto Ir em vez de uma solicitao de seleo de menu.
Selecionar o primeiro item aps a alterao do URL Selecione se tiver inserido uma solicitao de seleo de menu
Use uma solicitao de seleo de menu, como uma categoria, ou uma instruo para o usurio, como "Escolha
uma". A solicitao de seleo de menu remarcada automaticamente depois de cada seleo de menu.
Use um boto Ir, que permite ao usurio revisitar o link escolhido atualmente. Ao ser usado com um menu de salto,
o boto Ir se transforma no nico mecanismo que salta para levar o usurio ao URL associado seleo do menu.
A seleo de um item de menu no menu de salto no redireciona mais o usurio automaticamente para outra pgina
ou quadro.
Nota: Selecione somente uma dessas opes por menu de salto, na caixa de dilogo Inserir menu de salto, porque elas
se aplicam a um menu de salto inteiro.
Barras de navegao
Sobre barras de navegao
O recurso Barra de navegao est obsoleto no Dreamweaver CS5.
A Adobe recomenda o uso do widget Barra de menus do Spry se voc desejar criar uma barra de navegao.
Mapas de imagem
Sobre mapas de imagem
Um mapa de imagem uma imagem que foi dividida em regies chamadas pontos ativos; quando o usurio clica em
um ponto ativo, ocorre uma ao (por exemplo, um novo arquivo aberto).
Os mapas de imagem do cliente armazenam as informaes do link de hipertexto no documento HTML, no um
arquivo de mapa separado assim como fazem os mapas de imagem do servidor. Quando um visitante do site clica em
um ponto ativo da imagem, o URL associado enviado diretamente para o servidor. Desse modo, os mapas de imagem
do cliente so mais rpidos do que os mapas de imagem do servidor porque o servidor no precisa interpretar a origem
do clique. Os mapas de imagem do cliente so suportados pelo Netscape Navigator 2.0 e posterior, pelo NCSA Mosaic
2.1 e 3.0 e por todas as verses do Internet Explorer.
O Dreamweaver no altera referncias aos mapas de imagem do servidor nos documentos existentes; voc pode usar
mapas de imagem do cliente e do servidor no mesmo documento. No entanto, os navegadores compatveis com os dois
tipos de mapas de imagem do prioridade aos mapas de imagem do cliente. Para incluir um mapa de imagem do
servidor em um documento, voc deve gravar o cdigo HTML adequado.
Vinculao e navegao
propriedades.
3 Na caixa Nome do mapa, insira um nome exclusivo para o mapa de imagem. Se estiver usando vrios mapas de
e defina um ponto ativo de forma irregular clicando uma vez para cada
ponto de canto. Clique na ferramenta seta para fechar a forma.
6 No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome.
Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se voc especificar um
quadro que no existe, a pgina vinculada ser carregada em uma nova janela que tem o nome especificado. Voc
tambm pode selecionar um dos seguintes nomes de destino reservados:
_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se
o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em
tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no
necessrio especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
Nota: A opo de destino s disponibilizada quando o ponto ativo selecionado contm um link.
7 Na caixa Alt, digite o texto alternativo a ser exibido nos navegadores somente de texto ou nos navegadores que
fazem download de imagens manualmente. Alguns navegadores exibem esse texto como uma dica de ferramenta
quando o usurio passa o ponteiro pelo ponto ativo.
8 Repita as etapas de 4 a 7 para definir pontos ativos adicionais no mapa de imagem.
9 Quando terminar de mapear a imagem, clique em uma rea em branco do documento para alterar o Inspetor de
propriedades.
Vinculao e navegao
Voc tambm pode copiar uma imagem com pontos ativos de um documento para outro ou copiar um ou mais pontos
ativos de uma imagem e col-los em outra imagem; os pontos ativos associados imagem tambm so copiados no
novo documento.
Clique com a tecla Shift nos outros pontos ativos que deseja selecionar.
Pressione Control + A (Windows) ou Command + A (Macintosh) para selecionar todos os pontos ativos.
2 Arraste uma ala do seletor de ponto ativo para alterar o tamanho ou a forma do ponto ativo.
O relatrio Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados).
3 No painel Verificador de links, selecione Links externos no menu pop-up Mostrar para exibir outro relatrio.
O relatrio Links externos aparece no painel Verificador de links (no grupo do painel Resultados).
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em um dos
arquivos selecionados e, em seguida, selecione Verificar links > Arquivos/pastas selecionadas no menu de contexto.
O relatrio Links externos aparece no painel Verificador de links (no grupo do painel Resultados).
Voc pode procurar arquivos rfos ao verificar links no site inteiro.
5 Para salvar um relatrio, clique no boto Salvar relatrio no painel Verificador de links.
O relatrio Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados).
3 No painel Verificador de links, selecione Links externos ou Arquivos rfos no menu pop-up Mostrar para exibir
outro relatrio.
Uma lista dos arquivos que correspondem ao tipo de relatrio selecionado aparece no painel Verificador de links.
Nota: Se voc selecionar Arquivos rfos como tipo de relatrio, poder excluir arquivos rfos diretamente do painel
Verificador de links selecionando um arquivo na lista e pressionando a tecla Delete.
4 Para salvar um relatrio, clique no boto Salvar relatrio no painel Verificador de links.
Vinculao e navegao
Se houver outras referncias rompidas a este mesmo arquivo, corrija as referncias nos outros arquivos tambm.
Clique em Sim para que o Dreamweaver atualize todos os documentos da lista que fazem referncia a este arquivo.
Clique em No para que o Dreamweaver atualize somente a referncia atual.
Nota: Se Ativar devoluo e retirada de arquivos estiver ativado no site, o Dreamweaver tentar retirar os arquivos que
requerem alteraes. Se no for possvel retirar um arquivo, o Dreamweaver exibir uma caixa de dilogo de aviso e no
alterar as referncias rompidas.
Arquivo.
O Dreamweaver abre o documento, seleciona a imagem ou o link rompido e reala o caminho e o nome de arquivo no
Inspetor de propriedades. (Se o Inspetor de propriedades no estiver visvel, selecione Janela > Propriedades para abri-lo.)
3 Para definir um novo caminho e nome de arquivo no Inspetor de propriedades, clique no cone de pasta
para
Conforme os links so corrigidos, suas entradas desaparecem da lista Verificador de links. Se uma entrada ainda
aparecer na lista depois de voc inserir um novo caminho ou nome de arquivo no Verificador de links (ou depois de
salvar as alteraes no Inspetor de propriedades), o Dreamweaver no poder encontrar o novo arquivo e ainda
considerar o link rompido.
287
3 (Opcional) Faa as alteraes na Visualizao de cdigo, no painel Estilos CSS, em uma folha de estilos CSS externa
O Dreamweaver exibe o cdigo ativo que o navegador usa para executar a pgina. O cdigo realado em amarelo
e no editvel.
Quando voc interage com os elementos interativos da pgina, o cdigo Ativo destaca as alteraes dinmicas no
cdigo.
3 Para desativar o destaque das alteraes na Visualizao de cdigo ativo, escolha Visualizao > Opes de
Para alterar as preferncia de Cdigo ativo, escolha Editar > Preferncias (Windows) ou Dreamweaver > Preferncias
(SO Macintosh) e selecione a categoria de codificao por cores.
Congelar JavaScript
Siga um destes procedimentos:
Pressione F6
Selecione Congelar JavaScript no menu pop-up do boto Visualizao dinmica.
Uma barra de informaes na parte superior do documento indicar que o JavaScript est congelado. Para fechar a
barra de informaes, clique no link para fechar.
para os quais voc navega usando a barra de ferramentas de navegao do navegador ou o recurso Seguir link(s). Voc
deve navegar para o documento primeiro e, em seguida, selecionar Editar a pgina Visualizao ativa em uma nova
guia para criar uma nova guia para ela.
Seguir link Ativa o prximo link em que voc clica na Visualizao ativa Como alternativa, voc pode usar Control-
clica no cone Atualizar na barra de ferramentas de navegao do navegador. O Dreamweaver coloca seu arquivo no
servidor, antes de atualizar, para que os dois arquivos estejam sincronizados.
Usar Servidor de teste para fonte do documento Usado principalmente por pginas dinmicas (como pginas do
ColdFusion) e, por padro, selecionado para pginas dinmicas. Quando esta opo est selecionada, o Dreamweaver
usa a verso do arquivo no servidor de teste do site como a fonte de exibio da Visualizao dinmica.
Usar arquivos locais para links de documento A configurao padro de sites no dinmicos. Quando esta opo est
selecionada para sites dinmicos que usam servidor de teste, o Dreamweaver usa as verses locais do arquivos
vinculados ao documento (por exemplo, arquivos CSS e JavaScript), em vez dos arquivos no servidor de teste. Voc
ento pode fazer alteraes locais nos arquivos relacionados, de modo a poder visualizar a aparncia desses arquivos
antes de coloc-los no servidor de teste. Se esta opo estiver desmarcada, o Dreamweaver usar as verses do servidor
de teste de arquivos relacionados.
Configuraes de solicitao HTTP Conduz a uma caixa de dilogo de configuraes avanadas, onde possvel inserir
valores para exibio de live data. Para obter mais informaes, clique no boto Ajuda da caixa de dilogo.
Selecione Arquivo > Visualizar no navegador e, em seguida, selecione um dos navegadores listados.
Nota: Se nenhum navegador estiver listado, selecione Editar > Preferncias ou Dreamweaver > Preferncias (Macintosh)
e, em seguida, selecione a categoria Visualizar no navegador esquerda para selecionar um navegador.
Pressione F12 (Windows) ou Option + F12 (Macintosh) para exibir o documento atual no navegador primrio.
Pressione Control + F12 (Windows) ou Command + F12 (Macintosh) para exibir o documento atual no navegador
secundrio.
2 Clique nos links e teste o contedo da sua pgina.
Nota: O contedo vinculado a um caminho relativo raiz do site no aparece quando voc visualiza documentos em
um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o
arquivo temporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no
reconhecem razes de site, diferente dos servidores.
Para visualizar o contedo vinculado aos caminhos relativos raiz, coloque o arquivo em um servidor remoto e
selecione Arquivo > Visualizar no navegador.
3 Feche a pgina do navegador quando terminar o teste.
primrio ou secundrio.
Pressionar F12 (Windows) ou Option + F12 (Macintosh) abre o navegador primrio; pressionar Control + F12
(Windows) ou Command + F12 (Macintosh) abre o navegador secundrio.
6 Selecione Visualizar usando arquivo temporrio para criar uma cpia temporria para visualizao e depurao do
HTML
XHTML
CSS
JavaScript
Linguagem de markup do ColdFusion (CFML)
VBScript (para ASP)
C# e Visual Basic (para ASP.NET)
JSP
PHP
No h suporte para outras linguagens, como Perl, nos recursos de codificao especficos de linguagem no
Dreamweaver; por exemplo, voc pode criar e editar arquivos Perl, mas as dicas de cdigo no se aplicam a essa
linguagem.
Markup invlido
Se o documento contiver um cdigo invlido, o Dreamweaver exibir esse cdigo na Visualizao de design e,
opcionalmente, o realar na Visualizao de cdigo. Se voc selecionar o cdigo na visualizao, o Inspetor de
propriedades exibir as informaes sobre por que ele invlido e como corrigi-lo.
292
Nota: A opo para realar cdigos invlidos na Visualizao de cdigo fica desativada por padro. Para acion-la,
alterne para a Visualizao de cdigo (Visualizao > Cdigo) e depois selecione Visualizao > Opes da visualizao
de cdigo > Realar cdigo invlido.
Voc tambm pode especificar preferncias para regravar automaticamente vrios tipos de cdigo invlido ao abrir
um documento.
Voc pode usar um editor de texto de terceiros para editar o documento atual.
Por padro, o Dreamweaver no altera o cdigo criado ou editado em outros editores HTML, mesmo se o cdigo
for invlido, a menos que voc ative as opes de regravao de cdigo.
O Dreamweaver no altera tags que no reconhea incluindo as tags XML porque ele no tem critrios que
possa usar para julg-las. Se uma tag no reconhecida sobrepuser outra tag (por exemplo,
<MyNewTag><em>text</MyNewTag></em>), o Dreamweaver a marcar como um erro, mas no regravar o
cdigo.
Se desejar, defina o Dreamweaver para realar o cdigo invlido na Visualizao de cdigo (em amarelo). Quando
voc selecionar uma seo realada, o Inspetor de propriedades exibir as informaes sobre como corrigir o erro.
Cdigo XHTML
O Dreamweaver gera o novo cdigo XHTML e limpa o cdigo XHTML existente de uma forma que atenda maioria
dos requisitos XHTML. As ferramentas que voc precisa para atender a alguns requisitos XHTML restantes tambm
so fornecidos.
Nota: Alguns requisitos tambm so necessrios em vrias verses HTML.
A tabela a seguir descreve os requisitos XHTML que o Dreamweaver atende automaticamente:
Requisito XHTML
Aes do Dreamweaver
Cada elemento deve ter uma tag de finalizao, a no ser que isso seja Insere tags de finalizao no cdigo gerado e ao limpar o XHTML.
declarado na DTD como EMPTY.
Insere elementos vazios com um espao antes da barra de
Os elementos vazios devem ter uma tag de finalizao ou a tag de
abertura deve ser finalizada com />. Por exemplo, <br> no vlido. fechamento nas tags vazias do cdigo gerado e ao limpar o XHTML.
A forma correta <br></br> ou <br/>. Estes so os elementos
vazios: area, base, basefont, br, col, frame, hr, img, input,
isindex, link, meta e param.
Para compatibilidade com verses anteriores em navegadores que
no so ativados para XML, deve haver um espao antes de /> (por
exemplo, <br />, e no <br/>).
Os atributos no podem ser minimizados; por exemplo,
<td nowrap> no vlido. A forma correta
<td nowrap="nowrap">.
Isso afeta os seguintes atributos: checked, compact, declare,
defer, disabled, ismap, multiple, noresize, noshade,
nowrap, readonly e selected.
Requisito XHTML
Aes do Dreamweaver
No caso dos atributos com valores de um tipo enumerado, os valores Fora os valores de tipo enumerado a serem minsculos no cdigo
devem estar em minsculas.
gerado e ao limpar o XHTML.
Um valor de tipo enumerado um valor que consta em uma lista
especificada de valores permitidos; por exemplo, o atributo align
tem os seguintes valores permitidos: center, justify, left e
right.
Todos os elementos de script e estilo devem ter um atributo type.
(O atributo type do elemento script tem sido obrigatrio desde o
HTML 4, quando o atributo language se tornou obsoleto.)
Todos os elementos img e area devem ter um atributo alt.
Expresses regulares
As expresses regulares so padres que descrevem combinaes de caracteres em texto. Use-as nas pesquisas de
cdigo para descrever conceitos como linhas que comeam com var e valores de atributo que contm um nmero.
A tabela a seguir lista os caracteres especiais nas expresses regulares, seus significados e exemplos de uso. Para
procurar um texto que contenha um dos caracteres especiais da tabela, aplique o escape ao caractere especial
precedendo-o com uma barra invertida. Por exemplo, para procurar o asterisco real na frase some conditions
apply*, o padro de pesquisa pode ter a seguinte aparncia: apply\*. Se voc no aplicar o escape ao asterisco,
encontrar todas as ocorrncias de apply (bem como qualquer ocorrncia de appl, applyy e applyyy), e no
apenas as seguidas por asterisco.
Caractere
Corresponde a
Exemplo
em huge
+
O caractere precedente no mximo uma vez (ou st?on corresponde a son em Johnson e ston em
seja, indica que o caractere precedente
Johnston, mas no tem nenhuma correspondncia em
opcional).
Appleton ou tension
Qualquer caractere nico, exceto o caractere de .an corresponde a ran e can na frase bran muffins can be
tasty
nova linha.
x|y
x ou y
{n}
{n,m}
[abc]
Caractere
Corresponde a
Exemplo
[^abc]
\b
\B
em book e k em eek!
correspondncia em book
\d
\D
\f
Feed de formulrio.
\n
Feed de linha.
\r
Retorno de carro.
\s
Qualquer caractere nico de espao em branco, \sbook corresponde a book em blue book, mas no tem
incluindo espao, tabulao, feed de formulrio nenhuma correspondncia em notebook
ou feed de linha.
\S
\t
Uma tabulao.
\w
\W
Control+Enter ou
Shift+Enter (Windows), ou
Control+ Return ou
Shift+Return ou
Command+ Return
(Macintosh)
Use parnteses para executar agrupamentos na expresso regular que ser referenciada posteriormente. Em seguida,
use $1, $2, $3 e assim sucessivamente, no campo Substituir por para se referir ao primeiro, segundo, terceiro e
subseqentes agrupamentos entre parnteses.
Nota: Na caixa Procurar por, para se referir a um agrupamento entre parnteses anterior na expresso regular, use \1,
\2, \3 e assim por diante, em vez de $1, $2, $3.
Por exemplo, a procura por (\d+)\/(\d+)\/(\d+) e sua substituio por $2/$1/$3 trocar o dia e o ms em uma data
separada por barras, convertendo entre datas em estilo americana e em estilo europeu.
Visualizao de cdigo
Voc pode visualizar o cdigo-fonte do documento atual de vrias maneiras: exibindo-o na janela Documento atravs
da ativao da Visualizao de cdigo, dividindo a janela Documento para exibir a pgina e seu cdigo associado ou
trabalhando no Inspetor de cdigo em uma janela de codificao separada. O Inspetor de cdigo funciona exatamente
como a Visualizao de cdigo. Considere-o uma Visualizao de cdigo do documento atual que pode ser
desanexada.
ou no Inspetor de cdigo.
3 Marque ou desmarque qualquer uma destas opes:
Quebra automtica de palavra Quebra automaticamente a linha de cdigo para que voc possa visualiz-lo sem rolar
a tela horizontalmente. Esta opo no insere quebras de linha; ela apenas facilita a visualizao de cdigo.
Nmeros de linha Exibe nmeros de linha na lateral do cdigo.
Caracteres ocultos Exibe caracteres especiais no lugar do espao em branco. Por exemplo, um ponto substitui cada
espao, uma divisa dupla substitui cada tabulao e um marcador de pargrafo substitui cada quebra de linha.
Nota: As quebras de linha manuais usadas pelo Dreamweaver no so exibidas com um marcador de pargrafo.
Realar cdigo invlido Faz com que o Dreamweaver realce em amarelo todo o cdigo HTML invlido. Quando voc
selecionar uma tag invlida, o Inspetor de propriedades exibir as informaes sobre como corrigir o erro.
Sinalizao da sintaxe por cores Ativa ou desativa a codificao por cores. Para informaes sobre a alterao do
esquema de cores, consulte Definio das cores de cdigo na pgina 303.
Recuar automaticamente Faz com que o cdigo recue automaticamente quando voc pressiona Enter enquanto
escreve o cdigo. A nova linha de cdigo recuada no mesmo nvel da linha anterior. Para obter informaes sobre a
alterao do espaamento do recuo, consulte a opo Tamanho da tabulao em Alterao do formato de cdigo na
pgina 300.
Nota: A maioria das opes de recuo nesta caixa de dilogo se aplica somente ao cdigo gerado pelo Dreamweaver, e no
ao cdigo digitado. Para fazer com que cada nova linha do cdigo digitado recue no mesmo nvel da linha anterior,
selecione a opo Exibir > Recuo automtico das opes de visualizao de cdigo. Para obter mais informaes, consulte
Definio da aparncia do cdigo na pgina 299.
Com (Caixa de texto e menu pop-up) Especifica quantos espaos ou tabulaes o Dreamweaver deve usar para recuar
o cdigo gerado. Por exemplo, se voc digitar 3 na caixa e selecionar Tabulaes no menu pop-up, o cdigo gerado
pelo Dreamweaver ser recuado por meio de trs caracteres de tabulao para cada nvel de recuo.
Tamanho da tabulao Determina o tamanho de cada caractere de tabulao na Visualizao de cdigo. Por exemplo,
se a opo Tamanho da tabulao for definida como 4, cada tabulao ser exibida na Visualizao de cdigo como
um espao em branco de quatro caracteres. Se, alm disso, a opo Recuar com for definida como 3 Tabulaes, o
cdigo gerado pelo Dreamweaver ser recuado usando trs caracteres de tabulao para cada nvel de recuo, que
aparece na Visualizao de cdigo como um espao em branco de doze caracteres.
Nota: O Dreamweaver aplica o recuo usando espaos ou tabulaes. Ele no converte uma srie de espaos em uma
tabulao ao inserir cdigo.
Quebra automtica de linha Insere um caractere de quebra de linha (tambm conhecido como quebra de linha
incondicional) quando uma linha atinge a largura de coluna especificada. (O Dreamweaver insere caracteres de
quebra de linha somente em lugares em que eles no alteram a aparncia do documento nos navegadores. Portanto,
algumas linhas podem permanecer maiores do que especificado pela opo Quebra automtica de linha.) Em
contraposio, a opo Quebra automtica de linha na Visualizao de cdigo exibe linhas longas (que ultrapassam a
largura da janela) como se elas contivessem caracteres de quebra de linha, mas na verdade no insere esses caracteres.
Tipo de quebra de linha Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site
remoto. A escolha do tipo corretor de caracteres de quebra de linha garante que o cdigo-fonte HTML aparecer
corretamente quando visualizado no servidor remoto. Essa configurao tambm ser til que voc estiver
trabalhando com um editor de texto externo que reconhea determinados tipos de quebras de linha. Por exemplo, use
CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o SimpleText for o editor externo.
Nota: No caso dos servidores conectados atravs do FTP, esta opo se aplica somente ao modo de transferncia binrio.
O modo de transferncia ASCII do Dreamweaver ignora esta opo. Se voc baixar os arquivos usando o modo ASCII, o
Dreamweaver definir as quebras de linha com base no sistema operacional do seu computador. Se voc carregar os
arquivos usando o modo ASCII, as quebras de linha sero definidas como CR LF.
Padro de maisc./minsc. da tag e Padro de maisc./minsc. do atributo Controla o uso de maisculas/minsculas
dos nomes de tag e atributo. Estas opes se aplicam a tags e atributos inseridos ou editados na Visualizao de design,
mas no se aplicam a tags e atributos digitados diretamente na Visualizao de cdigo ou a tags e atributos j presentes
em um documento quando estes so abertos (a menos que voc tambm selecione uma ou ambas as opes Ignorar
maiscula/minscula de:).
Nota: Essas preferncias se aplicam somente a pginas HTML. O Dreamweaver as ignora em pginas XHTML porque
as tags e os atributos em maisculas so XHTML invlidos.
Ignorar maiscula/minscula de: Tags e Atributos Especifica se as opes de maisculas/minsculas especificadas
sero sempre foradas, inclusive quando voc abrir um documento HTML existente. Quando voc selecionar uma
dessas opes e clicar em OK para ignorar a caixa de dilogo, todas as tags ou atributos do documento atual sero
imediatamente convertidos no uso de maisculas/minsculas especificado, assim como todas as tags ou atributos de
cada documento que voc abrir desse momento em diante (at voc desmarcar esta opo novamente). As tags ou os
atributos digitados na Visualizao de cdigo e no Quick Tag Editor tambm so convertidos no uso de
maisculas/minsculas, bem como as tags ou os atributos que voc insere usando o painel Inserir. Por exemplo, se voc
deseja que os nomes de tag sejam sempre convertidos em minsculas, especifique minsculas na opo Padro de
maisc./minsc. da tag e selecione a opo Ignorar maiscula/minscula de: Tags. Quando voc abrir um documento
que contenha nomes de tag em maisculas, o Dreamweaver os converter em minsculas.
Nota: As verses antigas do HTML permitiam nomes de tag e atributo em maisculas ou minsculas, mas o XHTML
requer minsculas nos nomes de tag e atributo. A Web est adotando XHTML; portanto, geralmente melhor usar
nomes de tag e atributo em minsculas.
Tag TD: No incluir quebra de linha na tag TD Lida com um problema de processamento que ocorre em alguns
navegadores antigos quando h espao em branco ou quebras de linha imediatamente aps uma tag <td> ou
imediatamente antes de uma tag </td>. Quando voc seleciona esta opo, o Dreamweaver no grava quebras de linha
depois ou antes da tag <td>, mesmo se a formatao na Biblioteca de tags indicar que a quebra de linha deve existir.
Formatao avanada Permite definir opes de formatao do cdigo CSS (folhas de estilo em cascata) e das tags e
Caractere de espao em branco (Apenas verso em japons) Permite selecionar ou espao Zenkaku para
cdigo HTML. O espao em branco selecionado nesta opo ser usado para tags vazias durante a criao de uma
tabela e quando a opo Permitir vrios espaos consecutivos estiver ativada nas pginas de codificao em japons.
Renomear itens de formulrio ao colar Garante que voc no ter nomes duplicados de objetos de formulrio. Esta
correspondente.
Avisar ao corrigir ou remover tags Exibe um resumo do HTML tecnicamente invlido que o Dreamweaver tentou
corrigir. O resumo indica o local do problema (usando nmeros de linha e coluna) para que voc possa localizar a
correo e garantir que ela est sendo processado conforme esperado.
Nunca regravar cdigo: Em arquivos com extenses Impede que o Dreamweaver regrave cdigo em arquivos com as
extenses especificadas. Esta opo particularmente til para arquivos que contenham tags de terceiros.
Codificar <, >, & e " em valores de atributo usando & Garante que os valores de atributo digitados ou editados usando
ferramentas do Dreamweaver como o Inspetor de propriedades contero apenas caracteres legais. Esta opo ativada
por padro.
Nota: Esta opo e as seguintes no se aplicam s URLs digitadas na Visualizao de cdigo. Alm disso, elas no
ocasionam a alterao do cdigo j existente em um arquivo.
No codificar caracteres especiais Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais.
Dreamweaver como o Inspetor de propriedades, essas URLs contero somente caracteres legais.
Codificar caracteres especiais em URLs utilizando % Opera da mesma maneira que a opo anterior, mas usa um
mtodo diferente de codificao de caracteres especiais. Esse mtodo de codificao (atravs do sinal de porcentagem)
pode ser mais compatvel com os navegadores antigos, mas no funciona bem com os caracteres de alguns idiomas.
do texto, a cor do fundo e (opcional) o estilo (negrito, itlico ou sublinhado). O cdigo de amostra no painel de
visualizao alterado para que corresponda s novas cores e estilos.
Clique em OK para salvar as alteraes e feche a caixa de dilogo Editar esquema de cores.
6 Faa quaisquer outras selees necessrias nas preferncias de codificao por cores e clique em OK.
Fundo padro define a cor de fundo padro para a Visualizao de cdigo e o Inspetor de cdigo.
Caracteres ocultos define a cor dos caracteres ocultos
Plano de fundo do Cdigo ativo define a cor do fundo para a Visualizao de cdigo ativo. A cor padro amarelo.
Alteraes no Cdigo ativo define a cor de destaque do cdigo que alterado na Visualizao de cdigo ativo. A cor
padro rosa.
Plano de fundo de somente leitura define a cor de fundo para o texto somente leitura.
de cdigo do Dreamweaver.
Editor de cdigo externo Especifica o editor de texto a ser usado.
Recarregar arquivos modificados Especifica o comportamento quando o Dreamweaver detecta que as alteraes
HTML
CSS
DOM (Modelo de objeto do documento)
JavaScript (inclui dicas de classe personalizada)
Ajax
Spry
Adobe ColdFusion
JSP
PHP MySQL
ASP JavaScript
ASP VBScript
ASP.NET C#
ASP.NET VB
Para inserir um atributo, coloque o ponto de insero imediatamente aps um nome de tag e pressione a Barra de
espaos.
Uma lista de itens (como nomes de tag ou de atributo) exibida.
Para fechar a lista a qualquer momento, pressione Esc.
2 Role pela lista usando a barra de rolagem ou as teclas de seta para cima e para baixo.
3 Para inserir um item da lista, clique duas vezes nele ou selecione-o e pressione Enter (Windows) ou Return
(Macintosh).
Se um estilo CSS recm-criado no aparecer em uma lista de dicas de cdigo de estilos CSS, selecione Atualizar lista
de estilos na lista de dicas de cdigo. Se a Visualizao de design estiver visvel, algumas vezes um cdigo invlido
aparece temporariamente na Visualizao de design depois que voc seleciona Atualizar lista de estilos. Para remover
aquele cdigo invlido da Visualizao de design, pressione F5 para atualizar aps concluir a insero do estilo.
4 Para inserir uma tag de finalizao, digite </ (barra).
Nota: Por padro, o Dreamweaver determina quando necessrio fechar uma tag e a insere automaticamente. Voc
pode alterar esse comportamento padro de forma que o Dreamweaver insira uma tag de finalizao depois que voc
digitar o colchete angular final (>) da tag de abertura. Como alternativa, o comportamento padro pode ser no inserir
tag nenhuma. Selecione Editar > Preferncias > Dicas de cdigo e, em seguida, selecione uma das opes Tags de
finalizao.
Para alterar um valor, exclua o valor e adicione outro valor conforme descrito no procedimento anterior.
insere a tag de finalizao automaticamente aps digitar os caracteres </. Voc pode alterar esse comportamento
padro para que a tag de finalizao seja inserida depois que voc digitar o colchete angular final (>) da tag de abertura
ou para que nenhuma tag de finalizao seja inserida.
Ativar dicas de cdigo Exibe as dicas de cdigo enquanto voc digita o cdigo na Visualizao de cdigo. Arraste o
controle deslizante Atraso para definir o tempo em segundos antes que as dicas apropriadas sejam exibidas.
Ativar dicas de ferramentas de descrio Exibe uma descrio extensa (se disponvel) da dica de cdigo selecionada.
Menus Define exatamente o tipo de dicas de cdigo que deve ser exibido enquanto voc digita. Voc pode usar todos
ou alguns menus.
Por padro, o recurso Dicas de cdigo especficas do site rastreia o site para determinar qual estrutura do Sistema
de gerenciamento de contedo (CMS) voc est usando. O Dreamweaver, por padro, oferece suporte a trs
estruturas: Drupal, Joomla e Wordpress.
Os quatro botes direita do menu pop-up Estrutura permitem que voc importe, salve, renomeie ou exclua
estruturas.
Nota: No possvel excluir ou renomear as estruturas padro existentes.
2 Na caixa de texto sub-raiz, especifique a pasta de sub-raiz em que voc armazena os arquivos de estruturas.
possvel clicar no cone de pasta prximo caixa de texto para ir ao local dos arquivos de estrutura.
O Dreamweaver exibe uma estrutura em rvore de arquivo das pastas que contm seus arquivos de estrutura. Se as
pastas e/ou arquivos que deseja rastrear estiverem abertas, voc dever clicar em OK para executar o rastreamento.
Se deseja personalizar o rastreamento, voc deve avanar as prximas etapas.
3 Clique no boto de adio (+) acima da janela Arquivos para selecionar um arquivo ou pasta que voc deseja
necessrio.
2 Clique no boto Salvar estrutura no canto superior direito da caixa de dilogo.
3 Especifique um nome para a estrutura do site e clique em Salvar.
Nota: Se o nome que voc especificou j estiver em uso, o Dreamweaver solicitar um nome diferente ou a confirmao
de que voc deseja substituir a estrutura com o mesmo nome. No possvel substituir qualquer uma das estruturas
padro.
Nota: Se o nome que voc especificou j estiver em uso, o Dreamweaver solicitar um nome diferente ou a confirmao
de que voc deseja substituir a estrutura com o mesmo nome. No possvel substituir qualquer uma das estruturas
padro.
Tambm possvel clicar no cone de pasta prximo caixa de texto para ir a um arquivo ou pasta.
3 Clique no boto de adio (+) acima da janela Extenses para especificar as extenses de arquivo dos arquivos que
de ferramentas.
Para descobrir a funo de cada boto, posicione o ponteiro sobre ele at que seja exibida uma dica de ferramenta. Por
padro, Barra de ferramentas de codificao exibe os seguintes botes:
Documentos abertos Lista os documentos abertos. Quando voc seleciona um documento aberto, ele exibido na
janela Documento.
Exibir Navegador de cdigo Exiba o Navegador de cdigo. Para obter mais informaes, consulte Navegao no
contedo entre <table> e </table>). Voc deve colocar o ponto de insero na tag de abertura ou finalizao e clicar
no boto Recolher tag completa para recolher a tag.
Tambm possvel recolher o cdigo fora de uma tag completa colocando o ponto de insero em uma tag de abertura
ou finalizao, e mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh)
enquanto clica no boto Recolher tag completa. Alm disso, mantendo pressionada a tecla Control enquanto clica neste
boto, voc desativar o recurso de recolhimento inteligente a fim de que o Dreamweaver no ajuste o contedo
recolhido fora das tags completas. Para obter mais informaes, consulte Sobre o recolhimento de cdigo na pgina 321.
Recolher seleo Recolhe o cdigo selecionado.
Voc tambm pode recolher o cdigo fora de uma seleo mantendo pressionada a tecla Alt (Windows) ou mantendo
pressionada a tecla Option (Macintosh) enquanto clica no boto Recolher seleo. Alm disso, pressione a tecla
Control enquanto clica neste boto para desativar o recurso de recolhimento inteligente, a fim de que voc possa
recolher exatamente o que selecionou sem nenhuma interveno do Dreamweaver. Para obter mais informaes,
consulte Sobre o recolhimento de cdigo na pgina 321.
Expandir tudo Restaura todo o cdigo recolhido.
Selecionar tag-me Seleciona o contedo e as tags de abertura e finalizao delimitadoras da linha em que voc
colocou o ponto de insero. Se voc clicar repetidamente neste boto e as tags estiverem balanceadas, o Dreamweaver
acabar selecionando as tags html e /html mais externas.
Ajustar chaves Seleciona o contedo e parnteses delimitadores, as chaves ou os colchetes da linha em que voc
colocou o ponto de insero. Se voc clicar repetidamente neste boto e os smbolos delimitadores estiverem
balanceados, o Dreamweaver acabar selecionando as chaves, os parnteses ou os colchetes mais externos no
documento.
Nmeros de linha Permite ocultar ou mostrar nmeros no incio de cada linha de cdigo.
Realar cdigo invlido Reala o cdigo invlido em amarelo.
Alertas de erro de sintaxe na barra de informaes Ativa ou desativa uma barra de informaes na parte superior da
pgina que alerta sobre erros de sintaxe. Quando o Dreamweaver detecta um erro de sintaxe, a barra de informaes
de erro de sintaxe especifica a linha do cdigo onde o erro ocorre. Alm disso, o Dreamweaver reala o nmero da
linha do erro na lateral esquerda do documento na Visualizao de cdigo. A barra de informaes ativada por
padro, mas aparece somente quando o Dreamweaver detecta erros de sintaxe na pgina.
Aplicar comentrio Permite delimitar o cdigo selecionado entre tags de comentrio ou abrir novas tags de
comentrio.
Aplicar comentrio HTML delimita o cdigo selecionado com <!-- e --> ou abre uma nova tag caso nenhum
cdigo tenha sido selecionado.
Aplicar comentrio // insere // no incio de cada linha do cdigo CSS ou JavaScript selecionado, ou insere uma tag
// nica caso nenhum cdigo tenha sido selecionado.
Quando voc est trabalhando em um arquivo ASP, ASP.NET, JSP, PHP ou ColdFusion e seleciona a opo Aplicar
comentrio de servidor, o Dreamweaver detecta automaticamente a tag de comentrio correta e a aplica seleo.
Remover comentrio Remove as tags de comentrio do cdigo selecionado. Se uma seleo incluir comentrios
mais informaes, consulte Movimentao/exportao de regras CSS na pgina 141 e Converso da CSS inline em
uma regra CSS na pgina 142.
Recuar cdigo Desloca a seleo para a direita.
Diminuir recuo do cdigo Desloca a seleo para a esquerda.
Formatar cdigo de origem Aplica os formatos de cdigo anteriormente especificados ao cdigo selecionado ou
pgina inteira, caso nenhum cdigo tenha sido selecionado. Voc tambm pode definir rapidamente as preferncias
de formatao de cdigo selecionando Configuraes de formatao de cdigo no boto Formatar cdigo de origem
ou editar as bibliotecas de tags selecionando Editar bibliotecas de tag.
O nmero de botes disponveis na Barra de ferramentas de codificao varia de acordo com o tamanho da
Visualizao de cdigo na janela Documento. Para ver todos os botes disponveis, redimensione a janela Visualizao
de cdigo ou clique na seta de expanso na parte inferior da Barra de ferramentas de codificao.
Voc tambm pode editar a Barra de ferramentas de codificao para exibir mais botes (como Quebra automtica de
palavra, Caracteres ocultos e Recuar automaticamente) ou botes ocultos que no precisaro ser usados. Para fazer
isso, no entanto, voc deve editar o arquivo XML que gera a barra de ferramentas. Para obter mais informaes,
consulte Extenso do Dreamweaver.
Nota: A opo que permite visualizar caracteres ocultos, que no um boto padro da Barra de ferramentas de
codificao, est disponvel no menu Exibir (Exibir > Opes de visualizao de cdigo > Caracteres ocultos).
Quando voc clicar em um cone, o cdigo poder aparecer na pgina imediatamente ou uma caixa de dilogo poder
aparecer solicitando mais informaes para concluir o cdigo.
Para descobrir a funo de cada boto, posicione o ponteiro sobre ele at que seja exibida uma dica de ferramenta. O
nmero e o tipo dos botes disponveis no painel Inserir variam de acordo com o tipo do documento atual. Isso
tambm depende da visualizao que voc est usando: Visualizao de cdigo ou Visualizao de design.
Embora o painel Inserir fornea um conjunto de tags freqentemente usadas, ele no abrangente. Para fazer a sua
escolha em um conjunto mais abrangente de tags, use o Seletor de tags.
2 Selecione uma categoria de tags na biblioteca de tags ou expanda a categoria e selecione uma subcategoria.
3 Selecione uma tag no painel direito.
4 Para visualizar as informaes de sintaxe e uso da tag no Seletor de tags, clique no boto Informaes sobre tag. As
Se a tag aparecer no painel direito com colchetes angulares (por exemplo, <title></title>), ela no precisar de
informaes adicionais e ser imediatamente inserida no documento no ponto de insero.
Se a tag precisar de informaes adicionais, um editor de tags ser exibido.
7 Se um editor de tags for aberto, digite as informaes adicionais e clique em OK.
8 Clique no boto Fechar.
Na Visualizao de cdigo, uma tag de comentrio inserida e o ponto de insero colocado no meio da tag. Digite
seu comentrio.
Na Visualizao de design, a caixa de dilogo Comentrio exibida. Digite o comentrio e clique em OK.
Verifique se a opo Comentrios est selecionada nas preferncias de elementos invisveis. Se no estiver, o marcador
de comentrio no aparecer.
clica em uma tag (Macintosh) na Visualizao de cdigo ou em um objeto na Visualizao de design, e selecione
Editar tag no menu pop-up. (O contedo desta caixa de dilogo muda de acordo com a tag selecionada.)
2 Especifique ou edite atributos para a tag e clique em OK.
Para obter mais informaes sobre a tag no Editor de tags, clique em Informaes sobre tag.
Aplicar comentrio ' Insere uma aspa simples no incio de cada linha de um script do Visual Basic ou insere uma aspa
simples no ponto de insero caso nenhum cdigo tenha sido selecionado.
Aplicar comentrio de servidor Envolve o cdigo selecionado. Quando voc est trabalhando em um arquivo ASP,
ASP.NET, JSP, PHP ou ColdFusion e seleciona a opo Aplicar comentrio de servidor, o Dreamweaver detecta
automaticamente a tag de comentrio correta e a aplica seleo.
Aplicar hack de comentrio de barra invertida Delimita o cdigo CSS selecionado com tags de comentrio que faro
com que o Internet Explorer 5 para Macintosh ignore o cdigo.
Aplicar Caio Hack Delimita o cdigo CSS selecionado com tags de comentrio que faro com que o Netscape
Remover hack de comentrio de barra invertida Remove as tags de comentrio do cdigo CSS selecionado. Se uma
seleo incluir comentrios aninhados, somente as tags de comentrio externas sero removidas.
Remover Caio Hack Remove as tags de comentrio do cdigo CSS selecionado. Se uma seleo incluir comentrios
aninhados, somente as tags de comentrio externas sero removidas.
Converter abas em espaos Converte cada tabulao da seleo em um nmero de espaos igual ao valor de Tamanho
da tabulao definido nas preferncias de formato do cdigo. Para obter mais informaes, consulte Alterao do
formato de cdigo na pgina 300.
Converter espaos em abas Converte uma srie de espaos da seleo em tabulaes. Cada srie de espaos com um
nmero de espaos igual ao tamanho da tabulao convertida em uma tabulao.
Recuo Recua a seleo, deslocando-a para a direita. Para obter mais informaes, consulte Recuo dos blocos de
cdigo na pgina 314.
Diminuir recuo Desloca a seleo para a esquerda.
Remover todas as tags Remove todas as tags da seleo.
Converter linhas em tabela Delimita a seleo em uma tag table sem atributos.
Adicionar quebras de linha Adiciona uma tag br no final de cada linha da seleo.
Converter em maiscula Converte todas as letras da seleo (incluindo nomes e valores de tag e atributo) em
maisculas.
Converter em minscula Converte todas as letras da seleo (incluindo nomes e valores de tag e atributo) em
minsculas.
Converter tags em maisculas Converte todos os nomes de tag e atributo e valores de atributo da seleo em
maisculas.
Converter tags em minsculas Converte todos os nomes de tag e atributo e valores de atributo da seleo em
minsculas.
cdigo exibe links para o cdigo que afeta a rea onde voc clicou.
Clique fora do Navegador de cdigo para fech-lo.
Nota: Voc tambm pode abrir o Navegador de cdigo clicando no indicador Navegador de cdigo . Este indicador
aparece prximo ao ponto de insero em sua pgina quando o mouse fica sem atividade por 2 segundos.
O Navegador de cdigo agrupa os cdigos fonte relacionados por arquivo e relaciona os arquivos em ordem alfabtica.
Por exemplo, suponha que as regras CSS em trs arquivos externos afetam a seleo em seu documento. Neste caso, o
Navegador de cdigo relaciona esses trs arquivos, assim como as regras CSS relevantes seleo. Para CSS
relacionados a uma determinada seleo, o Navegador de cdigo funciona como um painel de Estilos CSS no modo
Atual.
Quando voc focaliza links para regras CSS, o Navegador de cdigo exibe dicas de ferramentas das propriedades na
regra. Essas dicas de ferramentas so teis quando voc quer distinguir entre muitas regras que compartilham o
mesmo nome.
Inspetor de cdigo).
2 Siga um destes procedimentos:
Na Visualizao de cdigo, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla
Control enquanto clica (Macintosh) em qualquer lugar da Visualizao de cdigo e selecione o submenu Funes
no menu de contexto.
O submenu Funes no aparece na Visualizao de design.
Qualquer funo JavaScript ou VBScript do cdigo aparece no submenu.
Para ver as funes em ordem alfabtica, mantenha pressionada a tecla Control enquanto clica com o boto direito
do mouse (Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na
Visualizao de cdigo. Em seguida, selecione o submenu Funes.
Extrair JavaScript
O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver,
exporta-o para um arquivo externo e vincula o arquivo externo ao seu documento. O JSE tambm pode remover
manipuladores de eventos, como onclick e onmouseover do seu cdigo e, ento, anexar ao seu documento, de modo
no-intrusivo, o JavaScript associado a esses manipuladores.
Voc deve estar ciente das seguintes limitaes do Extrator de JavaScript antes de us-lo:
O JSE no extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). H chance de que a
externalizao desses scripts possa causar resultados imprevistos. Por padro, o Dreamweaver lista esses scripts na
caixa de dilogo Externalizar JavaScript, mas no os seleciona para extrao. (Voc pode selecion-los
manualmente se desejar).
O JSE no extrai JavaScript de regies editveis de arquivos .dwt (modelo do Dreamweaver), regies no editveis
de ocorrncias do modelo ou itens de biblioteca do Dreamweaver.
Aps extrair JavaScript usando a opo Externalizar JavaScript e Anexar de modo no-intrusivo, voc no poder
mais editar comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver no pode inspecionar
e preencher o painel Comportamentos com comportamentos anexados de modo no-intrusivo.
Voc no pode desfazer suas alteraes aps ter fechado a pgina. No entanto, voc pode desfazer alteraes, desde
que permanea na mesma seo de edio. Selecione Editar > Desfazer externalizar JavaScript, para desfazer.
Algumas pginas muito complexas podem no funcionar conforme o esperado. Esteja atento ao extrair JavaScript
de pginas com document.write() no corpo e em variveis globais.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no
Dreamweaver, consulte www.adobe.com/go/dw10javascript_br.
Para usar o Extrator de JavaScript:
1 Abra uma pgina que contenha JavaScript (por exemplo, uma pgina do Spry).
2 Selecione Comandos > Externalizar JavaScript.
3 Na caixa de dilogo Externalizar JavaScript, edite as selees padro, se necessrio.
Selecione Externalizar somente JavaScript se voc deseja que o Dreamweaver mova todo JavaScript para um
arquivo externo e para fazer referncia quele arquivo no documento atual. Esta opo deixa os manipuladores
de evento como onclick e onload no documento e deixa os comportamentos visveis no painel
Comportamentos.
Selecione Externalizar JavaScript e Anexar de modo no intrusivo se desejar que o Dreamweaver 1) mova
JavaScript para um arquivo externo e faa referncia a esse arquivo no documento atual e 2) remova
manipuladores de evento do HTML e insira-os no tempo de execuo usando JavaScript. Ao selecionar esta
opo, voc no poder mais editar comportamentos no painel Comportamentos.
Na coluna Editar, desmarque todas as edies que no deseja realizar ou selecione as edies que o
Dreamweaver, por padro, no selecionou.
Por padro, o Dreamweaver lista mas no seleciona as seguintes edies:
Blocos de script no cabealho do documento que contm assinaturas de funes relacionadas ao cdigo de
manuseio EOLAS, conhecido por usar document.write().
Blocos de script no corpo do documento, a menos que os blocos contenham apenas widget do Spry ou
construtores de conjunto de dados do Spry.
O Dreamweaver atribui IDs automaticamente a elementos que ainda no tm IDs. Se no gostar dessas IDs, voc
poder alter-las, editando as caixas de texto de ID.
4 Clique em OK.
A caixa de dilogo de resumo oferece um resumo de extraes. Revise as extraes e clique em OK.
5 Salve a pgina.
O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extrado. O
Dreamweaver salva o arquivo SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nvel
da pgina da qual voc extraiu o JavaScript. No se esquea de enviar esses arquivos dependentes para seu servidor
Web quando enviar a pgina original.
Voc tambm pode clicar com o boto direito do mouse no snippet (Windows) ou manter pressionada a tecla Control
enquanto clica no snippet (Macintosh) e selecionar Inserir no menu pop-up.
Nota: Os nomes de snippet no podem conter caracteres invlidos nos nomes de arquivo, como barras (/ ou \), caracteres
especiais ou aspas duplas ().
3 (Opcional) Digite uma descrio de texto para o snippet. Isso facilita o uso do snippet para os outros membros da
equipe.
4 Em Tipo de snippet, selecione Quebra de linha da seleo ou Inserir bloco.
a Se voc escolher Quebra de linha da seleo, adicione cdigo para as seguintes opes:
Inserir antes de Digite ou cole o cdigo a ser inserido antes da seleo atual.
Inserir depois de Digite ou cole o cdigo a ser inserido aps a seleo atual.
Para definir o espaamento padro dos blocos, use quebras de linha; pressione Enter (Windows) ou Return
(Macintosh) dentro das caixas de texto.
Nota: Como os snippets podem ser criados como blocos de incio e fim, use-os para envolver outras tags e contedo. Isso
ser til para inserir formatao especial, links, elementos de navegao e blocos de script. Realce o contedo que voc
deseja envolver e insira o snippet.
b Se voc escolher Inserir bloco, digite ou cole o cdigo a ser inserido.
5 (Opcional) Selecione Tipo de visualizao: Cdigo ou design.
Design Processa o cdigo e o exibe no painel Visualizao do painel Snippets.
6 Clique em OK.
Para obter mais informaes, consulte Personalizar atalhos de teclado na pgina 33.
e o texto ou as tags que sero procurados. Se desejar, especifique o texto de substituio tambm. Depois, clique em
um dos botes Localizar ou em um dos botes Substituir.
4 Clique no boto Fechar.
5 Para realizar a pesquisa novamente sem exibir a caixa de dilogo Localizar e substituir, pressione F3 (Windows) ou
Command+G (Macintosh).
Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) em uma tag, atributo ou palavra-chave e selecione Referncia no menu de contexto.
O painel Referncia aberto e exibe informaes sobre a tag, o atributo ou a palavra-chave clicada.
2 Para ajustar o tamanho do texto no painel Referncia, selecione Fonte grande, Fonte mdia ou Fonte pequena no
Impresso do cdigo
Voc pode imprimir o cdigo para edit-lo offline, arquiv-lo ou distribu-lo.
1 Abra uma pgina na Visualizao de cdigo.
2 Selecione Arquivo > Imprimir cdigo.
3 Especifique as opes de impresso e clique em OK (Windows) ou Imprimir (Macintosh).
Recolhimento de cdigo
Sobre o recolhimento de cdigo
Voc pode recolher e expandir fragmentos de cdigo para que possa visualizar diferentes sees do documento sem
precisar usar a barra de rolagem. Por exemplo, para ver todas as regras CSS na tag head que se aplica a uma tag div
mais abaixo na pgina, recolha tudo o que estiver entre as tags head e div, a fim de que voc possa ver as duas sees
de cdigo simultaneamente. Embora voc possa selecionar fragmentos de cdigo fazendo selees na Visualizao de
design ou Visualizao de cdigo, recolha o cdigo apenas na Visualizao de cdigo.
Nota: Os arquivos criados nos modelos do Dreamweaver exibem todos os cdigos como totalmente expandidos, mesmo
se o arquivo de modelo (.dwt) contiver fragmentos de cdigo recolhidos.
Nota: Quando voc faz uma seleo na Visualizao de design que parte de um fragmento de cdigo recolhido, o
fragmento automaticamente expandido na Visualizao de cdigo. Quando voc faz uma seleo na Visualizao de
design que um fragmento de cdigo completo, o fragmento permanece recolhido na Visualizao de cdigo.
Comando
Windows
Macintosh
Recolher seleo
Control+Shift+C
Command+Shift+C
Control+Alt+C
Command+Alt+C
Expandir seleo
Control+Shift+E
Command+Shift+E
Control+Shift+J
Command+Shift+J
Control+Alt+J
Command+Alt+J
Expandir tudo
Control+Alt+E
Command+Alt+E
Nota: Voc pode realizar a colagem em outros aplicativos, mas o recolhimento do fragmento de cdigo no ser
preservado.
Para arrastar uma cpia da seleo, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a
tecla Alt (Macintosh) e arraste.
Nota: No possvel arrastar para outros documentos.
Para obter informaes sobre como limpar o HTML gerado em um documento do Microsoft Word, consulte Abrir
e editar documentos existentes na pgina 67.
1 Abra um documento:
Nota: Dependendo do tamanho do documento e do nmero de opes selecionadas, pode levar vrias segundos para que
a limpeza seja concluda.
Remover tags de continer vazias Remove quaisquer tags que no tenham contedo entre elas. Por exemplo, <b></b>
e <font color="#FF0000"></font> so tags vazias, mas a tag <b> em <b>algum texto</b> no.
Remover tags aninhadas redundantes Remove todas as ocorrncias redundantes de uma tag. Por exemplo, no cdigo
<b>Isto foi <b>realmente</b> o que eu quis dizer</b>, as tags b que envolvem a palavra realmente so
permitir que os documentos sejam atualizados automaticamente quando os modelos e itens de biblioteca forem
atualizados. Se voc selecionar esta opo ao limpar o cdigo em um documento baseado em modelo, o documento
desanexado do modelo. Para obter mais informaes, consulte Desanexar um documento de um modelo na
pgina 416.
Remover tag(s) especfica(s) Remove as tags especificadas na caixa de texto adjacente. Use esta opo para remover
tags personalizadas inseridas por outros editores visuais e outras tags que no devem aparecer no seu site (por exemplo,
blink). Separe vrias tags usando vrgulas (por exemplo, font,blink).
Combinar tags <font> aninhadas quando possvel Consolida duas ou mais tags font quando elas controlam o mesmo
intervalo de texto. Por exemplo, <font size="7"><font color="#FF0000">big red</font></font> seria
alterado para <font size="7" color="#FF0000">big red</font>.
Mostrar concluso do logon Exibe uma caixa de alerta com detalhes sobre as alteraes feitas no documento assim que
a limpeza concluda.
As tags delimitadoras correspondentes (e seu contedo) so selecionadas no cdigo. Se voc continuar selecionando
Editar > Selecionar tag-me, e suas tags estiverem balanceadas, o Dreamweaver acabar selecionando as tags html e
/html mais externas.
Todos os cdigos entre os parnteses, as chaves ou os colchetes delimitadores esto selecionados. Se voc escolher
novamente Editar > Ajustar chaves, todo o cdigo dentro dos parnteses, das chaves ou dos colchetes que delimitam
a nova seleo ser selecionado.
Validar tags
O recurso Validar tags (Arquivo > Validar) est obsoleto no Dreamweaver CS5. Porm, o Dreamweaver ainda valida
documentos XML e ColdFusion.
Voc pode definir preferncias para o Validador, os problemas especficos que o Validador deve verificar e os tipos de
erros que o Validador deve reportar.
1 Siga um destes procedimentos:
Em um arquivo XML ou XHTML, selecione Arquivo > Validar > Como XML.
Para um arquivo ColdFusion, selecione Arquivo > Validar > ColdFusion.
A aba Validao do painel Resultados exibe a mensagem Nenhum erro ou aviso ou lista os erros de sintaxe
localizados.
2 Clique duas vezes em uma mensagem de erro para realar o erro no documento.
3 Para salvar o relatrio como um arquivo XML, clique no boto Salvar relatrio.
4 Para visualizar o relatrio no navegador principal (que permitir a impresso do relatrio), clique no boto
Procurar relatrio.
Voc no pode selecionar vrias verses da mesma biblioteca de tags ou linguagem; por exemplo, se voc selecionar
HTML 4.0, no poder selecionar tambm HTML 3.2 ou HTML 2.0. Selecione a verso mais antiga que deseja usar na
validao; por exemplo, se um documento contiver um cdigo HTML 2.0 vlido, ele tambm ser vlido para HTML 4.0.
4 Clique em Opes e defina as opes para essas bibliotecas.
5 Selecione as opes de exibio dos tipos de erros e avisos que devero estar includos no relatrio do Validador.
6 Selecione os itens que o Validador deve verificar:
Aspas no texto Indica que o Dreamweaver deve avisar voc sobre cada uso de aspas no texto do documento. Voc deve
usar a entidade " em vez das aspas no texto dos documentos HTML.
Entidades no texto Indica que o Dreamweaver deve recomendar a alterao de determinados caracteres (como E
comercial (&), sinal de menor que (<) e sinal de maior que (>)) para seus equivalentes da entidade HTML.
7 Clique em OK para fechar a caixa de dilogo Opes do validador e, em seguida, clique em OK novamente para
definir as preferncias.
documento.
2 Selecione um documento padro e uma das definies de tipo de documento XHTML no menu pop-up Tipo
Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional
ou XHTML 1.0 Strict no menu pop-up.
Em um documento sem quadros, selecione Arquivo > Converter e selecione uma das definies de tipo de
documento XHTML.
Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0
Transitional ou XHTML 1.0 Strict no menu pop-up.
Em um documento com quadros, selecione um quadro, selecione Arquivo > Converter e selecione uma das
definies de tipo de documento XHTML.
2 Para converter o documento inteiro, repita esta etapa para cada quadro e para o documento de conjunto de
quadros.
Nota: Voc no pode converter uma ocorrncia de um modelo, pois ela deve estar na mesma linguagem que o modelo
em que est baseada. Por exemplo, um documento baseado em um modelo XHTML sempre ser XHTML, e um
documento baseado em um modelo no compatvel com XHTML sempre ser HTML e no poder ser convertido em
XHTML ou qualquer outra linguagem.
O Dreamweaver solicita a pgina do servidor ColdFusion e a exibe em uma janela interna do navegador Internet
Explorer. Se a pgina contiver erros, as possveis causas dos erros aparecero na parte inferior da pgina.
Ao mesmo tempo, o painel Depurao de servidor ser aberto. O painel fornece um grande volume de informaes
teis, como todas as pginas que o servidor executou para processar a pgina, todas as consultas SQL executadas na
pgina e todas as variveis de servidor e seus respectivos valores, se houver algum. O painel tambm fornece um
resumo dos tempos de execuo.
3 Se a categoria Excees aparecer no painel Depurao de servidor, clique no cone de adio (+) para expandir a
categoria.
A categoria Excees aparecer se o servidor detectar um ou mais problemas na pgina. Expanda a categoria para obter
mais informaes sobre o problema.
4 Alterne de volta para a Visualizao de cdigo (Visualizao > Cdigo) ou para a Visualizao de design
O Dreamweaver processa a pgina no navegador interno novamente e atualiza o painel Depurao de servidor. Se no
houver mais problemas na pgina, a categoria Excees no reaparecer no painel.
6 Para sair do modo de depurao, alterne para Visualizao de cdigo (Exibir > Cdigo) ou Visualizao de design
Nota: O Inspetor de tags e o Inspetor de propriedades permitem que voc visualize e edite os atributos de uma tag. O
Inspetor de tags permite que voc visualize e edite cada atributo associado a uma tag especfica. O Inspetor de
propriedades mostra somente os atributos mais comuns, mas fornece um conjunto mais sofisticado de controles para
alterar os valores desses atributos, e permite editar determinados objetos (como colunas de tabela) que no correspondem
a tags especficas.
1 Clique no texto ou selecione um objeto na pgina.
O Inspetor de propriedades do texto ou objeto aparece abaixo da janela Documento. Se o Inspetor de propriedades
no estiver visvel, selecione Janela > Propriedades.
2 Faa as alteraes nos atributos no Inspetor de propriedades.
O boto Contedo aparecer somente se a tag selecionada no for uma tag vazia (ou seja, se ela contiver uma tag de
abertura e uma tag de finalizao).
3 Se a tag contiver uma expresso condicional, faa as alteraes nela na caixa Expresso.
Na Visualizao de cdigo (ou no Inspetor de cdigo), clique em qualquer lugar no nome de uma tag ou em seu
contedo.
Para visualizar os atributos organizados pela categoria, clique no boto Mostrar visualizao de categoria
Para visualizar os atributos em uma lista alfabtica, clique no boto Mostrar visualizao de lista
Se o atributo usar valores predefinidos, selecione um valor no menu pop-up (ou no seletor de cores) direita da
coluna de valor de atributo.
Se o atributo adotar um valor de URL, clique no boto Procurar ou use o cone Apontar para arquivo a fim de
selecionar um arquivo ou digite o URL na caixa.
Se o atributo usar um valor de uma origem de contedo dinmico (como um banco de dados), clique no boto
Dados dinmicos direita da coluna de valor de atributo. Em seguida, selecione uma origem.
Para excluir o valor do atributo, selecione o valor e pressione Backspace (Windows) ou Delete (Macintosh).
Para alterar o nome de um atributo, selecione o nome do atributo e edite-o.
Nota: Se voc alterar o nome de um atributo padro e, em seguida, adicionar um valor para esse atributo, o atributo e
seu novo valor sero movidos para a categoria apropriada.
Para adicionar um novo atributo que ainda no esteja listado, clique no espao vazio abaixo do ltimo nome de
atributo listado e digite um novo nome de atributo.
4 Pressione Enter (Windows) ou Return (Macintosh), ou clique em qualquer outro lugar no Inspetor de tags para
cdigo.
2 Pressione Control+T (Windows) ou Command+T (Macintosh).
A tag inserida no cdigo, juntamente com uma tag de finalizao correspondente, se aplicvel.
4 Pressione Escape para sair sem fazer alteraes.
Voc tambm pode selecionar a tag que deseja editar no seletor de tags na parte inferior da janela Documento. Para
obter mais informaes, consulte Edio de cdigo com o seletor de tags na pgina 332.
2 Pressione Control+T (Windows) ou Command+T (Macintosh).
Nota: Por padro, as alteraes so aplicadas ao documento quando voc pressiona Tab ou Shift+Tab.
5 Para fechar o Quick Tag Editor e aplicar todas as alteraes, pressione Enter.
6 Para sair sem fazer nenhuma outra alterao, pressione Escape.
Nota: Se voc selecionar texto ou um objeto que inclua uma tag HTML de abertura ou finalizao, o Quick Tag Editor
ser aberto no modo Editar tag, e no no modo Colocar tag ao redor.
2 Pressione Control+T (Windows) ou Command+T (Macintosh), ou clique no boto do Quick Tag Editor no
Inspetor de propriedades.
O Quick Tag Editor aberto no modo Colocar tag ao redor.
3 Digite uma tag de abertura nica, como strong, e pressione Enter (Windows) ou Return (Macintosh).
A tag inserida no incio da seleo atual, enquanto uma tag de finalizao correspondente inserida no final.
4 Para sair sem fazer nenhuma alterao, pressione Escape.
Voc tambm pode desativar o menu de dicas ou ajustar o atraso antes que o menu seja exibido no Quick Tag Editor.
Para ver um menu de dicas que lista os atributos vlidos para uma tag, faa uma pausa rpida enquanto edita um nome
de atributo no Quick Tag Editor. Um menu de dicas exibido, listando todos os atributos vlidos para a tag que voc
est editando.
Da mesma forma, para ver um menu de dicas que lista nomes de tag vlidos, faa uma pausa enquanto digita ou edita
um nome de tag no Quick Tag Editor.
Nota: As preferncias de dicas de cdigo do Quick Tag Editor so controladas pelas preferncias normais de dicas de
cdigo. Para obter mais informaes, consulte Definir preferncias de dicas de cdigo na pgina 306.
Comece a digitar um nome de tag ou atributo. A seleo no menu Dicas de cdigo vai para o primeiro item que
inicia com as letras que voc digitou.
cdigo.
A caixa de dilogo Preferncias de dicas de cdigo exibida.
2 Para desativar o menu de dicas, cancele a seleo da opo Ativar dicas de cdigo.
3 Para alterar o atraso antes que o menu aparea, ajuste o controle deslizante Atraso e clique em OK.
informaes, consulte Edio de cdigo com o Quick Tag Editor na pgina 330.
Grave um script JavaScript ou VBScript para a pgina sem sair da Visualizao de design.
Crie um link no documento para um arquivo de script externo sem sair da Visualizao de design.
Edite um script sem sair da Visualizao de design.
Antes de iniciar, selecione Exibir > Auxlios visuais > Elementos invisveis para garantir que os marcadores de
script aparecero na pgina.
Se voc estiver usando JavaScript e no tiver certeza da verso, selecione JavaScript em vez de JavaScript1.1 ou
JavaScript1.2.
4 Digite ou cole o cdigo de script na caixa Contedo.
Edio de um script
1 Selecione o marcador de script.
2 No Inspetor de propriedades, clique no boto Editar.
HTTP (http-equiv).
Valor Especifica o tipo de informaes que voc est fornecendo nesta tag. Alguns valores, como description,
keywords e refresh, j esto bem definidos (e tm seus prprios Inspetores de propriedades no Dreamweaver), mas
voc pode especificar praticamente qualquer valor (por exemplo, creationdate, documentID ou level).
Contedo Especifica as informaes reais. Por exemplo, se voc especificou level em Valor, poder especificar
beginner, intermediate ou advanced em Contedo.
especificado. Para abrir outro URL (em vez de atualizar a pgina atual), clique no boto Procurar, v at o item
desejado e selecione a pgina a ser carregada.
_parent carrega o documento vinculado no conjunto de quadros pai ou na janela do quadro que contm o link. Se
o quadro contendo o link no estiver aninhado, esse ser o equivalente a _top; o documento vinculado ser
carregado na janela de navegador em tamanho integral.
_self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente
no necessrio especific-lo.
_top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros.
mais informaes, consulte a seo External Style Sheets na especificao HTML 4.0 no site da World Wide Web
Consortium em www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel Especifica o relacionamento entre o documento atual e o documento na caixa Href. Os valores possveis incluem
Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section,
Subsection, Appendix, Help e Bookmark. Para especificar mais de um relacionamento, separe os valores com um
espao.
Rev Especifica um relacionamento reverso (o oposto de Rel) entre o documento atual e o documento na caixa Href.
Se ele for um servidor Web Apache, selecione Virtual. No Apache, o tipo Virtual funciona em todos os casos,
enquanto o tipo Arquivo funciona somente em alguns casos.
Se ele for um Microsoft Internet Information Server (IIS), selecione Arquivo. (O tipo Virtual funciona apenas com
o IIS em determinadas circunstncias.)
Nota: Infelizmente, o IIS no permitir a incluso de um arquivo em uma pasta acima da pasta atual na hierarquia
de pastas, a menos que um software especial tenha sido instalado no servidor. Se voc precisa incluir um arquivo de
uma pasta localizada no topo da hierarquia de pastas em um servidor IIS, pergunte ao administrador do sistema se
o software necessrio est instalado.
Em outros tipos de servidores, ou se voc no souber qual o tipo do seu servidor, pergunte ao administrador do
sistema qual opo deve ser usada.
Alguns servidores so configurados para examinar todos os arquivos e verificar se eles contm incluses de
servidor. Outros so configurados para examinar somente arquivos com uma extenso especfica, como .shtml,
.shtm ou .inc. Se uma incluso de servidor no estiver funcionando, pergunte ao administrador do sistema se voc
precisa usar uma extenso especial no nome do arquivo que usa a incluso. (Por exemplo, se o nome do arquivo for
canoe.html, pode ser que voc precise renome-lo para canoe.shtml.) Se voc deseja que seus arquivos retenham as
extenses .html ou .htm, pea ao administrador do sistema para configurar o servidor de modo que ele procure
incluses de servidor em todos os arquivos (e no apenas nos arquivos com uma extenso especfica). A procura de
incluses de servidor em um arquivo leva algum tempo. Portanto, as pginas que o servidor analisa demoram um
pouco mais para serem atendidas do que as outras pginas e alguns administradores no permitem a anlise de
todos os arquivos.
Se ele for um servidor Web Apache, selecione Virtual. No Apache, o tipo Virtual funciona em todos os casos,
enquanto o tipo Arquivo funciona somente em alguns casos.
Se ele for um Microsoft Internet Information Server (IIS), selecione Arquivo. (O tipo Virtual funciona apenas com
o IIS em determinadas circunstncias.)
Nota: Infelizmente, o IIS no permitir a incluso de um arquivo em uma pasta acima da pasta atual na hierarquia de
pastas, a menos que um software especial tenha sido instalado no servidor. Se voc precisa incluir um arquivo de uma
pasta localizada no topo da hierarquia de pastas em um servidor IIS, pergunte ao administrador do sistema se o software
necessrio est instalado.
Em outros tipos de servidores, ou se voc no souber qual o tipo do seu servidor, pergunte ao administrador do
sistema qual opo deve ser usada.
de propriedades.
O arquivo includo aberto em uma nova janela Documento.
2 Edite o arquivo e salve-o.
As alteraes se refletem imediatamente no documento atual e em qualquer documento subseqente que voc abrir
que inclua o arquivo.
3 Carregue o arquivo de incluso para o site remoto se necessrio.
A caixa de dilogo do Editor de bibliotecas de tags exibida. (As opes desta caixa de dilogo mudam de acordo com
a tag selecionada.)
2 Fecha o Editor de bibliotecas de tags da seguinte maneira:
biblioteca de tags.
2 Na caixa Nome da biblioteca, digite um nome (por exemplo, Tags diversas) e clique em OK.
atributos.
2 Selecione o menu pop-up Biblioteca de tags e selecione uma biblioteca de tags.
3 No menu pop-up Tag, selecione uma tag.
4 Digite o nome do novo atributo. Para adicionar mais de um atributo, separe os nomes dos atributos com uma
lista Tags.
Nota: As propriedades das bibliotecas de tags aparecem somente quando uma biblioteca de tags selecionada. As
bibliotecas de tags so representadas pelas pastas de nvel superior na lista Tags; por exemplo, a pasta de tags HTML
representa uma biblioteca de tags, enquanto a pasta abbr da pasta de tags HTML representa uma tag.
2 Na lista Usado em, selecione cada tipo de documento que deve usar a biblioteca de tags.
Os tipos de documento que voc seleciona aqui determinam quais tipos de documento fornecem dicas de cdigo para
a biblioteca de tags especificada. Por exemplo, se a opo HTML no estiver selecionada para um determinada
biblioteca de tags, as dicas de cdigo dessa biblioteca aparecero em arquivos HTML.
3 (Opcional) Digite o prefixo das tags na caixa Prefixo da tag.
Nota: Um prefixo usado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas
bibliotecas de tags no usam prefixos.
4 Clique em OK.
minsculas.
Se voc selecionar Maisculas e minsculas, a caixa de dilogo Nome do atributo em maisc./minsc. Digite o atributo
respeitando o uso de maisculas/minsculas que o Dreamweaver deve usar ao inseri-lo (por exemplo, onClick e
clique em OK.
Clique no link Definir padro para definir o uso padro de maisculas/minsculas de todos os nomes de atributo.
3 No menu pop-up Tipo de atributo, selecione o tipo do atributo.
Se voc selecionar Enumerado, digite cada valor permitido para o atributo na caixa Valores. Separe os valores com
vrgulas, mas sem espaos. Por exemplo, os valores enumerados do atributo showborder da tag cfchart so listados
como yes,no.
Nota: Um prefixo usado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas
bibliotecas de tags no usam prefixos.
5 Clique em OK.
3 Clique no boto de adio (+), selecione uma das seguintes opes e clique em OK:
Para importar todas as tags personalizadas do ASP.NET do servidor de aplicativo, selecione ASP.NET > Importar
todas as tags personalizadas do ASP.NET.
Para importar apenas determinadas tags personalizadas do servidor de aplicativo, selecione ASP.NET > Importar
todas as tags personalizadas do ASP.NET selecionadas. Mantenha pressionada a tecla Control (Windows) ou
mantenha pressionada a tecla Command (Macintosh) enquanto clica nas tags da lista.
servidor (web.xml.)
4 Clique no boto Procurar ou digite um nome para o arquivo que contm a biblioteca de tags.
5 Digite um URI para identificar a biblioteca de tags.
O URI (Localizador uniforme de recursos) geralmente consiste no URL da organizao que mantm a biblioteca de
tags. O URL no usado para visualizar o site da organizao. Ele usado para identificar exclusivamente a biblioteca
de tags.
6 (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar
O URI (Localizador uniforme de recursos) geralmente consiste no URL da organizao que mantm a biblioteca de
tags. O URL no usado para visualizar o site da organizao. Ele usado para identificar exclusivamente a biblioteca
de tags.
6 (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar
346
organizados em categorias do cliente e do servidor. Os eventos de cada categoria esto em uma lista que pode ser
expandida. Mostrar eventos definidos a visualizao padro.
Mostrar todos os eventos Exibe uma lista em ordem alfabtica de todos os eventos de uma determinada categoria.
Adicionar comportamento (+) Exibe um menu de aes que podem ser anexadas ao elemento selecionado atualmente.
Quando uma ao selecionada nessa lista, uma caixa de dilogo aparece na qual possvel especificar parmetros para
a ao. Se todas as aes estiverem esmaecidas, nenhum evento poder ser gerado pelo elemento selecionado.
Remover evento () Remove o evento e a ao selecionados da lista de comportamentos.
Botes de seta para cima e para baixo Mova a ao selecionada para cima ou para baixo na lista de comportamentos
para um evento especfico. Voc pode alterar a ordem das aes somente para um evento especfico; por exemplo,
possvel alterar a ordem em que vrias aes ocorrem para o evento onLoad, mas todas as aes de onLoad
permanecem juntas na lista de comportamentos. Os botes de seta esto desativados para aes que no podem ser
movidas para cima ou para baixo na lista.
Eventos Exibe um menu pop-up, exibido somente quando um evento selecionado, de todos os eventos que podem
acionar a ao (esse menu aparece quando voc clica no boto de seta ao lado do nome do evento selecionado). Eventos
diferentes podem aparecer dependendo do objeto selecionado. Se os eventos esperados no aparecerem, verifique se o
elemento de pgina ou tag correto est selecionado. (Para selecionar uma tag especfica, use o seletor de tags no canto
inferior esquerdo da janela Documento.)
Nota: Os nomes de evento entre parnteses esto disponveis somente para links; a seleo de um desses nomes de evento
adiciona automaticamente um link nulo ao elemento de pgina selecionado e anexa o comportamento a esse link e no
ao elemento propriamente dito. O link nulo especificado como href="javascript:;" no cdigo HTML.
Sobre eventos
Cada navegador fornece um conjunto de eventos que podem ser associados s aes listadas no menu Aes (+) do
painel Comportamento. Quando um visitante de sua pgina da Web interage com a pgina (por exemplo, clicando em
uma imagem), o navegador gera eventos; esses eventos podem ser usados para chamar funes JavaScript que
executam uma ao. O Dreamweaver fornece muitas aes comuns que podem ser acionadas por esses eventos.
Para obter os nomes e as descries dos eventos fornecidos por cada navegador, acesse o Centro de suporte do
Dreamweaver em www.adobe.com/go/dreamweaver_support_br.
Eventos diferentes podem aparecer no menu Eventos dependendo do objeto selecionado. Para saber quais eventos so
suportados por um determinado navegador para um determinado elemento de pgina, insira o elemento de pgina no
seu documento e anexe um comportamento a ele; em seguida, observe o menu Eventos no painel Comportamentos.
(Por padro, os eventos so da lista de eventos do HTML 4.01 e so suportados pela maioria dos navegadores
modernos.) Os eventos podem ser desativados se os objetos relevantes ainda no existirem na pgina ou se o objeto
selecionado no puder receber eventos. Se os eventos esperados no aparecerem, voc dever verificar se o objeto
correto est selecionado.
Se voc estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecero entre
parnteses. Esses eventos esto disponveis somente para links. Quando um deles selecionado, o Dreamweaver coloca
uma tag <a> antes e depois da imagem para definir um link nulo. O link nulo representado por javascript:; na
caixa Link do Inspetor de propriedades. Voc pode alterar o valor do link se desejar transform-lo em um link real para
outra pgina, mas se o link do JavaScript for excludo sem ser substitudo por outro link, o comportamento ser
removido.
Para ver quais tags podem ser usadas com um determinado evento em um determinado navegador, procure o evento
em um dos arquivos da pasta Dreamweaver/Configurao/Comportamentos/Eventos.
Aplicar um comportamento
Voc pode anexar comportamentos ao documento inteiro (isto , tag <body>) ou a links, imagens, elementos de
formulrio e diversos outros elementos HTML.
O navegador de destino selecionado determina quais eventos so suportados para um determinado elemento.
possvel especificar mais de uma ao para cada evento. As aes ocorrem na ordem em que esto listadas na coluna
Aes do painel Comportamentos, mas essa ordem pode ser alterada.
1 Selecione um elemento na pgina, como uma imagem ou um link.
Para anexar um comportamento pgina inteira, clique na tag <body> no seletor de tags, no canto inferior esquerdo
da janela Documento.
2 Escolha Janela > Comportamentos.
3 Clique no boto de adio (+) e selecione uma ao no menu Adicionar comportamento.
As aes que esto desativadas no menu no podem ser escolhidas. Elas podem estar desativadas porque um objeto
necessrio no existe no documento atual. Por exemplo, a ao Controlar Shockwave ou SWF estar desativada se o
documento no contiver nenhum arquivo SWF ou Shockwave.
Quando uma ao selecionada, uma caixa de dilogo aparece exibindo parmetros e instrues para a ao.
4 Insira os parmetros da ao e clique em OK.
Todas as aes fornecidas no Dreamweaver funcionam em navegadores modernos. Algumas aes no funcionam em
navegadores mais antigos, mas no provocaro erros.
Nota: Os elementos de destino requerem uma ID exclusiva. Por exemplo, se desejar aplicar o comportamento Trocar
imagem em uma imagem, ser necessrio fornecer uma ID. Se voc no especificar uma ID para o elemento, o
Dreamweaver especificar uma automaticamente.
5 O evento padro que acionar a ao aparece na coluna Eventos. Se no for o evento desejado, selecione outro no
menu pop-up Eventos. (Para abrir o menu Eventos, selecione um evento ou uma ao no painel Comportamentos
e clique na seta para baixo preta que aparece entre o nome do evento e o nome da ao.)
Para editar os parmetros de uma ao, clique duas vezes no nome da ao ou selecione-a e pressione Enter
(Windows) ou Return (Macintosh); em seguida, altere os parmetros na caixa de dilogo e clique em OK.
Para alterar a ordem das aes de um determinado evento, selecione uma ao e clique na seta para cima ou para
baixo. Se preferir, selecione a ao e corte e cole-a no local desejado entre as outras aes.
Atualizar um comportamento
1 Selecione um elemento que apresenta o comportamento anexado a ele.
2 Escolha Janela > Comportamentos e clique duas vezes no comportamento.
3 Faa as alteraes e clique em OK na caixa de dilogo do comportamento.
Todas as ocorrncias desse comportamento na pgina sero atualizadas. Se outras pginas do site tiverem esse
comportamento, atualize-as uma por uma.
Para obter mais informaes, consulte Adicionar e gerenciar extenses no Dreamweaver na pgina 35.
Por exemplo, para criar um boto Voltar, voc pode digitar if (history.length > 0){history.back()}. Se voc
tiver includo o cdigo em uma funo, digite somente o nome da funo (por exemplo, hGoBack()).
3 Clique em OK e verifique se o evento padro est correto.
Comportamentos.
2 No menu Tipo de elemento, selecione um tipo de elemento para exibir todos os elementos identificados do tipo em
questo.
3 Selecione um elemento no menu ID do elemento.
4 Selecione uma propriedade no menu Propriedade ou insira o nome da propriedade na caixa.
5 Insira o novo valor da nova propriedade no campo Novo valor.
6 Clique em OK e verifique se o evento padro est correto.
Voc deve usar o nome exato do plug-in conforme especificado em negrito na pgina Sobre plug-ins no Netscape
Navigator. (No Windows, selecione o comando Ajuda > Sobre plug-ins do Navigator; no Mac OS, selecione Sobre
plug-ins no menu Apple.)
3 Na caixa Se localizado, v para URL, especifique uma URL para os visitantes que tm o plug-in.
Se for um URL remoto, inclua o prefixo http:// no endereo. Se o campo ficar em branco, os visitantes permanecero
na mesma pgina.
4 Na caixa Do contrrio, v para URL, especifique um URL alternativo para os visitantes que no tm o plug-in. Se o
no permitida, o visitante enviado para o URL listado na caixa Do contrrio. Para enviar o visitante para o
primeiro URL (Se localizado), selecione a opo Sempre ir para o primeiro URL se a deteco no for possvel.
Quando selecionada, essa opo supe que o visitante tem o plug-in, a no ser que o navegador indique
explicitamente que o plug-in no est presente. Em geral, selecione essa opo se o contedo do plug-in fizer parte
de sua pgina; caso contrrio, deixe-a desmarcada.
Nota: Essa opo aplica-se somente ao Internet Explorer; o Netscape Navigator sempre pode detectar plug-ins.
6 Clique em OK e verifique se o evento padro est correto.
Se a opo Arrastar elemento AP no estiver disponvel, voc provavelmente tem um elemento AP selecionado.
4 No menu pop-up Elemento AP, selecione o elemento AP.
5 Selecione Restrito ou Irrestrito no menu pop-up Movimento.
O movimento irrestrito apropriado para quebra-cabeas e outros jogos de arrastar e soltar. Para controles deslizantes
e cenrios mveis, como gavetas de arquivo, cortinas e mini venezianas, selecione o movimento restrito.
6 Para o movimento restrito, insira os valores (em pixels) nas caixas Para cima, Para baixo, Para a esquerda e Para a
direita.
Os valores esto relacionados posio inicial do elemento AP. Para restringir o movimento em uma regio
retangular, insira valores positivos nas quatro caixas. Para permitir somente o movimento vertical, insira valores
positivos em Para cima e Para baixo e 0 em Para a esquerda e Para a direita. Para permitir somente o movimento
horizontal, insira valores positivos em Para a esquerda e Para a direita e 0 em Para cima e Para baixo.
7 Insira valores (em pixels) para o destino de liberao nas caixas Para a esquerda e Superior.
O destino de liberao o ponto para o qual o visitante deve arrastar o elemento AP. Um elemento AP atinge o destino
de liberao quando suas coordenadas esquerda e superior correspondem aos valores inseridos nas caixas Para a
esquerda e Superior. Os valores esto relacionados ao canto superior esquerdo da janela do navegador. Clique em
Obter posio atual para preencher automaticamente as caixas de texto com a posio atual do elemento AP.
8 Insira um valor (em pixels) na caixa Encaixar se estiver em para determinar a que distncia o visitante deve estar
do elemento AP, acompanhe o movimento do elemento enquanto est sendo arrastado, acione uma ao quando
o elemento AP for solto e clique na aba Avanado.
10 Para especificar se o visitante deve clicar em uma rea especfica do elemento AP para arrast-lo, selecione rea
dentro do elemento no menu Ala de arrastamento; em seguida, insira as coordenadas esquerda e superior e a
largura e a altura da ala de arrastamento.
Essa opo til quando a imagem dentro do elemento AP contm um elemento que sugere o arrastamento, como
uma barra de ttulo ou o puxador de uma gaveta. No defina essa opo se desejar que o visitante clique em qualquer
lugar no elemento AP para arrast-lo.
11 Selecione todas as opes de Quando estiver arrastando que deseja usar:
Selecione Trazer elemento para frente se for necessrio mover o elemento AP para frente da ordem de
empilhamento enquanto estiver sendo arrastado. Se voc selecionar essa opo, use o menu pop-up para
determinar se o elemento AP deve ficar na frente ou ser restaurado para sua posio original na ordem de
empilhamento.
Insira o cdigo JavaScript ou o nome de uma funo (por exemplo, monitorAPelement()) na caixa Chamar
JavaScript para executar repetidas vezes o cdigo ou a funo enquanto o elemento AP estiver sendo arrastado. Por
exemplo, voc pode gravar uma funo que monitora as coordenadas do elemento AP e exibe dicas como est
ficando quente ou est bem longe do destino de liberao em uma caixa de texto.
12 Insira o cdigo JavaScript ou o nome de uma funo (por exemplo, evaluateAPelementPos()) na segunda caixa
Chamar JavaScript para executar o cdigo ou a funo quando o elemento AP for solto. Selecione Somente se
encaixado caso seja necessrio executar o JavaScript somente se o elemento AP tiver chegado ao destino de
liberao.
13 Clique em OK e verifique se o evento padro est correto.
Em vez de exibir os valores de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulrio, voc pode usar esses valores
de diversas outras maneiras. Por exemplo, possvel gravar uma funo que exibe uma mensagem no campo de
formulrio dependendo da proximidade do valor com relao zona de liberao ou chamar outra funo para
mostrar ou ocultar um elemento AP dependendo do valor.
especialmente til para ler a propriedade MM_SNAPPED quando existem vrios elementos PA na pgina e todos devem
atingir seus destinos antes que o visitante possa passar para a prxima pgina ou tarefa. Por exemplo, voc pode gravar
uma funo para contar quantos elementos PA tm um valor MM_SNAPPED igual a true e cham-la sempre que um
elemento PA for solto. Quando a contagem de encaixes atingir o nmero desejado, voc pode direcionar o visitante
para a prxima pgina ou exibir uma mensagem de xito.
A lista Abrir em relaciona automaticamente os nomes de todos os quadros do conjunto de molduras atual, bem como
da janela principal. Se no houver nenhum quadro, a janela principal ser a nica opo.
Nota: Esse comportamento pode produzir resultados inesperados se algum quadro for superior, estiver em branco, for
gerado automaticamente ou pai. s vezes, os navegadores trocam incorretamente esses nomes por nomes de destino
reservados.
3 Clique em Procurar para selecionar um documento a ser aberto ou insira o caminho e o nome de arquivo do
Voc pode editar e reorganizar itens de menu, alterar os arquivos a serem ignorados e alterar a janela em que esses
arquivos devem ser abertos clicando duas vezes em um comportamento Menu de salto existente no painel
Comportamentos.
Voc pode editar os itens no menu, assim como faria em qualquer outro menu, selecionando o menu e usando o
boto Listar valores do Inspetor de propriedades.
1 Crie um objeto de menu de salto se ainda no houver um no documento.
2 Selecione o objeto e escolha Menu de salto no menu Adicionar comportamento do painel Comportamentos.
3 Faa as alteraes desejadas na caixa de dilogo Menu de salto e clique em OK.
Comportamentos.
2 Clique em Procurar para selecionar um arquivo ou insira o URL que deseja exibir.
3 Defina as opes para a largura e a altura da janela (em pixels) e para a incorporao de vrias barras de ferramentas,
barras de rolagem, alas de redimensionamento e o aspecto. Nomeie a janela (no use nenhum espao ou caractere
especial) se desejar que ela seja o destino dos links ou se desejar control-la com JavaScript.
4 Clique em OK e verifique se o evento padro est correto.
Nota: O navegador controla a aparncia do alerta. Se desejar ter mais controle sobre a aparncia, avalie a possibilidade
de usar o comportamento Abrir janela do navegador.
1 Selecione um objeto e escolha Mensagem pop-up no menu Adicionar comportamento do painel Comportamentos.
2 Insira sua mensagem na caixa Mensagem.
3 Clique em OK e verifique se o evento padro est correto.
Comportamentos.
2 Clique em Procurar para selecionar um arquivo de imagem ou insira o caminho e o nome de arquivo de uma
imagens.
4 Repita as etapas 2 e 3 para todas as imagens restantes que deseja pr-carregar na pgina atual.
5 Para remover uma imagem da lista Pr-carregar imagens, selecione-a e clique no boto de subtrao (-).
6 Clique em OK e verifique se o evento padro est correto.
Embora o comportamento Definir texto do quadro substitua a formatao de um quadro, voc pode selecionar
Preservar cor de fundo para preservar os atributos de cor de fundo da pgina e do texto.
Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida
no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma
barra antes (\{).
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
1 Selecione um objeto e escolha Definir texto > Definir texto do quadro no menu Adicionar comportamento do
painel Comportamentos.
2 Na caixa de dilogo Definir texto do quadro, selecione o quadro de destino no menu Quadro.
3 Clique no boto Obter HTML atual para copiar o contedo atual da seo body do quadro de destino.
4 Insira uma mensagem na caixa Novo HTML.
5 Clique em OK e verifique se o evento padro est correto.
1 Selecione um objeto e, em seguida, Definir texto > Definir texto do continer no menu Adicionar comportamento
do painel Comportamentos.
2 Na caixa de dilogo Definir texto do recipiente, use o menu Recipiente para selecionar o elemento de destino.
3 Insira o novo texto ou HTML na caixa Novo HTML.
4 Clique em OK e verifique se o evento padro est correto.
1 Selecione um objeto e escolha Definir texto > Definir texto da barra de status no menu Adicionar comportamento
do painel Comportamentos.
2 Na caixa de dilogo Definir texto da barra de status, digite sua mensagem na caixa Mensagem.
(no use o mesmo nome para vrios elementos da mesma pgina, mesmo se estiverem em formulrios diferentes).
do painel Comportamentos.
2 Selecione o campo de texto de destino no menu Campo de texto e insira o novo texto.
Comportamentos.
Se a opo Mostrar/ocultar elementos no estiver disponvel, voc provavelmente tem um elemento PA selecionado.
Como os elementos PA no aceitam eventos nos navegadores 4.0, selecione um objeto diferente, como a tag <body>
ou uma tag link (<a>).
2 Na lista Elementos, selecione o elemento que deseja mostrar ou ocultar e clique em Mostrar, Ocultar ou Restaurar
Nota: Como somente o atributo src afetado por esse comportamento, voc deve trocar uma imagem que tenha as
mesmas dimenses (altura e largura) da original. Caso contrrio, a imagem trocada reduzida ou ampliada para ficar
com as dimenses da imagem original.
Existe tambm o comportamento Restaurar imagem trocada, que restaura o ltimo conjunto de imagens trocadas para
os arquivos de origem anteriores. Esse comportamento adicionado automaticamente sempre que o comportamento
Trocar imagem anexado a um objeto; se a opo Restaurar ficar selecionada durante a adio de Trocar imagem,
nunca selecione o comportamento Restaurar imagem trocada manualmente.
1 Selecione Inserir > Imagem ou clique no boto Imagem, no painel Inserir, para inserir uma imagem.
2 No Inspetor de propriedades, insira um nome para a imagem na caixa de texto esquerda.
No necessrio nomear imagens; elas so nomeadas automaticamente quando voc anexa o comportamento a um
objeto. No entanto, mais fcil diferenciar imagens na caixa de dilogo Trocar imagem nomeando todas as imagens
com antecedncia.
3 Repita as etapas 1 e 2 para inserir imagens adicionais.
4 Selecione um objeto (geralmente, a imagem que ser trocada) e escolha Trocar imagem no menu Adicionar
todas as imagens que deseja alterar de uma vez; caso contrrio, a ao Restaurar imagem trocada correspondente
no restaurar todas as imagens.
8 Selecione a opo Pr-carregar imagens para armazenar em cache as novas imagens quando a pgina for carregada.
um campo de texto.
Repita essa etapa para inserir campos de texto adicionais.
3 Escolha um mtodo de validao:
Para validar campos individuais medida que o usurio preenche o formulrio, selecione um campo de texto e
selecione Janela > Comportamentos.
Para validar vrios campos quando o usurio envia o formulrio, clique na tag <form> no seletor de tags, no canto
inferior esquerdo da janela Documento, e escolha Janela > Comportamentos.
4 Selecione Validar formulrio no menu Adicionar comportamento.
Se estiver validando campos individuais, selecione o mesmo campo selecionado na janela Documento na lista
Campos.
8 Se voc tiver optado por validar vrios campos, repita as etapas 6 e 7 para todos os campos adicionais que desejar
validar.
9 Clique em OK.
Se voc estiver validando vrios campos quando o usurio enviar o relatrio, o evento onSubmit aparecer
automaticamente no menu Eventos.
10 Se voc estiver validando campos individuais, verifique se o evento padro onBlur ou onChange. Caso contrrio,
361
destes procedimentos:
Nota: Se o arquivo do Fireworks no estiver no site atual do Dreamweaver, uma mensagem ser exibida perguntando
se voc deseja copiar o arquivo na pasta raiz. Clique em Sim.
Ao selecionar uma imagem que foi exportada a partir do Fireworks, o Inspetor de propriedades identifica a seleo
como uma imagem ou tabela do Fireworks e exibe o nome do arquivo PNG de origem.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na imagem
selecionada e escolha Editar com Fireworks no menu de contexto.
Nota: Se o Fireworks no conseguir localizar o arquivo de origem, voc dever localizar o arquivo PNG de origem. Ao
trabalhar com o arquivo de origem do Fireworks, as alteraes so salvas tanto no arquivo de origem quanto no arquivo
exportado; caso contrrio, somente o arquivo exportado ser atualizado.
4 No Fireworks, edite o arquivo PNG de origem e clique em Concludo.
O Fireworks salva as alteraes no arquivo PNG, exporta a imagem atualizada (ou o HTML e as imagens) e volta ao
Dreamweaver. No Dreamweaver, a imagem ou tabela atualizada exibida.
Para assistir a um tutorial sobre a integrao do Dreamweaver e do Fireworks, consulte
www.adobe.com/go/vid0188_br.
Para criar uma nova imagem de um alocador de espao, necessrio instalar o Dreamweaver e o Fireworks no seu
sistema.
1 Verifique se o Fireworks j est definido como o editor de imagens para arquivos PNG.
2 Na janela Documento, clique no alocador de espao de imagem para selecion-lo.
3 Inicie o Fireworks no modo Edio a partir do Dreamweaver seguindo um destes procedimentos:
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no alocador de
espao de imagem e, em seguida, selecione Criar imagem no Fireworks.
4 Use as opes do Fireworks para criar a imagem.
O Fireworks reconhece as seguintes configuraes de alocador de espao de imagem, que podem ser definidas
enquanto voc trabalha com o alocador no Dreamweaver: tamanho da imagem (relacionado ao tamanho de tela de
desenho do Fireworks), ID da imagem (usada pelo Fireworks como o nome de documento padro para o arquivo de
origem e o arquivo de exportao criados) e o alinhamento do texto. O Fireworks tambm reconhece links e algumas
sobreposies (como imagem trocada, menu pop-up e texto) que voc anexou ao alocador de espao de imagem ao
trabalhar no Dreamweaver.
Nota: Embora o Fireworks no mostre os links adicionados a um alocador de espao de imagem, eles so preservados.
Se voc desenhar um ponto ativo e adicionar um link no Fireworks, o link adicionado ao alocador de imagem no
Dreamweaver no ser excludo; no entanto, se uma fatia da nova imagem for cortada no Fireworks, o link no
documento do Dreamweaver ser excludo quando o alocador de espao de imagem for substitudo.
O Fireworks no reconhece as seguintes configuraes de alocador de espao de imagem: alinhamento da imagem, cor,
Vspace e Hspace e mapas. Essas configuraes esto desativadas no Inspetor de propriedades do alocador de espao
de imagem.
5 Quando terminar, clique em Concludo para exibir a solicitao para salvar.
6 Na caixa de texto Salvar em, selecione a pasta definida como a pasta do site local do Dreamweaver.
Se o alocador de espao de imagem tiver sido nomeado quando foi inserido no documento do Dreamweaver, o
Fireworks preencher a caixa Nome do arquivo com esse nome. Voc pode alterar o nome.
7 Clique em Salvar para salvar o arquivo PNG.
A caixa de dilogo Exportar exibida. Use essa caixa de dilogo para exportar a imagem como um arquivo GIF ou
JPEG ou, no caso de imagens segmentadas, como HTML e imagens.
8 Em Salvar em, selecione a pasta do site local do Dreamweaver.
A caixa Nome exibida automaticamente com o nome usado para o arquivo PNG. Voc pode alterar o nome.
9 Em Salvar como tipo, selecione o tipo do arquivo que deseja exportar; por exemplo, Apenas imagens ou HTML e
imagens.
10 Clique em Salvar para salvar o arquivo exportado.
O arquivo salvo e o foco volta para o Dreamweaver. No documento do Dreamweaver, o arquivo exportado ou a tabela
do Fireworks substitui o alocador de espao de imagem.
Inspetor de propriedades.
O arquivo PNG de origem aberto no Fireworks.
2 No Fireworks, edite o menu com o Editor de menu pop-up e clique em Concludo na barra de ferramentas do
Fireworks.
O Fireworks envia o menu pop-up editado novamente para o Dreamweaver.
Se voc tiver criado um menu pop-up no Fireworks MX 2004 ou anterior, poder edit-lo no Dreamweaver usando a
caixa de dilogo Mostrar menu pop-up, disponvel no painel Comportamentos.
um aplicativo externo:
Sempre usar o PNG de origem Abra automaticamente o arquivo PNG do Fireworks definido na Design Note como a
origem da imagem colocada. As atualizaes so feitas no arquivo PNG de origem e na imagem colocada
correspondente.
Nunca usar o PNG de origem Abra automaticamente a imagem colocada do Fireworks, independentemente da
Fireworks.
2 Siga um destes procedimentos:
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele ser excludo permanentemente, no ser movido para
a Lixeira.
5 Clique em OK para inserir o cdigo HTML, junto com as imagens associadas, as fatias e JavaScript, no documento
do Dreamweaver.
solicitado, especifique a pasta do site do Dreamweaver como destino das imagens exportadas.
O assistente exporta as imagens para o destino especificado e copia o cdigo HTML na rea de transferncia.
3 No documento do Dreamweaver, coloque o ponto de insero onde voc deseja colar o cdigo HTML e selecione
O Fireworks atualiza o cdigo HTML e JavaScript no documento do Dreamweaver. O Fireworks tambm exporta as
imagens atualizadas associadas ao HTML e coloca essas imagens na pasta de destino especificada.
Se o Fireworks no conseguir encontrar o cdigo HTML correspondente a ser atualizado, voc poder inserir o novo
cdigo HTML no documento do Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no comeo do
documento e coloca a tabela ou link HTML da imagem no final.
Objeto inteligente
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do
Objeto Inteligente em vermelho. Ao selecione a imagem da web na Visualizao de design e clicar no boto Atualizar
do original no Inspetor de propriedades, a imagem atualizada automaticamente, refletindo quaisquer alteraes
feitas no arquivo original do Photoshop.
Ao usar o fluxo de trabalho de Objetos Inteligentes, voc no precisa abrir o Photoshop para atualizar uma imagem da
Web. Alm disso, quaisquer atualizaes feitas em um Objeto Inteligente no Dreamweaver so no destrutivas. Ou
seja, voc pode alterar a verso da Web da imagem em sua pgina enquanto mantm a imagem original do Photoshop
intacta.
Voc tambm pode atualizar um Objeto Inteligente sem selecionar a imagem da Web na visualizao de Design. O
painel Recursos permite que voc atualize todos os Objetos Inteligentes, incluindo as imagens que podem no ser
selecionveis na janela Documento (por exemplo, imagens de segundo plano CSS).
Configuraes de otimizao de imagens
Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos Inteligentes, voc pode
especificar configuraes de otimizao na caixa de dilogo Visualizao da imagem. Essa caixa de dilogo permite que
voc defina aspectos como o formato da imagem, qualidade da imagem etc. Se voc estiver copiando uma fatia ou uma
camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto Inteligente pela primeira vez, o
Dreamweaver exibir essa caixa de dilogo de modo que voc possa criar facilmente a imagem da Web.
Se voc copiar e colar uma atualizao em uma determinada fatia ou camada, o Dreamweaver manter as
configuraes originais e recriar a imagem da Web com essas configuraes. Da mesma maneira, ao atualizar um
Objeto Inteligente usando o Inspetor de propriedades, o Dreamweaver usar as mesmas configuraes usadas quando
voc inseriu a imagem pela primeira vez. Voc pode alterar as configuraes de imagem a qualquer momento
selecionando a imagem da Web na Visualizao de design e, ento, clicando no boto Editar configuraes de imagem
no Inspetor de propriedades.
inserir a imagem.
2 Selecione Inserir > Imagem.
Voc tambm pode arrastar o arquivo PSD para a pgina a partir do painel Arquivos, caso esteja armazenando os
arquivos do Photoshop em seu site. Se essa for a sua opo, ignore a prxima etapa.
3 Localize o arquivo de imagem PSD do Photoshop na caixa de dilogo Selecionar origem da imagem clicando no
clique em OK.
5 Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.
O Dreamweaver cria os objetos inteligentes com base nas configuraes de otimizao selecionadas e coloca em sua
pgina a verso habilitada para a Web da imagem. O objeto inteligente mantm uma conexo ativa com a imagem
original e permite que voc saiba quando ambas esto fora de sincronia.
Nota: Se voc decidir alterar posteriormente as configuraes de otimizao para uma imagem colocada em suas
pginas, pode selecionar a imagem, clicar no boto Editar configuraes de imagem no Inspetor de propriedades da
imagem e fazer as alteraes na caixa de dilogo Visualizao de imagem. As alteraes feitas na caixa de dilogo
Visualizao de imagem so aplicadas de forma no destrutiva. O Dreamweaver nunca modifica o arquivo original do
Photoshop e sempre recria a imagem da Web com base nos dados originais.
Para assistir a um tutorial em vdeo sobre o trabalho com Objetos inteligentes do Photoshop, consulte
www.adobe.com/go/lrvid4043_dw_br.
inteligente na janela Documento e depois clique no boto Atualizar do original no Inspetor de propriedades.
Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.
cone de Objeto inteligente no canto superior esquerdo da imagem. Imagens normais no possuem este cone.
4 Em cada objeto inteligente que voc quiser atualizar, clique com o boto direito do mouse sobre o nome do arquivo
e selecione Atualizar do original. Voc tambm pode clicar mantendo a tecla Control pressionada para selecionar
vrios nomes de arquivos e atualizar todos de uma vez.
Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.
imagem. Voc pode manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta.
2 Clique no boto Atualizar do original no Inspetor de propriedades.
Quando voc atualiza o objeto inteligente, a imagem da web, de forma no destrutiva, reprocessa o novo tamanho com
base no contedo atual do arquivo original e das configuraes originais de otimizao.
Nota: Se voc alterou o tamanho da imagem no Photoshop, precisar redimensionar o tamanho da imagem da Web no
Dreamweaver. O Dreamweaver atualiza um objeto inteligente somente com base no contedo do arquivo original do
Photoshop e no em seu tamanho. Para sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo
original do Photoshop, clique com o boto direito do mouse na imagem e selecione Redefinir tamanho para original.
Descrio
Ao recomendada
Imagens sincronizadas
Nenhum
As dimenses da imagem
da Web so diferentes da
largura e altura do HTML
selecionado
As dimenses do ativo
Os atributos de largura e altura do cdigo HTML so diferentes
original so muito
das dimenses de largura e altura do arquivo original do
pequenas para a largura e a Photoshop. A imagem da Web pode aparecer como pixels.
altura do HTML selecionado
Ativo original no
encontrado
Nota: Embora a funo Atualizar do original no esteja disponvel para imagens coladas, voc ainda pode abrir e editar
o arquivo original do Photoshop selecionando a imagem colada e clicando no boto Editar do Inspetor de propriedades.
1 No Photoshop, execute um dos procedimentos a seguir:
Copie toda ou parte de uma nica camada usando a ferramenta Letreiro para selecionar a parte que deseja copiar
e escolha Editar > Copiar. Somente a camada ativa da rea selecionada copiada na rea de transferncia. Se houver
efeitos baseados em camadas, eles no sero copiados.
Copie e mescle vrias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha
Editar > Copiar parte mesclada. Isso nivela e copia todas as camadas ativas e inferiores da rea selecionada na rea
de transferncia. Se houver efeitos baseados em camadas associados, eles no sero copiados.
Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar.
Isso nivela e copia todas as camadas ativas e inferiores da fatia na rea de transferncia.
Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.
2 No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja
inserir a imagem.
3 Selecione Editar > Colar.
4 Na caixa de dilogo Visualizao da imagem, ajuste as configuraes de otimizao como necessrio e clique em OK.
5 Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.
O Dreamweaver define a imagem de acordo com as configuraes de otimizao e coloca uma verso habilitada para
a Web da imagem na sua pgina. As informaes sobre a imagem, como o local do arquivo PSD original, so salvas em
uma Design Note, independentemente de as Design Notes estarem ativadas para seu site. A Design Note permite que
voc volte para editar o arquivo de origem do Photoshop a partir do Dreamweaver.
Para assistir a um tutorial sobre como copiar e colar entre aplicativos diferentes, incluindo o Dreamweaver e o
Photoshop, consulte www.adobe.com/go/vid0193_br.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma
imagem, escolha Editar original com no menu de contexto e, em seguida, escolha Photoshop.
Nota: Esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para
arquivos de imagem PSD. Voc tambm pode definir o Photoshop como o editor padro para os tipos de arquivo JPEG,
GIF e PNG.
2 Editar o arquivo no Photoshop.
3 Retorne ao Dreamweaver e cole a imagem ou seleo atualizada em sua pgina.
Se quiser reotimizar a imagem a qualquer momento, voc pode selecionar a imagem e clicar no boto Editar
configuraes de imagem no Inspetor de propriedades.
Nota: Apenas a verso exportada do arquivo de imagem afetada, independentemente das configuraes selecionadas.
Os arquivos originais PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados.
A caixa de dilogo Visualizao da imagem tem trs sees:
A aba Opes permite definir o formato de arquivo a ser usado e as preferncias, como cores.
A aba Arquivo permite definir o fator de escala e o tamanho do arquivo alvo da imagem.
O painel Visualizar permite ver uma verso da imagem com as configuraes atuais.
Muitas opes de imagem esto disponveis na aba Opes e elas variam de acordo com o formato de arquivos
escolhido. Vrios conjuntos de opes de imagem GIF e JPEG esto disponveis para sua praticidade no menu pop-up
Configuraes salvas.
Opes de imagem JPEG
Para otimizar uma imagem JPEG, defina suas opes de compactao e suavizao. Voc no pode editar a paleta de
cores.
Qualidade Use o controle deslizante para aumentar ou diminuir a qualidade da imagem. Quanto melhor a qualidade,
maior o tamanho do arquivo.
Suavizao Permite aumentar a suavizao conforme necessrio. Imagens com menos qualidade talvez precisem de
Exibio progressiva do navegador Exibe uma imagem inicialmente em baixa resoluo e aumenta progressivamente
apaream como uma mistura da cor ausente. O pontilhamento til especialmente ao exportar imagens com misturas
ou gradientes complexos ou ao exportar imagens fotogrficas para um formato grfico de 8 bpc, como GIF. No
selecionada por padro.
Nota: O Pontilhamento pode aumentar muito o tamanho do arquivo.
Lista de nmero de cores Definido como 256 por padro. O nmero de cores depende do comportamento atual da
paleta. Por exemplo, a paleta "Web 216" exibe somente 216 cores.
Paleta Cor A exibio das cores varia de acordo com o comportamento da paleta e o nmero mximo de cores
selecionados.
Ferramentas da paleta Clique em qualquer pixel da paleta e, em seguida, clique nesses cones para alterar, adicionar
ou excluir cores ou para deixar uma cor transparente, aceita pela Web ou bloqueada.
cones de Selecionar cor de transparncia Esses botes permitem selecionar, adicionar ou remover uma cor da paleta.
Por exemplo, se voc escolher a opo Selecionar cor de transparncia, poder clicar em qualquer pixel da paleta ou
em um ponto de cor no painel de visualizao para deix-la transparente.
Menu pop-up Transparncia Permite definir ndice, Alfa ou Sem transparncia. Uma grade cinza e branca nas
visualizaes de documento indica reas transparentes. Para saber como suas configuraes afetam a imagem, escolha
At 2 ou At 4 na visualizao da imagem e clique em uma imagem que no seja a original.
ndice Use a transparncia de ndice ao exportar imagens GIF que contm reas transparentes. Com a
transparncia de ndice, possvel especificar cores que devem ficar transparentes depois da exportao. A
transparncia de ndice ativa ou desativa pixels com valores de cor especficos.
Alfa Use a transparncia alfa ao exportar imagens PNG de 8 bpc que contm reas transparentes. A transparncia
alfa permite gradientes de transparncia e pixels semi-opacos.
Fosco Permite que voc defina o plano de fundo da imagem. Voc pode manter a transparncia de um arquivo PNG
de 32 bpc clicando no cone de transparncia na caixa de dilogo Fosco. Tambm possvel usar a opo Fosco para
objetos com suavizao de borda que ficam diretamente acima da tela correspondendo a cor fosca com o fundo de
destino.
Remover cores no utilizadas Reduz o tamanho do arquivo removendo as cores que no so utilizadas na imagem.
Exibio entrelaada do navegador Exibe uma imagem entrelaada inicialmente em baixa resoluo e aumenta
assistente tenta atingir o tamanho de arquivo solicitado ajustando o nmero de cores ou o pontilhamento.
Configuraes salvas
O Dreamweaver fornece vrias configuraes para sua praticidade. Dependendo das configuraes salvas escolhidas,
as opes de imagem especficas do tipo de arquivo descritas acima podem variar.
GIF - Web 216 Faz com que todas as cores sejam aceitas pela Web. A paleta de cores contm no mximo 216 cores.
GIF - Websnap 256 Converte cores no aceitas pela Web na cor mais prxima aceita pela Web. A paleta de cores
contm no mximo 256 cores.
GIF - Websnap 128 Converte cores no aceitas pela Web na cor mais prxima aceita pela Web. A paleta de cores
contm no mximo 128 cores.
GIF - Adaptvel 256 A paleta de cores que contm somente as cores reais usadas no grfico. A paleta de cores contm
Arraste a borda pontilhada ao redor da imagem visualizada conforme necessrio. Voc pode arrastar a imagem
dentro das bordas para exibir as reas ocultas.
Selecione uma das configuraes salvas de paleta de cores no menu pop-up Configuraes salvas se desejar usar
um conjunto de opes predefinido.
3 Se a imagem for maior que a rea de visualizao, use a ferramenta de ponteiro para segurar a imagem visualizada
4 Use a ferramenta de corte demarcado para reduzir o tamanho da imagem. Voc talvez precise diminuir o zoom
escolher a ferramenta Zoom e clicar para aplicar mais zoom; para aplicar menos zoom, mantenha pressionada a
tecla Alt enquanto clica (Windows) ou mantenha pressionada a tecla Option enquanto clica (Macintosh).
6 possvel visualizar duas ou quatro otimizaes diferentes clicando no boto At 2 ou At 4, na parte inferior do
Clique no espao reservado para o arquivo SWF para selecion-lo; ento, no Inspetor de propriedades, clique em
Editar.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no espao
reservado para o arquivo SWF, e ento selecione Editar com Flash no menu de contexto.
O Dreamweaver muda o foco para o Flash e o Flash tenta localizar o arquivo de criao do Flash (FLA) para o arquivo
SWF selecionado. Se o Flash no conseguir localizar o arquivo de criao do Flash, ser solicitado que voc o localize.
Nota: se o arquivo FLA ou o arquivo SWF estiver bloqueado, verifique o arquivo no Dreamweaver.
3 No Flash, edite o arquivo FLA. A janela Documento do Flash indica que voc est modificando o arquivo a partir
do Dreamweaver.
4 Quando terminar a edio, clique em Concludo.
O Flash atualiza o arquivo FLA, reexporta-o como um arquivo SWF e encerrado. Ento, o foco retorna ao documento
do Dreamweaver.
Nota: para atualizar o arquivo SWF e manter o Flash aberto, no Flash, selecione Arquivo > Atualizar para
Dreamweaver.
5 Para exibir o arquivo atualizado no documento, clique em Reproduzir no Inspetor de propriedades do
Visualizar, pesquisar, classificar e processar arquivos sem abrir aplicativos individuais do Creative Suite. Voc pode
tambm editar os metadados de arquivos e usar o Adobe Bridge para inserir os arquivos em seus documentos,
projetos ou composies.
Importar e editar fotos de um carto de cmera digital, agrupe as fotos relacionadas em pilhas e abra e edite arquivos
Raw da cmera, sem iniciar o Photoshop.
Sincronizar configuraes de cor entre componentes do Creative Suite gerenciados com cores.
Se for inserida uma imagem habilitada para a Web (JPEG, GIF ou PNG), o Dreamweaver inserir os arquivos de
imagem diretamente na sua pgina e colocar uma cpia na pasta de imagens padro do site.
Se voc inserir um arquivo PSD do Photoshop, ser necessrio definir as configuraes de otimizao para que o
Dreamweaver possa colocar o arquivo na sua pgina.
Se for inserido um arquivo que no seja de imagem, como mp3, PDF ou um tipo de arquivo desconhecido, o
Dreamweaver inserir um link para o arquivo de origem.
Se for inserido um arquivo HTML, o Dreamweaver inserir um link para o arquivo de origem.
(Somente Windows) Se o Microsoft Office estiver instalado e voc estiver inserido um arquivo do Microsoft Word
ou Excel, especifique se deseja inserir o arquivo propriamente dito ou um link para o arquivo de origem. Se desejar
inserir o arquivo, especifique at que ponto a formatao do arquivo deve ser mantida.
arquivo.
2 No Adobe Bridge, selecione o arquivo e escolha Arquivo > Inserir em Dreamweaver.
3 Se o arquivo no estiver na pasta raiz do site, copie-o para essa pasta.
4 Se voc tiver definido Editar > Preferncias > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de
dilogo Atributos de acesso a tag de imagem ser exibida quando imagens habilitadas para a Web, como JPEG e
GIF, forem inseridas.
Nota: Se o ponto de insero estiver na Visualizao de cdigo, o Adobe Bridge ser iniciado normalmente, mas no
poder colocar o arquivo. Os arquivos s podem ser colocados na Visualizao de design.
imagem.
2 Inicie o Adobe Bridge se ainda no estiver aberto.
3 No Adobe Bridge, selecione um ou mais arquivos e arraste-os para a pgina do Dreamweaver.
4 Se o arquivo no estiver na pasta raiz do site, copie-o nessa pasta.
5 Se voc tiver definido Editar > Preferncias > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de
dilogo Atributos de acesso a tag de imagem ser exibida quando imagens aceitas pela Web, como JPEG e GIF,
forem inseridas.
Nota: Se o ponto de insero estiver na Visualizao de cdigo, o Adobe Bridge ser iniciado normalmente, mas no
poder colocar o arquivo. Os arquivos s podem ser colocados na Visualizao de design.
Nota: Se o Dreamweaver j estiver aberto, essa ao ativa o programa. Se o Dreamweaver no estiver aberto, o Adobe
Bridge o inicia, ignorando a tela de boas-vindas.
Use as seguintes dicas para garantir que as pginas da Web criadas no Dreamweaver sejam exibidas corretamente em
dispositivos mveis:
Se voc usar estrutura do Adobe Spry para desenvolver contedo, adicione a seguinte linha de HTML s pginas
para que elas possam renderizar CSS e executar JavaScript corretamente no Device Central:
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
A Renderizao em Tela Pequena do Opera no oferece suporte a quadros, pop-ups, sublinhados, tachados, linhas
sobrepostas, intermitncias e letreiros. Tente evitar esses elementos de projeto.
Mantenha as pginas da Web simples para dispositivos mveis. Em especial, use um nmero mnimo de fontes,
tamanhos de fontes e cores.
A reduo de tamanhos de imagem e a reduo do nmero de cores necessrias aumentam as chances de que as
imagens sejam exibidas como planejado. Use CSS ou HTML para especificar uma altura e uma largura exatas para
cada imagem usada. Fornea texto alternativo para todas as imagens.
Nota: o site da Web do software Opera uma boa fonte de informaes sobre a otimizao de pginas da Web para
dispositivos mveis.
Para obter mais dicas e tcnicas sobre como criar contedo para celulares e outros dispositivos mveis, consulte
www.adobe.com/go/learn_cs_mobilewiki_br.
ConnectNow.
Para obter instrues completas sobre o uso do ConnectNow, consulte
http://help.adobe.com/en_US/Acrobat.com/ConnectNow/index.html.
Para assistir a um tutorial em vdeo sobre como usar o ConnectNow, consulte Uso do ConnectNow para compartilhar
a tela (7:12). (Essa demonstrao fica localizada no Dreamweaver.)
Requisitos do sistema
Para usar o Adobe AIR Extension para Dreamweaver, o software a seguir dever ser instalado e adequadamente
configurado:
Para obter informaes sobre como usar o Adobe AIR Extension para Dreamweaver, consulte Como usar o AIR
Extension para Dreamweaver.
definido do Dreamweaver.
2 No Dreamweaver, abra a pgina inicial do conjunto de pginas que deseja compactar.
3 Selecione Site > Configuraes do aplicativo AIR.
4 Conclua a caixa de dilogo Configuraes do aplicativo AIR e do instalador e clique em Criar arquivo AIR.
Para obter mais informaes, consulte as opes da caixa de dilogo listadas a seguir.
A primeira vez que voc cria um arquivo Adobe AIR, o Dreamweaver cria um arquivo aplicativo.xml na pasta raiz
do site. Esse arquivo serve como um manifesto, definindo vrias propriedades do aplicativo.
A seguir, h uma descrio das opes na caixa de dilogo Configuraes do aplicativo AIR e do instalador:
Nome do arquivo do aplicativo o nome usado para o arquivo executvel do aplicativo. Por padro, a extenso usa
o nome do site do Dreamweaver para nomear o arquivo. Voc pode alterar o nome, se preferir. No entanto, no
nome deve conter apenas caracteres vlidos para nomes de arquivos ou de pastas. (Ou seja, pode conter apenas
caracteres ASCII e no pode terminar com um ponto.) Essa configurao obrigatria.
Nome do aplicativo o nome que exibido nas telas de instalao quando os usurios instalam o aplicativo.
Novamente, a extenso especifica o nome do site do Dreamweaver por padro. Essa configurao no tem
restries de caractere e no obrigatria.
ID do aplicativo identifica o aplicativo com uma ID exclusiva. Voc pode alterar a ID padro se preferir. No use
espaos ou caracteres especiais no ID. Os nicos caracteres vlidos so 0-9, a-z, A-Z, . (ponto) e - (trao). Essa
configurao obrigatria.
Verso especifica o nmero da verso do aplicativo. Essa configurao obrigatria.
Contedo inicial especifica a pgina inicial do aplicativo. Clique no boto Navegar para navegar para a pgina
inicial e selecion-la. O arquivo escolhido deve residir dentro da pasta raiz do site. Essa configurao obrigatria.
Descrio permite especificar uma descrio do aplicativo a ser exibida quando o usurio instalar o aplicativo.
Copyright permite especificar um copyright que exibido nas informaes em Sobre para aplicativos Adobe AIR
executar o aplicativo no computador. O Cromo do sistema rodeia o aplicativo com o controle de janelas padro do
sistema operacional. O Cromo personalizado (opaco) elimina o cromo padro do sistema e permite criar um
cromo do seu prprio aplicativo. (Voc cria o cromo personalizado diretamente na pgina HTML compactada.)
O cromo personalizado (transparente) como o cromo personalizado (opaco), mas adiciona recursos
transparentes s bordas da pgina, permitindo janelas de aplicativo no retangulares.
Tamanho da janela especifica as dimenses da janela do aplicativo quando ela aberta.
cone permite selecionar imagens personalizadas para os cones de aplicativos. (As imagens padro so imagens
Adobe AIR que vm com a extenso.) Para usar imagens personalizadas, clique no boto Selecionar imagens de
cones. Na caixa de dilogo Imagens de cones que exibida, clique na pasta para cada tamanho de cone e selecione
o arquivo de imagem que utilizar. o AIR oferece suporte a arquivos PNG de imagens de cones de aplicativos.
Nota: As imagens personalizadas selecionadas devem residir no site do aplicativo e seus caminhos devem ser relativos
raiz do site.
Tipos de arquivos associados permite associar tipos de arquivos ao seu aplicativo. Para obter mais informaes,
Assinatura digital.
2 Na caixa de dilogo Assinatura digital, siga um destes procedimentos:
Para assinar um aplicativo com um certificado digital pr-adquirido, clique no boto Procurar, selecione o
certificado, insira a senha correspondente e clique em OK.
Para criar o seu prprio certificado digital auto-assinado, clique no boto Criar e preencha a caixa de dilogo. A
opo de tipo de certificado refere-se ao nvel de segurana: 1024-RSA usa uma chave de 1024 bits (menos
segura) e 2048-RSA usa uma chave de 2048 bits (mais segura). Quando terminar, clique em OK. Em seguida,
insira a senha correspondente na caixa de dilogo Assinatura digital e clique em OK.
Selecione Preparar um pacote AIRI que ser assinado posteriormente e clique em OK. Essa opo permite criar
um aplicativo AIR intermedirio (AIRI) sem uma assinatura digital. Um usurio no consegue instalar o
aplicativo, no entanto, at voc adicionar uma assinatura digital.
Selecione um tipo de arquivo e clique no boto menos (-) para excluir o tipo de arquivo.
Clique no boto mais (+) para adicionar um tipo de arquivo.
Se clicar no boto mais para adicionar um tipo de arquivo, a caixa de dilogo Configuraes de tipo de arquivo
ser exibida. Conclua a caixa de dilogo e clique em OK para fech-la.
A seguir est uma lista de opes:
Nome especifica o nome do tipo de arquivo que aparece na lista Tipos de arquivos. Essa opo obrigatrio e
pode incluir apenas caracteres ASCII alfanumricos (a-z, A-Z, 0-9) e pontos (por exemplo, adobe.VideoFile). O
nome deve ser iniciado com uma letra. O tamanho mximo de 38 caracteres.
Extenso especifica a extenso do tipo de arquivo. No inclui um ponto antes da extenso. Essa opo
obrigatria e pode incluir apenas caracteres ASCII alfanumricos (a-z, A-Z, 0-9). O tamanho mximo de 38
caracteres.
Descrio permite especificar uma descrio opcional para o tipo de arquivo.
Tipo de contedo especifica o tipo MIME ou tipo de mdia para o arquivo (por exemplo texto/html,
em AIR.
Voc tambm pode pressionar Ctrl+Shift+F12 (Windows) ou Cmd+Shift+F12 (Macintosh).
Abra um arquivo HTML ou JavaScript na Visualizao de cdigo e insira o cdigo do Adobe AIR.
Nota: O mecanismo de dicas de cdigo funciona apenas entre tags <script> ou em arquivos .js.
Para obter mais informaes sobre os elementos de linguagem do Adobe AIR, consulte a documentao do
desenvolvedor no resto deste guia.
modelo pode editar. O autor do modelo pode especificar qualquer rea do modelo como editvel. Para ser eficaz, o
modelo deve conter pelo menos uma regio editvel; caso contrrio, as pginas baseadas no modelo no podero ser
editadas.
Uma regio repetitiva Uma seo do layout do documento definida para que o usurio do modelo possa adicionar ou
excluir cpias da regio repetitiva de um documento baseado no modelo quando necessrio. Por exemplo, voc pode
definir que uma linha da tabela se repita. As sees repetitivas so editveis; portanto, o usurio do modelo pode editar
o contedo no elemento repetitivo, enquanto o prprio design fica sob o controle do autor do modelo.
389
H dois tipos de regies repetitivas que voc pode inserir em um modelo: regio repetitiva e tabela repetitiva.
Uma regio opcional Uma seo de um modelo cujo contedo (como texto ou imagem) que pode aparecer ou no em
um documento. Na pgina baseada em modelo, o usurio do modelo geralmente controla se o contedo exibido.
Um atributo de tag editvel Permite que voc desbloqueie um atributo de tag em um modelo, de forma que o atributo
possa ser editado em uma pgina baseada em modelo. Por exemplo, voc pode "bloquear" a imagem que aparecer no
documento, mas permitir que o usurio do modelo defina o alinhamento esquerda, direita ou ao centro.
Links em modelos
Quando voc cria um arquivo de modelo salvando uma pgina existente como modelo, o novo modelo na pasta
Modelos e os links no arquivo so atualizados para que os caminhos relativos ao documento estejam corretos.
Posteriormente, quando voc criar um documento baseado nesse modelo e o salvar, todos os links relativos ao
documento sero atualizados novamente para continuar a apontar para os arquivos corretos.
Ao adicionar um novo link de documento ao arquivo de modelo, voc pode facilmente errar o nome do caminho se o
digitar na caixa de texto do link no Inspetor de propriedades. O caminho correto em um arquivo de modelo o
caminho da pasta Modelos para o documento vinculado, e no o caminho da pasta do documento baseado em modelo
para o documento vinculado. Verifique se os caminhos para os links esto corretos usando o cone de pasta ou o cone
Indicar arquivo no Inspetor de propriedades ao criar links em modelos.
Preferncia de atualizao de link do Dreamweaver 8.01
Antes do Dreamweaver 8 (ou seja, o Dreamweaver MX 2004 e anterior), o Dreamweaverno atualizava links para
arquivos da pasta Modelos. (Por exemplo, se voc tiver um arquivo denominado main.css na pasta Modelos e criar um
link href="main.css" no arquivo de modelo, o Dreamweaver no atualizar esse link ao criar uma pgina baseada em
modelo.)
Alguns usurios tiravam proveito da maneira como o Dreamweaver tratava os links para arquivos na pasta Modelos e
usavam essa inconsistncia para criar links que eles no queriam atualizar ao criar pginas baseadas em modelo. Por
exemplo, se voc usa o Dreamweaver MX 2004 e tem um site com diferentes pastas para diferentes aplicativos:
Dreamweaver, Flash e Photoshop. Cada pasta de produto contm uma pgina index.html baseada em modelo e uma
verso exclusiva do arquivo main.css no mesmo nvel. Se o arquivo de modelo contiver o link referente ao documento
href="main.css" (um link para uma verso do arquivo main.css na pasta Modelos) e voc quiser que as pginas
index.html baseadas em modelo tambm contenham esse link, crie as pginas index.html baseadas em modelo sem se
preocupar que o Dreamweaver atualize esses links especficos. Quando o Dreamweaver MX 2004 cria as pginas
index.html baseadas em modelo, os links href="main.css" (no atualizados) referem-se aos arquivos main.css
existentes nas pastas do Dreamweaver, Flash e Photoshop, e no ao arquivo main.css contido na pasta Modelos.
Entretanto, no Dreamweaver 8, esse comportamento foi alterado para que todos os links relativos a documentos sejam
atualizados quando pginas baseadas em modelo forem criadas, independentemente do local aparente dos arquivos
vinculados. Nessa situao, o Dreamweaver examina o link no arquivo de modelo (href="main.css") e cria um link na
pgina baseada em modelo que relacionado ao local do novo documento. Por exemplo, se voc estiver criando um
documento baseado em modelo um nvel acima da pasta Modelos, o Dreamweaver gravar o link no novo documento
como href="Templates/main.css". Essa atualizao no Dreamweaver 8 quebrou os links em pginas criadas pelos
designers que tiraram proveito da prtica anterior do Dreamweaver de no atualizar links para arquivos na pasta
Modelos.
O Dreamweaver 8.01 incluiu uma preferncia que permite ativar e desativar o comportamento dos links relativos a
atualizaes. (Essa preferncia especial aplica-se somente aos links para arquivos na pasta Modelos, e no a links em
geral.) O comportamento padro no atualizar esses links (como no Dreamweaver MX 2004 e anterior), mas se voc
quiser que o Dreamweaver atualize esses tipos de links ao criar pginas baseadas em modelo, basta desmarcar a
preferncia. (Voc s faria isso se, por exemplo, tivesse uma pgina CSS (folhas de estilos em cascata), main.css, na
pasta Modelos, e precisasse do link href="Templates/main.css" no documento baseado em modelo. Contudo, essa no
uma prtica recomendvel, porque somente os arquivos de modelo (DWT) do Dreamweaver devem estar na pasta
Modelos.)
Para que o Dreamweaver atualize os caminhos relacionados a documentos para arquivos que no so de modelo da
pasta Modelos, selecione a categoria Modelos na caixa de dilogo Configurao de site (que est abaixo de
Configuraes avanadas) e desmarque a opo No regravar caminhos relativos a documentos.
Para obter mais informaes, consulte o Dreamweaver TechNote no site da Adobe em
www.adobe.com/go/f55d8739_br.
Quando esse cdigo est em um modelo, as alteraes em scripts antes da tag <html> ou aps a tag </html> so
copiadas para documentos baseados nesse modelo. Contudo, voc no poder mais editar esses scripts em documentos
baseados no modelo. Dessa forma, voc pode optar por editar esses scripts no modelo ou em documentos baseados no
modelo, mas no em ambos.
Parmetros de modelo
Os parmetros de modelo indicam valores para controlar o contedo em documentos baseados em modelo. Use
parmetros de modelo para regies opcionais ou atributos de tags editveis ou para definir os valores que voc deseja
passar para um documento anexado. Para cada parmetro, voc seleciona um nome, um tipo de dados e um valor
padro. Cada parmetro deve ter um nome exclusivo que diferencie maisculas e minsculas. Eles devem ser de um
dos cinco tipos de dados permitidos: texto, booleano, cor, URL ou nmero.
Os parmetros de modelo so passados para o documento como parmetros de ocorrncia. Na maioria dos casos, o
usurio de um modelo pode editar o valor padro do parmetro para personalizar o que exibido no documento
baseado em modelo. Em outros casos, o autor do modelo pode determinar o que aparece no documento, de acordo
com o valor de uma expresso do modelo.
Nota: Um artigo til sobre isso est disponvel on-line em
www.adobe.com/devnet/dreamweaver/articles/template_parameters.html.
Expresses de modelo
As expresses de modelo so instrues que computam ou avaliam um valor.
Voc pode usar uma expresso para armazenar um valor e exibi-lo em um documento. Por exemplo, uma expresso
pode ser simples como o valor de um parmetro, como @@(Param)@@, ou complexa o suficiente para computar valores
que alternam a cor de fundo em uma linha de tabela, como @@((_index & 1) ? red : blue)@@.
Voc tambm pode definir expresses para condies if e if mltiplo. Quando uma expresso usada em uma
instruo condicional, o Dreamweaver a avalia como verdadeira ou falsa. Se a condio verdadeira, a regio
opcional aparece no documento baseado em modelo; se falsa, ela no aparece.
Voc pode definir expresses na visualizao de cdigo ou na caixa de dilogo Regio opcional ao inserir uma regio
opcional.
Na visualizao de cdigo, h duas formas de definir expresses de modelo: use o comentrio <!-- TemplateExpr
expr="sua expresso"--> comment ou @@(sua expresso)@@. Quando voc insere a expresso no cdigo de
modelo, um marcador de expresso exibido na Visualizao de design. Quando voc aplica o modelo, o
Dreamweaver avalia a expresso e exibe o valor no documento baseado em modelo.
literais numricos, seqncias de caracteres literais (somente sintaxe entre aspas duplas), booleanos literais
(verdadeiro ou falso)
modelo.
_repeat Definido apenas para expresses que aparecem em uma regio repetitiva. Fornece informaes internas
sobre a regio
_ndice O ndice numrico (a partir de 0) da entrada atual
_numRows O nmero total de entradas nesta regio repetitiva
_isFirst Verdadeiro se a entrada atual for a primeira entrada na regio repetitiva
_isLast Verdadeiro se a entrada atual for a ltima entrada na regio repetitiva
_prevRecord O objeto _repeat da entrada anterior. um erro acessar esta propriedade para a primeira entrada na
regio.
_nextRecord O objeto _repeat da prxima entrada. um erro acessar esta propriedade para a ltima entrada na
regio.
_parent Em uma regio repetitiva aninhada, ele informa o objeto _repeat para a regio repetitiva externa. um
A instruo de condio a seguir verifica o valor atribudo ao parmetro Dept. Quando a condio verdadeira ou
correspondente, a imagem apropriada exibida.
<!-- TemplateBeginMultipleIf -->
<!-- checks value of Dept and shows appropriate
<!-- TemplateBeginIfClause cond="Dept == 1" -->
TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept == 2" -->
TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="Dept == 3" -->
TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept != 3" -->
TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
image-->
<img src=".../sales.gif"> <!-<img src=".../support.gif"> <!-<img src=".../hr.gif"> <!-<img src=".../spacer.gif"> <!--
Quando voc cria um documento baseado em modelo, os parmetros de modelo so passados para o documento
automaticamente. O usurio do modelo determina qual imagem ser exibida.
Para identificar um arquivo de modelo, verifique a barra de ttulo na janela Documento. A barra de ttulo de um
arquivo de modelo contm a palavra <<Modelo>> e a extenso do nome de arquivo .dwt.
Voc pode usar preferncias de cor de cdigo para definir seu prprio esquema de cores de forma a diferenciar
facilmente as regies do modelo quando exibir um documento na Visualizao de cdigo.
Tudo o que estiver entre esses comentrios ser editvel nos documentos baseados no modelo. O cdigo de origem
HTML de uma regio editvel deve ser assim:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>
Nota: Ao editar o cdigo do modelo na visualizao de cdigo, tenha cuidado para no alterar as tags de comentrio
relacionadas ao modelo que o Dreamweaver utiliza.
Tudo o que est entre esses comentrios editvel em um documento baseado em modelo. O cdigo de origem HTML
de uma regio editvel deve ser assim:
A cor padro de um texto no editvel cinza. Voc pode selecionar outra cor para as regies editveis e no editveis
na caixa de dilogo Preferncias.
com uma extenso .dwt. Se a pasta Modelos ainda no existir no site, o Dreamweaver a criar automaticamente
quando voc salvar o novo modelo.
Nota: No retire os modelos da pasta Modelos, nem coloque arquivos que no so de modelo nessa pasta. Tambm no
transfira a pasta Modelos para fora da pasta raiz local. Esse procedimento poder causar erros nos caminhos dos
modelos.
Um modelo novo e sem ttulo ser adicionado lista de modelos no painel Ativos.
3 Com o modelo selecionado, insira um nome para esse modelo e pressione Enter (Windows) ou Return
(Macintosh).
O Dreamweaver cria um modelo em branco no painel Ativos e na pasta Modelos.
Alm dos modelos do Dreamweaver, voc pode criar modelos que no so do Dreamweaver usando as ferramentas de
administrao do Contribute. Um modelo que no seja do Dreamweaver uma pgina j existente que os usurios do
Contribute podem utilizar para criar novas pginas; ele assemelha-se a um modelo do Dreamweaver, exceto pelo fato
de que as pginas que nele se baseiam no so atualizadas quando voc o altera. Alm disso, os modelos que no so
do Dreamweaver no podem conter elementos de modelo do Dreamweaver, como regies editveis, bloqueadas,
repetitivas e opcionais.
Quando um usurio do Contribute cria um novo documento em um site que contm modelos do Dreamweaver, o
Contribute lista os modelos disponveis (modelos do Dreamweaver e modelos que no so do Dreamweaver) na caixa
de dilogo Nova pgina.
Para incluir pginas que usam codificaes diferentes de Latin-1 em seu site, pode ser necessrio criar modelos (sejam
modelos Dreamweaver ou noDreamweaver). Os usurios do Contribute podem editar pginas que usam qualquer
codificao, mas quando criarem uma nova pgina em branco, o programa utilizar a codificao Latin-1. Para criar
uma pgina que utiliza outra codificao, o usurio do Contribute pode criar uma cpia de uma pgina existente que
utilize outra codificao ou usar um modelo que utilize outra codificao. Contudo, se no houver pginas ou modelos
no site que utilizem outras codificaes, primeiro crie uma pgina ou um modelo no Dreamweaver que utilize essa
outra codificao.
Voc pode marcar uma tabela inteira ou uma clula especfica da tabela como editvel, mas no pode marcar vrias
clulas da tabela como uma nica regio editvel. Se uma tag <td> estiver selecionada, a regio editvel incluir a
regio ao redor da clula; caso contrrio, a regio editvel afetar somente o contedo dentro da clula.
Os elementos PA e o contedo dos elementos PA so itens separados. Ao tornar um elemento PA editvel, voc
altera a posio do elemento PA, bem como a de seu contedo. Entretanto, ao tornar o contedo de um elemento
PA editvel, voc pode alterar somente o contedo do elemento PA, e no sua posio.
1 Na janela Documento, proceda de uma das seguintes maneiras para selecionar a regio:
Selecione o texto ou o contedo que voc deseja definir como uma regio editvel.
Posicione o ponto de insero onde voc pretende inserir uma regio editvel.
2 Proceda de uma das seguintes maneiras para inserir uma regio editvel:
Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio editvel, no menu pop-up.
3 Na caixa de texto Nome, insira um nome exclusivo para a regio. (No possvel usar o mesmo nome para mais de
preferncias. Uma aba no canto superior esquerdo indica o nome da regio. Se voc inserir uma regio editvel
vazia no documento, o nome da regio tambm aparecer dentro da regio.
Nota: As regies editveis que esto dentro de uma regio repetitiva no aparecem no menu. Para localizar essas regies,
procure as bordas com aba na janela Documento.
A regio editvel est selecionada no documento.
Selecione o texto ou o contedo que voc deseja definir como uma regio repetitiva.
Posicione o ponto de insero no documento onde voc deseja inserir a regio repetitiva.
2 Siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio repetitiva no menu pop-up.
3 Na caixa Nome, insira um nome exclusivo para a regio do modelo. (No possvel usar o mesmo nome para mais
Se voc no atribuir valores explicitamente para o preenchimento e o espaamento da clula, a maioria dos
navegadores exibir a tabela como se o preenchimento da clula estivesse definido como 1 e o espaamento como 2.
Para garantir que os navegadores exibiro a tabela sem preenchimento ou espaamento, defina Preenchimento da clula
e Espaamento da clula como 0.
Largura Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador.
Borda Especifica a largura, em pixels, das bordas da tabela.
Se voc no atribuir explicitamente um valor de borda, a maioria dos navegadores exibir a tabela como se a borda
estivesse definida como 1. Para que os navegadores exibam a tabela sem bordas, defina Borda como 0. Para visualizar
os limites da clula e da tabela quando a borda estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da
tabela.
Repetir linhas da tabela Especifica as linhas da tabela que sero includas na regio repetitiva.
Linha inicial Define o nmero especificado como a primeira linha a ser includa na regio repetitiva.
Linha final Define o nmero especificado como a ltima linha a ser includa na regio repetitiva.
Nome da regio Permite definir um nome exclusivo para a regio repetitiva.
Voc pode substituir os valores hexadecimais #FFFFFF e #CCCCCC por outras opes de cor.
4 Salve o modelo.
Este um exemplo de cdigo de uma tabela que inclui cores de linha de fundo alternadas:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
Regies opcionais no editveis, que permitem aos usurios do modelo mostrar e ocultar regies marcadas sem
ativ-las para a edio do contedo.
A aba do modelo de uma regio opcional precedida da palavra if. Com base na condio definida no modelo, o
usurio pode definir se possvel visualizar a regio nas pginas que ele cria.
Regies opcionais editveis, que permitem aos usurios do modelo definir se a regio ser exibida ou no, e lhes
permite editar contedo na regio.
Por exemplo, se a regio opcional inclui uma imagem ou um texto, o usurio do modelo pode definir se o contedo
ser exibido, bem como editar o contedo se assim desejar. Uma regio editvel controlada por uma instruo
condicional.
Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio opcional, no menu pop-up.
3 Insira um nome para a regio opcional, clique na aba Avanado se quiser definir valores para a regio opcional e
clique em OK.
No possvel quebrar o texto de uma seleo para criar uma regio editvel opcional. Insira a regio e, em seguida,
insira o contedo na regio.
2 Siga um destes procedimentos:
clique em OK.
Na Visualizao de design, clique na aba de modelo da regio opcional que voc deseja modificar.
Na Visualizao de design, posicione o ponto de insero na regio de modelo; em seguida, no seletor de tag, na
parte inferior da janela Documento, selecione a tag de modelo<mmtemplate:if>.
Na visualizao de cdigo, clique na aba de comentrio da regio de modelo que voc deseja modificar.
2 No Inspetor de propriedades (Janela > Propriedades), clique em Editar.
3 Na aba Bsica, insira um nome para o parmetro na caixa Nome.
4 Selecione Mostrar por padro para definir a regio selecionada a ser exibida no documento. Desmarque-a para
Se voc quiser vincular parmetros de regies opcionais, clique na aba Avanado, selecione Usar parmetro e, no
menu pop-up, selecione o parmetro existente que voc deseja vincular ao contedo selecionado.
Para gravar uma expresso de modelo a fim de controlar a exibio de uma regio opcional, clique na aba
Avanado, selecione Inserir expresso e informe a expresso na caixa.
Quando voc usa o objeto de modelo Regio opcional, o Dreamweaver insere comentrios de modelo no cdigo. Um
parmetro de modelo definido na seo head, como no seguinte exemplo:
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
Para facilitar a identificao posterior de determinado atributo de tag editvel, use um rtulo que identifique o
elemento e o atributo. Por exemplo, voc pode rotular como logoSrc uma imagem cuja origem seja editvel ou rotular
a cor de fundo editvel de uma tag de corpo como bodyBgcolor.
6 No menu Tipo, selecione o tipo de valor permitido para este atributo definindo uma das seguintes opes:
Para que um usurio insira um valor de texto para o atributo, selecione Texto. Por exemplo, voc pode usar texto
com o atributo align; em seguida, o usurio pode definir o valor do atributo como left, right ou center.
Para inserir um link em um elemento, como um caminho de arquivo at uma imagem, selecione URL. O uso dessa
opo atualiza automaticamente o caminho usado em um link. Se o usurio mover a imagem para uma nova pasta,
a caixa de dilogo Atualizar links ser exibida.
Para ter o seletor de cores disponvel para escolher um valor, marque Cor.
Para ativar um usurio a fim de selecionar um valor de verdadeiro ou falso na pgina, selecione Verdadeiro/falso.
Para permitir que o usurio do modelo digite um valor numrico para atualizar um atributo (por exemplo, para
alterar os valores de altura ou de largura de uma imagem), selecione Nmero.
7 A caixa Valor padro exibe o valor do atributo de tag selecionado no modelo. Insira um novo valor nessa caixa para
As regies editveis de um modelo base so passadas para o modelo aninhado e permanecem editveis nas pginas
criadas a partir de um modelo aninhado, a no ser que novas regies de modelo sejam inseridas nessas regies.
As alteraes realizadas em um modelo base so automaticamente atualizadas em modelos que utilizam o modelo base
e em todos os documentos baseados em modelos que utilizam os modelos principal e aninhado.
No seguinte exemplo, o modelo trioHome contm trs regies editveis, denominadas Body, NavBar e Footer:
Para criar um modelo aninhado, um novo documento com base no modelo foi criado e, em seguida, salvo como um
modelo e denominado TrioNested. No modelo aninhado, duas regies editveis foram adicionadas regio editvel
denominada Body.
Quando voc adiciona uma nova regio editvel a uma regio editvel passada para o modelo aninhado, a cor de realce
da regio editvel muda para laranja. O contedo adicionado fora da regio editvel, como o grfico na
editableColumn, no poder mais ser editado em documentos baseados no modelo aninhado. As reas editveis com
realce azul, independentemente de terem sido adicionadas ao modelo aninhado ou de serem provenientes do modelo
base, permanecem editveis em documentos que se baseiam no modelo aninhado. As regies de modelo no contm
uma regio editvel passada para os documentos baseados em modelo como regies editveis.
Nota: possvel inserir markup de modelo dentro de uma regio editvel para que ela no passe como uma regio
editvel em documentos baseados no modelo aninhado. Essas regies tm uma borda laranja em vez de azul.
1 Para criar um documento a partir do modelo no qual voc deseja basear o modelo aninhado, siga um destes
procedimentos:
Na categoria Modelos do painel Ativos, clique com o boto direito do mouse (Windows) ou Control-clique
(Macintosh) no modelo com o qual voc deseja criar um novo documento e selecione Novo a partir de modelo no
menu de contexto.
Selecione Arquivo > Novo. Na caixa de dilogo Novo documento, selecione a categoria Pgina de modelo e
selecione o site que contm o modelo a ser usado. Na lista Modelo, clique duas vezes no modelo para criar um novo
documento.
2 Selecione Arquivo > Salvar como modelo para salvar o novo documento como um modelo aninhado:
3 Insira um nome na caixa Salvar como e clique em OK.
Este cdigo de modelo pode ser colocado em qualquer lugar dentro de <!-- InstanceBeginEditable --><!As
tags -- InstanceEndEditable --> que rodeiam a regio editvel. Por exemplo:
<!-- InstanceBeginEditable name="EditRegion1" -->
<p>@@("")@@ Editable 1 </p>
<!-- InstanceEndEditable -->
Para obter mais informaes, consulte o TechNote 16416 no site da Adobe em www.adobe.com/go/16416_br.
Voc pode executar estas tarefas de gerenciamento de modelo com o painel Ativos:
Criar um modelo
Editar e atualizar modelos
Aplicar ou remover um modelo em um documento
O Dreamweaver verifica a sintaxe do modelo ao salv-lo. No recomendvel verificar manualmente a sintaxe durante
a edio do modelo.
O painel Ativos lista todos os modelos disponveis para o site e exibe uma visualizao do modelo selecionado.
2 Na lista de modelos disponveis, siga um destes procedimentos:
Para modificar as propriedades de pgina do modelo, selecione Modificar > Propriedades da pgina. (Os documentos
baseados em um modelo herdam as propriedades de pgina do modelo.)
4 Salve o modelo. O Dreamweaver solicita que voc atualize pginas com base no modelo.
5 Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em No atualizar
Para modificar as propriedades de pgina do modelo, selecione Modificar > Propriedades da pgina. (Os documentos
baseados em um modelo herdam as propriedades de pgina do modelo.)
4 Salve o modelo. O Dreamweaver solicita que voc atualize pginas com base no modelo.
5 Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em No atualizar
Renomear um modelo
1 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel
Esse mtodo de renomeao funciona da mesma forma que a renomeao de um arquivo no Windows Explorer
(Windows) ou no Finder (Macintosh). Assim como no Windows Explorer e no Finder, faa uma pausa rpida entre
os cliques. No clique duas vezes no nome, pois esse procedimento abre o modelo para edio.
4 Clique em outra rea do painel Ativo ou pressione Enter (Windows) ou Return (Macintosh) para ativar a alterao.
Para atualizar todos os arquivos no site selecionado com seus modelos correspondentes, selecione Site inteiro e
indique o nome do site no menu pop-up adjacente.
Para atualizar os arquivos de um modelo especfico, selecione Arquivos que usam e indique o nome do modelo no
menu pop-up adjacente.
3 Verifique se Modelos est selecionado na opo Atualizar.
4 Se voc no quiser ver um registro dos arquivos que o Dreamweaver atualiza, desmarque a opo Mostrar registro;
Dreamweaver fornecer informaes sobre os arquivos que ele tenta atualizar, inclusive informaes sobre o
sucesso da atualizao.
6 Clique em Fechar.
O Contribute somente recupera modelos novos e alterados no site quando o Contribute iniciado e quando um
usurio do Contribute altera as respectivas informaes de conexo. Se voc efetuar alteraes em um modelo
enquanto um usurio do Contribute edita um arquivo baseado nesse modelo, o usurio no ver as alteraes no
modelo at reiniciar o Contribute.
Se voc remover uma regio editvel de um modelo, o usurio do Contribute que estiver editando uma pgina
baseada nesse modelo pode ficar confuso sobre o que fazer com o contedo da regio editvel.
Para atualizar um modelo em um site do Contribute, siga as etapas a seguir.
1 Abra o modelo do Contribute no Dreamweaver, edite-o e salve-o. Para obter instrues, consulte Abrir um
Importante: Depois de excludo, o arquivo de modelo no pode ser recuperado. O arquivo de modelo excludo do site.
Os documentos baseados em um modelo excludo no so desanexados do modelo; eles retm a estrutura e as regies
editveis que o arquivo de modelo tinha antes de ser excludo. possvel converter esse documento em um arquivo
HTML sem regies editveis ou bloqueadas.
Se o modelo contiver parmetros de modelo ou regies repetitivas, selecione Usar tags padro de XML do
Dreamweaver.
Se o modelo no contiver parmetros de modelo ou regies repetitivas, selecione Usar nomes de regies editveis
como tags de XML.
4 Clique em OK.
5 Na caixa de dilogo exibida, selecione um local de pasta, insira um nome para o arquivo XML e clique em Salvar.
gerado um arquivo XML que contm o material dos parmetros e das regies editveis do documento, inclusive as
regies editveis dentro das regies repetitivas ou das regies opcionais. O arquivo XML inclui o nome do modelo
original, bem como o nome e o contedo de cada regio do modelo.
Nota: O contedo nas regies no editveis no exportado para o arquivo XML.
O Dreamweaver cria um novo documento baseado no modelo especificado no arquivo XML. Ele preenche o contedo
de cada regio editvel nesse documento usando os dados do arquivo XML. O documento resultante aparece em uma
nova janela Documento.
Se seu arquivo XML no estiver configurado exatamente da forma como o Dreamweaver espera, pode ser que voc
no consiga importar os dados. Uma soluo para esse problema exportar um arquivo XML do Dreamweaver, de
forma que voc ter um arquivo XML com exatamente a mesma estrutura. Em seguida, copie os dados do arquivo XML
original para o arquivo XML exportado. O resultado um arquivo XML com a estrutura correta que contm os dados
apropriados, prontos para serem importados.
a pasta.
Nota: Voc deve selecionar uma pasta fora do site atual.
3 Se voc quiser salvar uma verso XML dos documentos baseados em modelo, selecione Manter arquivos de dados
de modelo.
4 Se voc quiser atualizar alteraes em arquivos exportados anteriormente, selecione Extrair somente arquivos
2 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel
Selecione uma regio no novo modelo para a qual o contedo existente ser movido.
Selecione Em lugar nenhum para remover o contedo do documento.
5 Para mover todo contedo no resolvido para a regio selecionada, clique em Usar para todos.
6 Clique em OK para aplicar o modelo ou clique em Cancelar para cancelar a aplicao do modelo ao documento.
Importante: Quando voc aplica um modelo a um documento existente, o modelo substitui o contedo do documento
pelo contedo do modelo. Sempre faa backup do contedo de uma pgina antes de aplicar um modelo a ela.
Se houver contedo no documento que no possa ser atribudo automaticamente a uma regio de modelo, a caixa de
dilogo Nomes de regio inconsistentes ser exibida.
4 Selecione um destino para o contedo usando o menu Mover contedo para nova regio para selecionar um destes:
Selecione uma regio no novo modelo para a qual o contedo existente ser movido.
Selecione Em lugar nenhum para remover o contedo do documento.
5 Para mover todo contedo no resolvido para a regio selecionada, clique em Usar para todos.
6 Clique em OK para aplicar o modelo ou clique em Cancelar para cancelar a aplicao do modelo ao documento.
Importante: Quando voc aplica um modelo a um documento existente, o modelo substitui o contedo do documento
pelo contedo do modelo. Sempre faa backup do contedo de uma pgina antes de aplicar um modelo a ela.
A caixa de dilogo Propriedades de modelo aberta, mostrando uma lista das propriedades disponveis. A caixa de
dilogo mostra as regies opcionais e os atributos de tag editveis.
3 Na lista Nome, selecione a propriedade.
A rea inferior da caixa de dilogo atualizada de forma a mostrar o rtulo da propriedade selecionada e seu valor
atribudo.
4 No campo direita do rtulo de propriedade, edite o valor para modificar a propriedade no documento.
Nota: O nome do campo e os valores atualizveis so definidos no modelo. Os atributos que no aparecerem na lista
Nome no podem ser editados no documento baseado em modelo.
5 Selecione Permitir modelos aninhados para controlar isto se voc quiser passar a propriedade editvel junto com
A caixa de dilogo Propriedades de modelo aberta, mostrando uma lista das propriedades disponveis. A caixa de
dilogo mostra as regies opcionais e os atributos de tag editveis.
3 Na lista Nome, selecione uma propriedade.
A caixa de dilogo atualizada de forma a mostrar o rtulo da propriedade selecionada e seu valor atribudo.
4 Selecione Mostrar para exibir a regio opcional no documento ou desmarque Mostrar para ocultar a regio
opcional.
Nota: O nome do campo e a configurao padro so definidos no modelo.
5 Selecione Permitir modelos aninhados para controlar isto se voc quiser passar a propriedade editvel junto com
Clique no boto de mais (+) para adicionar uma entrada de regio repetitiva abaixo da entrada selecionada.
Clique no boto de menos () para excluir a entrada da regio repetitiva selecionada.
Clique no boto Seta abaixo para mover a entrada selecionada uma posio para baixo.
Clique no boto Seta para cima para mover a entrada selecionada uma posio para cima.
Nota: Uma alternativa selecionar Modificar > Modelo e marcar uma das opes de entrada repetitiva na parte inferior
do menu de contexto. Voc pode usar esse menu para inserir uma nova entrada repetitiva ou mover a posio da entrada
selecionada.
Para recortar uma entrada repetitiva, selecione Editar > Entradas repetitivas > Recortar entrada repetitiva.
Para copiar uma entrada repetitiva, selecione Editar > Entradas repetitivas > Copiar entrada repetitiva.
Para remover uma entrada repetitiva, selecione Editar > Entradas repetitivas > Excluir entrada repetitiva.
Para colar uma entrada repetitiva, selecione Editar > Colar.
Nota: A colagem insere uma nova entrada, ela no substitui qualquer entrada existente.
Sintaxe do modelo
Regras gerais de sintaxe
O Dreamweaver usa tags de comentrio HTML para especificar regies em modelos e documentos baseados em
modelo, de forma que os documentos baseados em modelo permanecem arquivos HTML vlidos. Quando voc insere
um objeto de modelo, as tags de modelo so inseridas no cdigo.
Estas so regras gerais de sintaxe:
Voc sempre pode substituir qualquer espao em branco (espaos, abas, quebras de linha) que aparecer. O espao
em branco obrigatrio, exceto no incio ou no fim de um comentrio.
Os atributos podem ser especificados em qualquer ordem. Por exemplo, em um TemplateParam, possvel
especificar o tipo antes do nome.
Tags de modelo
O Dreamweaver usa as seguintes tags de modelo:
<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!--
Tags de ocorrncia
O Dreamweaver usa as seguintes tags de ocorrncia:
<!-<!-<!-<!-<!-<!-<!-<!-<!--
exibida uma mensagem de erro se a sintaxe estiver mal formulada. A mensagem de erro descreve o erro e refere-se
linha especfica do cdigo em que est o erro.
Para alterar a cor do texto, na caixa Cor do texto, digite o valor hexadecimal da cor a ser aplicada ao texto
selecionado ou use o seletor de cores para escolher uma cor para aplicar ao texto. Faa o mesmo no campo Fundo
para adicionar ou alterar uma cor de fundo do texto selecionado.
Para adicionar um atributo de estilo ao cdigo selecionado, clique nos botes N (negrito), I (itlico) ou S
(sublinhado) para definir o formato desejado.
6 Clique em OK.
Nota: Se quiser efetuar alteraes globais, voc poder editar o arquivo de origem que armazena suas preferncias. No
Windows XP, ele est localizado em C:\Documents and Settings\%nome do usurio%\Application
Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml. No Windows Vista, ele est localizado em
C:\Users\%nome do usurio%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
usando o seletor de cores (ou insira o valor hexadecimal da cor de realce na caixa).
Para obter informaes sobre o uso do seletor de cor, consulte Usar o seletor de cores na pgina 215.
4 (Opcional) Repita o processo para outros tipos de regio de modelo, caso seja necessrio.
5 Clique na opo Mostrar para ativar ou desativar a exibio de cores na janela Documento.
Nota: A Regio aninhada no tem uma opo Mostrar; sua exibio controlada pela opo Regio editvel.
6 Clique em OK.
As cores de realce aparecem na janela de documento somente quando Exibir > Auxlios visuais > Elementos invisveis
est ativado e as opes apropriadas so ativadas nas preferncias de realce.
Nota: Se os elementos invisveis estiverem visveis, mas as cores de realce no, selecione Editar > Preferncias (Windows)
ou Dreamweaver > Preferences (Macintosh), e selecione a categoria Realce. Certifique-se de que a opo Mostrar ao lado
da cor de realce apropriada esteja selecionada. Certifique-se tambm de que a cor desejada aparea contra a cor de fundo
da pgina.
423
A estrutura do Spry utiliza um conjunto de widgets reutilizveis desenvolvidos em HTML, CSS e JavaScript padro.
Voc pode inserir facilmente esses widgets (o cdigo HTML e CSS bem simplificados) e, em seguida, aplicar o estilo.
Os comportamentos na estrutura incluem funes que permitem aos usurios mostrar ou ocultar contedo na pgina,
alterar a aparncia (como cor) da pgina, interagir com itens de menu, e muito mais.
Cada widget na estrutura do Spry est associado a arquivos CSS e JavaScript exclusivos. O arquivo CSS contm tudo o
que necessrio para criar o estilo do widget, e o arquivo JavaScript responsvel pela funcionalidade do widget.
Quando voc insere um widget usando a interface do Dreamweaver, o Dreamweaver vincula automaticamente esses
arquivos sua pgina, e o widget ganha funcionalidade e estilo.
Os arquivos CSS e JavaScript associados a determinado widget recebem o nome do widget para que voc possa
facilmente correlacionar os arquivos aos widgets. (Por exemplo, os arquivos associados ao widget Acordeo chamamse SpryAccordion.css e SpryAccordion.js). Quando voc insere um widget em uma pgina salva, o Dreamweaver cria
um diretrio SpryAssets no site e salva os arquivos JavaScript e CSS correspondentes nesse local.
Ao inserir um widget, Dreamweaver voc automaticamente inclui os arquivos JavaScript e CSS necessrios do Spry em
seu site quando salva a pgina.
Nota: Para inserir widgets do Spry, voc tambm pode usar a categoria Spry no painel Inserir.
Para obter detalhes sobre como efetuar alteraes em determinados widgets, consulte as sees apropriadas a cada
widget.
preferncias.
Para obter detalhes sobre como criar o estilo de determinados widgets, consulte as sees apropriadas sobre
personalizao para cada widget.
Voc tambm pode formatar um widget do Spry editando os estilos no painel CSS, da mesma forma que faria com
qualquer outro elemento com estilo na pgina.
, na Barra de aplicativos.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o funcionamento com widgets
da web, consulte www.adobe.com/go/dw10widgets_br.
O HTML padro do widget Acordeo composto de uma tag div externa que contm todos os painis, uma tag div
para cada painel, um div de cabealho e um div de contedo dentro da tag de cada painel. Um widget Acordeo pode
conter inmeros painis individuais. O HTML do widget Acordeo tambm inclui tags de script no cabealho do
documento e aps o markup HTML do acordeo.
Para obter uma explicao abrangente sobre como o widget Acordeo funciona, inclusive uma anatomia completa do
respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryaccordion_br.
Para ter acesso ao tutorial sobre como trabalhar com widgets Acordeo consulte www.adobe.com/go/vid0167_br.
Nota: Para inserir um widget Acordeo, voc tambm pode usar a categoria Spry no painel Inserir.
Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualizao de design e clique no cone em forma
de olho que aparece direita da aba.
Selecione um widget Acordeo na janela Documento e clique no nome do painel para edit-lo no menu Painis do
Inspetor de propriedades (Janela > Propriedades).
mover.
3 Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.
.AccordionPanelTab
.AccordionPanelContent
.AccordionPanelContent
.AccordionPanelOpen .AccordionPanelTab
.AccordionPanelTabHover
.AccordionPanelOpen
.AccordionPanelTabHover
O HTML do widget Barra de menus composto de uma tag ul externa que contm uma tag li para cada item de menu
de nvel superior. Os itens de menu de nvel superior (tags li), por sua vez, contm tags ul e li que definem submenus
para cada item; os submenus podem, da mesma forma, conter submenus. Os menus de nvel superior e os submenus
podem conter quantos itens de submenu voc desejar.
Para obter uma explicao abrangente sobre como o widget Barra de menus funciona, inclusive uma anatomia
completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprymenubar_br.
Para ter acesso ao tutorial sobre como criar Barras de menus do Spry, consulte www.adobe.com/go/vid0168_br.
Nota: Para inserir um widget Barra de Menus, voc tambm pode usar a categoria Spry do painel Inserir.
Nota: O widget Barra de menus do Spry usa camadas de DHTML para exibir sees de HTML sobre as outras sees. Se
a pgina tiver contedo criado com o Adobe Flash, isso poder causar problemas, porque os arquivos SWF sempre so
exibidos sobre todas as outras camadas de DHTML, de forma que o arquivo SWF seja exibido sobre os submenus. A
alternativa para essa situao alterar os parmetros do arquivo SWF e usar wmode="transparent". Voc pode fazer
isso facilmente selecionando o arquivo SWF na janela Documento e definindo a opo wmode como transparente no
Inspetor de propriedades. Para obter mais informaes, consulte www.adobe.com/go/15523_br.
Inspetor de propriedades.
Adicionar um item de submenu
1 Selecione um widget Barra de menus na janela Documento.
2 No Inspetor de propriedades, selecione o nome do item de menu principal ao qual voc deseja adicionar o
submenu.
3 Clique no boto de adio acima da segunda coluna.
4 (Opcional) Renomeie o novo item de submenu alterando o texto padro na janela Documento ou na caixa de texto
do Inspetor de propriedades.
Para adicionar um submenu a um submenu, selecione o nome do item de submenu ao qual voc deseja adicionar outro
item de submenu e clique no boto de adio acima da terceira coluna no Inspetor de propriedades.
Nota: O Dreamweaver somente aceita dois nveis de submenus na Visualizao de design, mas voc pode adicionar
quantos submenus desejar na Visualizao de cdigo.
Excluir um item de menu ou submenu principal
1 Selecione um widget Barra de menus na janela Documento.
2 No Inspetor de propriedades, selecione o nome do item de menu ou submenu principal a ser excludo e clique no
boto de subtrao.
reordenar.
3 Clique nas setas para cima e para baixo para mover o item de menu para cima ou para baixo.
alterar.
3 Efetue suas alteraes na caixa Texto.
um link.
3 Digite o link na caixa de texto Link ou clique no cone de pasta para ir at um arquivo.
Desativar estilos
Voc pode desativar o recurso de estilo de um widget Barra de menus para ver melhor a estrutura HTML do widget
na Visualizao de design. Por exemplo, quando voc desativa os estilos, os itens da barra de menus so exibidos em
uma lista com marcadores na pgina, e no como itens com estilo da barra de menus.
1 Selecione um widget Barra de menus na janela Documento.
2 Clique no boto Desativar estilos no Inspetor de propriedades (Janela > Propriedades).
garante que o arquivo CSS correto de uma barra de menus vertical seja includo no site.
Nota: Se o site j tem um widget Barra de menus vertical em alguma parte, no ser preciso inserir um novo. Basta
anexar o arquivo SpryMenuBarVertical.css pgina, em vez de clicar no boto Anexar folha de estilos no painel Estilos
CSS (Janelas > Estilos CSS).
3 Exclua a Barra de menus vertical.
4 Na Visualizao de cdigo (Exibir > Cdigo), localize a classe MenuBarHorizontal e altere-a para MenuBarVertical.
Nota: Se converter uma barra de menus vertical para horizontal, adicione a opo imgDown de pr-carregamento e a
vrgula.
7 (Opcional) Se sua pgina no tiver outros widgets Barra de menus horizontal, exclua o link do arquivo
Para obter mais recursos da Web sobre personalizao do dispositivo Barra de menu, consulte Personalizao de
barras de menu do Spry no Dreamweaver de Ryan Grabenstein.
Todas as regras de CSS nos tpicos abaixo se referem s regras padro localizadas no arquivo
SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (dependendo da sua seleo). O Dreamweaver salva esses
arquivos CSS na pasta SpryAssets do site sempre que voc cria um widget Barra de menus do Spry. Esses arquivos
tambm contm informaes teis comentadas sobre vrios estilos que se aplicam ao widget.
Embora voc possa facilmente editar regras para o widget Barra de menus diretamente no arquivo CSS relacionado,
voc tambm pode usar o painel Estilos CSS para editar o CSS da barra de menus. Esse painel til para localizar as
classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.
Texto padro
ul.MenuBarVertical a, ul.MenuBarHorizontal a
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
cor: #FFF;
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
cor: #FFF;
ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemHover
cor: #FFF;
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
cor: #FFF;
Fundo padro
ul.MenuBarVertical a, ul.MenuBarHorizontal a
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
Cor a alterar
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemHover
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
largura fixa e adicione a propriedade e o valor espao em branco: sem quebra automtica de linha;
regra).
3 Localize a regra ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul.
4 Altere a propriedade de largura para uma largura desejada (ou altere a propriedade para auto para remover uma
largura fixa).
5 Localize a regra ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul li.
6 Adicione as seguintes propriedades regra: flutuao: nenhum; e cor de fundo: transparente;.
7 Exclua o valor e a propriedade largura: 8.2em;.
Posicionar submenus
A posio dos submenus da Barra de menus do Spry controlada pela propriedade de margem nas tags ul do
submenu.
1 Localize a regra ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul.
2 Altere os valores padro margem: -5% 0 0 95%; para os valores desejados.
A. Expandido B. Recolhido
O HTML do widget Painel flexvel compe-se de uma tag div externa que contm a tag div do contedo e a tag div
do recipiente da aba. O HTML do widget Painel flexvel tambm inclui tags de script no cabealho do documento e
aps o markup HTML do Painel flexvel.
Para obter uma explicao mais abrangente sobre como o widget Painel flexvel funciona, inclusive uma anatomia
completa do cdigo desse widget, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_br.
Nota: Para inserir um widget Painel flexvel, voc tambm pode usar a categoria Spry no painel Inserir.
Mova o ponteiro do mouse sobre a aba do painel na Visualizao de design e clique no cone em forma de olho que
aparece direita da aba.
Selecione um widget Painel flexvel na janela Documento e selecione Aberto ou Fechado no menu pop-up Exibir,
no Inspetor de propriedades (Janela > Propriedades).
padro.
.CollapsiblePanel
.CollapsiblePanelTab
.CollapsiblePanelContent
regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua
preferncia:
Cor a alterar
.CollapsiblePanelTab
Cor a alterar
.CollapsiblePanelContent
.CollapsiblePanelOpen .CollapsiblePanelTab
O cdigo HTML do widget Painis com aba consiste em uma tag div externa que contm todos os painis, uma lista
das abas, um div para conter os painis de contedo e um div para cada painel de contedo. O HTML do widget
Painis com aba tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget Painel
com aba.
Para obter uma explicao abrangente sobre como o widget Painis com aba funciona, inclusive uma anatomia
completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_br.
Nota: Para inserir um widget Painis com aba, voc tambm pode usar a categoria Spry no painel Inserir.
Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualizao de design e clique no cone em forma
de olho que aparece direita da aba.
Selecione um widget Painis com aba na janela Documento e clique no nome do painel para edit-lo no menu
Painis do Inspetor de propriedades (Janela > Propriedades).
mover.
3 Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.
.TabbedPanels
.TabbedPanelsTabGroup ou .TabbedPanelsTab
.TabbedPanelsContentGroup ou
.TabbedPanelsContent
a regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua
preferncia:
Cor a alterar
.Tabbed PanelsContentGroup ou
.TabbedPanelsContent
.TabbedPanelsTabSelected
.TabbedPanelsTabHover
Voc tambm pode localizar a regra selecionando o widget Painis com aba e verificando o painel Estilos CSS (Janela
> Estilos CSS). Verifique se o painel est definido no modo Atual.
2 Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;.
O recipiente da dica de ferramenta. Este elemento contm a mensagem ou o contedo que deve ser exibido assim
que o usurio ativa a dica de ferramenta.
Uma dica de ferramenta aberta ser fechada antes que a prxima seja aberta.
As dicas de ferramenta so exibidas enquanto o usurio passa o mouse pela rea de acionamento.
No existe nenhuma restrio quanto ao tipo de tag que pode ser usado para os acionadores e para o contedo da
dica de ferramenta. No entanto, os elementos em nvel de bloco so sempre recomendados para evitar possveis
problemas de processamento entre navegadores.
Por padro, a dica de ferramenta aparece 20 pixels abaixo e direita do cursor. Para definir um ponto de aparncia
personalizada, use as opes Deslocamento horizontal e vertical do Inspetor de propriedades.
Atualmente, no possvel manter uma dica de ferramenta aberta durante o carregamento da pgina no navegador.
O widget Dica de ferramenta requer muito pouco CSS. O Spry usa o JavaScript para mostrar, ocultar e posicionar a
dica de ferramenta. Voc pode aplicar outros estilos para a dica de ferramenta com as tcnicas de CSS padro,
conforme necessrio para sua pgina. A nica regra contida no arquivo CSS padro uma soluo para problemas do
Internet Explorer 6; essa regra faz com que a dica de ferramenta aparea acima dos elementos de formulrio ou objetos
Flash.
Para obter uma explicao mais abrangente sobre como o widget Dica de ferramenta Spry funciona, inclusive uma
anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytooltip_br.
Para assistir a um tutorial em vdeo sobre como trabalhar com o widget Dica de ferramenta Spry, consulte
www.adobe.com/go/lrvid4046_dw_br.
Nota: Para inserir um widget Dica de ferramenta, voc tambm pode usar a categoria Spry no painel Inserir.
Essa ao insere um novo widget Dica de ferramenta com um recipiente para o contedo da dica de ferramenta e uma
sentena de alocador de espao que age como o acionador da dica de ferramenta.
Voc tambm pode selecionar um elemento existente na pgina (por exemplo, uma imagem) e, em seguida, inserir a
dica de ferramenta. Ao fazer isso, o elemento selecionado age como o acionador da nova dica de ferramenta.
necessrio selecionar um elemento de tag completa (por exemplo, uma tag img ou p) para que o Dreamweaver possa
atribuir uma ID a esse elemento caso ainda no exista uma.
mouse est passando por ela (mesmo que o mouse saia do elemento acionador). Manter a dica de ferramenta aberta
ser til se houver links ou outros elementos interativos na dica de ferramenta. Se essa opo no for selecionada, o
elemento de dica de ferramenta ser fechado quando o mouse sair da rea de acionamento.
Deslocamento horizontal Calcula a posio horizontal da dica de ferramenta em relao ao mouse. O valor de
veneziana que se move para cima e para baixo para mostrar ou ocultar a dica de ferramenta. Atenuar ativa e desativa
a dica de ferramenta. O valor padro Nenhum.
A. Mensagens de erro do widget Grupo de botes de opo de validao B. Grupo do widget Grupo de botes de opo de validao
O widget Grupo de botes de opo de validao inclui trs estados alm do estado inicial: vlido, invlido e valor
obrigatrio. Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente
(SpryValidationRadio.css), de acordo com os resultados de validao desejados. Um widget Grupo de botes de opo
de validao pode validar em diversos momentos: quando o usurio clica fora do widget, quando ele faz selees ou
quando ele tenta enviar o formulrio.
Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio.
Estado vlido Quando o usurio faz uma seleo e o formulrio pode ser enviado.
Estado obrigatrio Quando o usurio no faz uma seleo obrigatria.
Estado invlido Quando o usurio seleciona um boto de opo que no tem um valor aceitvel.
Sempre que um widget Grupo de botes de opo de validao entra em um desses estados por meio de interao do
usurio, a lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por
exemplo, se um usurio tentar enviar um formulrio mas no fizer selees, o Spry aplicar uma classe ao widget que
provocar a exibio da mensagem de erro Faa uma seleo. As regras que controlam o estilo e os estados de
exibio das mensagens de erro esto no arquivo que acompanha o widget, SpryValidationRadio.css.
O cdigo HTML padro do widget Grupo de botes de opo de validao, em geral dentro de um formulrio, consiste
em uma tag span de recipiente que fica em volta da tag input type="radio" do grupo de botes de opo. O cdigo
HTML do widget Grupo de botes de opo de validao tambm inclui tags de script no cabealho do documento
e aps o cdigo HTML do widget.
Para obter uma explicao mais abrangente sobre como o dispositivo Grupo de botes de opo de validao funciona,
inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryradio_br.
a cada boto.
5 Na coluna Valor, clique em cada valor para tornar o campo editvel e atribua um valor exclusivo a cada boto de
opo.
6 (Opcional) Clique em um boto de opo ou em seu valor para selecionar uma linha especfica e, em seguida, clique
nas setas para cima e para baixo para mover a linha para cima ou para baixo.
7 Selecione o tipo de layout para o grupo de botes de opo.
Quebras de linha Coloca cada boto de opo em uma linha separada usando quebras de linha (tags br).
Tabela Coloca cada boto de opo em uma linha separada usando linhas individuais da tabela (tags tr).
8 Clique em OK.
Nota: Para inserir um widget Grupo de botes de opo, voc tambm pode usar a categoria Spry no painel Inserir.
Estados de visualizao. Por exemplo, selecione Inicial para ver o widget em seu estado inicial.
1 No widget Grupo de botes de opo, selecione o boto que deseja usar para o boto vazio ou invlido. Ao
especificar valores vazios ou invlidos para o widget, devem existir botes de opo correspondentes com esses
valores j atribudos.
2 No Inspetor de propriedades (Janela > Propriedades) do widget, atribua ao boto de opo um valor marcado. Para
criar um boto de opo com um valor vazio, digite none na caixa de texto Valor marcado. Para criar um boto de
opo com um valor invlido, digite invalid na caixa de texto Valor marcado.
3 Selecione o widget Grupo de botes de opo de validao inteiro clicando na aba azul.
4 No Inspetor de propriedades, especifique os valores vazios ou invlidos. Para criar um widget que exibe a
mensagem de erro de valor vazio "Faa uma seleo", digite none na caixa de texto Valor vazio. Para criar um widget
que exibe a mensagem de erro de valor invlido "Selecione um valor vlido", digite invalid na caixa de texto Valor
invlido.
O boto de opo propriamente dito e o widget Grupo de botes de opo devem ter os valores none ou invalid
atribudos para que as mensagens de erro sejam exibidas corretamente.
Estilo do texto das mensagens de erro do widget Grupo de botes de opo de validao
Por padro, as mensagens de erro do widget Grupo de botes de opo de validao aparecem em vermelho com uma
borda slida de 1 pixel em torno do texto.
Para alterar o estilo do texto de um widget Grupo de botes de opo de validao, use a seguinte tabela para
localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e
valores de estilo de texto.
Texto no qual aplicar o estilo
.radioRequiredState .radioRequiredMsg,
.radioInvalidState .radioInvalidMsg
A. Widget Campo de texto, dica ativada B. Widget Campo de texto, estado vlido C. Widget Campo de texto, estado invlido D. Widget
Campo de texto, estado obrigatrio
O widget Campo de texto de validao inclui inmeros estados (por exemplo, vlido, invlido, estado obrigatrio e
assim por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com
os resultados de validao desejados. Um widget Campo de texto de validao pode validar em vrios pontos; por
exemplo, quando o visitante clica fora do widget, digita ou tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o
formulrio.
Estado de foco O estado do widget quando o usurio coloca o ponto de insero no widget.
Estado vlido O estado do widget depois que o usurio insere informaes corretamente e o formulrio pode ser
enviado.
Estado invlido O estado do widget depois que o usurio insere texto em um formato invlido. (Por exemplo, 06 para
um ano em vez de 2006).
Estado obrigatrio O estado do widget quando o usurio no insere texto obrigatrio no campo de texto.
Estado Nmero mnimo de caracteres O estado do widget quando o usurio insere um nmero de caracteres inferior
Nota: Para inserir um widget Campo de texto de validao, voc tambm pode usar a categoria Spry no painel Inserir.
Na maioria dos tipos de validao, o campo de texto deve ter um formato padro. Por exemplo, se voc aplicar o tipo
de validao inteiro a um campo de texto, o widget s validar se o usurio inserir nmeros no campo de texto. Alguns
tipos de validao, no entanto, permitem que voc escolha o tipo de formato aceito em seu campo de texto. Esta tabela
lista os formatos e tipos de validao disponveis no Inspetor de propriedades:
Tipo de validao
Formato
Nenhum
Inteiro
Email Endereo
O campo de texto aceita endereos de email que contm @ e um ponto (.) que sejam precedidos e
seguidos por pelo menos uma letra.
Data
Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades.
Tempo
Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades. (tt
representa o formato am/pm; t representa o formato a/p.)
Carto de crdito
Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades.
Voc pode optar por aceitar todos os cartes de crdito ou especificar determinado tipo de carto
de crdito (MasterCard, Visa e outros). O campo de texto no aceita espaos nos nmeros do carto
de crdito. Por exemplo: 4321 3456 4567 4567.
CEP
Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades.
Nmero de telefone
O campo de texto aceita nmeros de telefone formatados para os Estados Unidos e o Canad (000)
000-0000 ou formatos personalizados. Se voc selecionar um formato personalizado como opo,
insira o formato, por exemplo 000.00(00), na caixa de texto Padro.
Nmero do CPF
O campo de texto aceita nmeros de CPF formatados como 000-00-0000. Se voc desejar usar um
formato diferente, selecione Personalizado como seu tipo de validao e especifique um padro.
O mecanismo de validao de padres aceita somente caracteres ASCII.
Moeda
Valida vrios tipos de nmeros: inteiros (por exemplo, 1); valores flutuantes (por exemplo, 12.123);
e valores flutuantes em notao cientfica (por exemplo, 1.212e+12, 1.221e-12 onde e usado
como uma potncia de 10).
Endereo IP
Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades.
URL
Personalizada
Permite que voc especifique um formato e um tipo de validao personalizado. Insira o padro do
formato (e uma dica, se quiser) no Inspetor de propriedades. O mecanismo de validao de
padres aceita somente caracteres ASCII.
2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve
(mx.). Por exemplo, se voc inserir 3 na caixa Caracteres (mn.), o widget validar apenas se o usurio inserir trs
ou mais caracteres.
Por exemplo, se voc inserir 3 na caixa Valor mnimo, o widget validar somente se o usurio inserir o nmero 3
ou um valor superior (4, 5, 6 e assim por diante) no campo de texto.
Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.
a sua preferncia.
para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar seus prprios
valores e propriedades de estilo de texto:
Texto a ser alterado
Texto da mensagem de
erro
Cor a alterar
A. Contador de caracteres restantes B. Widget rea de texto em foco, estado nmero mximo de caracteres C. Widget rea de texto em foco,
estado vlido D. Widget rea de texto, estado obrigatrio E. Contador de caracteres digitados
O widget rea de texto de validao inclui inmeros estados (por exemplo, vlido, invlido, estado obrigatrio e assim
por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os
resultados de validao desejados. Um widget rea de texto de validao pode validar em vrios pontos; por exemplo,
quando o usurio clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o
formulrio.
Estado de foco O estado do widget quando o usurio coloca o ponto de insero no widget.
Estado vlido O estado do widget depois que o usurio insere informaes corretamente e o formulrio pode ser
enviado.
Nota: Para inserir um widget rea de texto de validao, voc tambm pode usar a categoria Spry no painel Inserir.
2 No Inspetor de propriedades (Janela > Propriedades), insira um nmero na caixa Caracteres (mn.) ou Caracteres
(mx.). Por exemplo, se voc inserir 20 na caixa Caracteres (mn.), o widget validar apenas se o usurio inserir 20
ou mais caracteres na rea de texto.
restantes.
Nota: A opo Caracteres restantes s fica disponvel se voc define um nmero mximo de caracteres permitidos.
Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.
a sua preferncia.
para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar seus prprios
valores e propriedades de estilo do texto:
Texto a ser alterado
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
.textareaValidState textarea,
textarea.textareaValidState
textarea.textareaRequiredState,
.textareaRequiredState textarea,
textarea.textareaMinCharsState,
.textareaMinCharsState textarea,
textarea.textareaMaxCharsState,
.textareaMaxCharsState textarea
.textareaFocusState textarea,
textarea.textareaFocusState
A. Widget Seleo de validao em foco B. Widget Seleo, estado vlido C. Widget Seleo, estado obrigatrio D. Widget Seleo, estado
invlido
O widget Seleo de validao inclui inmeros estados (por exemplo, vlido, invlido, valor obrigatrio e assim por
diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os
resultados de validao desejados. Um widget Seleo de validao pode validar em vrios pontos; por exemplo,
quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o
formulrio.
Estado de foco O estado quando o usurio clica no widget.
Estado vlido O estado do widget depois que o usurio seleciona um item vlido e o formulrio pode ser enviado.
Estado invlido O estado do widget depois que o usurio seleciona um item invlido.
Estado obrigatrio O estado do widget quando o usurio no seleciona um item vlido.
Sempre que um widget Seleo de validao entra em um desses estados por meio de interao do usurio, a lgica da
estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um
usurio tentar enviar um formulrio mas no selecionar um item no menu, o Spry aplicar uma classe ao widget para
que ele exiba a mensagem de erro Selecione um item. As regras que controlam o estilo e os estados de exibio das
mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationSelect.css.
O HTML padro do widget Seleo de validao, em geral dentro de um formulrio, consiste em uma tag <span> de
recipiente que fica em volta da tag <select> da rea de texto. O HTML do widget Seleo de validao tambm inclui
tags de script no cabealho do documento e aps o markup HTML do widget.
Para obter uma explicao abrangente sobre como o widget Seleo de validao funciona, inclusive uma anatomia
completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryselect_br.
faz isso automaticamente. Para obter mais informaes, consulte o tpico anterior.
Nota: Para inserir um widget Seleo de validao, voc tambm pode usar a categoria Spry no painel Inserir.
Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.
2 No Inspetor de propriedades (Janela > Propriedades), insira um nmero para usar como um valor invlido na caixa
Valor invlido.
localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e
valores de estilo de texto:
Texto no qual aplicar o
estilo
Propriedade relevante a
alterar
A. Grupo de widgets Caixa de seleo de validao, estado nmero mnimo de selees B. Widget Caixa de seleo de validao, estado
obrigatrio
O widget Caixa de seleo de validao inclui inmeros estados (por exemplo, vlido, invlido, valor obrigatrio e
assim por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com
os resultados de validao desejados. Um widget Caixa de seleo de validao pode validar em vrios pontos; por
exemplo, quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o
formulrio.
Estado vlido O estado do widget depois que o usurio faz uma seleo ou corrige inmeras selees, e o formulrio
pode ser enviado.
Estado obrigatrio O estado do widget quando o usurio no faz uma seleo obrigatria.
Estado Nmero mnimo de selees O estado do widget quando o usurio marca menos caixas de seleo do que o
Sempre que um widget Caixa de seleo de validao entra em um desses estados por meio de interao do usurio, a
lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo,
se um usurio tentar enviar um formulrio mas no fizer selees, o Spry aplicar uma classe ao widget que provocar
a exibio da mensagem de erro Faa uma seleo. As regras que controlam o estilo e os estados de exibio das
mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationCheckbox.css.
O HTML padro do widget Caixa de seleo de validao, em geral dentro de um formulrio, consiste em uma tag
<span> de recipiente que fica em volta da tag <input type="checkbox"> da caixa de seleo. O HTML do widget Caixa
de seleo de validao tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget.
Para obter uma explicao abrangente sobre como o widget Caixa de seleo de validao funciona, inclusive uma
anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprycheckbox_br.
Nota: Para inserir um widget Caixa de seleo de validao, voc tambm pode usar a categoria Spry no painel Inserir.
Estados de visualizao. Por exemplo, selecione Inicial para ver o widget em seu estado inicial.
O Dreamweaver salva o arquivo SpryValidationCheckbox.css na pasta SpryAssets do seu site sempre que voc cria um
widget Caixa de seleo de validao do Spry. aconselhvel consultar este arquivo, pois ele contm informaes
comentadas sobre vrios estilos que se aplicam ao widget.
2 Use esta tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar
Texto da mensagem de
erro
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState .checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg
Embora voc possa facilmente editar regras para o widget Caixa de seleo de validao diretamente no arquivo CSS
relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar
as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.
A. Widget Senha, estado do nmero mnimo de caracteres B. Widget Senha, estado do nmero mximo de caracteres C. Widget Senha, estado
obrigatrio
O widget Senha de validao inclui inmeros estados (por exemplo, vlido, obrigatrio, nmero mnimo de caracteres
e assim por diante). Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente
(SpryValidationPassword.css), de acordo com os resultados de validao desejados. Um widget Senha de validao
pode validar em vrios pontos; por exemplo, quando o visitante do site clica fora do campo de texto, digita ou tenta
enviar o formulrio.
Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio.
Estado de foco Quando o usurio coloca o ponto de insero no widget.
Estado vlido Quando o usurio insere informaes corretamente e o formulrio pode ser enviado.
Estado de fora invlida Quando o usurio insere um texto que no corresponde aos critrios de fora do campo de
texto de senha. Por exemplo, se voc tiver especificado que a senha deve conter pelo menos duas letras maisculas e a
senha inserida no tiver nenhuma ou tiver apenas uma letra maiscula.
Estado obrigatrio Quando o usurio no insere texto obrigatrio no campo de texto.
Estado Nmero mnimo de caracteres Quando o usurio insere um nmero de caracteres inferior ao obrigatrio no
Nota: Para inserir um widget Senha de validao, voc tambm pode usar a categoria Spry no painel Inserir.
a sua preferncia.
Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.
campos de opo so os nmeros obrigatrios para a validao do widget. Por exemplo, se voc inserir 8 na caixa
Mnimo de caracteres, o widget no ser validado, a no ser que o usurio insira pelo menos oito caracteres no
campo de texto de senha.
Mnimo/Mximo de caracteres Especifica o nmero mnimo e mximo de caracteres obrigatrios para que a senha seja
vlida.
Mnimo/Mximo de letras Especifica o nmero mnimo e mximo de letras (a, b, c e assim por diante) obrigatrias
Mnimo/Mximo de letras maisculas Especifica o nmero mnimo e mximo de letras maisculas (A, B, C e assim por
diante) obrigatrias para que a senha seja vlida.
Mnimo/Mximo de caracteres especiais Especifica o nmero mnimo e mximo de caracteres especiais (!, @, # e assim
por diante) obrigatrios para que a senha seja vlida.
Deixar qualquer uma das opes acima em branco faz com que o widget no seja validado em relao ao critrio em
questo. Por exemplo, se voc deixar a opo Mnimo/mximo de nmeros em branco, o widget no procurar
nmeros na string da senha.
apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de texto.
Propriedades relevantes a
alterar
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState .passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg
O widget Confirmao de validao inclui inmeros estados (por exemplo, vlido, invlido, obrigatrio e assim por
diante). Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente
(SpryValidationConfirm.css), de acordo com os resultados de validao desejados. Um widget Confirmao de
validao pode validar em vrios pontos; por exemplo, quando o visitante do site clica fora do widget, digita ou tenta
enviar o formulrio.
Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio.
Estado de foco Quando o usurio coloca o ponto de insero no widget.
Estado vlido Quando o usurio insere informaes corretamente e o formulrio pode ser enviado.
Estado invlido Quando o usurio insere um texto que no corresponde ao inserido em um campo de texto anterior,
no widget Campo de texto de validao ou no widget Senha de validao.
Estado obrigatrio Quando o usurio no insere texto obrigatrio no campo de texto.
Para obter uma explicao abrangente sobre como os widgets Confirmao de validao funcionam, bem como
informaes adicionais sobre a estrutura do widget, consulte www.adobe.com/go/learn_dw_spryconfirm_br.
Nota: Para inserir um widget Confirmao de validao, voc tambm pode usar a categoria Spry no painel Inserir.
a sua preferncia.
validao, selecionando um campo de texto no menu pop-up Validar em relao a. Todos os campos de texto com
IDs exclusivas atribudas a eles so exibidos como opes no menu pop-up.
Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.
CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de
texto.
Texto a ser alterado
Propriedades relevantes a
alterar
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg
criando um conjunto de dados e inserindo um layout, verifique se o ponto de insero est onde voc deseja inserir
o layout na pgina.
2 Escolha Inserir > Spry > Conjunto de dados do Spry.
3 Na tela Especificar fonte de dados, faa o seguinte:
Selecione HTML no menu pop-up Selecionar tipo de dados. (Ele selecionado por padro.)
Especifique um nome para o novo conjunto de dados. Da primeira vez que voc criar um conjunto de dados, o
nome padro ser ds1. O nome do conjunto de dados pode conter letras, nmeros e sublinhados, mas no pode
comear com um nmero.
Especifique os elementos HTML na fonte de dados que voc deseja que o Dreamweaver detecte. Por exemplo,
se voc tiver organizado seus dados dentro de uma tag div e quiser que o Dreamweaver detecte tags div em vez
de tabelas, selecione Divs no menu pop-up Detectar. A opo Personalizar permite digitar qualquer nome de tag
que voc deseje selecionar.
Especifique o caminho para o arquivo que contm a fonte de dados HTML. Pode ser um caminho relativo para
um arquivo local no seu site (por exemplo, dados/dados_html.html), ou ento um URL absoluto para uma
pgina da Web ao vivo (usando HTTP ou HTTPS). Voc pode clicar no boto Procurar para navegar at um
arquivo local e selecion-lo.
O Dreamweaver processa a fonte de dados HTML na janela Seleo de dados e exibe marcadores visuais para os
elementos qualificados para serem contineres do conjunto de dados. O elemento que voc deseja usar j deve
ter uma ID exclusiva atribuda a ele. Se no tiver, o Dreamweaver exibir uma mensagem de erro, e voc
precisar voltar ao arquivo de fonte de dados e atribuir a ele uma ID exclusiva. Alm disso, os elementos
qualificados no arquivo de fonte de dados no podem residir em regies do Spry nem conter outras referncias
de dados.
Como alternativa, voc pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais
informaes, consulte Usar um feed em tempo de design na pgina 475.
Selecione o elemento para o seu continer de dados clicando em uma das setas amarelas que aparecem na janela
Seleo de dados, ou ento escolhendo uma ID no menu pop-up Contineres de dados.
No caso de arquivos grandes, voc pode clicar na seta Expandir/reduzir, na parte inferior da janela Seleo de
dados, para ver mais dados.
Depois que voc selecionar o elemento de continer para o conjunto de dados, o Dreamweaver exibir uma
visualizao do conjunto de dados na janela Visualizao de dados.
(Opcional) Selecione Seleo avanada de dados se quiser especificar seletores de dados CSS para o conjunto de
dados. Por exemplo, se voc especificar .product na caixa de texto Seletores de linha e .boximage na caixa de
texto Seletores de coluna, o conjunto de dados incluir somente as linhas com a classe .product atribuda e
somente as colunas com a classe .boximage atribuda.
Se quiser digitar mais de um seletor em determinada caixa de texto, separe-os com vrgula.
Para obter mais informaes, consulte Sobre os seletores de dados do Spry na pgina 475.
Quando terminar de usar a tela Especificar fonte de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Definir opes de dados. Se voc clicar em Concludo,
o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).
(Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de
coluna no menu pop-up Tipo. Por exemplo, se uma coluna no conjunto de dados contm nmeros, selecionea e escolha number no menu pop-up Tipo. Essa opo s ser importante se voc quiser que seus usurios
possam ordenar os dados por essa coluna.
Voc pode selecionar uma coluna do conjunto de dados clicando em seu cabealho, escolhendo-a no menu popup Nome da coluna ou navegando at ela com as setas para a esquerda e para a direita no canto superior
esquerdo da tela.
(Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a
ordenao no menu pop-up Ordenar colunas. Depois de selecionar a coluna, voc poder especificar o uso de
ordem crescente ou decrescente.
(Opcional: somente tabelas) Desmarque a opo Usar primeira linha como cabealho se quiser usar nomes de
colunas genricos (ou seja, column0, column1, column2 etc.) em vez de nomes de colunas especificados na sua
fonte de dados HTML.
Nota: Se voc tiver selecionado algo diferente de uma tabela como elemento de continer do seu conjunto de dados,
essa opo e a prxima no estaro disponveis. O Dreamweaver usa automaticamente column0, column1,
column2 etc. como nomes de colunas de conjuntos de dados no baseados em tabelas.
(Opcional: somente tabelas) Selecione Usar colunas como linhas para reverter a orientao horizontal e vertical
dos dados no conjunto de dados. Se voc selecionar essa opo, as colunas sero usadas como linhas.
(Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados.
(Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto
de dados. Se quiser que os dados sejam atualizados automaticamente, selecione Atualizar dados
automaticamente e especifique um tempo de atualizao em milissegundos.
Quando terminar de usar a tela Definir opes de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Escolher opes de insero. Se voc clicar em
Concludo, o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).
5 Na tela Escolher opes de insero, siga um destes procedimentos:
Selecione um layout para o novo conjunto de dados e especifique as opes de configurao adequadas. Para
obter mais informaes, consulte Escolher um layout para o conjunto de dados na pgina 471.
Selecione No inserir HTML. Se voc selecionar essa opo, o Dreamweaver criar o conjunto de dados, mas
no adicionar HTML pgina. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes),
e voc poder arrastar dados manualmente do conjunto de dados para a pgina.
6 Clique em Concludo.
O Dreamweaver criar o conjunto de dados e, se voc tiver selecionado uma opo de layout, exibir na sua pgina
o layout e os alocadores de espao para os dados. Se observar a Visualizao de cdigo, voc ver que o
Dreamweaver adicionou ao cabealho referncias aos arquivos SpryData.js e SpryHTMLDataSet.js. Esses arquivos
so ativos importantes do Spry que funcionam em conjunto com a pgina. No remova esse cdigo da sua pgina,
ou ento o conjunto de dados no funcionar. Quando carregar sua pgina em um servidor, voc precisar carregar
tambm esses arquivos como dependentes.
criando um conjunto de dados e inserindo um layout, verifique se o ponto de insero est onde voc deseja inserir
o layout na pgina.
Especifique o caminho para o arquivo que contm a fonte de dados XML. Pode ser um caminho relativo para
um arquivo local no seu site (por exemplo, arquivos_de_dados/dados.xml), ou ento um URL absoluto para
uma pgina da Web (usando HTTP ou HTTPS). Voc pode clicar no boto Procurar para navegar at um
arquivo local e selecion-lo.
O Dreamweaver processa a fonte de dados XML na janela Elementos de linha, exibindo a rvore XML de
elementos de dados disponveis para seleo. Os elementos repetidos so marcados com um sinal de adio (+)
e os elementos-filho so recuados.
Como alternativa, voc pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais
informaes, consulte Usar um feed em tempo de design na pgina 475.
Selecione o elemento que contm os dados que voc deseja exibir. Geralmente um elemento repetido como
<menu_item>, com vrios elementos-filho como <item>, <link>, <description> etc.
Depois que voc selecionar o elemento de continer para o conjunto de dados, o Dreamweaver exibir uma
visualizao do conjunto de dados na janela Visualizao de dados. A caixa de texto XPath exibe uma expresso
que mostra onde o n selecionado est localizado no arquivo XML de origem.
Nota: XPath (XML Path Language) uma sintaxe para lidar com trechos de um documento XML. Na maioria
das vezes, essa sintaxe usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL
usada para bancos de dados de consulta. Para obter mais informaes sobre o XPath, consulte a especificao da
linguagem XPath no site da W3C em www.w3.org/TR/xpath.
Quando terminar de usar a tela Especificar fonte de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Definir opes de dados. Se voc clicar em Concludo,
o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).
(Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de
coluna no menu pop-up Tipo. Por exemplo, se uma coluna no conjunto de dados contm nmeros, selecionea e escolha number no menu pop-up Tipo. Essa opo s ser importante se voc quiser que seus usurios
possam ordenar os dados por essa coluna.
Voc pode selecionar uma coluna do conjunto de dados clicando em seu cabealho, escolhendo-a no menu popup Nome da coluna ou navegando at ela com as setas para a esquerda e para a direita no canto superior
esquerdo da tela.
(Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a
ordenao no menu pop-up Ordenar coluna. Depois de selecionar a coluna, voc poder especificar o uso de
ordem crescente ou decrescente.
(Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados.
(Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto
de dados. Se quiser atualizar os dados automaticamente, selecione Atualizar dados automaticamente e
especifique um tempo de atualizao em milissegundos.
Quando terminar de usar a tela Definir opes de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Escolher opes de insero. Se voc clicar em
Concludo, o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).
5 Na tela Escolher opes de insero, siga um destes procedimentos:
Selecione um layout para o novo conjunto de dados e especifique as opes de configurao adequadas. Para
obter mais informaes, consulte Escolher um layout para o conjunto de dados na pgina 471.
Selecione No inserir HTML. Se voc selecionar essa opo, o Dreamweaver criar o conjunto de dados, mas
no adicionar HTML pgina. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes),
e voc poder arrastar dados manualmente do conjunto de dados para a pgina.
6 Clique em Concludo.
O Dreamweaver criar o conjunto de dados e, se voc tiver selecionado uma opo de layout, exibir na sua pgina
o layout e os alocadores de espao para os dados. Se observar a Visualizao de cdigo, voc ver que o
Dreamweaver adicionou ao cabealho referncias aos arquivos xpath.js e SpryData.js. Esses arquivos so ativos
importantes do Spry que funcionam em conjunto com a pgina. No remova esse cdigo da sua pgina, ou ento
o conjunto de dados no funcionar. Quando carregar sua pgina em um servidor, voc precisar carregar tambm
esses arquivos como dependentes.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir tabela e siga estas
etapas:
1 No painel Colunas, ajuste as colunas da tabela seguindo este procedimento:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da tabela. Clique no sinal
de adio (+) e selecione um nome de coluna para adicionar novas colunas tabela.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. A coluna movida
para cima fica mais esquerda da tabela exibida, e a coluna movida para baixo aparece direita.
2 Para tornar uma coluna ordenvel, selecione-a no painel Colunas e escolha Ordenar coluna quando o cabealho
individuais na pgina HTML, pode aplicar uma classe CSS a uma ou mais das seguintes opes:
Classe Linha mpar Altera a aparncia das linhas com numerao mpar na tabela dinmica, de acordo com o estilo
de classe selecionado.
Classe Linha par Altera a aparncia das linhas com numerao par na tabela dinmica, de acordo com o estilo de
classe selecionado.
Classe Focalizao Altera a aparncia de uma linha da tabela quando voc move o mouse sobre ela, de acordo com
selecionado.
Nota: A ordem das classes mpar, par, de focalizao e de seleo na sua folha de estilos muito importante. As regras
devem estar na ordem exata indicada acima (mpar, par, focalizao, seleo). Se a regra de focalizao aparecer
abaixo da regra de seleo na folha de estilos, o efeito de focalizao no aparecer at que o usurio mova o mouse
sobre outra linha. Se as regras de focalizao e seleo aparecerem acima das regras par e mpar na folha de estilos, os
efeitos de par e mpar no funcionaro. Voc pode arrastar as regras no painel CSS para orden-las corretamente, ou
ento manipular o cdigo CSS diretamente.
4 Se a tabela que voc est criando for se tornar uma tabela mestre dinmica do Spry, selecione Atualizar regies de
detalhes quando a linha estiver selecionada. Para obter mais informaes, consulte Sobre tabelas mestre dinmicas
do Spry e atualizao de regies de detalhes na pgina 475.
5 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver a tabela aparecer com uma linha de cabealhos e uma linha de
referncias de dados. As referncias de dados aparecem realadas e entre chaves ({}).
Layout mestre/detalhado
Selecione essa opo se quiser exibir seus dados usando um layout mestre/detalhado. O layout mestre/detalhado
permite aos usurios clicar em um item na regio mestre ( esquerda) que atualiza as informaes na regio detalhada
( direita). Normalmente, a regio mestre contm uma longa lista de nomes; por exemplo, uma lista dos produtos
disponveis. Quando o usurio clica em um dos nomes de produtos, a regio detalhada exibe muito mais informaes
detalhadas sobre a seleo.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir layout
mestre/detalhado e siga estas etapas:
1 No painel Colunas mestre, ajuste o contedo da sua regio mestre da seguinte forma:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da regio mestre. Clique
no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas regio mestre. Por padro,
o Dreamweaver preenche a regio mestre com dados da primeira coluna do conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna
para cima ou para baixo no painel Colunas mestre define a ordem de aparecimento dos dados na regio mestre
da pgina.
2 Repita as etapas acima para o painel Colunas detalhadas. Por padro, o Dreamweaver preenche a regio detalhada
com todos os dados que no aparecem na regio mestre (ou seja, todas as colunas, exceto a primeira do conjunto
de dados).
3 (Opcional) Defina diferentes tipos de continer para os dados na regio detalhada. Para fazer isso, selecione o nome
de uma coluna detalhada e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc
pode escolher entre as tags DIV, P, SPAN e H1-H6.
4 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver que as regies mestre/detalhada aparecero preenchidas com as
referncias de dados selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}).
Layout de contineres empilhados
Selecione essa opo se quiser exibir seus dados usando uma estrutura de contineres repetidos na pgina. Por
exemplo, se voc tem quatro colunas de dados no conjunto de dados, cada continer pode incluir as quatro colunas, e
a estrutura de contineres se repetir para cada linha no conjunto de dados.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir contineres
empilhados e siga estas etapas:
1 No painel Colunas, ajuste o contedo dos seus contineres empilhados da seguinte forma:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna dos contineres
empilhados. Clique no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas aos
contineres. Por padro, o Dreamweaver preenche os contineres empilhados com dados de todas as colunas do
conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna
para cima ou para baixo no painel Colunas define a ordem de aparecimento dos dados nos contineres
empilhados da pgina.
2 (Opcional) Defina diferentes tipos de continer para os dados nos contineres empilhados. Para fazer isso, selecione
o nome de uma coluna do conjunto de dados e escolha o continer que deseja usar para ela no menu pop-up Tipo
de continer. Voc pode escolher entre as tags DIV, P, SPAN e H1-H6.
3 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver o continer preenchido com as referncias de dados selecionadas por
voc. As referncias de dados aparecem realadas e entre chaves ({}).
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da rea de destaque. Clique
no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas rea de destaque. Por
padro, o Dreamweaver preenche a rea de destaque com dados da primeira coluna do conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna
para cima ou para baixo no painel Colunas de destaque define a ordem de aparecimento dos dados na rea de
destaque da pgina.
2 (Opcional) Defina diferentes tipos de continer para os dados na rea de destaque. Para fazer isso, selecione o nome
de uma coluna do conjunto de dados e escolha o continer que deseja usar para ela no menu pop-up Tipo de
continer. Voc pode escolher entre as tags DIV, P, SPAN e H1-H6.
3 Repita as etapas acima para o painel Colunas empilhadas. Por padro, o Dreamweaver preenche as colunas
empilhadas com todos os dados que no aparecem na rea de destaque (ou seja, todas as colunas, exceto a primeira
do conjunto de dados).
4 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver a rea de destaque com os contineres empilhados ao longo dela,
preenchida com as referncias de dados selecionadas por voc. As referncias de dados aparecem realadas e entre
chaves ({}).
No inserir HTML
Selecione essa opo se quiser criar um conjunto de dados, mas no quiser que o Dreamweaver insira nele um layout
HTML. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados
manualmente do conjunto de dados para a pgina.
Mesmo que voc crie um conjunto de dados sem inserir um layout, ainda poder inserir um dos layouts HTML
disponveis a qualquer momento. Para fazer isso, clique duas vezes no nome do conjunto de dados no painel Ligaes,
continue clicando para chegar tela Escolher opes de insero, selecione o layout e clique em Concludo.
Nota: Voc tambm pode arrastar o nome do conjunto de dados do painel Ligaes para o ponto de insero na pgina.
Quando voc fizer isso, a tela Escolher opes de insero ser aberta. Selecione o layout e clique em Concludo.
Nota: Quando voc edita um conjunto de dados e seleciona um novo layout na tela Escolher opes de insero, o
Dreamweaver no substitui o layout que j est na pgina. Em vez disso, insere um novo.
Para obter mais informaes sobre a criao manual de regies mestre/de detalhes, consulte o Guia de desenvolvedor
do Spry em www.adobe.com/go/learn_dw_sdg_masterdetail_br.
Voc tambm pode clicar no boto Regio do Spry, na categoria Spry do painel Inserir.
2 Para o objeto recipiente, selecione a opo <div> ou <span>. O padro usar um recipiente <div>.
3 Escolha uma das seguintes opes:
Para criar uma Regio do Spry, selecione Regio (a padro) como o tipo de regio a inserir.
Para criar uma Regio de detalhes do Spry, selecione a opo Regio de detalhes. Voc s usaria uma regio de
detalhes se quisesse ligar os dados dinmicos que so atualizados como dados em outras alteraes de regio do Spry.
Importante: preciso inserir uma regio de detalhes em um <div> diferente da regio da tabela mestre. Convm usar a
Visualizao de cdigo para posicionar o ponto de insero corretamente.
4 Escolha o conjunto de dados do Spry no menu.
5 Se quiser criar ou alterar a regio definida para um objeto, selecione o objeto e escolha uma destas opes:
Quebra de linha da seleo Coloca uma nova regio em torno de um objeto.
Substituir seleo Substitui uma regio existente de um objeto.
6 Quando voc clica em OK, o Dreamweaver coloca um alocador de espao de regio na pgina com o texto O
contedo da regio do Spry inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto
de dados do Spry, como uma tabela ou lista de repeties, ou por dados dinmicos no painel Ligaes (Janela >
Ligaes).
Nota: No painel Ligaes, existem alguns elementos internos do Spry, ds_RowID, ds_CurrentRowID e ds_RowCount,
tambm listados. O Spry os utiliza para definir a linha na qual o usurio clicou ao determinar como atualizar as regies
de detalhes dinmicas.
7 Para substituir o texto do alocador de espao por um objeto de dados do Spry (por exemplo, uma tabela do Spry),
clique no boto apropriado do objeto de dados do Spry, na categoria Spry do painel Inserir.
8 Para substituir o texto do alocador de espao por dados dinmicos, use um dos seguintes mtodos:
Independentemente do mtodo que voc usar para definir o contedo de sua regio, estas linhas sero adicionadas ao
cdigo HTML:
<div spry:region="ds1">{name}{category}</div>
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Voc tambm pode clicar no boto Repetio do Spry, na categoria Spry do painel Inserir.
2 Para o recipiente do objeto, selecione a opo <div> ou <span> dependendo do tipo de tag desejado. O padro
Se voc quiser mais flexibilidade, convm usar a opo Repetir filhos que valida os dados de cada linha de uma lista
no nvel filho. Por exemplo, se voc tem uma lista <ul>, os dados so verificados no nvel <li>. Se voc escolher a opo
Repetir, os dados sero verificados no nvel <ul>. A opo Repetir filhos pode ser especialmente til se voc usar expresses
condicionais no cdigo.
Nota: Todos os objetos de dados do Spry precisam estar em regies. Ento, verifique se voc criou uma regio do Spry na
sua pgina antes de inserir uma regio repetitiva.
7 Quando voc clica em OK, o Dreamweaver insere um alocador de espao de regio na pgina com o texto O
contedo da regio do Spry inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto
de dados do Spry, como uma tabela ou lista de repeties, ou por dados dinmicos no painel Ligaes (Janela >
Ligaes).
Nota: No painel Ligaes, existem alguns elementos internos do Spry, ds_RowID, ds_CurrentRowID e ds_RowCount,
tambm listados. O Spry os utiliza para definir a linha na qual o usurio clicou ao determinar como atualizar as regies
de detalhes dinmicas.
8 Para substituir o texto do alocador de espao por um objeto de dados do Spry, clique no boto apropriado do objeto
Independentemente do mtodo que voc usar para definir o contedo de sua regio, estas linhas sero adicionadas ao
seu cdigo HTML:
<div spry:region="ds1">{name}{category}</div>
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Voc tambm pode clicar no boto Lista de repetio do Spry, na categoria Spry do painel Inserir.
2 Selecione a tag recipiente a ser usada: UL, OL, DL ou SELECT. As outras opes variam de acordo com o recipiente
Exibir coluna: isto que aparece quando os usurios visualizam a pgina no navegador.
Coluna de valor: este o valor real enviado ao servidor de fundo.
Por exemplo, possvel criar uma lista de estados e mostrar os usurios Alabama e Alaska, mas enviar AL ou AK ao
servidor. Voc tambm pode usar SELECT como uma ferramenta de navegao e mostrar os nomes de produto como
Adobe Dreamweaver e Adobe Acrobat aos usurios, mas enviar URLs como
support/products/dreamweaver.html e support/products/acrobat.html ao servidor.
3 Escolha o conjunto de dados do Spry no menu.
4 Escolha as colunas a serem exibidas.
5 Clique em OK para exibir uma regio de lista de repetio na pgina. Na Visualizao de cdigo, voc pode ver que
as tags HTML <ul>, <ol>, <dl> ou as tags de seleo FORM so inseridas no arquivo.
Nota: Se voc tentar inserir uma regio de lista de repetio sem ter criado uma regio, o Dreamweaver solicitar a
incluso de uma para que voc possa inserir a tabela. Todos os objetos de dados do Spry devem estar contidos nas regies.
Importante: Quando voc usa um efeito, vrias linhas de cdigo so adicionadas ao arquivo na Visualizao de cdigo.
Uma linha identifica o arquivo SpryEffects.js, que necessrio para incluir os efeitos. No remova essa linha do cdigo
ou os efeitos no funcionaro.
Para obter uma viso geral abrangente dos efeitos do Spry disponveis na estrutura do Spry, consulte
www.adobe.com/go/learn_dw_spryeffects_br.
Aparecer/Desaparecer no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha
<Seleo atual>.
4 Na caixa Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5 Selecione o efeito que deseja aplicar: Desaparecer ou Aparecer.
6 Na caixa Desaparecer de, defina a porcentagem de opacidade para quando o efeito aparecer.
7 Na caixa Desaparecer at, defina a porcentagem de opacidade para at quando o efeito desaparecer.
8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, passando de desaparecer para aparecer e vice-
Veneziana no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha
<Seleo atual>.
4 Na caixa Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5 Selecione o efeito que deseja aplicar: Ocultar ou Mostrar.
6 Na caixa Ocultar de/Mostrar de, defina o ponto inicial de rolagem do efeito como uma porcentagem ou um nmero
sucessivos.
<Seleo atual>.
4 No campo Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5 Selecione o efeito que deseja aplicar: Aumentar ou Diminuir.
6 Na caixa Aumentar de/Diminuir de, defina o tamanho do elemento quando o efeito comea. Deve ser uma
pgina.
10 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, aumentando e diminuindo com cliques
sucessivos.
no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha
<Seleo atual>.
4 Na caixa Durao do efeito, defina em milissegundos o tempo de durao do efeito.
5 Selecione a cor para iniciar o realce.
6 Selecione a cor para finalizar o realce. Essa cor dura somente pelo tempo definido em Durao do efeito.
7 Selecione a cor que o elemento ter depois que o realce terminar.
8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, alternando as cores de realce com cliques
sucessivos.
2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >
Espalhar no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha
<Seleo atual>.
Deslizar no menu.
3 Selecione a ID da tag de recipiente no menu do elemento de destino. Se o recipiente j estiver selecionado, escolha
<Seleo atual>.
4 No campo Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5 Selecione o efeito que deseja aplicar: Deslizar para cima ou Deslizar para baixo.
6 Na caixa Deslizar para cima, defina o ponto inicial de deslizamento como uma porcentagem ou um nmero pixel.
7 Na caixa Deslizar para cima at, defina o ponto final de deslizamento como uma porcentagem ou um nmero
positivo em pixel.
8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, deslizando a tela para cima e para baixo com
cliques sucessivos.
Apertar no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha
<Seleo atual>.
menu Efeitos.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha
<Seleo atual>.
Excluir um efeito
Voc pode remover um ou mais comportamentos de efeitos de um elemento.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2 No painel Comportamentos (Janela > Comportamentos), clique no efeito que voc deseja excluir da lista de
comportamentos.
3 Siga um destes procedimentos:
BrowserLab
O Adobe Browser Lab permite que voc visualize o contedo da Web local no Dreamweaver, sem que seja necessrio
post-lo primeiro em um servidor de acesso pblico. possvel visualizar arquivos a partir do seu site local
Dreamweaver ou de um servidor remoto ou de teste.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o
BrowserLab, consulte www.adobe.com/go/dwcs5drf_br.
Para obter informaes sobre como usar o servio on-line BrowserLab, consulte http://browserlab.adobe.com.
484
Quando voc visualizar arquivos usando a configurao do servidor (ou seja, arquivos nono site local do
Dreamweaver), o servidor que o BrowserLab usa aquele que est ativo no Dreamweaver. O servidor ativo o
servidor que foi selecionado por ltimo no menu de visualizao de servidor, tanto no painel Arquivos estendido
como no reduzido. Por exemplo, se voc carregou arquivos do seu site local para um servidor definido de teste, o
BrowserLab ir capturar instantneos do arquivo especfico no servidor teste. O Dreamweaver memoriza essa
configurao e a mantm at que voc altere manualmente o servidor ativo. Para verificar qual seu servidor ativo,
no painel Arquivos clique no boto Expandir. O servidor selecionado (de teste ou remoto) o servidor ativo.
Importante: Se o seu servidor ativo for um servidor remoto (por exemplo, um servidor de teste remoto) ou um servidor
de teste, a caixa de texto URL da Web na Visualizao de edio bsica do servidor dever ser preenchida. O URL da
Web deve corresponder ao local especfico do servidor de teste ou remoto (endereo FTP para sites FTP, pasta remota
para Sites local ou de rede e assim por diante).
Entrar.
O BrowserLab visualiza a pgina sem ter que primeiro salvar as alteraes locais.
Para obter documentao sobre o uso do InContext Editing para editar pginas em um navegador, consulte
www.adobe.com/go/learn_dw_incontextediting_browser_br.
Para obter documentao sobre o trabalho com o Painel de administrao do InContext Editing, consulte
www.adobe.com/go/learn_dw_incontextediting_administration_guide_br.
Para obter mais informaes sobre o Adobe Business Catalyst, visite www.businesscatalyst.com.
Nota: O Adobe AIR no fornece suporte para o Adobe Business Catalyst InContext Editing. Se voc usar o AIR Extension
para Dreamweaver para exportar um aplicativo que contm regies do InContext Editing, os recursos do InContext
Editing no funcionaro.
Selecione uma tag div, th ou td que voc deseje transformar em uma regio editvel.
Posicione o ponto de insero onde voc pretende inserir uma nova regio editvel na pgina.
Selecione exatamente uma regio editvel em um modelo do Dreamweaver (arquivo DWT).
Selecione outro contedo na pgina que voc deseje tornar editvel (por exemplo, um bloco de texto).
2 Escolha Inserir > InContext Editing > Criar regio editvel.
3 As opes variam dependendo de sua seleo.
Se voc tiver selecionado uma tag div, th ou td, o Dreamweaver a transformar em uma regio editvel sem a
necessidade de outras etapas.
Se estiver inserindo uma nova regio editvel em branco, siga um destes procedimentos:
Selecione Inserir nova regio editvel no ponto de insero atual e clique em OK. O Dreamweaver insere uma
tag div no seu cdigo com o atributo ice:editable na tag de abertura.
Selecione Transformar a tag-me em uma regio editvel se quiser que o Dreamweaver transforme a tag-me
da seleo no elemento de continer da regio. Somente algumas tags HTML podem ser transformadas: div,
th e td.
Nota: Esta segunda opo est disponvel somente quando o n pai atende aos critrios exatos para
transformao. Por exemplo, ele deve ser uma das tags transformveis listadas e no deve estar sujeito a
nenhum dos erros listados em Mensagens de erro do InContext Editing na pgina 490.
Se voc selecionou uma regio editvel de modelo do Dreamweaver, clique em OK na caixa de dilogo Criar
regio editvel. O Dreamweaver coloca a regio editvel de modelo entre as tags div que atuam como um
continer para a nova regio editvel do InContext Editing.
Se voc tiver selecionado outro contedo que deseje tornar editvel, siga um destes procedimentos:
Selecione Delimitar a seleo atual com uma tag DIV e transform-la se quiser delimitar sua seleo com uma
tag div e transform-la em uma regio editvel. A tag div com a qual o Dreamweaver delimita o contedo
atua como continer da regio editvel.
Nota: Adicionar tags div s pginas pode alterar o processamento das pginas e os efeitos das regras de CSS.
Por exemplo, se voc tiver um regra de CSS que aplica uma borda vermelha ao redor das tags div, ver uma
borda vermelha ao redor de sua seleo atual quando o Dreamweaver coloc-la entre as tags div e transmitila. Se voc quiser evitar esse tipo de conflito, poder reescrever as regras de CSS que afetam a seleo atual ou
desfazer a transformao (Editar > Desfazer) e, em seguida, selecionar e transformar uma tag suportada que o
Dreamweaver no precisa coloc-la entre as tags div.
Selecione Transformar a tag-me em uma regio editvel se quiser que o Dreamweaver transforme a tag-me
da seleo no elemento de continer da regio editvel. Somente algumas tags HTML podem ser
transformadas: div, th e td.
4 Na Visualizao de design, clique na aba azul da regio editvel para selecion-la, se ainda no estiver selecionada.
Nota: Se voc estiver trabalhando e um modelo do Dreamweaver, certifique-se de selecionar a regio editvel
InContext Editing (a regio do continer) e no a regio editvel de modelo do Dreamweaver.
5 Selecione ou cancele a seleo de opes no Inspetor de propriedades da regio editvel. As opes que voc
selecionar estaro disponveis para um usurio que editar o contedo da regio editvel em um navegador. Por
exemplo, se voc selecionar a opo Negrito, o usurio poder formatar o texto em negrito; se voc selecionar as
opes Lista numerada e Lista com marcadores, o usurio poder criar listas numeradas e com marcadores; se voc
selecionar a opo Link, o usurio poder criar links; e assim por diante. Passe o mouse sobre o cone de cada opo
para ver uma dica de ferramenta indicando a funo ativada pela opo.
6 Salve a pgina.
Se for a primeira vez que voc adiciona funes do InContext Editing a uma pgina, o Dreamweaver informar
sobre o acrscimo dos arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifiquese de carregar esses arquivos no servidor quando carregar sua pgina. Caso contrrio, os recursos do InContext
Editing no funcionaro em um navegador.
As regies repetitivas, como so vistas em uma janela de navegador editvel do InContext Editing. A regio inferior selecionada e pode ser
duplicada novamente, excluda ou movida para cima e para baixo.
Alm de adicionar regies repetitivas com base na regio original, voc tambm pode oferecer ao usurio a opo de
excluir regies, adicionar regies completamente novas (no baseadas no contedo da regio original) e mover as
regies para cima ou para baixo.
Quando voc cria uma regio repetitiva, o Dreamweaver a delimita em outro continer, chamado de grupo de regies
repetitivas. Esse continer uma tag div com o atributo ice:repeatinggroup adicionado tag de abertura atua
como continer de todas as regies repetitivas editveis que um usurio pode adicionar ao grupo. Voc no pode
mover as regies repetitivas para fora de seus contineres de grupos de regies repetitivas. Alm disso, voc no deve
adicionar manualmente tags de grupos de regies repetitivas sua pgina. O Dreamweaver as adiciona
automaticamente quando necessrio.
Nota: Ao criar uma regio repetitiva a partir de uma linha da tabela (tag tr), o Dreamweaver aplica o atributo de grupo
de regies repetitivas tag-me (por exemplo, a tag table) e no insere uma tag div.
Se voc estiver trabalhando em uma pgina que contm um grupo de regies repetitivas e tentar adicionar uma regio
repetitiva imediatamente depois de um grupo existente, o Dreamweaver detectar que o grupo de regies repetitivas
precede a regio que voc est tentando adicionar e apresenta a opo de adicionar a nova regio ao grupo existente.
Voc pode optar por adicionar a nova regio repetitiva ao grupo existente ou criar um grupo de regies repetitivas
totalmente novo.
Nota: Se voc estiver adicionando uma regio repetitiva do InContext Editing a uma pgina baseada em um modelo do
Dreamweaver, essa nova regio repetitiva deve existir dentro de uma regio que j editvel.
Para criar uma regio repetitiva no Dreamweaver, siga estas etapas.
1 Siga um destes procedimentos:
Selecione uma tag que voc deseja transformar em uma regio repetitiva. A lista de tags possveis extensa: 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 e var.
Nota: Somente as tags div podem conter atributos de regio editvel e repetitiva simultaneamente.
Posicione o ponto de insero onde voc pretende inserir uma nova regio repetitiva na pgina.
Selecione exatamente uma regio repetitiva em um modelo do Dreamweaver (arquivo DWT).
Selecione outro contedo na pgina que voc deseje tornar repetvel (por exemplo, um cabealho e um bloco de
texto).
2 Escolha Inserir > InContext Editing > Criar regio repetitiva.
3 As opes variam dependendo de sua seleo.
Se voc tiver selecionado uma tag transformvel, o Dreamweaver a transformar em uma regio repetitiva sem
a necessidade de outras etapas.
Se estiver inserindo uma nova regio repetitiva em branco, siga um destes procedimentos:
Selecione Inserir nova regio repetitiva no ponto de insero atual e clique em OK.
Selecione Transformar a tag-me em uma regio repetitiva se quiser que o Dreamweaver transforme a tagme da seleo no elemento de continer da regio. Somente algumas tags HTML podem ser transformadas:
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 e var.
Nota: Esta segunda opo est disponvel somente quando o n pai atende aos critrios exatos para
transformao. Por exemplo, ele deve ser uma das tags transformveis listadas e no deve estar sujeito a
nenhum dos erros listados em Mensagens de erro do InContext Editing na pgina 490.
Se voc selecionou uma regio repetitiva de modelo do Dreamweaver, clique em OK na caixa de dilogo Criar
regio repetitiva. O Dreamweaver coloca a regio repetitiva de modelo entre as tags div que atuam como um
continer para a nova regio repetitiva do InContext Editing.
Se voc tiver selecionado outro contedo que deseje tornar repetvel, siga um destes procedimentos:
Selecione Delimitar a seleo atual com uma tag DIV e transform-la se quiser delimitar sua seleo com uma
tag div e transform-la em uma regio repetitiva. A tag div com a qual o Dreamweaver delimita o contedo
atua como continer da regio repetitiva.
Selecione Transformar a tag-me em uma regio repetitiva se quiser que o Dreamweaver transforme a tagme da seleo no elemento de continer da regio repetitiva. Somente algumas tags HTML podem ser
transformadas: 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 e var.
4 Na Visualizao de design, clique na aba azul da regio repetitiva para selecion-la, se ainda no estiver selecionada.
Observe que o Dreamweaver obriga voc a selecionar a aba do grupo de regies repetitivas. Isso ocorre porque todas
as regies repetitivas existem em um grupo de regies repetitivas, e voc precisa definir opes para essas regies
configurando as opes do grupo inteiro.
5 Selecione ou cancele a seleo de opes no Inspetor de propriedades do grupo de regies repetitivas. H duas
opes disponveis: Reordenar e Adicionar/remover. Quando voc seleciona Reordenar, os usurios podem mover
as regies repetitivas para cima ou para baixo durante a edio em um navegador. Quando voc seleciona
Adicionar/remover, os usurios podem adicionar ou remover regies repetitivas durante a edio em um
navegador. Ambas as opes so selecionadas por padro, e voc sempre deve selecionar pelo menos uma delas.
6 Salve a pgina.
Se for a primeira vez que voc adiciona funes do InContext Editing a uma pgina, o Dreamweaver informar
sobre o acrscimo dos arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifiquese de carregar esses arquivos no servidor quando carregar sua pgina. Caso contrrio, os recursos do InContext
Editing no funcionaro em um navegador.
A seleo atual no pode ser transformada nem ter quebra automtica com uma tag DIV,
pois o n-pai no permite DIV como tag-filha
Quando a seleo que deseja transformar em sua pgina no pode ser transformada diretamente, o Dreamweaver
precisa colocar a seleo entre as tags div que atuam como o continer para a nova regio editvel ou repetitiva. Por
essa razo, as tags-me daquilo que deseja transformar devem permitir as tags div como filhas. Se a tag-me da tag que
voc est tentando transformar no permitir tags div filhas, o Dreamweaver no permitir que voc realize a
transformao.
A seleo atual j contm ou est dentro de uma Regio editvel. Regies editveis
aninhadas no so permitidas.
Se a sua seleo estiver dentro de uma regio editvel ou se houver uma regio editvel dentro da seleo, o
Dreamweaver no permitir que voc realize a transformao. O InContext Editing no oferece suporte a regies
editveis aninhadas.
Regies editveis no devem conter Regies repetitivas nem Grupos de regies repetitivas.
As regies editveis do InContext Editing no podem conter nenhum outro recurso do InContext Editing. Se voc
tentar adicionar uma regio repetitiva ou um grupo de regies repetitivas a uma regio editvel, o Dreamweaver no
permitir que voc realize a transformao.
Regies repetitivas no devem conter Regies editveis nem Grupos de regies repetitivas.
As regies editveis do InContext Editing no podem conter nenhum outro recurso do InContext Editing. Se voc
tentar adicionar uma regio repetitiva ou um grupo de regies repetitivas a uma regio editvel, o Dreamweaver no
permitir que voc realize a transformao. Alm disso, o Dreamweaver no transformar um elemento em uma
regio editvel ou repetitiva se ele j contiver um grupo de regies repetitivas.
A seleo atual j contm ou est dentro de uma Regio repetitiva. Regies repetitivas
aninhadas no so permitidas.
Se a sua seleo estiver dentro de uma regio repetitiva ou se houver uma regio repetitiva dentro da seleo, o
Dreamweaver no permitir que voc realize a transformao. O InContext Editing no oferece suporte a regies
repetitivas aninhadas.
Somente tags DIV podem ter os recursos Regio editvel e Regio repetitiva aplicados ao
mesmo tempo.
Se a sua seleo no for uma tag div e j tiver um atributo de regio repetitiva aplicado a ela, o Dreamweaver no
permitir que voc aplique tambm o atributo de regio editvel tag. Somente as tags div podem ter atributos de
regio editvel e repetitiva aplicados simultaneamente.
O Dreamweaver detectou que a tag Grupo de regies repetitivas precede a Regio repetitiva
Todas as regies repetitivas do InContext Editing precisam existir dentro de um grupo de regies repetitivas. Quando
voc adiciona uma nova regio repetitiva a uma pgina, o Dreamweaver detecta se j existe um grupo de regies
repetitivas imediatamente anterior. Se existir, o Dreamweaver oferecer a voc a opo de adicionar a nova regio
repetitiva ao grupo de regies repetitivas j existente, ou ento criar um novo grupo de regies repetitivas para conter
a nova regio repetitiva.
Nesse exemplo, cada tag <book> pai contm trs tags filho: <pubdate>, <title> e <author>. No entanto, cada tag
<book> tambm uma tag filho da tag <mybooks>, que a tag no maior nvel do esquema. Voc pode nomear e
estruturar as tags XML de qualquer maneira, contanto que as tags sejam aninhadas corretamente em outras e que cada
tag de abertura seja atribuda a uma tag de fechamento correspondente.
Os documentos XML no contm nenhuma formatao: so apenas recipientes de informaes estruturadas. Depois
de criar um esquema XML, voc pode usar a linguagem de folha de estilos extensvel (XSL) para exibir as informaes.
Assim como as folhas de estilos em cascata (CSS) permitem formatar o HTML, o XSL permite formatar dados XML.
Voc pode definir estilos, elementos de pgina, layout e outros itens em um arquivo XSL e anex-lo a um arquivo XML
para que, quando um usurio visualize os dados XML em um navegador, os dados sejam formatados de acordo com
o que foi definido no arquivo XSL. O contedo (os dados XML) e a apresentao (definida pelo arquivo XSL) so
totalmente separados, fornecendo a voc maior controle sobre a exibio das informaes em uma pgina da Web. Em
sntese, XSL uma tecnologia de apresentao do XML, onde a sada principal uma pgina HTML.
As transformaes de linguagem de folha de estilos extensvel (XSLT) uma linguagem de subconjunto de XSL que,
na realidade, permite exibir dados XML em uma pgina da Web e "transform-los", junto com estilos XSL, em
informaes legveis e com estilo em forma de HTML. Voc pode usar o Dreamweaver para criar pginas XSLT que
permitem executar transformaes XSL usando um servidor de aplicativo em um navegador. Em uma transformao
XSL do servidor, o servidor transforma o XML e o XSL e os exibe na pgina. Em uma transformao do cliente, um
navegador (como o Internet Explorer) faz esse trabalho.
493
A abordagem adotada (transformaes do servidor ou do cliente) depende do que voc est tentando atingir como
resultado final, das tecnologias disponveis no seu caso, do nvel de acesso a arquivos de origem XML e de outros
fatores. As duas abordagens tm suas vantagens e desvantagens. Por exemplo, as transformaes do servidor
funcionam em todos os navegadores, enquanto as transformaes do cliente esto restritas somente a navegadores
modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). As transformaes do servidor permitem
exibir dados XML dinamicamente a partir do seu prprio servidor ou de qualquer outro lugar da Web, enquanto as
transformaes do cliente devem usar dados XML que esto hospedados localmente no seu prprio servidor da Web.
Finalmente, as transformaes do servidor exigem a implantao das pginas em um servidor de aplicativo
configurado, enquanto as transformaes do cliente precisam somente do acesso a um servidor da Web.
Para assistir a um tutorial e saber mais sobre XML, consulte www.adobe.com/go/vid0165_br.
SERVIDOR WEB
<HTML>
<p>data
</HTML>
Servidor de
aplicativos
<xsl:>
XML
</xsl:>
Navegador da web
<HTML>
<code>
</HTML>
1. Navegador solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo 3. Servidor de aplicativo
rastreia a pgina em busca de instrues e obtm fragmento do XSLT. 4. Servidor de aplicativo executa transformao (l o fragmento do XSLT,
obtm e formata os dados xml). 5. Servidor de aplicativo insere o fragmento transformado na pgina e a passa de volta para o servidor Web.
6. Servidor Web envia a pgina concluda para o navegador.
Use o comportamento Transformao XSL do servidor para inserir a referncia a um fragmento XSLT em uma pgina
dinmica. Quando a referncia inserida, o Dreamweaver gera uma pasta incluses/MM_XSLTransform/ na pasta
raiz do site que contm um arquivo de biblioteca de runtime. O servidor de aplicativo usa as funes definidas nesse
arquivo ao transformar os dados XML especificados. O arquivo responsvel por procurar os dados XML e os
fragmentos XSLT, executar a transformao XSL e exibir os resultados na pgina da Web.
O arquivo que contm o fragmento XSLT, o arquivo XML que contm seus dados e o arquivo de biblioteca gerado em
runtime devem estar no servidor da sua pgina para serem exibidos corretamente. (Se voc selecionar um arquivo
XML remoto como fonte de dados, de um feed RSS, por exemplo, esse arquivo obviamente deve residir em qualquer
outro lugar da Internet.)
Voc tambm pode usar o Dreamweaver para criar pginas XSLT inteiras para serem usadas com transformaes do
servidor. Uma pgina XSLT inteira funciona exatamente como um fragmento XSLT; somente ao inserir a referncia
pgina XSLT inteira usando o comportamento Transformao XSL do servidor voc est inserindo o contedo
completo de uma pgina HTML. Desse modo, todo o HTML da pgina dinmica (a pgina .cfm, .php ou .asp que age
como a pgina de recipiente) deve ser removido antes de inserir a referncia.
O Dreamweaver suporta transformaes XSL para pginas ColdFusion, ASP e PHP.
Nota: Seu servidor deve ser configurado corretamente para executar transformaes do servidor. Para obter mais
informaes, entre em contato com o administrador do servidor.
SERVIDOR WEB
1
<XML>
<directive>
XSLT
4
1. Navegador solicita arquivo XML. 2. Servidor responde enviando arquivo XML ao navegador. 3. Navegador l a diretiva XML e chama o
arquivo XSLT. 4. Servidor envia arquivo XSLT ao navegador. 5. Navegador transforma e exibe os dados XML no navegador.
Quando voc usa o Dreamweaver para vincular uma pgina XSLT a uma pgina XML, o Dreamweaver insere o cdigo
apropriado na parte superior da pgina XML. Se voc possuir a pgina XML que est sendo vinculada (isto , se o
arquivo XML residir exclusivamente no seu servidor da Web), basta usar o Dreamweaver para inserir o cdigo
apropriado que vincula as duas pginas. Quando voc possui o arquivo XML, as transformaes XSL executadas pelo
cliente so totalmente dinmicas. Desse modo, sempre que voc atualiza os dados no arquivo XML, qualquer sada
HTML que usa a pgina XSLT vinculada ser atualizada automaticamente com as novas informaes.
Nota: Os arquivos XML e XSL usados para as transformaes do cliente devem residir no mesmo diretrio. Caso
contrrio, o navegador ler o arquivo XML e encontrar a pgina XSLT da transformao, mas no encontrar os ativos
(folhas de estilos, imagens, etc.) definidos pelos links relativos na pgina XSLT.
Se voc no possuir a pgina XML que est sendo vinculada (por exemplo, se desejar usar os dados XML de um feed
RSS de algum outro lugar da Web), o fluxo de trabalho ser um pouco mais complicado. Para executar transformaes
do cliente usando dados XML de uma fonte externa, primeiro faa download do arquivo de origem XML no mesmo
diretrio onde reside a pgina XSLT. Quando a pgina XML estiver no seu site local, voc poder usar o Dreamweaver
para adicionar o cdigo apropriado que vincula a pgina XML pgina XSLT e postar as duas pginas (o arquivo XML
baixado e a pgina XSLT vinculada) no seu servidor da Web. Quando o usurio visualiza a pgina XML em um
navegador, a pgina XSLT formata o contedo, assim como no exemplo anterior.
A desvantagem de executar transformaes XSL do cliente nos dados XML provenientes de uma fonte externa o fato
de os dados XML serem apenas parcialmente dinmicos. O arquivo XML baixado e alterado simplesmente um
instantneo do arquivo que reside em algum outro lugar da Web. Se o arquivo XML original for alterado na Web,
voc deve fazer download do arquivo novamente, vincul-lo pgina XSLT e postar o arquivo XML novamente no seu
servidor da Web. O navegador processa somente os dados recebidos do arquivo XML no servidor da Web, no os
dados contidos no arquivo XML de origem.
O exemplo a seguir mostra como o objeto XSLT de regio repetitiva aplicado em uma linha da tabela que exibe
informaes sobre o cardpio de um restaurante. A linha inicial exibe trs elementos diferentes do esquema XML:
item, descrio e preo. Quando o objeto XSLT de regio repetitiva aplicado na linha da tabela e a pgina processada
por um servidor de aplicativo ou por um navegador, a tabela repetida com dados exclusivos inseridos em cada nova
linha da tabela.
Quando um objeto XSLT de regio repetitiva aplicado em um elemento na janela Documento, um fino contorno
cinza com abas exibido ao redor da regio repetida. Ao visualizar seu trabalho em um navegador (Arquivo >
Visualizar no navegador), o contorno cinza desaparece e a seleo expandida para exibir os elementos repetitivos
especificados no arquivo XML, assim como na ilustrao anterior.
Ao adicionar o objeto XSLT de regio repetitiva pgina, o comprimento do alocador de espao de dados XML
truncado na janela Documento. Isso acontece porque o Dreamweaver atualiza a expresso XPath (Linguagem de
caminho XML) do alocador de espao de dados XML de modo que haja relao com o caminho do elemento repetitivo.
Por exemplo, o cdigo a seguir referente a uma tabela que contm dois alocadores de espao dinmicos, sem um
objeto XSLT de regio repetitiva aplicado:
O cdigo a seguir referente mesma tabela com o objeto XSLT de regio repetitiva aplicado:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
No exemplo anterior, o Dreamweaver atualizou o XPath dos itens que esto na Regio repetitiva (ttulo e descrio)
para relacion-los com o XPath das tags <xsl:for-each> delimitadoras e no ao documento completo.
O Dreamweaver gera expresses XPath relativas ao contexto em outros casos tambm. Por exemplo, se voc arrastar
um alocador de espao de dados XML para uma tabela que j tem um objeto XSLT de regio repetitiva aplicado, o
Dreamweaver exibir automaticamente o XPath relativo ao XPath existente nas tags <xsl:for-each> delimitadoras.
Servidor de aplicativo
Dreamweaver
Navegador
Os tpicos a seguir fornecem diretrizes para ajudar voc a determinar os mtodos de visualizao adequados, de
acordo com suas necessidades.
Por exemplo, crie uma pgina que requer processamento e verifique se o servidor de aplicativo processa a pgina.
4. Crie um fragmento ou uma pgina XSLT ou converta uma pgina HTML em uma pgina XSLT.
Para inserir uma referncia ao fragmento XSLT em sua pgina dinmica, use o comportamento Transformao
XSL do servidor.
Para inserir uma referncia pgina XSLT inteira na pgina dinmica, exclua todo o cdigo HTML da pgina
dinmica e, em seguida, use o comportamento Transformao XSL do servidor.
9. Poste a pgina e o fragmento.
Poste a pgina dinmica e o fragmento XSLT (ou a pgina XSLT inteira) no seu servidor de aplicativo. Se estiver
usando um arquivo XML local, tambm dever post-lo.
10. Visualize a pgina dinmica em um navegador.
Ao fazer isso, o servidor de aplicativo transforma os dados XML, insere esses dados na pgina dinmica e os exibe no
navegador.
Tipo de pgina:
Selecione XSLT (pgina inteira) para criar uma pgina XSLT inteira.
Selecione Anexar arquivo local, clique no boto Procurar, navegue at um arquivo XML local no seu computador
e clique em OK.
Selecione Anexar arquivo remoto, insira o URL de um arquivo XML na Internet (como o endereo de um feed RSS,
por exemplo) e clique em OK.
Nota: Clique no boto Cancelar para gerar uma nova pgina XSLT sem nenhum fonte de dados XML anexada.
O painel Ligaes preenchido com o esquema da fonte de dados XML.
A tabela a seguir fornece uma explicao dos diversos elementos do esquema que podem aparecer:
Elemento
Representa
Detalhes
<>
<>+
<>+
N do elemento em negrito
Atributo XML
4 Salve sua nova pgina (Arquivo > Salvar) com a extenso .xsl ou .xslt (.xsl o padro).
Uma cpia da pgina aberta na janela Documento. A nova pgina uma folha de estilos XSL, salva com a extenso .xsl.
Nota: Voc tambm pode clicar no link Origem, no canto superior direito do painel Ligaes, para adicionar uma fonte
de dados XML.
2 Siga um destes procedimentos:
Selecione Anexar arquivo local, clique no boto Procurar, navegue at um arquivo XML local no seu computador
e clique em OK.
Selecione Anexar arquivo remoto e insira o URL de um arquivo XML na Internet (como o endereo de um RSS
feed, por exemplo).
3 Clique em OK para fechar a caixa de dilogo Localizar origem XML.
Nota: Na maioria dos casos, use o objeto XSLT de regio repetitiva para exibir elementos XML repetitivos em uma
pgina. Nesse caso, crie uma tabela com uma nica linha e uma ou mais colunas ou uma tabela de duas linhas se desejar
incluir um cabealho.
3 No painel Ligaes, selecione um elemento XML e arraste-o at o local da pgina onde deseja inserir os dados.
Um alocador de espao de dados XML exibido na pgina. O alocador de espao realado e fica entre chaves. usada
a sintaxe XPath (Linguagem de caminho XML) para descrever a estrutura hierrquica do esquema XML. Por exemplo,
se voc arrastar o elemento filho title at a pgina e esse elemento tiver os elementos pai rss, channel e item, a sintaxe
do alocador de espao de contedo dinmico ser {rss/channel/item/title}.
Clique duas vezes no alocador de espao de dados XML na pgina para abrir o Construtor de expresses XPath. O
Construtor de expresses XPath permite formatar os dados selecionados ou selecione outros itens no esquema XML.
4 (Opcional) Aplique estilos aos dados XML selecionando um alocador de espao de dados XML e aplicando estilos
a ele como faria em qualquer outra parte do contedo usando o Inspetor de propriedades ou o painel Estilos CSS.
Se preferir, voc pode usar as Folhas de estilo em tempo de design para aplicar estilos aos fragmentos XSLT. Cada
um desses mtodos tem vantagens e desvantagens.
5 Visualize seu trabalho em um navegador (Arquivo > Visualizar no navegador).
Nota: Quando voc visualiza seu trabalho usando a opo Visualizar no navegador, o Dreamweaver executa uma
transformao XSL interno sem usar um servidor de aplicativo.
Qualquer regio da Visualizao de design que contm um alocador de espao de dados XML pode ser transformada
em uma regio repetitiva. No entanto, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de linhas de
tabelas.
1 Na Visualizao de design, selecione uma regio que contm alocadores de espao de dados XML.
A seleo pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um pargrafo do texto.
Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto inferior esquerdo da
janela Documento. Por exemplo, se a regio for uma tabela, clique dentro da tabela na pgina e, em seguida, clique
na tag no seletor de tags.
2 Siga um destes procedimentos
4 Clique em OK.
Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetida. Ao visualizar seu
trabalho em um navegador (Arquivo > Visualizar no navegador), o contorno cinza desaparece e a seleo expandida
para exibir os elementos repetitivos especificados no arquivo XML.
Ao adicionar o objeto XSLT de regio repetitiva pgina, o alocador de espao de dados XML truncado na janela
Documento. Isso acontece porque o Dreamweaver trunca o XPath para o alocador de espao de dados XML de modo
que haja relao com o caminho do elemento repetitivo.
exibida.
Selecionar.
3 No Construtor de expresses XPath, faa as alteraes e clique em OK.
Nota: Ao inserir fragmentos XSLT, voc sempre deve clicar no boto Mostrar visualizaes de cdigo e de design depois
de colocar o ponto de insero na pgina para garantir que o ponto seja colocado no local correto. Caso o local no seja
correto, clique em algum outro lugar da Visualizao de cdigo para colocar o ponto de insero onde deseja.
3 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e
4 Na caixa de dilogo Transformao XSL, clique no boto Procurar e navegue at um fragmento XSLT ou uma
pode clicar duas vezes no fragmento para abrir o arquivo de origem do fragmento e edit-lo.
Uma pasta incluses/MM_XSLTransform/, que contm um arquivo de biblioteca de runtime, tambm criada na
pasta raiz do site. O servidor de aplicativo usa as funes definidas nesse arquivo para executar a transformao.
7 Carregue a pgina dinmica no seu servidor (Site > Colocar) e clique em Sim para incluir os arquivos dependentes.
O arquivo que contm o fragmento XSLT, o arquivo XML que contm seus dados e o arquivo de biblioteca gerado
em runtime devem estar no servidor da sua pgina para serem exibidos corretamente. (Se voc selecionar um
arquivo XML remoto como fonte de dados, esse arquivo deve residir em qualquer outro lugar da Internet.)
Nota: Nesta verso, voc sempre deve remover os comportamentos de servidor. A excluso manual do cdigo gerado
remove apenas parcialmente o comportamento de servidor, mesmo que o comportamento desaparea do painel
Comportamentos de servidor.
Primeiro, anexe uma folha de estilo externa pgina dinmica. Esta a melhor maneira de aplicar estilos no
contedo de qualquer pgina da Web.
Em seguida, anexe a mesma folha de estilo externa ao fragmento XSLT como uma folha de estilo em tempo de
design. Como o nome indica, as folhas de estilo em tempo de design funcionam somente na Visualizao de design
do Dreamweaver.
Depois de realizar as duas etapas anteriores, voc pode criar novos estilos no seu fragmento XSLT usando a mesma
folha de estilo anexada sua pgina dinmica. A sada HTML ser mais limpa (porque a referncia folha de estilo
vlida somente no Dreamweaver) e o fragmento ainda exibir os estilos apropriados na Visualizao de design.
Alm disso, todos os estilos sero aplicados tanto no fragmento quanto na pgina dinmica quando a pgina
dinmica for visualizada no modo Design ou em um navegador.
Nota: Se voc visualizar o fragmento XSLT em um navegador, os estilos no sero exibidos pelo navegador. Em vez
disso, voc deve visualizar a pgina dinmica no navegador para ver o fragmento XSLT no contexto da pgina
dinmica.
Para obter mais informaes sobre como usar CSS para formatar fragmentos XSLT, consulte
www.adobe.com/go/dw_xsl_styles_br.
XSL do servidor no painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um
novo comportamento Transformao XSL do servidor.
2 Na caixa de dilogo Transformao XSL, clique no boto de adio (+) ao lado de Parmetros XSLT.
3 Na caixa de dilogo Adicionar parmetro, insira um nome para o parmetro na caixa Nome. O nome pode conter
Se desejar usar um valor dinmico, clique no cone de dinmico ao lado da caixa Valor, preencha a caixa de dilogo
Dados dinmicos e clique em OK. Para obter mais informaes, clique no boto Ajuda na caixa de dilogo Dados
dinmicos.
5 Na caixa Valor padro, insira o valor a ser usado pelo parmetro se a pgina no receber nenhum valor de runtime
e clique em OK.
XSL do servidor no painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um
novo comportamento Transformao XSL do servidor.
2 Selecione um parmetro na lista de parmetro XSLT.
3 Clique no boto Editar.
4 Faa as alteraes e clique em OK.
XSL do servidor no painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um
novo comportamento Transformao XSL do servidor.
2 Selecione um parmetro na lista de parmetro XSLT.
3 Clique no boto de subtrao (-).
do painel Inserir.
2 Na caixa de dilogo Regio condicional, insira a expresso condicional a ser usada na regio.
No exemplo a seguir, teste a expresso para observar se o valor do atributo @available do n do contexto true.
3 Clique em OK.
Nota: Os valores de seqncia de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas
(') para que sejam inseridas como XHTML vlido.
Alm de testar os ns com relao aos valores, voc pode usar qualquer funo XSLT suportada em qualquer instruo
condicional. A condio testada no n atual do arquivo XML. No exemplo a seguir, teste a expresso no ltimo n
do conjunto de resultados:
Para obter mais informaes e exemplos sobre expresses condicionais de gravao, consulte a seo <xsl:if> no
painel Referncia (Ajuda > Referncia).
No exemplo a seguir, teste a expresso para observar se o subelemento price do n do contexto inferior a 5.
3 Clique em OK.
4 Para inserir outra condio, coloque o ponto de insero na Visualizao de cdigo entre os pares de tag
<xsl:when> ou antes da tag <xsl:otherwise> e insira uma regio condicional (Inserir > Objetos XSLT > Regio
condicional).
Depois de especificar a condio e clicar em OK, outra tag <xsl:when> ser inserida no bloco <xsl:choose>.
Para obter mais informaes e exemplos sobre expresses condicionais de gravao, consulte as sees <xsl:choose>
no painel Referncia (Ajuda > Referncia).
Na Visualizao de design, selecione Inserir > Objetos XSLT > Comentrio XSL, digite o contedo do comentrio
(ou deixe a caixa em branco) e clique em OK.
Na Visualizao de cdigo, selecione Inserir > Objetos XSLT > Comentrio XSL.
Voc tambm pode clicar no cone Comentrio XSL, na categoria XSLT do painel Inserir.
<xsl:comment></xsl:comment>.
A formatao de uma seleo til quando o valor do n retorna um nmero. O Dreamweaver fornece uma lista
predefinida de funes de formatao. Para obter uma lista completa das funes de formatao disponveis e
exemplos, consulte o painel Referncia.
No exemplo a seguir, formate o subelemento price como uma moeda com duas casas decimais:
4 Clique em OK.
5 Para exibir o valor de cada n no arquivo XML, aplique uma regio repetitiva no elemento que contm o texto
esquema XML.
A expresso XPath correta gravada na caixa Expresso para identificar o n.
Nota: Os itens repetitivos so identificados com um sinal de adio (+) na rvore de esquema XML.
No exemplo a seguir, repita cada n item do arquivo XML.
Em alguns casos, voc talvez queira trabalhar com um subconjunto dos ns repetitivos (por exemplo, somente com
itens onde um atributo tem um valor especfico). Nesse caso, necessrio criar um filtro.
selecionar um atributo ou subelemento no menu pop-up ou inserir sua prpria expresso XPath nesse campo para
identificar filhos que existem em nveis mais profundos da rvore de esquema.
Operador Especifique o operador de comparao a ser usado na expresso de filtro.
Valor Especifique o valor que deve ser verificado no n Filtrar por. Insira o valor. Se parmetros dinmicos forem
Conforme voc insere valores ou seleciona opes nos menus pop-up, a expresso XPath na caixa Expresso alterada.
No exemplo a seguir, limite o conjunto de resultados aos ns item onde o valor do atributo @available true.
Nota: Os valores de seqncia de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas
(') para que sejam inseridas como XHTML vlido.
Voc pode criar filtros mais complexos que permitem especificar ns pai como parte dos critrios de filtragem. No
exemplo a seguir, limite o conjunto de resultados aos ns item onde o atributo @id de store igual a 1 e o n price
de item superior a 5.
Para obter mais informaes e exemplos sobre regies repetitivas, consulte a seo <xsl:for-each> no painel
Referncia.
3. Anexe uma fonte de dados XML pgina (se ainda no tiver feito isso).
Ao fazer isso, o navegador transforma os dados XML, formata esses dados com a pgina XSLT e exibe a pgina com
estilo no navegador.
em OK.
4 Clique em OK para fechar a caixa de dilogo e inserir a referncia pgina XSLT na parte superior do documento XML.
Cdigo da entidade
<
& (E comercial)
&
>
" (aspas)
"
(apstrofe)
'
Se voc usar outras entidades de caractere em um arquivo XSL, precisar defini-las na seo DTD do arquivo XSL. O
Dreamweaver fornece vrias definies de entidade padro que podem ser observadas na parte superior de um arquivo
XSL criado no Dreamweaver. Essas entidades padro abrangem uma ampla seleo dos caracteres usados com mais
freqncia.
Ao visualizar o arquivo XSL em um navegador, o Dreamweaver verifica o arquivo XSL para observar se h entidades
no definidas e notifica caso alguma for encontrada.
Se voc visualizar um arquivo XML anexado a um arquivo XSLT ou visualizar uma pgina do servidor com uma
transformao XSLT, o servidor ou o navegador (em vez do Dreamweaver) enviar uma notificao sobre uma
entidade no definida. O exemplo a seguir mostra uma mensagem que pode ser exibida no Internet Explorer quando
voc solicita um arquivo XML transformado por um arquivo XSL com uma definio de entidade ausente:
Reference to undefined entity 'auml'. Error processing resource
'http://localhost/testthis/list.xsl'. Line 28, Position 20
<p class=''test''>ä</p>
-------------------^
www.w3.org/TR/REC-html40/sgml/entities.html.
Essa pgina da Web contm as 252 entidades permitidas no HTML 4 e no XHTML 1.0.
Por exemplo, se a entidade de caractere Egrave estiver ausente, procure Egrave no site da W3C. A seguinte entrada
estar disponvel:
<!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
4 Salve o arquivo.
Se voc usar vrias vezes as mesmas entidades de caractere, poder adicionar permanentemente suas definies aos
arquivos XSL criados pelo Dreamweaver por padro quando o comando Arquivo > Novo usado.
Adicionar definies de entidade aos arquivos XSL criados pelo Dreamweaver por padro
1 Localize o seguinte arquivo de configurao na pasta do aplicativo Dreamweaver e abra-o em qualquer editor de
texto:
Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml
2 Localize a declarao mm_xslt_1:
<documenttypedeclaration id="mm_xslt_1">
Permitem aos visitantes localizar informaes de maneira rpida e fcil em um site rico em contedo.
Esse tipo de aplicativo da Web oferece aos visitantes a possibilidade de pesquisar, organizar e navegar em
contedo na medida em que acharem cabvel. Entre os exemplos esto intranets de empresas, o Microsoft MSDN
(www.msdn.microsoft.com) e a Amazon.com (www.amazon.com).
521
Permite aos funcionrios inserir a quilometragem em uma pgina da Web usando um formulrio em HTML
simples
<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>
Todas as linhas do cdigo em HTML da pgina so escritas pelo designer antes da pgina ser colocada no servidor.
Como o HTML, uma vez no servidor, no alterado, esse tipo de pgina chamado de pgina esttica.
Nota: Mais especificamente, uma pgina esttica pode no ser to esttica assim. Por exemplo, uma imagem de
sobreposio ou um contedo Flash (um arquivo SWF) pode dar vida a uma pgina esttica. No entanto, essa
documentao se refere a uma pgina como sendo esttica caso ela seja enviada para o navegador sem modificaes.
Quando recebe uma solicitao de uma pgina esttica, o servidor Web l a solicitao, localiza a pgina e a envia para
o navegador solicitante, como mostra o seguinte exemplo:
3
SERVIDOR WEB
Resposta
<HTML>
<p>H1
</HTML>
Navegador da web
2
Solicitao
1
1. Navegador da Web solicita a pgina esttica. 2. Servidor Web localiza a pgina. 3. Servidor Web envia a pgina para o navegador
solicitante.
No caso dos aplicativos da Web, certas linhas de cdigo no so determinadas quando o visitante solicita a pgina. Para
que a pgina seja enviada ao navegador, essas linhas devem ser determinadas por um mecanismo. O mecanismo
abordado na seguinte seo.
SERVIDOR WEB
5
Resposta
4
<HTML>
<p>H1
</HTML>
Servidor de
aplicativos
Navegador da Web
Solicitao
<HTML>
<code>
</HTML>
1. Navegador da Web solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo. 3. Servidor de
aplicativo rastreia a pgina em busca de instrues e conclui a pgina. 4. Servidor de aplicativo passa novamente a pgina concluda para o
servidor Web. 5. Servidor Web envia a pgina concluda para o navegador solicitante
A instruo cria um conjunto de registros com trs colunas e o preenche com linhas que contm sobrenome, nome e
pontos em condicionamento fsico de todos os funcionrios no banco de dados. Para obter mais informaes, consulte
www.adobe.com/go/learn_dw_sqlprimer_br.
O seguinte exemplo mostra o processo de consulta a um banco de dados e o retorno dos dados ao navegador:
SERVIDOR WEB
9
Resposta
7
6
<HTML>
<p>dados
</HTML>
Conjunto de
registros
Servidor de
aplicativos
Driver de
banco de
dados
Banco de
dados
Navegador da Web
Solicitao
<HTML>
<code>
</HTML>
Consulta
4
2
1. Navegador da Web solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo. 3. Servidor de
aplicativo rastreia a pgina em busca de instrues. 4. Servidor de aplicativo envia consulta ao driver de banco de dados. 5. Driver executa a
consulta no banco de dados. 6. Conjunto de registros devolvido ao driver. 7. Driver passa o conjunto de registros para o servidor de aplicativo
8. Servidor de aplicativo insere dados na pgina e, em seguida, passa a pgina para o servidor Web 9. Servidor Web envia a pgina concluda
para o navegador solicitante.
Voc pode usar praticamente qualquer banco de dados com o aplicativo da Web, desde que o driver de banco de dados
apropriado esteja instalado no servidor.
Caso pretenda criar pequenos aplicativos de baixo custo, voc pode usar um banco de dados baseado em arquivo
como, por exemplo, um criado no Microsoft Access. Caso pretenda criar aplicativos robustos, fundamentais
empresa, voc pode usar um banco de dados baseado em servidor como, por exemplo, um criado no Microsoft SQL
Server, no Oracle 9i ou no MySQL.
Caso o banco de dados esteja localizado em um sistema que no seja o servidor Web, verifique se h uma conexo
rpida entre os dois sistemas para que o aplicativo da Web possa operar com rapidez e eficincia.
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>
O servidor Web envia a pgina para o navegador solicitante, que a exibe da seguinte forma:
Sobre a Trio Motors
A Trio Motors uma grande montadora de automveis.
No deixe de visitar a nossa pgina de vendas.
Voc escolhe uma linguagem de script ou baseada em tag a ser usada de acordo com a tecnologia disponvel no
servidor. Estas so as linguagens mais conhecidas para as tecnologias de servidor que recebem suporte
doDreamweaver:
Tecnologia de servidor
Linguagem
ColdFusion
VBScript
JavaScript
PHP
PHP
O Dreamweaver pode criar os scripts ou as tags do servidor necessrias ao funcionamento das pginas, ou voc pode
escrev-los manualmente no ambiente de codificao do Dreamweaver.
Nmero Sobrenome
Nome
Posio
Objetivo
Registros
(linhas)
Um driver de banco de dados Software que funciona como intrprete entre um aplicativo da Web e um banco de
dados. Os dados em um banco de dados so armazenados em um formato prprio. Um driver de banco de dados
permite ao aplicativo da Web ler e manipular dados que outrora seriam indecifrveis.
Um sistema de gerenciamento do banco de dados (DBMS ou sistema de banco de dados) Software usado para criar
e manipular bancos de dados. Entre os sistemas de banco de dados mais comuns esto Microsoft Access, Oracle 9i
e MySQL.
Uma consulta ao banco de dados A operao que extrai um conjunto de registros de um banco de dados. Uma
consulta consiste em critrios de pesquisa expressados em uma linguagem de banco de dados chamada SQL. Por
exemplo, a consulta pode especificar que apenas determinadas colunas ou certos registros sejam includos no
conjunto.
Uma pgina dinmica Uma pgina da Web personalizada por um servidor de aplicativo para que a pgina seja enviada
a um navegador.
Um conjunto de registros Um conjunto de dados extrados de uma ou mais tabelas em um banco de dados, como
mostrado no seguinte exemplo:
Um banco de dados relacional Um banco de dados que contm mais de uma tabela, com as tabelas compartilhando os
dados. O seguinte banco de dados relacional porque duas tabelas compartilham a mesma coluna DepartmentID.
Uma tecnologia de servidor A tecnologia que o servidor de aplicativo usa para modificar pginas dinmicas durante
o runtime.
O ambiente de desenvolvimento do Dreamweaver d suporte s seguintes tecnologias de servidor:
Adobe ColdFusion
Microsoft ASP (Pginas ativas do servidor)
PHP: PHP (Pr-processador de hipertexto)
Voc tambm pode usar o ambiente de codificao do Dreamweaver a fim de desenvolver pginas para qualquer
outra tecnologia de servidor no listada.
Uma pgina esttica Uma pgina da Web no modificada por um servidor de aplicativo para que a pgina seja enviada
a um navegador. Para obter mais informaes, consulte Processamento de pginas da Web estticas na pgina 522.
Um aplicativo da Web Um site que contm pginas de contedo parcial ou inteiramente no determinado. O
contedo final dessas pginas s determinado quando um visitante solicita uma pgina do servidor Web. Como o
contedo final da pgina varia de solicitao para solicitao com base nas aes do visitante, esse tipo chamado de
pgina dinmica.
Um servidor Web Software que envia pginas da Web em resposta a solicitaes de navegadores da Web. Uma
solicitao de pgina gerada quando um visitante clica em um link em uma pgina da Web no navegador, seleciona
um marcador no navegador ou digita um URL na caixa de texto de endereo do navegador.
Servidores Web populares incluem o Microsoft Internet Information Server (IIS) e o Apache HTTP Server.
Um servidor Web
Um servidor de aplicativo que funcione com o servidor Web
Nota: No contexto dos aplicativos da Web, os termos servidor Web e servidor de aplicativo se referem a software, e
no a hardware.
Caso queira usar um banco de dados com o aplicativo, voc precisa do seguinte software adicional:
Por exemplo, caso o nome do servidor seja mer_noire e uma pgina da Web chamada soleil.html seja armazenada em
C:\Inetpub\wwwroot\, voc pode abrir a pgina digitando o seguinte URL em um navegador em execuo no
computador local:
http://mer_noire/soleil.html
Nota: No se esquea de usar barras, e no barras invertidas, nos URLs.
Voc tambm pode abrir qualquer pgina da Web armazenada em qualquer subpasta da pasta raiz especificando a
subpasta no URL. Por exemplo, suponhamos que o arquivo soleil.html esteja armazenado em uma subpasta chamada
gamelan da seguinte forma:
C:\Inetpub\wwwroot\gamelan\soleil.html
Voc pode abrir essa pgina digitando o seguinte URL em um navegador em execuo no computador:
http://mer_noire/gamelan/soleil.html
Quando o servidor Web est em execuo no computador, voc pode substituir o nome do servidor por localhost.
Por exemplo, os seguintes URLs abrem a mesma pgina em um navegador:
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Nota: Outra expresso que voc pode usar em lugar do nome do servidor ou de localhost 127.0.0.1 (por exemplo,
http://127.0.0.1/gamelan/soleil.html).
administrao so altos. Outros fornecedores oferecem solues mais simples e mais econmicas (um exemplo o
ColdFusion). Alguns servidores de aplicativo so incorporados a servidores Web (como o Microsoft IIS), enquanto
outros podem ser baixados gratuitamente na Internet (como o PHP).
Tecnologia de servidor Servidores de aplicativo usam tecnologias diferentes. O Dreamweaver d suporte a trs
tecnologias de servidor: ColdFusion, ASP e PHP. A tabela a seguir mostra servidores de aplicativo comuns disponveis
para as tecnologias de servidor que recebem suporte do Dreamweaver:
Tecnologia de servidor
Servidor de aplicativo
ColdFusion
Adobe ColdFusion 8
ASP
Microsoft IIS
PHP
Servidor PHP
Para obter mais informaes sobre o ColdFusion, selecione Ajuda do ColdFusion no menu Ajuda.
Para obter mais informaes sobre o ASP, visite o site da Microsoft em
http://msdn.microsoft.com/library/default.asp?url=/library/pt_br/dnanchor/html/activeservpages.asp.
Para obter mais informaes sobre o PHP, visite o site do PHP em www.php.net/.
Nota: A Developer Edition se destina ao uso no comercial para o desenvolvimento e o teste dos aplicativos da Web. Ela
no est licenciada para desenvolvimento. Ela d suporte a solicitaes do host local e a dois endereos IP remotos. Voc
pode us-la para desenvolver e testar os aplicativos da Web sempre que desejar; o software no expira. Para obter mais
informaes, consulte a ajuda do ColdFusion (Ajuda > Ajuda do ColdFusion).
Durante a instalao, voc pode configurar o ColdFusion para usar o servidor Web incorporado ao ColdFusion ou
outro servidor Web instalado no sistema. Normalmente, melhor que o ambiente de desenvolvimento corresponda
ao ambiente de produo. Por isso, caso haja um servidor Web existente como, por exemplo, o Microsoft IIS no
computador de desenvolvimento, voc talvez queira us-lo em lugar do servidor Web do ColdFusion incorporado.
ColdFusion 8
\ColdFusion8\wwwroot
IIS
\Inetpub\wwwroot
Apache (Windows)
\apache\htdocs
Apache (Macintosh)
Users:MyUserName:Sites
Para testar o servidor Web, coloque uma pgina em HTML de teste na pasta raiz padro e tente abri-la digitando o
URL da pgina em um navegador. O URL formado pelo nome de domnio e pelo nome de arquivo da pgina em
HTML da seguinte forma: www.exemplo.com/pgina_de_teste.htm.
Caso o servidor Web esteja em execuo no computador local, voc pode usar localhost em lugar de um nome de
domnio. Digite um das seguintes URLs localhost de acordo com o servidor Web:
Servidor Web
URL localhost
ColdFusion 8
http://localhost:8500/testpage.htm
IIS
http://localhost/testpage.htm
Apache (Windows)
http://localhost:80/testpage.htm
Apache (Macintosh)
Nota: Por padro, o servidor Web ColdFusion executado na porta 8500 e o servidor Apache para Windows, na porta 80.
Caso a pgina no seja aberta como esperado, procure os seguintes erros:
O servidor Web no foi iniciado. Consulte a documentao do servidor Web para obter as instrues iniciais.
O arquivo no tem uma extenso .htm ou .html.
Voc digitou o caminho de arquivo da pgina (por exemplo, c:\ColdFusion8\wwwroot\testpage.htm) e no o URL
(por exemplo, http://localhost:8500/testpage.htm) na caixa de texto de endereo do navegador.
O URL digitado est incorreto. Verifique se h erros e se o nome de arquivo no seguido por uma barra como,
por exemplo, http://localhost:8080/testpage.htm/.
Aps a criao de uma pasta raiz para o aplicativo, defina um site do Dreamweaver para gerenciar os arquivos.
Voc tem acesso a um servidor Web. O servidor Web pode estar em execuo no computador local, em um
computador remoto como, por exemplo, um servidor de desenvolvimento ou um servidor mantido pela empresa
de hospedagem na Web.
teste do site.
2 Abra uma pgina do ColdFusion no Dreamweaver.
3 Para criar uma nova fonte de dados, clique no boto de adio (+) do painel Bancos de dados (Janelas > Bancos de
faa as alteraes.
Voc pode editar qualquer parmetro, exceto o nome da fonte de dados. Para obter mais informaes, consulte a
documentao do fornecedor do driver ou o administrador do sistema.
Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 6.1 ou 6.0 esteja
em execuo
1 Abra uma pgina do ColdFusion no Dreamweaver.
2 No painel Bancos de dados (Janela > Bancos de dados) do Dreamweaver, clique em Modificar fontes de dados na
Para obter instrues, consulte a ajuda do ColdFusion (Ajuda > Ajuda do ColdFusion).
Voc deve fornecer determinados valores de parmetro para criar a fonte de dados do ColdFusion. Em relao aos
valores de parmetro especficos do driver de banco de dados, consulte a documentao do fornecedor do driver ou o
administrador do sistema.
Depois de criar uma fonte de dados do ColdFusion, voc pode us-la no Dreamweaver.
Microsoft Access
Oracle
Voc pode usar o DSN (nome de uma fonte de dados) ou a seqncia de caracteres de conexo para se conectar ao
banco de dados. Voc deve usar uma seqncia de caracteres de conexo caso esteja se conectando por meio de um
provedor OLE DB ou um driver ODBC no esteja instalado em um sistema Windows.
Um DSN um identificador com apenas uma palavra como, por exemplo, myConnection, que aponta para o banco
de dados e contm todas as informaes necessrias para se conectar a ele. Voc define um DSN no Windows. Voc
pode usar um DSN caso esteja se conectando por meio de um driver ODBC instalado em um sistema Windows.
Uma seqncia de conexo uma expresso codificada manualmente que identifica o banco de dados e lista as
informaes necessrias para se conectar a ele, como mostrado no seguinte exemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Nota: Voc tambm pode usar uma seqncia de conexo caso esteja se conectando por meio de um driver ODBC
instalado em um sistema Windows, embora o uso de um DSN seja mais fcil.
H provedores OLE DB diferentes para bancos de dados diferentes. Voc pode obter provedores OLE DB para o
Microsoft Access e o SQL Server baixando e instalando os pacotes do Microsoft Data Access Components (MDAC)
2.5 e 2.7 no computador com o Windows e o IIS em execuo. Voc pode baixar os pacotes MDAC gratuitamente no
site da Microsoft em http://msdn.microsoft.com/data/mdac/downloads/.
Nota: Verifique se voc instalou o MDAC 2.5 antes da instalao do MDAC 2.7.
Voc pode baixar provedores OLE DB para bancos de dados Oracle no site da Oracle em
www.oracle.com/technology/software/tech/windows/ole_db/index.html (o registro obrigatrio).
No Dreamweaver, voc cria uma conexo OLE DB incluindo um parmetro Provider em uma seqncia de
caracteres de conexo. Por exemplo, eis os parmetros de provedores OLE DB comuns para bancos de dados Access,
SQL Server e Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Para o valor do parmetro do provedor OLE DB, consulte a documentao do fornecedor do provedor ou o
administrador do sistema.
Para o valor do parmetro do provedor OLE DB, consulte a documentao do fornecedor do provedor ou o
administrador do sistema.
Caso no inclua um parmetro Provedor, usado o provedor OLE DB padro para ODBC, e voc deve especificar um
driver ODBC apropriado ao banco de dados.
Driver Especifica o driver ODBC a ser usado caso voc no especifique um provedor OLE DB para o banco de dados.
Servidor Especifica o servidor que hospeda o banco de dados SQL Server caso o aplicativo da Web seja executado em
um servidor diferente.
Banco de dados O nome de um banco de dados SQL Server.
DBQ O caminho para um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. O
caminho est no servidor que hospeda o arquivo do banco de dados.
UID Especifica o nome do usurio.
PWD Especifica a senha do usurio.
DSN O nome da fonte de dados, caso voc uma. Dependendo de como define o DSN no servidor, voc pode omitir os
demais parmetros da seqncia de caracteres de conexo. Por exemplo, DSN=Results pode ser uma seqncia de
caracteres de conexo vlida caso voc defina os demais parmetros ao criar o DSN.
As seqncias de caracteres de conexo para outros tipos de bancos de dados talvez no usem os parmetros listados
acima ou tero nomes ou usos diferentes quanto aos parmetros. Para obter mais informaes, consulte a
documentao do fornecedor do banco de dados ou o administrador do sistema.
Eis um exemplo de uma seqncia de caracteres de conexo que criar uma conexo ODBC com um banco de dados
do Access chamado trees.mdb:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Eis um exemplo de uma conexo que criar uma conexo OLE DB com um banco de dados do SQL Server chamado
Mothra localizado em um servidor chamado Gojira:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8
Caso o computador esteja executando o Windows 2000, consulte o artigo da Base de Dados de Conhecimento da
Microsoft 300596 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;300596
Caso o computador esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento da
Microsoft 305599 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;305599
2 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).
3 Clique no boto de adio (+) no painel e selecione Nome da fonte de dados (DSN) no menu.
4 Digite um nome para a nova conexo sem espaos ou caracteres especiais.
5 Selecione a opo Usando o DSN local e escolha o DSN que voc deseja usar no menu Nome da fonte de dados
(DSN).
Caso voc queira usar um DSN local, mas ainda no tenha definido um, clique em Definir para abrir o Administrador
de fonte de dados ODBC do Windows.
6 Complete as caixas Nome do usurio e Senha.
7 Voc pode restringir o nmero de itens de banco de dados que o Dreamweaver recupera durante o design clicando
clique duas vezes na seqncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o
Dreamweaver usa para processar pginas dinmicas.
Caso o computador remoto esteja executando o Windows 2000, consulte o artigo da Base de Dados de
Conhecimento da Microsoft 300596 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;300596
Caso o computador remoto esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento
da Microsoft 305599 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;305599
2 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).
3 Clique no boto de adio (+) no painel e selecione Nome da fonte de dados (DSN) no menu.
4 Digite um nome para a nova conexo sem espaos ou caracteres especiais.
5 Selecione Usando DSN no servidor de teste.
Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam DSNs no
servidor de aplicativo.
6 Digite o DSN ou clique no boto DSN para conect-lo ao servidor e selecione o DSN para o banco de dados que
clique duas vezes na seqncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o
Dreamweaver usa para processar pginas dinmicas.
DB na seqncia de conexo ou seja, se voc no incluir um parmetro Provider o ASP usar automaticamente
o provedor OLE DB dos drivers ODBC. Nesse caso, voc deve especificar um driver ODBC apropriado ao banco
de dados.
Caso o site seja hospedado por um ISP e voc no saiba o caminho completo do banco de dados, use o mtodo MapPath
do objeto de servidor do ASP na seqncia de conexo.
5 Caso o driver de banco de dados especificado na seqncia de caracteres de conexo no esteja instalado no mesmo
clique duas vezes na seqncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o
Dreamweaver usa para processar pginas dinmicas.
Voc pode obter o caminho fsico de um arquivo de banco de dados usando o mtodo MapPath do objeto de servidor
do ASP.
Nota: As tcnicas abordadas nesta seo s se aplicam caso o banco de dados seja baseado em arquivo como, por
exemplo, um banco de dados Microsoft Access no qual os dados so armazenados em um arquivo .mdb.
Caso o caminho virtual de um arquivo seja /jsmith/index.htm, a seguinte expresso retorna o caminho fsico:
Server.MapPath("/jsmith/index.htm")
Eis um exemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Para exibir a pgina, alterne para Visualizao dinmica (Exibir > Visualizao dinmica).
Para obter mais informaes sobre o mtodo MapPath, consulte a documentao on-line que acompanha o Microsoft IIS.
Caso no saiba o caminho fsico dos arquivos no servidor remoto, voc pode obt-lo usando o mtodo MapPath na
seqncia de caracteres de conexo.
1 Carregue o arquivo de banco de dados no servidor remoto e anote o caminho virtual por exemplo,
/jsmith/data/statistics.mdb.
2 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).
3 Clique no boto de adio (+) no painel e selecione Personalizar seqncia de caracteres de conexo no menu.
4 Digite um nome para a nova conexo sem espaos ou caracteres especiais.
5 Digite a seqncia de caracteres de conexo e use o mtodo MapPath para fornecer o parmetro DBQ.
Suponhamos que o caminho virtual para o banco de dados do Microsoft Access seja /jsmith/data/statistics.mdb; a
seqncia de caracteres de conexo pode ser expressada da seguinte forma caso voc use VBScript como linguagem de
script:
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath
("/jsmith/data/statistics.mdb")
O e comercial (&) usado para concatenar (combinar) duas seqncias de caracteres. A primeira seqncia de
caracteres colocada entre aspas e a segunda retornada pela expresso Server.MapPath. Quando as duas seqncias
de caracteres so combinadas, a seguinte seqncia criada:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Caso voc use JavaScript, a expresso idntica, exceto se voc usar um sinal de adio (+) em lugar de um e comercial
(&) para concatenar as duas seqncias de caracteres:
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath
("/jsmith/data/statistics.mdb")
6 Selecione Usando driver no servidor de teste, clique em Testar e, depois, clique em OK.
Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam o servidor
de aplicativo.
Nota: Caso haja falha na conexo, confirme a seqncia de caracteres de conexo ou entre em contato com o ISP para
verificar se o driver de banco de dados que voc especificou na seqncia est instalado no servidor remoto. Tambm
verifique se o ISP tem a verso mais recente do driver. Por exemplo, um banco de dados criado no Microsoft Access 2000
no funcionar com o Driver do Microsoft Access 3.5. Voc precisa do Driver do Microsoft Access 4.0 ou posterior.
7 Atualize a conexo de banco de dados das pginas dinmicas existentes (abra a pgina no Dreamweaver, clique duas
vezes no nome do conjunto de registros no painel Ligaes ou Comportamentos de servidor e selecione a conexo
que voc acabou de criar no menu Conexo) e use a nova conexo com uma pgina nova que voc criou.
O Dreamweaver atualiza o arquivo de incluso, que atualiza todas as pginas do site que usam a conexo.
Nota: Para evitar o recebimento de erros aps a excluso de uma conexo, atualize todos os conjuntos de registros que
usam a conexo antiga clicando duas vezes no nome do conjunto no painel Ligaes e escolhendo uma nova conexo.
2 Clique no boto de adio (+) no painel, selecione Conexo MySQL no menu e complete a caixa de dilogo.
Nota: Caso voc receba a mensagem de erro Client does not support authentication protocol requested. Consider
upgrading MySQL client ao testar a conexo de banco de dados PHP com o MySQL 4.1, consulte Soluo de problemas
de mensagens de erro MySQL na pgina 550.
O Dreamweaver atualiza o arquivo de incluso, que atualiza todas as pginas do site que usam a conexo.
Nota: Para evitar o recebimento de erros aps a excluso de uma conexo, atualize todos os conjuntos de registros que
usam a conexo antiga clicando duas vezes no nome do conjunto no painel Ligaes e selecionando uma nova conexo
na caixa de dilogo Conjunto de registros.
Nota: Esta etapa s se aplica caso voc tenha um sistema de arquivos NTFS. Se voc tiver um sistema de arquivos FAT,
a caixa de dilogo no ter uma aba Segurana.
4 Caso a conta IUSR_computername no esteja listada na lista Nomes de grupo ou de usurio, clique no boto
dilogo.
9 Para atribuir permisses totais conta IUSR, selecione Controle total e clique em OK.
2 No Windows Explorer, localize o arquivo do banco de dados ou a pasta que contm o banco de dados, clique com
Nota: Esta etapa s se aplica caso voc tenha um sistema de arquivos NTFS. Se voc tiver um sistema de arquivos FAT,
a caixa de dilogo no ter uma aba Segurana.
4 Caso a conta IUSR_computername no esteja listada dentre as contas do Windows na caixa de dilogo Permisses
Pesquisar para exibir uma lista dos nomes da conta associados ao computador.
6 Selecione a conta IUSR_computername e clique em Adicionar.
7 Para atribuir permisses totais conta IUSR, selecione Controle total no menu Tipo de acesso e clique em OK.
Para obter mais segurana, as permisses podem ser definidas de forma que a permisso de Leitura permanea
desativada para a pasta da Web que contm o banco de dados. A navegao na pasta no ser permitida, embora as
pginas da Web continuem podendo acessar o banco de dados.
Para obter mais informaes sobre a conta IUSR e as permisses do servidor Web, consulte as seguintes TechNotes no
Centro de Suporte da Adobe:
A pgina no consegue localizar o DSN. Verifique se um DSN foi criado tanto no servidor Web quanto na mquina
local.
O DSN pode ter sido definido como um DSN de usurio, e no de sistema. Exclua o DSN de usurio e crie um DSN
de sistema para substitu-lo.
Nota: Caso voc no exclua o DSN de usurio, os nomes de DSN duplicados produzem um novo erro ODBC.
Caso voc use o Microsoft Access, o arquivo de banco de dados (.mdb) pode estar bloqueado. O bloqueio talvez se deva
a um DSN com um nome diferente acessando o banco de dados. No Windows Explorer, procure o arquivo de bloqueio
(.ldb) na pasta que contm o arquivo de banco de dados (.mdb) e exclua o arquivo .ldb. Caso haja outro DSN
apontando para o mesmo arquivo de banco de dados, exclua o DSN a fim de evitar o erro no futuro. Reinicie o
computador depois de fazer todas as alteraes.
A conta usada pelo Internet Information Server (normalmente, IUSR) talvez no tenha as permisses do Windows
corretas para um banco de dados baseado em arquivo ou para a pasta que contm o arquivo. Verifique as
permisses na conta do IIS (IUSR) no gerenciador de usurios.
Voc talvez no tenha permisso para criar ou destruir arquivos temporrios. Verifique as permisses quanto ao
arquivo e pasta. Verifique se voc tem permisso para criar ou destruir algum arquivo temporrio. Os arquivos
temporrios so normalmente criados na mesma pasta do banco de dados, embora o arquivo tambm possa ser
criado em outras pastas como, por exemplo, /Winnt.
No Windows 2000, talvez seja necessrio alterar o valor de tempo-limite para o DSN do banco de dados do Access.
Para alterar o valor de tempo-limite, selecione Iniciar > Configuraes > Painel de Controle > Ferramentas
Administrativas > Fontes de Dados (ODBC). Clique na aba Sistema, realce o DSN correto e clique no boto
Configurar. Clique no boto Opes e altere o valor Tempo limite da pgina para 5000.
Caso os problemas persistam, consulte os seguintes artigos da Base de Dados de Conhecimento da Microsoft:
[Reference]80004005Falha no logon()
Esse erro ocorre quando voc usa o Microsoft SQL Server e tenta exibir uma pgina dinmica em um navegador da
Web ou na Visualizao dinmica.
Esse erro gerado pelo SQL Server caso voc no aceite ou reconhea a conta do logon ou a senha enviada (caso voc
esteja usando a segurana padro), ou caso uma conta do Windows no esteja mapeada para uma conta SQL (caso voc
esteja usando a segurana integrada).
Eis as solues possveis:
Caso voc use a segurana padro, o nome da conta e a senha talvez estejam incorretos. Tente usar a conta Admin
do sistema e a senha (UID= sa e sem senha), que devem ser definidas na linha da seqncia de caracteres de
conexo. (Os DSNs no armazenam nomes de usurio e senhas.)
Caso voc use segurana integrada, verifique a conta do Windows chamando a pgina e localize a conta SQL
mapeada (caso haja alguma).
O SQL Server no permite sublinhados em nomes de conta SQL. Se algum mapear manualmente a conta do
Windows IUSR_machinename para uma conta SQL com o mesmo nome, haver uma falha. Mapeie uma conta que
usa um sublinhado para um nome de conta no SQL que no usa um sublinhado.
As permisses definidas na pasta que contm o banco de dados so muito restritivas. Os privilgios IUSR devem
ser definidos como leitura/gravao.
O conjunto de registros se baseia em uma consulta no atualizvel. Ingressos so bons exemplos de consultas no
atualizveis dentro de um banco de dados. Reestruture as consultas para que elas sejam atualizveis.
Para obter mais informaes sobre o erro, consulte PRB: ASP Error The Query Is Not Updateable When You
Update Table Record, na Base de Dados de Conhecimento da Microsoft em
http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q174640.
[Reference]80040e10Poucos parmetros
Esse erro ocorre quando uma coluna especificada na consulta SQL no existe na tabela do banco de dados. Compare
os nomes da coluna na tabela do banco de dados com a consulta SQL. A causa desse erro costuma ser um erro
tipogrfico.
O uso de uma palavra reservada como nome. A maioria dos bancos de dados tem um conjunto de palavras
reservadas. Por exemplo, data uma palavra reservada e no pode ser usada em nomes de coluna em um banco
de dados.
MySQL em http://dev.mysql.com/doc/mysql/en/reserved-words.html
O comportamento de servidor est tentando atualizar um campo de numerao automtica da tabela do banco de
dados ou inserir um registro em um campo de numerao automtica. Como os campos de numerao automtica
so preenchidos automaticamente pelo sistema de banco de dados, qualquer tentativa de preench-los
externamente usando um valor resultar em falha.
Os dados que o comportamento de servidor est atualizando ou inserindo so do tipo errado para o campo de
banco de dados como, por exemplo, inserir um campo booleano (sim/no), inserir uma seqncia de caracteres em
um campo numrico ou inserir uma seqncia de caracteres formatada incorretamente no campo Data/hora.
2 No painel Comportamentos de servidor, clique no boto de adio (+) e selecione Mostrar regio > Mostrar regio
Conjuntos de registros
Texto dinmico ou tabelas
Barras para navegao em registros
Caso voc alterne para a Visualizao de cdigo (Exibir > Cdigo), painis adicionais podero ser exibidos na
prpria categoria painel Inserir, o que permite inserir cdigo na pgina. Por exemplo, caso voc veja uma pgina
do ColdFusion na Visualizao de cdigo, um painel CFML disponibilizado na categoria CFML do painel Inserir.
Vrios painis oferecem forma de criar pginas dinmicas:
Selecione o painel Ligaes (Janela > Ligaes) a fim de definir fontes de contedo dinmico para a pgina e
adicionar o contedo pgina.
Selecione o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para adicionar lgica
do servidor a pginas dinmicas.
Selecione o painel Bancos de dados (Janela >Bancos de dados) para explorar bancos de dados ou criar conexes
de banco de dados.
Selecione o painel Componentes (Janela > Componentes) para inspecionar, adicionar ou modificar os cdigos
dos componentes do ColdFusion.
Nota: O painel Componentes s ativado quando se abre uma pgina do ColdFusion.
Um comportamento de servidor o conjunto de instrues inserido em uma pgina dinmica durante o design e
executado no servidor durante o runtime.
551
O painel Bancos de dados exibe todos os bancos de dados para os quais voc criou conexes. Caso voc esteja
desenvolvendo um site do ColdFusion, o painel exibe todos os bancos de dados que tm fontes de dados definidas no
Administrador do ColdFusion.
Nota: O Dreamweaver procura o site atual no servidor do ColdFusion que voc definiu.
Caso nenhum banco de dados seja exibido no painel, voc deve criar uma conexo de banco de dados.
2 Para exibir as tabelas, os procedimentos armazenados e as visualizaes no banco de dados, clique no sinal de
Control pressionada (Macintosh) no nome da tabela na lista e selecione Exibir dados no menu pop-up.
A opo Visualizar no navegador no carrega pginas relacionadas como, por exemplo, uma pgina de resultados ou
detalhada, arquivos dependentes como arquivos de imagem ou incluses do servidor. Para carregar um arquivo no
encontrado, selecione Janela > Site para abrir o painel Site, escolha o arquivo em Pasta local e clique na seta para cima
azul na barra de ferramentas a fim de copiar o arquivo para a pasta do servidor Web.
dados).
Caso haja uma conexo de banco de dados, clique com o boto direito do mouse (Windows) ou clique mantendo
a tecla Control pressionada (Macintosh) na lista e selecione Editar conexo no menu pop-up.
Caso a conexo no exista, clique no boto de adio (+) na parte superior do painel e a crie.
2 Na caixa de dilogo da conexo, clique em Avanado.
3 Especifique o esquema ou o catlogo e clique em OK.
Opes de Entrada
O Inspetor de propriedades exibido quando o Dreamweaver encontra um tipo de entrada no reconhecido. Esse erro
normalmente ocorre por conta de uma digitao ou de outro erro na entrada dos dados.
Caso voc altere o tipo de campo no Inspetor de propriedades para um valor que o Dreamweaver reconhece por
exemplo, caso voc corrija o erro ortogrfico , o Inspetor de propriedades atualizado para mostrar as propriedades
do tipo reconhecido. Defina qualquer uma das seguintes opes no Inspetor de propriedades:
Entrada Atribui um nome ao campo. Essa caixa obrigatria, e o nome deve ser exclusivo.
Tipo Define o tipo de entrada do campo. O contedo da caixa reflete o valor do tipo de entrada exibido atualmente no
cdigo-fonte HTML.
Valor Define o valor do campo.
Parmetros Abre a caixa de dilogo Parmetros para que voc possa exibir os atributos atuais do campo, bem como
Uma das etapas principais da criao de qualquer site seja esttico ou dinmico o design visual da pgina.
Durante a adio de elementos dinmicos a uma pgina da Web, o design da pgina se torna essencial usabilidade.
Voc deve pensar bem em como os usurios iro interagir com as pginas individuais e os sites como um todo.
Um mtodo comum de incorporao de contedo dinmico a uma pgina da Web criar uma tabela para
apresentar contedo e importar contedo dinmico para uma ou mais clulas da tabela. Usando esse mtodo, voc
pode apresentar informaes de vrios tipos em um formato estruturado.
2 Crie uma fonte de contedo dinmico.
Os sites dinmicos precisam de uma fonte de contedo da qual extraem dados para que possam exibi-los em uma
pgina da Web. Para poder usar fontes de contedo em uma pgina da Web, voc deve fazer o seguinte:
Crie uma conexo com a fonte de contedo dinmico (como, por exemplo, um banco de dados) e o servidor de
aplicativo que processa a pgina. Crie a fonte de dados usando o painel Ligaes; em seguida, voc pode
selecionar e inserir a fonte de dados na pgina.
Especifique quais informaes no banco de dados voc deseja exibir ou quais variveis deve incluir na pgina
criando um conjunto de registros. Voc tambm pode testar a consulta na caixa de dilogo Conjunto de registros
e fazer todos os ajustes necessrios antes de adicion-los ao painel Ligaes.
Depois de definir um conjunto de registros ou outra fonte de dados e adicion-lo ao painel Ligaes, voc pode
inserir o contedo dinmico que o conjunto de registros representa na pgina. A interface controlada por menu do
Dreamweaver simplifica a adio de elementos de contedo dinmico tanto quanto a seleo de uma fonte de
contedo dinmico no painel Ligaes, alm de sua insero em texto, imagem ou objeto de formulrio dentro da
pgina atual.
Quando voc insere um elemento de contedo dinmico ou outro comportamento em uma pgina, o
Dreamweaver insere um script do servidor no cdigo-fonte da pgina. Esse script instrui o servidor a recuperar
dados da fonte definida e process-los dentro da pgina da Web. Para colocar contedo dinmico em uma pgina
da Web, voc pode seguir um dos seguintes procedimentos:
Alm de adicionar contedo dinmico, voc pode incorporar uma lgica de aplicativo complexa a pginas da Web
usando comportamentos de servidor. Comportamentos de servidor so partes predefinidas de cdigo do servidor
que adicionam lgica de aplicativo a pginas da Web, proporcionando maior interao e funcionalidade.
Os comportamentos de servidor do Dreamweaver permitem adicionar lgica de aplicativo a um site sem a
necessidade de que voc escreva o cdigo. Os comportamentos de servidor fornecidos com o Dreamweaver do
suporte a tipos de documento do ColdFusion, ASP, e PHP. Os comportamentos de servidor so escritos e testados
para que sejam rpidos, seguros e eficientes. Os comportamentos de servidor incorporados do suporte a pginas
da Web em vrias plataformas para todos os navegadores.
O Dreamweaver fornece uma interface apontar e clicar que torna a aplicao de contedo dinmico e de
comportamentos complexos a uma pgina to fcil quanto a insero de elementos de texto e design. Os seguintes
comportamentos de servidor esto disponveis:
Defina um conjunto de registros de um banco de dados existente. Em seguida, o conjunto de registros que voc
define armazenado no painel Ligaes.
Exiba vrios registros em uma nica pgina. Voc seleciona uma tabela inteira ou clulas individuais ou linhas
com contedo dinmico e especifica o nmero de registros a serem exibidos em cada visualizao de pgina.
Crie e insira uma tabela dinmica em uma pgina e associe a tabela a um conjunto de registros. Voc pode
modificar posteriormente a aparncia da tabela e a regio repetitiva usando o Inspetor de propriedades e o
comportamento de servidor Regio repetitiva, respectivamente.
Insira um objeto de texto dinmico em uma pgina. O objeto de texto que voc insere um item de um conjunto
de registros predefinido ao qual possvel aplicar qualquer um dos formatos de dados.
Crie controles de navegao em registros e de status, pginas mestre/detalhadas e formulrios para a atualizao
das informaes em um banco de dados.
Adicione um contador de registros para ajudar os usurios a controlar quantos registros retornaram e onde eles
se encontram no resultado retornado.
Voc tambm pode estender os comportamentos de servidor do Dreamweaver escrevendo comportamentos de
servidor prprios ou instalando de outros fabricantes.
5 Teste e depure a pgina.
Antes de criar uma pgina dinmica ou um site inteiro disponvel na Web, voc deve testar sua funcionalidade.
Voc tambm deve considerar como a funcionalidade do aplicativo pode afetar pessoas com deficincias.
Para obter um tutorial sobre a criao de pginas dinmicas, consulte www.adobe.com/go/learn_dw_webapp_br.
Uma consulta pode produzir um conjunto de registros que inclui apenas determinadas colunas, certos registros ou
combinaes de ambos. Um conjunto de registros tambm pode incluir todos os registros e colunas de uma tabela de
banco de dados. No entanto, como os aplicativos raramente precisam usar todos os dados de um banco de dados, voc
deve procurar criar conjuntos de registros com o menor tamanho possvel. Como o servidor Web mantm
temporariamente o conjunto de registros na memria, o uso de um conjunto de registros menor requer menos
memria e pode melhorar o desempenho do servidor.
As consultas de banco de dados so escritas em SQL (linguagem de consulta estruturada), uma linguagem simples que
permite recuperar, adicionar e excluir dados em um banco de dados. O construtor SQL includo no Dreamweaver
permite criar consultas simples sem que voc precise compreender SQL. Entretanto, se voc quiser criar consultas
complexas em SQL, um conhecimento bsico dessa linguagem permite criar consultas mais avanadas, alm de
proporcionar mais flexibilidade na criao de pginas dinmicas.
Antes de definir um conjunto de registros com o Dreamweaver, voc deve criar uma conexo com um banco de dados
e caso no haja nenhum dado inserir dados no banco de dados. Caso voc ainda no tenha definido uma conexo
de banco de dados para o site, consulte o captulo sobre a conexo de banco de dados referente tecnologia de servidor
para a qual est desenvolvendo e siga as instrues sobre a criao de uma conexo de banco de dados.
Depois de armazenar um valor em uma varivel de sesso, voc pode usar o Dreamweaver para recuperar o valor das
variveis de sesso e us-lo em um aplicativo da Web. Depois de definir a varivel de sesso no Dreamweaver, voc
pode inserir o valor em uma pgina.
A sintaxe do HTML de cada uma exibida da seguinte forma:
<form action="destination.html" method="get" name="myform"> </form>
<param name="href"value="destination.html">
Tanto a tecnologia de servidor usada quanto o mtodo que voc usa para obter as informaes determinam o cdigo
usado para armazenar as informaes em uma varivel de sesso. A sintaxe bsica de cada tecnologia de servidor a
seguinte:
ColdFusion
<CFSET session.variable_name = value>
ASP
<% Session("variable_name") = value %>
A expresso value costuma ser uma expresso de servidor como, por exemplo, Request.Form("lastname"). Por
exemplo, caso voc use um parmetro de URL chamado product (ou um formulrio em HTML com o mtodo OBTER
e um campo de texto chamado product) para coletar informaes, as seguintes instrues armazenam as informaes
em uma varivel de sesso chamada prodID:
ColdFusion
<CFSET session.prodID = url.product>
ASP
<% Session("prodID") = Request.QueryString("product") %>
Caso voc use um formulrio em HTML com o mtodo postar e um campo de texto chamado txtProduct para
coletar as informaes, as seguintes instrues armazenam as informaes na varivel de sesso:
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP
<% Session("prodID") = Request.Form("txtProduct") %>
Todos os links tm um parmetro de URL chamado fontsize que envia a preferncia de texto do usurio para o
servidor, como mostra o seguinte exemplo do Adobe ColdFusion:
<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>
Armazene a preferncia de texto do usurio em uma varivel de sesso e use-a para definir o tamanho da fonte em
todas as pginas que o usurio solicita.
Prxima parte superior da pgina de destino, digite o seguinte cdigo para criar uma sesso chamada font_pref que
armazena a preferncia de tamanho da fonte do usurio.
ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>
Quando o usurio clica no link de hipertexto, a pgina envia a preferncia de texto do usurio em um parmetro de
URL para a pgina de destino. O cdigo na pgina de destino armazena o parmetro de URL na varivel de sesso
font_pref. Durante a sesso do usurio, todas as pginas do aplicativo recuperam esse valor e exibem o tamanho de
fonte selecionado.
Como as variveis de aplicativo se estendem pela vida til do aplicativo e permanecem de usurio para usurio, elas
so ideais para o armazenamento das informaes que devem existir para todos os usurios como, por exemplo, a hora
e a data atuais. O valor da varivel de aplicativo definido no cdigo do aplicativo.
parada do servidor.
Variveis locais Elas so criadas com a tag CFSET ou a tag CFPARAM dentro de uma pgina do ColdFusion.
Painel Componentes
Use o painel Componentes para criar e inspecionar componentes, alm de inserir cdigo de componente nas pginas.
Nota: O painel no funciona na Visualizao de design.
Voc pode realizar as seguintes tarefas com esse painel:
A caixa de dilogo simples Conjunto de registros exibida. Caso voc esteja desenvolvendo um site em ColdFusion, a
caixa de dilogo Conjunto de registros muda um pouco. (Caso a caixa de dilogo avanada Conjunto de registros seja
exibida em seu lugar, clique no boto Simples a fim de alternar para a caixa de dilogo Conjunto de registros simples.)
4 Complete a caixa de dilogo Conjunto de registros referente ao tipo de documento.
Caso voc tenha definido um filtro que usa parmetros inseridos por usurios, insira um valor na caixa Valor de teste
e clique em OK. Caso uma ocorrncia do conjunto de registros seja criada com xito, uma tabela exibida com os
dados extrados do conjunto.
6 Clique em OK para adicionar o conjunto de registros lista de fontes de contedo disponveis no painel Ligaes.
Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais
nomes de objeto no cdigo, por exemplo: rsPressReleases.
Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode
usar caracteres especiais ou espaos.
2 Selecione uma conexo no menu pop-up Conexo.
Caso nenhuma conexo seja exibida na lista, clique em Definir para criar uma.
3 No menu pop-up Tabela, selecione a tabela do banco de dados que fornecer dados ao conjunto de registros.
colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
5 Para limitar ainda mais os registros que a tabela retorna, complete a seo Filtro:
No primeiro menu pop-up, selecione uma coluna da tabela do banco de dados a ser comparada com um valor
de teste que voc define.
No segundo menu pop-up, selecione uma expresso condicional para comparar o valor selecionado em cada
registro com o valor de teste.
registros devem ser classificados em ordem crescente (1, 2, 3... ou A, B, C...) ou em ordem decrescente.
7 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia da fonte de dados, e clique em OK para
Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais
nomes de objeto no cdigo. Por exemplo: rsPressReleases
Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode
usar caracteres especiais ou espaos.
2 Caso voc esteja definindo um conjunto de registros para um componente do ColdFusion (ou seja, caso um arquivo
CFC esteja aberto no momento Dreamweaver), selecione uma funo CFC existente no menu pop-up Funo ou
clique no boto Nova funo para criar uma nova funo.
Nota: O menu pop-up Funo s est disponvel caso um arquivo CFC seja o documento atual e voc tenha acesso a
um computador com o ColdFusion MX 7 ou melhor em execuo.
O conjunto de registros definido na funo.
3 Selecione uma fonte de dados no menu pop-up Fonte de dados.
Caso no haja nenhuma fonte de dados no menu pop-up, voc cria uma fonte de dados do ColdFusion.
4 Nas caixas Nome de usurio e Senha, digite o nome de usurio e a senha do servidor de aplicativo do ColdFusion,
caso necessrio.
As fontes de dados do ColdFusion podem exigir um nome de usurio e senha no acesso. Caso voc no tenha o
nome de usurio e a senha para acessar uma fonte de dados no ColdFusion, entre em contato com o administrador
do ColdFusion na organizao.
5 No menu pop-up Tabela, selecione a tabela do banco de dados que fornecer dados ao conjunto de registros.
6 Para incluir um subconjunto das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as
colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
7 Para limitar ainda mais os registros que a tabela retorna, complete a seo Filtro:
No primeiro menu pop-up, selecione uma coluna da tabela do banco de dados a ser comparada com um valor
de teste que voc define.
No segundo menu pop-up, selecione uma expresso condicional para comparar o valor selecionado em cada
registro com o valor de teste.
registros devem ser classificados em ordem crescente (1, 2, 3... ou A, B, C...) ou decrescente.
9 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia da fonte de dados.
Uma tabela exibida com os dados retornados. Cada linha contm um registro e cada coluna representa um campo
nesse registro. Clique em OK para fechar o conjunto de registros de teste.
10 Clique em OK. O conjunto de registros do ColdFusion recm-definido exibido no painel Ligaes.
A caixa de dilogo avanada Conjunto de registros exibida. Caso voc esteja desenvolvendo um site em ColdFusion,
a caixa de dilogo Conjunto de registros muda um pouco. (Mas caso seja exibida a caixa de dilogo simples Conjunto
de registros, alterne para a caixa de dilogo avanada Conjunto de registros clicando no boto Avanado.)
4 Complete a caixa de dilogo avanada Conjunto de registros.
Caso voc tenha definido um filtro que use parmetros inseridos pelos usurios, o boto Testar exibe a caixa de dilogo
Valor de teste. Insira um valor na caixa Valor de teste e clique em OK. Caso uma ocorrncia do conjunto de registros
seja criada com xito, uma tabela exibida com os dados do conjunto.
6 Clique em OK para adicionar o conjunto de registros lista de fontes de contedo disponveis no painel Ligaes.
Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes
de objeto no cdigo. Por exemplo: rsPressRelease
Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode
usar caracteres especiais ou espaos.
2 Selecione uma conexo no menu pop-up Conexo.
3 Insira uma instruo SQL na rea de texto SQL ou use a rvore grfica Itens do banco de dados na parte inferior da
caixa de dilogo para criar uma instruo SQL usando o conjunto de registros escolhido.
Faa o seguinte para usar a rvore Itens do banco de dados e criar a instruo SQL:
Selecione o objeto de banco de dados e clique em um dos botes no lado direito da rvore.
Por exemplo, caso voc selecione uma coluna da tabela, os botes disponveis so SELECT, WHERE e ORDER BY.
Clique em um dos botes para adicionar a clusula associada instruo SQL.
Voc tambm pode usar uma instruo SQL predefinida em um procedimento armazenado selecionando o
procedimento armazenado na rvore Itens do banco de dados e clicando no boto Procedimento. O Dreamweaver
preenche automaticamente as reas SQL e Varivel.
4 Caso a instruo SQL contenha variveis, defina os valores na rea Variveis clicando no boto de adio (+) e
digitando o nome da varivel, o tipo (inteira, texto, data ou nmero de ponto flutuante) o nome padro (o valor
que a varivel deve usar caso nenhum valor de runtime retorne) e o valor de runtime.
Nota: Quando usar variveis em uma instruo SQL em PHP, o Dreamweaver adicionar automaticamente um
smbolo de dlar ao nome da varivel, portanto voc deve omitir o sinal de dlar (por exemplo, colname, em vez de
$colname).
Caso a instruo SQL contenha variveis, verifique se a coluna Valor padro da caixa Variveis contm valores de teste
vlidos.
O valor de runtime costuma ser um parmetro de URL ou de formulrio inserido por um usurio em um campo de
formulrio em HTML.
Parmetros de URL na coluna Valor de runtime:
Modelo do servidor
ASP
Request.QueryString(formFieldName)
PHP
$_GET['formFieldName']
ASP
Request.Form(formFieldName)
PHP
$_POST['formFieldName']
5 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.
Caso a instruo SQL contenha variveis, verifique se a coluna Valor padro da caixa Variveis contm valores de teste
vlidos antes de clicar em Testar.
Caso haja xito, uma tabela exibida com os dados do conjunto de registros. Cada linha contm um registro e cada
coluna representa um campo nesse registro. Clique em OK para limpar o conjunto de registros.
6 Caso esteja satisfeito com o trabalho, clique em OK.
Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes
de objeto no cdigo. Por exemplo: rsPressReleases
Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode
usar caracteres especiais ou espaos.
Caso voc esteja definindo um conjunto de registros para um componente do ColdFusion (ou seja, caso um arquivo
CFC esteja aberto no momento Dreamweaver), selecione uma funo CFC existente no menu pop-up Funo ou
clique no boto Nova funo para criar uma nova funo.
Nota: O menu pop-up Funo s est disponvel caso um arquivo CFC seja o documento atual e voc tenha acesso a um
computador com o ColdFusion MX 7 ou melhor em execuo.
O conjunto de registros definido na funo.
2 Selecione uma fonte de dados no menu pop-up Fonte de dados.
Se no houver nenhuma fonte de dados na lista do menu pop-up, voc primeiramente precisar criar uma fonte de
dados do ColdFusion.
3 Nas caixas Nome de usurio e Senha, digite o nome de usurio e a senha do servidor de aplicativo do ColdFusion,
caso necessrio.
As fontes de dados do ColdFusion podem exigir um nome de usurio e senha no acesso. Caso voc no tenha o nome
de usurio e a senha para acessar uma fonte de dados no ColdFusion, entre em contato com o administrador do
ColdFusion na organizao.
4 Insira uma instruo SQL na rea de texto SQL ou use a rvore grfica Itens do banco de dados na parte inferior da
caixa de dilogo para criar uma instruo SQL usando o conjunto de registros escolhido.
5 (Opcional) Faa o seguinte para usar a rvore Itens do banco de dados e criar a instruo SQL:
Selecione o objeto de banco de dados e clique em um dos botes no lado direito da rvore.
Por exemplo, caso voc selecione uma coluna da tabela, os botes disponveis so SELECT, WHERE e ORDER BY.
Clique em um dos botes para adicionar a clusula associada instruo SQL.
Caso a instruo SQL contenha parmetros, defina os valores na rea Parmetros clicando no boto de adio (+) e
digitando o nome do parmetro e o nome padro (o valor que o parmetro deve usar caso nenhum valor de runtime
retorne).
Caso a instruo SQL contenha parmetros, verifique se a coluna Valor padro da caixa Parmetros contm valores de
teste vlidos.
Parmetros de pgina permitem fornecer valores padro para referncias de valor de runtime no SQL que voc escreve.
Por exemplo, a seguinte instruo SQL seleciona um registro de funcionrio com base no valor da ID do funcionrio.
Voc pode atribuir um valor padro ao parmetro, verificando se um valor de runtime sempre retorna. Nesse exemplo,
FormFieldName se refere a um campo de formulrio em que o usurio insere a ID de um funcionrio:
SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))
Valores padro
FormFieldName
0001
O valor de runtime costuma ser um parmetro de URL ou de formulrio inserido por um usurio em um campo de
formulrio em HTML.
6 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.
Caso a instruo SQL contenha referncias de runtime, verifique se a coluna Valor padro do campo Parmetros de
pgina contm valores de teste vlidos antes de clicar em Testar.
Caso haja xito, uma tabela exibida com os dados do conjunto de registros. Cada linha contm um registro e cada
coluna representa um campo nesse registro. Clique em OK para limpar o conjunto de registros.
7 Caso esteja satisfeito com o trabalho, clique em OK.
1 Expanda a ramificao Tabelas para exibir todas as tabelas no banco de dados selecionado e, depois, expanda a
igual).
4 Defina a varivel 'varJob' clicando no boto de adio (+) da rea Variveis e inserindo os valores nas colunas
ASP
ColdFusion
Varivel de URL
PHP
Varivel de URL
4 Na caixa de dilogo Varivel de URL, digite o nome da varivel de URL na caixa e clique em OK.
O nome da varivel de URL costuma ser o nome do campo de formulrio em HTML ou do objeto usado para obter o
valor.
5 A varivel de URL exibida no painel Ligaes.
ASP
ColdFusion
Varivel de formulrio
PHP
Varivel de formulrio
4 Na caixa de dilogo Varivel de formulrio, digite o nome da varivel de formulrio e clique em OK. O nome do
parmetro de formulrio costuma ser o nome do campo de formulrio em HTML ou do objeto usado para obter o
valor.
Por exemplo, esse modelo do ColdFusion instancia uma sesso chamada username e atribui a ela o valor Cornelius:
<CFSET session.username = Cornelius>
Na caixa de dilogo Conjunto de registros, a varivel exibida no menu pop-up Fonte de dados com as fontes de dados
do ColdFusion no servidor.
5 Complete a caixa de dilogo Conjunto de registros e clique em OK.
6 Inicialize a varivel.
O Dreamweaver no inicializa a varivel para que voc possa inicializ-la como e onde desejar. Voc pode inicializar
a varivel no cdigo da pgina (antes da tag cfquery), em um arquivo de incluso ou em algum outro arquivo como
uma varivel de sesso ou de aplicativo.
Descrio
Server.ColdFusion.ProductName
Server.ColdFusion.ProductVersion
Server.ColdFusion.ProductLevel
Server.ColdFusion.SerialNumber
Server.OS.Name
Nome do sistema operacional em execuo no servidor (Windows XP, Windows 2000, Linux).
Server.OS.AdditionalInformation
Server.OS.Version
Server.OS.BuildNumber
3 Na caixa de dilogo Varivel de solicitao, selecione um dos seguintes conjuntos de solicitao no menu pop-up Tipo:
O conjunto QueryString Recupera informaes acrescentadas ao URL da pgina de envio como, por exemplo, quando
a pgina tem um formulrio em HTML usando o mtodo OBTER. A seqncia de caracteres de consulta consiste em
um ou mais pares nome/valor (por exemplo, last=Smith, first=Winston) acrescentados ao URL com um ponto de
interrogao (?). Caso a seqncia de caracteres de consulta tenha mais de um par nome/valor, so inseridos sinais de
e comercial (&).
O conjunto Form Recupera informaes de formulrio includas no corpo da solicitao HTTP por formulrio HTTP
clique em OK.
Para obter mais informaes, procure pela palavra-chave $_SERVER na documentao do PHP.
Por exemplo, para acessar as informaes na varivel Client.LastVisit do ColdFusion, insira LastVisit.
Variveis de cliente so variveis criadas no cdigo para associar dados a um cliente especfico. As variveis de cliente
mantm o estado do aplicativo enquanto o usurio se move uma pgina para outra no aplicativo, bem como de uma
sesso para outra.
As variveis de cliente podem ser definidas pelo usurio ou incorporadas. A seguinte tabela lista as variveis de cliente
do ColdFusion incorporadas:
Varivel
Descrio
Client.CFID
Client.CFTOKEN
Client.URLToken
Uma combinao entre CFID e CFTOKEN a ser passada entre os modelos quando os cookies no forem
usados.
Client.LastVisit
Client.HitCount
O nmero de solicitaes de pgina vinculadas a um nico cliente (controlado por CFID e CFTOKEN).
Client.TimeCreated
Registra o carimbo de data/hora quando CFID e CFTOKEN foram criados inicialmente para um
determinado cliente.
Por exemplo, caso voc acesse as informaes na varivel CGI.HTTP_REFERER, insira HTTP_REFERER.
A seguinte tabela lista as variveis CGI do ColdFusion mais comuns criadas no servidor:
Varivel
Descrio
SERVER_SOFTWARE
O nome e a verso do software do servidor das informaes que atende solicitao (no qual o
gateway est em execuo). Formato: nome/verso.
SERVER_NAME
O nome de host do servidor, a cpia do DNS ou o endereo IP como ele exibido nos URLs de autoreferncia.
GATEWAY_INTERFACE
SERVER_PROTOCOL
SERVER_PORT
REQUEST_METHOD
O mtodo com o qual a solicitao foi feita. Para HTTP, os mtodos so Obter, Cabealho, Postar etc.
PATH_INFO
As informaes adicionais do caminho dadas pelo cliente. Os scripts podem ser acessados pelo nome
do caminho virtual, seguido de informaes adicionais ao final dele. As informaes adicionais so
enviadas como PATH_INFO.
PATH_TRANSLATED
O servidor fornece uma verso traduzida de PATH_INFO, que usa o caminho e faz um mapeamento
virtual/fsico para ele.
Varivel
Descrio
SCRIPT_NAME
QUERY_STRING
As informaes de consulta aps o ponto de interrogao (?) no URL que referencia o script.
REMOTE_HOST
O nome de host que realiza a solicitao. Caso no tenha essas informaes, o servidor define
REMOTE_ADDR, e no REMOTE_HOST.
REMOTE_ADDR
AUTH_TYPE
Caso o servidor d suporte autenticao do usurio e o script esteja protegido, trata-se do mtodo
de autenticao especfico do protocolo usado para validar o usurio.
REMOTE_USER AUTH_USER
Caso o servidor d suporte autenticao do usurio e o script esteja protegido, trata-se do nome de
usurio da autenticao. (Tambm disponvel como AUTH_USER.)
REMOTE_IDENT
Caso o servidor HTTP d suporte identificao RFC 931, a varivel definida como o nome do usurio
remoto recuperado do servidor. Use a varivel apenas no logon.
CONTENT_TYPE
Em consultas que tenham informaes anexadas como, por exemplo, HTTP POST e PUT, trata-se do
tipo de contedo dos dados.
CONTENT_LENGTH
A seguinte tabela lista as variveis CGI mais comuns criadas pelo navegador e passadas para o servidor:
Varivel
Descrio
HTTP_REFERER
HTTP_USER_AGENT
O navegador que o cliente est usando no momento para enviar a solicitao. Formato:
software/biblioteca da verso/verso.
HTTP_IF_MODIFIED_SINCE
A hora em que a pgina foi modificada pela ltima vez. A varivel enviada no momento em que o
navegador desejar, normalmente em resposta ao servidor que enviou o cabealho HTTP
LAST_MODIFIED. Ela pode ser usada para aproveitar o cache do navegador.
Caso faa alteraes em uma das fontes de contedo, voc pode atualizar o cache clicando no boto Atualizar (o cone
de seta circular) no canto superior direito do painel Ligaes. (Expanda o painel caso voc no veja o boto.)
Um alocador de espao de contedo dinmico aparece. (Caso voc tenha selecionado o texto na pgina, o alocador de
espao substitui a seleo do texto.) O alocador de espao do contedo do conjunto de registros usa a sintaxe
{RecordsetName.ColumnName}, em que Recordset o nome do conjunto de registros e ColumnName o nome da
coluna que voc escolheu no conjunto.
s vezes, o comprimento dos alocadores de espao para texto dinmico distorce o layout da pgina na janela
Documento. Voc pode resolver o problema usando chaves vazias como alocadores de espao, como descrito no
prximo tpico.
Elements (Macintosh).
2 No menu pop-up Mostrar texto dinmico como, selecione { } e clique em OK.
A fonte de contedo deve ser um conjunto de registros que contm os caminhos dos arquivos de imagem. Dependendo
da estrutura de arquivo do site, os caminhos podem ser absolutos, relativos ao documento ou raiz.
Nota: Atualmente, o Dreamweaver no d suporte a imagens binrias armazenadas em um banco de dados.
Caso nenhum registro seja exibido na lista ou caso os conjuntos de registros disponveis no atendam s suas
necessidades, defina um novo conjunto de registros.
A fonte de contedo deve conter dados apropriados ao atributo de HTML que voc deseja ligar. Caso nenhuma fonte
de contedo seja exibida na lista ou caso as fontes de contedo disponveis no atendam s suas necessidades, clique
no boto de adio (+) para definir uma nova fonte de dados.
3 Na Visualizao de design, selecione um objeto HTML.
Por exemplo, para selecionar uma tabela em HTML, clique dentro dela e, depois, clique na tag <table> no seletor de
tags na parte inferior da janela Documento.
Na prxima vez em que a pgina for executada no servidor de aplicativo, o valor da fonte de dados ser vinculado ao
atributo de HTML.
Por exemplo, para selecionar uma tabela em HTML, clique dentro dela e, depois, clique na tag <table> no seletor de
tags na parte inferior da janela Documento.
2 Como voc liga uma fonte de contedo dinmico ao atributo de HTML depende de onde ela est localizada.
Caso o atributo que voc deseja ligar tenha um cone de pasta prximo a ele no Inspetor de propriedades, clique no
cone de pasta para abrir uma caixa de dilogo de seleo do arquivo e, em seguida, clique na opo Fontes de dados
para exibir uma lista das fontes de dados.
Caso o atributo que voc deseja ligar no tenha um cone de pasta prximo a ele, clique na aba Lista (a aba mais
abaixo das duas) esquerda do inspetor.
A visualizao Lista do Inspetor de propriedades exibida.
Caso o atributo que voc deseja ligar no esteja listado na visualizao Lista, clique no boto de adio (+) e, em
seguida, digite o nome do atributo ou clique no boto de seta pequeno e selecione o atributo no menu pop-up.
3 Para tornar o valor do atributo dinmico, clique no atributo e, em seguida, clique no cone do raio ou no cone da
A fonte de contedo deve manter dados apropriados ao atributo de HTML que voc deseja ligar. Caso nenhuma fonte
de contedo seja exibida na lista ou caso as fontes de contedo disponveis no atendam s suas necessidades, defina
uma nova.
Na prxima vez em que a pgina for executada no servidor de aplicativo, o valor da fonte de dados ser vinculado ao
atributo de HTML.
Propriedades).
2 Clique no boto Parmetros.
3 Caso o parmetro no seja exibido na lista, clique no boto de adio (+) e digite um nome de parmetro na coluna
Parmetro.
4 Clique na coluna Valor do parmetro e, depois, clique no cone do raio para especificar um valor dinmico.
A fonte de dados deve manter dados apropriados ao parmetro de objeto que voc deseja ligar. Caso nenhuma fonte
de dados seja exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, defina uma
nova.
Caso voc adicione outro conjunto de registros pgina, o painel Comportamentos de servidor lista ambos os
conjuntos de registros da seguinte forma:
Recordset(mySecondRecordset)Recordset(myRecordset)
de servidor do painel.
A caixa de dilogo que voc usou para definir a fonte de dados original exibida.
3 Faa as alteraes na caixa de dilogo e clique em OK.
de dilogo exibida perguntando se voc deseja ativar essas opes. Clique em OK para ativar essas opes e a
compatibilidade com o Contribute.
3 Se solicitado, insira a senha de administrador e clique em OK.
Por exemplo, caso o preo de um item em um conjunto de registros seja 10.989, voc pode exibir o preo na pgina
como US$ 10.99 selecionando o formato Moeda - 2 casas decimais do Dreamweaver. Esse formato exibe um nmero
usando duas casas decimais. Caso o nmero tenha mais de duas casas decimais, o formato de dados arredonda o
nmero para o decimal mais prximo. Caso o nmero no tenha casas decimais, o formato de dados adiciona uma
casa decimal e dois zeros.
Regio repetitiva Comportamentos de servidor permitem exibir vrios itens retornados de uma consulta de banco de
permitem aos usurios passar ao grupo de conjuntos de registros anteriores ou posteriores retornados pelo conjunto
de registros. Por exemplo, caso opte por exibir 10 registros por pgina usando o objeto de servidor Regio repetitiva e
o conjunto retorne 40 registros, voc pode navegar em 10 registros por vez.
Barra de status Conjunto de registros Comportamentos de servidor permitem incluir um contador que mostra aos
usurios onde eles esto dentro de um conjunto de registros em relao ao nmero total de registros retornados.
Mostrar regio Comportamentos de servidor permitem optar por mostrar ou ocultar itens na pgina com base na
relevncia dos registros exibidos no momento. Por exemplo, caso um usurio tenha navegado at o ltimo registro de
um conjunto, voc pode ocultar o link Prximo e exibir apenas o link Anterior.
Antes de colocar a barra de navegao na pgina, verifique se a pgina contm um conjunto de registros para
navegao e um layout de pgina no qual exibir os registros.
Depois de colocar a barra de navegao na pgina, voc pode usar as ferramentas de design para personalizar a
barra. Voc tambm pode editar os comportamentos de servidor Mover para e Mostrar regio clicando duas vezes
neles no painel Comportamentos de servidor.
O Dreamweaver cria uma tabela que contm links de texto ou de imagem que permitem ao usurio navegar no
conjunto de registros selecionado quando clicado. Quando o primeiro registro do conjunto exibido, os links
Primeiro e Anterior ou as imagens permanecem ocultos. Quando o ltimo registro do conjunto exibido, os links
Prximo e ltimo ou as imagens permanecem ocultos.
Voc pode personalizar o layout da barra de navegao usando as ferramentas de design e o painel
Comportamentos de servidor.
1 Na Visualizao de design, coloque o ponto de insero no local da pgina onde voc deseja que a barra de
essas imagens por arquivos de imagem prprios depois de colocar a barra na pgina.
3 Selecione Paginao do conjunto de registros no menu pop-up e, depois, selecione um comportamento de servidor
Nota: Caso o conjunto contenha vrios registros, o comportamento de servidor Mover para ltimo registro pode demorar
muito para ser executado quando o usurio clica no link.
Depois de adicionar um conjunto de registros a uma pgina e criar uma barra de navegao, voc deve aplicar
comportamentos de servidor a cada elemento de navegao. Por exemplo, uma barra de navegao do conjunto de
registros tpica contm representaes dos seguintes links correspondentes ao comportamento apropriado:
Link de navegao
Comportamento de servidor
A seleo pode ser qualquer item, incluindo tabelas, linhas de tabelas ou mesmo um pargrafo do texto.
Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto esquerdo da janela do
documento. Por exemplo, caso a regio seja uma linha de tabela, clique dentro da linha na pgina e, depois, clique na
tag <tr> direita no seletor para selecionar a linha da tabela.
2 Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de servidor.
3 Clique no boto de adio (+) e selecione Regio repetitiva.
4 Selecione o nome do conjunto de registros a ser usado no menu pop-up.
5 Selecione o nmero de registros a serem exibidos por pgina e clique em OK.
Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetitiva.
Criar e adicionar uma regio repetitiva para exibir vrios registros em uma pgina
1 Especifique o conjunto de registros que contm os dados a serem exibidos na regio repetitiva.
2 Especifique o nmero de registros a serem exibidos por pgina e clique em OK.
Caso voc especifique um nmero limitado de registros por pgina e o nmero de registros solicitados seja excedido,
adicione links para navegao em registro para permitir aos usurios exibir os demais registros.
Para criar uma tabela como, por exemplo, a do exemplo anterior, voc deve criar uma tabela que tenha contedo
dinmico e aplicar o comportamento de servidor Regio repetitiva linha da tabela com o contedo dinmico.
Quando a pgina processada pelo servidor de aplicativo, a linha repetida o nmero de vezes especificado no objeto
de servidor Regio repetitiva com um registro diferente inserido em cada linha nova.
1 Escolha uma destas opes para inserir uma tabela dinmica:
Selecione Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica para exibir a caixa de dilogo Tabela
dinmica.
Na categoria Dados do painel Inserir, clique no boto Dados dinmicos e selecione o cone Tabela dinmica no
menu pop-up.
2 Selecione o conjunto de registros no menu pop-up Conjunto de registros.
3 Selecione o nmero de registros a serem exibidos por pgina.
4 (Opcional) Insira os valores da borda da tabela, do preenchimento da clula e do espaamento da clula.
A caixa de dilogo Tabela dinmica mantm os valores que voc insere para bordas da tabela, preenchimento da clula
e espaamento da clula.
Nota: Caso voc esteja trabalhando em um projeto que exija vrias tabelas dinmicas com a mesma aparncia, insira
os valores de layout da tabela, o que simplifica ainda mais o desenvolvimento da pgina. Voc pode ajustar esses valores
depois de inserir a tabela usando o Inspetor de propriedades da tabela.
5 Clique em OK.
Uma tabela e os alocadores de espao do contedo dinmico definido no conjunto de registros associado so inseridos
na pgina.
Nesse exemplo, o conjunto de registros contm quatro colunas: AUTHORID, FIRSTNAME, LASTNAME e BIO. A
linha de cabealho da tabela preenchida com os nomes de cada coluna. Voc pode editar os cabealhos usando
qualquer texto descritivo ou substitu-los por imagens representativas.
e, depois, selecione o conjunto de registros no menu pop-up Conjunto de registros e, em seguida, clique em OK.
O objeto de servidor Status de navegao do conjunto de registros insere um contador de registros de texto semelhante
ao seguinte exemplo:
e clique em OK.
submenu, selecione Exibir total de registros. O comportamento Exibir total de registros inserido na pgina, e um
alocador de espao inserido onde estava o ponto de insero. A seqncia de caracteres de texto exibida da
seguinte forma:
Displaying records thru of {Recordset1.RecordCount}.
5 Coloque o ponto de insero depois da palavra records e selecione Exibir nmero de registro inicial no painel
Comportamentos de servidor > boto de adio (+) > Contagem de registros. A seqncia de caracteres de texto
exibida da seguinte forma:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
6 Agora coloque o ponto de insero entre as palavras thru e of e selecione Exibir nmero de registro inicial no
painel Comportamentos de servidor > boto de adio (+) > Contagem de registros. A seqncia de caracteres de
texto exibida da seguinte forma:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
7 Confirme se o contador est funcionando corretamente exibindo a pgina na Visualizao dinmica; o contador
Caso a pgina de resultados tenha um link de navegao para se mover para o prximo conjunto de registros, o clique
no link atualiza o contador de registros para que ele exiba o seguinte:
Showing records 9 thru 16 of 40.
Verifique se o formato de dados apropriado ao tipo de dado que voc est formatando. Por exemplo, os formatos
Moeda s funcionam caso os dados dinmicos consistam em dados numricos. Observe que voc no pode aplicar
mais de um formato aos mesmos dados.
5 Verifique se o formato foi aplicado corretamente ao visualizar a pgina na Visualizao dinmica.
O item de dados ligado cujo texto dinmico voc selecionou realado no painel Ligaes (Janela > Ligaes). O painel
exibe duas colunas para o item selecionado Ligao e Formato. Caso a coluna Formato no esteja visvel, alargue o
painel Ligaes para mostr-la.
3 No painel Ligaes, clique na seta para baixo na coluna Formato para expandir o menu pop-up dos formatos de
dados disponveis.
Caso a seta para baixo no esteja visvel, alargue ainda mais o painel Ligaes.
4 Selecione Editar lista de formatos no menu pop-up.
5 Complete a caixa de dilogo e clique em OK.
a Selecione o formato na lista e clique em Editar.
b Altere qualquer um dos seguintes parmetros nas caixas Moeda, Nmero ou Porcentagem e clique em OK.
Nota: Embora o Dreamweaver suporte somente a criao de formatos de dados para pginas em ASP, os usurios do
ColdFusion e do PHO podem baixar formatos que outros desenvolvedores criaram ou criar formatos de servidor e postlos no Dreamweaver Exchange. Para obter mais informaes sobre a API Formato de servidor, consulte Extenso do
Dreamweaver (Ajuda > Extenso do Dreamweaver > Formatos de servidor).
Definir uma pasta para processar pginas dinmicas (por exemplo, uma pasta raiz em um servidor ColdFusion ou
no computador ou em uma mquina remota).
Caso a pgina exiba uma mensagem de erro quando voc ativar a Visualizao dinmica, verifique se o prefixo do
URL na caixa de dilogo Definio de sites est correto.
em OK.
Nota: Para salvar as configuraes, voc deve ativar as Design Notes (Arquivo > Design Notes).
Prefixo do URL
C:\Inetpub\wwwroot\
http://localhost/
C:\Inetpub\wwwroot\myapp\
http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes
http://localhost/fs/planes
para voc mesmo, siga as instrues para abrir uma conta Adobe.
comportamento de servidor.
3 Na caixa Nome, digite um nome para o comportamento de servidor.
4 (Opcional) Para copiar um comportamento de servidor existente a ser adicionado ao comportamento que voc est
criando, selecione a opo Copiar comportamento de servidor existente e, depois, selecione o comportamento de
servidor no menu pop-up Comportamento a ser copiado. Clique em OK.
A caixa de dilogo Criador de comportamentos de servidor exibida.
5 Para adicionar um novo bloco de cdigo, clique no boto de adio (+), digite um nome para o bloco de cdigo e
clique em OK.
O nome que voc digita exibido no Criador de comportamentos de servidor com as tags de script apropriadas visveis
na caixa Bloco de cdigo.
6 Na caixa Bloco de cdigo, digite o cdigo de runtime necessrio implementao do comportamento de servidor.
Nota: Ao digitar o cdigo na caixa Bloco de cdigo, voc s pode inserir uma nica tag ou bloco de cdigo para cada bloco
de cdigo nomeado (por exemplo, myBehavior_block1, myBehavior_block2, myBehavior_blockn etc.). Caso voc
tenha que inserir vrias tags ou blocos de cdigo, crie um bloco de cdigo individual para cada uma. Voc tambm pode
copiar e colar cdigo de outras pginas.
7 Coloque o ponto de insero no bloco de cdigo em que voc deseja inserir o parmetro ou selecione uma
O parmetro inserido no bloco de cdigo no local em que voc colocou o ponto de insero antes da definio do
parmetro. Caso voc selecione uma seqncia de caracteres, todas as instncias da seqncia de caracteres selecionada
so substitudas por um marcador de parmetro (por exemplo, @@Sesso@@).
10 Selecione uma opo no menu pop-up Inserir cdigo especificando onde incorporar os blocos de cdigo.
11 (Opcional) Para especificar informaes adicionais sobre o comportamento de servidor, clique no boto Avanado.
12 Para criar mais blocos de cdigo, repita as etapas de 5 a 11.
13 Caso o comportamento de servidor exija que os parmetros sejam fornecidos a ele, voc deve criar uma caixa de
dilogo que aceite parmetros da pessoa que aplica o comportamento. Consulte o link abaixo.
14 Depois de realizar as etapas obrigatrias criao do comportamento de servidor, clique em OK.
Opes avanadas
Depois que voc especifica o cdigo-fonte e insere o local de cada bloco de cdigo, o comportamento de servidor est
totalmente definido. Na maioria dos casos, voc no precisa especificar nenhuma informao adicional.
Caso seja um usurio avanado, voc pode definir uma das seguintes opes:
Identificador Especifica se o bloco de cdigo deve ser tratado como um identificador.
Por padro, todos os blocos de cdigo so identificadores. Caso o Dreamweaver localize um bloco de cdigo
identificador em qualquer lugar de um documento, ele lista o comportamento no painel Comportamentos de servidor.
Use a opo Identificador para especificar se o bloco de cdigo deve ser tratado como um identificador.
Pelo menos um dos blocos de cdigo do comportamento de servidor deve ser identificador. Um bloco de cdigo no
deve ser um identificador caso uma das seguintes condies se aplique: o mesmo bloco de cdigo usado por outro
comportamento de servidor, ou o bloco to simples que pode ocorrer naturalmente na pgina.
Ttulo do comportamento de servidor Especifica o ttulo do comportamento no painel Comportamentos de servidor.
Quando o designer da pgina clicar no boto de adio (+) no painel Comportamentos de servidor, o ttulo do novo
comportamento de servidor ser exibido no menu pop-up. Quando um designer aplica uma ocorrncia de um
comportamento de servidor a um documento, o comportamento exibido na lista de comportamentos aplicados no
painel Comportamentos de servidor. Use a caixa Ttulo do comportamento de servidor para especificar o contedo do
menu pop-up de adio (+) e a lista dos comportamentos aplicados.
O valor inicial da caixa o nome que voc forneceu na caixa de dilogo Novo comportamento de servidor. medida
que os parmetros so definidos, o nome atualizado automaticamente para que os parmetros sejam exibidos entre
parnteses depois do nome do comportamento de servidor.
Set Session Variable (@@Name@@, @@Value@@)
Caso o usurio aceite o valor padro, tudo o que estiver antes dos parnteses exibido no menu pop-up de adio (+)
(por exemplo, Definir varivel de sesso). O nome mais os parmetros sero exibidos na lista dos comportamentos
aplicados por exemplo, Definir varivel de sesso ("abcd", "5").
Bloco de cdigo a ser selecionado Especifica o bloco de cdigo selecionado quando o usurio seleciona o
Voc pode criar os blocos de cdigo diretamente no Criador de comportamentos de servidor ou copiar e colar o cdigo
de outras fontes. Cada bloco de cdigo que voc cria no Criador de comportamentos de servidor deve ser um bloco
com tag ou script nico. Caso voc insira vrios blocos de tag, divida-os em blocos de cdigo separados.
Condies em blocos de cdigo
O Dreamweaver permite que voc desenvolva blocos de cdigo que incorporam instrues de controle executadas
periodicamente. O Criador de comportamentos de servidor usa as instrues if, elseif e else, podendo conter
parmetros do comportamento de servidor. Isso permite inserir blocos de texto alternativos com base nos valores das
relaes OR entre os parmetros de comportamento do servidor.
O seguinte exemplo mostra as instrues if, elseif e else. Os colchetes ([ ]) indicam o cdigo opcional e o asterisco
(*), zero ou mais instncias. Para executar uma parte de um bloco de cdigo ou todo o bloco somente se uma ou mais
determinadas condies se aplicarem, use a seguinte sintaxe:
<@ if (expression1) @>conditional text1[<@ elseif (expression2) @>conditional text2]*[<@ else
@>
conditional text3]<@ endif @>
As expresses de condio podem ser qualquer expresso JavaScript que possa ser avaliada com o uso da funo
eval() do JavaScript, podendo incluir um parmetro do comportamento de servidor marcado por @@s. (Os @@s
diferenciam o parmetro das variveis e palavras-chave do JavaScript.)
Uso efetivo de expresses condicionais
Durante o uso das diretivas if, else e elseif dentro da tag XML insertText, o texto participante pr-processado
para resolver as diretivas if e determinar o texto a ser includo no resultado. As diretivas if e elseif usam a expresso
como um argumento. A expresso de condio igual s expresses de condio JavaScript, tambm podendo conter
parmetros do comportamento de servidor. Diretivas como essa permitem optar por blocos de cdigo alternativos
baseados nos valores ou nas relaes entre parmetros do comportamento de servidor.
Por exemplo, o seguinte cdigo do JSP acompanha um comportamento de servidor do Dreamweaver que usa um bloco
de cdigo convencional:
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();<@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
O bloco de cdigo convencional comea com <@ if (@@callableName@@ != '') @> e termina com <@ endif @>.
De acordo com o cdigo, caso o usurio digite um valor para o parmetro @@callableName@@ na caixa de dilogo
Parmetro do comportamento de servidor em outras palavras, caso o valor de parmetro @@callableName@@ no
seja nulo ou (@@callableName@@ != '') , o bloco de cdigo condicional substitudo pelas seguintes instrues:
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
No incio do arquivo
Posio personalizada
Posio personalizada
Selecione uma tag no menu pop-up Tag e, em seguida, escolha uma das opes de
posicionamento.
Relativo seleo
Antes da seleo
Aps a seleo
Substituir a seleo
Envolver a seleo
Para especificar uma posio personalizada, voc deve atribuir um peso ao bloco de cdigo. Use a opo Posio
personalizada somente quando voc quiser inserir mais de um bloco de cdigo em uma determinada ordem. Por
exemplo, para inserir uma srie ordenada dos trs blocos de cdigo aps os blocos de cdigo que abrem os conjuntos
de registros, voc inseriria um peso 60 para o primeiro bloco, 65 para o segundo e 70 para o terceiro.
Por padro, o Dreamweaver atribui um peso 50 a todos os blocos de cdigo que abrem o conjunto de registros
inseridos acima da tag <html>. Caso o peso de dois ou mais blocos seja o mesmo, o Dreamweaver define
aleatoriamente a ordem entre os blocos.
Caso voc insira uma tag, no inclua os sinais de menor e maior (<>).
3 Especifique um local relativo tag escolhendo uma opo no menu pop-up Posio relativa.
Posicionar um bloco de cdigo relativo a uma tag selecionada pelo designer da pgina
1 No menu pop-up Inserir cdigo, selecione Relativo seleo.
2 Especifique um local relativo seleo escolhendo uma opo no menu pop-up Posio relativa.
Voc pode inserir o cdigo de bloco logo antes ou logo depois da seleo. Voc tambm pode substituir a seleo pelo
bloco de cdigo ou envolv-lo em torno da seleo.
Para envolver o bloco de cdigo em torno de uma seleo, a seleo deve consistir em tags de abertura e de fechamento
sem nada entre elas como a seguinte:
<CFIF Day="Monday"></CFIF>
Insira a parte da tag de abertura do bloco de cdigo antes da tag de abertura da seleo e a parte da tag de fechamento
do bloco de cdigo depois da tag de fechamento da seleo.
Ao criar comportamentos de servidor, voc pode usar construtos de loop para repetir um bloco de cdigo um nmero
especificado de vezes.
A diretiva de loop aceita uma lista separada por vrgulas das matrizes de parmetros como argumentos. Nesse caso, os
argumentos da matriz de parmetros permitem ao usurio fornecer vrios valores para um nico parmetro. O texto
repetitivo duplicado n vezes, em que n o comprimento dos argumentos da matriz de parmetros. Caso seja
especificado mais de um argumento de matriz de parmetros, todas as matrizes devem ter o mesmo comprimento. Na
ensima avaliao do loop, o ensimo elemento da matriz de parmetros substitui as instncias do parmetro associado
no bloco de cdigos.
Ao criar uma caixa de dilogo para o comportamento de servidor, voc pode adicionar um controle caixa de dilogo
que permite ao designer da pgina criar matrizes de parmetros. O Dreamweaver inclui um controle de matriz simples
que voc pode usar para criar caixas de dilogo. Esse controle, chamado Lista separada por vrgula do campo de texto,
est disponvel no Criador de comportamentos de servidor. Para criar elementos de interface de usurio mais
complexos, consulte a documentao da API para criar uma caixa de dilogo com um controle de criao de matrizes
(um controle de grade, por exemplo).
Voc pode aninhar qualquer nmero de condicionais ou diretivas de loop em uma diretiva condicional. Por exemplo,
voc pode especificar se uma expresso verdadeira para executar um loop.
O seguinte exemplo mostra como blocos de cdigo repetitivos podem ser usados para criar comportamentos de
servidor (o exemplo um comportamento do ColdFusion usado para acessar um procedimento armazenado):
<CFSTOREDPROC procedure="AddNewBook"
datasource=#MM_connection_DSN#
username=#MM_connection_USERNAME#
password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Neste exemplo, a tag CFSTOREDPROC pode incluir zero ou mais tags CFPROCPARAM. No entanto, sem o suporte diretiva
de loop, no h como incluir as tags CFPROCPARAM na tag CFSTOREDPROC inserida. Se isso fosse criado como um
comportamento de servidor sem o uso da diretiva de loop, voc precisaria dividir esse exemplo em dois participantes:
uma tag principal CFSTOREDPROC e uma tag CFPROCPARAM cujo tipo de participante mltiplo.
Usando a diretiva de loop, voc pode escrever o mesmo procedimento da seguinte forma:
<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
<CFPROCPARAM type="IN"
dbvarname="@@paramName@@"
value="@@value@@"
cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
Nota: As matrizes de parmetros no podem ser usadas fora de um loop, exceto como parte de uma expresso de diretiva
condicional.
Uso das variveis _length e _index da diretiva de loop
A diretiva de loop inclui duas variveis incorporadas que voc pode usar em condies if incorporadas. As variveis
so: _length e _index. A varivel _length avalia o comprimento das matrizes processadas pela diretiva de loop, ao
passo que a varivel _index avalia o ndice atual da diretiva de loop. Para garantir que as variveis s sejam
reconhecidas como diretivas, e no como parmetros reais a serem passados para o loop, no coloque nenhuma das
variveis entre @@s.
Um exemplo de uso das variveis incorporadas aplic-las ao atributo import da diretiva de pgina. O atributo
import exige a separao dos pacotes por vrgulas. Caso a diretiva loop se estenda por todo o atributo import, voc
obtm apenas o nome de atributo import= na primeira iterao do loop isso inclui as aspas de fechamento (") e
no uma vrgula na ltima iterao do loop. Usando a varivel incorporada, voc pode expressar isso da seguinte
forma:
<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>
Para exigir que o designer da pgina fornea o valor de Form_Object_Name, coloque a seqncia de caracteres entre
marcadores de parmetro (@@):
<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>
Voc tambm pode realar a seqncia de caracteres e clicar no boto Inserir o parmetro no bloco de cdigo. Digite
o nome de um parmetro e clique em OK. O Dreamweaver substitui todas as instncias da seqncia de caracteres
realada pelo nome de parmetro especificado entre marcadores de parmetro.
O Dreamweaver usa as seqncias de caracteres que voc coloca entre marcadores de parmetro para identificar os
controles na caixa de dilogo gerada (consulte o seguinte procedimento). No exemplo anterior, o Dreamweaver cria
uma caixa de dilogo com o seguinte rtulo:
Nota: Os nomes de parmetro no cdigo do comportamento de servidor no podem ter espaos. Por isso, os rtulos da
caixa de dilogo no podem ter nenhum espao. Caso queira incluir espaos no rtulo, voc pode editar o arquivo HTML
gerado.
Criar uma caixa de dilogo para o comportamento de servidor a fim de solicitar o valor de
parmetro
1 No Criador de comportamentos de servidor, clique em Avanar.
2 Para alterar a ordem de exibio dos controles da caixa de dilogo, selecione um parmetro e clique nas setas para
como.
4 Clique em OK.
O Dreamweaver gera uma caixa de dilogo com um controle identificado para cada parmetro fornecido por designer
que voc define.
Uma caixa de dilogo exibida listando todos os parmetros fornecidos pelo designer que voc definiu no cdigo.
4 Para alterar a ordem de exibio dos controles da caixa de dilogo, selecione um parmetro e clique nas setas para
como.
6 Clique em OK.
selecione Novo comportamento de servidor e crie uma cpia do comportamento de servidor antigo.
O Dreamweaver gera novamente o comportamento de servidor sem uma caixa de dilogo. O novo comportamento de
servidor exibido no menu pop-up de adio (+) do painel Comportamentos de servidor.
5 Caso o cdigo modificado contenha parmetros fornecidos pelo designer, clique em Avanar.
O Dreamweaver pergunta se voc deseja criar uma nova caixa de dilogo substituindo a anterior. Faa as alteraes e
clique em OK.
O Dreamweaver salva todas as alteraes no arquivo EDML do comportamento de servidor.
Diretrizes de codificao
Em geral, o cdigo do comportamento de servidor deve ser compacto e eficiente. Os desenvolvedores de aplicativo da
Web so muito sensveis ao cdigo adicionado s suas pginas. Siga as prticas de codificao geralmente aceitas para
linguagens do tipo documento (ColdFusion, JavaScript, VBScript ou PHP). Ao escrever comentrios, considere os
pblicos tcnicos diferentes que talvez precisem compreender o cdigo como, por exemplo, os designers da Web e de
interao ou outros desenvolvedores de aplicativo da Web. Inclua comentrios que descrevam com preciso o
propsito do cdigo e todas as instrues especiais para inclu-lo em uma pgina.
No se esquea das seguintes diretrizes de codificao quando voc criar comportamentos de servidor:
Verificao de erros Um requisito importante. O cdigo do comportamento de servidor deve lidar tranqilamente
com casos de erro. Tente prever todas as possibilidades. Por exemplo, e se uma solicitao de parmetro falha? E se
nenhum registro retornar de uma consulta?
Nomes exclusivos Ajude a garantir que o cdigo seja claramente identificvel e evite diferenas de nome em relao
ao cdigo existente. Por exemplo, caso a pgina contenha uma funo chamada hideLayer() e uma varivel global
chamada ERROR_STRING e o comportamento de servidor insira um cdigo que tambm usa esses nomes, o
comportamento de servidor pode entrar em conflito com o cdigo existente.
Prefixos de cdigo Eles permitem que voc identifique funes de runtime prprias e variveis globais em uma
pgina. Uma conveno usar as iniciais. Nunca use o prefixo MM_ porque ele est reservado apenas para uso do
Dreamweaver. O Dreamweaver precede todas as funes e variveis globais com o prefixo MM_ para impedir que elas
entrem em conflito com qualquer cdigo que voc escreva.
var MM_ERROR_STRING = "...";
function MM_hideLayer() {
Evite blocos de cdigo semelhantes para que o cdigo que voc escreve no seja muito semelhante ao cdigo em
outros blocos. Caso um bloco de cdigo seja muito semelhante a outro bloco de cdigo na pgina, o painel
Comportamentos de servidor pode identificar por engano o primeiro bloco de cdigo como uma ocorrncia do
segundo (ou o inverso). Uma soluo simples adicionar um comentrio a um bloco de cdigo para torn-lo
exclusivo.
Aplique o comportamento do painel Comportamentos de servidor. Caso haja uma caixa de dilogo, insira dados
vlidos nos campos e clique em OK. Verifique se no ocorre nenhum erro quando o comportamento aplicado.
Verifique se o cdigo de runtime do comportamento de servidor exibido no Inspetor de cdigo.
Aplique o comportamento de servidor novamente e digite os dados invlidos em todos os campos da caixa de
dilogo. Tente deixar o campo em branco usando nmeros grandes ou negativos, caracteres invlidos (como, por
exemplo, /, ?, :, * etc.) e letras em campos numricos. Voc pode escrever rotinas de validao de formulrio para
lidar com dados invlidos (rotinas de validao envolvem codificao manual, o que vai alm do escopo deste livro).
Depois de aplicar o comportamento de servidor pgina, verifique o seguinte:
Verifique o painel Comportamentos de servidor para ter certeza de que o nome do comportamento de servidor
exibido na lista de comportamentos adicionados pgina.
Se aplicvel, verifique se os cones de script do servidor aparecem na pgina. Os cones genricos de script do
servidor so escudos dourados. Para ver os cones, ative Elementos invisveis (Exibir > Auxlios visuais > Elementos
invisveis).
Na Visualizao de cdigo (Exibir > Cdigo), verifique se nenhum cdigo invlido foi gerado.
Alm disso, caso o comportamento de servidor insira cdigo no documento que estabelece uma conexo com um
banco de dados, crie um banco de dados de teste e teste o cdigo inserido no documento. Verifique a conexo
definindo as consultas que produzem conjuntos de dados diferentes e tamanhos de conjuntos de dados diferentes.
Por fim, carregue a pgina no servidor e a abra em um navegador. Veja o cdigo-fonte HTML da pgina e verifique
se nenhum HTML invlido foi gerado pelos scripts do servidor.
Pgina mestre
606
Pgina detalhada
Voc pode criar pginas mestre e detalhadas inserindo um objeto de dados para criar uma pgina mestre e uma pgina
detalhada em uma operao ou usando comportamentos de servidor para cri-las de maneira mais personalizada. Ao
usar comportamentos de servidor para criar pginas mestre e detalhadas, voc cria inicialmente uma pgina mestre
para listar os registros e, em seguida, adiciona links da lista s pginas detalhadas.
No painel Ligaes (Janelas > Ligaes), clique no boto de adio (+), selecione Conjunto de registros e escolha as
opes. Caso voc queira escrever sua prpria instruo SQL, clique em Avanado.
Verifique se o conjunto de registros contm todas as colunas da tabela necessrias criao da pgina mestre. O
conjunto de registros tambm deve incluir a coluna da tabela que contm a chave exclusiva de cada registro, ou seja, a
coluna ID do registro. No seguinte exemplo, a coluna Cdigo contm a chave exclusiva de todos os registros.
Normalmente, o conjunto de registros da pgina mestre extrai algumas colunas da tabela de um banco de dados, ao
passo que o conjunto de registros da pgina detalhada extrai mais colunas da mesma tabela para fornecer detalhes
adicionais.
O conjunto de registros pode ser definido pelo usurio durante o runtime. Para obter mais informaes, consulte
Criao de pginas de pesquisa e de resultados na pgina 613.
3 Insira uma tabela dinmica para exibir os registros.
Coloque o ponto de insero onde voc deseja que a tabela dinmica seja exibida na pgina. Selecione Inserir > Objetos
de dados > Dados dinmicos > Tabela dinmica, defina as opes e clique em OK.
Caso no queira mostrar as IDs de registro aos usurios, voc pode excluir a coluna da tabela dinmica. Clique em
qualquer lugar da pgina a fim de mover o foco para a pgina. Mova o cursor prximo parte superior da coluna na
tabela dinmica at que as clulas da coluna estejam contornadas em vermelho e, em seguida, marque a coluna.
Pressione Excluir para excluir a coluna da tabela.
Na tabela dinmica, o texto selecionado exibido com o link. Quando a pgina executada no servidor, o link
aplicado ao texto em todas as linhas da tabela.
4 Na pgina mestre, selecione o link na tabela dinmica.
5 (ColdFusion) Na caixa Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=#recordsetName.fieldName#
O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID
o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque
voc o usar na pgina detalhada posteriormente.
A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do
ColdFusion que retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da
tabela dinmica. Na expresso do ColdFusion, substitua recordsetName pelo nome do seu conjunto de registros e
fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior
parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em
cdigos de local exclusivos.
locationDetail.cfm?recordID=#rsLocations.CODE#
Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas
correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo
CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
locationDetail.cfm?recordID=CBR
6 (PHP) No campo Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID
o nome do parmetro do URL (voc pode usar o nome que quiser). Anote o nome do parmetro do URL porque voc
o usar na pgina detalhada posteriormente.
A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do PHP que
retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica.
Na expresso do PHP, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do
campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo
consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas
correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo
CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
locationDetail.php?recordID=CBR
7 Salve a pgina.
coluna nos menus pop-up Conjunto de registros e Coluna. Normalmente, o valor exclusivo do registro como, por
exemplo, a ID de chave exclusiva.
5 Se desejado, passe os parmetros de pgina existentes para a pgina detalhada selecionando as opes Parmetros
Um link especial contorna o texto selecionado. Quando o usurio clica no link, o comportamento de servidor Ir para
pgina detalhada passa um parmetro do URL que contm a ID do registro para a pgina detalhada. Por exemplo, caso
o parmetro do URL se chame id e a pgina detalhada, customerdetail.asp, o URL permanece semelhante seguinte
quando o usurio clica no link:
http://www.mysite.com/customerdetail.asp?id=43
A primeira parte do URL, http://www.mysite.com/customerdetail.asp, abre a pgina detalhada. J a segunda parte,
?id=43, o parmetro do URL. Ela informa pgina detalhada qual registro localizar e exibir. O termo id o nome do
parmetro do URL e 43 seu valor. Nesse exemplo, o parmetro do URL contm o nmero da ID do registro, 43.
O conjunto pode ser idntico ou no ao conjunto de registros da pgina mestre. Normalmente, o conjunto de registros
de uma pgina detalhada tem mais colunas para poder exibir mais detalhes.
Caso os conjuntos de registros sejam diferentes, verifique se o conjunto da pgina detalhada contenha pelo menos uma
coluna em comum com o conjunto de registros da pgina mestre. A coluna em comum costuma ser a da ID do registro,
mas tambm pode ser o campo conjunto das tabelas relacionadas.
Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas
desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
5 Complete a seo Filtro para localizar e exibir o registro especificado no parmetro do URL passado pela pgina
mestre:
No primeiro menu pop-up da rea Filtro, selecione a coluna do conjunto de registros que contm valores
correspondentes ao valor do parmetro do URL passado pela pgina mestre. Por exemplo, caso o parmetro do
URL contenha o nmero de uma ID de registro, selecione a coluna que contm os nmeros da ID de registro. No
exemplo abordado na seo anterior, a coluna do conjunto de registros chamada CODE contm os valores
correspondentes ao valor do parmetro do URL passado pela pgina mestre.
No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele j deve estar selecionado).
No terceiro menu pop-up, selecione Parmetro do URL. A pgina mestre usa um parmetro do URL para passar
informaes pgina detalhada.
Na quarta caixa, digite o nome do parmetro do URL passado pela pgina mestre.
6 Clique em OK. O conjunto de registros exibido no painel Ligaes.
7 Ligue as colunas do conjunto de registros pgina detalhada selecionando as colunas no painel Ligaes (Janela >
A ID de um registro contida no parmetro de um URL e passada por outra pgina para a pgina atual. Voc pode
criar parmetros de URL na outra pgina com hiperlinks em HTML ou formulrio em HTML. Para obter mais
informaes, consulte Coleta de informaes dos usurios na pgina 656.
Um conjunto de registros definido para a pgina atual. O comportamento de servidor extrai os detalhes do registro
do conjunto. Para obter instrues, consulte Definir um conjunto de registros sem escrever em SQL na
pgina 563 ou Definir um conjunto de registros avanado escrevendo em SQL na pgina 565.
Colunas do conjunto de registros ligado pgina. O registro especfico deve ser exibido na pgina. Para obter mais
informaes, consulte Tornar texto dinmico na pgina 578.
2 Adicione o comportamento de servidor para localizar o registro especificado pelo parmetro do URL clicando no
boto de adio (+) do painel Comportamentos de servidor (Janela > Comportamentos de servidor) e selecionando
Paginao do conjunto de registros > Mover para registro especfico.
3 No menu pop-up Mover para registro em, selecione o conjunto de registros definido para a pgina.
4 No menu pop-up Coluna Onde, selecione a coluna que contm o valor passado pela outra pgina.
Por exemplo, caso a outra pgina passe o nmero de uma ID de registro, selecione a coluna que contm os nmeros
da ID de registro.
5 Na caixa Corresponde ao parmetro de URL, digite o nome do parmetro do URL passado pela outra pgina.
Por exemplo, caso o URL usado pela outra pgina para abrir a pgina detalhada seja id=43, digiteid na caixa
Corresponde ao parmetro de URL.
6 Clique em OK.
Na prxima vez em que a pgina for solicitada por um navegador, o comportamento de servidor ir ler a ID do registro
no parmetro do URL passado pela outra pgina e se mover para o registro especificado do conjunto.
Verifique se o conjunto de registros contm no apenas todas as colunas necessrias pgina mestre, mas tambm
todas as colunas necessrias pgina detalhada. Normalmente, o conjunto de registros da pgina mestre extrai
algumas colunas da tabela de um banco de dados, ao passo que o conjunto de registros da pgina detalhada extrai mais
colunas da mesma tabela para fornecer detalhes adicionais.
3 Abra a pgina mestre na Visualizao de design e selecione Inserir > Objetos de dados > Conjunto de pginas
mestre/detalhadas.
4 No menu pop-up Recordset, verifique se o conjunto que contm os registros a serem exibidos na pgina mestre est
escolhido.
5 Na rea Campos de pgina mestre, selecione as colunas do conjunto de registros a serem exibidas na pgina mestre.
Por padro, todas as colunas do conjunto de registros so selecionadas. Caso o conjunto de registros contenha uma
coluna de chave exclusiva como, por exemplo, recordID, selecione-a e clique no boto de subtrao (-) para que ela
no seja exibida na pgina.
6 Para alterar a ordem na qual as colunas so exibidas na pgina mestre, selecione uma coluna na lista e clique na seta
identificam os registros.
Normalmente, a coluna escolhida se refere ao nmero da ID do registro. Esse valor passado para a pgina detalhada
para que ela possa identificar o registro escolhido pelo usurio.
Nota: Essa opo selecionada por padro; ela no exibida para todos os modelos de servidor.
10 Especifique o nmero de registros a serem exibidos na pgina mestre.
11 Na caixa Nome de pgina detalhada, clique em Procurar e localize o arquivo de pgina detalhada criado por voc
Por padro, todas as colunas do conjunto de registros da pgina mestre so selecionadas. Caso o conjunto de registros
contenha uma coluna de chave exclusiva como, por exemplo, recordID, selecione-a e clique no boto de subtrao () para que ela no seja exibida na pgina detalhada.
13 Para alterar a ordem na qual as colunas so exibidas na pgina detalhada, selecione uma coluna na lista e clique na
O objeto de dados cria uma pgina detalhada (caso voc ainda no tenha criado uma) e adiciona contedo dinmico
e comportamentos de servidor s pginas mestre e detalhadas.
15 Personalize o layout das pginas mestre e detalhadas de acordo com suas necessidades.
Voc pode personalizar integralmente o layout de todas as pginas usando as ferramentas de design doDreamweaver.
Voc tambm pode editar os comportamentos de servidor clicando duas vezes neles no painel Comportamentos de
servidor.
Depois de criar as pginas mestre e detalhadas usando o objeto de dados, use o painel Comportamentos de servidor
(Janela > Comportamentos de servidor) para modificar os vrios blocos de criao inseridos pelo objeto de dados nas
pginas.
criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais >
Elementos invisveis) para ver os limites do formulrio, representados por linhas finas em vermelho.
2 Adicione objetos de formulrio para que os usurios insiram os parmetros de pesquisa selecionando Formulrio
no menu Inserir.
Entre os objetos de formulrio esto campos de texto, menus, opes e botes de opo. Voc pode adicionar quantos
objetos de formulrio quiser para ajudar os usurios a refinar suas pesquisas. No entanto, lembre-se de que quanto
maior for o nmero de parmetros na pgina de pesquisa, mais complexa ser a instruo SQL.
3 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).
4 (Opcional) Altere o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela >
5 Escolha o formulrio selecionando a tag <form> no seletor de tags na parte inferior da janela Documento, como
6 Na caixa Ao do Inspetor de propriedades do formulrio, digite o nome de arquivo da pgina de resultados que
para o servidor:
OBTER envia os dados do formulrio anexando-os ao URL como uma seqncia de caracteres de consulta. Como
os URLs esto limitados a 8.192 caracteres, no use o mtodo OBTER com formulrios longos.
Caso voc ainda no tenha uma pgina de resultados, crie uma pgina dinmica em branco (Arquivo > Novo > Pgina
em branco).
2 Crie um conjunto de registros abrindo o painel Ligaes (Janela > Ligaes), clicando no boto de adio (+) e
Mas caso seja exibida a caixa de dilogo avanada, alterne para a caixa de dilogo simples clicando no boto Simples.
4 Digite um nome para o conjunto de registros e selecione uma conexo.
A conexo deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
5 No menu pop-up Tabela, selecione a tabela a ser procurada no banco de dados.
Nota: Em uma pesquisa com parmetro nico, voc pode procurar registros em apenas uma tabela. Para pesquisar mais de
uma tabela simultaneamente, voc deve usar a caixa de dilogo avanada Conjunto de registros e definir uma consulta SQL.
6 Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as
colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
Voc deve incluir apenas as colunas que contenham as informaes a serem exibidas na pgina de resultados.
Saia da caixa de dilogo Conjunto de registros por enquanto. Voc a usar para recuperar os parmetros enviados pela
pgina de pesquisa e criar um filtro do conjunto de registros a fim de excluir os registros que no atendam aos
parmetros.
correspondncia.
Por exemplo, caso o valor enviado pela pgina de pesquisa seja o nome de uma cidade, selecione a coluna da tabela que
contm nomes de cidades.
2 No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele deve ser o padro).
3 No terceiro menu pop-up, selecione Varivel de formulrio caso o formulrio na pgina de pesquisa use o mtodo
POSTAR ou Parmetro de URL caso ele use o mtodo OBTER.
A pgina de pesquisa usa uma varivel de formulrio ou um parmetro de URL a fim de passar informaes para a
pgina de resultados.
4 Na quarta caixa, digite o nome do objeto de formulrio que aceita o parmetro de pesquisa na pgina de pesquisa.
O nome do objeto duplicado como o nome da varivel de formulrio ou do parmetro de URL. Voc pode obter o
nome alternando para a pgina de pesquisa, clicando no objeto de formulrio no formulrio para selecion-lo e
verificando o nome do objeto no Inspetor de propriedades.
Por exemplo, suponhamos que voc queira criar um conjunto de registros que inclua apenas viagens de aventura para
um pas especfico. Vamos pressupor que haja uma coluna na tabela chamada TRIPLOCATION. Alm disso,
suponhamos que o formulrio em HTML na pgina de pesquisa use o mtodo OBTER e contenha um objeto de menu
chamado Location que exibe uma lista dos pases. O seguinte exemplo mostra como a seo Filtro deve ficar:
5 (Opcional) Clique em Testar, digite um valor de teste e clique em OK para se conectar ao banco de dados e criar
Um script do servidor inserido na pgina que verifica todos os registros na tabela do banco de dados quando
executada no servidor. Caso o campo especificado em um registro atenda condio de filtragem, o registro includo
em um conjunto de registros. O script cria um conjunto de registros contendo apenas os resultados da pesquisa.
A prxima etapa exibir o conjunto de registros na pgina de resultados. Para obter mais informaes, consulte
Exibir os resultados da pesquisa na pgina 618.
(Janela > Ligaes), clicando no boto de adio (+) e selecionando Conjunto de registros no menu pop-up.
2 Verifique se a caixa de dilogo avanada Conjunto de registros exibida.
A caixa de dilogo avanada tem uma rea de texto para inserir instrues SQL. Mas caso seja exibida a caixa de dilogo
simples, alterne para a caixa de dilogo avanada clicando no boto Avanado.
3 Digite um nome para o conjunto de registros e selecione uma conexo.
A conexo deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
4 Insira uma instruo Select na rea de texto SQL.
Verifique se a instruo inclui uma clusula WHERE com variveis que mantm os parmetros de pesquisa. No
seguinte exemplo, as variveis so chamadas varLastName e varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE
WHERE LASTNAME LIKE 'varLastName'
AND DEPARTMENT LIKE 'varDept'
Para reduzir o trabalho de digitao, voc pode usar os trs itens de banco de dados na parte inferior da caixa de dilogo
avanada Conjunto de registros. Para obter instrues, consulte Definir um conjunto de registros avanado
escrevendo em SQL na pgina 565.
Para obter ajuda sobre a sintaxe SQL, consulte o SQL primer em www.adobe.com/go/learn_dw_sqlprimer_br.
5 Atribua s variveis SQL os valores dos parmetros de pesquisa clicando no boto de adio (+) na rea Variveis
e digitando o nome da varivel, o valor padro (o valor que a varivel deve assumir caso no retorne nenhum valor
de runtime) e o valor de runtime (normalmente um objeto de servidor que mantm um valor enviado por um
navegador como, por exemplo, uma varivel de solicitao).
No seguinte exemplo em ASP, o formulrio em HTML na pgina de pesquisa usa o mtodo OBTER e contm um campo
de texto chamado LastName e outro chamado Department:
No ColdFusion, os valores de runtime seriam #LastName# e #Department#. No PHP, os valores de runtime devem
ser $_REQUEST["LastName"] e $_REQUEST["Department"].
6 (Opcional) Clique em Testar para criar uma ocorrncia do conjunto de registros usando os valores de varivel
padro.
Os valores padro simulam os valores que retornariam da pgina de pesquisa. Clique em OK para fechar o conjunto
de registros de teste.
7 Caso voc esteja satisfeito com o conjunto de registros, clique em OK.
Para obter mais informaes sobre mtodos de exibio do contedo dinmico em uma pgina que no seja o de
exibio dos resultados em uma tabela dinmica, consulte Exibio de registros de banco de dados na pgina 583.
1 Coloque o ponto de insero onde voc deseja que a tabela dinmica seja exibida na pgina de resultados e selecione
Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica.
2 Complete a caixa de dilogo Tabela dinmica, selecionando o conjunto de registros definido por voc para manter
os resultados de pesquisa.
3 Clique em OK. Uma tabela dinmica que exibe resultados de pesquisa inserida na pgina de resultados.
Caso a pgina atual envie dados para ela prpria, digite o nome do arquivo da pgina atual.
2 Caso os parmetros que voc deseja passar tenham sido recebidos diretamente de um formulrio em HTML usando
o mtodo OBTER ou estejam listados no URL da pgina, selecione a opo Parmetros de URL.
3 Caso os parmetros que voc deseja passar tenham sido recebidos diretamente de um formulrio em HTML usando
Quando o novo link clicado, a pgina passa os parmetros para a pgina relacionada usando uma seqncia de
caracteres de consulta.
de design do Dreamweaver.
2 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido
formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio.
Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como
enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Inserir registro
define esses atributos para voc.
4 Adicione um objeto de formulrio como, por exemplo, um campo de texto (Inserir > Formulrio > Campo de
texto) para cada coluna na tabela do banco de dados em que deseja inserir os registros.
Os objetos de formulrio se destinam entrada de dados. Os campos de texto so comuns a esse propsito, mas voc
tambm pode usar menus, opes e botes de opo.
Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela >
Propriedades) e inserindo um novo valor na caixa Rtulo.
que ir inserir o registro no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up
Enviar como.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo
booleanos).
Repita o procedimento para todos os objetos no formulrio.
7 Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma
tabela do banco de dados preenchendo o formulrio em HTML e clicando no boto Enviar.
que ir inserir o registro no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up
Enviar como.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo
booleanos).
Repita o procedimento para todos os objetos no formulrio.
7 Clique em OK.
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma
tabela do banco de dados preenchendo o formulrio em HTML e clicando no boto Enviar.
Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de
servidor) e clique duas vezes no comportamento Inserir registro.
que ir inserir o registro no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up
Enviar como.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo
booleanos).
Repita o procedimento para todos os objetos no formulrio.
6 Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma
tabela do banco de dados preenchendo o formulrio em HTML e clicando no boto Enviar.
HTML da pgina para insero e quais colunas da tabela do banco de dados cada objeto de formulrio deve
atualizar.
Por padro, o Dreamweaver cria um objeto de formulrio para cada coluna na tabela do banco de dados. Caso o banco
de dados gere automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulrio
correspondente coluna da chave selecionando-o na lista e clicando no boto de subtrao (-). Isso elimina o risco de
que o usurio do formulrio insira um valor de ID j existente.
Voc tambm pode alterar a ordem dos objetos no formulrio em HTML selecionando um objeto de formulrio na
lista e clicando na seta para cima ou para baixo direita da caixa de dilogo.
7 Especifique como cada campo de entrada de dados deve ser exibido no formulrio em HTML clicando em uma
linha na tabela Campos de formulrio e inserindo as seguintes informaes nas caixas abaixo da tabela:
Na caixa Rtulo, digite um rtulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padro, o
Dreamweaver exibe o nome da coluna da tabela no rtulo.
No menu pop-up Exibir como, selecione um objeto de formulrio para servir como campo de entrada de dados.
Voc pode selecionar Campo de texto, rea de texto, Menu, Caixa de seleo, Grupo de botes de opo e Texto.
Para entradas somente leitura, selecione Texto. Voc tambm pode selecionar Campo de senha, Campo de arquivo
e Campo oculto.
Nota: Os campos ocultos so inseridos ao final do formulrio.
No menu pop-up Enviar como, selecione o formato de dados aceito pela tabela do banco de dados. Por exemplo,
caso a coluna da tabela aceite apenas dados numricos, selecione Numrico.
Defina as propriedades do objeto de formulrio. Voc conta com opes diferentes dependendo do objeto de
formulrio selecionado por voc como o campo de entrada de dados. Para campos de texto, reas de texto e texto,
voc pode inserir um valor inicial. Para menus e grupos de botes de opo, voc abre outra caixa de dilogo a fim
de definir as propriedades. Para opes, selecione a opo Marcado ou Desmarcado.
8 Clique em OK.
Caso seja exibida a caixa de dilogo avanada, clique em Simples. A caixa de dilogo avanada tem uma rea de texto
para inserir instrues SQL; a simples, no.
3 Nomeie o conjunto de registros e especifique onde os dados que voc deseja atualizar esto localizados usando os
6 Clique em OK.
Quando o usurio seleciona um registro na pgina de resultados, a pgina de atualizao gera um conjunto de registros
contendo apenas o registro selecionado.
Um conjunto de registros filtrado para recuperar o registro de uma tabela do banco de dados
formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio.
Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como
enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Atualizar registro
define esses atributos para voc.
5 Adicione um objeto de formulrio como, por exemplo, um campo de texto (Inserir > Formulrio > Campo de
Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela >
Propriedades) e inserindo um novo valor na caixa Rtulo.
que atualizar a coluna no menu pop-up Valor, escolha o tipo de dados do objeto de formulrio no menu pop-up
Enviar como e selecione Chave primria, caso queira identificar essa coluna como a chave primria.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo
booleanos).
Repita o procedimento para todos os objetos no formulrio.
7 (ASP) No menu pop-up Selecionar registro em, especifique o conjunto de registros que contm o registro exibido
no formulrio em HTML. No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave
(normalmente a coluna da ID de registro) para identificar o registro na tabela do banco de dados. Selecione a opo
Numrico, caso o valor seja um nmero. Uma coluna de chave normalmente aceita apenas valores numricos,
embora aceite valores de texto s vezes.
8 Na caixa Ir para, Aps a atualizao ou Se obtiver xito, insira a pgina a ser aberta aps a atualizao do registro
a coluna no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como. O
tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo
booleanos). Repita o procedimento para todos os formulrios.
10 Clique em OK.
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios atualizar registros em
uma tabela do banco de dados modificando as informaes exibidas no formulrio em HTML e clicando no boto
Enviar.
Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de
servidor) e clique duas vezes no comportamento Atualizar registro.
Um conjunto de registros filtrado para recuperar o registro de uma tabela do banco de dados
Um formulrio em HTML para permitir aos usurios modificar os dados do registro
Um comportamento de servidor Atualizar registro para atualizar a tabela do banco de dados
Voc pode adicionar os dois blocos de criao finais de uma pgina de atualizao em uma nica operao usando o
objeto de dados Registrar formulrio de atualizao. O objeto de dados adiciona um formulrio em HTML e um
comportamento de servidor Atualizar registro pgina.
Para que voc possa usar o objeto de dados, o aplicativo da Web deve ser capaz de identificar o registro a ser atualizado
e a pgina de atualizao deve ser capaz de recuper-lo.
Depois que o objeto de dados coloca os blocos de criao na pgina, voc pode usar as ferramentas de design do
Dreamweaver para personalizar o formulrio ao seu gosto, ou o painel Comportamentos de servidor para editar o
comportamento de servidor Atualizar registro.
Nota: A pgina de atualizao pode conter apenas um comportamento de servidor para edio do registro por vez. Por
exemplo, voc no pode adicionar um comportamento de servidor Inserir registro ou Excluir registro pgina de
atualizao.
1 Abra a pgina na Visualizao de design e selecione Inserir > Objetos de dados > Atualizar registro > Assistente
formulrio em HTML.
5 No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de
deve atualizar.
Por padro, o Dreamweaver cria um objeto de formulrio para cada coluna na tabela do banco de dados. Caso o banco
de dados gere automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulrio
correspondente coluna da chave selecionando-o na lista e clicando no boto de subtrao (-). Isso elimina o risco de
que o usurio do formulrio insira um valor de ID j existente.
Voc tambm pode alterar a ordem dos objetos no formulrio em HTML selecionando um objeto de formulrio na
lista e clicando na seta para cima ou para baixo direita da caixa de dilogo.
8 Especifique como cada campo de entrada de dados deve ser exibido no formulrio em HTML clicando em uma
linha na tabela Campos de formulrio e inserindo as seguintes informaes nas caixas abaixo da tabela:
Na caixa Rtulo, digite um rtulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padro, o
Dreamweaver exibe o nome da coluna da tabela no rtulo.
No menu pop-up Exibir como, selecione um objeto de formulrio para servir como campo de entrada de dados.
Voc pode selecionar Campo de texto, rea de texto, Menu, Caixa de seleo, Grupo de botes de opo e Texto.
Para entradas somente leitura, selecione Texto. Voc tambm pode selecionar Campo de senha, Campo de arquivo
e Campo oculto.
Nota: Os campos ocultos so inseridos ao final do formulrio.
No menu pop-up Enviar como, selecione o formato de dados esperado pela tabela do banco de dados. Por exemplo,
caso a coluna da tabela aceite apenas dados numricos, selecione Numrico.
Defina as propriedades do objeto de formulrio. Voc conta com opes diferentes dependendo do objeto de
formulrio selecionado por voc como o campo de entrada de dados. Para campos de texto, reas de texto e texto,
voc pode inserir um valor inicial. Para menus e grupos de botes de opo, voc abre outra caixa de dilogo a fim
de definir as propriedades. Para opes, selecione a opo Marcado ou Desmarcado.
9 Defina as propriedades dos demais objetos de formulrio selecionando outra linha Campos de formulrio e
formulrio.
2 Clique no boto de adio (+) para adicionar um elemento.
3 Digite um rtulo e um valor para o elemento.
4 Na caixa Selecionar valor igual a, caso voc queira que um determinado elemento esteja selecionado quando a
pgina for aberta em um navegador ou quando um registro for exibido no formulrio, insira um valor igual ao do
elemento.
Voc pode inserir um valor esttico ou especificar um valor dinmico clicando no cone do raio e selecionando um
valor dinmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos
valores do elemento.
espao do contedo dinmico. Verifique se voc digitou a seqncia de caracteres na regio com abas repetitivas.
Voc tambm pode inserir uma imagem com uma palavra ou smbolo a ser excludo.
4 Selecione a seqncia de caracteres Delete para aplicar um link a ela.
5 No Inspetor de propriedades, insira a pgina de excluso na caixa Link. Voc pode digitar qualquer nome de
arquivo.
Aps o clique fora da caixa Link, a seqncia de caracteres Delete exibida vinculada tabela. Se ativar Visualizao
dinmica, voc pode ver se o link est aplicado ao mesmo texto em todas as linhas da tabela.
6 Selecione o link Excluir na pgina de resultados.
7 (ColdFusion) Na caixa Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=#recordsetName.fieldName#
O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID
o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque
voc o usar na pgina de excluso posteriormente.
A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do
ColdFusion que retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da
tabela dinmica. Na expresso do ColdFusion, substitua recordsetName pelo nome do seu conjunto de registros e
fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior
parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em
cdigos de local exclusivos:
confirmDelete.cfm?recordID=#rsLocations.CODE#
Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas
correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo
CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
confirmDelete.cfm?recordID=CBR
8 (PHP) No campo Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID
o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque
voc o usar na pgina de excluso posteriormente.
A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do PHP que
retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica.
Na expresso do PHP, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do
campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo
consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos:
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas
correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo
CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
confirmDelete.php?recordID=CBR
9 (ASP) No campo Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>
O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID
o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque
voc o usar na pgina de excluso posteriormente.
A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do ASP que
retorna a ID de registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica. Na
expresso do ASP, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do
campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo
consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos:
confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>
Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas
correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo
CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
confirmDelete.asp?recordID=CBR
10 Salve a pgina.
espao do contedo dinmico. Verifique se voc digitou a seqncia de caracteres na regio com abas repetitivas.
Voc tambm pode inserir uma imagem com uma palavra ou smbolo a ser excludo.
4 Selecione a seqncia de caracteres Delete para aplicar um link a ela.
5 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e
Voc pode inventar o nome que quiser, mas anote o nome, porque depois ser usado na pgina de excluso.
8 Especifique o valor que voc deseja passar para a pgina de excluso selecionando um conjunto de registros e uma
coluna nos menus pop-up Conjunto de registros e Coluna. Normalmente, o valor exclusivo do registro como,
por exemplo, a ID de chave exclusiva.
9 Selecione a opo Parmetros de URL.
10 Clique em OK.
Um link especial contorna o texto selecionado. Quando o usurio clica no link, o comportamento de servidor Ir para
pgina detalhada passa um parmetro do URL que contm a ID do registro para a pgina de excluso especificada. Por
exemplo, caso o parmetro do URL se chame recordID e a pgina de excluso, confirmdelete.asp, quando o usurio
clica no link, o URL permanece semelhante seguinte:
http://www.mysite.com/confirmdelete.asp?recordID=43
A primeira parte do URL, http://www.mysite.com/confirmdelete.asp, abre a pgina de excluso. J a segunda parte,
?recordID=43, o parmetro do URL. Ela informa pgina de excluso qual registro localizar e exibir. O termo
recordID o nome do parmetro do URL e 43 seu valor. Nesse exemplo, o parmetro do URL contm o nmero da
ID do registro, 43.
Criar essa pgina consiste na criao de um formulrio em HTML, na recuperao do registro a ser exibido no
formulrio, na exibio do registro no formulrio e na adio da lgica para exclu-lo do banco de dados. Recuperar e
exibir o registro consiste na definio de um conjunto de registros para manter um nico registro aquele que o
usurio deseja excluir e na ligao das colunas do conjunto ao formulrio.
Nota: A pgina de excluso pode conter apenas um comportamento de servidor para edio do registro por vez. Por
exemplo, voc no pode adicionar um comportamento de servidor Inserir registro ou Atualizar registro pgina de
excluso.
Voc especificou uma pgina de excluso ao criar o link Excluir na seo anterior. Use esse nome ao salvar o arquivo
pela primeira vez (por exemplo, deleteConfirm.cfm).
2 Insira um formulrio em HTML na pgina (Inserir > Formulrio > Formulrio).
3 Adicione um campo de formulrio oculto ao formulrio.
O campo de formulrio oculto obrigatrio para armazenar a ID do registro passada pelo parmetro de URL. Para
adicionar um campo oculto, coloque o ponto de insero no formulrio e selecione Inserir > Formulrio > Campo
oculto.
4 Adicione um boto ao formulrio.
O usurio clicar no boto para confirmar e excluir o registro exibido. Para adicionar um boto, coloque o ponto de
insero no formulrio e selecione Inserir > Formulrio > Boto.
5 Melhore o design da pgina da forma que desejar e a salve.
no menu pop-up.
A caixa de dilogo Conjunto de registros ou Conjunto de dados simples exibida. Caso seja exibida a caixa de dilogo
Conjunto de registros avanada em seu lugar, clique em Simples.
2 Nomeie o conjunto de registros e selecione uma fonte de dados, alm da tabela do banco de dados que contm os
Para exibir apenas alguns dos campos de registro, clique em Selecionado e escolha os campos desejados clicando neles
com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
No se esquea de incluir o campo da ID do registro, mesmo que voc no v exibi-lo.
4 Complete a seo Filtro da seguinte forma para localizar e exibir o registro especificado no parmetro do URL
No primeiro menu pop-up da rea Filtro, selecione a coluna do conjunto de registros que contm valores
correspondentes ao valor do parmetro do URL passado pela pgina com os links Excluir. Por exemplo, caso o
parmetro do URL contenha o nmero de uma ID de registro, selecione a coluna que contm os nmeros da ID de
registro. No exemplo abordado na seo anterior, a coluna do conjunto de registros chamada CODE contm os
valores correspondentes ao valor do parmetro do URL passado pela pgina com os links Excluir.
No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, caso ele ainda no esteja selecionado.
No terceiro menu pop-up, selecione Parmetro do URL. A pgina com os links Excluir usa um parmetro de URL
para passar informaes pgina de excluso.
Na quarta caixa, digite o nome do parmetro do URL passado pela pgina com os links Excluir.
5 Clique em OK.
excluso.
Verifique se voc inseriu esse contedo dinmico somente leitura dentro dos limites do formulrio. Para obter mais
informaes sobre como inserir contedo dinmico em uma pgina, consulte Tornar texto dinmico na pgina 578.
Em seguida, voc deve ligar a coluna da ID do registro ao campo de formulrio oculto.
2 Verifique se os Elementos invisveis esto ativados (Exibir > Auxlios visuais > Elementos invisveis) e, em seguida,
2 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e
O comportamento Excluir registro pesquisa a coluna em busca de uma correspondncia. A coluna deve conter os
mesmos dados da ID de registro da coluna do conjunto de registros ligado ao campo de formulrio oculto na pgina.
Caso a ID de registro seja um numrica, selecione a opo Numrico.
7 (PHP) No menu pop-up Valor de chave primria, selecione a varivel na pgina que contm a ID de registro
Em Aps a excluso, caixa Ir para ou Se obtiver xito, caixa Ir para, especifique uma pgina a ser aberta aps a
excluso do registro da tabela do banco de dados.
Voc pode especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma pgina listando
os registros restantes para que o usurio possa verificar se o registro foi excludo.
5 No menu pop-up Selecionar registro em, especifique o conjunto de registros que contm os registros a serem
excludos.
6 No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de
banco de dados.
Voc pode especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma pgina listando
os registros restantes para que o usurio possa verificar se o registro foi excludo.
9 Clique em OK e salve o trabalho.
resultados.
Se voc souber que o comando ser executado mais de uma vez, ter uma verso compilada exclusiva do objeto pode
tornar as operaes do banco de dados mais eficiente.
Nota: Nem todos os fornecedores de bancos de dados do suporte a comandos preparados. Caso o banco de dados no
d suporte, ele pode retornar um erro quando voc define essa propriedade como true. Ele pode at mesmo ignorar a
solicitao para preparar o comando e definir a propriedade Preparado como false.
Um objeto de comando criado por scripts em uma pgina em ASP, mas o Dreamweaver lhe permite criar objetos de
comando sem escrever uma linha de cdigo ASP.
e selecione Comando.
3 Digite um nome para o comando, selecione uma conexo com o banco de dados que contenha os registros que voc
deseja editar e selecione a operao de edio que o comando deve realizar Inserir, Atualizar ou Excluir.
O Dreamweaver inicia a instruo SQL com base no tipo de operao selecionado por voc. Por exemplo, caso voc
selecione Inserir, a caixa de dilogo semelhante seguinte:
Para obter informaes sobre a escrita de instrues SQL que modificam bancos de dados, consulte um manual de
Transact-SQL.
5 Use a rea Variveis para definir todas as variveis SQL. Fornea o nome e o valor de runtime. A especificao do
Para obter o valor Tamanho, use o painel Bancos de dados do Dreamweaver. Localize o banco de dados no painel
Banco de dados e o expanda. Em seguida, localize a tabela na qual voc est trabalhando e a expanda. A tabela lista os
tamanhos dos campos. Por exemplo, ela pode informar ADDRESS (WChar 50). Nesse exemplo, 50 o tamanho. Voc
tambm pode localizar o tamanho no aplicativo de banco de dados.
Nota: Os tipos de dados Numrico, Booleano e Data/hora sempre usam -1 como tamanho.
Para determinar o valor Tipo, consulte a seguinte tabela:
Tipo no banco de dados
Tipo no Dreamweaver
Tamanho
Duplo
-1
Duplo
-1
DBTimeStamp
-1
LongVarChar
VarWChar
memo (MS Access), ntext (MS SQL Server) ou campos que do suporte
a grandes quantidades de texto
LongVarWChar
1073741823
Para obter mais informaes sobre o tipo e o tamanho das variveis SQL, consulte www.adobe.com/go/4e6b330a_br.
6 Feche a caixa de dilogo.
O Dreamweaver insere o cdigo ASP na pgina que, quando executada no servidor, cria um comando que insere,
atualiza ou exclui registros no banco de dados.
Por padro, o cdigo define a propriedade Preparado do objeto Comando como true, o que faz o servidor de
aplicativo reutilizar uma verso compilada exclusiva do objeto sempre que o comando executado. Para mudar essa
configurao, alterne para a Visualizao de cdigo e altere a propriedade Preparado para false.
7 Crie uma pgina com um formulrio em HTML para que os usurios possam inserir dados de registro. No
formulrio em HTML, inclua trs campos de texto (txtCity, txtAddress e txtPhone) e um boto de envio. O
formulrio usa o mtodo OBTER e envia os valores do campo de texto para a pgina que contm o comando.
Um procedimento armazenado reutilizvel no sentido de que voc pode reutilizar uma verso compilada exclusiva
do procedimento para executar uma operao de banco de dados vrias vezes. Se voc souber que uma tarefa de banco
de dados ser executada mais de uma vez ou que a mesma tarefa ser executada por aplicativos diferentes usar um
procedimento armazenado na execuo dessa tarefa pode tornar as operaes do banco de dados mais eficientes.
Nota: Os bancos de dados MySQL e Microsoft Access no do suporte a procedimentos armazenados.
armazenado.
4 Digite o nome de usurio e a senha da fonte de dados do ColdFusion.
5 Selecione um procedimento armazenado no menu pop-up Procedimentos.
A caixa de dilogo Editar varivel do procedimento armazenado exibida. O nome da varivel que voc est editando
exibido na caixa Nome.
Nota: Voc deve inserir valores de teste para todos os procedimentos de entrada do procedimento armazenado.
7 Faa as alteraes conforme necessrio:
Selecione uma Direo no menu pop-up. Um procedimento armazenado pode ter valores de entrada, valores de
sada ou ambos.
Selecione um tipo de SQL no menu pop-up. Insira uma varivel de retorno, um valor de runtime e um valor de teste.
8 Caso o procedimento armazenado use um parmetro, clique no boto de adio (+) para adicionar um parmetro
de pgina.
Nota: Voc deve inserir parmetros de pgina correspondentes para cada valor de retorno do parmetro de
procedimento armazenado. No adicione parmetros de pgina a menos que haja um valor de retorno correspondente.
Clique novamente no boto de adio (+) para adicionar outro parmetro de pgina, se necessrio.
9 Selecione um parmetro de pgina e clique no boto de subtrao (-) para exclu-lo se necessrio ou clique em
registros; caso o procedimento armazenado retorne um conjunto de registros, clique no boto Testar para ver o
conjunto retornado pelo procedimento armazenado.
O Dreamweaver executa o procedimento armazenado e exibe o conjunto de registros, se necessrio.
Nota: Caso o procedimento armazenado retorne um conjunto de registros e use parmetros, voc deve inserir um valor
na coluna Valor padro da caixa Variveis para testar o procedimento armazenado.
Voc pode usar valores de teste diferentes para gerar conjuntos de registros diferentes. Para alterar os valores de teste,
clique no boto Editar em Parmetro e altere o valor de teste, ou clique no boto Editar em Parmetros de pgina e
altere o valor padro.
11 Selecione a opo Retorna cdigo de status nomeado, digite um nome para o cdigo de status, caso o procedimento
armazenado).
A caixa de dilogo Comando exibida.
3 Digite um nome para o comando, selecione uma conexo com o banco de dados que contm o procedimento
Depois que voc fecha a caixa de dilogo, o cdigo do ASP inserido na pgina. Quando o cdigo executado no
servidor, o cdigo cria um objeto de comando que executa um procedimento armazenado no banco de dados. Por sua
vez, o procedimento armazenado realiza uma operao no banco de dados como, por exemplo, inserir um registro.
Por padro, o cdigo define a propriedade Preparado do objeto Comando como true, o que faz o servidor de
aplicativo reutilizar uma verso compilada exclusiva do objeto sempre que o procedimento armazenado executado.
Se voc souber que o comando ser executado mais de uma vez, ter uma verso compilada exclusiva do objeto pode
aumentar a eficincia das operaes do banco de dados. No entanto, se o comando for executado apenas uma ou duas
vezes, us-lo pode, na verdade, retardar o aplicativo da Web porque o sistema tem de parar para compilar o comando.
Para mudar a configurao, alterne para a Visualizao de cdigo e altere a propriedade Preparado para false.
Nota: Nem todos os fornecedores de bancos de dados do suporte a comandos preparados. Caso o banco de dados no
d suporte a ele, voc talvez receba uma mensagem de erro ao executar a pgina. Alterne para a Visualizao de cdigo
e altere a propriedade Preparado para false.
Caso o procedimento armazenado use parmetros, voc pode criar uma pgina que coleta os valores de parmetro os
envia para a pgina com o procedimento armazenado. Por exemplo, voc pode criar uma pgina que usa parmetros
de URL ou um formulrio em HTML para coletar valores de parmetro dos usurios.
Uma tabela do banco de dados para armazenar informaes de logon dos usurios
Um formulrio em HTML que permite aos usurios selecionar um nome de usurio e senha
Voc tambm pode usar o formulrio para obter demais informaes pessoais dos usurios.
Um comportamento de servidor Inserir registro para atualizar a tabela do banco de dados dos usurios do site
Um comportamento de servidor Verificar novo nome de usurio para verificar se o nome digitado pelo usurio no
est sendo usado por outro
Verifique se a tabela do banco de dados contm um nome de usurio e uma coluna de senha. Caso voc queira que
os usurios conectados tenham privilgios de acesso diferentes, inclua uma coluna de privilgio de acesso.
Caso voc queira definir uma senha comum a todos os usurios do site, configure o aplicativo de banco de dados
(Microsoft Access, Microsoft SQL Server, Oracle etc.) para digitar a senha em todos os registros de novo usurio
por padro. Na maioria dos aplicativos de banco de dados, voc pode definir uma coluna como um valor padro
sempre que um novo registro criado. Defina o valor padro da senha.
Voc tambm pode usar a tabela do banco de dados para armazenar outras informaes teis sobre o usurio.
A prxima etapa da criao de uma pgina de registro adicionar um formulrio em HTML a ela para permitir que
os usurios escolham um nome de usurio e senha (se aplicvel).
de design do Dreamweaver.
2 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido
formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio.
Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como
enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Inserir registro
define esses atributos para voc.
4 Adicione campos de texto (Inserir > Formulrio > Campo de texto) para permitir que o usurio digite um nome de
usurio e senha.
O formulrio tambm pode ter mais objetos de formulrio para registrar outros dados pessoais.
Voc deve adicionar rtulos (como textos ou imagens) ao lado de cada objeto de formulrio para informar suas
funes aos usurios. Voc tambm deve alinhar os objetos de formulrio colocando-os dentro de uma tabela em
HTML. Para obter mais informaes sobre objetos de formulrio, consulte Criao de formulrios da Web na
pgina 659.
5 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).
Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela >
Propriedades) e inserindo um novo valor na caixa Valor.
A prxima etapa da criao de uma pgina de registro adicionar o comportamento de servidor Inserir registro para
inserir registros na tabela dos usurios no banco de dados.
selecione Usar autenticao > Verificar novo nome de usurio no menu pop-up.
2 No menu pop-up Campo de nome de usurio, selecione o campo de texto de formulrio usado pelos visitantes para
A prxima etapa da criao de uma pgina de logon adicionar um formulrio em HTML pgina para permitir aos
usurios fazer logon. Consulte o prximo tpico para obter instrues.
de design do Dreamweaver.
2 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido
formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio.
Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como
enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Fazer logon do
usurio define esses atributos para voc.
4 Adicione um nome de usurio e um campo de texto de senha (Inserir > Formulrio > Campo de texto) ao
formulrio.
Adicione rtulos (como textos ou imagens) ao lado de cada campo de arquivo e alinhe os campos de texto os colocando
em uma tabela em HTML e definindo o atributo border da tabela como 0.
5 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).
Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela >
Propriedades) e inserindo um novo valor na caixa Rtulo.
A prxima etapa da criao de uma pgina de logon adicionar o comportamento de servidor Fazer logon do usurio
para verificar se o nome de usurio e a senha digitados so vlidos.
4 Especifique a tabela do banco de dados e as colunas que contm os nomes de usurio e as senhas de todos os
usurios registrados.
O comportamento de servidor compara o nome de usurio e a senha digitados por um visitante na pgina de logon
com os valores nessas colunas.
5 Especifique uma pgina a ser aberta caso haja xito no processo de logon.
A pgina especificada costuma alertar o usurio de que houve falha no processo de logon e permite que ele tente
novamente.
7 Caso voc queira que os usurios sejam encaminhados para a pgina de logon depois de acessarem uma pgina
restrita e retornarem a esta pgina aps o logon, selecione a opo Ir para URL anterior.
Caso um usurio tente acessar o site abrindo uma pgina restrita sem antes fazer o logon nela, a pgina restrita pode
encaminh-lo para a pgina de logon. Depois que o usurio consegue fazer o logon, a pgina de logon o redireciona
para a pgina restrita que o encaminhou inicialmente para a pgina de logon.
Quando completar a caixa de dilogo para o comportamento de servidor Restringir acesso pgina nessas pginas,
verifique se voc especificou a pgina de logon em Se o acesso for negado, caixa Ir para.
8 Especifique se voc deve conceder acesso pgina com base exclusivamente no nome de usurio e na senha ou
Caso no pretenda usar os nveis de autorizao, voc pode proteger qualquer pgina do site simplesmente
adicionando um comportamento de servidor Restringir acesso pgina. O comportamento de servidor redireciona
para outra pgina qualquer usurio que no tenha conseguido fazer o logon.
Caso pretenda usar os nveis de autorizao, voc pode proteger qualquer pgina do site usando os seguintes blocos de
criao:
Um comportamento de servidor Restringir acesso pgina para redirecionar usurios no autorizados para outra
pgina
Uma coluna extra na tabela de usurios do banco de dados para armazenar os privilgios de acesso de cada usurio
Independentemente do uso ou no dos nveis de autorizao, voc pode adicionar um link pgina protegida que
permite ao usurio fazer logout e limpa todas as variveis de sesso.
vejam a pgina, selecione a opo Nome de usurio, senha e nvel de acesso e especifique os nveis de autorizao
da pgina.
Por exemplo, voc pode especificar que apenas usurios com privilgios de Administrador possam exibir a pgina
selecionando Administrador na lista dos nveis de autorizao.
4 Para adicionar nveis de autorizao lista, clique em Definir. Na lista Definir nveis de acesso exibida, insira um
novo nvel de autorizao e clique no boto de adio (+). O novo nvel de autorizao armazenado para ser usado
com outras pginas.
Verifique se a seqncia de caracteres do nvel de autorizao corresponde exatamente seqncia de caracteres
armazenada no banco de dados do usurio. Por exemplo, caso a coluna da autorizao no banco de dados contenha o
valor "Administrador", digite Administrador, e no Admin, na caixa Nome.
5 Para definir mais de um nvel de autorizao para uma pgina, clique nos nveis com a tecla Control pressionada
6 Especifique a pgina a ser aberta caso um usurio no autorizado tente abrir a pgina protegida.
Copiar e colar os direitos de acesso de uma pgina para as demais pginas do site
1 Abra a pgina protegida e selecione o comportamento de servidor Restringir acesso pgina listado no painel
O comportamento de servidor Restringir acesso pgina copiado para a rea de transferncia do sistema.
3 Abra a outra pgina que voc deseja proteger da mesma forma.
4 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de seta no canto
do banco de dados contm uma coluna especificando os privilgios de acesso de cada usurio (Convidado, Usurio,
Administrador etc.). Os privilgios de acesso de cada usurio devem ser inseridos no banco de dados pelo
administrador do site.
Na maioria dos aplicativos de banco de dados, voc pode definir uma coluna como um valor padro sempre que um
novo registro criado. Defina o valor padro como o privilgio de acesso mais comum do site (por exemplo,
Convidado) e, em seguida, altere manualmente as excees (por exemplo, alterando Convidado para Administrador).
O usurio agora tem acesso a todas as pginas de administrador.
2 Verifique se cada usurio no banco de dados tem um privilgio de acesso exclusivo como, por exemplo, Convidado
ou Administrador, e no vrios privilgios como Usurio, Administrador. Para definir vrios privilgios de acesso
para as pginas (por exemplo, todos os convidados e administradores podem ver a pgina), os defina no nvel da
pgina, e no do banco de dados.
do usurio.
3 Selecione a opo Fazer logout quando a pgina for carregada e clique em OK.
ColdFusion.
2 Conclua o Assistente de logon do ColdFusion.
a Especifique o caminho completo at a pasta que voc deseja proteger e clique em Avanar.
b Na tela seguinte, selecione um destes tipos de autenticao:
Autenticao simples Protege o aplicativo com um nome de usurio e senha exclusivos para todos os usurios.
Autenticao do Windows NT Protege o aplicativo usando nomes de usurio e senhas do NT.
Autenticao LDAP Protege o aplicativo com nomes de usurio e senhas armazenados em um servidor LDAP.
c Especifique se voc deseja que os usurios faam logon usando uma pgina de logon do ColdFusion ou um menu
pop-up.
d Na prxima tela, especifique as seguintes configuraes:
Caso voc tenha selecionado a autenticao simples, especifique o nome de usurio e a senha que cada visitante
deve digitar.
Caso voc tenha selecionado a autenticao do Windows NT, especifique o domnio do NT de validao.
Caso voc tenha selecionado a autenticao LDAP, especifique o servidor LDAP de validao.
3 Carregue os novos arquivos no site remoto. Os arquivos esto localizados na pasta do site local.
menu pop-up, clique no boto de adio (+) e insira os detalhes do novo argumento direita.
4 Caso voc use um servidor de desenvolvimento remoto, carregue o arquivo CFC e todos os arquivos dependentes
(como, por exemplo, os usados para implementar uma funo ou para incluir arquivos) no servidor remoto.
O carregamentos dos arquivos garante que recursos do Dreamweaver como, por exemplo, a visualizao Live e
Visualizar o navegador funcionem corretamente.
O Dreamweaver escreve um arquivo CFC e o salva na pasta que voc especificar. O novo componente tambm
exibido no painel Componentes (depois do clique em Atualizar).
5 Para remover um componente, voc deve excluir manualmente o arquivo CFC do servidor.
Voc pode exibir qualquer uma das seguintes informaes sobre os componentes do CF:
O pacote de componentes exibido no servidor. Pacote de componentes uma pasta que contm arquivos CFC.
Caso os pacotes de componentes existentes no sejam exibidos, clique no boto Atualizar da barra de ferramentas do
painel.
4 Para exibir apenas os CFCs localizados na pasta do site, clique no boto Mostrar apenas os CFCs do site atual da
Para listar as funes de um componente, clique no boto de adio (+) ao lado do nome do componente.
Para ver os argumentos que uma funo usa, bem como o tipo de argumento e se eles so obrigatrios ou opcionais,
abra a ramificao da funo na visualizao hierrquica.
As funes que no usam argumentos no apresentam nenhum boto de adio (+) abaixo delas.
Na caixa de dilogo avanada Definio de sites, o caminho da pasta raiz local deve ser igual ao caminho da pasta
do servidor de teste (por exemplo, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Voc pode examinar e alterar
esses caminhos selecionando Site > Editar os sites.
O componente deve ser armazenado na pasta do site local ou em qualquer uma das subpastas do disco rgido.
Abra uma pgina do ColdFusion no Dreamweaver e veja os componentes no painel Componentes. Para exibir os
componentes, abra o painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do
painel e clique no boto Atualizar do painel.
Como o ColdFusion est em execuo localmente, o Dreamweaver exibe os pacotes de componentes no disco rgido.
Use o seguinte procedimento para editar um componente.
1 Abra uma pgina do ColdFusion no Dreamweaver e veja os componentes no painel Componentes (Janela >
Componentes).
2 Selecione Componentes CF no menu pop-up do painel e clique no boto Atualizar do painel.
Como o ColdFusion est em execuo localmente, o Dreamweaver exibe os pacotes de componentes no disco rgido.
Nota: Para editar visualmente o conjunto de registros CFC, clique duas vezes nele no painel Ligaes.
3 Para editar um arquivo de componente em termos gerais, abra o pacote e clique duas vezes no nome do
hierrquica.
5 Faa manualmente as alteraes na Visualizao de cdigo.
6 Salve o arquivo (Arquivo > Salvar).
7 Para ver uma nova funo no painel Componentes, atualize a visualizao clicando no boto Atualizar na barra de
ferramentas do painel.
Arraste uma funo da visualizao hierrquica para a pgina. O cdigo inserido na pgina para invocar a funo.
Selecione a funo no painel e clique no boto Inserir na barra de ferramentas do painel (o segundo boto direita).
O Dreamweaver insere o cdigo na pgina, no ponto de insero.
5 Caso voc insira uma funo com argumentos, complete manualmente o cdigo do argumento.
Para obter mais informaes, consulte a documentao do ColdFusion em Dreamweaver (Ajuda > Uso do
ColdFusion).
6 Salve a pgina (Arquivo > Salvar).
no menu pop-up.
A caixa de dilogo Conjunto de registros exibida. Voc pode trabalhar nas caixas de dilogo Conjunto de registros
simples ou avanada.
3 Para usar uma funo existente no CFC, selecione a funo no menu pop-up Funo e passe etapa 5.
2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta)
no menu pop-up.
A caixa de dilogo Conjunto de registros exibida. Voc pode trabalhar nas caixas de dilogo Conjunto de registros
simples ou avanada.
3 Clique no boto Consulta do CFC.
4 Complete a caixa de dilogo Consulta do CFC, clique em OK e em OK novamente para adicionar o conjunto de
Para obter mais informaes, consulte Adio de contedo dinmico a pginas na pgina 577.
Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes
de objeto no cdigo, por exemplo: rsPressRelease.
Os nomes dos conjuntos de registros devem conter apenas caracteres alfanumricos e sublinhados (_). Voc no pode
usar caracteres especiais ou espaos.
2 Selecione um pacote de um dos j definidos no servidor.
Caso o pacote no seja exibido no menu pop-up, voc pode atualizar a lista de pacotes clicando no boto Atualizar
prximo do menu pop-up.
Primeiramente, verifique se voc carregou os CFCs no servidor de teste. S so exibidos CFCs no servidor de teste.
3 Selecione um componente dentre os definidos no pacote selecionado atualmente.
Caso o menu pop-up Componente no contenha nenhum componente, ou caso nenhum dos componentes criados
anteriormente seja exibido no menu, voc deve carregar os arquivos CFC no servidor de teste.
4 (Opcional) Para criar um componente, clique no boto Criar novo componente.
a Na caixa Nome, digite o nome para o novo CFC. O nome deve conter apenas caracteres alfanumricos e
sublinhados (_).
b Na caixa Diretrio do componente, insira o local do CFC ou localize a pasta.
O menu pop-up Funo contm apenas as funes definidas no componente selecionado no momento. Caso nenhuma
funo seja exibida no menu pop-up ou caso as alteraes mais recentes no sejam refletidas nas funes listadas
atualmente, verifique se as alteraes foram salvas e carregadas no servidor.
Nota: As caixas Conexo e SQL so somente leitura.
6 Edite todos os parmetros (tipo, valor e valor padro) que devem ser passados como um argumento de funo
caixa direita.
O tipo de valor pode ser um parmetro de URL, uma varivel de formulrio, um cookie, uma varivel de sesso, uma
varivel de aplicativo ou um valor inserido.
b Insira um valor padro para o parmetro na caixa Valor padro.
Voc no pode modificar a conexo de banco de dados e a consulta SQL do conjunto de registros. Esses campos esto
sempre desativados a conexo e a consulta SQL so exibidas para sua informao.
7 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.
Caso a instruo SQL contenha parmetros de pgina, verifique se a coluna Valor padro da caixa Parmetros contm
valores de teste vlidos antes de clicar em Testar.
Caso a consulta tenha sido executada com xito, uma tabela exibe o conjunto de registros. Cada linha contm um
registro e cada coluna representa um campo nesse registro.
Clique em OK para limpar a Consulta do CFC.
8 Clique em OK.
656
Os parmetros de formulrio usam os nomes dos objetos de formulrio correspondentes. Por exemplo, caso o
formulrio contenha um campo de texto chamado txtLastName, o seguinte parmetro de formulrio enviado para
o servidor quando o usurio clica no boto Enviar:
txtLastName=enteredvalue
Nos casos em que um aplicativo da Web espera um valor de parmetro preciso (por exemplo, quando ele realiza uma
ao com base em uma de vrias opes), use um boto de opo, uma caixa de seleo ou um objeto de formulrio
lista/menu para controlar os valores que o usurio pode enviar. Isso impede que os usurios digitem as informaes
incorretamente e causem um erro de aplicativo. O seguinte exemplo mostra um formulrio de menu pop-up que
oferece trs opes:
Cada opo de menu corresponde a um valor codificado enviado como um parmetro de formulrio para o servidor.
A caixa de dilogo Listar valores do seguinte exemplo compara cada item de lista com um valor (Adicionar, Atualizar
ou Excluir):
Depois que um parmetro de formulrio criado, o Dreamweaver pode recuperar o valor e us-lo em um aplicativo
da Web. Depois da definio do parmetro de formulrio no Dreamweaver, voc pode inserir o valor em uma pgina.
Parmetros de URL
Os parmetros de URL permitem passar informaes fornecidas pelo usurio do navegador para o servidor. Quando
um servidor recebe uma solicitao e os parmetros so acrescentados URL da solicitao, o servidor d pgina
solicitada acesso aos parmetros antes de oferec-la ao navegador.
Um parmetro de URL um par nome/valor acrescentado a um URL. O parmetro comea com um ponto de
interrogao (?) e usa a forma nome=valor. Caso haja mais de um parmetro de URL, cada um deles separado por
um e comercial (&). O seguinte exemplo mostra um parmetro de URL com dois pares nome/valor:
http://server/path/document?name1=value1&name2=value2
No fluxo de trabalho desse exemplo, o aplicativo uma loja baseada na Web. Como os desenvolvedores do site querem
atingir o maior pblico possvel, o site foi projetado para dar suporte a moedas estrangeiras. Ao fazer logon no site, os
usurios podem selecionar a moeda na qual exibem os preos dos itens disponveis.
1 O navegador solicita a pgina report.cfm do servidor. A solicitao inclui o parmetro de URL Currency="euro". A
varivel Currency="euro" especifica que todas as quantias monetrias recuperadas sejam exibidas em euro da
Unio Europia.
2 O servidor armazena temporariamente o parmetro de URL na memria.
3 A pgina report.cfm usa os parmetros para recuperar o custo dos itens em euros. Essas quantias monetrias podem
ser armazenadas em uma tabela de banco de dados com moedas diferentes ou convertidas de uma moeda exclusiva
associada a cada item (qualquer moeda com suporte do aplicativo).
4 O servidor envia a pgina report.cfm para o navegador e exibe o valor dos itens na moeda solicitada. Quando esse
usurio encerra a sesso, o servidor limpa o valor do parmetro de URL, o que libera a memria do servidor para
hospedar novas solicitaes de usurio.
SERVIDOR WEB
http://www.mysite.com/
report.cfm?Currency=""
Currency=""
Navegador da Web
<HTML>
<code>
</HTML>
report.cfm
Os parmetros de URL tambm so criados quando o mtodo HTTP OBTER usado em conjunto com um
formulrio em HTML. O mtodo OBTER especifica se o valor de parmetro est acrescentado solicitao de URL
quando o formulrio enviado.
Entre os usos tpicos dos parmetros de URL est a personalizao dos sites com base nas preferncias do usurio.
Por exemplo, um parmetro de URL que consiste em um nome de usurio e senha pode ser usado para autenticar
um usurio, exibindo apenas informaes para as quais o usurio se registrou. Entre os exemplos comuns disso
esto os sites de finanas que exibem os preos das aes com base nos smbolos do mercado de aes que o usurio
escolheu previamente. Os desenvolvedores de aplicativo da Web normalmente usam os parmetros de URL para
passar valores a variveis dentro de aplicativos. Por exemplo, voc poderia passar termos para variveis SQL em um
aplicativo da Web a fim de gerar resultados de pesquisa.
O Inspetor de propriedades (Janela > Propriedades) permite criar os mesmos parmetros de URL com a seleo do
link e o acrscimo dos valores de parmetro de URL ao final do URL do link na caixa Link.
Depois que um parmetro de URL criado, o Dreamweaver pode recuperar o valor e us-lo em um aplicativo da Web.
Depois da definio do parmetro de URL no Dreamweaver, voc pode inserir o valor em uma pgina.
Objetos de formulrio
No Dreamweaver, os tipos de entrada de formulrio so chamados objetos de formulrio. Os objetos de formulrio so
os mecanismos que permitem aos usurios inserir dados. Voc pode adicionar os seguintes objetos de formulrio a um
formulrio:
Campos de texto Aceite todos os tipos de entrada de texto alfanumrico. O texto pode ser exibido como uma linha
nica, vrias linhas e um campo de senha no qual o texto digitado substitudo por asteriscos ou marcadores a fim de
ocultar o texto de curiosos.
Nota: As senhas e as demais informaes enviadas para um servidor usando um campo de senha no so criptografadas.
Os dados transferidos podem ser interceptados e lidos como texto alfanumrico. Por essa razo, voc deve sempre fornecer
criptografia aos dados que deseja manter em segurana.
Campos ocultos Armazene informaes inseridas por um usurio como, por exemplo, endereo de email ou
preferncia de visualizao e, em seguida, use esses dados na prxima visita do usurio ao site.
Botes Realize as aes com o clique. Voc pode adicionar um nome ou rtulo personalizado a um boto, ou usar um
dos rtulos Enviar ou Redefinir predefinidos. Use um boto para enviar dados de formulrio ao servidor ou para
redefinir o formulrio. Voc tambm pode atribuir outras tarefas de processamento definidas em um script. Por
exemplo, o boto pode calcular o custo total dos itens selecionados com base em valores atribudos.
Caixas de seleo Permita vrias respostas dentro de um nico grupo de opes. Um usurio pode selecionar quantas
opes se aplicarem. O seguinte exemplo mostra trs itens de caixa de seleo marcados: Surfing, Mountain Biking e
Rafting.
Botes de opo Represente opes exclusivas. A seleo de um boto dentro de um grupo de botes de opo
desmarca todos os demais (um grupo consiste em dois ou mais botes que compartilham o nome). No exemplo abaixo,
Rafting a opo selecionada no momento. Caso o usurio clique em Surfing, o boto Rafting desmarcado
automaticamente.
Menus de lista Exiba valores de opo em uma lista de rolagem que permite aos usurios selecionar vrias opes. A
opo Lista exibe os valores de opo em um menu que permite aos usurios selecionar apenas um nico item. Use
menus quando voc tiver uma quantidade de espao limitada, mas precisa exibir muitos itens, ou para controlar os
valores retornados ao servidor. Diferentemente dos campos de texto nos quais os usurios digitam o que querem,
inclusive dados invlidos, voc define os valores exatos retornados por um menu.
Nota: Um menu pop-up em um formulrio em HTML no igual a um menu pop-up grfico. Para obter informaes
sobre como criar, editar, mostrar e ocultar um menu pop-up grfico, consulte o link ao final desta seo.
Menus de salto Listas de navegao ou menus pop-up que permitem inserir um menu no qual cada opo vinculada
a um documento ou arquivo.
Campos de arquivo Eles permitem aos usurios procurar um arquivo no computador e carreg-lo como dados de
formulrio.
Campos de imagem Eles permitem inserir uma imagem em um formulrio. Use campos de imagem para criar botes
grficos como, por exemplo, Enviar ou Redefinir. O uso de uma imagem para realizar tarefas que no sejam o envio
de dados exige que um comportamento seja anexado ao objeto de formulrio.
Na visualizao Design, os formulrios so indicados por um contorno vermelho pontilhado. Se voc no vir esse
contorno, selecione Exibir > Auxlios visuais > Elementos invisveis.
3 Defina as propriedades do formulrio em HTML no Inspetor de propriedades (Janela >Propriedades):
a Na janela Documento, clique no contorno para selecionar o formulrio.
b Na caixa Formulrio, digite um nome exclusivo para identificar o formulrio.
A nomeao de um formulrio possibilita referenciar ou controlar o formulrio com uma linguagem de script como,
por exemplo, JavaScript ou VBScript. Caso voc no nomeie o formulrio, o Dreamweaver gera um nome usando a
sintaxe formn e incrementa o valor de n a cada formulrio adicionado pgina.
c Na caixa Ao, especifique a pgina ou o script que processar os dados do formulrio digitando o caminho ou
clicando no cone de pasta para navegar at a pgina ou o script apropriado. Exemplo: processorder.php.
d No menu pop-up Mtodo, especifique o mtodo para transmitir os dados de formulrio ao servidor. Defina uma
No use o mtodo OBTER para enviar formulrios longos. As URLs esto limitadas a 8.192 caracteres. Se a quantidade
de dados enviados for muito grande, eles sero truncados, o que leva a resultados inesperados ou falhas no
processamento.
As pginas dinmicas geradas por parmetros passados pelo mtodo OBTER podem ser marcadas porque todos os
valores necessrios para gerar novamente a pgina esto contidos no URL exibido na caixa Endereo do navegador.
Por outro lado, as pginas dinmicas geradas por parmetros passados pelo mtodo POSTAR no podem ser marcadas.
Caso voc colete nomes de usurio e senhas confidenciais, nmeros de carto de crdito ou outras informaes
confidenciais, o mtodo POSTAR pode parecer mais seguro que o mtodo OBTER. No entanto, as informaes enviadas
pelo mtodo POSTAR no so criptografadas e podem ser facilmente recuperadas por um hacker. Para garantir a
segurana, use uma conexo protegida em um servidor seguro.
e (Opcional) No menu pop-up Tipo de codif., especifique o tipo de codificao MIME dos dados enviados para o
(Opcional) No menu pop-up Destino, especifique a janela na qual exibir os dados retornados pelo programa
invocado.
Caso a janela nomeada ainda no esteja aberta, uma nova com esse nome aberta. Defina um dos seguintes valores de
destino:
_blank Abre o documento de destino em uma nova janela sem nome.
_parent Abre o documento de destino na janela pai da janela que exibe o documento atual.
_self Abre o documento de destino na mesma janela da janela na qual o formulrio foi enviado.
_top Abra o documento de destino no corpo da janela atual. Esse valor pode ser usado para verificar se o documento
de destino usa toda a janela mesmo que o documento original tenha sido exibido em um quadro.
4 Insira objetos de formulrio na pgina:
a Coloque o ponto de insero onde o objeto de formulrio deve ser exibido no formulrio.
b Selecione o objeto no menu Inserir > Formulrio ou na categoria Formulrios do painel Inserir.
c Complete a caixa de dilogo Atributos de acesso a tag input. Para obter mais informaes, clique no boto Ajuda
da caixa de dilogo.
Nota: Se no visualizar a caixa de dilogo Atributos de acesso a tag input, voc ter que ter o Ponto de insero na
Visualizao de cdigo para tentar inserir o objeto de formulrio. Verifique se o Ponto de insero est na Visualizao
de projeto e tente novamente. Para obter mais informaes sobre esse tpico, consulte o artigo de David PowerCriando
formulrios HTML no Dreamweaver.
d Defina as propriedades dos objetos.
e Digite um nome para o objeto no Inspetor de propriedades.
Todos os campos de texto, campos ocultos, caixas de seleo e objetos de lista/menu devem ter um nome exclusivo que
identifique o objeto no formulrio. Os nomes de objeto de formulrio no podem conter espaos ou caracteres
especiais. Voc pode usar qualquer combinao dos caracteres alfanumricos e um sublinhado (_). O rtulo que voc
atribui ao objeto o nome da varivel que armazena o valor (os dados inseridos) do campo. Esse o valor enviado para
o servidor para processamento.
Nota: Todos os botes de opo em um grupo devem ter o mesmo nome.
f
Para identificar o campo de texto, a caixa de seleo ou o objeto de boto de opo na pgina, clique ao lado do
objeto e digite o rtulo.
Use quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Voc no
pode inserir um formulrio em outro formulrio (ou seja, no possvel sobrepor tags), mas pode incluir mais de um
formulrio em uma pgina.
Ao criar formulrios, no se esquea de identificar os campos de formulrio com texto descritivo para permitir aos
usurios saber ao que eles esto respondendo por exemplo, Digite seu nome para solicitar informaes de nome.
Use tabelas para fornecer estrutura a objetos de formulrio e rtulos de campo. Ao usar tabelas em formulrios,
verifique se todas as tags table esto includas entre as tags form.
Para assistir a um tutorial sobre a criao de formulrios, consulte www.adobe.com/go/vid0160_br.
Para assistir a um tutorial sobre formulrios de estilo com CSS, consulte www.adobe.com/go/vid0161_br.
pode ser inferior ao N mx. de caract, que especifica o nmero mximo de caracteres que podem ser digitados no
campo. Por exemplo, se a Largura do caractere for definida como 20 (o valor padro) e um usurio digitar 100
caracteres, apenas 20 deles sero visveis no campo de texto. Embora voc no possa exibir os caracteres no campo, eles
so reconhecidos pelo objeto de campo e enviados para processamento no servidor.
N mx. de caract. Especifica o nmero mximo de caracteres que o usurio pode digitar em campos de texto de linha
nica. Use N mx. de caract. para limitar CEPs a 5 dgitos, limitar senhas a 10 caracteres etc. Caso voc deixe a caixa
N mx. de caract. em branco, os usurios podem digitar qualquer quantidade de texto. Se o texto exceder a largura do
caractere do campo, o texto ser rolado. Caso um usurio exceda o nmero mximo de caracteres, o formulrio produz
um som de alerta.
Nmero de linhas (Disponvel quando a opo Vrias linhas est selecionada) Define a altura do campo para campos
de texto com vrias linhas.
Desativado Desativa a rea de texto.
Somente leitura Torna a rea de texto somente leitura.
Tipo Designa o campo como um campo de linha nica, de vrias linhas ou de senha.
Linha nica Resulta em uma tag input com o type atributo definido como text. A configurao Largura do
caractere mapeada para o atributo size e a configurao N mx. de caract., para o atributo maxlength.
Multi-linhas Resulta em uma tag textarea. A configurao Largura do caractere mapeada para o atributo cols
e a configurao Nmero de linhas, para o atributo rows.
Senha Resulta em uma tag input com o type atributo definido como password. As configuraes Largura do
caractere e N mx. de caract. so mapeadas para os mesmos atributos como campos de texto de linha nica. Quando
um usurio digita um campo de texto de senha, a entrada exibida como marcadores ou asteriscos para proteg-lo da
observao de outras pessoas.
Valor inicial Atribui o valor exibido no campo quando o formulrio carregado pela primeira vez. Por exemplo, voc
pode indicar que o usurio digita informaes no campo incluindo uma observao ou um valor de exemplo.
Classe Permite que voc aplique regras de CSS ao objeto.
Enviar formulrio Envia os dados de formulrio para processamento quando o usurio clica no boto. Os dados
so enviados para a pgina ou o script especificado na propriedade Ao do formulrio.
Redefinir formulrio Limpa o contedo do formulrio quando o boto clicado.
Nenhuma Especifica a ao a ser realizada quando o boto clicado. Por exemplo, voc pode adicionar um
comportamento do JavaScript que abre outra pgina quando o usurio clica no boto.
Classe Aplica regras de CSS ao objeto.
uma pesquisa voc pode definir um valor igual a 4 para concordo totalmente e um valor igual a 1 para discordo
totalmente.
Estado inicial Determina se a caixa de seleo marcada quando o formulrio carregado no navegador.
Dinmico Permite ao servidor determinar dinamicamente o estado inicial da caixa de seleo. Por exemplo, voc pode
usar as caixas de seleo para apresentar visualmente as informaes Sim/No armazenadas em um registro de banco
de dados. No momento do design, voc no sabe essas informaes. Durante o runtime, o servidor l o registro de
banco de dados e marca a caixa de seleo caso o valor seja Sim.
Classe Aplica regras de folhas de estilos em cascata (CSS) ao objeto.
pode digitar skiing na caixa Valor marcado para indicar que um usurio escolheu skiing.
Estado inicial Determina se o boto de opo selecionado quando o formulrio carregado no navegador.
Dinmico Permite ao servidor determinar dinamicamente o estado inicial do boto de opo. Por exemplo, voc pode
usar os botes de opo para apresentar visualmente as informaes armazenadas em um registro de banco de dados.
No momento do design, voc no sabe essas informaes. Durante o runtime, o servidor l o registro de banco de
dados e marca o boto de opo caso o valor corresponda ao que voc especificou.
Classe Aplica regras de CSS ao objeto.
Opes de menu
Lista/menu Atribui um nome ao menu. O nome deve ser exclusivo.
Tipo Indica se o menu aberto quando clicado (a opo Menu) ou exibe uma lista rolvel de itens (a opo Lista).
Selecione a opo Menu caso voc queira que apenas uma opo permanea visvel quando o formulrio exibido em
um navegador. Para exibir as demais opes, o usurio clica na seta para baixo.
Selecione a opo Lista para listar uma ou todas as opes quando o formulrio exibido em um navegador a fim de
permitir aos usurios selecionar vrios itens.
Altura (Listar apenas o tipo) Define o nmero de itens exibidos no menu.
Selees (Listar apenas o tipo) Indica se o usurio pode selecionar vrios itens na lista.
Listar valores Abre uma caixa de dilogo que permite adicionar os itens a um menu de formulrio:
1 Use os botes de adio (+) e de subtrao (-) para adicionar e remover itens na lista.
2 Digite o texto do rtulo e um valor opcional para cada item de menu.
Cada item da lista tem um rtulo (o texto exibido na lista) e um valor (o valor enviado para o aplicativo de
processamento caso o item seja selecionado). Caso nenhum valor seja especificado, o rtulo enviado, na verdade,
para o aplicativo de processamento.
3 Use os botes de seta para cima e para baixo a fim de reorganizar os itens na lista.
Os itens so exibidos no menu na mesma ordem em que so exibidos na caixa de dilogo Listar valores. O primeiro
item da lista o item selecionado quando a pgina carregada em um navegador.
Dinmico Permite ao servidor selecionar dinamicamente um item no menu quando ele exibido pela primeira vez.
Classe Permite que voc aplique regras de CSS ao objeto.
Selecionados inicialmente Define os itens selecionados na lista por padro. Clique no(s) item(ns) na lista.
5 Para anexar um comportamento do JavaScript ao boto, selecione a imagem e, depois, selecione o comportamento
Caso voc defina os botes de opo para passar parmetros novamente ao servidor, os parmetros so associados ao
nome. Por exemplo, caso voc nomeie o grupo myGroup e defina o mtodo de formulrio como OBTER (ou seja, voc
deseja que o formulrio passe parmetros de URL, e no parmetros de URL quando o usurio clicar no boto de
envio), a expresso myGroup="CheckedValue" ser passada no URL para o servidor.
b Clique no boto de adio (+) para adicionar um boto de opo ao grupo. Digite um rtulo e um valor marcado
Crie o layout dos botes usando quebras de linha ou uma tabela. Caso voc selecione a opo de tabela, o Dreamweaver
cria uma tabela de coluna nica e coloca os botes de opo esquerda e os rtulos direita.
Voc tambm pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualizao de cdigo.
Caso voc defina as caixas de seleo para passar parmetros novamente ao servidor, os parmetros sero associados
ao nome. Por exemplo, caso voc nomeie o grupo myGroup e defina o mtodo de formulrio como OBTER (ou seja, voc
deseja que o formulrio passe parmetros de URL, e no parmetros de formulrio quando o usurio clicar no boto
de envio), a expresso myGroup="CheckedValue" ser passada no URL para o servidor.
b Clique no boto de adio (+) para adicionar uma caixa de seleo ao grupo. Digite um rtulo e um valor marcado
Crie o layout das caixas de seleo usando quebras de linha ou uma tabela. Caso voc selecione a opo de tabela, o
Dreamweaver cria uma tabela de coluna nica e coloca as caixas de seleo esquerda e os rtulos direita.
Voc tambm pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualizao de cdigo.
b Selecione Inserir > Formulrio > Lista/menu para inserir o objeto de formulrio.
2 Siga um destes procedimentos:
Selecione o objeto de formulrio Lista/menu HTML novo ou j existente e, em seguida, clique no boto Dinmico
no Inspetor de propriedades.
Selecione Inserir > Objetos de dados > Dados dinmicos > Lista de seleo dinmica.
3 Complete a caixa de dilogo Lista/menu dinmico e clique em OK.
a No menu pop-up Opes do conjunto de registros, selecione o conjunto de registros a ser usado como uma fonte
de contedo. Voc tambm usa esse menu para editar itens de lista/menu estticos e dinmicos posteriormente.
b Na rea Opes estticas, insira um item padro na lista ou no menu. Alm disso, use essa opo para editar
mesma ordem da caixa de dilogo Valores iniciais da lista. O primeiro item da lista o item selecionado quando a
pgina carregada em um navegador. Use os botes de seta para cima e para baixo a fim de reorganizar os itens na
lista.
d No menu pop-up Valores, selecione o campo que contm os valores dos itens de menu.
e No menu pop-up Rtulos, selecione o campo que contm os rtulos dos itens de menu.
f
(Opcional) Para especificar que um determinado item de menu selecionado quando a pgina aberta em um
navegador ou quando um registro exibido no formulrio, digite um valor igual ao valor do item de menu na caixa
Selecionar valor igual a.
Voc pode inserir um valor esttico ou especificar um valor dinmico clicando no cone de raio ao lado da caixa e
selecionando um valor dinmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser
correspondente a um dos valores do item de menu.
Dados dinmicos.
3 Selecione a coluna do conjunto de registros que fornecer um valor para o campo de texto e, em seguida, clique em OK.
2 Clique no cone de raio ao lado da caixa Definir valor para, selecione uma fonte de dados na lista de fontes e clique
em OK.
A fonte de dados deve conter informaes textuais. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes
de dados disponveis no atendam s suas necessidades, clique no boto de adio (+) para definir uma nova.
Clique no cone de raio ao lado da caixa Marcar se e selecione o arquivo na lista de fontes de dados.
A fonte de dados deve conter dados Booleanos como, por exemplo, Sim e No ou verdadeiro e falso. Caso nenhuma
fonte de dados seja exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, clique no
boto de adio (+) para definir uma nova.
Na caixa Igual a, digite o valor que o campo deve ter para que a caixa de seleo seja exibida marcada.
Por exemplo, para que a caixa de seleo seja exibida marcada quando um determinado campo em um registro
apresentar um valor Sim, digite Sim na caixa Igual a.
Nota: Esse valor tambm retorna para o servidor caso o usurio clique no boto Enviar do formulrio.
A caixa Valor do boto de opo exibe os valores de todos os botes de opo no grupo.
2 Selecione um valor a ser pr-selecionado dinamicamente na lista de valores. Esse valor exibido na caixa Valor.
3 Clique no cone de raio ao lado da caixa Selecionar valor igual a e selecione um conjunto de registros que contenha
Verifique se todos os campos de texto que voc deseja validar tm um nome exclusivo.
2 Selecione o boto Enviar.
3 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione o
Por exemplo, voc pode especificar que um campo de texto referente idade de uma pessoa aceite apenas nmeros.
Nota: O comportamento Validar formulrio s est disponvel caso um campo de texto tenha sido inserido no
documento.
comportamento na lista.
JavaScript na lista.
3 Na caixa Chamar JavaScript, digite o nome da funo do JavaScript a ser executada quando o usurio clica no boto
e clique em OK.
Por exemplo, voc pode digitar o nome de uma funo que ainda no existe como, por exemplo, processMyForm().
4 Caso a funo JavaScript ainda no esteja na seo head do documento, adicione-a agora.
Por exemplo, voc pode definir a seguinte funo JavaScript na seo head do documento para exibir uma mensagem
quando o usurio clica no boto Enviar:
function processMyForm(){
alert('Thanks for your order!');
}
objetos de formulrio (consulte Otimizao da rea de trabalho para desenvolvimento visual na pgina 551).
Trata-se de uma etapa nica.
2 No documento, coloque o ponto de insero onde voc deseja que o objeto de formulrio seja exibido.
3 Selecione Inserir > Formulrio e selecione um objeto de formulrio a ser inserido.
4 Complete a caixa de dilogo e clique em OK. Veja uma lista parcial de opes:
Nota: O leitor de tela l o nome que voc digita como sendo o atributo Rtulo do objeto.
ID atribui uma ID ao campo de formulrio. Esse valor pode ser usado como referncia ao campo do JavaScript; ele
tambm usado como sendo o valor do atributo for caso voc escolha a opo Anexar tag label usando nas opes
Estilo.
Dispor ao redor com tag label Envolve o item de formulrio com uma tag label da seguinte forma:
<label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>
Anexar tag label usando Usa o atributo for para envolver o item de formulrio com uma tag label da seguinte forma:
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>
Essa opo faz com que o navegador processe texto associado a uma caixa de seleo e ao boto de opo com um
retngulo em foco e permite ao usurio marcar a caixa de seleo e o boto de opo clicando em qualquer lugar do
texto associado, e no a caixa de seleo ou o controle do boto de opo.
Nota: Essa a opo preferencial para acessibilidade; no entanto, a funcionalidade pode variar de acordo com o
navegador.
Nenhuma tag label No usa uma tag label da seguinte forma:
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton3
Chave de acesso Usa um equivalente do teclado (uma letra) e a tecla Alt (Windows) ou a tecla Control (Macintosh)
para selecionar o objeto de formulrio no navegador. Por exemplo, se voc digitasse B como Chave de acesso, os
usurios com um navegador Macintosh poderiam digitar Control+B para selecionar o objeto de formulrio.
ndice de abas Especifica uma ordem de abas para os objetos de formulrio. Caso voc defina a ordem de abas para
um objeto, voc deve definir a ordem para todos os objetos.
A configurao de uma ordem de abas til quando voc tem outros links e objetos de formulrio na pgina e precisa
que o usurio percorra eles em uma ordem especfica.
5 Clique em Sim para inserir uma tag form.
posterior como sendo o servidor de teste para o site do Dreamweaver. Verifique se voc especificou um URL da Web.
4 Abra um documento qualquer do ColdFusion.
Voc no ver nenhuma alterao visvel feita no espao de trabalho do Dreamweaver at abrir um documento do
ColdFusion.
seja exibido.
2 Selecione Inserir > Objetos do ColdFusion > CFForm > CFForm ou selecione a categoria CFForm do painel Inserir
enviado.
Mtodo Permite que voc defina o mtodo usado pelo navegador para enviar os dados do formulrio para o servidor:
POSTAR Envia os dados usando o mtodo postar HTTP; esse mtodo envia os dados em uma mensagem separada
para o servidor.
OBTER Envia os dados usando o mtodo obter HTTP e colocando o contedo do campo do formulrio na
seqncia de caracteres de consulta do URL.
Alvo Permite que voc modifique o valor do atributo-alvo da tag cfform.
Tipo de codificao Especifica o mtodo de codificao usado na transmisso dos dados do formulrio.
Nota: Tipo de codificao no se refere codificao de caracteres. Esse atributo especifica o tipo de contedo usado no
envio do formulrio para o servidor (quando o valor do mtodo postar). O valor padro desse atributo
application/x-www-form-urlencoded.
Formato Determina o tipo de formulrio criado:
HTML Gera um formulrio em HTML e o envia para o cliente. Os controles filhos cfgrid e cftree podem estar em
Flash ou no formato applet.
Flash Gera um formulrio em Flash e o envia para o cliente. Todos os controles esto no formato Flash.
XML Gera XForms em XML e coloca os resultados em uma varivel com o nome de formulrio do ColdFusion.
No envia nada para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no formato applet.
Estilo Permite que voc especifique um estilo para o formulrio. Para obter mais informaes, consulte a
documentao do ColdFusion.
Capa Flash/XML Permite que voc especifique uma cor halo para estilizar a sada. O tema determina a cor usada para
elementos realados e selecionados.
Preservar dados Determina se preciso substituir os valores de controle iniciais pelos valores enviados quando o
formulrio postado.
Caso seja Falso, os valores especificados nos atributos da tag de controle so usados.
Caso seja Verdadeiro, so usados os valores enviados.
Origem dos scripts Especifica o URL, relativo raiz da Web, do arquivo JavaScript que contm o cdigo do cliente
usado pela tag e pelas tags filhas. O atributo til caso o arquivo no esteja no local padro. Esse atributo pode ser
necessrio em alguns ambientes de hospedagem e configuraes que bloqueiam o acesso ao diretrio /CFIDE. O local
padro definido no Administrador do ColdFusion; por padro, ele /CFIDE/scripts/cfform.js.
Arquivamento Especifica o URL das classes Java para download dos controles de applet cfgrid, cfslider e cftree. O local
padro /CFIDE/classes/cfapplets.jar.
Coloque o ponto de insero onde deseja que o controle seja exibido no formulrio do ColdFusion e, em seguida,
selecione o controle no menu Inserir (Inserir > Objetos do ColdFusion > CFForm) ou na categoria CFForm do painel
Inserir.
5 Se necessrio, defina as propriedades do controle usando o Inspetor de propriedades.
Verifique se o controle est selecionado na visualizao Design e, em seguida, defina as propriedades no Inspetor de
propriedades. Para obter mais informaes sobre as propriedades, clique no cone Ajuda do Inspetor de propriedades.
6 Ajuste o layout do formulrio do ColdFusion.
Caso esteja criando um formulrio baseado em HTML, voc pode usar quebras de linha, quebras de pargrafo, textos
pr-formatados ou tabelas para formatar os formulrios. Voc no pode inserir um formulrio do ColdFusion em
outro formulrio do ColdFusion (ou seja, no possvel sobrepor tags), mas pode incluir mais de um formulrio do
ColdFusion em uma pgina.
Caso voc esteja criando um formulrio baseado em Flash, use os estilos CSS (folhas de estilos em cascata) no layout
do formulrio. O ColdFusion ignora qualquer HTML no formulrio.
Lembre-se de identificar os campos do formulrio do ColdFusion com um texto descritivo para que os usurios saibam
ao que esto respondendo. Por exemplo, crie um rtulo Digite o seu nome para solicitar informaes sobre o nome.
painel Inserir.
3 Clique no controle da pgina para selecion-la e, em seguida, definir suas propriedades no Inspetor de
propriedades.
Para obter informaes sobre as propriedades de controles especficos, consulte os tpicos sobre os controles.
enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Um marcador exibido no formulrio do ColdFusion. Se voc no vir o marcador, selecione Exibir > Auxlios
visuais > Elementos invisveis.
3 Selecione o campo oculto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfhiddenfield Permite que voc especifique o nome exclusivo do campo oculto.
Valor Permite que voc especifique um valor para o campo oculto. Os dados podem ser estticos ou dinmicos.
Para especificar um valor dinmico, clique no cone de raio ao lado da caixa Valor e selecione a coluna de um conjunto
de registros na caixa de dilogo Dados dinmicos. A coluna do conjunto de registros fornece um valor para o campo
de texto quando voc exibe o formulrio em um navegador.
Validar Especifica o tipo de validao do campo atual.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o controle. Essa propriedade ignorada pelo servidor do
enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
pelos usurios.
Obrigatrio Permite que voc especifique se o usurio deve inserir dados no campo (marcado) ou no (desmarcado).
Valor inicial Permite que voc especifique o texto a ser exibido na rea de texto quando a pgina for inicialmente aberta
em um navegador.
Validar Especifica o tipo de validao do campo.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o controle.
Estilo Permite que voc especifique um estilo para o controle. Para obter mais informaes, consulte a documentao
do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do
4 Para identificar a rea de texto, clique ao lado dela e digite o texto do rtulo.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do
enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
4 Para identificar a caixa de seleo, clique ao lado dela na pgina e digite o texto do rtulo.
Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do
ColdFusion durante o runtime.
Obrigatrio Permite que voc especifique se o boto de opo deve permanecer selecionado para que o formulrio seja
enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
4 Para identificar o boto de opo, clique ao lado dele na pgina e digite o texto do rtulo.
de uma opo caso tenha selecionado a opo Permitir vrias selees de lista.
Conjunto de registros Permite que voc especifique o nome da consulta do ColdFusion que deseja usar para preencher
a lista ou o menu.
Exibir coluna Permite que voc especifique a coluna do conjunto de registros para fornecer o rtulo de exibio de
Coluna de valor Permite que voc especifique a coluna do conjunto de registros para fornecer o valor de cada elemento
da lista. Usado com a propriedade Conjunto de registros.
Rtulo do Flash Permite que voc especifique um rtulo para a caixa de marcao.
Altura do Flash Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo
servidor do ColdFusion durante o runtime.
Largura do Flash Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo
servidor do ColdFusion durante o runtime.
Mensagem Especifica a mensagem a ser exibida se a propriedade Obrigatrio for definida como Sim e o usurio deixar
de fazer uma seleo antes de enviar o formulrio.
Obrigatrio Permite que voc especifique se um item de menu deve permanecer selecionado para que o formulrio
imagem a ser inserida e clique em OK. Se desejar, voc pode digitar o caminho do arquivo de imagem na caixa
Origem.
Nota: Caso a imagem esteja fora da pasta raiz do site, voc deve copiar a imagem para a pasta raiz. As imagens que esto
fora da pasta raiz talvez no estejam acessveis quando voc publicar o site.
3 Selecione o campo da imagem na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfimagefield Permite que voc especifique um nome exclusivo para o controle.
Origem Permite que voc especifique o URL da imagem inserida.
Alt Permite que voc especifique uma mensagem quando a imagem no puder ser exibida.
Alinhar Permite que voc especifique o alinhamento da figura.
Borda Permite que voc defina a largura da borda da imagem.
Editar imagem Abra a imagem no editor de imagens padro.
Para definir um editor de imagens padro, selecione Editar > Preferncias > Tipos de arquivos / editores. Do contrrio,
o boto Editar imagem no realiza nenhuma ao.
Validar Especifica o tipo de validao do campo de imagem.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para selecionar rapidamente o formulrio, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte
inferior da janela Documento.
2 No Inspetor de propriedades, defina o mtodo do formulrio como POSTAR.
3 No menu pop-up Tipo de codif., selecione multipart/form-data.
4 Posicione o ponto de insero dentro do contorno do formulrio onde voc deseja que o campo de arquivo seja
exibido.
5 Selecione Inserir > Objetos do ColdFusion > CFForm > CFfilefield.
6 Selecione o campo de arquivo na pgina e defina uma das seguintes propriedades no Inspetor de propriedades:
Cffilefield Permite que voc especifique um nome exclusivo para o controle.
Comprimento mximo Permite que voc especifique o nmero mximo de caracteres que o caminho do arquivo pode ter.
Validar Especifica o tipo de validao do campo.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o campo.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras
esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do
enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para selecionar rapidamente o formulrio, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte
inferior da janela Documento.
2 No Inspetor de propriedades, defina a propriedade Formato do formulrio como Flash.
O controle do campo de data s pode ser processado em formulrios do ColdFusion baseados em Flash.
3 Alterne para a visualizao Cdigo (Exibir > Cdigo) e insira a seguinte tag em qualquer lugar entre as tags CFForm
de abertura e de finalizao:
<cfinput name="datefield" type="datefield">
4 Alterne para a visualizao Design, selecione o campo de data na pgina e, em seguida, defina uma das seguintes
Valor Permite que voc especifique uma data a ser exibida no campo quando a pgina for aberta pela primeira vez em
enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
A parte inferior de cada Inspetor de propriedades de entrada contm controles que lhe ajudam a definir a regra de
validao especfica. Por exemplo, talvez voc queira especificar se um campo de texto deve conter um nmero de
telefone. Para isso, selecione Telefone no menu pop-up Valor do Inspetor de propriedades. Voc tambm pode
especificar quando validar no menu pop-up Validar em.
688
Caixas de dilogo e painis usam as configuraes da cor do sistema. Por exemplo, caso voc defina a cor como
Branco e Preto, todas as caixas de dilogo e painis do Dreamweaver so exibidos com uma cor de primeiro plano
branca e a cor do plano de fundo preta.
A Visualizao de cdigo usa a cor de texto do sistema e da janela. Por exemplo, caso voc defina a cor do sistema
como Branco e Preto e, em seguida, altere as cores do texto em Editar > Preferncias > Codificao por cores, o
Dreamweaver ignora essas configuraes de cor e exibe o texto do cdigo com a cor de primeiro plano branca e a
cor do plano de fundo preta.
A Visualizao de design usa as cores de plano de fundo e de texto que voc definiu em Modificar > Propriedades
da pgina para que as pginas que voc projetou processem cores de acordo com o navegador.
clique em OK.
Mostrar os atributos na insero Selecione os objetos para os quais voc deseja ativar as caixas de dilogo de
acessibilidade. Por exemplo, objetos de formulrio, quadros, mdia e imagens.
Manter foco no painel Mantm foco no painel, o que o torna acessvel ao leitor de tela. (Caso voc no selecione essa
opo, o foco permanece na Visualizao de design ou de cdigo quando um usurio abre um painel.)
Processamento fora da tela Selecione essa opo ao usar um leitor de tela.
Nota: Os atributos de acessibilidade so exibidos na caixa de dilogo Inserir tabela quando voc insere uma nova tabela.
Navegar em painis
1 Na janela Documento, pressione Control+F6 para mudar o foco para um painel.
Uma linha pontilhada em torno do ttulo do painel indica que o foco est no painel. O leitor de tela l a barra de ttulo
do painel que est em foco.
2 Pressione Control+F6 novamente para alternar o foco at que ele esteja no painel que voc deseja trabalhar.
Caso uma opo tenha escolhas, use as teclas de seta para percorr-las e, em seguida, pressione a Barra de espao
para fazer uma seleo.
Caso haja abas no grupo de painis para abrir outros painis, coloque o foco na aba de abertura e, em seguida, use
as teclas de seta para esquerda ou para direita para abrir as outras abas. Depois de abrir uma nova aba, pressione a
tecla Tab para percorrer as opes do painel.
(Macintosh) para abrir e fechar a seo expandida do Inspetor de propriedades, conforme necessrio, ou, com o
foco na seta de expanso no canto inferior direito, pressione a Barra de espao.
Nota: O foco do teclado deve estar dentro do Inspetor de propriedades (e no no ttulo do painel) para expandir e recolher
para trabalhar.
lista de categorias e, em seguida, use as teclas de seta para subir e descer a lista.
4 Pressione Control+Tab novamente para alternar para as opes de uma categoria.
5 Pressione Enter para sair da caixa de dilogo.
Navegar em quadros
Caso o documento contenha quadros, voc pode usar as teclas de seta a fim de alternar o foco para um quadro.
Selecionar um quadro
1 Pressione Alt+seta para baixo a fim de colocar o ponto de insero na janela Documento.
2 Pressione Alt+seta para cima a fim de selecionar o quadro com o foco atualmente.
3 Continue pressionando Alt+seta para cima a fim de alternar o foco para o conjunto de molduras e, em seguida, para
quadros.
clula.
3 Para selecionar toda a tabela, pressione Control+A duas vezes caso o ponto de insero esteja em uma clula, ou
a clula esteja selecionada ou uma caso a tabela esteja selecionada e, em seguida, pressiona a tecla de seta para cima,
para esquerda ou para direita.