O Guia Pratico Do Dreamweaver cs5 Com HTML Css e Javascript PDF

PEDRO REMOALDO
Portugal/2010
Reservados todos os direitos por Centro Atlântico, Lda.
Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa dos editores da obra.
O GUIA PRÁTICO DO DREAMWEAVER CS5

COM HTML, CSS E JAVASCRIPT
Autor: Pedro Remoaldo
Colecção: Tecnologias
Direcção gráfica: Centro Atlântico
Revisão técnica: Centro Atlântico
Capa: Paulo Buchinho
© Centro Atlântico, Lda., 2010

Ap. 413
4764-901 V. N. Famalicão
Portugal
Tel. 808 20 22 21
geral@centroatlantico.pt
www.centroatlantico.pt
Impressão e acabamento: Papelmunde

1ª edição: Outubro de 2010
ISBN: 978-989-615-098-3
Depósito legal: /10
Marcas registadas: Todos os termos mencionados neste livro conhecidos como sendo marcas
registadas de produtos e serviços foram apropriadamente capitalizados. A utilização de um
termo neste livro não deve ser encarada como afectando a validade de alguma marca regista-
da de produto ou serviço.
O Editor e o Autor não se responsabilizam por possíveis danos morais ou físicos causados
pelas instruções contidas no livro nem por endereços Internet que não correspondam às Home-
-Pages pretendidas.
O Guia Prático do Dreamweaver CS5 com HTML, CSS e JavaScript é uma publicação inde-
pendente não filiada na Adobe Systems Incorporated.
ÍNDICE
Prefácio 15
Introdução 15
Público-alvo e pré-requisitos 15
Características principais do livro 16
Convenções usadas 16
Visão geral e Organização 17
Sobre o Autor 19
1 Web Design 21
1.1 Tecnologias client-side 21
1.1.1 HTML 23
1.1.2 XML 24
1.1.3 XHTML 25
1.1.4 CSS 25
1.1.5 JavaScript 25
1.2 Ferramentas de Web Design 26
1.3 Adobe Dreamweaver 27
1.3.1 Versões disponíveis 28
1.3.2 Requisitos de sistema 29
1.4 Novidades no Dreamweaver CS5 30
1.4.1 Para os web designers 31
1.4.2 Para os web developers 33
1.4.3 Funcionalidades removidas 37
6 O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT
2 Ambiente de trabalho 39
2.1 WELCOME SCREEN 39
2.2 Barras de ferramentas 42
2.2.1 APPLICATION TOOLBAR 42
2.2.2 DOCUMENT TOOLBAR 45
2.2.3 Outras barras de ferramentas 48
2.3 Painéis 49
2.3.1 Alterar a disposição dos painéis 50
2.3.2 Flutuar um painel 51
2.3.3 Colocar grupos de painéis no panel dock 52
2.3.4 Minimizar painéis 54
2.3.5 Criar outro panel dock 56
2.3.6 Painéis horizontais 56
2.3.7 Painel INSERT 57
2.3.8 PROPERTY INSPECTOR 59
2.3.9 Painel RESULTS 60
2.4 Workspaces 61
2.4.1 Criar um workspace 62
2.4.2 Repor tudo como estava 64
2.5 Área de documento 64
2.5.1 TAG SELECTOR 64
2.5.2 Outros ícones e informação 66
2.5.3 Trabalhar com réguas 68
2.5.4 Trabalhar com a grelha 69
2.5.5 Trabalhar com guias 70
3 Sítios Web 73
3.1 Definir um sítio Web 74
3.2 Gestão de sítios Web 78
3.3 Gerir ficheiros 80
3.4 Outra informação sobre o sítio Web 83
3.4.1 Servidores Web 83
3.4.2 Trocar ficheiros com o servidor remoto 85
ÍNDICE 7
4 Documentos 87
4.1 Preferências dos novos documentos 93
4.2 Estrutura de um documento HTML 94
4.2.1 Secção HEAD 95
4.2.2 Secção BODY 97
4.3 Trabalhar com documentos 98
4.4 Visualizar páginas 100
4.4.1 Live View 101
4.4.2 Pré-visualização das páginas em browsers 102
4.4.3 BrowserLab 104
4.4.4 Multiscreen 112
4.4.5 Device Central 115
5 Trabalhar com texto 117

5.1 Definir a estrutura do documento 117
5.2 Parágrafos 117
5.2.1 Seleccionar texto 118
5.3 Cabeçalhos 120
5.4 Alinhamentos 122
5.5 Quebras de linha e espaços 123
5.6 Caracteres especiais 125
5.7 Formatação especial 126
5.8 Citar texto 127
5.9 Dar ênfase ao texto 128
5.10 Dividir em secções 129
5.11 Listas 130
5.11.1 Listas imbricadas 133
5.11.2 Listas de definições 134
5.12 Importar texto 136
5.13 Integração com o Microsoft Word 140
5.14 Localizar e substituir 142
5.15 Dicionário 142
6 Imagens 145
6.1 Formatos de imagens 147
6.1.1 Formato GIF 147
6.1.2 Formato JPEG 148
6.1.3 Formato PNG 148
6.1.4 Formato SVG 149
6.2 Inserção de imagens 150
6.2.1 Image placeholders 153
6.2.2 Posicionar imagens 154
6.3 Optimizar e alterar imagens 157
6.3.1 Crop 157
6.3.2 Redimensionar 159
6.3.3 Luminosidade e contraste 160
6.3.4 Melhorar a definição 161
6.3.5 Optimizar imagens 161
6.3.6 Editar imagens num programa externo 163
6.3.7 Integração com o Photoshop 166
7 Hiperligações 169
7.1 Tipos de links 169
7.2 Criar links 171
7.2.1 Links para páginas externas ao site 175
7.3 Propriedades dos links 175
7.3.1 Abrir páginas em janelas ou separadores do browser 175
7.3.2 Outras propriedades dos links 176
7.4 Links em imagens 177
7.5 Links para ficheiros PDF e outros 178
7.6 Outro tipo de links 179
7.7 Links internos a uma página 181
7.7.1 Criar named anchors 181
7.7.2 Elementos invisíveis 182
7.7.3 Criar links para aceder às named anchors 184
7.7.4 Named anchors externas 186
7.8 Image maps 187
ÍNDICE 9
8 Tabelas 191
8.1 Criar uma tabela 192
8.2 Estrutura de uma tabela 194
8.3 Alterar uma tabela 195
8.3.1 Seleccionar uma tabela 196
8.3.2 Largura da tabela e das colunas 196
8.3.3 Seleccionar linhas e colunas 198
8.3.4 Inserir linhas e colunas 199
8.3.5 Alinhamento vertical 201
8.3.6 No wrap 202
8.3.7 Fundir e dividir células 204
8.4 Importar dados num formato tabular 206
8.5 Acessibilidade em tabelas 208
8.6 Outros elementos e atributos de uma tabela 210
8.7 Ordenar os dados de uma tabela 212
8.8 Modo expandido 213
9 Formulários 215
9.1 Criar um formulário 216
9.1.1 Propriedades do formulário 218
9.2 Campos de texto 219
9.2.1 Text 220
9.2.2 Atributos de acessibilidade 220
9.2.3 Atributos dos campos de texto 223
9.2.4 Textarea 224
9.2.5 Password 226
9.3 Radio buttons 227
9.4 Checkboxes 232
9.5 Select 235
9.5.1 Jump menu 240
9.6 Botões 241
9.6.1 Botões do tipo imagem 242
9.7 Melhorar a organização do formulário 243
9.8 Outros campos 246
10 Conteúdo multimédia 249

10.1 Conteúdo Flash em páginas Web 249
10.1.1 Propriedades de uma animação Flash 254
10.1.2 Detecção do Flash Player 258
10.2 Integração do Flash com o Dreamweaver 259
10.3 Vídeo Flash 261
10.4 Outros conteúdos multimédia 264
10.4.1 Áudio 264
10.4.2 Vídeo 266
10.4.3 Filmes Shockwave 266
10.4.4 Applets Java 267
10.4.5 Controlos ActiveX 268
11 CSS (Cascading Style Sheets) 269

11.1 Criar uma identidade para o sítio Web 271
11.2 Anatomia de um estilo CSS 272
11.3 Criar estilos CSS 273
11.3.1 Painel CSS STYLES 277
11.3.2 Editar um estilo CSS 279
11.3.3 Eliminar propriedades e estilos CSS 281
11.3.4 Formatar outros elementos 282
11.3.5 Utilização de cores 283
11.4 Utilizar ids em estilos 286
11.5 Classes CSS 288
11.6 Utilizar ficheiros CSS 292
11.6.1 Exportar estilos para um ficheiro CSS 292
11.6.2 Ligações a ficheiros CSS 295
11.7 Cascading 297
11.7.1 Propriedades da página 298
11.7.2 Estilos inline, internos e externos 300
11.7.3 Precedência 303
11.8 Selectores descendant 305
11.9 Activar e desactivar propriedades CSS 310
11.10 Informação sobre os estilos CSS de um elemento 311
ÍNDICE 11
11.10.1 CODE NAVIGATOR 313

11.10.2 Modo INSPECT 315
11.11 Preferências na utilização de CSS 318

11.11.1 Preferências para o código 318
11.11.2 Outras preferências 320
11.12 Barra STYLE RENDERING 322
11.13 Design-Time style sheets 328
11.14 Verificar a compatibilidade do browser 329
12 Formatar texto com CSS 331

12.1 Famílias de tipos de letra 332
12.1.1 Serif e sans-serif 333
12.1.2 Font stacks 333
12.1.3 Tamanho de letra 335
12.2 Aspecto do texto 338
12.2.1 Font-weight 338
12.2.2 Font-style 339
12.2.3 Font-variant 339
12.2.4 Text-transform 340
12.2.5 Text-decoration 340
12.3 Espaçamento entre palavras e caracteres 341
12.4 Espaçamento entre linhas 342
12.5 Espaçamento entre parágrafos 344
12.6 Box Model 349
12.6.1 Padding 349
12.7 Alinhar texto 351
12.7.1 Alinhamento vertical 352
12.8 Listas 353
12.8.1 Listas de definições 360
12.9 Selectores específicos dos links 364
13 Layout de páginas Web 369

13.1 Utilizar tabelas para layout 369
13.2 Frames 374
13.3 Layouts CSS 382
13.3.1 Tracing image 382
13.3.2 Elementos block-level versus elementos inline 384
13.3.3 O elemento div 385
13.3.4 Opções de visualização dos elementos CSS 387
13.3.5 Utilização de floats 389
13.3.6 Layouts baseados em floats 390
13.3.7 Starter Pages 400
13.3.8 Posicionamento absoluto de elementos 403
13.3.9 Posicionamento relativo 408
14 Behaviors JavaScript 413

14.1 Behaviors, eventos e acções 413
14.2 Utilizar behaviors 416
14.2.1 O painel BEHAVIORS 416
14.2.2 Criar uma behavior 417
14.2.3 Gerir eventos 418
14.3 Swap Image e Swap Image Restore 419
14.3.1 Swap Image Restore 421
14.3.2 Preload Images 421
14.3.3 Rollover Image 422
14.4 Call JavaScript 424
14.5 Trabalhar com janelas de pop-up 424
14.6 Show-Hide Elements 425
14.7 Set Text 426
14.7.1 Set Text of Container 427
14.7.2 Set Text of Frame 427
14.7.3 Set Text of Status Bar 428
14.7.4 Set Text of Text Field 429
14.8 Check Plugin 430
14.9 Go to URL 431
ÍNDICE 13
14.10 Drag AP Element 432

14.11 Pop-up message 436
14.12 Spry Effects 436
14.12.1 Appear/Fade 437
14.12.2 Blind 438
14.12.3 Grow/Shrink 438
14.12.4 Highlight 439
14.12.5 Shake 440
14.12.6 Slide 441
14.12.7 Squish 441
14.13 Utilizar outras behaviors 442
14.13.1 Instalar behaviors 443
15 Navegação com Spry Widgets 445

15.1 Spry widgets 445
15.2 Spry Menu Bar 447
15.2.1 Criar um menu de navegação 451
15.2.2 Alterar o aspecto de uma Spry Menu Bar 452
15.2.3 Aplicar estilos ao nosso menu exemplo 459
15.2.4 Remover uma Spry Menu Bar 461
15.3 Spry Tabbed Panel 461
15.3.1 Formatar os painéis 463
15.4 Spry Accordion Panel 466
15.4.1 Formatar um Spry Accordion Panel 469
15.5 Spry Collapsible Panel 472
15.5.1 Formatar a aparência de um SPRY COLLAPSIBLE PANEL 474
15.6 Spry Tooltip 476
15.7 Widget Browser 478
16 Validação de formulários 483

16.1 Validação com widgets Spry 483
16.1.1 Utilizar widgets de validação com tabelas 485
16.2 Spry Validation Text Field 486
16.2.1 Preview States 489

16.2.2 Criar padrões personalizados de validação 489
16.2.3 Alterar a aparência dos campos e das mensagens de erro 490
16.3 Spry Validation Textarea 491
16.4 Spry Validation Checkbox 494
16.5 Spry Validation Select 496
16.6 Spry Validation Password 498
16.7 Spry Validation Confirm 501
16.8 Spry Validation Radio Group 502
16.9 Conclusão 504
Prefácio
Introdução
O desenvolvimento de sítios Web, partilhado, entre outros, por informáticos,
designers, arquitectos de informação e profissionais de marketing, tem sido
uma das actividades que mais alterações tem sofrido ao longo dos seus pou-
cos anos de existência. O desenho de páginas Web está em constante evolu-
ção, passando de estáticas para interactivas e depois para dinâmicas.
Originalmente criadas em simples editores de texto, com o desenvolvimento
das tecnologias que possibilitam a criação de páginas cada vez mais comple-
xas, foram surgindo aplicações para simplificar o trabalho dos web designers e
dos web developers. O Adobe Dreamweaver é uma das aplicações que, ao
longo de diversas versões, soube acompanhar a evolução dos sítios Web.
Aplicação de web design por excelência, disponibiliza inúmeras funcionalida-
des que facilitam o dia-a-dia do web designer. A integração com outras aplica-
ções da Adobe, como o Adobe Photoshop e o Adobe Fireworks, e com os ser-
viços online que a Adobe disponibiliza, como o BrowserLab, e a integração do
WebKit, que permite uma rápida pré-visualização das páginas dentro do pró-
prio Dreamweaver, são pontos fortes desta aplicação.
Mas é sobretudo a facilidade de utilização do ambiente de trabalho, o facto de
se poderem criar páginas Web sem recorrer ao código, as funcionalidades
avançadas de criação, aplicação e interacção com as Cascading Style Sheets,
e, mais recentemente, a integração da Spry framework, que tornam o Dream-
weaver uma ferramenta de excelência na criação de sítios Web.
Público-alvo e pré-requisitos
Este livro é destinado a todos os web designers, existentes ou potenciais, que
pretendam desenvolver competências sobre a criação de sítios Web.
Não é exigida nenhuma experiência ao nível do desenho de páginas Web,
dado que o livro pretende ser acessível a qualquer pessoa que tenha interesse
no desenvolvimento de sítios Web.
Características principais do livro

Neste livro todos os capítulos tentam ter uma componente prática, mesmo
aqueles em que são apresentadas, de forma mais ‘teórica’, as tecnologias que
vão ser utilizadas.
Existem diversos projectos práticos, do tipo ‘exercício guiado’, em que o leitor
pode reproduzir, passo-a-passo, a demonstração ou projecto a desenvolver.
Todos os capítulos encontram-se profusamente ilustrados. Este aspecto é
considerado fundamental de forma a melhor guiar o leitor na reprodução dos
passos a efectuar em cada projecto.
Os ficheiros dos exemplos práticos encontram-se disponíveis para os leitores.
Veja na página 20 como pode ter acesso a esses ficheiros.
Convenções usadas
Este livro utiliza diversas convenções com vista a facilitar a assimilação da
informação:
Termos em inglês são apresentados, de uma forma geral, em itálico:
« Utilizando as behaviors JavaScript, que são »
«... não aparecerá nenhuma lista de drop-down.»
O código encontra-se formatado em Courier New:
#conteudo {
background-color: #FF0;
margin-bottom: 10px;
}
As alterações a serem efectuadas no código são assinaladas a negrito:

<textarea name="comentarios" id="comentarios" cols="45"
rows="5"></textarea> Caracteres introduzidos: <span
id="countsprytextarea1"> </span>
O acesso a opções de menus ou de caixas de diálogo é formatado em

letras maiúsculas pequenas. O carácter ‘>’ é utilizado para separar o
menu da opção:
«... seleccionamos a opção INSERT > FORM > TEXT FIELD»
Combinações de teclas são identificadas através do carácter ‘+’. Por
exemplo, CTRL+TAB significa pressionar a tecla ‘Control’ e, mantendo
esta tecla premida, de seguida premir a tecla ‘Tab’, soltando depois as
duas teclas.
PREFÁCIO 17
Visão geral e Organização

Este livro está organizado em dezasseis capítulos:
Capítulo 1 – Web Design. Apresentação das tecnologias utilizadas no
desenvolvimento de páginas e sítios Web, e das novidades da versão
CS5 do Dreamweaver.
Capítulo 2 – Ambiente de trabalho. Descrição do ambiente de traba-
lho do Dreamweaver CS5, nomeadamente as barras de ferramentas,
os painéis, os workspaces e a janela de documento.
Capítulo 3 – Sítios Web. Descreve a definição e gestão de sítios Web
no Dreamweaver CS5.
Capítulo 4 – Documentos. Aborda a criação e gestão de documentos
no Dreamweaver, a estrutura dos documentos HTML e a pré-visualiza-
ção de páginas nos browsers, a utilização do serviço online Browser-
Lab e das ferramentas Multiscreen e Device Central.
Capítulo 5 – Trabalhar com texto. Explica a estruturação do texto em
páginas Web e os elementos HTML utilizados para essa operação.
Capítulo 6 – Imagens. Enumera os diferentes formatos de imagens
que podem ser utilizados em páginas Web e a sua alteração e optimi-
zação em integração com o Adobe Photoshop e o Adobe Fireworks.
Capítulo 7 – Hiperligações. Neste capítulo são apresentadas as
hiperligações, a sua utilização em páginas Web e os seus diferentes
tipos.
Capítulo 8 – Tabelas. Descreve a utilização de tabelas para a apre-
sentação de dados em formato tabular.
Capítulo 9 – Formulários. Explica a criação de formulários, e cada
um dos tipos diferentes de campos que podem ser utilizados para inte-
ragir com os visitantes das páginas Web.
Capítulo 10 – Conteúdo multimédia. Apresenta a forma como o con-
teúdo multimédia, nomeadamente animações e filmes Flash, podem
ser integrados em páginas Web.
Capítulo 11 – CSS (Cascading Style Sheets). Neste capítulo são
introduzidos os conceitos associados às folhas de estilos CSS, e as
funcionalidades existentes no Dreamweaver para trabalhar com esta
tecnologia.
Capítulo 12 – Formatar texto com CSS. Detalha as propriedades
CSS que são utilizadas com elementos textuais para a sua formata-
ção.
Capítulo 13 – Layout de páginas Web. Enumera todos os métodos

que podem ser utilizados para desenhar layouts de páginas Web, no-
meadamente, as tabelas, as frames, e as CSS.
Capítulo 14 – Behaviors JavaScript. Explica as behaviors JavaScript
que estão disponíveis no Dreamweaver para a criação de páginas inte-
ractivas.
Capítulo 15 – Navegação com Spry Widgets. São apresentados os
widgets Spry que permitem criar elementos de navegação, nomeada-
mente navigation bars, jump menus, pop-up menus, painéis e tooltips.
Capítulo 16 – Validação de formulários. Aborda a validação da infor-
mação introduzida pelo utilizador em formulários, recorrendo a widgets
Spry Validation.
Sobre o Autor
Pedro Remoaldo
Pedro Remoaldo é licenciado em Informática, formador e consultor em sistemas
e tecnologias de informação com cerca de uma década de experiência como
docente no ensino superior.
Autor de 17 livros sobre sistemas operativos, software, Internet, segurança e
web development, dos quais os 10 títulos mais recentes foram publicados pelo
Centro Atlântico.
Os seus interesses são bastante abrangentes, mas dedica particular atenção às
tecnologias Internet, aos sistemas de gestão de bases de dados e ao Business
Intelligence.
Torne a sua leitura mais produtiva,
reproduzindo os exemplos do livro
no seu computador
OFERTA:
Envie um e-mail* para dreamweaver@centroatl.pt
para receber os endereços de Internet de onde
poderá fazer o download dos ficheiros de apoio
deste livro (bem como futuras actualizações e
outras informações sobre os nossos livros).
Indique por favor o seu nome, bem como a data e
local de compra do livro, para poder receber os
ficheiros gratuitamente.
* O leitor consente, de forma expressa, a incorporação e o tratamento dos seus da-

dos nos ficheiros automatizados da responsabilidade do Centro Atlântico, para os
fins comerciais e operativos do mesmo. O leitor fica igualmente informado sobre a
possibilidade de exercer os direitos de acesso, rectificação e cancelamento dos seus
dados nos termos estabelecidos na legislação vigente, junto do Centro Atlântico, por
qualquer meio escrito.
1 Web Design
O desenvolvimento de projectos Web é uma actividade que junta vários sa-

beres e tecnologias para produzir sites visualmente agradáveis, funcionais e
que forneçam a informação ou o serviço pretendido pelo visitante.
Quando se fala de páginas ‘estáticas’ e de interface com o utilizador associa-
-se normalmente o conceito de Web Design.
Embora muitas vezes este conceito seja utilizado para designar a construção
de um sítio Web, incluindo páginas dinâmicas e bases de dados, cada vez
mais é restringido o seu âmbito às tecnologias client-side.
Um Web Designer será então um profissional que desenha interfaces e pági-
nas Web, recorrendo a princípios de design e a ferramentas como o Adobe
PhotoShop, Adobe Illustrator, Adobe Fireworks, e a editores de HTML (Adobe
Dreamweaver, Microsoft Expression Web, Microsoft Visual Studio, …).
É também o responsável pela criação e/ou manipulação de todas as imagens
utilizadas no sítio Web. Deverá conhecer, preferencialmente, CSS e, se pos-
sível, HTML.
Para efectuar este trabalho é sobretudo necessário ter capacidade artística e
criatividade.
1.1 Tecnologias client-side

Existem diversas tecnologias que são utilizadas na construção de páginas
Web (também conhecidas por tecnologias client-side).
Dependendo da audiência, a maior parte dos visitantes utilizam os browsers
mais recentes que suportam CSS avançadas e JavaScript, mas muitos visi-
tantes podem estar sujeitos a políticas internas do departamento de informá-
tica que os força a utilizar browsers mais antigos ou a navegar com algumas
funcionalidades (como o JavaScript) desactivadas.
As pessoas com problemas de visão navegam muitas vezes utilizando leitores
de ecrã (screen readers) ou software de ampliação, e para estes um design
bastante sofisticado de uma página pode ser um empecilho.
Alguns utilizadores não visitarão mesmo o seu sítio Web, preferindo ler content
feeds, utilizando RSS. Quando se constrói estes feeds, quererá enviar o seu
conteúdo HTML sem qualquer código JavaScript ou estilos CSS.
A forma de acomodar o maior intervalo possível de visitantes é pensar na cria-
ção de páginas Web como utilizando um modelo de três camadas. Este é o
modelo aconselhado pelo W3C (World Wide Web Consortium – www.w3c.org), a
entidade responsável pela criação das normas que gerem a Internet.
As camadas são:
Estrutura Apresentação
HTML CSS
XHTML XSL
XML XSLT
Comportamento
ECMAScript
(JavaScript)
DOM
Como pode verificar pelo gráfico, as tecnologias são normalmente divididas

em três áreas:
• Estrutura (structure) – define o conteúdo e a estrutura desse conteúdo.
• Apresentação (presentation) – define a aparência do conteúdo na
página, incluindo tipo de letra, cor do texto, alinhamento do texto e das
imagens, etc.
• Comportamento (behaviour) – define a interacção entre o utilizador e a
página. Exemplo típico são os botões ou links que mudam de cor ou de
imagem quando o cursor passa por cima.
Utilizando este modelo, quando se constrói um sítio Web devemos seguir a
seguinte sequência:
• Começamos com a produção de conteúdo e estrutura da página utili-
zando a linguagem HTML. Esta é a camada base que qualquer visitante,
utilizando qualquer tipo de browser, deve ser capaz de ver. Não existem
aqui preocupações com o aspecto visual do conteúdo na página.
• Com o conteúdo definido damos agora importância à aparência visual
do sítio Web, adicionando uma camada de informação de apresentação
1. WEB DESIGN 23
recorrendo às CSS. As CSS permitem definir o tipo de letra, cor do texto

e alinhamento (entre outras propriedades) dos elementos existentes nu-
ma página (texto, imagens, etc.).
• Finalmente, podemos utilizar o JavaScript para introduzir uma camada
adicional de interactividade e comportamento dinâmico, que tornará a
navegação do sítio Web mais agradável quando se utilizem browsers
que suportem JavaScript. Um exemplo típico são os links que mudam de
cor quando o rato passa por cima. Também é possível disponibilizar
alguma interactividade recorrendo às CSS.
Este modelo de três camadas torna mais fácil a reutilização de porções do
código em projectos futuros, reduz a quantidade de código duplicado e torna
mais fácil localizar e resolver problemas umas semanas, meses ou anos mais
tarde. Permite também lidar com as diferentes formas como as pessoas
acedem às páginas Web (browsers, PDAs, tablets e smartphones, entre outros
dispositivos).
Se mantivermos o código HTML, CSS e JavaScript separado, será possível
que a camada de conteúdo permaneça utilizável em ambientes onde as cama-
das de apresentação e/ou comportamento não podem operar. Este método é
conhecido por progressive enhancement.
1.1.1 HTML
A HTML (Hypertext Markup Language) é a linguagem de ‘marcação’ mais uti-
lizada para a criação de páginas Web. Permite a descrição da estrutura da
informação existente num documento, quer seja textual (através de
cabeçalhos, parágrafos e listas, entre outros), quer sejam formulários
interactivos, imagens e outros objectos (como filmes, animações ou áudio).
A HTML é escrita na forma de etiquetas (conhecidas por tags), que são colo-
cadas entre os sinais < e >. Um conjunto de etiquetas de início e de fim, bem
como o respectivo conteúdo, tem o nome de elemento HTML.
A etiqueta de fim é idêntica à etiqueta de início, excepto que o texto na etique-
ta de fim é precedido por um símbolo “/”. Por exemplo:
<p>Exemplo de um parágrafo</p>
A estruturação é aplicada ao texto existente entre a etiqueta de início e a eti-

queta de fim, que corresponde ao conteúdo do elemento.
Exemplo de ‘código’ HTML:
<html>
<head>
<title>Página teste</title>
</head>
<body>
<h1>Bem-vindo ao Centro das Artes</h1>

<p>Se pretender contactar-nos utilize o seguinte
endereço de e-mail:</p>
...
</body>
</html>
Um programa utilizado pelo visitante (que tem a designação genérica de user-

agent), e que é normalmente um browser, interpreta os elementos HTML, para
determinar como é que o documento deve ser apresentado ao utilizador.
Alguns elementos não necessitam de uma etiqueta de fim porque não estrutu-
ram ou formatam conteúdo. São os chamados elementos vazios (empty ele-
ments). Um exemplo é o <img> que permite a inserção de uma imagem numa
página Web.
A especificação HTML define o tipo de conteúdo que pode estar contido entre
as etiquetas de um elemento, e que pode incluir outros elementos, texto, uma
mistura de elementos e texto, ou nem elementos nem texto.
A estrutura de um documento HTML é definida numa norma da W3C (World
Wide Web Consortium) que pode obter no endereço http://www.w3.org/html. A
norma actual é a HTML 4.01, que foi publicada em 24 de Dezembro de 1999.
Encontra-se em desenvolvimento uma nova norma, a HTML 5, que já é par-
cialmente suportada pelos browsers mais recentes. Introduz novos elementos
e novas funcionalidades que permitem criar páginas mais parecidas com as
produzidas pelo Adobe Flash.
1.1.2 XML
A eXtensible Markup Language é uma linguagem de marcação genérica. O
principal propósito desta linguagem é facilitar a partilha de dados entre siste-
mas diferentes, particularmente através da Internet.
Algumas das linguagens actualmente utilizadas na Internet são baseadas no
XML, como o XHTML, o RSS e o SVG, entre outras.
Exemplo do conteúdo de um ficheiro XML:
<?xml version="1.0" encoding="UTF-8"?>
<alunos>
<aluno>
<nome>Elsa Bessa</nome>
<empresa>Oceano de Ideias</empresa>
</aluno>
...
</alunos>
Esta tecnologia está normalmente associada às páginas dinâmicas ou ao

AJAX, uma tecnologia recente que combina o XML com o JavaScript.
1. WEB DESIGN 25
1.1.3 XHTML
A eXtensible HyperText Markup Language é uma linguagem de marcação
semelhante ao HTML, mas que obedece às regras mais rígidas do XML.
Enquanto a HTML é uma aplicação da SGML, uma linguagem de marcação
muito flexível, a XHTML é uma aplicação da XML, um subconjunto mais restri-
tivo da SGML.
A XHTML pode ser vista como uma reformulação da HTML utilizando XML. A
XHTML 1.0 tornou-se uma recomendação do W3C, em Janeiro de 2000, e a
XHTML 1.1 tornou-se uma recomendação do W3C em Maio de 2001. Como
parte da especificação HTML5, está a ser desenvolvida a XHTML5.
1.1.4 CSS
As Cascading Style Sheets são uma linguagem de folhas de estilo utilizada
para descrever a apresentação visual de um documento escrito numa lingua-
gem de marcação como o HTML, o XHTML ou mesmo o XML.
As normas associadas às CSS definem vários níveis e ‘perfis’, que podem ser
suportados pelos browsers. Cada nível das CSS é construído ‘em cima’ do
nível anterior, adicionando novas funcionalidades. Actualmente existem basi-
camente três níveis: CSS1, CSS2 e CSS3.
Os perfis (profiles) são subconjuntos de um ou mais níveis das CSS que foram
criados para um determinado equipamento ou interface com o utilizador.
Existem perfis para equipamentos móveis, impressoras e televisores.
Exemplo de estilos CSS:
p {
font-family: Arial, serif;
}
#tabelanotas {
margin: 0;
}
a:hover {
text-decoration: none;
}
1.1.5 JavaScript
A JavaScript é uma linguagem de scripting utilizada em browsers Web, o que
significa que é utilizada em conjunto e ‘dentro’ de outras linguagens como o
HTML. Não tem nenhuma relação com a linguagem Java, embora a sua
sintaxe seja muito parecida. Criada pela Netscape Communications,
originalmente o seu nome era LiveScript, e mais tarde deu origem a uma
norma, a ECMAScript.
A JavaScript é a única linguagem de programação de uso geral que se utiliza

no lado do cliente (client-side) e os scripts Javascript são executados pelo
browser.
A JavaScript, ou variantes (como o JScript da Microsoft), é suportada pela
generalidade dos browsers existentes no mercado.
Actualmente a JavaScript ‘está na moda’ devido a uma tecnologia da Web 2.0
chamada AJAX (Asynchronous Javascript And XML) que permite a criação de
aplicações Web interactivas com acesso a dados dinâmicos. O objectivo é tor-
nar as páginas mais interactivas trocando pequenas quantidades de dados
com o servidor sem as páginas Web serem redesenhadas e sem o utilizador
se aperceber do facto.
O AJAX não é uma tecnologia per se, mas sim um grupo de tecnologias utili-
zadas em conjunto.
1.2 Ferramentas de Web Design

Além das ferramentas de criação e manipulação de imagens (como o Adobe
Photoshop, o Adobe Illustrator e o Adobe Fireworks), que estão fora do âmbito
deste livro, o web designer utiliza, para o desenvolvimento de páginas Web,
uma de três categorias de ferramentas:
• Editores ou processadores de texto
É possível criar páginas Web recorrendo apenas ao NOTEPAD [BLOCO DE
NOTAS] e a um browser.
Utiliza-se o NOTEPAD [BLOCO DE NOTAS] (ou outro editor de texto) para
escrever código HTML e guardá-lo num ficheiro com a extensão .html
ou .htm. Depois, utiliza-se um browser (como o Internet Explorer ou o
Mozilla Firefox) para visualizar as páginas criadas.
Pode-se também utilizar um editor rudimentar (mas ainda assim bas-
tante mais sofisticado do que o NOTEPAD [BLOCO DE NOTAS]), como o
EditPlus ou o TextWrangler, ou mesmo processadores de texto como o
Microsoft Word.
A maior parte dos editores de texto actuais incluem funcionalidades
como a utilização de cores para realçar a sintaxe, invocação de aplica-
ções externas e possibilidade de utilização de expressões regulares pa-
ra localizar e substituir texto.
1. WEB DESIGN 27
• Editores HTML em modo código

Os editores HTML (HTML Editors) são editores de texto criados especi-
ficamente para lidar com linguagens de programação ou formatação
específicas da World Wide Web.
Têm funcionalidades típicas de um editor de texto, como utilização de
cores para realçar a sintaxe, invocação de aplicações externas e
expressões regulares, mas acrescentam funcionalidades específicas
das linguagens que suportam, como auto-completion, ajuda contextual,
etc.
Alguns dos editores HTML em modo código mais conhecidos são:
Aptana, Komodo, TopStyle e Arachnophilia.
• Editores HTML em modo gráfico (WYSIWYG)
Mais recentemente apareceram programas que permitem ‘desenhar’ a
interface de uma página Web de forma livre, como se fossem um cru-
zamento dos programas Adobe PhotoShop e Microsoft Word. Funcio-
nam no modo WYSIWYG (W HAT YOU SEE IS WHAT YOU GET), isto é, tudo
o que o web designer criar e visualizar num destes programas será
exactamente o que o utilizador visualizará posteriormente num browser.
Estes editores são bastante sofisticados, possuindo todas as ferramen-
tas necessárias para o web designer criar a interface de um sítio Web.
Alguns deles incluem mesmo interligações com outros programas como
o Adobe Photoshop, o Adobe Flash e o Adobe Fireworks.
Neste segmento a oferta mais vasta é a da Microsoft, que disponibiliza
os seguintes produtos:
o Microsoft Expression Web
o Microsoft Office SharePoint Designer
o Microsoft Visual Studio
Um dos maiores problemas da utilização destas aplicações da Microsoft
é que apenas estão disponíveis em sistemas operativos Windows (XP,
Vista, 7), e muitos dos web designers trabalharem com Macintosh.
O Adobe Dreamweaver é dos poucos editores HTML em modo gráfico
que está disponível tanto para Windows como para Mac OS.
1.3 Adobe Dreamweaver

O Adobe Dreamweaver é também a aplicação mais utilizada a nível profissio-
nal no desenho de páginas e sítios Web, sendo líder no mercado com cerca
de 70% de quota.
É um editor do tipo WYSIWYG que foi criado originalmente pela Macromedia,

sendo actualmente disponibilizado pela Adobe, dado que esta empresa com-
prou a Macromedia.
Ao longo do tempo foram lançadas várias versões, e actualmente é lançada
uma versão de 18 em 18 meses. Tendo começado por ser um simples editor
HTML, o Dreamweaver evoluiu para um editor WYSIWYG, e a partir da versão
4 passou a ser o programa de Web Design mais sofisticado e completo do
mercado.
O Dreamweaver é primariamente uma ferramenta do tipo WYSIWYG, utilizada
para o desenvolvimento de sítios Web, que também pode ser utilizada para a
introdução manual de código HTML/XHTML, bem como outras linguagens
(PHP, ColdFusion, etc.).
Para utilizar o Dreamweaver, um web designer não tem de perceber HTML,
CSS ou JavaScript, dado que o programa ‘esconde’ o código produzido
quando se utiliza apenas o ambiente ‘gráfico’.
Mas em qualquer altura pode mudar para a ‘vista’ de código, onde possui fun-
cionalidades típicas de um editor de texto, nomeadamente a utilização de
cores para realçar a sintaxe, auto-completion, invocação de aplicações exter-
nas, numeração de linhas e a possibilidade de utilização de expressões regu-
lares para localizar e substituir texto.
Suporta uma grande variedade de tecnologias Web client-side (HTML,
XHTML, CSS, Javascript e AJAX) e server-side (ASP, ColdFusion e PHP),
também trabalhando com bases de dados (MySQL).
Permite uma gestão rápida e eficaz dos ficheiros utilizados na produção de
sítios Web, e disponibiliza funcionalidades para o trabalho em equipa. Possui
um motor interno de FTP, que pode ser utilizado para transferir ficheiros para o
servidor Web de alojamento, mas também suporta outros métodos de transfe-
rência de ficheiros.
A sua arquitectura extensível permite a utilização de extensões que adicionam
mais funcionalidades ao programa.
1.3.1 Versões disponíveis

O Dreamweaver CS5 existe como produto independente ou integrado nos
seguintes conjuntos de produtos Adobe:
• Adobe Creative Suite 5 Design Premium
• Adobe Creative Suite 5 Web Premium
• Adobe Creative Suite 5 Master Collection
1. WEB DESIGN 29
Existe ainda uma versão de experimentação (trial version) que pode ser des-
carregada através da Internet acedendo ao sítio http://www.adobe.com/downloads/.
Esta versão é válida por um período de 30 dias.
Caso possua o Dreamweaver 8, CS3 ou CS4 pode fazer a actualização para a
versão CS5.
1.3.1.1 Actualizações
Periodicamente a Adobe lança actualizações gratuitas do Dreamweaver que
corrigem problemas identificados (bugs) e/ou introduzem novas funcionalida-
des.
Com os problemas que ocorreram com o não suporte do Flash Player no
iPhone e no iPad, e com a aposta da Apple nas tecnologias HTML5 e CSS3, a
Adobe viu-se forçada a disponibilizar alguma funcionalidade do HTML5 no
Dreamweaver CS5. Inicialmente disponível no Dreamweaver CS5 HTML 5
Pack Update, mais tarde foi integrado na actualização 11.0.3.
1.3.2 Requisitos de sistema

De forma a se poder utilizar o Dreamweaver de forma funcional, é necessário
que o computador possua idealmente determinadas características mínimas,
se bem que seja ideal um computador com características mais poderosas.
Para o Windows:
• Processador Intel Pentium 4 ou AMD Athlon 64;
• Microsoft Windows XP com o Service Pack 2 (o Service Pack 3 é reco-
mendado); Windows Vista Home Premium, Business, Ultimate, ou
Enterprise com o Service Pack 1; ou o Windows 7;
• 1GB de memória;
• 1GB de espaço livre em disco. Pode ser necessário espaço adicional
durante a instalação;
• Monitor com resolução de 1280x800 píxeis e placa gráfica com suporte
de 16 bits de cor. Embora possa ser utilizada uma resolução de
1024x768 píxeis.
• Unidade de DVD-ROM;
• Para a activação do produto é necessário ligação à Internet, preferen-
cialmente, embora a activação também possa ser efectuada através do
telefone;
• Ligação à Internet de banda larga para usufruir dos serviços online que
a Adobe disponibiliza.
Para o Macintosh:
• Processador Intel de múltiplos núcleos (por exemplo, Dual Core);
• Mac OS X v.10.5.7 ou v10.6;
• 1GB de memória;
• 1,8GB de espaço livre em disco. Pode ser necessário espaço adicional
durante a instalação;
• Monitor com resolução de 1280x800 píxeis e placa gráfica com suporte
de 16 bits de cor;
• Unidade de DVD-ROM;
• Para a activação do produto é necessário ligação à Internet, preferen-
cialmente, embora a activação também possa ser efectuada através do
telefone;
• Ligação à Internet de banda larga para usufruir dos serviços online
disponíveis.
1.4 Novidades no Dreamweaver CS5

O Dreamweaver é utilizado preferencialmente por web designers, embora
tenha vindo a melhorar as funcionalidades disponíveis para o desenvolvimento
de aplicações dinâmicas por web developers.
Uma das novidades que agradará tanto aos web designers como aos web
developers é a simplificação do processo de criação de um novo sítio:
Agora, para criar um novo sítio Web, só é necessário fornecer o respectivo

nome e a localização da pasta onde ele vai ficar ‘alojado’ ou onde ele já exista.
1. WEB DESIGN 31
Sempre que, ao longo do trabalho, o Dreamweaver CS5 necessitar de mais in-

formação para configurar o sítio Web, ele pede-a.
1.4.1 Para os web designers

As novas funcionalidades específicas para os web designers centram-se so-
bretudo na utilização das CSS.
1.4.1.1 Adobe BrowserLab

O Dreamweaver CS5 integra-se com o Adobe BrowserLab, que é um serviço
online CS Live, que permite testar o sítio numa grande variedade de browsers.
Permite a comparação, lado a lado, do aspecto de uma página em dois brow-
sers diferentes.
Este serviço funciona através de cópias de ecrã (screenshots) da página cor-

rente tal como ela aparecerá em diferentes browsers. As imagens produzidas
podem ser visualizadas no sítio Web do BrowserLab.
O BrowserLab também pode ser utilizado como um serviço próprio sem neces-
sidade de o aceder através do Dreamweaver (ver a página http://browserlab.adobe
.com). A vantagem de utilizar o BrowserLab a partir do Dreamweaver é que po-
demos testar as páginas sem ter de as publicar num servidor remoto.
1.4.1.2 CSS Disable/Enable

Agora é possível desactivar e reactivar propriedades CSS directamente a par-
tir do painel CSS STYLES:
Ao desactivar uma propriedade CSS, o Dreamweaver transforma-a simples-

mente num comentário.
1.4.1.3 CSS Inspection

O modo INSPECT permite visualmente mostrar as propriedades do box model
das CSS (incluindo padding, border e margin), em detalhe, sem ser necessário
aceder ao código. Isto é, ao activarmos este modo, sempre que passarmos
com o rato por cima de um elemento da página no Dreamweaver, aparecem
as propriedades CSS respectivas no painel CSS STYLES, além de aparecerem
os limites do elemento, as respectivas margens e o padding identificados com
cores distintas:
Funciona de uma forma parecida com o add-on Firebug do Firefox.
1.4.1.4 CSS Starter Layouts

A Adobe incluiu no Dreamweaver CS5 starter pages actualizadas e simplifica-
das. A simplificação em relação às starter pages do Dreamweaver CS4 tem a
ver com o tipo de selectors CSS utilizados. Esta alteração só é perceptível
quando se analisa o código HTML e CSS produzido por uma starter page.
1. WEB DESIGN 33
As starter pages permitem aos web designers mais inexperientes terem uma
base de trabalho sólida com modelos de páginas bem estruturados.
1.4.2 Para os web developers

Quando parecia que a Adobe ia deixar de considerar o Dreamweaver como
uma ferramenta de desenvolvimento de páginas dinâmicas, para se concentrar
no web design, eis que a versão CS5 nos traz importantes novidades nesta
área.
1.4.2.1 Integração com o Business Catalyst

O Adobe Business Catalyst (http://businesscatalyst.com/) é uma aplicação alojada
num servidor que substitui as ferramentas tradicionais utilizadas para o desen-
volvimento de sítios Web, por uma plataforma central. Permite criar sítios so-
fisticados com recurso a bases de dados, incluindo lojas online:
A integração com o Business Catalyst tem a forma de uma extensão ao

Dreamweaver CS5 (anteriormente chamada Triangle) que preenche o painel
BUSINESS CATALYST, e que facilita o acesso às funcionalidades do Business
Catalyst a partir do ambiente de trabalho do Dreamweaver:
1.4.2.2 Suporte integrado de CMS PHP

A funcionalidade DYNAMICALLY-RELATED FILES permite descobrir todos os
ficheiros e scripts externos referenciados por páginas PHP de sistemas de
gestão de conteúdos (Content Management Systems), e apresentar o nome
desses ficheiros na barra RELATED FILES:
Por omissão, o Dreamweaver CS5 suporta esta funcionalidade para os siste-

mas de gestão de conteúdos WordPress, Drupal e Joomla!
1.4.2.3 Navegação Live View

Agora, quando estamos na LIVE VIEW, em que é utilizado o motor de rendering
WebKit para visualizar páginas Web, podemos interagir com a página como se
1. WEB DESIGN 35
estivéssemos a utilizar um browser, mesmo nas aplicações que utilizem dados

dinâmicos.
Também é possível introduzir um endereço Web (URL) para inspeccionar

páginas enviadas a partir de um servidor web remoto e editar páginas para as
quais tenha navegado, caso existam num sítio definido localmente.
1.4.2.4 Code hinting de classes em PHP

Esta funcionalidade apresenta a sintaxe de funções, objectos e constantes
PHP, permitindo assim código mais correcto:
Funciona também com as funções e classes definidas pelo web developer,

bem como as existentes em frameworks PHP, como a Zend framework.
1.4.2.5 Code hints específicas de sítio

Permite a personalização do ambiente de programação quando se trabalha
com bibliotecas PHP e frameworks CMS, como o WordPress, Drupal e
Joomla!:
Pode-se incluir ou excluir, como fontes de code-hints, theme files para blogs e
outros ficheiros e pastas personalizadas PHP.
1.4.2.6 Melhorias no suporte do Subversion

O Dreamweaver CS5 melhora o suporte do sistema de controlo de versões
Subversion, permitindo mover, copiar e eliminar ficheiros localmente, sincroni-
zando depois as alterações com o repositório remoto SVN.
O novo comando REVERT permite corrigir rapidamente conflitos na árvore de
versões ou efectuar o rollback para uma versão anterior de um ficheiro.
Adicionalmente, uma nova extensão do Dreamweaver permite especificar que
versão do Subversion pretende utilizar em cada projecto.
1.4.2.7 Server Behaviors

Ausente das novas funcionalidades estão novas server behaviors, embora
existam algumas melhorias menores ao nível da segurança e da resolução de
bugs, das existentes.
Após a decisão, em Abril de 2009, de abandonar o desenvolvimento da Adobe
Dreamweaver Developer Toolbox, parece que a Adobe vai deixar que sejam
outras empresas e sítios Web, como o WebAssist, o CartWeaver, e a DMX-
Zone, a desenvolverem novas server behaviors para o Dreamweaver.
1. WEB DESIGN 37
1.4.3 Funcionalidades removidas

Em cada nova versão do Dreamweaver, a Adobe também remove funcionali-
dades que já estão obsoletas, eram pouco utilizadas ou já não interessa su-
portar.
Algumas das funcionalidades removidas:
• Barras de navegação (navigation bars);
• Criação de um album de fotos Web;
• Gestão das classes CSS disponíveis através da edição InContext;
• Inserção de documentos FlashPaper;
• Ligação a um servidor FTP/RDS sem definir um sítio;
• Menu SHOW EVENTS no painel BEHAVIORS;
• Opção INSERT/REMOVE MARK OF THE W EB;
• Relatório de validação de Acessibilidade;
• Validação de tags.
As seguintes behaviors JavaScript suportadas pelo Dreamweaver até à versão

CS4 e que já há muito eram obsoletas, desapareceram:
• Check Browser;
• Control Shockwave or SWF;
• Hide Pop-up Menu;
• Play Sound;
• Show Pop-up Menu;
• Timeline.
Relativamente à produção de sítios dinâmicos as seguintes funcionalidades

deixaram de existir:
• ASP/JavaScript server behaviors;
• Integração do Microsoft Visual Sourcesafe;
• View Live Data.
Isto significa que o Dreamweaver, como ferramenta de desenvolvimento de

sítios Web dinâmicos, passou a suportar apenas o Coldfusion e o PHP, além
do ASP VBScript. De realçar que no Dreamweaver CS4 a Adobe já tinha
abandonado o suporte do ASP.NET e do JSP.
2 Ambiente de trabalho
Sempre que abrir o Dreamweaver CS5, o aspecto do ambiente de trabalho é o

seguinte:
2.1 WELCOME SCREEN

No centro do ecrã aparece o W ELCOME SCREEN, que é uma espécie de home
page do Dreamweaver, dado que permite um acesso rápido às tarefas comuns
que são executadas nesta aplicação.
Abrindo um ficheiro fecha o W ELCOME SCREEN. Mas se fechar todos os fichei-
ros abertos no Dreamweaver, o W ELCOME SCREEN volta a aparecer.
Uma das funcionalidades do W ELCOME SCREEN é a possibilidade de abrir os

ficheiros com que trabalhou recentemente:
Esta lista estará vazia a primeira vez que abra o Dreamweaver após a instala-
ção. À medida que vai trabalhando em diferentes páginas, a lista vai sendo
preenchida.
Mas existe sempre uma pasta OPEN que aparece no fim da lista, que permite
aceder a qualquer ficheiro que exista em disco.
Na coluna do meio do Welcome Screen temos uma lista dos diferentes tipos
de documentos que podem ser criados no Dreamweaver:
Ao seleccionar uma destas opções cria um documento desse tipo com as res-
pectivas configurações para esse tipo de ficheiros. Pode depois alterar estas
configurações.
Nesta lista aparece também a opção DREAMWEAVER SITE que permite a cria-
ção de um sítio Web e que é normalmente a primeira acção que se efectua
quando se começa a trabalhar num novo projecto.
A opção MORE mostra mais opções de criação de tipos de documentos:
2. AMBIENTE DE TRABALHO 41
A coluna da direita do W ELCOME SCREEN lista vídeos que estão disponíveis no

sítio da Adobe TV sobre diversas funcionalidades do Dreamweaver, estando
em destaque os vídeos sobre as novas funcionalidades da versão CS5:
Na parte inferior esquerda temos 3 links que permitem aceder a documenta-

ção online existente no sítio da Adobe:
A opção DREAMWEAVER EXCHANGE permite transferir widgets e recursos para

tornar o Dreamweaver mais poderoso com novas funcionalidades ou melhoria
das existentes.
Se, por acaso, não pretender que o W ELCOME SCREEN fique visível quando
fecha todos os documentos, existe uma opção no canto inferior esquerdo:
e aparecerá uma caixa de diálogo a informar sobre o procedimento que se tem

de efectuar para o W ELCOME SCREEN voltar a aparecer:
2.2 Barras de ferramentas

Tal como acontece com a maior parte das aplicações do Windows e do Mac
OS, o Dreamweaver possui diversas barras de ferramentas que facilitam e tor-
nam mais rápido o trabalho do dia-a-dia.
2.2.1 APPLICATION TOOLBAR

Na parte superior da interface do Dreamweaver, por cima da barra de menus,
aparece a APPLICATION TOOLBAR que permite um acesso rápido a diversas
opções:
O primeiro ícone desta barra tem a ver com a interface do Dreamweaver, mais
precisamente com a forma como aparece a página na área de documentos:
Pode-se ver a página em modo DESIGN, em modo CODE ou dividida em dois

(CODE AND DESIGN e SPLIT CODE).
O segundo botão dá acesso a um menu com opções que permitem aumentar
as funcionalidades do Dreamweaver instalando extensões e widgets, da Ado-
be ou de outras empresas:
Estes componentes podem ser gratuitos ou ter um custo associado.

O último ícone é o SITE MANAGEMENT, que permite criar novos sítios Web e ge-
rir sítios existentes:
Uma das utilizações mais comuns da APPLICATION TOOLBAR é para mudar en-
tre workspaces, utilizando o menu W ORKSPACE:
Os workspaces permitem rearranjar os painéis e a interface do Dreamweaver

mudando de workspace, utilizando o melhor que se adapta à tarefa que temos
de efectuar.
Na APPLICATION TOOLBAR existe também uma caixa de pesquisa.
Ao escrever aqui o nome de uma funcionalidade do Dreamweaver ou das nor-

mas Web, e carregando em RETURN (ou ENTER), acederá à aplicação Adobe
Community Help, que está instalada no seu computador e que permite aceder
a artigos sobre diversos assuntos:
Pode acontecer que ao aceder a esta aplicação tenha de fazer a actualização

do Adobe Air ou da própria aplicação.
E finalmente temos o menu CS LIVE,
que nos permite aceder a diversos serviços online disponibilizados pela

Adobe. O mais interessante para o web designer é o Adobe BrowserLab.
Dica
Para desactivar a APPLICATION BAR aceda à opção W INDOW > APPLICATION
BAR.
Apenas os três primeiros ícones desaparecem, sendo substituídos pela barra

de menus.
2.2.2 DOCUMENT TOOLBAR

A DOCUMENT TOOLBAR é uma barra de ferramentas bastante importante,
estando associada ao documento em que está a trabalhar, sendo por isso que
aparece logo acima de qualquer documento aberto:
Permite aceder a diferentes vistas da página, pré-visualizar a página, transferir

ficheiros (upload), atribuir um nome à página, etc.
A parte mais utilizada é a parte do lado esquerdo que permite mudar a forma
de visualização da página corrente. Pode-se ver a página em modo de ‘dese-
nho’ (DESIGN), em modo de código (CODE) ou uma mistura de ambos (SPLIT):
Quando estamos em modo SPLIT, podemos personalizar a forma como as

duas ‘partes’ são apresentadas, recorrendo para isso ao menu VIEW (opções
SPLIT VERTICALLY e DESIGN DESIGN VIEW ON TOP/LEFT):
Estas opções também estão disponíveis a partir do menu LAYOUT da APPLICA-

TION TOOLBAR.
Por omissão, quando se utiliza o modo SPLIT a vista CODE fica no lado
esquerdo e a vista DESIGN fica no lado direito, mas se seleccionarmos a opção
DESIGN VIEW ON LEFT a posição das duas vistas é trocada. Já se desactivar-
mos a opção, estas duas vistas passam a ficar uma por cima da outra, em vez
de ficarem lado a lado.
Os botões LIVE CODE, LIVE VIEW e INSPECT têm todos a ver com a integração,
no Dreamweaver, do motor de rendering open-source WebKit (que é o motor
utilizado pelo Apple Safari e pelo Google Chrome), e que nos permite ver,
dentro do Dreamweaver, as páginas, como se estivessemos a vê-las num
browser.
O botão LIVE CODE tem associado o menu CHECK BROWSER COMPATIBILITY,
que permite efectuar diversos testes às capacidades dos browsers, utilizando

a barra BROWSER COMPATIBILITY,
e perceber os problemas que as páginas que o web designer cria podem ter
em determinados browsers, sobretudo ao nível da utilização de estilos CSS.
Mas se quisermos ver a nossa página/sítio num browser existe um ícone para
o efeito:
As ajudas visuais (VISUAL AIDS) são linhas utilizadas pelo Dreamweaver para
identificar certo tipo de elementos numa página:
Na DOCUMENT TOOLBAR existe também uma caixa de texto para atribuirmos

um título à página:
Este é o texto que aparece no canto superior esquerdo dos browsers quando
se acede à página:
Finalmente, o ícone FILE MANAGEMENT tem associado um menu com opções

que permitem enviar ou receber ficheiros de um servidor Web remoto:
Por exemplo, o comando PUT permite fazer a transferência (upload) de fichei-

ros do nosso sítio para o servidor remoto.
2.2.3 Outras barras de ferramentas

Existem mais três barras de ferramentas que normalmente aparecem na área
do documento. Estas barras de ferramentas podem ser visualizadas ou escon-
didas através do menu VIEW > TOOLBARS:
Em alternativa pode colocar o cursor em cima de uma barra de ferramentas

visível no Dreamweaver e clicar com o botão direito do rato (CONTROL+CLIQUE
no Macintosh) para obter este menu:
A barra STANDARD,
permite efectuar operações comuns da maior parte dos programas do Win-

dows ou do Mac OS, como abrir documentos, criar novos documentos, guar-
dar documentos, cortar, copiar, colar, undo e redo.
Já a barra BROWSER NAVIGATION,
permite controlar a navegação do motor de rendering WebKit que a opção LIVE

VIEW activa:
Repare que temos disponíveis os botões BACK [RETROCEDER], FORWARD

[AVANÇAR], REFRESH [REFRESCAR] e a BARRA DE ENDEREÇOS [ADDRESS BAR],
tal como acontece num browser como o Mozilla Firefox.
No fim desta barra aparece um menu, chamado LIVE VIEW OPTIONS,
que, como o próprio nome indica, contém opções para configurar a navegação
com o browser disponibilizado internamente pelo Dreamweaver.
Finalmente, a barra STYLE RENDERING, que será abordada em mais detalhe no
capítulo sobre CSS, permite visualizar o design da página em diferentes tipos
de média, como: screen, print, handheld, projection, TTY e TV. Con-
tém também um botão que permite activar ou desactivar estilos CSS, além de
botões específicos para as pseudo-classes associadas normalmente aos links:
2.3 Painéis
Os painéis (em inglês, panels) no Dreamweaver são uma espécie de caixa de
diálogo que pode flutuar por cima da interface ou estar encaixada (em inglês,
docked) numa parte da interface.
Por omissão, os painéis aparecem agrupados no lado direito da interface (no
PANEL DOCK), quando se utiliza o ambiente de trabalho DESIGNER.
Repare que os painéis estão agrupados em grupos de painéis (em inglês,
panel groups), como, por exemplo, os painéis FILES e ASSETS.
Quando abrimos o Dreamweaver não vemos todos os painéis que estão dis-
poníveis. Podemos ver os painéis que estão disponíveis, e podemos mostrar
ou ocultar painéis, utilizando o menu W INDOW .
Para fechar um grupo de painéis, fechando os respectivos painéis constituin-

tes, clique no ícone:
Depois, seleccione a opção CLOSE TAB GROUP no menu que aparece:
2.3.1 Alterar a disposição dos painéis

Vamos ver como podemos dispor os painéis para que possamos organizar o
ambiente de trabalho ao nosso gosto.
Uma das formas mais fáceis de mudar a disposição dos painéis é utilizar
ambientes de trabalho (em inglês, workspaces) pré-definidos:
Cada um dos workspaces que aparecem na lista dispõe os elementos da

interface do Dreamweaver de acordo com o respectivo público-alvo. Como é
óbvio, um programador terá preferência pelos workspaces CODER e CODER
PLUS e um designer pelos workspaces DESIGNER e DESIGNER COMPACT. Um
dos workspaces mais práticos é o DUAL SCREEN que permite ter os documen-
tos num monitor e os painéis noutro.
Mas os painéis não estão fixos na interface do Dreamweaver e nós podemos
alterar a sua disposição à vontade, e até guardar essas alterações.
2.3.2 Flutuar um painel

Ao clicar num painel ele fica activo, isto é, fica no topo do grupo de painéis
onde está inserido. Por exemplo, clicando no painel AP ELEMENTS, repare
como ele se sobrepõe ao painel CSS STYLES que era o painel activo desse
grupo de painéis:
Os painéis estão encaixados no panel dock, que se encontra normalmente no

lado direito da interface do Dreamweaver. Mas podemos fazer flutuar um pai-
nel arrastando-o pelo seu separador identificativo:
Ao largar o botão do rato, o painel aparecerá a flutuar por cima dos outros
elementos da interface:
Para flutuar um grupo de painéis, arraste-o pela zona ‘vazia’ que se encontra
ao lado direito dos painéis que constituem o grupo:
2.3.3 Colocar grupos de painéis no panel dock

A maior parte dos painéis possui uma localização por omissão. Mas podemos
criar novos grupos de painéis ou rearranjar os respectivos painéis constituin-
tes.
Por exemplo, se quiser mudar um painel para outro grupo de painéis, basta
arrastar o painel, pelo respectivo separador, para cima do grupo de painéis
destino, e, quando aparecer uma moldura azul, largar o botão do rato:
Caso tenha flutuado um painel (ou grupo de painéis) e pretender voltar a

encaixá-lo no panel dock, arraste-o pela barra superior,
ou pelo espaço ‘vazio’ ao lado dos painéis,
para uma posição entre dois grupos de painéis:
Pode verificar que está no local certo se apenas aparecer uma fina barra hori-
zontal azul entre dois grupos de painéis, e não aparecer uma moldura azul à
volta de nenhum painel.
Dica
Também podemos arrastar um grupo de painéis, arrastando um painel indivi-
dual existente nesse grupo, bastando para isso manter pressionada a tecla
OPTION no Macintosh ou ALT no Windows.
2.3.4 Minimizar painéis

Como o panel dock fica muito cheio pelos diversos grupos de painéis activos,
para reduzir um grupo de painéis a uma única barra, basta efectuar um duplo
clique num dos painéis que constituem esse grupo. É assim possível ter um
panel dock com todos os painéis minimizados:
Uma utilização prática desta possibilidade é minimizar todos os painéis excep-

to aquele que pretendemos utilizar num determinado momento.
Para ganhar mais espaço podemos clicar no ícone COLAPSE TO ICONS, identifi-
cado por duas setas, que estão no topo direito do panel dock:
O resultado é:
Para voltar a repor os grupos de painéis basta voltar a clicar no ícone COLAPSE
TO ICONS.
Para ainda poupar mais espaço, colocamos o cursor entre o panel dock e a
janela do documento, até o cursor mudar para,
e arrastamos para o lado direito. Ficamos então com uma única coluna de íco-
nes:
Dica
Se pretender esconder todos os painéis que aparecem na interface do
Dreamweaver basta teclar F4. Aparece uma barra cinzenta vertical no local
onde estava o panel dock, e uma barra cinzenta horizontal no local do PRO-
PERTY INSPECTOR:
Se passar o rato por cima de uma destas barras e esperar 1 segundo, apare-
cerá o panel dock ou o PROPERTY INSPECTOR.
No caso de estarmos a utilizar dois monitores, o Dreamweaver permite que

todo o panel dock flutue. Basta arrastá-lo pela barra de topo:
Também nesta barra temos acesso a um menu de contexto (clicando com o

botão direito do rato, ou CONTROL+clique no Macintosh) que possui as seguin-
tes opções:
2.3.5 Criar outro panel dock

Se possuirmos um monitor de grandes dimensões podemos criar outro panel
dock no lado esquerdo do ecrã, arrastando para lá um grupo de painéis (ou
um só painel),
e quando aparecer uma barra azul vertical, largar o grupo de painéis (ou o
painel):
2.3.6 Painéis horizontais

Alguns painéis não funcionam muito bem como painéis verticais como acon-
tece com o painel INSERT:
Quando este painel está no estado vertical temos de fazer muitas vezes scroll
para acedermos ao objecto pretendido.
Este painel funciona muito melhor como painel horizontal. Se pegarmos no
painel INSERT e o arrastarmos para a parte de cima da janela do documento,
até aparecer uma linha horizontal azul por cima dos nomes dos documentos
abertos,
criamos um panel dock horizontal:
2.3.7 Painel INSERT

Este painel INSERT permite simplificar as operações de criação de elementos
numa página, e está dividido em grupos distintos que são representados por
abas/separadores.
Dependendo do tipo de página em que estiver a trabalhar (por exemplo, uma

página dinâmica) aparecerão outros grupos, como PHP, que permitem o
acesso rápido a objectos desse tipo.
Este painel permite mesmo efectuar operações que não produzem nenhum
efeito visual, utilizando o ícone HEAD:
Nesta barra existe um separador FAVORITES, que inicialmente está vazio, e

onde podemos colocar os objectos que utilizamos mais frequentemente:
Efectuando um clique com o botão direito do rato na barra (CONTROL+CLIQUE

no Macintosh), podemos personalizar este separador:
Na caixa de diálogo que aparece podemos acrescentar objectos/ícones ao

separador FAVORITES:
Na lista AVAILABLE OBJECTS os objectos estão separados por grupo. Aparecem

aqui alguns objectos que não são visíveis nos menus, como Flash Paper. O
botão ADD SEPARATOR permite adicionar um separador vertical.
O resultado da nossa configuração é:
Dica
Deve ter reparado quando clica com o botão direito do rato na barra (ou
CONTROL+CLIQUE no Macintosh), que aparece a opção COLOR ICONS, que
permite utilizar, como o próprio nome indica, ícones coloridos na barra INSERT.
2.3.8 PROPERTY INSPECTOR

O PROPERTY INSPECTOR deve ser o painel mais importante do Dreamweaver e
permite um acesso às propriedades dos elementos HTML e aos estilos CSS.
Mostra e permite editar as propriedades do elemento que está em selecção na
página. Possui dois separadores:
• O separador HTML permite-lhe controlar as propriedades de elemen-
tos HTML na página:
• O separador CSS permite criar novos estilos e editar estilos existentes

relativos ao objecto seleccionado na área de documento:
O PROPERTY INSPECTOR também está dividido em duas partes como pode

observar pela linha horizontal separadora. Na parte de cima encontram-se as
propriedades mais comuns e utilizadas do elemento seleccionado. Em alguns
elementos HTML existem bastantes propriedades na parte de baixo deste pai-
nel, como acontece com os elementos imagem e imageplaceholder:
Se efectuar um duplo-clique em qualquer parte ‘vazia’ do PROPERTY INS-

PECTOR, a parte de baixo será escondida ou visualizada, conforme o estado
em que se encontre. Esta possibilidade existe para ganhar espaço na interface
do Dreamweaver.
2.3.9 Painel RESULTS

Um grupo de painéis especial é o RESULTS que aparece na parte de baixo do
ecrã, e que ocupa bastante espaço:
Para visualizar este painel, seleccione, no menu W INDOW , a opção RESULTS e

depois seleccione uma opção no sub-menu que aparece:
Este painel disponibiliza diversa informação e permite efectuar uma série de

operações na página.
Se for utilizador frequente deste painel, e para evitar que ocupe tanto espaço,
pode agregá-lo com o painel PROPERTY INSPECTOR. Pegue no painel PROPER-
TY INSPECTOR e arraste-o para baixo para cima do painel RESULTS, até ver uma
moldura azul:
E tem assim o PROPERTY INSPECTOR encaixado (docked) com todos os outros

painéis do grupo de painéis RESULTS:
Como o painel PROPERTY INSPECTOR ficou no fim, e como acontece em qual-

quer grupo de painéis, pode mover os painéis de posição dentro de um grupo
de painéis. Basta clicar no título do painel e arrastá-lo para a posição
desejada:
2.4 Workspaces
Existem diversas tarefas que se podem efectuar no Dreamweaver quando se
constroem sítios Web. Num dia podemos estar a trabalhar fortemente em
código, noutro em dados dinâmicos, e noutro a construir o layout recorrendo a
estilos CSS.
Cada uma destas actividades utiliza um layout preferencial de painéis e de
barras de ferramentas diferente. Em vez de estar constantemente a abrir e a
fechar painéis e a arranjá-los, pode recorrer aos workspaces.
O Dreamweaver disponibiliza diversos workspaces pré-definidos, como pode
verificar no menu respectivo da APPLICATION TOOLBAR:
Por omissão, o workspace utilizado pelo Dreamweaver é o DESIGNER.

Se alterarmos o posicionamento de um painel num determinado workspace, o
Dreamweaver vai-se lembrar dessa alteração da próxima vez que utilizarmos
esse workspace. Isto permite-nos adaptar um workspace à nossa forma de
trabalhar.
2.4.1 Criar um workspace

Caso nenhum dos workspaces pré-definidos seja do nosso agrado o ideal é
criarmos o nosso próprio workspace.
Partindo de um workspace pré-definido, primeiro defina a interface ao seu
agrado, colocando os painéis nos locais preferidos. O modo de visualização
por omisão (CODE, DESIGN ou SPLIT) também é guardado no workspace.
Quando tiver a interface ao seu gosto crie um novo workspace:
Temos que atribuir um nome ao workspace:

Este novo workspace, aparece agora na lista, como sendo o workspace utili-
zado por omissão quando se abre o Dreamweaver:
Qualquer workspace personalizado aparece no topo da lista e separado dos

workspaces pré-definidos.
A opção MANAGE WORKSPACES,
permite alterar o nome ou apagar um workspace personalizado:

2.4.2 Repor tudo como estava

Pode experimentar mover os painéis como quiser que depois pode repor tudo
como estava no workspace que estava a utilizar:
2.5 Área de documento

A área de documento é a zona do Dreamweaver onde o web designer cria o
conteúdo das páginas Web:
Na parte de baixo desta área estão localizadas duas zonas de muito interesse
para o web designer na chamada barra de estado (status bar).
2.5.1 TAG SELECTOR

No lado esquerdo aparece o TAG SELECTOR,
que permite seleccionar, editar ou remover objectos da página. Ao clicar numa

etiqueta (tag) que aparece nesta barra, será seleccionado o objecto respectivo
na página:
Este é o processo preferido para seleccionar objectos na página. Por exemplo,

se pretender seleccionar texto, como um parágrafo, clique no meio do pará-
grafo e depois clique na última etiqueta (tag) que aparece no TAG SELECTOR:
As etiquetas para a esquerda do objecto corrente correspondem aos seus

parentes. Isso significa que, na última imagem, o parágrafo seleccionado se
encontra dentro de um elemento <div>, que por sua vez está dentro de um
elemento <body>. De realçar que todos os objectos existentes numa página
são filhos (ou netos, ou bisnetos, ...) do elemento <body>.
Se deixar ficar o cursor por cima de um objecto durante 1 segundo, aparece
uma tooltip com o código HTML e respectivos atributos associados ao ele-
mento em causa:
Também associado a cada etiqueta que aparece no TAG SELECTOR, existe um

menu de contexto (botão direito do rato no Windows e CONTROL+CLIQUE no
Macintosh),
que permite efectuar diversas operações sobre o objecto em causa, nomea-

damente remover o elemento (REMOVE TAG) ou editá-lo (QUICK TAG EDITOR).
2.5.2 Outros ícones e informação

No lado direito da barra de estado no fundo da janela DOCUMENT, existe um
conjunto de ícones e informação:
Os três primeiros ícones são mutuamente exclusivos o que significa que ape-
nas um pode estar seleccionado numa determinada altura:
– a ferramenta de selecção (SELECT) é a que está seleccionada por
omissão, e a que permite seleccionar objectos na página, ou inserir
o cursor na página para se poder escrever texto.
– esta ferramenta (HAND) permite arrastar o documento para ver
outras partes do mesmo. Pouco utilizada, dado que se pode utilizar
em alternativa as scroll bars (barras de deslocamento).
– a lupa (ZOOM), associada à lista de valores de ampliação (zoom)
que se encontra ao seu lado direito, permite aumentar ou reduzir a
ampliação da página:
Para reduzir a ampliação da página utilize ALT+CLIQUE no Windows

ou OPTION+CLIQUE no Macintosh. Permite assim que se possa
trabalhar em mais detalhe num determinado aspecto da página.
Efectuando um duplo-clique neste ícone, a ampliação volta a
100%.
Pode utilizar em alternativa o teclado para reduzir a ampliação:
CONTROL+- no Windows ou COMMAND+- no Macintosh.
Esta ferramenta também pode ser utilizada com o método clicar e
arrastar para efectuar a ampliação apenas de uma determinada
área da página.
No menu de definição da percentagem de ampliação a opção FIT

SELECTION permite ampliar apenas o objecto que estiver selec-
cionado na página. Claro está que tem primeiro de seleccionar o
objecto com a ferramenta SELECT.
Dica
Quando a opção de ampliação está activada, se mantiver a barra
de espaços pressionada muda temporariamente para a ferramenta
HAND.
A lista seguinte, WINDOW SIZE,
permite dimensionar a janela do documento, para a adequar ao tamanho pre-

tendido. As opções só aparecem seleccionáveis se a janela do documento não
estiver maximizada. Podem-se definir outros tamanhos personalizados utili-
zando a opção EDIT SIZES (que acede à categoria STATUS BAR da caixa de
diálogo PREFERENCES). Este valor não limita o tamanho da página, permitindo
apenas ao web designer ver a aparência da página numa determinada resolu-
ção de ecrã.
O tamanho da página e o tempo de transferência (download), são valores
estimados para a página:
O Dreamweaver calcula o tamanho da página, baseando-se no conteúdo da

página e nos ficheiros dependentes como imagens, ficheiros CSS, etc.
Estima o tempo de transferência baseando-se na velocidade de ligação selec-
cionada na caixa de diálogo PREFERENCES (EDIT > PREFERENCES > STATUS
BAR):
Finalmente, o indicador de codificação (encoding) permite ao web designer

assegurar que a codificação utilizada na página é a correcta:
2.5.3 Trabalhar com réguas

Medições precisas são essenciais para posicionar os elementos numa página
Web. O Dreamweaver disponibiliza duas réguas, uma horizontal e outra verti-
cal, que estão localizadas no topo e no lado esquerdo da janela do documento
activo:
As regras podem ser visualizadas ou escondidas através da opção SHOW do

sub-menu VIEW > RULERS:
Por omissão, a unidade utilizada é o píxel, mas também se podem utilizar as

polegadas (INCHES) ou os centímetros (CENTIMETERS).
O ponto 0,0 das réguas é no canto superior esquerdo. Contudo, pode-se defi-
nir um ponto 0 diferente em cada uma das réguas. Basta clicar e arrastar a
partir do quadrado que se encontra no canto superior esquerdo na intersecção
das duas réguas:
Para voltar a repor a origem das medidas no canto superior esquerdo, selec-
cione a opção VIEW > RULERS > RESET ORIGIN.
Dica
Existe também um menu de contexto associado a cada uma das réguas, que
permite aceder às opções que existem no sub-menu VIEW > RULERS:
2.5.4 Trabalhar com a grelha

O Dreamweaver disponibiliza uma grelha, que é uma série de linhas horizon-
tais e verticais que ajudam no alinhamento de objectos na página.
Para visualizar a grelha utiliza-se a opção VIEW > GRID > SHOW GRID:
O resultado é o aparecimento de linhas horizontais e verticais espaçadas 50

píxeis entre si:
Pode-se personalizar a distância entre linhas da grelha e a própria cor das

linhas, acedendo à opção VIEW > GRID > GRID SETTINGS:
Com a grelha activada as linhas servem apenas para orientação no posicio-

namento de objectos, sobretudo os objectos posicionados de forma absoluta.
Para que os objectos alinhem automaticamente pelas linhas é necessário acti-
var a opção VIEW > GRID > SNAP TO GRID.
2.5.5 Trabalhar com guias

As guias são linhas que permitem o alinhamento de objectos na página. São
definidas pelo web designer, podendo ser criadas horizontalmente ou vertical-
mente. Para criar guias é necessário que as réguas estejam visíveis. Clique
numa régua e arraste para o meio da página para o local onde pretende criar a
guia:
Repare que a guia tem cor verde e apresenta uma tooltip a indicar a distância
a que se encontra da origem (ponto 0,0) das réguas.
Depois de criar uma guia pode deslocá-la para uma nova posição desde que a
opção LOCK GUIDES não esteja activada.
Dica
Para mover uma guia para uma localização precisa, efectue um duplo-clique
por cima da guia, introduza a localização exacta pretendida, e clique em OK:
Para remover uma guia basta arrastá-la para a régua correspondente.

As guias também possuem um sub-menu de opções no menu VIEW:
A opção SHOW GUIDES permite mostrar ou esconder as guias e a opção CLEAR

GUIDES permite remover todas as guias existentes na página.
Uma opção útil é a LOCK GUIDES que permite bloquear as guias evitando que
elas sejam deslocadas inadvertidamente.
Para alinhar elementos com uma guia, primeiro activa-se a opção SNAP TO
GUIDES. Depois pode arrastar o(s) elemento(s) para os alinhar à guia. Existe
também a opção inversa que é a GUIDES SNAP TO ELEMENTS, que faz com que,
quando se está a criar uma guia, esta se alinhe com elementos existentes na
página.
Para personalizar as guias utiliza-se a opção E DIT GUIDES.
Deve ter reparado que existem cinco resoluções de ecrã na parte de baixo do
sub-menu VIEW > GUIDES. Ao seleccionar uma delas, o Dreamweaver cria
duas guias, uma horizontal e outra vertical, que representam os limites do con-
teúdo visível num ecrã com a resolução seleccionada.
Dica
Para visualizar a distância entre guias, mantenha pressionada a tecla
CONTROL no Windows (ou COMMAND no Macintosh) quando o ponteiro do rato
estiver entre duas guias. A unidade de medida que aparece é a mesma que a
unidade de medida utilizada nas réguas. Também funciona para se saber a
distância de uma guia à origem.
3 Sítios Web
O Dreamweaver sempre deu bastante importância ao conceito de sítio Web

(site), isto é, à colecção de ficheiros e pastas inter-relacionados que estão
associados a um endereço do tipo http://www.centroatlantico.pt .
Existe uma pasta principal que alberga todos os ficheiros e sub-pastas do sítio
Web e que tem o nome genérico de root folder. Dentro desta pasta são estru-
turados os ficheiros e as pastas de acordo com o tamanho e função do sítio
Web:
root
_css _imagens _scripts livros autores index ...

.html
Por exemplo, se for um sítio Web pequeno, pode colocar todos os ficheiros no
root folder. Mas com sítios Web maiores e mais complexos é vulgar criar-se
pastas para arrumar os ficheiros.
Normalmente criam-se pastas específicas para conterem os recursos utiliza-
dos no sítio Web, como imagens, CSS, scripts, imagens, vídeos, etc.
Muitas vezes o nome dessas pastas começa por ‘_’ para aparecerem no topo
das listagens do root folder e para serem facilmente identificadas como con-
tendo recursos e não páginas do sítio Web.
A página principal de um sítio Web encontra-se sempre no root folder e tem o
nome index ou default, dependendo do servidor Web utilizado. A extensão
desta página depende do tipo de sítio Web: se for um sítio estático será .html
ou .html; caso seja um sítio Web dinâmico será .php ou .aspx (entre outros
possíveis).
Dica
Deve planear a estrutura do seu sítio Web e os recursos a utilizar antes de
começar a trabalhar nas páginas.
3.1 Definir um sítio Web

Quando começa a trabalhar num novo projecto no Dreamweaver, a primeira
coisa a fazer é definir um sítio Web. Se não o fizer, o Dreamweaver será inca-
paz de identificar os links entre páginas, verificar ficheiros relacionados, ou
ajudar a gerir os recursos.
Na versão CS5 o processo de definição de sítios Web foi bastante simplifi-
cado. Agora só é necessário saber duas coisas para criar um sítio Web:
• Onde está localizado o root folder local, que é a pasta no seu computa-
dor onde vão estar armazenados todos os ficheiros e pastas que
fazem parte do seu sítio Web;
• O nome que pretende a atribuir ao sítio Web.
Quando se começa a utilizar o Dreamweaver, após ter sido instalado, não
existe nenhum sítio Web definido, como pode ver pelo painel FILES:
Se clicar na lista, poderá verificar que não aparece nenhum nome de sítio
Web, apenas a identificação dos dispositivos (discos, DVD, etc.) existentes no
seu computador:
Existem muitas formas de definir um sítio Web no Dreamweaver:

3. SÍTIOS WEB 75
1. Aceder ao menu SITE, na APPLICATION TOOLBAR, e seleccionar a opção

NEW SITE:
2. Seleccionar a opção NEW SITE do menu SITE:
3. Ou seleccionar a opção DREAMWEAVER SITE no W ELCOME SCREEN:
Qualquer uma destas opções permite aceder à caixa de diálogo SITE SETUP:
Quem já utilizava o Dreamweaver verificará que esta caixa de diálogo foi muito
simplificada.
A primeira operação é atribuir um nome ao sítio Web:
Pode atribuir o nome que muito bem entender, não existindo nenhuma restri-
ção. Pode mesmo utilizar espaços no nome.
Depois é preciso definir a localização do root folder:
Podemos escrever directamente a localização no campo LOCAL SITE FOLDER

ou utilizar o botão BROWSE FOR FOLDER ( ) para localizar a pasta. Neste
caso, na caixa de diálogo que aparece, depois de ter seleccionado a pasta,
clique no botão SELECT no Windows (ou CHOOSE no Macintosh).
Caso tenha um sítio Web já criado e pretenda ‘importá-lo’ para o Dreamwea-
ver, basta colocar no campo LOCAL SITE FOLDER a localização do root folder
desse sítio Web.
Dica
Quando estamos a criar um sítio Web apenas para fazer o design das pági-
nas, podemos colocá-lo em qualquer pasta do disco do nosso computador.
Mas se estivermos a trabalhar com sítios Web dinâmicos, então teremos de
seleccionar uma pasta dentro da instalação do servidor web. Por exemplo, no
caso do Apache é normalmente dentro da pasta htdocs.
Pode reparar que existem outras possibilidades de configuração de um sítio

Web, a partir da categoria ADVANCED SETTINGS,
3. SÍTIOS WEB 77
mas, neste momento, a informação fornecida é suficiente para criar o sítio

Web no Dreamweaver.
Depois de clicar no botão SAVE da caixa de diálogo SITE SETUP, aparecerá no
painel FILES o novo sítio Web seleccionado:
Como estamos a criar um sítio Web de raiz não aparecerá nenhum ficheiro ou
pasta.
Caso esteja a ‘importar’ um sítio Web existente, e ele for constituído por mui-
tos ficheiros e pastas, poderá ver uma caixa de diálogo a informar que o
Dreamweaver está a fazer o caching do sítio Web.
Deve colocar os sítios Web em pastas distintas de forma a não interferir com
outros sítios Web que já tenha criado. De qualquer forma, o Dreamweaver
avisa sempre que se tente utilizar uma pasta de um sítio Web existente para
um novo sítio Web,
ou se a pasta para o novo sítio Web for uma sub-pasta de um sítio Web já
existente:
Depois de criarmos vários sítios Web no Dreamweaver podemos utilizar a lista

do painel FILES para ‘saltar’ entre esses sítios Web:
3.2 Gestão de sítios Web

Algumas vezes é necessário alterar a configuração de um sítio Web. Para o
fazer é necessário, em primeiro lugar, aceder à caixa de diálogo MANAGE
SITES e seleccionar o sítio Web que se pretende alterar. As opções disponíveis
para o fazer são:
1. Aceder ao menu SITE, na APPLICATION TOOLBAR, e seleccionar a opção
MANAGE SITES:
2. Seleccionar a opção MANAGE SITES do menu SITE:
3. Ou seleccionar a opção MANAGE SITES na lista de sítios Web do painel

FILES:
3. SÍTIOS WEB 79
Dica
Para aceder rapidamente à caixa de diálogo SITE SETUP, relativa ao sítio Web
corrente, basta efectuar um duplo clique por cima do respectivo nome na lista
de sítios Web do painel FILES.
Seleccionando qualquer uma destas três opções, aparecerá a caixa de diálogo

MANAGE SITES:
Esta caixa de diálogo mostra uma lista de todos os sítios Web definidos no
Dreamweaver.
A partir desta caixa de diálogo pode efectuar diversas operações com os sítios
Web:
• NEW – para criar um novo sítio Web;
• EDIT – para alterar a configuração de um sítio Web;
• DUPLICATE – para duplicar a configuração de um sítio Web;
• REMOVE – para eliminar um sítio Web do Dreamweaver. Não elimina o
sítio Web (ficheiros e pastas) fisicamente em disco;
• EXPORT – permite exportar a configuração do sítio Web para um fichei-
ro, para o sítio Web ser ‘reproduzido’ noutro computador;
• IMPORT – permite importar, a partir de um ficheiro, a configuração de
um sítio Web Dreamweaver.
Para todas as opções, excepto para NEW e IMPORT, terá primeiro de seleccio-
nar o sítio Web na lista da esquerda.
Vamos editar o nosso sítio Web, seleccionando-o na lista do lado esquerdo e
clicando no botão EDIT. Aparece uma caixa de diálogo já nossa conhecida. Na
categoria ADVANCED SETTINGS, seleccione a sub-categoria LOCAL INFO:
A opção DEFAULT IMAGES FOLDER é importante porque se o Dreamweaver tiver

de criar gráficos para si, por exemplo, caso coloque widgets na página, o
Dreamweaver saberá onde deve colocar as imagens. Cria-se normalmente
uma pasta com o nome img, images ou imagens. Este nome pode ser pre-
cedido de um ‘_’, como vimos anteriormente, para que a pasta apareça no
topo da lista do root folder e para mais facilmente se identificar como uma
pasta de recursos.
A opção WEB URL não precisa de ser preenchida mas normalmente coloca-se
lá o URL do nosso sítio Web (actual ou futuro), do tipo http://www.centroatlantico.pt,
e este endereço é utilizado nos links absolutos.
Quando efectua determinadas alterações a um sítio Web, como o nome ou a
localização, o Dreamweaver alerta para o facto:
3.3 Gerir ficheiros

O painel FILES permite efectuar diversas operações nos ficheiros/pastas como
se tratasse do Windows Explorer ou do Finder do Macintosh.
Deve evitar efectuar alterações (apagar ficheiros, alterar o nome de ficheiros,
alterar o respectivo conteúdo, etc.) directamente no Windows Explorer ou no
Finder do Macintosh. Esta precaução tem a ver com o controlo que o Dream-
3. SÍTIOS WEB 81
weaver mantém sobre a localização dos recursos de cada sítio Web (como
imagens, ficheiros CSS, ficheiros JavaScript, etc.) e a relação entre os fichei-
ros através de links.
Se utilizar o painel FILES para mudar um ficheiro de pasta, o Dreamweaver
actualiza automaticamente todos os ficheiros que possuam ligações para esse
ficheiro, nomeadamente, links.
Se, mesmo assim, tiver de criar pastas ou ficheiros no Windows Explorer ou
no Finder do Macintosh, ou a partir de outra aplicação, clique depois no ícone
REFRESH no Dreamweaver,
para que essas alterações sejam repercutidas no painel FILES do Dreamwea-

ver.
Se tiver um documento aberto no Dreamweaver e o modificar em simultâneo,
em outra aplicação, quando voltar para o Dreamweaver será apresentada uma
mensagem do tipo:
Se escolher a opção YES então o documento será recarregado no Dreamwea-

ver repercutindo as alterações efectuadas na outra aplicação.
A partir do menu de contexto que aparece quando clica com o botão direito do
rato (CONTROL+clique no Macintosh) por cima de uma pasta ou de um ficheiro
no painel FILES pode efectuar diversas operações de gestão de ficheiros,
nomeadamente as habituais no Windows Explorer ou no Finder do Macintosh:
• NEW FILE – criar um novo ficheiro, que por omissão se chamará
untitled.html;
• NEW FOLDER – criar uma nova pasta;
• EDIT > CUT – ‘cortar’ um ficheiro ou pasta para depois o ‘colar’;
• EDIT > COPY – copiar uma pasta ou ficheiro para memória para depois
‘colar’;
• EDIT > PASTE – ‘colar’ uma pasta ou ficheiro copiado;
• EDIT > DELETE – eliminar um ficheiro, sendo enviado para o Recycle
Bin no Windows (ou para o Trash no Macintosh). Terá de confirmar a
operação;
• EDIT > DUPLICATE – duplicar um ficheiro ou pasta. O novo ficheiro/pasta
terá, no Windows, o nome do original mais ‘ – Copy’;
• EDIT > RENAME – alterar o nome a um ficheiro ou pasta. Caso existam
ficheiros que tenham links para o ficheiro em causa ou para os fichei-
ros existentes na pasta a que alterou o nome, o Dreamweaver per-
guntará se pretende actualizar esses links:
3. SÍTIOS WEB 83
Dica
Repare que neste menu de contexto a penúltima opção é EXPLORE, que per-
mite abrir uma janela do Windows Explorer, ou do Finder do Macintosh, com o
conteúdo do root folder. É uma forma rápida de aceder a essa pasta para, por
exemplo, efectuar uma cópia de segurança.
3.4 Outra informação sobre o sítio Web

Na caixa de diálogo SITE SETUP existe muita outra informação que pode ser
fornecida para um determinado sítio Web, mas a maior parte diz respeito à
definição de sítios Web dinâmicos.
3.4.1 Servidores Web

Quando se desenvolvem sítios Web dinâmicos é habitual existir um servidor
de testes onde se testam os sítios. Isto é sobretudo pertinente quando se trata
de uma equipa de desenvolvimento em que cada pessoa desenvolve parte do
sítio Web, e é necessário testar todas as páginas integradas. Este servidor
tem, no Dreamweaver, o nome de servidor de testes (testing server).
Após os testes serem efectuados com sucesso é necessário colocar online
num fornecedor de acesso o sítio Web desenvolvido ou as suas actualizações.
Este servidor tem, no Dreamweaver, o nome de servidor remoto (remote
server).
Para definir um servidor de testes ou um servidor remoto para um site do
Dreamweaver, temos de clicar no botão + na categoria SERVERS da caixa de
diálogo SITE SETUP:
Por exemplo, para um servidor de testes local:
A pasta utilizada corresponde à pasta de alojamento de sítios Web de um ser-

vidor Apache local (numa instalação do pacote XAMPP). Na lista de servidores
que aparece, desactiva-se a opção REMOTE e activa-se a opção TESTING:
No caso de servidores remotos, uma das tecnologias mais utilizadas para o

envio de ficheiros é o FTP (File Transfer Protocol). A Adobe disponibiliza um
servidor de testes, que pode ser acedido com a seguinte configuração (pas-
sword: Midt0wn):
Temos agora configurados dois servidores, um de testes local e outro remoto

(no nosso exemplo, utilizamos como servidor remoto o servidor de testes da
Adobe):
3. SÍTIOS WEB 85
Quando pretender copiar o sítio Web, que tenha criado no Dreamweaver, para
o servidor do fornecedor de alojamento, deverá utilizar a informação de confi-
guração de acesso fornecida por essa empresa.
3.4.2 Trocar ficheiros com o servidor remoto

Depois de se ter configurado o servidor remoto, temos de estabelecer a liga-
ção, utilizando para isso o botão CONNECTS TO REMOTE HOST no painel FILES:
Será estabelecida ligação com o servidor remoto,
mudando então o ícone para DISCONNECTS FROM REMOTE HOST:
Agora podemos trocar ficheiros com o servidor remoto utilizando os botões

GET (para obter ficheiros) e PUT (para enviar ficheiros):
Pode sincronizar automaticamente os ficheiros entre a cópia local e o servidor

remoto utilizando o botão SYNCHRONIZE WITH:
Se achar o painel FILES algo limitado, pode clicar no botão EXPAND TO SHOW
LOCAL AND REMOTE SITES,
para obter um ambiente em que de um lado se encontra o servidor remoto e

do outro a cópia local do sítio Web no seu computador:
4 Documentos
Depois de termos criado o nosso site no Dreamweaver, a próxima tarefa é

começar a criar páginas. O Dreamweaver possui muitas formas diferentes de
criar páginas.
Uma das formas mais fáceis é recorrer ao W ELCOME SCREEN. Na coluna
CREATE NEW aparecem diversas opções de páginas que podem ser criadas no
Dreamweaver:
Ao clicar, por exemplo, na opção HTML, será criada uma nova página sem
conteúdo visível, e que conterá o seguinte código:
Repare que a página neste momento não se encontra guardada em disco,

como pode ver pelo painel FILES. Deverá atribuir-lhe um nome e guardá-la
imediatamente.
Outra forma de criar uma nova página é clicar com o botão direito do rato em
cima do nome do root folder no painel FILES, na coluna LOCAL FILES, e esco-
lher a opção NEW FILE do menu de contexto que aparece:
Mas, desta vez, é criada no root folder uma nova página com o nome
untitled.html:
Como o nome do ficheiro está seleccionado, podemos aproveitar para lhe atri-
buir um novo nome:
Tradicionalmente, o nome da página principal de um sítio Web é index.html

(ou default.html).
Repare que, ao contrário da utilização do W ELCOME SCREEN, o documento
criado não abriu automaticamente na área de documentos do Dreamweaver.
Terá de efectuar um duplo-clique para ele abrir.
4. DOCUMENTOS 89
O Dreamweaver também não pediu o tipo de página, isto é, a extensão a atri-

buir à página. Isso acontece devido às preferências definidas no Dreamwea-
ver.
Nenhuma das duas opções anteriores deu-nos a hipótese de personalizar a
definição da página. Se necessitar de maior controlo na criação da página,
escolha a opção FILE > NEW:
Na primeira coluna,
temos o tipo de páginas que podemos criar:

• BLANK PAGE – criar uma página sem conteúdo;
• BLANK TEMPLATE – criar um novo modelo (template);

• PAGE FROM TEMPLATE – criar uma nova página a partir de um modelo
(template) existente;
• PAGE FROM SAMPLE – Páginas com folhas de estilo por omissão, mas
que não são starter pages;
• OTHER – Outros tipos de páginas para a Web.
Na segunda coluna seleccionamos o tipo de página que pretendemos criar:
Existe uma divisão entre páginas ‘estáticas’ (opções HTML a XML) e páginas
dinâmicas (opções ASP JavaScript a PHP).
Caso tivesse escolhido a opção OTHER, na primeira coluna,
poderíamos criar outro tipo de páginas menos comuns.

Ao seleccionar, na segunda coluna, um tipo de página, depois temos de selec-
cionar o layout que pretendemos utilizar, na terceira coluna:
4. DOCUMENTOS 91
Se for inexperiente na utilização de CSS ou se quiser criar rapidamente uma

página com um determinado layout, existem aqui bastantes opções. Ao selec-
cionar um layout (qualquer opção excepto a primeira, <none>) vê o modelo
respectivo na quarta coluna:
Estes layouts são chamados, no Dreamweaver, CSS STARTER PAGES.

Vamos utilizar um layout sem CSS associadas, seleccionando para isso a
opção <NONE>.
Ainda na caixa de diálogo NEW DOCUMENT, repare que, no canto inferior direito,
existe uma série de opções que nos permite personalizar a página que preten-
demos criar.
A primeira lista,
permite-nos atribuir uma Document Type Declaration, que é uma linha de

código no início da página que informa o user-agent (normalmente o browser)
que tipo de código esperar. Desta forma o browser sabe quais são as regras
que deve utilizar para mostrar e formatar correctamente o código.
A declaração mais corrente nos dias de hoje é «XHTML 1.0 Transitional»,
embora no futuro mais próximo se vá começar a utilizar o HTML 5.
Caso tenha importado o sítio Web para o Dreamweaver, poderá ter CSS
externas que vai utilizar com todas as páginas do sítio Web. Nesse caso terá
de clicar no botão ATTACH STYLE SHEET,
e depois seleccionar o ficheiro .css que pretende utilizar.

Finalmente clicamos no botão CREATE para criar uma página em ‘branco’. Se
mudar para a vista CODE, poderá verificar que a primeira linha de código
HTML corresponde à declaração DOCTYPE, cujo valor seleccionamos no
campo DOCTYPE da caixa de diálogo NEW DOCUMENT:
4. DOCUMENTOS 93
Agora temos de guardar a página em disco atribuindo-lhe um nome.
4.1 Preferências dos novos documentos

Dependendo do método utilizado pelo web designer para criar uma página, o
Dreamweaver toma determinadas decisões. Caso não lhe agradem estas
decisões poderá efectuar algumas alterações. Aceda à opção EDIT >
PREFERENCES no Windows (DREAMWEAVER > PREFERENCES no Macintosh), e
depois clique na categoria NEW DOCUMENT.
A primeira opção tem a ver com o tipo de documento por omissão que é
criado:
Por omissão é HTML, mas se estiver a criar um sítio Web dinâmico será natu-
ral mudar o valor desta opção, por exemplo, para PHP (ou ColdFusion).
Sempre que mudar esta opção, o Dreamweaver coloca, na opção DEFAULT
EXTENSION,
a extensão mais comum para o tipo de documento seleccionado:
Na maior parte dos casos não pode alterar esta extensão, mas se seleccionar
a opção HTML, no campo DEFAULT DOCUMENT, pode fazê-lo. Vários designers
utilizam a extensão .htm para os documentos HTML em vez da extensão .html.
Também se pode definir o DTD a utilizar por omissão nos novos documentos
criados. Vimos anteriormente que por omissão é utilizado o XHTML 1.0 Tran-
sitional:
Não é muito vulgar alterar as outras opções excepto a última, SHOW NEW
DOCUMENT DIALOG BOX ON CONTROL+N. Se esta opção estiver activada quando
teclar CONTROL+N no Windows (ou COMMAND+N no Macintosh), aparece a
caixa de diálogo NEW DOCUMENT. Caso a opção esteja desactivada, esta caixa
de diálogo não aparece e será criado automaticamente um documento de
acordo com os valores seleccionados para as opções da caixa de diálogo P RE-
FERENCES, aparecendo aberto na área de documentos.
4.2 Estrutura de um documento HTML

Vamos agora fazer a análise de um documento em ‘branco’ HTML criado pelo
Dreamweaver:
4. DOCUMENTOS 95
A primeira linha de código, como já vimos anteriormente, identifica a Docu-

ment Type Definition utilizada para validar o código da página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Em seguida, aparece a identificação do tipo de documento, recorrendo ao

elemento <html>:
<html xmlns="http://www.w3.org/1999/xhtml">
O atributo xmlns só é utilizado em documentos XHTML, dado que é inválido

em documentos HTML. Especifica o namespace XML do documento.
Um documento HTML está dividido em duas partes: HEAD e BODY.
4.2.1 Secção HEAD

A secção HEAD contém diversa informação sobre o documento, a maior parte
da qual não é visível para o visitante da página, excepto o título:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
O elemento <title> contém o título atribuído à página. Este título aparece,

nos browsers, no canto superior esquerdo, além de também aparecer nos
resultados dos motores de pesquisa:
Para se atribuir um título a uma página não é necessário aceder ao código.

Em modo DESIGN, na barra DOCUMENT, existe um campo onde o título pode
ser inserido:
Deve ter reparado que, no código, existe um elemento <meta>. Estes ele-
mentos, em documentos HTML, servem para passar informação sobre o
documento aos browsers e aos motores de pesquisa.
O elemento <meta> criado pelo Dreamweaver identifica o tipo de documento
recorrendo a um Internet Media Type (text/html), e a uma codificação
(utf-8):
charset=utf-8" />
Existem muitos outros tipos de elementos <meta> (ou outros elementos) que
podem ser utilizados no cabeçalho (<head>) de um documento HTML. Para
inserir novos elementos utiliza-se a opção HEAD da categoria COMMON do pai-
nel INSERT,
Seleccionando a opção META, aparece uma caixa de diálogo:
O campo ATTRIBUTE possui duas opções: NAME e HTTP-EQUIVALENT. A

segunda opção já foi criada automaticamente pelo Dreamweaver. Podemos
4. DOCUMENTOS 97
criar um elemento <meta> com um atributo name. Neste caso existe uma
série de valores pré-definidos que são reconhecidos pelos browsers e pelos
motores de pesquisa. Um desses valores é o description que permite a
introdução de uma breve descrição da finalidade da página (campo CONTENT).
Depois de se clicar em OK, o código HTML produzido é:
<meta name="Description" content="Site de venda de
automóveis." />
Outro valor muito utilizado é o keywords, que permite especificar palavras

que identificam o conteúdo da página:
<meta name="keywords" content="automóveis, viaturas,
comerciais ligeiros, auto-caravanas" />
Estes keywords são utilizados por alguns motores de pesquisa para indexarem
a página.
Se pretender alterar, em modo DESIGN, qualquer um dos elementos presentes
no HEAD de um documento HTML, pode activar a barra HEAD utilizando a
opção VIEW > HEAD CONTENT:
Clique agora num dos ícones e depois altere os respectivos valores no

PROPERTY INSPECTOR:
4.2.2 Secção BODY

A segunda parte de um documento HTML é o BODY, onde se coloca o con-
teúdo da página, isto é, a informação a que o visitante vai ter acesso:
<body>
</body>
É neste elemento <body> que vamos trabalhar a partir de agora, embora na

vista DESIGN não tenhamos a percepção disso.
4.3 Trabalhar com documentos

O Dreamweaver disponibiliza vários menus e barras de ferramentas que aju-
dam a trabalhar com os documentos Web.
Já vimos anteriormente que existe uma barra STANDARD,
que permite efectuar operações comuns à maior parte dos programas do

Windows ou do Mac OS, como abrir documentos, criar novos documentos,
guardar documentos, cortar, copiar, colar, undo e redo. Esta barra pode ser
visualizada através do menu VIEW > TOOLBARS:
Em alternativa pode colocar o cursor em cima de uma barra de ferramentas

visível no Dreamweaver e clicar com o botão direito do rato (CONTROL+CLIQUE
no Macintosh) para obter o mesmo menu:
Algumas das opções disponibilizadas na barra STANDARD também estão dis-

poníveis num menu de contexto que aparece quando se clica com o botão
direito do rato (CONTROL+CLIQUE no Macintosh) num separador relativo a uma
página Web ou no espaço em ‘branco’ existente ao lado desses separadores:
4. DOCUMENTOS 99
Quando uma página é aberta no Dreamweaver, logo abaixo do separador que

identifica essa página, o Dreamweaver lista todos os ficheiros que estão rela-
cionados com essa página, e que são normalmente ficheiros JavaScript e
ficheiro CSS:
Isto significa que, se pretendermos editar um desses ficheiros, basta clicar no

respectivo nome não sendo necessário localizá-los no painel FILES:
Pode verificar que, ao clicar no nome de um desses ficheiros relacionados, o

Dreamweaver muda para modo SPLIT dividindo a janela de documento em
duas partes: uma parte para a página corrente e a outra para o ficheiro que
pretendemos editar.
Caso o número de ficheiros que estão referenciados pela página corrente for
elevado, pode filtrar os ficheiros que pretende que apareçam na lista. O menu
FILTER RELATED FILES permite-lhe efectuar essa filtragem:
As opções RELATED FILES e RELATED FILES OPTIONS do menu VIEW , também

lhe permitem efectuar estas operações:
Dica
Se trabalhar habitualmente com muitos ficheiros abertos e se cansar de os
abrir sempre que invoca o Dreamweaver, aceda à caixa de diálogo
PREFERENCES através da opção EDIT > PREFERENCES (DREAMWEAVER >
PREFERENCES no Macintosh) e depois seleccione a categoria GENERAL:
Activando a opção REOPEN DOCUMENTS ON STARTUP permite que quando

fechar o Dreamweaver e tiver documentos abertos, da próxima vez que invo-
car o Dreamweaver apareçam abertos esses documentos.
4.4 Visualizar páginas

O Dreamweaver faz um grande esforço para apresentar na vista DESIGN a
página Web tal qual ela aparecerá num browser moderno. Porém, esse
esforço não é suficiente e existem muitos elementos (nomeadamente estilos
CSS) que não são representados de forma conveniente na vista DESIGN.
4. DOCUMENTOS 101
4.4.1 Live View

Para resolver esse problema, o Dreamweaver possui disponível o motor de
desenho de páginas WebKit. Poderá nunca ter ouvido falar no WebKit mas é o
motor (layout engine) dos browsers Apple Safari e Google Chrome.
Para se aceder ao WebKit utiliza-se o botão LIVE VIEW da barra DOCUMENT:
O WebKit é um motor moderno de desenho de páginas, por isso o resultado

do LIVE VIEW é bastante exacto.
Quando mudamos da vista DESIGN para a LIVE VIEW, estamos apenas a alter-
nar entre a versão editável da vista DESIGN e a versão ‘live’ dessa mesma
vista. É por isso que, estando em LIVE VIEW, o botão DESIGN permanece pres-
sionado.
Embora não possamos efectuar alterações no modo DESIGN quando o modo
LIVE VIEW está activo, podemos contudo efectuar alterações na vista CODE e
depois mudar para a vista DESIGN (continuando em modo LIVE VIEW) para ver
os efeitos das alterações efectuadas.
Em modo LIVE VIEW podemos navegar na página utilizando CONTROL+CLIQUE
no Windows e COMMAND+CLIQUE no Macintosh para seguir os links:
Se pretender que os links se comportem da forma habitual, isto é, sem ser

necessário manter a tecla CONTROL (ou COMMAND no Macintosh) pressionada,
pode seleccionar a opção FOLLOW LINKS CONTINUOUSLY no menu existente na
barra BROWSER NAVIGATION:
A barra BROWSER NAVIGATION,
é semelhante à barra de navegação da maior parte dos browsers, possibili-

tando retroceder para a página anterior, refrescar a página, ou mesmo voltar à
página inicial a partir da qual se activou o modo LIVE VIEW.
Uma das funcionalidades do modo LIVE VIEW , é que, a partir do momento que
navegamos para uma determinada página, podemos abri-la para edição utili-
zando a opção EDIT THE LIVE VIEW PAGE IN A NEW TAB:
4.4.2 Pré-visualização das páginas em browsers

Porém, nem todos os browsers desenham uma página Web da mesma forma.
Existem mesmo alguns browsers, como o Internet Explorer, que têm tendência
a ser diferentes dos outros. Isso significa que é sempre conveniente visualizar
as nossas páginas em vários browsers. Mas que browsers? Segundo diversas
fontes, o Internet Explorer é neste momento o browser com maior quota de
mercado (aproximadamente 60%), seguido do Firefox (cerca de 23 a 25%), do
Google Chrome (7-8 %) e do Apple Safari (5%).
Isto significa que, no mínimo, temos de testar as páginas no Internet Explorer
e no Mozilla Firefox, e preferencialmente também convinha testar no Apple
4. DOCUMENTOS 103
Safari e no Google Chrome. E os testes devem ser efectuados no Windows

(aqui testamos nos quatro browsers) e no Macintosh (aqui só estão disponí-
veis três, dado que já não existe uma versão recente do Internet Explorer para
o Mac OS).
O Internet Explorer coloca-nos um problema adicional devido à existência de
várias versões ainda em utilização. Neste momento as versões 6, 7 e 8 ainda
se encontram activas e brevemente vai chegar a versão 9.
O Dreamweaver permite-nos invocar a página corrente nos browsers que
estejam instalados no nosso computador. É para isso que serve o menu
PREVIEW/DEBUG IN BROWSER da barra DOCUMENT:
Quando o Dreamweaver é instalado no nosso computador, verifica quais são

os browsers que estão disponíveis e coloca-os nesta lista.
Dica
Uma forma mais rápida de fazer a pré-visualização da página corrente no
browser por omissão é teclar F12.
Se, por acaso, não aparecer listado um dos browsers que tenha instalado no
seu computador, pode sempre adicioná-lo à lista clicando na opção EDIT
BROWSER LIST para aceder à categoria PREVIEW IN BROWSER da caixa de diá-
logo PREFERENCES:
Para acrescentar um novo browser clique no botão +:
Terá de introduzir um nome que identifique o browser na lista, bem como a

localização do respectivo ficheiro executável, utilizando para isso o botão
BROWSE. Em Windows, um ficheiro executável tem a extensão .exe. Alguns
browsers têm o respectivo ficheiro executável numa localização algo estranha.
Por exemplo, o ficheiro executável do Google Chrome (chrome.exe) pode
estar localizado na pasta nome_utilizador/AppData/Local/Google/
Chrome/Application .
Pode-se também definir um browser primário e um browser secundário, o que
facilita a utilização de teclas de atalho para invocar os browsers. O browser
primário é invocado a partir do Dreamweaver utilizando a tecla F12, enquanto
o browser secundário é invocado utilizando a combinação de teclas CONTROL
+F12.
É sempre possível alterar a informação e configuração de um browser nesta
lista de browsers, utilizando o botão EDIT.
Na caixa de diálogo PREFERENCES a opção PREVIEW USING TEMPORARY FILE só
é necessária se estiver a trabalhar com páginas dinâmicas (PHP, Coldfusion,
etc.).
4.4.3 BrowserLab
Novidade na versão CS5 do Dreamewaver é a integração com o BrowserLab,
que é um serviço online CS Live, que permite testar o nosso sítio numa grande
variedade de browsers. Este serviço funciona através de cópias de ecrã
(screenshots) da página corrente tal como ela aparecerá em diferentes brow-
sers. Uma das suas funcionalidades mais úteis é permitir a comparação, lado
a lado, do aspecto de uma página em dois browsers diferentes.
Para se poder utilizar o BrowserLab é necessário que o web designer esteja
registado no sítio Web da Adobe e que active o registo depois de ter recebido
uma mensagem de e-mail.
No Dreamweaver, o painel ADOBE BROWSERLAB permite o acesso a este ser-
viço:
4. DOCUMENTOS 105
Podemos também utilizar o menu CS LIVE da barra APPLICATION:
Ao clicar em PREVIEW (ou em PREVIEW IN BROWSERLAB) o Dreamweaver esta-

belecerá ligação com o sítio http://browserlab.adobe.com. Em alguns casos poderá
aparecer uma mensagem de aviso, sobretudo quando a página contiver fi-
cheiros externos como animações/filmes Flash, entre outras:
Este alerta lembra ao web designer que os ficheiros externos referenciados

pela página corrente serão copiados para o sítio BROWSERLAB. Clique em
ALLOW para prosseguir.
Aparecerá a página de autenticação onde deverá introduzir o e-mail e a senha
que utilizou para se registar no sítio:
Terá de esperar uns segundos até que o serviço BROWSERLAB crie as imagens
com o resultado da visualização da página em diversos browsers. Será apre-
sentada a versão criada no browser definido por omissão:
Para ver a página em outros browsers, aceda ao menu que está associado ao
nome do browser:
4. DOCUMENTOS 107
Repare que além do browser ‘corrente’, existem mais três outros browsers na
lista (Safari 3.0 – OS X, Firefox 3.0 – Windows e Internet Explorer 7.0 – Win-
dows). Estes quatro browsers pertencem ao chamado browser set corrente.
Se o browser em que pretende testar a sua página não se encontrar na lista,
pode seleccioná-lo do sub-menu ALL BROWSERS:
Ao seleccionar um browser nesta lista, além do BrowserLab gerar uma ima-

gem da página utilizando esse browser, também o acrescenta à lista de brow-
ser que fazem parte do browser set por omissão.
Se pretender criar uma lista browser set diferente da fornecida, terá de aceder
à opção BROWSER SETS:
Nesta página pode adicionar ou remover browsers à lista browser set por
omissão:
Na coluna BROWSER ORDER é possível definir a ordem pela qual os browsers

seleccionados para o browser set aparecem no menu. Basta arrastá-los para a
nova posição.
Existe um browser set definido por omissão, mas podemos definir outros
browser sets através do botão ADD NEW BROWSER SET:
Depois de atribuirmos um nome ao novo browser set,

4. DOCUMENTOS 109
podemos seleccionar os browsers que pretendemos que façam parte desse

browser set.
Não é necessário guardar o browser set já que essa operação é efectuada
automaticamente. Para voltar à página de testes clique no link TEST:
Poderá verificar pelo sub-menu BROWSER SETS que o novo browser set ficou
automaticamente activado:
Mas talvez a funcionalidade mais útil do BrowserLab seja a possibilidade de

comparar a nossa página Web lado a lado em dois browsers diferentes. No
menu VIEW seleccione a opção 2-UP VIEW:
O resultado será do tipo:

Pode agora seleccionar, no menu de browsers, outros browsers para fazer

comparações na forma como cada um apresenta a sua página Web.
Quando estamos no modo 2-UP VIEW, se mantivermos a tecla SHIFT pressio-
nada e deslocarmos o rato podemos fazer uma comparação mais precisa
entre os dois browsers, dado que aparece um cursor em cada browser posi-
cionado no mesmo local:
Um deles é um cursor ‘fantasma’ (ghost cursor), correspondendo ao cursor do

lado esquerdo na nossa imagem.
Mas, no menu VIEW, temos disponível uma opção ONION SKIN,
4. DOCUMENTOS 111
que permite sobrepor as imagens produzidas para dois browsers distintos,

podendo assim ver melhor as diferenças:
A barra de percentagens que se encontra entre os nomes dos dois browsers,
define a preponderância de cada browser, isto é, se existirá um browser cuja

versão da página está mais realçada do que a versão do outro browser.
Se pretender um processo mais preciso de controlo do posicionamento dos
elementos da página num browser pode recorrer à opção SHOW RULERS do
menu VIEW ,
que mostra duas réguas, que utilizam como unidade os píxeis:

E tal como acontece no Dreamweaver, também pode criar guias, ‘puxando-as’

de uma régua:
No canto superior esquerdo existem outras funcionalidades disponíveis:
Podemos fazer zoom para ter uma ideia mais exacta de um determinado ele-
mento da página (zoom maior que 100%) ou para termos uma visão de con-
junto da página (zoom menor que 100%).
A opção DELAY é bastante útil dado que permite informar o serviço Browser-
Lab que as cópias de ecrã (screenshots) devem ser efectuadas com um atraso
de x segundos, para permitir que certas animações ou widgets JavaScript
possam ter tempo de executar.
Se pretender ficar com uma cópia dos screenshots produzidos para um ou
mais browsers, pode fazê-lo recorrendo à opção SAVE LOCALLY do menu de
contexto que aparece quando clica com o botão direito do rato em cima da
página (CONTROL+CLIQUE no Macintosh):
4.4.4 Multiscreen
Quando se desenha uma página Web que vai ser visualizada em diversos
equipamentos diferentes (computador, smartphone, tablet, etc.), é interessante
poder-se ver em simultâneo a aparência da página nesses equipamentos.
4. DOCUMENTOS 113
O Dreamweaver disponibiliza a pré-visualização Multiscreen (apenas se tiver

instalada a versão 11.0.3 ou o Dreamweaver CS5 HTML 5 Pack Update), dis-
ponível a partir do botão com o mesmo nome na barra DOCUMENT:
Esta pré-visualização suporta os três seguintes tipos de ecrãs:

• Telemóvel (smartphone) – resolução por omissão de 320x300 píxeis;
• Tablet – resolução por omissão de 768x300 píxeis;
• Computador (desktop) – largura de ecrã de 1108 píxeis;
Pré-visualizando uma das páginas do nosso sítio Web em Multiscreen:
Clicando no botão VIEWPORT SIZES,
podemos definir outras dimensões de ecrã para os três tipos de equipamento:

Podemos utilizar CSS Media Queries para atribuir ficheiros CSS distintos para
cada um dos três equipamentos. Esta funcionalidade está disponível na norma
CSS3 e por isso só funciona em browsers que suportem essa norma, isto é,
nas versões mais recentes dos browsers.
Clique no botão MEDIA QUERIES e, depois
na caixa de diálogo MEDIA QUERIES,
seleccione na coluna CSS FILE o ficheiro
CSS que pretende utilizar com cada tipo
de equipamento:
O Dreamweaver insere na sua página, na secção <head>, código do tipo:

<link href="css/phone.css" rel="stylesheet"
type="text/css" media="all and (min-width: 0px) and
(max-width: 320px)" />
<link href="css/tablet.css" rel="stylesheet"
type="text/css" media="all and (min-width: 321px)
and (max-width: 768px)" />
<link href="css/main.css" rel="stylesheet"
type="text/css" media="all and (min-width: 769px)"
/>
Tenha em atenção que a pré-visualização Multiscreen não é um browser e

como tal não se deve esperar a reprodução de vídeos nem a utilização de
links para aceder a outras páginas do sítio Web.
4. DOCUMENTOS 115
4.4.5 Device Central

Cada vez mais existem telemóveis com funcionalidades semelhantes às de
um computador (os chamados smartphones), excepto que a dimensão do ecrã
é bem mais pequena.
O Dreamweaver permite testar páginas Web em vários equipamentos móveis,
recorrendo à funcionalidade Opera Small-Screen Rendering. Diferentes equi-
pamentos possuem diferentes browsers instalados, mas esta funcionalidade
fornece uma imagem bastante boa do aspecto e comportamento que o seu
sítio Web pode ter num determinado equipamento.
Na barra DOCUMENT, clique no botão PREVIEW /DEBUG IN BROWSER e seleccione
a opção PREVIEW IN DEVICE CENTRAL:
A página corrente é apresentada no separador DEVICE CENTRAL EMULATOR:
Pode ver a aparência da página em outros equipamentos, efectuando um

duplo clique num equipamento listado no separador TEST DEVICES.
5 Trabalhar com texto
Nos primórdios da World Wide Web as páginas apenas continham texto. O

HTML possui diversos elementos que devem ser utilizados para estruturar o
conteúdo de uma página, que, na maior parte das vezes, é constituído princi-
palmente por texto.
Trabalhar com texto no Dreamweaver é como trabalhar com um processador
de texto, como o Microsoft Word. Aliás, alguns dos ícones utilizados para
estruturar o texto são praticamente idênticos.
5.1 Definir a estrutura do documento

A primeira tarefa, quando se desenha um sítio Web, é criar a estrutura básica
de uma página. Esta estrutura pode ser criada utilizando texto fictício ou com
conteúdo real definitivo. O texto fictício é conhecido por Lorem Ipsum e um site
óptimo para obter este tipo de texto é o http://www.lipsum.com .
Podemos escrever o texto directamente no Dreamweaver ou importá-lo de
programas como o Microsoft Word.
5.2 Parágrafos
Ao escrevermos texto no Dreamweaver e ao carregar em ENTER (ou RETURN),
já estamos a estruturá-lo, dado que é criado automaticamente um parágrafo
que é identificado em HTML pelo elemento <p>:
Isto significa que se estivermos a escrever texto numa página no Dreamwea-

ver sem nos preocuparmos com formatações, a página apenas conterá pará-
grafos.
É possível verificar que texto está incluído num determinado parágrafo, colo-
cando o cursor no meio do texto e depois, no TAG SELECTOR, clicando no ele-
mento <p>:
Não assuma que quando vê uma linha de texto ou um bloco de texto esta se
encontra dentro de um parágrafo. Deverá colocar o cursor dentro do texto em
causa e depois verificar no TAG SELECTOR que elemento é utilizado nesse
texto.
Se utilizar a vista SPLIT, poderá verificar os parágrafos que existem no docu-
mento:
Repare que o texto se encontra envolvido pelas etiquetas (tags) <p> e </p>.
5.2.1 Seleccionar texto

No Dreamweaver existem diversas formas de seleccionar texto:
5. TRABALHAR COM TEXTO 119
• Clicar e arrastar, que é o método tradicional do Windows e do

Macintosh;
• Clicar no início do texto que pretende seleccionar e depois clicar no
final desse texto mantendo a tecla SHIFT premida;
• Para seleccionar uma palavra, efectue um duplo-clique por cima dela;
• Para seleccionar um parágrafo efectue um triplo-clique em qualquer
parte desse parágrafo;
• Para seleccionar uma única linha de texto, mova o cursor para a
esquerda da linha, até que a seta do cursor fique invertida, e clique:
• Para seleccionar múltiplas linhas de texto, repita o procedimento ante-

rior mas, desta vez, clique e arraste;
• Combinando a tecla SHIFT com as teclas de cursor pode seleccionar
uma letra de cada vez;
• Utilizando a combinação de teclas CONTROL+SHIFT (ou COMMAND+
SHIFT no Macintosh) com as teclas de cursor pode seleccionar uma pa-
lavra de cada vez;
• CONTROL+A (ou COMMAND+A no Macintosh) permite seleccionar todo o
texto da página (bem como imagens e outros objectos).
Todos estes métodos seleccionam texto mas não seleccionam elementos

específicos de HTML. Com texto assim seleccionado, se efectuar uma selec-
ção de valores no PROPERTY INSPECTOR, ou num menu, o mais provável é a
criação de um novo elemento, nomeadamente um elemento <span>, o que, a
maior parte das vezes, não é o que desejamos. Porém, como iremos ver mais
tarde, teremos de recorrer a um destes métodos em algumas circunstâncias.
A forma ideal de seleccionar elementos associados a texto (por exemplo,
parágrafos), é colocar o cursor no meio do parágrafo e clicar, e depois, no TAG
SELECTOR, seleccionar o último elemento da lista de elementos:
5.3 Cabeçalhos
A maior parte das vezes o texto de uma página está dividido em secções a
que corresponde normalmente um título. No nosso texto exemplo já temos
quatro títulos possíveis (Quem Somos, Preços Baixos, Qualidade Garantida e
Assistência técnica qualificada).
Necessitamos agora de informar o HTML que esses títulos correspondem a
secções distintas. Para o fazermos seleccionamos primeiro o respectivo
parágrafo,
e, em seguida, escolhemos a opção HEADING 2 no campo FORMAT do

PROPERTY INSPECTOR (com o separador HTML activo):
O resultado é:
Por omissão, todos os browsers apresentam um cabeçalho de nível 2 a negrito

(bold) e com um tamanho de letra superior ao utilizado no texto. Utilizando
estilos CSS pode-se alterar o aspecto dos cabeçalhos.
Aplicamos este tipo de cabeçalho aos outros 3 títulos de secções:
Se reparar na lista de opções disponível no campo FORMAT do PROPERTY

INSPECTOR, verá que existem outros níveis de cabeçalhos. Estes níveis são
hierárquicos, isto é, o HEADING 1 é mais importante que o HEADING 2, que por
sua vez é mais importante que o HEADING 3 e assim sucessivamente.
Então porque é que não utilizamos o HEADING 1 para os nossos títulos de sec-
ção? Porque normalmente só deve existir um HEADING 1 numa página, assim
como só existe um título para cada capítulo de um livro.
Mas então é conveniente acrescentar um título principal ao conteúdo da
página e formatá-lo como HEADING 1:
Na lista disponível no campo FORMAT do PROPERTY INSPECTOR, não temos

muitas hipóteses de escolha além dos parágrafos e dos cabeçalhos. A opção
PREFORMATTED permite utilizar um tipo de letra monospaced, isto é, um tipo de
letra em que todas as letras ocupam o mesmo espaço, como acontece com o
tipo Courier New. O elemento HTML respectivo é o <pre>, e é normalmente

utilizado para apresentar código informático, como no seguinte exemplo:
Este elemento <pre> retém quebras de linha e espaço em branco, ao contrá-

rio do que acontece com os parágrafos e os cabeçalhos.
5.4 Alinhamentos
Por omissão, o Dreamweaver e o HTML efectuam um alinhamento do texto
(parágrafos, cabeçalhos, itens de listas, etc.) ao lado esquerdo. Porém, pode-
mos alterar esse alinhamento recorrendo ao atributo align do HTML.
Uma das formas de o fazer é através do sub-menu FORMAT > ALIGN:
Mas repare que, no PROPERTY INSPECTOR, tanto para os parágrafos como para
os cabeçalhos não existe nenhuma opção de alinhamento quando está selec-
cionado o separador HTML. Mas se mudarmos para o separador CSS encon-
tramos lá os tradicionais ícones associados ao alinhamento:
O Dreamweaver segue a tendência actual para efectuar o alinhamento de

objectos da página utilizando estilos CSS e não atributos do HTML.
Devemos ter em atenção que as páginas Web são um meio diferente do
papel, e por isso não é muito habitual a utilização de texto justificado, embora
a decisão final seja do web designer.
5.5 Quebras de linha e espaços

Uma das grandes diferenças entre o Dreamweaver (e por arrasto, o HTML) e
um processador de texto, tem a ver com a utilização de espaços e de quebras
de linha.
No Dreamweaver, sempre que se carrega no ENTER (ou RETURN) é criado um
novo parágrafo. E no HTML os parágrafos possuem entre si uma linha em
branco. Este ‘efeito’ pode ser observado no primeiro parágrafo do nosso texto,
se separarmos as duas frases que o constituem:
É possível remover ou reduzir o espaço ocupado por esta linha utilizando

estilos CSS.
Existe contudo um elemento HTML que permite evitar o ‘problema’ da linha em
branco. Trata-se do elemento <br>. Para o aplicarmos no Dreamweaver, em
vez de teclarmos ENTER (ou RETURN) temos de teclar SHIFT+ENTER (ou
SHIFT+RETURN).
Se apenas pretende evitar a linha em branco não deve recorrer ao elemento
<br>, devendo utilizar estilos CSS. O elemento <br> apenas deve ser utili-
zado em situações em que, continuando no mesmo parágrafo, se pretende
mudar de linha.
Quanto aos espaços, não adianta, no Dreamweaver, carregar várias vezes na

barra de espaços, dado que o cursor não sairá do sítio. O Dreamweaver ape-
nas admite um único espaço dado que o HTML substitui múltiplas ocorrências
seguidas de espaços por um único espaço. Mesmo que introduza os espaços
na vista CODE, o resultado na vista DESIGN é como se só tivesse inserido um
único espaço:
Mas existem ocasiões em que é necessário utilizar mais de um espaço. Nes-

ses casos temos de recorrer ao caracter especial do HTML, que sig-
nifica non-breaking space. Utiliza-se a opção INSERT > HTML > SPECIAL
CHARACTERS > NON-BREAKING SPACE:
5.6 Caracteres especiais

Existem diversos caracteres que são utilizados em texto mas que não se
encontram disponíveis num teclado. Um destes caracteres é o símbolo de
copyright, ©.
O Dreamweaver disponibiliza uma lista de caracteres especiais através do
sub-menu da opção INSERT > HTML > SPECIAL CHARACTERS:
Além destes, temos acesso a muitos mais através da opção OTHER deste sub-
-menu:
Repare que nesta caixa de diálogo, quando clica num carácter especial, apa-
rece na caixa de texto INSERT a sua representação em HTML. Por exemplo, no
caso do copyright será ©. Todos os caracteres especiais começam por
‘&’ e terminam em ‘;’, e quase todos possuem também uma representação
numérica que, no caso do copyright, é ©.
Historicamente, quando se utilizava o iso8859-1 como codificação das pági-
nas, os caracteres acentuados também eram representados por códigos. Por
exemplo, o ‘ã’ é representado por ã. Com a utilização da codificação

utf-8 esses códigos deixaram de ser necessários.
Estes códigos são especialmente necessários para representar caracteres que
têm um significado especial no HTML como acontece com o &, o > e o <. Mas
não necessitamos de nos preocupar com estes caracteres dado que o
Dreamweaver automaticamente insere, no código HTML, os respectivos
códigos.
5.7 Formatação especial

Nos processadores de texto temos um controlo absoluto sobre a forma como o
texto é formatado. Existem opções para todo o tipo de formatações, inclusive
para a produção de fórmulas matemáticas.
O HTML é mais limitado, e normalmente estas formatações são conseguidas à
custa de estilos CSS. Mas existem algumas formatações que podem ser
efectuadas em HTML.
Por exemplo, colocar caracteres ligeiramente acima e ligeiramente abaixo da
linha de base do texto (em inglês, baseline). Um dos exemplos tradicionais é o
H2O, relativo à fórmula química da água. Para conseguir que o 2 fique mais
abaixo do que o normal, temos de seleccionar o algarismo (utilizando neste
caso o método de clicar e arrastar), e teclar CONTROL+T (COMMAND+T no
Macintosh):
Aparece uma lista de todos os elementos HTML. Podemos seleccionar um

elemento da lista utilizando o rato ou escrever directamente a etiqueta (tag)
pretendida. Vamos escrever sub (do inglês subscript),
e depois teclar ENTER (ou RETURN). Já temos o pretendido:
Veremos, no capítulo sobre as CSS, que podemos controlar a distância do

algarismo em relação à linha de base do texto.
O WRAP TAG coloca o texto seleccionado (ou outro obejcto) dentro do ele-
mento fornecido:
<p>H<sub>2</sub>O</p>
Existe também a possibilidade de colocar o algarismo mais acima do que o

normal (como em 24 ou em fórmulas matemáticas) recorrendo ao elemento
<sup> (do inglês superscript).
5.8 Citar texto

Certos tipos de conteúdo necessitam que sejam colocados em destaque cer-
tas afirmações. No nosso exemplo vamos acrescentar uma secção OPINIÕES
DOS CLIENTES, com o seguinte conteúdo:
As citações aparecem muitas vezes ‘indentadas’ para o lado direito, para se

realçarem do resto de texto. Para assinalarmos determinado texto como uma
citação, seleccionamo-lo e escolhemos a opção INSERT > HTML > TEXT
OBJECTS > BLOCK QUOTE:
Em HTML é utilizado o elemento <blockquote> para este efeito.

5.9 Dar ênfase ao texto

Até ao momento não estivemos preocupados com a aparência visual do texto.
Isto é, não definimos tipos de letra, tamanho de letra, realce de determinado
texto, etc. Isso aconteceu porque a mudança da aparência visual do texto
deve ser efectuada recorrendo a estilos CSS, de que falaremos mais tarde.
Mas podemos assinalar ao browser que pretendemos colocar em destaque
determinado texto, para lhe dar mais ênfase. Existem para isso dois elementos
de HTML: <strong> e <em>.
O primeiro, <strong>, permite realçar fortemente determinada(s) palavra(s).
Por exemplo, podemos realçar o nome da empresa sempre que ele ocorra no
texto, de forma aos visitantes o memorizarem mais rapidamente. Selecciona-
mos uma ocorrência do nome da empresa e escolhemos a opção INSERT >
HTML > TEXT OBJECTS > STRONG:
Em alternativa podemos clicar no seguinte ícone no PROPERTY INSPECTOR:
O resultado da aplicação do elemento <strong> e o próprio desenho do

ícone no PROPERTY INSPECTOR podem induzir o web designer em erro,
fazendo-o pensar que strong é igual a bold. Ao utilizarmos o elemento
<strong> estamos a informar o browser que ele deve realçar fortemente
determinada(s) palavra(s). A forma como o browser o faz é da sua inteira res-
ponsabilidade, se bem que a maior parte dos browsers interpreta esse ele-
mento dessa forma, mas nada os obriga a tal.
Se o realce que pretende atribuir não for muito forte, então pode recorrer ao
elemento <em>, através da opção INSERT > HTML > TEXT OBJECTS > EM ou do
seguinte ícone no PROPERTY INSPECTOR:
O resultado, na maior parte dos browsers, é a aplicação do itálico à(s) pala-

vra(s) seleccionada(s), embora isso não seja obrigatório.
5.10 Dividir em secções

Desde a chegada das páginas Web que existiu a necessidade de dividir visual-
mente em secções o respectivo conteúdo. Os cabeçalhos permitiam essa divi-
são, mas muitas vezes era necessário um elemento gráfico para tornar a divi-
são mais visível.
Nestes casos podemos recorrer ao elemento <hr>, que em inglês significa
horizontal rule. Para inserir este elemento que corresponde a uma linha hori-
zontal que utiliza toda a largura da página, utilize a opção INSERT > HTML >
HORIZONTAL RULE ou o ícone da barra INSERT:
O resultado será do tipo:
Ao contrário dos elementos HTML que utilizamos até agora, o elemento <hr>
possui diversas propriedades que permitem alterar a sua aparência, como
pode observar se seleccionar o elemento no TAG SELECTOR e reparar no
PROPERTY INSPECTOR:
As propriedades W e H permitem definir uma largura e uma altura da linha. A

altura é sempre especificada em píxeis, enquanto a largura pode ser especifi-
cada em píxeis ou em percentagem. No caso das percentagens, referem-se à
largura da página. Isto é, uma largura de 50% para um elemento <hr> refere-
se a metade da largura da página, seja ela qual for, em píxeis.
O alinhamento, que por omissão é ao centro, pode ser alterado (opção ALIGN),
bem como o efeito de sombreado (opção SHADING).
Ao longo dos tempos, o elemento <hr> foi sendo substituído por imagens,
algumas das quais bastante curiosas, e mais recentemente pelas molduras
(borders) dos estilos CSS.
5.11 Listas
As listas são uma forma de apresentar itens relacionados de uma forma nume-
rada ou não numerada. Permitem-nos agrupar conteúdo relacionado, e estru-
turar esse conteúdo de uma forma que mostre importância, posição ou seme-
lhança. Quando utilizado para navegação, permite agrupar hiperligações
relacionadas.
O HTML disponibiliza três tipos principais de listas:
• Ordered – utiliza uma forma de numeração, árabe ou romana;
• Unordered – utiliza marcas (em inglês bullets) ou ícones;
• Definition – apresenta uma palavra, seguida da respectiva definição.
Ao contrário de uma lista de definições, as listas numeradas e não numeradas
seguem a mesma estrutura. Embora a palavra inglesa ordered possa dar a
ideia que existe uma ordenação dos itens da lista, na realidade os itens ape-
nas estão numerados, não existindo uma ordem definida entre eles.
Acrescentamos texto à nossa secção QUALIDADE GARANTIDA de forma a criar
uma lista não numerada:
Agora seleccionamos os itens que pretendemos colocar na lista e clicamos no

ícone UNORDERED LIST:
O resultado é:
Uma lista não numerada recorre ao elemento <ul> (do inglês, unordered list)
de HTML, bem como ao elemento <li> (do inglês list item) para identificar os
itens da lista.
Como as listas numeradas e não numeradas partilham a estrutura basta
mudar de <ul> para <ol> (e de </ul> para </ol>) para termos uma lista
numerada:
Como é óbvio podemos sempre recorrer ao ícone ORDERED LIST do PROPERTY

INSPECTOR:
Se colocarmos o cursor no texto de um item da lista, aparece, no PROPERTY

INSPECTOR, um novo botão, LIST ITEM:
que dá acesso a uma caixa de diálogo onde podemos personalizar diversas

propriedades da lista:
Por exemplo, o tipo de lista (campo LIST TYPE):
e o estilo de numeração (campo STYLE).

Se estivermos a utilizar uma lista não ordenada podemos definir, neste campo,
o tipo de marca utilizada:
Caso se trate de uma lista numerada, o estilo da numeração tem a ver com o
tipo de algarismos ou letras que aparecem no início de cada item:
Em qualquer dos casos, se mudar o estilo de numeração aparecerá uma pro-

priedade type no elemento <ul> ou <ol>:
Na caixa de diálogo LIST PROPERTIES existe também a possibilidade de definir,

no campo START COUNT, em que número é que começa a numeração.
Finalmente, na área LIST ITEM desta caixa de diálogo, podemos personalizar
especificamente o item no qual o cursor está colocado. Isto significa que
podemos ter toda a lista numerada utilizando letras e um dos itens numerado
com numeração romana.
5.11.1 Listas imbricadas

Nas áreas técnicas dos pontos vitais da viatura pretendemos detalhar, para
cada item, os pontos que são avaliados. Por exemplo, para o habitáculo:
Para escrevermos estes sub-itens colocamos o cursor à frente do item

HABITÁCULO e depois teclamos ENTER (ou RETURN). Automaticamente o
Dreamweaver sabe que pretendemos acrescentar mais itens à tabela.
Mas tal como está neste momento, a lista dos sub-itens não tem nenhuma
relação visível com o item HABITÁCULO. Temos de imbricar a lista avançando-a
alguns píxeis para o lado direito. Depois de seleccionar a sub-lista basta clicar
no ícone INDENT no PROPERTY INSPECTOR:
O resultado é:
Além de indentar a sub-lista para o lado direito, o tipo de marca (bullet) utili-
zado também é diferente.
No código HTML, é criada uma nova lista não numerada dentro de um ele-
mento <li>.
5.11.2 Listas de definições

As listas de definição são pouco utilizadas, mas são úteis em algumas situa-
ções. Por exemplo, em FAQs, isto é, conjuntos de perguntas e respostas
comuns.
Uma lista de definição permite informar o browser que a resposta está relacio-
nada com a pergunta. Vamos criar uma nova página no nosso sítio Web,
faq.html, com texto do tipo:
No PROPERTY INSPECTOR não existe nenhum ícone para as listas de defini-

ções. Por isso, depois de termos seleccionado todo o texto, temos de aceder à
opção FORMAT > LIST > DEFINITION LIST:
O resultado é as respostas ficarem indentadas em relação às perguntas:

O elemento <dl> (do inglês, definition list) é utilizado para toda a lista de defi-
nições, o elemento <dt> (do inglês, definition term) para a palavra a definir (no
nosso caso, para a pergunta) e o elemento <dd> (do inglês, definition descrip-
tion) para o texto da definição (no nosso caso, para a resposta).
Como tínhamos uma lista não numerada no meio, o resultado não foi o ideal.
Mas depois de seleccionarmos outra vez os itens da lista não numerada e cli-
cado no ícone UNORDERED LIST do PROPERTY INSPECTOR, o resultado já é
melhor (definimos também toda a lista não numerada, o parágrafo acima e o
parágrafo abaixo da terceira resposta, como um único elemento <dd> da lista
de definições):
Se utilizar muitas vezes esta opção pode colocar um ícone no painel INSERT
ou definir um atalho de teclado.
Embora o resultado não seja para já agradável visualmente, iremos mais tarde
utilizar estilos CSS para formatar a apresentação da lista.
5.12 Importar texto

Normalmente não é muito comum escrever o texto directamente no Dream-
weaver. Alguém já terá escrito o texto necessário no Microsoft Word, por
exemplo. Neste caso, o ideal é poder importar directamente o texto do Micro-
soft Word para o Dreamweaver.
Normalmente o texto já está formatado, como no exemplo seguinte:
Para copiarmos o texto para o Dreamweaver, seleccionamos o texto no pro-

cessador de texto, e copiámo-lo com CONTROL+C no Windows (ou COMMAND
+C no Macintosh)
No Dreamwevar colocamos o cursor onde queremos que o texto seja inserido,
e se teclarmos CONTROL+V no Windows (ou COMMAND+V no Macintosh), o re-
sultado será:
Como se pode observar, o Dreamweaver manteve a formatação existente no

documento Microsoft Word – são utilizados os elementos correctos de HTML,
inclusive o <strong> para o negrito (bold) e o <EM> para o itálico. Isto acon-
tece devido à forma como o colar (paste) do Dreamweaver está configurado.
Acedemos à opção EDIT > PREFERENCES no Windows (DREAMWEAVER >
PREFERENCES no Macintosh) e seleccionamos a categoria COPY/PASTE:
Repare que está seleccionada a opção TEXT WITH STRUCTURE PLUS BASIC
FORMATTING (BOLD, ITALIC). Esta opção permite importar a estrutura de um
documento (títulos, texto, etc.), mas a formatação está limitada a negritos
(bold) e itálicos (italic).
Se tivéssemos seleccionada a opção TEXT ONLY, obteríamos um texto ‘corrido’
sem mudanças de linha, e sem qualquer espécie de formatação:
A opção TEXT WITH STRUCTURE (PARAGRAPHS, LISTS, TABLES, ETC.) teria, no

nosso exemplo, o mesmo resultado que a opção TEXT WITH STRUCTURE PLUS
BASIC FORMATTING (BOLD, ITALIC), excepto que ‘AutoVende’ não apareceria a

negrito.
Aparentemente a última opção, TEXT WITH STRUCTURE PLUS FULL FORMATTING
(BOLD, ITALIC, STYLES), também apresenta um resultado idêntico, mas se olhar-
mos para o código vemos que foram inseridos atributos class para todos os
parágrafos e foram criados estilos CSS:
Nunca deve utilizar esta opção, a não ser que pretenda passar muito tempo a
remover o código desnecessário que é inserido! De qualquer forma, o Dream-
weaver disponibiliza uma opção, COMMANDS > CLEAN UP WORD HTML, que
permite ‘limpar’ a maior parte destes excessos produzidos pelo Microsoft
Word:
Na caixa de diálogo PREFERENCES, qualquer uma das opções, excepto a pri-

meira, dá-nos acesso a duas opções adicionais:
• RETAIN LINE BREAKS – para manter as quebras de linha. Esta opção fica
desactivada caso se escolha a opção TEXT ONLY;
• CLEAN UP WORD PARAGRAPH SPACING – permite eliminar as linhas em
branco que seriam criadas por se carregar duas vezes no ENTER (ou
RETURN) no Microsoft Word, isto é, elimina ‘espaço’ entre dois
parágrafos.
5.13 Integração com o Microsoft Word

De forma a criar fluxos de trabalho inteligentes, a Adobe integrou o Dream-
weaver com muitos programas com os quais os web designers trabalham no
dia-a-dia. Os outros programas da Creative Suite, como é óbvio, possuem
uma grande integração, mas existem outros programas que também são con-
templados, como o Microsoft Word. Esta integração mais completa só existe
na versão Dreamweaver para Windows.
Em vez de estarmos a abrir o ficheiro Microsoft Word, a copiar o texto e a colá-
-lo no Dreamweaver, podemos recorrer à opção FILE > IMPORT > WORD
DOCUMENT:
Selecciona-se um ficheiro .doc e, antes de se clicar em OPEN, podemos alte-

rar as opções de importação, que já são nossas conhecidas:
Mas ainda existe uma forma mais fácil de importar um documento Microsoft
Word para o Dreamweaver. Podemos arrastar o documento .doc do painel
FILES directamente para a página:
Aparece a caixa de diálogo:
As sub-opções da opção INSERT THE CONTENTS já são nossas conhecidas. A

opção CREATE A LINK permite definir um link para o ficheiro em causa permi-
tindo aos visitantes da página transferir esse ficheiro:
5.14 Localizar e substituir

Como acontece com a maioria dos programas do Windows e do Macintosh, o
Dreamweaver possui uma funcionalidade de localizar e substituir, que é acti-
vada através da opção EDIT > FIND AND REPLACE, ou mais normalmente pela
combinação de teclas CONTROL+F:
Esta caixa de diálogo tem opções bastante poderosas, nomeadamente o FIND

IN e o SEARCH. Podemos pesquisar no documento corrente, em determinadas
páginas ou em todo o sítio Web (campo FIND IN). A pesquisa pode ser efec-
tuada pelo texto, pelo código ou por elementos HTML específicos (campo
SEARCH).
5.15 Dicionário
Em todos os programas de processamento de texto, como o Microsoft Word,
está disponível um corrector ortográfico. No Dreamweaver esse corrector tam-
bém existe e está acessível a partir da opção COMMANDS > CHECK SPELLING:
Sempre que o corrector encontrar uma palavra incorrecta ou desconhecida

apresenta a caixa de diálogo CHECK SPELLING:
que disponibiliza várias acções:

• ADD TO PERSONAL – adiciona a palavra ao nosso dicionário pessoal;
• IGNORE – ignora a ocorrência da palavra, isto é, não a altera;
• CHANGE – substitui a palavra pela que está seleccionada na lista
SUGGESTIONS, ou pela palavra que insira no campo CHANGE TO;
• IGNORE ALL – ignora todas as ocorrências da palavra;
• CHANGE ALL – substitui todas as ocorrências da palavra pela que está
seleccionada na lista SUGGESTIONS, ou pela palavra que insira no
campo CHANGE TO;
Por omissão, o corrector ortográfico utiliza a língua inglesa. Para alterar para
língua portuguesa aceda às preferências (EDIT > PREFERENCES ou DREAM-
WEAVER > PREFERENCES no Macintosh) e altere o valor da opção SPELLING
DICTIONARY:
6 Imagens
As imagens são um dos elementos mais importantes de uma página Web.

Uma diferença entre as imagens e o texto, é que o texto é inserido e faz parte
da página, enquanto uma imagem é sempre um ficheiro externo que é refe-
renciado numa página Web.
Isto significa que quando se ‘insere’ uma imagem numa página, ao contrário
do Microsoft Word e de outros programas em que a imagem faz parte do
ficheiro, numa página Web apenas se insere a referência ao ficheiro externo
que contém a imagem.
Por isso é ideal, em primeiro lugar, copiar (ou mover) as imagens para ‘dentro’
do root folder do nosso sítio Web definido no Dreamweaver e só depois utilizá-
-las nas páginas.
Para copiar (ou mover) as imagens podemos utilizar o EXPLORADOR DO
WINDOWS [WINDOWS EXPLORER], copiá-las no EXPLORADOR DO WINDOWS e
colá-las no painel FILES do Dreamweaver ou arrastá-las do EXPLORADOR DO
WINDOWS para o painel FILES.
Caso queiramos inserir, numa página do nosso sítio Web, imagens que não se
encontrem numa das pastas que pertencem ao sítio Web, o Dreamweaver
apresenta um aviso,
a perguntar se pretendemos copiar a imagem para o sítio Web. Se responder

YES (que é a opção aconselhada) terá de decidir em que pasta do sítio Web é
que pretende colocar o ficheiro:
Como vimos num capítulo anterior, é habitual possuir definida num sítio Web
uma pasta que armazena todas as imagens utilizadas nesse sítio. No nosso
sítio Web exemplo essa pasta chama-se _imagens. Poderá criar a pasta no
painel FILES, recorrendo ao menu de contexto (botão direito do rato no
Windows e CONTROL+CLIQUE no Macintosh) e à opção NEW FOLDER,
Convém também que na gestão do site (SITE > MANAGE SITES > EDIT), selec-
cione a categoria ADVANCED SETTINGS > LOCAL INFO, e no campo DEFAULT
IMAGES FOLDER, identifique a pasta criada utilizando o ícone BROWSE FOR FILE
( ):
6. IMAGENS 147
Podemos agora inserir imagens que não se encontrem no nosso sítio Web que
o Dreamweaver automaticamente efectuará uma cópia da imagem para a pas-
ta de imagens:
O ideal é copiar primeiro as imagens para a pasta pré-definida e só depois as

utilizar nas páginas.
6.1 Formatos de imagens

Nas páginas Web não se podem utilizar todos os formatos de imagens exis-
tentes no mercado. Os únicos formatos autorizados são: GIF, JPG, PNG e
SVG.
6.1.1 Formato GIF

O formato GIF (Graphics Interchange Format) foi apresentado em 1987 e já foi
um dos formatos mais utilizados em páginas Web.
Utiliza uma paleta de 256 cores (8 bits) ‘extraída’ do modelo de 16 milhões de
cores do RGB. Isto significa que se pode utilizar qualquer cor do modelo RGB
mas em cada imagem apenas 256 cores podem ser utilizadas.
De forma a produzir imagens que ocupem menos espaço em disco o formato
GIF recorre à compressão Lempel-Ziv-Welch (LZW), uma técnica que não
degrada a qualidade visual da imagem (diz-se que o algoritmo de compressão
é lossless) mas que não produz ficheiros muito pequenos quando comparada
com outras técnicas disponíveis
Devido a problemas com as patentes do algoritmo de compressão (que só
expiraram em 2003), foi entretanto criado um formato concorrente, o PNG,
‘livre’ de patentes.
O número de cores limitado torna o formato GIF inapropriado para a reprodu-
ção de fotografias ou imagens com cor contínua. Mas é adequado para ima-
gens simples como gráficos (de barras, por exemplo) ou logótipos com áreas
sólidas de cor.
O facto de se poder designar uma cor de transparência permite a utilização de
imagens em formato GIF sobre fundos com cor. Dado que muitos logótipos
não são quadrados perfeitos, é assim possível colocá-los em fundos com cor.
Uma das grandes vantagens deste formato é o suporte de animações, basea-
das num conjunto de imagens consecutivas, e que ainda é utilizado na produ-
ção de banners (anúncios). Nas animações pode ser utilizada uma paleta dife-
rente de cores para cada frame.
Os ficheiros com imagens em formato GIF possuem normalmente a extensão
.gif.
6.1.2 Formato JPEG

O formato JPEG (Joint Photographic Experts Group) é o formato mais utilizado
em páginas Web para imagens fotográficas.
Suporta 16 milhões de cores (24 bits) por imagem e utiliza um algoritmo de
compressão parametrizável que não garante a qualidade visual da imagem (é
do tipo lossy). Isto é, quando se guarda uma imagem em formato JPEG pode-
-se definir o grau de compressão pretendido. Quanto maior for o grau de com-
pressão, menor será a qualidade visual da imagem resultante.
Este formato é o mais adequado para imagens fotográficas mas não é nada
adequado para imagens que possuam texto, linhas geométricas ou ícones.
Os ficheiros com imagens em formato JPEG possuem normalmente a exten-
são .jpg, embora também possam ser utilizadas as extensões .jpeg, .jpe,
.jfif e .jif.
Em 2000 foi lançado um novo formato JPEG, chamado JPEG 2000, que é
baseado num algoritmo diferente de compressão. Utiliza como extensões
.jp2 e .jpx mas o seu suporte por parte dos browsers ainda é bastante
fraco.
6.1.3 Formato PNG

O formato PNG (Portable Network Graphics) foi criado em 1996 em resultado
dos problemas com patentes associados ao formato GIF.
Suporta uma paleta de 16 milhões de cores (24 bits) e um algoritmo de com-
pressão mais eficaz que o do formato GIF, embora continue a manter a quali-
dade visual das imagens (é do tipo lossless).
Ao contrário do formato GIF não suporta animação. Mas o suporte de bits de
transparência foi melhorado podendo-se agora utilizar 256 cores de transpa-
rência através do alpha channel.
6. IMAGENS 149
Historicamente, o suporte deste formato por parte dos browsers tem sido lento
e errático o que tem evitado a substituição do formato GIF. Por exemplo, o
Internet Explorer apenas suporta correctamente transparências PNG a partir
da versão 7. Porém, as versões mais recentes dos browsers já possuem um
suporte completo deste formato.
Todos os programas recentes de tratamento de imagem, como o Photoshop, o
Adobe Fireworks e o Adobe Illustrator, exportam imagens em formato PNG.
Tal como acontece com o formato GIF, o formato PNG é adequado para ima-
gens que possuam texto e linhas geométricas. Embora possa ser utilizado
para imagens fotográficas, o maior tamanho dos ficheiros produzidos relativa-
mente a ficheiros JPEG de alta qualidade torna negligível a ligeira melhoria na
qualidade visual das imagens.
Os ficheiros com imagens em formato PNG possuem normalmente a extensão
.png.
6.1.4 Formato SVG

O formato SVG (Scalable Vector Graphics), apresentado em 2001, é o único
formato de representação vectorial de imagens suportado pelos browsers.
Ao contrário da representação bitmapped/raster dos outros formatos anteriores
em que a imagem é baseada em píxeis (o que não permite o redimensiona-
mento sem perda de qualidade), um formato vectorial utiliza equações mate-
máticas para representar primitivas geométricas como pontos, linhas, curvas e
polígonos. É assim possível redimensionar imagens sem perder qualidade.
O formato SVG é uma norma aberta criada pelo World Wide Web Consortium
(W3C) e utiliza a linguagem XML. Cada imagem SVG é um simples ficheiro de
texto com etiquetas de formatação XML. Suporta imagens raster, animação
(utilizando linguagem SMIL ou ECMAScript) e interactividade.
Historicamente, a maior parte dos browsers possuía um suporte limitado do
formato SVG. Mas as versões mais recentes dos browsers (Mozilla Firefox,
Apple Safari, Opera, Google Chrome) já têm esse suporte, excepto o Internet
Explorer que apenas suporta o formato SVG através da instalação de um
plugin. Apenas na versão 9 do Internet Explorer este ‘problema’ será corrigido.
Para a maior parte dos web designers este formato sempre foi marginal dado
que se dava preferência ao Adobe Flash que possui praticamente todas as
funcionalidades do SVG. Mas recentemente este formato voltou a surgir em
força, sobretudo pela sua associação com a norma HTML 5, e com o suporte
por parte da Apple.
Existem diversas aplicações de manipulação gráfica que suportam gráficos
SVG, nomeadamente o Adobe Illustrator, o Microsoft Visio e o Inkscape (um
programa muito utilizado em Linux e que utiliza nativamente o formato SVG).
Os ficheiros com imagens em formato PNG possuem normalmente a extensão

.svg, ou .svgz (neste caso, quando comprimidas).
6.2 Inserção de imagens

No Dreamweaver existem muitas formas de inserir uma imagem numa página.
Uma dessas opções é INSERT > IMAGE:
ou o menu do ícone IMAGES da barra INSERT:
Aparecerá então a caixa de diálogo SELECT IMAGE SOURCE para podermos

seleccionar o ficheiro que contém a imagem que pretendemos introduzir na
página:
6. IMAGENS 151
Repare nos tipos de ficheiros permitidos, que são os formatos bitmapped

abordados anteriormente. O tipo .psd, formato nativo do Photoshop, apenas
aparece nesta lista por também ser um produto vendido pela Adobe e existir
uma grande integração entre os dois programas.
Nesta caixa de diálogo, se tiver dúvidas em relação à imagem que pretende
seleccionar, clique em cima do ficheiro para a pré-visualizar na área IMAGE
PREVIEW , mas terá de ter activada a opção PREVIEW IMAGES.
Este método apenas é utilizado se não tivermos um sítio Web definido. Se já

tivermos um sítio Web definido basta arrastar para a página o ficheiro relativo
à imagem a partir do painel FILES:
Podemos também arrastar imagens do painel ASSETS, que é um painel que

mostra, entre outras coisas, todas as imagens existentes no sítio Web inde-
pendentemente da pasta onde se encontrem. Para aceder às imagens pre-
sentes no sítio Web clique primeiro no ícone IMAGES na barra de ícones do
lado esquerdo:
Independentemente do método utilizado para inserir uma imagem, aparece

sempre, por omissão, a caixa de diálogo IMAGE TAG ACCESSIBILITY ATTRIBUTES:
Esta caixa de diálogo possibilita a introdução de informação que ajuda os defi-

cientes visuais a obterem informação sobre a imagem quando acederem à
página. Os leitores de ecrã utilizados por este tipo de deficientes permitem ler
a informação textual associada a uma imagem.
O campo ALTERNATE TEXT permite introduzir um texto identificativo da imagem
que será apresentado caso o visitante esteja a navegar sem imagens, ou caso
o visitante seja deficiente visual e esteja a utilizar um ‘leitor de ecrã’ que ‘lê’ o
conteúdo da página.
É também possível associar à imagem um texto mais descritivo. Utiliza-se
para isso o campo LONG DESCRIPTION, que identifica o ficheiro que possui essa
descrição mais detalhada.
Caso não pretenda que esta caixa de diálogo apareça, aceda às preferências
(opção EDIT > PREFERENCES no Windows ou DREAMWEAVER > PREFERENCES
no Macintosh) e na categoria ACCESSIBILITY desmarque a opção IMAGES em
SHOW ATTRIBUTES WHEN INSERTING:
Não é aconselhável desactivar esta opção, dado que, a nível mundial, e mes-
mo em Portugal, cada vez mais vai ser obrigatória a utilização de funcionali-
dades de acessibilidade nos sítios Web.
Como vimos anteriormente, a introdução de uma imagem numa página não
significa que a imagem vá ficar armazenada dentro da página. Na realidade, a
imagem apenas é referenciada pelo respectivo nome, como pode verificar pelo
elemento HTML utilizado (<img>):
6. IMAGENS 153
No elemento img o atributo src é obrigatório e define o nome e a localização

da imagem relativamente à página corrente, na estrutura de pastas do sítio
Web. No nosso exemplo, a imagem está armazenada na pasta _imagens.
Já os atributos width e height não são obrigatórios, se bem que sejam
aconselháveis, e definem a largura e a altura da imagem. Finalmente, o atri-
buto alt corresponde ao texto alternativo que já mencionamos anteriormente
nas propriedades de acessibilidade.
As propriedades relativas a uma imagem que estão disponíveis no PROPERTY
INSPECTOR são:
Os campos W e H correspondem à largura e altura da imagem em píxeis O

campo ALT corresponde ao campo ALTERNATE TEXT da caixa de diálogo IMAGE
TAG ACCESSIBILITY ATTRIBUTES.
Convém sempre atribuir uma identificação a uma imagem para que se possa
controlar o seu posicionamento e aparência utilizando estilos CSS. Quando se
introduz um valor no campo ID no PROPERTY INSPECTOR, o Dreamweaver cria
dois atributos com o mesmo valor: id e name.
6.2.1 Image placeholders

Quando não temos uma imagem preparada, podemos utilizar, por razões de
desenho do layout, um image placeholder que reserva espaço na página para
a imagem.
Utilizamos para isso a opção INSERT > IMAGE OBJECTS > IMAGE PLACEHOLDER
(ou, em alternativa a mesma opção no menu do ícone IMAGES no painel
INSERT):
que invoca a seguinte caixa de diálogo:
Embora não seja necessário saber de antemão as dimensões da imagem

(dado que depois serão substituídas pelas dimensões reais da imagem defini-
tiva), isso é importante se estivermos a definir de forma precisa o layout da
página.
Será colocado na página um quadrado com as dimensões especificadas:
Quando tivermos a imagem final pronta, apagamos o image placeholder e

colocamos a imagem definitiva. Ou caso tenhamos as dimensões correctas,
acedemos, no PROPERTY INSPECTOR, ao campo SRC e escrevemos o nome e a
localização do ficheiro que contém a imagem definitiva (podemos também uti-
lizar os ícones POINT TO FILE e BROWSE FOR FILE).
Em HTML um image placeholder é apenas uma imagem sem atributo src:
<img name="" width="32" height="32" alt="" />
6.2.2 Posicionar imagens

Normalmente as imagens não se misturam com o texto, isto é, uma imagem
aparece numa linha, enquanto o texto (cabeçalhos ou parágrafos) aparece
noutra linha.
Mas é possível colocar texto ao lado esquerdo ou ao lado direito de uma ima-
gem. No nosso exemplo poderíamos querer colocar o título ao lado do logó-
tipo. Partindo do seguinte conteúdo,
6. IMAGENS 155
para o fazermos basta seleccionar a imagem e escolher a opção LEFT do

campo ALIGN no PROPERTY INSPECTOR:
À primeira vista o resultado não é bem o pretendido:
Temos de dar espaço entre a imagem e o título, e entre a imagem e a linha

horizontal. Para resolver o segundo ‘problema’ basta colocar o cursor no fim
do cabeçalho e carregar em ENTER (ou RETURN). É introduzido um parágrafo
em branco,
<p> </p>
e o resultado é:
Agora temos de afastar o cabeçalho da imagem. Seleccionando a imagem,

introduzimos um valor, em píxeis, no campo H SPACE no PROPERTY
INSPECTOR:
O único problema é que a imagem também é afastada da margem esquerda:
Veremos mais tarde como resolver este problema recorrendo a estilos CSS.
Também se pode afastar a imagem verticalmente dos outros elementos recor-
rendo ao campo V SPACE.
Caso pretendesse colocar texto no meio de duas imagens, deveria, em pri-
meiro lugar, inserir as imagens e depois inserir o texto. Em seguida alinhava a
primeira imagem à esquerda e a segunda à direita.
6. IMAGENS 157
6.3 Optimizar e alterar imagens

A maior parte das vezes antes de utilizarmos uma imagem numa página Web
temos necessidade de a optimizar ou alterar (redimensionar, crop, alterar
cores, etc.).
No Dreamweaver podemos efectuar diversas operações com imagens:
• Editá-las no próprio Dreamweaver;
• Optimizá-las recorrendo à integração com o Adobe Fireworks;
• Manipulá-las num editor de imagens externo como o Adobe
Photoshop.
O Dreamweaver centralizou o acesso às ferramentas gráficas em duas áreas
distintas do PROPERTY INSPECTOR:
Nesta imagem do PROPERTY INSPECTOR, como a área EDIT não possui os íco-
nes do Photoshop ou do Fireworks isso significa que eles não estão instalados.
6.3.1 Crop
Se apenas pretender apresentar parte de uma imagem, para focar a atenção
numa determinada área ou para reduzir o espaço ocupado em disco, pode
recorrer à ferramenta crop.
Quando clica na ferramenta CROP, depois de ter seleccionado uma imagem,
e após o Dreamweaver avisar que a operação que vai efectuar alterará per-
manentemente a imagem,
esta aparece com uma moldura sombreada:
Coloque o cursor por cima de um dos quadrados que aparecem nos vértices e
a meio das linhas (selection handles),
clique e desloque para ‘esconder’ parte da imagem. Por exemplo, para mos-
trarmos apenas o automóvel:
Se pretender deslocar a área de visualização de forma a seleccionar outra

área da imagem com o mesmo formato definido, coloque o cursor dentro da
área seleccionada, e depois clique e arraste:
6. IMAGENS 159
Para confirmar o crop, efectue um duplo-clique em qualquer parte da imagem,

ou volte a clicar no ícone CROP. Para cancelar a operação de crop basta clicar
em qualquer outra parte da página. Pode sempre ‘desfazer’ a operação selec-
cionando a opção EDIT > UNDO.
6.3.2 Redimensionar
Para redimensionar uma imagem no Dreamweaver basta clicar na imagem e
arrastar um dos quadrados (selection handles):
Caso escolha o quadrado existente no vértice inferior direito, se mantiver a

tecla SHIFT pressionada enquanto arrasta, o Dreamweaver manterá a largura
proporcional à altura.
Pode também recorrer aos campos W e H do PROPERTY INSPECTOR para espe-
cificar de forma precisa a nova largura/altura da imagem.
Caso se arrependa do redimensiona-
mento da imagem pode voltar a colo-
car as medidas originais clicando no
botão RESET SIZE:
O redimensionamento de uma imagem não afecta o ficheiro que contém a

imagem, nem o respectivo tamanho. Por isso é preferível redimensionar pri-
meiro a imagem num programa de edição de imagem e só depois utilizá-la
numa página Web.
Outro problema no redimensionamento é que, se aumentar a dimensão da
imagem, vai perder qualidade visual da imagem. Se diminuir a dimensão o
resultado também não é muito perfeito. Estes problemas só não existem se o
formato da imagem for SVG.
O ideal é efectuar o resampling da imagem, que é um processo que adiciona
ou subtrai píxeis de uma imagem quando esta é redimensionada. Mas mesmo
assim, o resultado não é perfeito sobretudo quando se aumentam as dimen-
sões da imagem.
Para o fazer no Dreamweaver, em primeiro lugar redimensione a imagem. Em
seguida clique no botão RESAMPLE no PROPERTY INSPECTOR:
Aparece o habitual alerta a informar que a operação vai alterar de forma defi-
nitiva a imagem (ao contrário do que acontece com o redimensionamento).
Clique em Ok para confirmar a operação.
6.3.3 Luminosidade e contraste

Para alterar a luminosidade e/ou o contraste de uma imagem, seleccione-a e
depois clique no botão BRIGHTNESS AND CONTRAST no PROPERTY INSPECTOR:
Após o alerta a informar que a operação vai alterar de forma definitiva a ima-
gem, aparece uma caixa de diálogo que permite efectuar as alterações:
6. IMAGENS 161
Com a opção PREVIEW activada pode ir verificando as alterações na imagem à

medida que mexe nos controlos BRIGHTNESS e CONTRAST.
6.3.4 Melhorar a definição

Pode melhorar o contraste de píxeis relacionados parecendo assim que me-
lhora a nitidez e a definição da imagem.
Para isso utiliza-se o botão SHARPEN existente no PROPERTY INSPECTOR, de-
pois de seleccionada a imagem:
A caixa de diálogo que aparece é (após o alerta a informar que a operação vai
alterar de forma definitiva a imagem):
Mais uma vez, com a opção PREVIEW activada, pode ir verificando as altera-
ções na imagem à medida que mexe no controlo SHARPEN.
6.3.5 Optimizar imagens

Nem todas as imagens estão preparadas para serem utilizadas numa página
Web. Algumas imagens fotográficas, bem como imagens destinadas a serem
impressas em papel, têm de ser optimizadas para a Web. Nomeadamente, é
necessário estabelecer um equilíbrio adequado entre a qualidade visual da
imagem e o tamanho ocupado em disco.
Para optimizar uma imagem, tem de a seleccionar em primeiro lugar na página
e depois clicar no ícone EDIT IMAGE SETTINGS do PROPERTY INSPECTOR:
A caixa de diálogo que aparece permite efectuar diversas operações, inclusive

converter a imagem para outro formato (opção FORMAT):
Se se tratar de uma imagem em formato JPEG pode, por exemplo, alterar a

qualidade de compressão. No caso de uma imagem GIF pode alterar a paleta
de cores, a cor de transparência e as propriedades das animações.
Neste exemplo, reduzimos, na imagem de baixo, a qualidade do JPEG para
22, e podem-se ver nitidamente as diferenças de qualidade.
No separador FILE pode redimensionar a imagem, utilizando um valor percen-
tual ou dimensões em píxeis, bem como efectuar o crop utilizando o cursor ou
introduzindo coordenadas (opção EXPORT AREA):
Esta caixa de diálogo permite também optimizar uma imagem de forma ao seu
tamanho final ser igual a um valor definido pelo web designer:
6. IMAGENS 163
Na caixa de diálogo IMAGE PREVIEW, no separador OPTIONS, clique no ícone

OPTIMIZE TO SIZE WIZARD para aceder a esta possibilidade:
6.3.6 Editar imagens num programa externo

Embora o Dreamweaver possua algumas ferramentas de edição e manipula-
ção de imagens, não é um editor gráfico. Mas pode-se configurar o Dream-
weaver para interagir com o seu editor gráfico favorito.
Como é óbvio, o Dreamweaver possui uma integração especial com os edito-
res de imagem da Adobe, nomeadamente o Adobe Fireworks e o Adobe
Photoshop.
Quando o Dreamweaver CS5 é instalado tenta verificar a existência de pro-
gramas de edição de imagens no computador, de forma a configurar a respec-
tiva integração.
Para definir o editor que se pretende utilizar com cada formato de imagem uti-
liza-se a categoria FILE TYPES/EDITORS das preferências (EDIT > PREFERENCES
no Windows e DREAMWEAVER > PREFERENCES no Macintosh):
Neste caso pode verificar que o editor primário para lidar com imagens PNG
(lista EXTENSIONS) é o Corel Paint Shop Pro Photo (lista EDITORS). Isto significa
que, se tiver uma imagem PNG seleccionada e clicar no botão EDIT,
a imagem em causa será aberta no Corel Paint Shop Pro Photo. Caso o Pho-
toShop fosse o editor primário o ícone seria diferente:
Caso não possua nenhum editor gráfico instalado obterá a seguinte mensa-
gem de erro:
E ao clicar em OK será apresentada a caixa de diálogo PREFERENCES com a

categoria FILE TYPES / EDITORS aberta.
Pode alterar nas preferências o editor gráfico primário para um determinado
formato de imagem, seleccionando-o da lista EDITORS e clicando no botão
MAKE PRIMARY.
Dica
É possível acrescentar outros programas à lista clicando no botão + que se
encontra logo acima da lista EDITORS, e depois na caixa de diálogo SELECT
EXTERNAL EDITOR seleccionar o ficheiro executável (em Windows tem a exten-
são .exe) relativo ao programa pretendido.
Depois de ter efectuado as alterações à imagem no editor gráfico, basta guar-

dar e fechar o programa que as alterações já estarão visíveis na página Web.
Caso pretenda editar uma imagem com um programa distinto do que está
predefinido, seleccione a imagem, aceda ao menu de contexto (utilizando o
botão direito do rato) e depois seleccione o programa pretendido do sub-menu
EDIT WITH:
6. IMAGENS 165
No caso dos editores gráficos da Adobe e como existe uma interligação muito
forte do Dreamweaver com esses programas, quando abre uma imagem num
desses programas a partir do Dreamweaver, por exemplo, no Fireworks, terá a
possibilidade de editar a
imagem directamente ou de
criar uma cópia para uma
imagem em formato PNG
que é o formato nativo do
Fireworks.
No Fireworks pode alterar a imagem à sua vontade, tendo no fim de clicar no

botão DONE:
As alterações efectuadas à imagem serão automaticamente repercutidas na

imagem existente na página do Dreamweaver.
6.3.7 Integração com o Photoshop

O Dreamweaver permite a inserção directa de ficheiros PSD (formato nativo
de ficheiros do Photoshop) em páginas Web. Mas, como o formato PSD não é
suportado em páginas Web, é automaticamente apresentada uma caixa de
diálogo sempre que isso acontecer:
Poderá agora escolher o formato para conversão da imagem e optimizá-la

para a Web. Por exemplo, no caso de seleccionar o formato JPEG poderá
escolher o nível de compressão.
Depois de ter efectuado todas as optimizações necessárias, ao clicar no botão
OK aparecerá outra caixa de diálogo para que possa guardar no seu sítio Web
a imagem convertida e optimizada:
6. IMAGENS 167
O Dreamweaver mantém a relação entre a imagem original PSD e a nova

imagem compatível Web. Pode verificar essa relação seleccionando a imagem
convertida na página Web e verificando o conteúdo do campo ORIGINAL no
PROPERTY INSPECTOR:
Repare também que a imagem aparece identificada, no PROPERTY INSPECTOR,

no canto superior esquerdo, como uma PS IMAGE.
Além disto, a imagem aparece também com um ícone específico no canto
superior esquerdo a informar que o original e a nova imagem são idênticos (re-
pare que as duas setas estão verdes):
Pode também utilizar um procedimento semelhante para copiar partes de uma

imagem no Photoshop e colá-las numa página Dreamweaver. Também serão
invocadas as caixas de diálogo IMAGE PREVIEW e SAVE WEB IMAGE.
Para alterar a imagem original PSD no Photoshop (se ainda estiver localizada
na pasta original) e repercutir as alterações na imagem convertida, seleccione
a imagem no Dreamweaver e clique no botão EDIT no PROPERTY INSPECTOR
(em alternativa pode efectuar um duplo clique na imagem enquanto pressiona
a tecla CTRL):
No menu de contexto que aparece quando clica com o botão direito do rato em
cima de uma imagem, deverá ter reparado que aparece uma opção EDIT
ORIGINAL W ITH, que também permite editar a imagem original no PhotoShop:
Efectue as alterações necessárias no Photoshop, e guarde a imagem. Repare

que está a efectuar alterações à imagem com a extensão .psd. Quando voltar
para o Dreamweaver, ao passar o cursor por cima do ícone no canto superior
esquerdo, aparece uma mensagem a informar que a imagem original foi alte-
rada, além de que agora uma seta está verde e a outra está vermelha:
Para repercutir as alterações na imagem existente na página, terá de clicar no

ícone UPDATE FROM ORIGINAL, que entretanto ficou activo no PROPERTY
INSPECTOR:
7 Hiperligações
As hiperligações (conhecidas por hyperlinks, ou abreviando, links) são a razão

da existência da Web dado que são elas que permitem interligar páginas. Sem
hiperligações para aceder a uma determinada página teríamos sempre de
saber de memória o endereço dessa página e escrevê-lo na barra de ende-
reços.
Em HTML um link é representado pelo elemento <a> (que significa anchor) e
pela propriedade href. Por exemplo:
<a href="http://www.centroatlantico.pt">Centro
Atlântico</a>
7.1 Tipos de links

Os links numa página HTML não são todos iguais na definição das páginas às
quais possibilitam aceder. Podemos dividir os links em três categorias:
• Link absoluto (absolute link) – contém o caminho completo para um
dado recurso incluindo o protocolo (normalmente, http). São
utilizados normalmente para aceder a páginas que não estão no sítio
Web corrente, isto é, que se encontram em outros sítios Web.
• Relativo ao documento (document relative) – interno ao sítio Web,
define o caminho da página corrente para a página destino. Utiliza-se o
‘/’ para separar o nome das pastas e ‘../’ para subir um nível. São os
tipos de links mais utilizados.
• Relativo à raiz do site (site-root relative) – interno ao sítio Web, é
semelhante ao document relative, mas o caminho começa sempre no
root folder, o que significa que começa sempre por ‘/’. Um dos
problemas destes links é que têm de ser testados com um servidor
Web.
Para explicar melhor cada um destes tipos de links, vamos utilizar a estrutura
do sítio Web que estamos a criar:
root
root
_css
_css _imagens
_imagens info
info stock
stock ...
index.html
quemsomos.html destaques.html
faq.html
Como primeiro exemplo, vamos supor que estamos a editar a página index.
html e que pretendemos inserir um link para a página quemsomos.html, que
se encontra na pasta info:
• Link relativo ao documento:
info/quemsomos.html
• Link relativo à raiz do sítio Web:
/info/quemsomos.html
Neste caso a única diferença é o ‘/’ no início do endereço. Suponhamos agora
que pretendemos fazer o inverso, isto é, estamos a editar a página
quemsomos.html e pretendemos inserir um link para a página index.html:
../index.html
/index.html
Finalmente, estamos a editar a página quemsomos.html e pretendemos
inserir um link para a página destaques.html existente na pasta stock:
../stock/destaques.html
/stock/destaques.html
7. HIPERLIGAÇÕES 171
Na maior parte das vezes quando criamos um link numa página no

Dreamweaver, este selecciona o tipo de link a utilizar sem nos consultar. Mas
pode-se configurar o Dreamweaver de forma a criar os links como nós
queremos. Acedemos à janela de gestão do site corrente, utilizando a opção
SITE > MANAGE SITES ou efectuando um duplo-clique no nome do sítio Web
corrente no painel FILES.
Na categoria ADVANCED SETTINGS > LOCAL INFO temos duas opções disponí-
veis na área LINKS RELATIVE TO:
Por omissão, a opção activada é DOCUMENT.
7.2 Criar links

Para criar um link é necessário em primeiro lugar seleccionar o objecto ao qual
se vai aplicar. Esse objecto pode ser texto (o mais habitual), uma imagem ou
um elemento multimédia.
Por exemplo, podemos criar, na nossa página principal, uma lista de links para
as outras páginas do sítio Web:
Selecciona-se o texto recorrendo à técnica do arrastar-e-largar ou utilizando o

TAG SELECTOR. Quando seleccionar texto para criar um link, evite seleccionar
os espaços existentes no fim e no início de palavras bem como sinais de
pontuação.
Depois do texto seleccionado introduzimos a página destino no campo LINK do
PROPERTY INSPECTOR:
O texto seleccionado aparecerá agora sublinhado e azul, que é a aparência

definida na norma HTML para os links:
Cuidado com o que escreve no campo LINK. Não se engane, senão o link não
funciona. Caso a página destino não se encontre na mesma pasta da página
corrente terá de escrever o nome da pasta.
Tenha em atenção que podemos escrever o nome de uma página mesmo que
esta ainda não exista. É o que acontece no nosso exemplo com a página
destaques.html para a qual apontará o link DESTAQUES. Caso não
venhamos a criar essa página, o link não funcionará no browser, como é
óbvio.
Pode recorrer aos ícones BROWSE FOR FILE e POINT TO FILE para seleccionar
uma página do site corrente. Para utilizar a ferramenta POINT TO FILE, clique e
arraste o ícone apontando para o ficheiro destino no painel FILES:
Convém que o painel FILES esteja visível. Neste painel, se uma pasta não
estiver aberta, basta manter o rato um segundo por cima da pasta para ela
abrir e podermos assim seleccionar um ficheiro lá existente utilizando a fer-
ramenta POINT TO FILE.
Já o ícone BROWSE FOR FILE dá acesso a uma caixa de diálogo tipo de selec-
ção de ficheiros, mas esta possui algumas opções adicionais:
Repare no botão SITE ROOT no topo que permite ‘saltar’ directamente para a
raiz do sítio Web. E a área RELATIVE TO, permite definir o tipo de link que se
pretende criar (RELATIVE TO DOCUMENT ou RELATIVE TO SITE ROOT).
Pode também criar um link de texto recorrendo à opção INSERT > HYPERLINK,
ou ao ícone HYPERLINK da categoria COMMON da barra INSERT:

Nestes casos, a caixa de diálogo que aparece possui as propriedades que

aparecem no PROPERTY INSPECTOR para um link, mais algumas que não
aparecem lá:
Além do texto que estava seleccionado, e que podemos alterar no campo

TEXT, existem diversas propriedades de que falaremos mais abaixo e que
estão disponíveis no PROPERTY INSPECTOR. Apenas as duas últimas opções,
que são opções de acessibilidade, ACCESS KEY e TAB INDEX, não estão
disponíveis no PROPERTY INSPECTOR. A primeira permite definir uma
combinação de teclas para activar o link utilizando o teclado, enquanto a
segunda opção permite definir a ordem de selecção dos links quando se utiliza
a tecla TAB para saltar entre eles.
Para repetir um link basta escolhê-lo da lista associada ao campo LINK, que
lista os links que já foram definidos no sítio Web:
A mudança da página destino de um link de texto faz-se colocando o cursor no

meio do texto do link, não sendo necessário seleccionar todo o texto do link.
Para remover o link basta apagar o conteúdo do campo LINK no PROPERTY
INSPECTOR. Ou recorrer ao menu de contexto do link, seleccionando a opção
REMOVE LINK.
7.2.1 Links para páginas externas ao site

Caso pretenda criar um link que aponte para uma página externa, isto é, para
outro sítio Web, terá de escrever um URL, isto é, um endereço completo do
tipo http://www.centroatlantico.pt/. O protocolo http (ou https) é obrigatório, dado
que se se esquecer de o especificar o link não funcionará. Se o endereço da
página destino for muito grande, o ideal é aceder à página destino utilizando
um browser e depois copiar o endereço da barra ADDRESS [ENDEREÇO]. Desta
forma evitará enganos na transcrição do endereço.
Algumas vezes no PROPERTY INSPECTOR o Dreamweaver corta um URL
quando este é muito grande. Nesse caso pode aceder à vista CODE e inserir o
URL no atributo href, entre aspas.
7.3 Propriedades dos links

Após um link ter sido criado, podemos definir os valores para as diversas
propriedades que estão acessíveis a partir do PROPERTY INSPECTOR:
A propriedade TITLE é parecida com a propriedade ALT (alternate text) das

imagens e permite associar um texto com o link. É tipicamente uma
propriedade de acessibilidade. A maior parte dos browsers apresenta este
texto como uma tooltip debaixo do cursor:
7.3.1 Abrir páginas em janelas ou separadores do browser

Por omissão, sempre que cria um link numa página Web isso significa que,
quando o utilizador clicar nesse link a página destino será aberta, no browser,
em substituição da página corrente.
Pode querer que a página destino abra numa janela ou separador/aba distinta
do browser para que o utilizador não perca visualmente a página original. Isto
acontece muitas vezes quando se permite abrir, através de um link, uma
página pertencente a outro sítio Web.
Vamos exemplificar acrescentando na página principal um link para a página

da revista Turbo (http://turbo.sapo.pt/). Podemos posteriormente criar
uma página com links para páginas de outros sítios Web que disponibilizam
informação sobre automóveis. Seleccionando o texto Revista Turbo, esco-
lhemos agora a opção _BLANK no campo TARGET, no PROPERTY INSPECTOR:
Agora, sempre que clicarmos no link Revista Turbo será aberta uma nova
janela ou um novo separador/aba do browser com a página principal desse
sítio Web:
Os outros valores disponíveis no campo TARGET do PROPERTY INSPECTOR

destinam-se à utilização de páginas que sejam construídas com frames.
7.3.2 Outras propriedades dos links

Caso pretenda atribuir um valor às propriedades ACCESS KEY e TAB INDEX, tal
não é possível através do PROPERTY INSPECTOR. Mas poderá recorrer à opção
MODIFY > EDIT TAG:
A caixa de diálogo TAG EDITOR está disponível para qualquer elemento da

página, mas é necessário que o elemento seja seleccionado no TAG
SELECTOR:
7.4 Links em imagens

Para associar um link a uma imagem o procedimento é idêntico ao descrito
anteriormente para links de texto.
No nosso sítio Web vamos utilizar um procedimento habitual nos sítios Web,
que é associar ao logótipo um link para a página principal do sítio Web. Basta
clicar na imagem para a seleccionar e depois, utilizando qualquer um dos
métodos mencionados, definir um link para a página index.html. Aqui o
ideal seria recorrer a um link relativo à raiz do sítio Web, isto é, /index.html:
Mas neste caso era necessário testar a página recorrendo a um servidor Web,
por isso o melhor é utilizar mesmo um link relativo ao documento:
index.html ou ../index.html se estivéssemos numa pasta do sítio Web.
O ideal é colocar esta imagem num template utilizado para todas as páginas.
Evitamos assim ter de inserir o link e a imagem em todas as páginas do site.
Um dos efeitos de atribuir um link a uma imagem é que esta fica com uma
moldura azul (para assinalar que se trata de um link):
Para remover esta moldura, seleccione a imagem e no campo BORDER do

PROPERTY INSPECTOR introduza o valor 0:
Em HTML o elemento <a> utilizado para o link rodeia o elemento <img>:

<p><a href="index.html"><img src="_imagens/logotipo.png"
alt="Logotipo" width="163" height="72" border="0"
/></a></p>
7.5 Links para ficheiros PDF e outros

Nem sempre um link aponta para uma página HTML. Pode apontar para um
ficheiro (que pode ser um PDF, um vídeo, um documento Word, etc.) ou mes-
mo para uma imagem.
A regra é, se o ficheiro pode ser visualizado numa página Web, então pode-se
definir um link para esse ficheiro. Mas para ser visualizado no browser pode
ser necessário instalar um plug-in ou um visualizador específico, como
acontece com os ficheiros PDF em que é necessário ter instalado o Adobe
Reader. Se o programa de visualização não estiver instalado então aparece a
caixa de diálogo de transferência de ficheiro (download).
Caso se trate de ficheiros com uma dimensão considerável, é aconselhável

colocar à frente do link o tamanho do ficheiro e, já agora, o tipo de ficheiro. Por
exemplo:
No caso de ficheiros PDF, para que as pessoas que não tenham instalado o
Adobe Reader possam visualizar o ficheiro, podemos acrescentar algo do tipo:
Pode obter esta imagem no site da Adobe e colocar-lhe um link para a página
http://www.adobe.com/products/acrobat/readstep2.html que permite ao visitante trans-
ferir o Adobe Acrobat Reader.
7.6 Outro tipo de links

Existe um tipo de links especial que hoje em dia é muito pouco utilizado em
páginas Web. Trata-se do EMAIL LINK, que abre o programa de e-mail por
omissão do utilizador que clicar nesse link. Num computador com Windows o
programa de e-mail costuma ser o Outlook Express ou o Outlook. O problema
é que a maior parte das pessoas não tem nenhum programa desse tipo
configurado no respectivo computador, dado que utilizam webmail como o
Gmail ou o HotMail. Ao clicarem no EMAIL LINK aparecerá uma caixa de diálogo
de configuração do Outlook Express ou do Outlook e a maior parte das pes-
soas ficará confusa.
Se mesmo assim pretender utilizar este tipo de link, seleccione o texto e
depois a opção INSERT > EMAIL LINK, ou utilize o ícone EMAIL LINK da categoria
COMMON da barra INSERT:
Em seguida, na caixa de diálogo EMAIL LINK, introduza o endereço destino:

Ao clicar no link, e se o programa de e-mail estiver configurado, aparecerá

uma janela do tipo,
em que o campo TO já aparece preenchido. É ainda possível configurar o

EMAIL LINK para preencher outros campos de uma mensagem de e-mail
(incluindo o conteúdo) mas tem-se de editar o código HTML:
<p>Contacte-nos através do endereço <a
href="mailto:geral@autovende.com?subject=Pedido de
Informação">geral@autovende.com</a>
Neste caso, o campo ASSUNTO apareceria automaticamente preenchido:
No nosso exemplo, para que o utilizador que não perceba nada de programas
de e-mail possa contactar a empresa, é boa ideia utilizar uma frase do tipo:
Desta forma se o utilizador clicar no link e lhe aparecer a caixa de diálogo de

configuração do programa de e-mail, poderá sempre clicar no botão CANCEL e
depois copiar o endereço de e-mail para o utilizar no seu sítio de webmail para
criar uma nova mensagem.
Ao longo dos anos estes links de e-mail foram sendo substituídos por formu-
lários de contacto.
7.7 Links internos a uma página

É também possível definir links que permitem aceder a áreas da própria
página. Esta funcionalidade pode ser utilizada, por exemplo, para ter um índice
das várias secções do texto no topo da página. Também é muito utilizada em
listas de FAQ (Frequently Asked Questions – Perguntas Frequentes), quando
estas estão agrupadas por secções.
A sua utilização é fundamental em páginas com conteúdos extensos evitando
assim que o visitante tenha de fazer o scroll da página para localizar a área
pretendida.
Estes links têm o nome de named anchors e a sua utilização é um processo
que envolve dois passos:
• Criar as named anchors;
• Criar os links que permitem ‘saltar’ para as named anchors.
7.7.1 Criar named anchors

Na nossa página quemsomos.html vamos criar uma lista, no topo da página,
com a identificação das secções existentes na página, separada do resto da
página por uma horizontal rule:
Agora, para cada secção do texto, definimos a NAMED ANCHOR que é o nome
da etiqueta HTML que se coloca nos locais para onde queremos que os links
nos levem. Por isso, vamos colocar o cursor antes do título da primeira
secção:
Muitas vezes coloca-se a named anchor na linha anterior a um cabeçalho (se

for uma linha em branco) para que apareça algum espaço antes do cabeçalho
quando se clica no link que lhe dá acesso.
Em seguida utilizamos a opção INSERT > NAMED ANCHOR, ou o ícone NAMED
ANCHOR da barra INSERT:
Aparecerá uma caixa de diálogo onde temos de atribuir um nome à NAMED

ANCHOR:
Convém que os nomes atribuídos sejam curtos, fáceis de memorizar, escritos

em minúsculas, não comecem por um algarismo, não possuam espaços,
caracteres acentuados, c cedilhados e caracteres de pontuação. O normal é
atribuir o mesmo texto que o cabeçalho, sem utilizar espaços, ou substituindo-
-os por ‘_’, mas evitando grandes nomes.
Poderá ver que o Dreamweaver colocou um ícone com o símbolo de uma
âncora atrás do título da secção:
7.7.2 Elementos invisíveis

Os named anchors não possuem normalmente conteúdo, por isso são
invisíveis ao visitante. O Dreamweaver coloca um ícone com uma âncora para
permitir ao web designer localizar esses elementos na página. Pode parecer
que os ícones das named anchors dão cabo do layout, mas no browser esses
ícones não são visíveis.
Se não pretender visualizar estes elementos escondidos, retire a selecção da
opção VISUAL AIDS > INVISIBLE ELEMENTS na DOCUMENT TOOLBAR:
Esconderá assim todos os elementos invisíveis. Se pretender apenas

esconder determinados elementos invisíveis, como as named anchors, aceda
à opção EDIT > PREFERENCES > INVISIBLE ELEMENTS (DREAMWEAVER > PREFE-
RENCES > INVISIBLE ELEMENTS no Macintosh):
As named anchors são as primeiras da lista.

Caso pretenda alterar o nome da NAMED ANCHOR, clique no respectivo ícone e
altere o nome no PROPERTY INSPECTOR:
Para apagá-la, basta seleccionar o ícone e carregar em DELETE ou

BACKSPACE.
Se aceder ao código verá que o elemento HTML associado às NAMED
ANCHORS é o a, tal como acontece com os links, mas que é utilizado o atributo
name em vez do src:
<h2><a name="quemsomos" id="quemsomos"></a>Quem
Somos</h2>
Repare que o elemento a também possui um atributo id, daí aparecer no TAG
SELECTOR, a#quemsomos. Veremos mais tarde a utilidade deste atributo.
7.7.3 Criar links para aceder às named anchors

Agora temos de seleccionar o primeiro item na lista de índice no topo da
página,
e depois escrever, no campo LINK do PROPERTY INSPECTOR, o nome da NAMED

ANCHOR associada, precedido do
símbolo #.
Mais fácil será utilizar o ícone
POINT TO FILE do PROPERTY INSPECTOR para apontar para o ícone da NAMED
ANCHOR que pretendemos utilizar:
Caso o ícone da NAMED ANCHOR não esteja visível, seleccione primeiro o

texto, depois utilize as barras de deslocamento (scroll bars) para encontrar a
NAMED ANCHOR pretendida e depois utilize o ícone POINT TO FILE. É mais fácil
do que estar a fazer o scroll com a ‘mira’.
Em alternativa, podemos recorrer à opção INSERT > HYPERLINK, que nos
mostra a caixa de diálogo HYPERLINK onde podemos seleccionar a NAMED
ANCHOR na lista associada ao campo LINK:
Este é o único local em que aparece a lista de named anchors existente na

página.
Agora, quando visualizar a página e clicar num link do índice, saltará imedia-
tamente para a secção respectiva.
Caso pretenda criar um link do tipo VOLTAR AO TOPO para colocar no fim da
cada notícia, basta definir uma NAMED ANCHOR no topo da página e depois
associar um link ao texto VOLTAR AO TOPO que referencie essa NAMED
ANCHOR:
Em alternativa, não utilize nenhuma NAMED ANCHOR colocando apenas # no

campo LINK.
Basta criar um link VOLTAR AO TOPO e depois copiá-lo para outros locais da
página. Repare que alinhamos este link ao lado direito, como é habitual nas
páginas Web.
7.7.4 Named anchors externas

Existe a possibilidade de criarmos um LINK para uma named anchor existente
em outra página. No nosso exemplo vamos criar uma lista de links debaixo do
link QUEM SOMOS na página principal, index.html:
As named anchors encontram-se na página quemsomos.html. Se soubermos

os nomes das named anchors podemos criar os links na página index.html.
Mas podemos colocar as páginas lado-a-lado, abrindo-as na área de docu-
mento e seleccionando a opção W INDOW > TILE VERTICALLY:
Agora é mais fácil utilizar o ícone POINT TO FILE (a ‘mira’) do PROPERTY

INSPECTOR para identificar no ficheiro quemsomos.html as named anchors a
referenciar em cada link da página index.html.
Os links para named anchors em outras páginas são do tipo:

<li><a href="info/quemsomos.html#precosbaixos">Preços
Baixos</a></li>
isto é,
nome_ficheiro#named_anchor
7.8 Image maps

É muito comum na Internet encontrar páginas que possuem imagens com
determinadas áreas que, quando clicadas, permitem aceder a outras páginas.
Actualmente a maior parte dessas imagens ‘interactivas’ é criada e
programada em Flash. Mas existe em HTML um mecanismo (chamado image
maps), bastante utilizado no passado, que permite definir essas áreas, que
são conhecidas por hotspots.
No nosso sítio Web vamos utilizar a imagem de um automóvel para, na área
QUALIDADE GARANTIDA da página quemsomos.html, identificar os pontos vi-
tais da viatura que são analisados.
Em primeiro lugar inserimos uma imagem na página:
Pretendemos agora atribuir áreas sensíveis que nos permitam identificar os

pontos vitais. Para o fazermos, e com a imagem seleccionada, dispomos de
três ferramentas que se encontram no canto inferior esquerdo do PROPERTY
INSPECTOR:
Estas ferramentas, RECTANGULAR, OVAL e POLYGON permitem desenhar

figuras geométricas para definir as áreas sensíveis. Basta seleccionar uma
delas e depois desenhar o polígono pretendido na área pretendida da imagem.
Por exemplo, utilizando a ferramenta RECTANGULAR:
No PROPERTY INSPECTOR aproveitamos para indicar (campo LINK) que quando

se clica na área sensível pretendemos aceder à NAMED ANCHOR chamada
MOTOR que se encontra na página pontosvitais.html. Podemos utilizar
qualquer link a apontar para uma secção da página corrente, para outra
página do sítio Web ou para outro sítio Web.
Dado que quando se criou a área sensível o Dreamweaver nos pediu para
descrever a imagem,
escrevemos MOTOR no campo ALT.

Se, por acaso, a área não ficou muito bem desenhada, seleccione a ferramen-
ta POINTER,
e arraste os vértices do rectângulo para o redimensionar. Pode ainda deslocar

o rectângulo arrastando pelo seu interior.
A ferramenta CIRCLE também é fácil de utilizar. Basta clicar e arrastar para
desenhar um círculo:
Finalmente, a ferramenta POLYGON, que permite definir uma área correspon-

dente a um polígono irregular. Ao contrário das ferramentas RECTANGULAR e
CIRCLE em que se clica e arrasta para desenhar a área sensível, com a
ferramenta POLYGON é necessário ir clicando sucessivamente nos locais que
serão os vértices do polígono:
Se visualizar a página num browser verá o cursor transformar-se numa mão

com o indicador a apontar, sempre que passar por cima de uma área sensível,
o que significa que existe nessa área um link:
Se pretender eliminar uma área sensível, seleccione-a com a ferramenta

POINTER, e depois tecle DELETE ou BACKSPACE.
8 Tabelas
As tabelas têm como função, numa página Web, apresentar dados em formato
tabular ao visitante. Existem várias ocasiões em que é aconselhável a utiliza-
ção de uma tabela para apresentar os dados neste formato.
No nosso exemplo, associada a cada automóvel disponível no site, existe
diversa informação como marca, modelo, cor, cilindrada, etc. Esta informação
é perfeita para ser colocada numa tabela.
Vamos criar uma nova página, destaques.html, na pasta stock, que vai
conter três viaturas em destaque. Colocamos primeiro as imagens na página:
Para criar uma tabela com os dados para cada viatura podemos:
• Criar uma tabela e inserir os dados nas células apropriadas;
• Importar a tabela de um programa como o Excel ou de um ficheiro de
texto.
8.1 Criar uma tabela

Para se inserir uma tabela numa página utiliza-se a opção INSERT > TABLE ou o
ícone TABLE da categoria COMMON do painel INSERT:
Em qualquer dos casos, aparece uma caixa de diálogo, que permite personali-
zar a tabela a inserir:
Em primeiro lugar temos de definir o número de linhas (ROWS) e colunas

(COLUMNS) que pretendemos para a tabela. Mas pode-se posteriormente
acrescentar mais linhas e colunas. Vamos definir para a nossa tabela 8 linhas
e 2 colunas.
O valor seguinte é a largura, e pode ser especificada em píxeis ou em per-
centagem, sendo a percentagem relativa ao elemento parente, que pode ser a
largura da página ou a largura de um elemento em que a tabela está inserida,
como um elemento <div>. Se não especificar a largura, então o conteúdo da
tabela determina a largura desta. Vamos definir para a nossa tabela uma lar-
gura de 300 píxeis.
O campo BORDER THICKNESS tem a ver com a largura da moldura à volta da
tabela. Se for 0 não aparece moldura, e um valor superior cria não só a mol-
dura como linhas separadoras entre colunas e entre linhas. Vamos manter o
valor 1, que é apresentado por omissão.
8. TABELAS 193
CELL PADDING é o espaço, em píxeis, entre o conteúdo de uma célula e a res-

pectiva moldura. Utilizamos como valor, 5px, para as células não ficarem com
o conteúdo muito junto dos respectivos limites.
CELL SPACING é a distância entre duas células adjacentes. Se for 0, não exis-
tirá nenhum espaço excepto o ocupado pela linha separadora (se o atributo
border possuir um valor diferente de 0). É este o valor que vamos utilizar no
exemplo.
O HEADER cria um tipo especial de células numa linha, isto é, define cabeça-
lhos para as colunas e/ou linhas, sendo estes apresentados centrados na
célula e a negrito. Não é obrigatória a sua existência. No nosso exemplo os
cabeçalhos vão existir na primeira coluna, por isso vamos utilizar a opção
LEFT.
Na parte de baixo da caixa de diálogo existem dois campos para funcionalida-
des de acessibilidade. A CAPTION é a legenda da tabela, enquanto o SUMMARY
é uma descrição do conteúdo da tabela mas que não aparece visível ao visi-
tante. No nosso exemplo, não necessitamos de caption, e o summary para a
primeira viatura é «BMW 320d de Dezembro de 2009».
Dica
Qualquer um destes valores introduzidos na caixa de diálogo TABLE pode ser
mais tarde alterado através do PROPERTY INSPECTOR.
O resultado é:
Depois da tabela estar criada e se pretender movimentar-se nas células utili-

zando o teclado, pode teclar TAB para mover para a célula seguinte e
SHIFT+TAB para andar para a célula anterior. Estas teclas também funcionam
entre linhas, isto é, se estiver na última célula de uma linha e teclar TAB, avan-
çará para a primeira célula da linha seguinte.
Mesmo que não defina uma moldura para a tabela, isto é, se o valor do atri-
buto border for igual a 0, o Dreamweaver apresenta umas linhas pontilhadas
que permitem visualmente ver os limites das células:
Neste capítulo não nos preocupamos com o aspecto visual da página e nome-
adamente com colocar a tabela ao lado direito da imagem.
8.2 Estrutura de uma tabela

Em HTML, o código produzido foi o seguinte:
<table width="300" border="1" cellpadding="5"
cellspacing="0" summary="BMW 320d de Dezembro de
2009">
<tr>
<th>Marca: </th>
<td>BMW</td>
</tr>
<tr>
<th>Modelo: </th>
<td>320d</td>
</tr>
<tr>
<th>Potência:</th>
<td>143 CV (1.995 cm3)</td>
</tr>
<tr>
<th>Primeiro registo:</th>
<td>Dezembro 2009</td>
</tr>
<tr>
<th>Quilómetros:</th>
<td>7.000 Km</td>
</tr>
<tr>
8. TABELAS 195
<th>Combustível:</th>
<td>Diesel</td>
</tr>
<tr>
<th>Cor:</th>
<td>Cinzento metalizada</td>
</tr>
</table>
O elemento <table> identifica uma tabela em HTML. Cada linha da tabela é

representada pelo elemento <tr> (do inglês table row). Cada célula de dados
é um elemento <td> (do inglês table data) e cada cabeçalho é um elemento
<th> (do inglês table header).
O que realça dos elementos utilizados para definir a estrutura base de uma
tabela é que não existe nenhum elemento para representar colunas. Existe no
entanto um elemento que agrupa células em ‘colunas’, o <colgroup> e um
atributo scope="col" associado a células (<th> ou <td>).
Como é óbvio, as propriedades da tabela são representadas por atributos do
elemento <table>.
É possível existirem células vazias numa tabela. Na realidade as células não
estão vazias, contêm o carácter especial (Non-Breaking Space, que é
um espaço):
Isto acontece porque muitos browsers obrigam a que uma célula tenha de
possuir conteúdo senão não é mostrada (nem sequer os respectivos limites).
Ao introduzir-se conteúdo na célula vazia o é apagado.
8.3 Alterar uma tabela

Depois de termos criado uma tabela podemos fazer-lhe alterações: inserir
novas linhas ou colunas, eliminar linhas ou colunas, alterar a largura, etc.
Algumas destas operações são efectuadas a partir do PROPERTY INSPECTOR,
outras através de opções do menu ou de atalhos de teclado.
A maior parte das opções disponíveis na caixa de diálogo TABLE, que apare-
ceu quando criamos a nossa tabela, estão disponíveis a partir do PROPERTY
INSPECTOR quando a tabela está seleccionada. As únicas duas propriedades
que não estão disponíveis no PROPERTY INSPECTOR são a CAPTION e o
SUMMARY.
8.3.1 Seleccionar uma tabela

Uma forma rápida de seleccionar uma tabela, para se poder alterar as respec-
tivas propriedades, é colocar o cursor em qualquer célula e depois clicar no
elemento <table> no TAG SELECTOR:
Pode também seleccioná-la acedendo à opção TABLE > SELECT TABLE do res-
pectivo menu de contexto (botão direito do rato no Windows e CONTROL+
CLIQUE no Macintosh).
8.3.2 Largura da tabela e das colunas

Com a tabela seleccionada aparece na parte de cima (também pode aparecer
em baixo) a indicação das larguras da tabela e das respectivas colunas:
Como não definimos nenhuma largura para as colunas, os valores utilizados

não aparecem visíveis, sendo a largura de cada coluna determinada automa-
ticamente pelo browser dependendo do conteúdo de cada célula e coluna.
8. TABELAS 197
Dica
Se não gosta que apareça esta informação sobre as larguras, pode desactivá-
-la através da opção TABLE > TABLE WIDTHS do menu de contexto que aparece
quando clica com o botão direito do rato (ou CTRL+CLIQUE no Macintosh) numa
célula da tabela. Ou, em alternativa, utilize o menu VISUAL AIDS da barra
DOCUMENT:
Associada a cada coluna e à tabela existe um menu que permite efectuar

diversas operações:
Pode-se agora verificar, no PROPERTY INSPECTOR (separador HTML), as pro-

priedades disponíveis:
A maior parte das propriedades já foram mencionadas anteriormente. A pro-

priedade ALIGN permite definir o alinhamento da tabela relativamente ao ele-
mento no qual está contida. A propriedade CLASS serve para aplicar um estilo
CSS, que veremos num capítulo posterior.
Existem 4 ícones no campo inferior esquerdo que nos permitem alterar as lar-
guras das colunas, linhas e tabela:
• – CLEAR COLUMN WIDTHS – permite limpar as larguras atribuídas às

colunas pelo web designer.
• – CLEAR ROW HEIGHTS – permite limpar as alturas atribuídas às
linhas pelo web designer.
• – CONVERT TABLE WIDTHS TO PIXELS – converte a largura da tabela,
de percentagem para píxeis. O valor utilizado em píxeis corresponde à
largura corrente da janela de documento do Dreamweaver.
• – CONVERT TABLE WIDTHS TO PERCENT – converte a largura da
tabela, de píxeis para percentagem. O valor utilizado em percentagem
corresponde à relação entre a largura da tabela e a largura corrente da
janela de documento do Dreamweaver.
8.3.3 Seleccionar linhas e colunas

No nosso exemplo ficava melhor a identificação da viatura aparecer no topo da
tabela como um cabeçalho de nível 2. Vamos então apagar primeiro as duas
primeiras linhas da tabela. Para seleccionar uma linha basta colocar o cursor
numa das células que pertença à linha em causa e clicar no elemento <tr> no
TAG SELECTOR:
Mas para seleccionar duas linhas já não podemos recorrer a este método.
Temos de colocar o cursor antes da primeira linha, até ele mudar para uma
seta a apontar para a linha ,
e depois clicar e arrastar para baixo para ficarem as duas linhas selecciona-
das:
8. TABELAS 199
Agora, para apagar as linhas, basta teclar DELETE ou BACKSPACE, ou

CONTROL+X (COMMAND+X no Macintosh) ou, em alternativa, seleccionar a
opção TABLE > DELETE ROW do menu de contexto (botão direito do rato no
Windows e CONTROL+CLIQUE no Macintosh) ou do menu MODIFY.
8.3.4 Inserir linhas e colunas

Com as duas primeiras linhas apagadas vamos acrescentar como cabeçalho
de nível 2 a marca e o modelo da viatura em destaque:
Pretende-se agora inserir uma linha no fim da tabela. Uma das hipóteses para
o fazer é colocar o cursor numa das células da última linha da tabela e depois
escolher a opção INSERT > TABLE OBJECTS > INSERT ROW BELOW. Mas mais
fácil é colocar o cursor no fim do conteúdo da última célula da última linha,
e depois teclar TAB. Pode continuar a teclar TAB para ir criando mais linhas.
Basta agora introduzir os valores das novas células:
No menu INSERT > TABLE OBJECTS existem outras possibilidades de inserir

linhas e colunas:
O mais curioso é que o menu de contexto que aparece quando o cursor se

encontra numa célula da tabela e se clica com o botão direito do rato
(CONTROL+clique no Macintosh), possui opções ligeiramente diferentes:
8. TABELAS 201
A opção INSERT ROW insere uma linha antes da linha corrente. Uma opção
prática é a INSERT ROWS OR COLUMNS que permite definir o número de
linhas/colunas que pretendemos inserir e se são inseridas antes ou depois da
linha/coluna corrente:
8.3.5 Alinhamento vertical

Acrescentamos mais uma linha à nossa tabela e introduzimos a seguinte
informação:
Repare que o cabeçalho ‘Equipamento:’ encontra-se centrado verticalmente

na respectiva célula. Este é o comportamento por omissão de qualquer con-
teúdo de uma célula de uma tabela HTML. Se não gostar deste alinhamento
vertical pode recorrer ao atributo valign da célula cujo valor pode ser alte-
rado no campo VERT do PROPERTY INSPECTOR:
Por exemplo, se seleccionar o valor TOP o resultado é:

Em código:
<tr>
<th valign="top">Equipamento:</th>
<td><p>Bancos desportivos</p>
<p>Bluetooth Kit mãos livres</p>
<p>Computador de bordo</p>
<p>Faróis Xénon</p>
<p>Jantes em liga leve</p>
<p>Retrovisores eléctricos</p></td>
</tr>
O valor utilizado por omissão é o middle. O valor baseline, quando apli-

cado, faz com que todas as células na mesma linha cujo atributo valign pos-
sua esse valor, tenham o respectivo conteúdo posicionado de forma que o
texto da primeira célula ocorra numa linha imaginária (baseline) comum a
todas as células da linha.
Mais uma vez, é aconselhável definir esta alteração visual recorrendo a estilos
CSS.
8.3.6 No wrap
Neste momento a nossa tabela possui 300 píxeis de largura e para já todo o
conteúdo das células não necessita de mais espaço. Mas se mudarmos um
dos equipamentos para,
8. TABELAS 203
então o Dreamweaver (e posteriormente o browser) têm necessidade de

‘mudar de linha’ para que a identificação do equipamento fique dentro dos
limites da células. Caso não pretenda este resultado, mas sim, que a descri-
ção fique toda numa única linha, então temos de recorrer ao atributo nowrap,
seleccionando para isso a célula em causa, e clicando na opção NO WRAP no
PROPERTY INSPECTOR:
Resultado:
Isto é, o Dreamweaver automaticamente aumentou a largura da tabela e, em

consequência, a largura da célula (ou mais correctamente, de todas as células
que pertencem à coluna onde a célula está inserida), de forma a evitar uma
mudança de linha no conteúdo da célula.
O mais curioso é que a largura ‘oficial’ da tabela manteve-se em 300 píxeis,
mas o Dreamweaver indica a largura ‘real’ da tabela nas indicações de largura
no topo da tabela:
E repare que o Dreamweaver indica com um tracejado a largura a ‘mais’

necessária para acomodar a alteração:
8.3.7 Fundir e dividir células

Em alguns casos é necessário efectuar a fusão de células, isto é, juntar duas
ou mais células numa única célula. Por exemplo, uma tabela do tipo:
Vamos partir da seguinte tabela base:
Em primeiro lugar vamos fazer com que ‘Funcionalidade’ ocupe as duas pri-
meiras células da primeira coluna. Depois de seleccionadas as células, com o
clicar e arrastar,
clica-se no ícone MERGE no PROPERTY INSPECTOR ou selecciona-se a opção

TABLE > MERGE CELLS no menu de contexto, ou a opção MODIFY > TABLE >
MERGE CELLS:
8. TABELAS 205
Resultado:
Fazemos agora o mesmo procedimento para as 5 células que vão conter a

identificação Windows e as 3 células que vão conter a identificação Macintosh:
Podemos transformar as células em cabeçalhos e centrar o conteúdo na

célula, e ajustar as larguras das colunas, para obtermos o resultado preten-
dido.
Em HTML este ‘efeito’ de fusão de células é conseguido recorrendo aos atri-
butos colspan (para fundir células na horizontal) e rowspan (para fundir
células na vertical):
cellspacing="0">
<tr>
<th width="175" rowspan="2">Funcionalidade</th>
<th colspan="5">Windows</th>
<th colspan="2">Macintosh</th>
</tr>
Existe também a operação inversa, SPLIT CELLS, que permite dividir uma
célula em duas ou mais células:
Para aceder a esta caixa de diálogo utilize a opção MODIFY > TABLE > SPLIT
CELL, a opção TABLE > SPLIT CELL do menu de contexto da célula ou o ícone
SPLIT do PROPERTY INSPECTOR:
A nossa tabela ainda não tem grande aspecto, mas tem os dados necessários
na posição necessária. Para tornar a tabela mais atractiva visualmente pode-
mos aplicar estilos CSS.
8.4 Importar dados num formato tabular

Se os dados que pretende já existem num ficheiro Word ou Excel num formato
tabular, o ideal é importar esses dados directamente sem ter de os voltar a
escrever, dado que o Dreamweaver reconhece as tabelas copiadas desses
dois programas.
Uma das hipóteses é copiar as tabelas no Word ou Excel e colá-las no
Dreamweaver. Mas, caso o ficheiro apenas contenha a tabela de dados que
se pretende utilizar, pode-se arrastar o ficheiro directamente do painel FILES
para a página ou utilizar as opções FILE > IMPORT > WORD DOCUMENT ou FILE >
IMPORT > EXCEL DOCUMENT. Contudo, estas opções apenas existem na versão
Windows do Dreamweaver. No Macintosh temos de utilizar outro processo que
também é válido para Windows.
Este processo envolve a criação de um ficheiro num formato especial, cha-
mado CSV (Comma-Separated Values). Um ficheiro deste tipo pode ser criado
no Excel, no Word, ou em qualquer outro programa, inclusivamente num sis-
tema de gestão de bases de dados.
Cada linha do ficheiro corresponde a uma linha da tabela, e os valores das
células estão separados por um determinado carácter definido pelo web
designer, sendo os mais comuns o ‘;’, o ‘:’, o ‘|’ e mesmo o TAB, embora tradi-
cionalmente se utilizasse a ‘,’ (comma em inglês significa vírgula).
Isto significa que o ficheiro CSV para a tabela da nossa primeira viatura pode
ter o seguinte formato:
Potência:;143 CV (1.995 cm3)
Primeiro registo:;Dezembro 2009
Quilómetros:;7.000 Km
Combustível:;Diesel
Cor:;Cinzento metalizada
Preço:;36500€
8. TABELAS 207
Agora, para importarmos estes dados para a página, coloca-se o cursor no

local onde se pretende criar a tabela, e depois selecciona-se a opção FILE >
IMPORT > TABULAR DATA ou INSERT > TABLE OBJECTS > IMPORT TABULAR DATA.
Na caixa de diálogo que aparece,
temos primeiro de identificar o ficheiro que contém os dados, utilizando

nomeadamente o botão BROWSE. Em seguida escolhe-se o limitador de cam-
pos. Existem 4 opções fixas, podendo no entanto o web designer utilizar outro
carácter bastando para isso seleccionar a opção OTHER e depois, no campo
que está à frente da lista de valores do campo DELIMITER, introduzir o carácter
que pretende utilizar:
Na caixa de diálogo IMPORT TABULAR DATA temos algumas opções de formata-

ção da tabela, nomeadamente a largura da tabela (TABLE WIDTH), que pode ser
fixa (campo SET TO), em píxeis ou percentagem, ou adaptar-se aos dados
existentes nas células (opção FIT TO DATA). O campo FORMAT TOP ROW pode
ser útil quando, juntamente com os dados, também existe no ficheiro, na pri-
meira linha, uma descrição de cada item. Por exemplo, nos dados seguintes a
primeira linha contém a identificação dos dados:
Marca|Modelo|Potência|Primeiro
registo|Quilómetros|Combustível|Cor|Preço
BMW|320d|143 CV (1.995 cm3)|Dezembro 2009|7.000
Km|Diesel|Cinzento metalizada|36500€
Opel|Vectra 2.0|200 CV (1.995 cm3)|Agosto 2007|102.000
Km|Diesel|Preto|20000€
No caso da nossa tabela não podemos utilizar esta opção FORMAT TOP ROW
porque os cabeçalhos se encontram na primeira coluna. No entanto, depois de
importarmos os dados do ficheiro CSV, podemos convertê-los em cabeçalhos
seleccionando a primeira coluna,
e depois clicando na opção HEADER no PROPERTY INSPECTOR:
O resultado é:
8.5 Acessibilidade em tabelas

Utilizar tabelas para agrupar e apresentar dados é muito utilizado para estrutu-
rar dados numa página Web. Mas esses dados têm de estar acessíveis a
todos os utilizadores nomeadamente aos deficientes visuais, entre outros.
Uma tabela em HTML possui elementos e atributos que permitem tornar a
tabela mais acessível a esses utilizadores.
Um dos elementos é o <caption> que permite atribuir uma legenda a uma
tabela. Vimos, quando criamos a primeira tabela, que a caixa de diálogo TABLE
permite introduzir essa legenda. Mas caso não tenhamos introduzido a
legenda nessa altura podemos fazê-lo posteriormente. Para isso, devemos
seleccionar a tabela à qual pretendemos atribuir uma legenda e depois aceder
à vista CODE. Em seguida coloca-se o cursor no fim da etiqueta/tag <table>:
8. TABELAS 209
e depois selecciona-se a opção INSERT > TABLE OBJECTS > CAPTION:
Como o cursor é colocado no meio do elemento <caption>, agora basta

escrever a legenda que se pretende atribuir à tabela:
O resultado, na vista DESIGN é:
Claro está que na nossa página não faz muito sentido ter uma legenda e um
cabeçalho com o mesmo conteúdo. Podemos prescindir do cabeçalho dado
que é possível formatar a legenda com estilos CSS de forma a que fique idên-
tica ao cabeçalho.
Utilizando apenas HTML e atributos do elemento CAPTION, só se pode definir o
posicionamento da legenda, se bem que esta propriedade deva ser definida
recorrendo a um estilo CSS. Ao colocarmos o cursor no fim da etiqueta
<caption> e darmos um espaço, aparece uma lista dos atributos que se po-
dem utilizar com o elemento <caption>:
Para colocar a legenda na parte de baixo da tabela vamos seleccionar o atri-

buto align, e depois seleccionamos o valor bottom,
Cá está o resultado pretendido:
Se não gostar de mexer em código, na vista DESIGN coloque o cursor no meio

da caption, seleccione-a no TAG SELECTOR e depois
escolha a opção MODIFY > EDIT TAG, e na caixa de
diálogo que aparece, na categoria GENERAL, escolha o alinhamento preten-
dido:
Quanto ao SUMMARY, é um atributo do elemento <table>, e o seu valor é

uma descrição do conteúdo da tabela, mais longa do que a utilizada para o
CAPTION:
cellspacing="0" summary="BMW 320d de Dezembro de
2009">
8.6 Outros elementos e atributos de uma tabela

É possível estruturar, em HTML, tabelas em áreas lógicas recorrendo aos
elementos <thead>, <tbody> e <tfoot>. Pelos nomes percebe-se que o
<thead> define a área de cabeçalhos, o <tbody> a área de conteúdo, e o
<tfoot> uma área de rodapé. O <thead> e o <tfoot> são opcionais, mas
se utilizar um deles tem de utilizar o <tbody>.
8. TABELAS 211
Esta definição de áreas lógicas ajuda imenso quando se aplicam os estilos

CSS a uma tabela para alterar a sua aparência. Mas é preciso ter em atenção
que, sem a aplicação de estilos, estes elementos não alteram a aparência da
tabela na página.
Para exemplificar a aplicação destes elementos vamos criar uma nova página,
stock.html, na pasta stock. Esta página vai conter uma listagem das viatu-
ras que se encontram em stock:
Em primeiro lugar vamos seleccionar a primeira linha e transformar todas as

células em cabeçalhos, clicando na opção HEADER no PROPERTY INSPECTOR:
Mantendo a primeira linha seleccionada, vamos colocar os elementos que

constituem essa linha (um <tr> e diversos <th>) dentro de um elemento
<thead>. Podíamos fazer isso em código, mas para não estar a criar muita
confusão vamos fazê-lo em modo DESIGN. Tecle CONTROL+T (COMMAND+T no
Macintosh) duas vezes para aparecer a área WRAP TAG, e depois escreva
thead ou seleccione este elemento da lista de elementos HTML que aparece:
Visualmente não existiu nenhuma alteração, mas sim no código:

<table border="1">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Potência</th>
<th>Primeiro registo</th>
<th>Quilómetros</th>
<th>Combustível</th>
<th>Cor</th>
<th>Preço</th>
</tr>
</thead>
Agora teriam de se seleccionar as linhas de dados e repetir a operação de

WRAP TAG, inserindo o elemento <tbody>. O problema é que o Dreamweaver,
quando teclamos CONTROL+T (COMMAND+T no Macintosh), pensa que quere-
mos envolver toda a tabela num determinado elemento. Por isso, terá de
efectuar esta operação em vista CODE. Só necessita de teclar uma vez
CONTROL+T (COMMAND+T no Macintosh).
Como curiosidade o facto de o elemento <tfoot> ter de aparecer no código
entre o elemento <thead> e o <tbody>, de forma a que o browser possa
apresentar o rodapé antes de começar a apresentar linhas de dados. Utili-
zando JavaScript e código server-side é possível efectuar a paginação das
linhas de dados mantendo os cabeçalhos e o rodapé.
Existem outros elementos e atributos de uma tabela, mas que só podem ser
inseridos em modo CODE.
8.7 Ordenar os dados de uma tabela

Embora normalmente os dados para uma tabela já sejam copiados ou impor-
tados pela ordem pretendida, pode ser necessário efectuar uma ordenação.
É preciso ter em atenção que esta ordenação é efectuada pelo web designer
quando desenha a página, e não pelo visitante quando visita a página. Se
pretender que o visitante possa ordenar os dados pelas colunas, terá de utili-
zar código JavaScript ou código server-side (PHP ou ColdFusion, entre
outros).
Seleccione a tabela e escolha a opção COMMANDS > SORT TABLE. Caso a
tabela não esteja construída de forma correcta, obtém-se o aviso que lança
pistas sobre o possível problema:
8. TABELAS 213
Neste caso tratava-se de um problema que tinha a ver com a falta de uma eti-
queta de fecho de um elemento da tabela.
É possível ordenar alfabética ou numericamente, por ordem ascendente ou
descendente:
Selecciona-se, no campo SORT BY, a coluna pela qual se pretende ordenar.

Caso existam valores idênticos nessa coluna pode-se seleccionar outra coluna
(campo THEN BY) para ordenar esses valores. É o que acontece com a nossa
tabela de viaturas disponíveis, se a ordenarmos por marca (COLUMN 1) e
depois por modelo (COLUMN 2):
Por omissão, o Dreamweaver assume que a primeira linha não é utilizada na

ordenação porque normalmente contém os cabeçalhos, a não ser que se
seleccione a opção SORT INCLUDES THE FIRST ROW.
8.8 Modo expandido

O modo EXPANDED TABLES adiciona, temporariamente, cell padding e cell spa-
cing a todas as células de todas as tabelas da página, e aumenta a moldura
das tabelas para tornar mais fácil a edição do conteúdo das células. Permite
seleccionar determinados itens ou colocar, de forma precisa, o cursor. Este
modo só funciona em vista CODE ou vista SPLIT.
Utilizando este modo pode expandir uma tabela para, por exemplo, colocar o
cursor à esquerda ou direita de uma imagem sem seleccionar inadvertida-
mente a imagem ou célula.
Dica
Depois de ter efectuado a selecção pretendida ou de ter colocado o cursor no
local desejado, deve voltar ao modo STANDARD da vista DESIGN para efectuar
as alterações, dado que algumas operações visuais, como o redimensiona-
mento, não têm os resultados esperados quando se está em modo EXPANDED
TABLES.
Para aceder a este modo, seleccione a opção VIEW > TABLE MODE > EXPANDED
TABLES MODE ou clique no ícone
EXPANDED TABLES MODE na categoria
LAYOUT do painel INSERT:
Além de uma mensagem de aviso,
aparece uma barra EXPANDED TABLES MODE no topo da janela de documento:
Para sair do modo EXPANDED TABLES escolha uma das seguintes hipóteses:
• Clique no link exit na barra EXPANDED TABLES MODE no topo da janela
de documento.
• Seleccione a opção VIEW > TABLE MODE > STANDARD MODE.
• Clique no ícone STANDARD MODE na categoria LAYOUT do painel INSERT.
9 Formulários
Os formulários são dos elementos mais importantes em páginas Web dado

que permitem recolher informação dos visitantes. As páginas que contêm for-
mulários recolhem os dados introduzidos pelos visitantes e enviam esses
dados para outra página ou script (normalmente uma página PHP, Coldfusion
ou outra linguagem server-side), para serem processados.
registo.htm processa.php
Esta página que recebe os dados normalmente interage com uma base de
dados para guardar ou extrair dados (no caso de uma pesquisa) e depois
apresenta ao visitante uma mensagem de sucesso ou de erro relativamente ao
processamento dos dados introduzidos no formulário.
Isto significa que tornar os formulários funcionais implica a utilização de uma
linguagem server-side como o PHP, o que está fora do âmbito deste livro. Mas
interessa que conceptualmente perceba como é que os formulários funcionam
e como é que os sítios Web processam os dados inseridos nos formulários
pelos visitantes.
Os formulários são criados recorrendo ao elemento <form> que contém atri-
butos que definem o nome do formulário, uma acção e um método de envio de
dados.
A acção (correspondente ao atributo action) identifica a página que proces-
sará o formulário, isto é, a página para a qual o formulário deve enviar os
dados introduzidos pelo visitante. Como dissemos anteriormente, trata-se de
uma página server-side (em PHP, Coldfusion ou outra linguagem).
O método (que corresponde ao atributo method) descreve como é que os

dados são enviados para a página server-side que os vai processar. Existem
dois valores possíveis:
• get – acrescenta os dados ao endereço da página definida no atributo
action (isto é, à querystring):
• post – acrescenta os dados ao cabeçalho (head) do pedido que é
efectuado pelo browser ao servidor, para ‘aceder’ à página de proces-
samento de dados.
Isto significa que os dados submetidos pelo método get são visíveis no ende-
reço após o formulário ser submetido, enquanto os dados submetidos pelo
processo post são escondidos dos visitantes.
Pode ver uma utilização do método get e da querystring quando efectua pes-
quisa num motor de pesquisa:
Os valores a seguir aos caracteres & são parâmetros que são passados para a
página os processar.
O método que devemos utilizar num formulário depende da forma como a
página de processamento espera receber os dados e das limitações dos pro-
cessos de submissão.
Os dados submetidos através do método get são menos seguros e podem
ser ‘cortados’ devido à limitação de tamanho da querystring. Por isso o método
get é tipicamente utilizado para dados não críticos e de pequeno tamanho,
como os utilizados num formulário de pesquisa.
O método post é tipicamente utilizado para transacções mais seguras e para
dados mais longos como comentários dos visitantes, ou quando se possui
campos do tipo password.
9.1 Criar um formulário

Para exemplificar a utilização de formulários em páginas Web vamos criar dois
formulários: um para os visitantes poderem efectuar contactos com a empresa
e outro para registo de utilizadores. De forma aos visitantes poderem entrar
em contacto com a AutoVende, por exemplo, para pedir informações, é neces-
sária a existência de um formulário de contacto. Vamos criar então uma pági-
na contactar.html na pasta info do nosso sítio Web.
9. FORMULÁRIOS 217
Quando se está a construir um formulário, o ideal é utilizar a categoria FORMS

da barra INSERT que possui ícones para praticamente todos os elementos
HTML específicos dos formulários:
Estes elementos também estão disponíveis a partir do sub-menu INSERT >

FORM.
Tudo começa com um elemento <form> que é inserido através do ícone
FORM da barra INSERT (também pode utilizar a opção INSERT > FORM > FORM):
Na página, o Dreamweaver apresenta um tracejado vermelho para indicar ao

web designer os limites do formulário:
Devemos assegurar que todos os elementos do formulário são inseridos den-

tro deste tracejado.
Caso insira um elemento de um formulário, fora de um formulário já existente,
o Dreamweaver alerta-o para o facto com a seguinte mensagem:
Se clicar no botão YES, o que acontecerá é que será criado outro formulário na
página,
o que normalmente não é o que pretendemos.

O código HTML criado pelo Dreamweaver é:
<form id="form1" name="form1" method="post" action="">
</form>
9.1.1 Propriedades do formulário

Tal como acontece com a maior parte dos elementos HTML de uma página, o
formulário tem propriedades associadas, que podem ser manipuladas através
do PROPERTY INSPECTOR (deverá em primeiro lugar seleccionar o formulário
recorrendo ao TAG SELECTOR):
Em primeiro lugar, podemos atribuir um nome ao formulário:
Por omissão o Dreamweaver atribui o nome form1 ao primeiro formulário da

página, form2 ao segundo, form3 ao terceiro e assim sucessivamente. É
normal atribuir um nome mais identificativo ao formulário, utilizando muitos
web designers o prefixo frm. Neste caso, o nome do nosso formulário poderia
ser frmRegisto.
Ao alterar o nome no campo específico para o efeito no PROPERTY INSPECTOR,
o Dreamweaver altera o valor de duas propriedades do elemento <html>, a
propriedade id e a propriedade name:
<form id="frmRegisto" name="frmRegisto" method="post"
action="">
</form>
9. FORMULÁRIOS 219
O nome dos formulários era muito utilizado há uns anos para referenciar, em
JavaScript, o formulário e os respectivos elementos. Mas hoje em dia tal não é
necessário. Contudo o nome (mais concretamente o valor do atributo id) ain-
da é importante para ser referenciado nos estilos CSS.
Os nomes que se podem atribuir aos formulários seguem a lógica habitual de
terem de começar por letras, só poderem ter letras, algarismos, o underscore
e o hífen, e não devem ter caracteres acentuados e c cedilhados.
O atributo action identifica a página que processará o formulário. Como
normalmente se trata de uma página server-side (em PHP ou Coldfusion) não
a vamos preencher. Podemos preencher este campo mesmo que a página
referenciada ainda não exista.
O atributo method permite definir o método utilizado para enviar os dados
para a página server-side que os vai processar. Como vimos anteriormente,
existem dois métodos possíveis: GET e POST. Vamos utilizar o método POST
nos nossos formulários, que é também o método seleccionado por omissão.
Já o atributo enctype permite definir o tipo de codificação (encoding) utilizado
para o envio dos dados para a página definida no atributo action. Se não se
atribuir nenhum valor é utilizado, por omissão, o application/x-www-
form-urlencoded. Só se atribui um valor a este atributo quando se utilizam
campos de upload (transferência) no formulário. Nesse caso o valor a utilizar é
multipart/form-data.
Finalmente, e tal como acontece nos links, podemos decidir que a página que
está definida no atributo action e que é executada quando o formulário é
submetido (normalmente, quando o visitante clica num botão de submit), é
aberta numa janela/aba separada, recorrendo ao valor _blank do atributo
target. Os outros valores possíveis para este atributo são utilizados apenas
com frames.
9.2 Campos de texto

Os elementos mais utilizados em formulários são os campos de texto, que
como o próprio nome indica, permitem a introdução de texto. Existem três
tipos de campos de texto:
• TEXT – para linhas únicas de texto;
• PASSWORD – idêntico ao anterior mas esconde o texto inserido pelo
utilizador, substituindo os caracteres por estrelas ou pontos.
• TEXTAREA – permite inserir várias linhas de texto sendo normalmente
utilizado para campos de comentários.
9.2.1 Text
O primeiro campo que vamos inserir no nosso formulário é um campo de texto
normal, que pode ser inserido, após termos colocado o cursor dentro dos limi-
tes do formulário, clicando no ícone TEXT FIELD da barra INSERT (ou seleccio-
nando a opção INSERT > FORM > TEXT FIELD):
9.2.2 Atributos de acessibilidade

Por omissão, aparece a seguinte caixa de diálogo:
Isto acontece porque, por omissão, as funcionalidades de acessibilidade estão

activas para os formulários.
Dica
Se não quiser que a caixa de diálogo INPUT TAG ACCESSIBILITY ATTRIBUTES
apareça sempre que insere um campo no formulário, aceda à opção VIEW >
PREFERENCES no Windows (DREAMWEAVER > PREFERENCES no Macintosh), e
depois, na caixa de diálogo que aparece, seleccione a categoria ACCESSI-
BILITY, e desactive a opção FORMS OBJECTS:
9. FORMULÁRIOS 221
Não é obrigado a inserir nenhum valor na caixa de diálogo INPUT TAG

ACCESSIBILITY ATTRIBUTES. Pode mesmo clicar no botão CANCEL, que o campo
será inserido no formulário. Mas deve aproveitar esta caixa de diálogo para
evitar ter de aceder ao código para activar ou atribuir valores a propriedades
dos campos.
Um dos valores que deve inserir na caixa de diálogo INPUT TAG ACCESSIBILITY
ATTRIBUTES é o nome que pretende atribuir ao campo. O valor introduzido no
campo ID da caixa de diálogo vai ser atribuído aos atributos id e name (este,
por razões históricas e de compatibilidade). Quando se trabalha com páginas
dinâmicas e com bases de dados, muitos web programmers atribuem a este
campo o mesmo nome que o utilizado na tabela da base de dados onde os
dados vão ser inseridos.
LABEL é o texto que aparece atrás do campo de texto e que identifica, para o
visitante, o conteúdo desse campo. Os labels não estão limitados a apenas
uma palavra, podendo ser bastante longos, embora por razões estéticas tal
não seja aconselhado.
A área STYLE, que possui três opções, define o relacionamento entre o label e
o campo de texto. A primeira opção, ATTACH LABEL TAG USING ‘FOR’ ATTRIBUTE,
cria um elemento label autónomo do respectivo campo de texto. A relação
entre o label e o campo de texto faz-se através do valor do atributo for do
elemento label que deve ser igual ao valor do atributo id/name do campo de
texto. Em HTML:
<label for="nome">Nome: </label>
<input type="text" name="nome" id="nome" />
Esta opção é vantajosa quando se tem de separar o label do respectivo

campo, por razões de design ou layout.
Já a segunda opção, W RAP WITH LABEL TAG, faz com que o elemento input
seja ‘embrulhado’ pelo elemento label, tornando assim dispensável o atributo
for:
<label>Nome:
</label>
Caso se seleccione a terceira opção, NO LABEL TAG, o web designer terá de

inserir manualmente o texto identificativo do campo de texto.
De qualquer forma, visualmente para o visitante as três opções são idênticas.
Para o web designer a primeira opção é mais vantajosa porque permite estili-
zar o aspecto do label independentemente do campo de texto.
Em seguida, a área POSITION define a posição do label relativamente ao
campo de texto. Pode ser antes do campo de texto (opção BEFORE FORM ITEM)
ou depois (opção AFTER FORM ITEM). Para a maior parte dos elementos HTML
que podem ser utilizados num formulário selecciona-se a opção BEFORE FORM
ITEM. Já no caso dos radio buttons e das checkboxes, selecciona-se a opção
AFTER FORM ITEM.
A ACCESS KEY permite a definição de uma combinação de teclas para o visi-
tante saltar directamente para o campo. São sobretudo importantes para pes-
soas com limitações de vária ordem que não conseguem utilizar um rato.
Embora a utilização da tecla TAB permita saltar entre campos, como veremos
a seguir, em algumas ocasiões existe a necessidade de saltar directamente
para um determinado campo.
Neste campo ACCESS KEY introduz-se uma letra que juntamente com a tecla
ALT permite ‘saltar’ para o campo do formulário em causa. Muitas vezes
coloca-se a negrito (bold), no label, o carácter definido para access key. O
problema é que muitos browsers já têm um conjunto de teclas de atalho defi-
nidas que impossibilitam a utilização de muitas das access keys. Por exemplo,
imagine que define o f como access key. Deixa de poder utilizar o ALT+F para
aceder ao menu FILE [FICHEIRO] do browser.
Em HTML corresponde a um atributo accesskey do elemento <input>:
<input type="text" name="nome" id="nome" accesskey="n" />
TAB INDEX é a ordem pela qual o cursor é colocado nos campos quando se
carrega na tecla TAB. Isto é, é possível, num browser, saltar entre campos de
um formulário (e, já agora, entre links) recorrendo à tecla TAB.
Por omissão, os browsers (e outros user agents) definem a ordem de salto da
esquerda para a direita e de cima para baixo da página. Podemos alterar esta
ordem, se o desejarmos, atribuindo números a cada campo. O normal é utilizar
números de 10 em 10 para o TAB INDEX para o caso de querermos mudar ele-
mentos de sítio no formulário ou de inserir novos e não termos assim de rees-
crever todos os valores de TAB INDEX de todos os campos do formulário.
Em HTML corresponde a um atributo tabindex do elemento <input>:
9. FORMULÁRIOS 223
<input type="text" name="nome" id="nome" tabindex="10" />
O nosso formulário tem, neste momento, o seguinte aspecto:
9.2.3 Atributos dos campos de texto

Relativamente a um campo de texto normal, o Dreamweaver disponibiliza
outros atributos no PROPERTY INSPECTOR, além dos existentes na caixa de
diálogo INPUT TAG ACCESSIBILITY ATTRIBUTES:
O CHAR WIDTH permite definir a largura do campo de texto utilizando como

unidade os caracteres, isto é, se introduzir aqui o valor 10 isso significa que
pelo menos 10 caracteres aparecerão visíveis quando o visitante introduzir um
valor no campo. O problema reside no facto do tamanho dos caracteres variar
entre sistemas operativos e browsers podendo, além isso, cada utilizador defi-
nir o tipo de letra a utilizar. Por isso, o ideal é definir a largura utilizando CSS.
Já o MAX CHARS é um atributo que deve ser utilizado dado que limita o número
de caracteres máximo que se podem introduzir num determinado campo. Cor-
responde ao atributo maxlength de HTML. Sem este atributo, o visitante
pode praticamente introduzir um número infinito de caracteres num campo de
texto. Curiosamente, o HTML não prevê um atributo para o número mínimo de
caracteres.
Muitas vezes não existe espaço no layout de uma página (ou o design não o
prevê) para colocar um label. Nesse caso, e de forma a que o visitante saiba o
que pode introduzir no campo em causa, utiliza-se o INIT VAL (atributo value
do HTML) para colocar uma mensagem. Pode ver esse comportamento na
página principal do jornal Público (http://www.publico.pt), na área de pesquisa no
canto superior direito:
Este atributo é muitas vezes complementado com código JavaScript, para que
a mensagem seja removida quando o visitante clica dentro do campo.
Finalmente, as opções DISABLED e READ-ONLY são pouco utilizadas quando se
desenha uma página, sendo a sua utilização mais orientada para JavaScript.
DISABLED (em HTML, disabled="disabled") significa que o campo não
pode ser preenchido aparecendo com um aspecto diferente (se bem que nos
browsers e sistemas operativos mais recentes, a diferença visual seja pouco
perceptível). Na imagem abaixo, o campo NOME está desactivado:
A opção READ-ONLY (em HTML, readonly="readonly") também não per-

mite que o campo seja preenchido. Isto significa que para o visitante a dife-
rença entre este atributo e o disabled não é evidente, embora um campo de
texto que tenha o atributo readonly activado tenha um aspecto idêntico aos
outros campos. A diferença entre os dois atributos é que o valor existente num
campo disabled não é enviado para a página de processamento.
Como curiosidade, o facto de um campo poder ter os dois atributos, disa-
bled e readonly, activados.
Vamos acrescentar mais dois campos de texto (com os ids telefone e
email) ao nosso formulário:
Atribuímos ao atributo maxlength (MAX CHARS) o valor 40 para o nome, 9

para o telefone (só vamos prever telefones nacionais) e 60 para o e-mail.
9.2.4 Textarea
Para o campo em que o visitante vai introduzir a sua dúvida, temos de utilizar
outro tipo de elemento do formulário. Recorremos a uma textarea:
9. FORMULÁRIOS 225
O resultado é:
Em HTML, o elemento utilizado é o <textarea>, o que sai fora do normal,

dado que a maior parte dos outros elementos de um formulário recorre ao
elemento <input>:
<textarea name="comentario" id="comentario" cols="45"
rows="5"></textarea>
Mais uma vez, podemos alterar diversos atributos deste elemento do formulá-
rio, recorrendo ao PROPERTY INSPECTOR:
Repare, em primeiro lugar, que o valor do campo TYPE é MULTI LINE.

Os atributos são semelhantes aos de um campo de texto normal, excepto que
podemos definir a altura da textarea através do número de linhas. Como vimos
a dizer ao longo do livro o ideal é utilizar estilos CSS para definir a altura
(campo NUM LINES no PROPERTY INSPECTOR) e a largura (campo CHAR WIDTH
no PROPERTY INSPECTOR) da textarea.
O campo INIT VAL, que já vimos anteriormente, é o valor inicial que aparece
dentro da textarea. No caso de uma textarea não corresponde ao atributo
value, mas sim ao conteúdo do elemento, isto é, ao que aparece entre
<textarea> e </textarea>. Normalmente, este atributo é mais utilizado
quando se trabalha com páginas dinâmicas e se disponibiliza um formulário já
preenchido com dados da base de dados e se permite que o utilizador os

altere.
Um dos problemas que só podem ser resolvidos com a utilização de estilos
CSS é o alinhamento do label em relação à textarea. Por omissão, o label apa-
rece alinhado pela parte de baixo da textarea.
O label tem de ser perceptível e permitir ao visitante perceber que está asso-
ciado à textarea. Além disso temos de ter em conta a forma como os outros
labels estão apresentados. Sem recorrer a estilos CSS, uma forma de melho-
rar a aparência é inserir um break após o fim do label (tecle SHIFT+ENTER):
O nosso formulário de contacto está praticamente terminado, só faltando o

botão de submissão, que adicionaremos mais à frente.
9.2.5 Password
Para exemplificar a utilização de campos de senha (password), vamos criar
um formulário de registo para permitir que os visitantes se registem no nosso
sítio Web e possam assim receber informação da AutoVende e reservar viatu-
ras que pretendam adquirir. Vamos criar então uma página registo.html no
root folder do nosso sítio Web.
Para já este formulário tem a seguinte aparência:
Vamos utilizar, como nome de utilizador para aceder ao sítio Web, o respec-
tivo e-mail.
9. FORMULÁRIOS 227
Não existe, na barra INSERT, um ícone para um campo do tipo password por-
que é muito fácil mudar de um campo de texto normal para um campo do tipo
password.
Por isso, vamos inserir um campo de texto normal, e depois, no PROPERTY
INSPECTOR, seleccionar a opção PASSWORD na área TYPE:
Visualmente, não existe nenhuma alteração relativamente a um campo de

texto normal, mas se a página for carregada no browser, e se introduzir con-
teúdo nos campos, já se vê a diferença:
Inserimos mais um campo para o utilizador confirmar a senha:
9.3 Radio buttons

É vulgar nos formulários existirem opções para o visitante seleccionar. Quando
se pretende apresentar um conjunto de opções ao utilizador, para este selec-
cionar apenas uma, e o número de opções disponíveis não é muito grande
(até cerca 5 opções), recorre-se aos radio buttons.
Para inserir um radio button num formulário recorre-se ao ícone RADIO BUTTON
da barra INSERT (ou à opção INSERT > FORM > RADIO BUTTON):
Desta vez o Dreamweaver, como sabe que se trata de um radio button, coloca
o label à frente do elemento:
Vamos inserir outro radio button à frente do actual e colocar um identificador

do tipo de selecção (GÉNERO):
Ao seleccionarmos um dos radio buttons, podemos ver no PROPERTY INS-

PECTOR que o Dreamweaver tomou algumas decisões por nós:
Por exemplo, atribuiu um valor (campo CHECKED VALUE) a cada um dos radio
buttons, que é igual ao id, como podemos ver pelo código HTML produzido:
<p>
Género:
<input type="radio" name="radio" id="feminino"
value="feminino" />
<label for="feminino">Feminino</label>
<input type="radio" name="radio" id="masculino"
value="masculino" />
<label for="masculino">Masculino</label>
</p>
Este valor é o que é enviado para a página de processamento de dados do

formulário quando este é submetido pelo visitante da página.
O mais curioso é que o Dreamweaver atribuiu um valor ao atributo name dife-
rente do valor do atributo id. Normalmente estes dois valores são idênticos
9. FORMULÁRIOS 229
para um determinado elemento HTML, mas no caso dos radio buttons e das
checkboxes eles são normalmente diferentes.
O que o atributo name faz num radio button é identificar o conjunto de radio
buttons ao qual ele pertence. Isto é, todos os radio buttons que pertençam ao
mesmo ‘campo’ do formulário têm de possuir um valor idêntico do campo
name. Não é possível, na caixa de diálogo INPUT TAG ACCESSIBILITY ATTRI-
BUTES, definir o valor do atributo name a atribuir ao radio button. Essa opera-
ção tem de ser efectuada a partir do PROPERTY INSPECTOR.
Por omissão, o Dreamweaver atribui o valor radio ao primeiro conjunto de
radio buttons existentes na página. Embora possa manter este nome, lembre-
-se que este é o nome identificativo do valor que é passado para a página de
processamento de dados do formulário. O ideal é atribuir a designação do
grupo de radio buttons, que no nosso caso é genero (sem acento). Terá de
alterar este valor nos dois radio buttons.
Muitas vezes é necessário apresentar uma opção já seleccionada. Isto pode
acontecer, por exemplo, se o sítio Web abordar assuntos para mulheres.
Neste caso, colocaríamos seleccionado, por omissão, o radio button femi-
nino, activando a opção CHECKED na área INITIAL STATE:
Atenção que muitas vezes apresenta-se ao visitante uma das opções já selec-
cionada para o ‘forçar’ a ‘escolher’ essa opção.
Embora possa inserir radio buttons individualmente na página, a forma mais
fácil de inserir grupos de radio buttons é utilizar os radio groups do Dream-
weaver:
Neste caso já não aparece a caixa de diálogo INPUT TAG ACCESSIBILITY

ATTRIBUTES. É mostrada uma caixa de diálogo em que temos de inserir os
radio buttons que pretendemos agrupar:
Em primeiro lugar, no campo NAME, vamos definir o valor do atributo name,

isto é, a identificação do grupo de radio buttons, que no nosso caso é genero.
Em seguida inserimos os radio buttons clicando no ícone +. Mas, por omissão,
o Dreamweaver já criou dois radio buttons. Temos então de alterar os labels e
valores destes radio buttons:
Para o fazermos, basta clicar no valor que já existe. Embora tenhamos utili-
zado o mesmo valor para o elemento label (e, por consequência, para o atri-
buto id) e para o atributo value, isso não é obrigatório. Podíamos ter um id
igual a feminino e um value igual a F.
Só falta decidir a forma como os radio buttons vão aparecer no formulário:
Se vão aparecer um em cada linha, separados por elementos <br /> (LINE
BREAKS, que é a opção que vamos utilizar) ou se pretendemos que apareçam
numa tabela, como era habitual há uns anos atrás (opção TABLE). Curiosa-
mente, não existe opção para eles aparecerem numa linha só.
9. FORMULÁRIOS 231
O código produzido é semelhante ao que foi gerado quando criámos os radio

buttons um de cada vez:
<p>
<label>
<input type="radio" name="genero" value="feminino"
id="genero_0" />
feminino</label>
<br />
<label>
<input type="radio" name="genero"
value="masculino" id="genero_1" />
masculino</label>
<br />
</p>
Porém, os labels não utilizam o atributo for, optando por englobar o radio
button. Uma das vantagens da utilização do elemento <label> nos radio
buttons é que não é necessário clicar no radio button para o seleccionar, basta
clicar no texto.
De forma aos radio buttons ficarem numa única linha vamos remover os ele-
mentos <br /> na vista CODE. Só falta agora colocar no início da linha a
identificação do grupo de radio buttons, Género:.
Um dos atributos que não conseguimos atribuir a um radio button recorrendo
ao PROPERTY INSPECTOR é o tabindex. Para o fazermos, seleccione um radio
button e depois tecle CTRL+T (COMMAND+T no Macintosh):
Coloque o cursor no fim antes do />, e escreva tabindex= e coloque o valor

numérico entre parêntesis.
Em alternativa pode seleccionar a opção EDIT TAG <INPUT> do menu de con-
texto do radio button (botão direito do rato em Windows e CONTROL+CLIQUE no
Macintosh):
Na caixa de diálogo TAG EDITOR, clique na categoria STYLE SHEET/

ACCESSIBILITY:
9.4 Checkboxes
As checkboxes podem ser utilizadas num formulário de forma isolada ou agru-
pada.
Quando as checkboxes são utilizadas de forma isolada servem normalmente
para o utilizador confirmar que está de acordo com algo, por exemplo com as
condições de utilização de um determinado serviço. No nosso formulário
podíamos acrescentar uma checkbox com este propósito.
Clica-se no ícone CHECKBOX da barra INSERT (ou selecciona-se a opção
INSERT > FORM > CHECKBOX):
9. FORMULÁRIOS 233
Aparece a já nossa conhecida caixa de diálogo INPUT TAG ACCESSIBILITY

ATTRIBUTES. Depois de preenchidos os campos necessários, a aparência da
checkbox na página é:
Em HTML:
<p>
<input type="checkbox" name="aceita_termos"
id="aceita_termos" />
<label for="aceita_termos">Aceito os termos e
condições de utilização do site</label>
</p>
Falta um atributo da checkbox, que é o valor que é passado para a página de

processamento dos dados do formulário caso a checkbox seja seleccionada.
Temos de recorrer ao PROPERTY INSPECTOR:
No campo CHECKED VALUE inserimos o valor a ser passado. Repare que tam-
bém podemos definir o estado inicial da checkbox (área INITIAL STATE) fazendo
com que ela apareça seleccionada quando o visitante abre a página com o
formulário.
Para complementar a checkbox podemos acrescentar um link para uma
página (ou janela) onde existe uma descrição dos termos e condições de utili-
zação do sítio Web. Para colocar esse link entre parêntesis a seguir ao label
da checkbox, seleccionamos o elemento <label> no TAG SELECTOR,
em seguida carregamos na tecla seta para a direita (Î) para sair fora do ele-
mento <label>, e depois escrevemos o texto e aplicamos o link para a
página pretendida:
As checkboxes também são utilizadas em grupo para permitir a selecção de

múltiplos itens relacionados. Porém, apenas devem ser utilizadas quando o
número de checkboxes no grupo não ultrapasse 10.
Podemos criar um grupo de checkboxes manualmente, inserindo uma check-

box de cada vez. Neste caso temos de assegurar que o valor do atributo name
de cada uma é igual.
Mas o Dreamweaver permite a criação de um grupo de checkboxes de forma
automática. Utilizamos para isso o ícone CHECKBOX GROUP da barra INSERT
(ou a opção INSERT > FORM > CHECKBOX GROUP):
Na caixa de diálogo CHECKBOX GROUP,
introduzimos o nome a atribuir ao atributo name de todas as checkboxes que

pertencem ao grupo, bem como inserimos os atributos label e value das
checkboxes. O resultado é:
Em HTML:
9. FORMULÁRIOS 235
<p>
<label>
<input type="checkbox" name="preferencias"
value="ligeiros" id="preferencias_0" />
Ligeiros</label>
<br />
<label>
value="carrinhas" id="preferencias_1" />
Carrinhas</label>
<br />
<label>
value="coupés" id="preferencias_2" />
Coupés</label>
<br />
...
Só falta atribuir um título ao grupo das checkboxes, bem como remover os

elementos <br /> substituindo-os por parágrafos. Para o fazermos, coloque o
cursor no fim do primeiro label, tecle DELETE para apagar o elemento <br />
e tecle ENTER (ou RETURN) para inserir um novo parágrafo com a checkbox
seguinte. Repita o procedimento para todas as checkboxes. Na última check-
box basta teclar DELETE.
A aparência do formulário é agora:
9.5 Select
Quando se tem pouco espaço num formulário, ou quando as opções são
demasiadas, utiliza-se um menu de drop-down, que permite apenas a selec-
ção de uma única opção:
Para inserir um destes elementos utiliza-se a opção SELECT (LIST/MENU) da

barra INSERT (ou a mesma opção do menu INSERT > FORM):
Preenche-se os valores desejados na caixa de diálogo INPUT TAG ACCESSI-

BILITY ATTRIBUTES, nomeadamente o ID e o LABEL. A aparência do menu de
drop-down numa página no Dreamweaver é,
e o código HTML associado é:

<p>
<select name="distrito" id="distrito">
</select>
</p>
Mas é agora necessário introduzir as opções que vão estar disponíveis no

menu de drop-down. Para o fazer temos de utilizar o botão LIST VALUES do
PROPERTY INSPECTOR (estando o elemento select seleccionado):
9. FORMULÁRIOS 237
A inserção de opções faz-se na caixa de diálogo LIST VALUES, clicando no

botão +:
O ITEM LABEL é o que aparece ao visitante no menu de drop-down, enquanto o

VALUE é o que é enviado para o programa de processamento de dados do
formulário. Embora o VALUE possa ficar em branco, sendo nesse caso utilizado
o ‘valor’ do ITEM LABEL, alguns browsers, como o Internet Explorer, não se-
guem esta regra, por isso o ideal é mesmo preencher os dois.
Estas opções geram elementos <option>:
<p>
<label for="distrito">Distrito: </label>
<option value="Aveiro">Aveiro</option>
<option value="Beja">Beja</option>
<option value="Braga">Braga</option>
<option value="Bragança">Bragança</option>
<option value="Castelo Branco">Castelo
Branco</option>
<option value="Coimbra">Coimbra</option>
<option value="Évora">Évora</option>
<option value="Faro">Faro</option>
<option value="Guarda">Guarda</option>
<option value="Leiria">Leiria</option>
<option value="Lisboa">Lisboa</option>
<option value="Portalegre">Portalegre</option>
<option value="Porto">Porto</option>
<option value="Santarém">Santarém</option>
<option value="Setúbal">Setúbal</option>
<option value="Viana do Castelo">Viana do
Castelo</option>
<option value="Vila Real">Vila Real</option>
<option value="Viseu">Viseu</option>
</select>
</p>
Quando se trata de opções que são utilizadas frequentemente em formulários

(como no caso da lista de países), o normal é reutilizar os elementos
<option> em outras páginas.
Muitas vezes utilizam-se números ou abreviações nos valores. No nosso
exemplo, cada distrito podia ter um código interno atribuído e era esse código
que teríamos de utilizar no atributo value.
Se utilizarmos páginas dinâmicas podemos preencher as opções a partir de
uma tabela da base de dados.
Embora no Dreamweaver apareça Viana do Castelo (ou outro valor) como
opção seleccionada,
no browser a opção que aparece é a primeira da lista, Aveiro:
Mas é normal aparecer uma mensagem do tipo «-- Seleccione um distrito --»
como primeira opção de um menu de drop-down, porque senão se o visitante
não seleccionar nenhum distrito, será enviado o valor da primeira opção para a
página de processamento de dados.
O método de introdução desta opção é igual ao utilizado para as opções ‘nor-
mais’. Repare que, embora clicando no botão + crie uma opção no fim da lista,
pode utilizar as setas para posicionar essa opção no início da lista:
Atribuímos o valor 0, dado que este valor é muito utilizado quando queremos
assinalar que o visitante não seleccionou nenhum valor de um menu de drop-
down.
9. FORMULÁRIOS 239
Como um browser apresenta sempre a primeira opção de um menu de drop-

down, no PROPERTY INSPECTOR podemos seleccionar outra opção para apare-
cer seleccionada, utilizando para isso a lista INITIALLY SELECTED:
Basta clicar na opção que se pretende colocar em selecção. No código HTML:

<option value="0" selected="selected">-- Seleccione
um distrito --</option>
<option value="Aveiro">Aveiro</option>
...
Existe uma opção no PROPERTY INSPECTOR que ainda não abordamos, que é o
TYPE. Por questões estéticas ou por preferência, pode-se converter o menu de
drop-down numa lista:
Ao activar a opção LIST ficam disponíveis mais duas opções no PROPERTY

INSPECTOR, HEIGHT e ALLOW MULTIPLE SELECTIONS:
A opção HEIGHT (a que corresponde o atributo height de HTML) define o

número de opções visíveis em simultâneo. Já a opção ALLOW MULTIPLE
SELECTIONS (a que corresponde o atributo multiple de HTML), permite que
seja seleccionada mais de uma opção. Esta possibilidade é muito mal com-
preendida pelos visitantes dos sítios Web já que a múltipla selecção de opções
implica a utilização das teclas SHIFT e CTRL, para seleccionar opções conse-
cutivas e opções não consecutivas, respectivamente.
Um menu de drop-down com estes dois atributos activados teria o seguinte
aspecto em HTML:
<select name="distrito" size="5" multiple="multiple"
id="distrito">
9.5.1 Jump menu

Na barra INSERT o Dreamweaver disponibiliza outro tipo de menu de pull-down,
o jump menu:
Este tipo especial de menu de drop-down possui código JavaScript associado

que permite que seja invocada uma página, sempre que o visitante seleccione
um valor da lista.
Na caixa de diálogo INSERT JUMP MENU,
para cada opção que se pretenda criar (utilizando o botão +) tem-se de atribuir
o texto que aparece ao visitante (campo TEXT), e no campo WHEN SELECTED,
GO TO URL, a página de destino. Na parte de baixo da caixa de diálogo pode-
mos definir onde é que aparecem as páginas invocadas e se pretendemos que
apareça um botão GO a seguir ao menu. Neste caso, além de seleccionar uma
opção do menu, o visitante tem de clicar no botão GO para aceder à página
que corresponde à opção seleccionada.
Na página a aparência do jump menu é idêntica a um menu de drop-down,
mas no código produzido pode-se ver um novo atributo, onchange, que invoca
uma função JavaScript sempre que o visitante selecciona uma opção:
<select name="menu_principal" id="menu_principal"
onchange="MM_jumpMenu('parent',this,0)">
<option value="index.html">Índice</option>
9. FORMULÁRIOS 241
<option value="registo.html">Registo</option>
<option value="info/quemsomos.html">Quem
Somos</option>
</select>
A função JavaScript encontra-se no topo do ficheiro:

<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedI
ndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
9.6 Botões
Neste momento qualquer um dos formulários que criamos não tem forma de
ser submetido pelo visitante para os dados serem processados por uma
página server-side.
Temos então de inserir um botão de submissão na página, recorrendo ao
ícone BUTTON da barra INSERT (ou à opção INSERT > FORM > BUTTON):
Na caixa de diálogo INPUT TAG ACCESSIBILITY ATTRIBUTES, o Dreamweaver

seleccionou automaticamente a opção NO LABEL TAG, porque não se utilizam
labels com os botões. Por isso também não preenchemos o campo LABEL.
O botão inserido na página tem o seguinte aspecto:
Como é óbvio, temos de alterar o texto que aparece no botão, e vamos utilizar
para isso o PROPERTY INSPECTOR:
O campo VALUE (que corresponde ao atributo value em HTML) contém o texto

que pretendemos alterar.
A acção que o botão desencadeia quando é premido é definida pelo campo
ACTION que pode ter três valores:
• SUBMIT FORM – recolhe todos os dados inseridos no formulário e envia-
-os para a página ou script que os vai processar;
• RESET FORM – limpa todos os campos de um formulário. Actualmente
não é muito utilizado, dado que se o visitante o premir por descuido
pode ficar sem os dados já inseridos.
• NONE – não atribui nenhuma acção ao botão. Tem-se de utilizar Java-
Script para associar alguma acção ao botão.
Se vir o código HTML que é inserido na página pode achar estranho que não
exista nenhum atributo ACTION:
<input type="submit" name="btSubmeter" id="btSubmeter"
value="Enviar" />
Na realidade, a acção associada ao botão é definida pelo atributo type. O

atributo action do elemento form é que contém a página que é invocada
quando o visitante clica no botão de submissão.
9.6.1 Botões do tipo imagem

Hoje em dia os botões tradicionais de um formulário têm um aspecto ultrapas-
sado, embora possam ser ‘melhorados’ através da utilização de estilos CSS.
Em alternativa é possível utilizar uma imagem como botão de submissão de
um formulário. É para isso que serve o campo de formulário image que é inse-
rido na página recorrendo ao ícone IMAGE FIELD:
9. FORMULÁRIOS 243
Em primeiro lugar é necessário escolher, na caixa de diálogo SELECT IMAGE

SOURCE, uma imagem que vai estar ‘associada’ ao botão. Esta imagem pode
ser do tipo GIF, JPEG ou PNG.
Em seguida aparece a caixa de diálogo INPUT TAG ACCESSIBILITY ATTRIBUTES,
onde devemos inserir apenas o nome a atribuir ao campo do formulário.
Resultado:
Em HTML:
<input type="image" name="btEnviar" id="btEnviar"
src="../_imagens/enviar.png" />
Muitas vezes as pessoas menos habituadas a desenhar sítios Web cometem

um erro bastante comum ao pensarem que este tipo de botões são construí-
dos recorrendo a uma imagem (elemento <img>) e a um link associado à
imagem. Embora nesse caso seja invocada uma página, os dados do formulá-
rio não são passados para essa página.
9.7 Melhorar a organização do formulário

A organização visual de um formulário é muito importante numa página, sobre-
tudo num formulário longo em que é importante separar os vários campos em
áreas distintas.
O elemento FIELDSET é utilizado para criar áreas distintas no formulário, e o
elemento LEGEND é utilizado para identificar essas áreas.
Insere-se um fieldset clicando no ícone FIELDSET na barra INSERT (ou seleccio-
nando a opção INSERT > FORM > FIELDSET):
A única opção que aparece, para o web designer fornecer um valor, é a

legenda que descreve a área:
Normalmente a legenda é curta mas pode introduzir o que quiser.

O resultado é:
Em HTML o código produzido é:

<fieldset>
<legend>Dados Pessoais</legend>
<p> </p>
</fieldset>
Visualizando nos browsers, o aspecto é semelhante, mas não igual. No Inter-

net Explorer 8,
enquanto no Firefox 3.6:
Se estiver a inserir campos FIELDSET seguidos, e para evitar inserir um fieldset

dentro de outro, seleccione o último fieldset no TAG SELECTOR, tecle na seta
para a direita (Î), para sair do fieldset. Insira agora o outro fieldset:
Se tiver dúvidas, o ideal é ver o código para ver se está tudo bem.
O problema de utilização de fieldsets com os nossos formulários é que já inse-
rimos todos os campos pretendidos. O ideal seria ter planeado o formulário e
inserir primeiro os fieldsets e depois os campos dentro dos fieldsets respecti-
vos.
9. FORMULÁRIOS 245
Temos agora de resolver o problema. Seleccionamos todos os campos que

pretendemos colocar dentro do primeiro fieldset, DADOS PESSOAIS:
Depois, carregamos em CTRL+T para invocar a funcionalidade de W RAP TAG:
Escreve-se agora fieldset, e como vamos utilizar os ids para criar os estilos
CSS deve também atribuir um valor id. O que deverá então escrever é:
<fieldset id="dados_pessoais">
Depois de carregar em ENTER (ou RETURN),
é difícil identificar o fieldset dado que ficou a faltar a legenda. Para a inserir
temos de mudar para a vista CODE. Localize o fieldset, insira uma linha em
branco,
e, em seguida, escreva:
<legend>Dados Pessoais</legend>
Vamos repetir este procedimento para as outras duas áreas de forma a ter o
formulário com o seguinte aspecto:
Por omissão, o aspecto visual de um fieldset é uma moldura cinzenta com a

legenda a aparecer no topo superior esquerdo. É possível alterar este aspecto
recorrendo a estilos CSS.
9.8 Outros campos

Existem outros tipos de campos disponíveis para serem utilizados num formu-
lário, mas que só têm utilidade quando se está a trabalhar com páginas dinâ-
micas.
Um desses campos é o UPLOAD, que insere uma combinação de campo de
texto e de botão de BROWSE, e que permite aos visitantes transferirem fichei-
ros para o nosso sítio Web. O ícone para este tipo de campo na barra de
INSERT, é o FILE FIELD (ou, em alternativa, a opção INSERT > FORM > FILE
FIELD):
9. FORMULÁRIOS 247
O resultado na página é:
e o código HTML associado:

<p>
<label for="btUpload">Enviar ficheiro: </label>
<input type="file" name="btUpload" id="btUpload" />
</p>
O texto que aparece no botão depende do sistema operativo, da língua e do

browser utilizado, não podendo ser alterado através de HTML ou de CSS.
Outro campo apenas utilizado em páginas dinâmicas é o hidden field, que per-
mite forçar um valor quando o formulário é submetido atribuindo a um campo
escondido.
A sua inserção na página faz-se através do ícone HIDDEN FIELD da barra
INSERT (ou, em alternativa, a opção INSERT > FORM > HIDDEN FIELD):
Não aparece nenhuma caixa de diálogo, apenas um ícone na página a identifi-

car o local onde o hidden field foi inserido:
É necessário, no PROPERTY INSPECTOR, atribuir um nome e um valor ao

campo. Em HTML:
<input name="contador" type="hidden" id="contador"
value="300" />
Não se preocupe com o ícone que identifica o hidden field dado que não apa-
recerá no browser, sendo apenas uma forma do Dreamweaver permitir a sua
localização na página. Se não gostar que estes elementos invisíveis apareçam
na página, desactive a opção INVISIBLE ELEMENTS do menu VISUAL AIDS exis-
tente na barra de documento:
Deixará de ver qualquer elemento invisível existente na página. Se apenas

pretender não ver os hidden fields, aceda à opção EDIT > PREFERENCES
(DREAMWEAVER > PREFERENCES no Macintosh), e depois seleccione a catego-
ria INVISIBLE ELEMENTS e tire a selecção da opção HIDDEN FORM FIELDS.
10 Conteúdo multimédia
A utilização de conteúdo multimédia em páginas Web permite tornar as pági-

nas mais apelativas. Existem mesmo serviços que são baseados em conteú-
dos multimédia, como o YouTube.
Sempre foi bastante complicado colocar áudio e vídeo em sítios Web, e só
com a divulgação do formato Flash é que se tornou mais simples. O problema
sempre residiu na necessidade dos visitantes das páginas terem de possuir
instalado um determinado plug-in. E dos plug-ins disponíveis no mercado,
apenas o Flash Player tem uma cobertura quase universal. O JRE, que é o
ambiente de execução das applets Java, tem uma boa cobertura, mas actual-
mente o Java é muito pouco utilizado em páginas Web (excepto no desenvol-
vimento de páginas server-side).
Os plug-ins associados à reprodução de vídeo, como o Windows Media Player
e o Quicktime, estão instalados em cerca de 65% dos computadores, mas aqui
o problema reside na utilização no Windows versus a utilização no Macintosh,
dado que muito dificilmente um utilizador do Macintosh terá o Windows Media
Player instalado.
10.1 Conteúdo Flash em páginas Web

Pelo facto do Flash e do Dreamweaver terem sido desenvolvidos pela mesma
empresa, a Macromedia, sempre tiveram um nível de integração bastante ele-
vado.
Isto significa, em primeiro lugar, que é muito fácil inserir ficheiros .swf (que é a
extensão dos ficheiros ‘autónomos’ produzidos pelo Flash) numa página Web
no Dreamweaver.
Basta aceder à opção INSERT > MEDIA > SWF, ou clicar no ícone MEDIA, da
categoria COMMON, na barra INSERT, e seleccionar a opção SWF:
Tal como acontece com as imagens, também podemos arrastar o ficheiro .swf
do painel ASSETS ou do painel FILES:
Repare que o painel ASSETS tem mesmo uma categoria que permite listar
todos os ficheiros .swf existentes no nosso sítio Web.
Tenha em atenção que o Flash utiliza basicamente dois tipos de ficheiros:
• .fla – para desenvolver as animações ou filmes Flash. Não podem
ser utilizados em páginas Web.
• .swf – produzidos a partir dos ficheiros .fla, destinam-se a ser utiliza-
dos nas páginas Web.
Independentemente da forma que escolha para inserir um ficheiro .swf, apa-
recerá sempre a seguinte caixa de diálogo:
10. CONTEÚDO MULTIMEDIA 251
Claro que pode desactivar a apresentação desta caixa de diálogo na categoria

ACCESSIBILITY das preferências (EDIT > PREFERENCES no Windows e
DREAMWEAVER > PREFERENCES no Macintosh):
Na caixa de diálogo OBJECT TAG ACCESSIBILITY ATTRIBUTES, além dos atributos

já nossos conhecidos, ACCESS KEY e TAB INDEX, temos o atributo TITLE que
tem a mesma função do que nas imagens, isto é, o respectivo valor aparece
por cima da animação Flash como uma tooltip e serve como descrição da
animação:
Aparência da animação Flash na página, no Dreamweaver:

Ao guardar a página, o Dreamweaver apresenta um aviso informando o web

designer que vai copiar dois ficheiros de suporte para a reprodução do ficheiro
.swf na página:
Os ficheiros são copiados para a pasta SCRIPTS que é criada, se não existir:
Como um destes ficheiros (swfobject_modified.js) é JavaScript, é inse-

rida na página uma referência a esse ficheiro, na zona do cabeçalho e é invo-
cado um método do objecto swfobject:
<head>
...
<script src="Scripts/swfobject_modified.js"
type="text/javascript"></script>
</head>
<body>
…
swfobject.registerObject("FlashID");
</script>
No local de inserção do ficheiro .swf o código produzido é:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000" width="720" height="540" id="FlashID"
title="Honda Civic Type R">
<param name="movie"
value="_imagens/hondacivictyper.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />

<param name="expressinstall"
value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash"
data="_imagens/hondacivictyper.swf" width="720"
height="540">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall"
value="Scripts/expressInstall.swf" />

<div>
<h4>Content on this page requires a newer
version of Adobe Flash Player.</h4>
<p><a
href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_bu
ttons/get_flash_player.gif" alt="Get Adobe Flash
player" width="112" height="33" /></a></p>
</div>

</object>

</object>
</p>
Repare que existem dois elementos <object>, um para o Internet Explorer e

outro para todos os outros browsers. Ambos os elementos <object> pos-
suem elementos <param> associados que contêm os parâmetros de configu-
ração da reprodução do ficheiro swf.
Nos elementos <object> é feita referência ao ficheiro expressInstall

.swf que foi colocado na pasta SCRIPTS. Este ficheiro permite detectar a
versão do Flash Player instalada no computador do visitante e, caso não seja
a mais recente, propor a instalação desta versão. Claro que se o utilizador não
possuir o Flash Player instalado também lhe é proposta a sua instalação.
Quando se visualiza, no Internet Explorer, uma página que contém código
JavaScript, aparece uma mensagem no topo da página:
Como inserimos uma animação/filme Flash na página, o Dreamweaver acres-

centou a referência a um ficheiro JavaScript, swfobject_modified.js, o
que provoca o aparecimento desta mensagem.
Isto acontece apenas quando se testa a página localmente. Se testarmos a
página num servidor Web, esta mensagem não aparece. Tipicamente, o Inter-
net Explorer bloqueia scripts e outro conteúdo ActiveX no disco local para
proteger contra vírus e outro malware.
Para resolver este ‘problema’ e poder visualizar as animações Flash, clique
com o botão direito do rato em cima da mensagem e seleccione a opção
ALLOW BLOCKED CONTENT:
Aparecerá um aviso de segurança, com informação sobre o ‘problema’. Terá

de clicar em YES para as animações/filmes Flash poderem ser reproduzidas.
10.1.1 Propriedades de uma animação Flash

São diversos os parâmetros que podem ser definidos para uma animação
recorrendo ao PROPERTY INSPECTOR:
Em primeiro lugar, podemos alterar a identificação da animação Flash, dado

que o Dreamweaver utiliza, por omissão, o valor ‘FlashID’.
É também possível alterar as dimensões da animação Flash, se bem que o
devamos fazer no Flash e não no Dreamweaver. Mas se mesmo assim o qui-
ser fazer no Dreamweaver, utilize os campos W (para a largura) e H (para a
altura) ou utilize os quadrados que se encontram no lado esquerdo e no fundo

da imagem:
Aliás, só deve mesmo utilizar o quadrado de redimensionamento que se

encontra no canto inferior direito, dado que as outras duas possibilidades
deformam a animação, dado que não mantêm a proporção entre a largura e a
altura.
Se por acaso se enganar a redimensionar a imagem pode fazer o reset das
dimensões, repondo-as no valor original, clicando no botão RESET SIZE:
Como é possível reproduzir a animação Flash em modo DESIGN no Dream-

weaver, pode então verificar se o redimensionamento teve bom resultado. Cli-
que no botão PLAY:
O botão PLAY transforma-se em STOP enquanto a animação é reproduzida.

Repare como, normalmente, a animação é contínua, isto é, quando chega ao
fim volta a ser reproduzida automaticamente. Isso acontece porque a opção
LOOP está activada. Logo abaixo desta opção existe a opção AUTOPLAY que
permite que a animação Flash comece a ser reproduzida mal a página Web é
carregada no browser do visitante. Se desactivar a opção AUTOPLAY tem de
dar aos utilizadores uma forma de visualizar a animação, caso a própria ani-
mação não disponibilize essa funcionalidade.
Contudo, estes parâmetros não se sobrepõem ao ActionScript que exista den-
tro do ficheiro Flash e que permite definir outro tipo de procedimento.
Os atributos V SPACE e H SPACE têm a mesma função dos utilizados nas ima-
gens, isto é, permitem definir o espaço (conhecido como margem) entre a
animação Flash e os outros elementos da página que estejam acima/abaixo
ou à esquerda/direita da animação. Mas o ideal é utilizar estilos CSS para esta
função.
Vamos ver agora os parâmetros que permitem influenciar a reprodução da
animação. O primeiro é a qualidade (QUALITY):
Os valores disponibilizados afectam a reprodução de animações Flash sobre-

tudo no que diz respeito aos elementos vectoriais e ao texto, dado que con-
trolam a aplicação de anti-aliasing que é uma técnica que permite melhorar a
aparência de certos elementos. Os valores possíveis são:
• HIGH – melhora significativamente a qualidade das animações/filmes,
mas implica um bom processador no computador dos visitantes. Se
necessário, sacrifica a velocidade em favor da qualidade;
• AUTO HIGH – quando a animação/filme começa a ser reproduzida favo-
rece a velocidade e a qualidade, mas sacrifica a velocidade em favor
da qualidade, se necessário;
• Low – se a ligação à Internet da maior parte dos seus visitantes for
lenta ou se a página tiver muito conteúdo multimédia a reproduzir em
simultâneo, utilize esta opção, que favorece a velocidade em detri-
mento da qualidade, e pode mesmo saltar algumas frames da anima-
ção/filme.
• AUTO LOW – quando a animação/filme começa a ser reproduzida favo-
rece a velocidade, mas melhora a qualidade sempre que possível;
Outro parâmetro é o SCALE, que é sobretudo importante caso a animação

Flash apareça numa janela de pop-up:
Em conjunto com as dimensões (campos W IDTH e HEIGHT) da animação/filme,

este parâmetro determina como é que a animação/filme é apresentada num
browser. Controla especificamente como é que a animação/filme reage quan-
do a janela do browser é redimensionada.
O significado das opções é:
• DEFAULT (SHOW ALL) – mostra a animação/filme completo sem compro-
missos, isto é, mantendo a proporção entre largura e altura original
(aspect ratio). A animação/filme não aparecerá distorcida.
• NO BORDER – embora mantendo a proporção original, o filme é
redimensionado de forma a caber na área especificada. Não aparece-
rão barras pretas, mas partes do filme (no lado esquerdo e direito)
podem ser cortadas.
• EXACT FIT – assegura que toda a animação/filme é visível dentro da
área especificada. Mas a animação/filme poderá ser redimensionada e
nesse caso pode ser distorcida.
Já o parâmetro WMODE, permite activar ou desactivar a transparência das ani-
mações Flash:
O valor utilizado por omissão é opaque o que significa que a animação/filme

tapa tudo o que está por trás dela.
O inverso é o valor transparent, em que se vê o conteúdo da página que se
encontra ‘debaixo’ da animação/filme através das respectivas transparências.
Por exemplo, quando se utiliza um elemento div posicionado de forma abso-
luta por cima do conteúdo da página. É o que acontece com os anúncios que
se sobrepõem à página. Mas nem todos os browsers suportam este modo
windowless e por isso o ideal é utilizar código de detecção de browser para
determinar se pode ser aplicado. Este valor transparent pode ter impacto
na performance da reprodução da animação/filme.
Finalmente, o valor window faz com que a animação/filme sejam reproduzidos
na sua própria janela rectangular.
O parâmetro W MODE é também utilizado para definir a interacção entre ele-

mentos interactivos da página (widgets JavaScript como menus de pull-down)
e animações/filmes Flash. Com o valor opaque, os widgets podem aparecer
por cima de animações/filmes swf. Já o valor window faz com que a anima-
ção/filme apareça por cima dos widgets.
10.1.2 Detecção do Flash Player

Para utilizadores que visitam o nosso sítio Web e não possuam o Flash Player
instalado ou possuam uma versão antiga deste player, é-lhes apresentada a
seguinte mensagem (que tem o nome de conteúdo alternativo):
Se vir o código do elemento <object> associado à animação Flash reparará

que dentro de um elemento <div> está a mensagem apresentada ao visi-
tante:
<div>
<h4>Content on this page requires a newer version of
Adobe Flash Player.</h4>
<p><a
href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_bu
ttons/get_flash_player.gif" alt="Get Adobe Flash
player" width="112" height="33" /></a></p>
</div>
Pode mudar este conteúdo alternativo sem recorrer à vista CODE. Na vista
DESIGN clique no ícone que se encontra por cima do quadrado identificativo da
animação Flash na barra de cor cyan:
Dica
Caso não veja esta barra isso significa que tem desactivada a visualização dos
elementos invisíveis. Deverá utilizar a caixa de diálogo PREFERENCES ou o
menu VISUAL AIDS da barra de documento para activar a visualização desses
elementos.
Será apresentado o conteúdo alternativo para a animação em questão:
Como se trata de elementos HTML podemos alterá-los, eliminando ou inse-

rindo texto e imagens. Por exemplo, podemos mudar o texto para português, e
aplicar estilos CSS. No fim das alterações, volte a clicar no mesmo ícone.
O botão PARAMETERS existente no PROPERTY INSPECTOR dá acesso a uma
caixa de diálogo em que podemos definir parâmetros da animação Flash que
não possam ser controlados a partir das opções disponíveis no PROPERTY
INSPECTOR. Por omissão, estão definidos dois parâmetros, que correspondem
à versão em que a animação Flash foi criada (parâmetro swfversion), bem
como à identificação do ficheiro swf que permite instalar uma nova versão do
Flash (parâmetro expressinstall):
10.2 Integração do Flash com o Dreamweaver

Tal como acontece com o Photoshop, a integração do Dreamweaver com o
Flash é bastante abrangente. Por exemplo, se tivermos o ficheiro .fla original
que deu origem ao ficheiro .swf, podemos lançar a edição deste ficheiro
directamente a partir de uma página no Dreamweaver.
Quando se insere um ficheiro .swf numa página Web no Dreamweaver é
criado um link para o ficheiro .fla original. O campo SRC no Property Ins-
pector identifica o ficheiro .fla correspondente ao ficheiro .swf inserido na
página:
Claro que muitas vezes isto não é automático e temos de utilizar a mira ou o
ícone Browse to File para identificar o ficheiro .fla original.
Basta então clicar no botão EDIT para lançar o Flash (que tem de estar insta-
lado no computador, como é óbvio) e abrir o ficheiro .fla. Pode ter de identi-
ficar o ficheiro .fla que deu origem ao ficheiro .swf inserido na página Web
no Dreamweaver:
No Flash vê-se a frase «Editing from Dreamweaver» no topo a identificar a

‘proveniência’ do ficheiro:
Depois de termos efectuado as alterações necessárias, clica-se no botão

DONE. O Flash guarda as alterações no ficheiro .fla e depois exporta esse
ficheiro para o formato .swf sobrepondo ao existente,
e voltamos ao Dreamweaver com a animação/filme actualizado.

10.3 Vídeo Flash

A utilização de vídeos em páginas Web sempre foi bastante complicada
devido sobretudo ao problema do suporte dos diversos codecs existentes no
mercado. Mas a partir do momento em que o Flash Player passou a poder
reproduzir vídeos no formato flv os problemas terminaram. O que seria o
YouTube sem a possibilidade de utilizar vídeo Flash?
Actualmente, a maior parte dos programas de edição de vídeo permitem codi-
ficar vídeos neste formato. Existe mesmo um programa, Adobe Media Enco-
der, que é fornecido com o Flash Professional na Creative Suite que permite
converter vídeos em outros formatos (Quicktime, MPEG, AVI, etc.) para o for-
mato flv (ou f4v):
Para inserir um vídeo Flash numa página Web utiliza-se a opção INSERT >
MEDIA > FLV ou a opção FLV do ícone MEDIA, da categoria COMMON, na barra
INSERT:
Aparece uma caixa de diálogo INSERT FLV:
Em primeiro lugar é necessário definir a forma como o vídeo vai ser reprodu-
zido na página. O campo VIDEO TYPE possui duas opções:
• PROGRESSIVE DOWNLOAD VIDEO – neste caso o vídeo é enviado a partir

de um servidor Web normal utilizando um pedido HTTP, como se tra-
tasse de um documento normal. O ficheiro que contém o vídeo tem de
ser transferido para o computador do visitante antes de começar a ser
reproduzido. Mas, ao contrário dos métodos tradicionais de transferir e
reproduzir, com o progressive download o vídeo começa a ser repro-
duzido antes de ter sido todo transferido – normalmente um a dois
segundos depois de ter sido pedida a reprodução. É o aconselhável
para sítios Web com tráfego baixo ou em que os vídeos são de curta
duração.
• STREAMING VIDEO – o visitante vai recebendo o vídeo sem ser
necessário guardá-lo no disco do computador para o reproduzir. Só
pode ser utilizado se o servidor tiver instalado o Flash Media Server ou
outro tipo de servidor que faça o streaming de vídeos Flash. Ao selec-
cionar esta opção, aparecerão mais duas opções, SERVER URI e
STREAM NAME, na caixa de diálogo INSERT FLV.
Selecciona-se o ficheiro flv a utilizar e depois clica-se no botão DETECT SIZE

para perceber as dimensões do vídeo:
Isto permite verificar se a largura não é inferior à das skins, que colocam os
controlos do filme (PLAY, STOP, REWIND, etc.) por cima deste:
Existem 3 skins disponíveis – CLEAR, CORONA e HALO – em três tamanhos dis-

tintos. As versões cujo nome termina em 3 das skins (que são as que pos-
suem uma largura maior) possuem mais controlos.
A opção AUTO PLAY permite que o filme comece a ser reproduzido logo que a
página é carregada no browser. Só deve ser utilizado se o filme estiver locali-
zado no topo da página, senão o filme começará a ser reproduzido sem o
visitante ter a percepção disso.
A opção AUTO REWIND faz com que o filme regresse à primeira frame do filme
quando chegar ao fim, mas não começa outra vez a ser reproduzido.
O ícone identificativo de um filme Flash (ficheiro .fla), que aparece no meio
do rectângulo, é diferente do ícone relativo a uma animação Flash (ficheiro
.swf):
Não conseguimos ver o filme no Dreamweaver como acontece com os fichei-

ros swf. Temos de pré-visualizar no browser:
Quando o utilizador passa o rato por cima do filme aparecem os controlos.

As opções disponíveis no PROPERTY INSPECTOR estão limitadas às opções que
apareceram na caixa de diálogo INSERT FLV:
10.4 Outros conteúdos multimédia

Podemos adicionar outros conteúdos multimédia a uma página Web, nomea-
damente áudio, vídeo em outros formatos, applets Java, etc. Com o sucesso
do Flash, a maior parte destes formatos deixou de ser utilizado em páginas
Web, sobretudo porque obriga à instalação de plug-ins específicos por parte
dos visitantes do nosso sítio Web.
10.4.1 Áudio
Existem diferentes tipos de formatos de áudio, nomeadamente, .wav, .midi,
e .mp3, entre outros. Cada formato possui vantagens e desvantagens,
nomeadamente o tamanho dos ficheiros e a qualidade da reprodução.
Um dos problemas que enfrentamos é a forma diferente e inconsistente como
os ficheiros de áudio são tratados pelos diferentes browsers existentes no
mercado. Uma forma de resolver estes problemas é adicionar o áudio a um
ficheiro .swf do Flash e utilizar esse ficheiro na página Web.
Podemos sempre ‘embeber’ o áudio na página sem recorrer ao Flash mas,

neste caso, o áudio apenas será reproduzido se o visitante possuir o plug-in
adequado. Para inserir um ficheiro de áudio numa página no Dreamweaver,
utiliza-se a opção INSERT > MEDIA > PLUG-IN ou a mesma opção do menu
MEDIA, da categoria COMMON da barra INSERT:
Depois de seleccionar, na caixa de diálogo SELECT FILE, o ficheiro áudio que

pretende inserir, aparecerá um identificador na página a assinalar o ficheiro
áudio:
Em HTML:
<embed src="_audio/musica_fundo.mp3" width="32"
height="32"></embed>
Existem poucas opções de configuração no PROPERTY INSPECTOR para este

objecto áudio:
Os atributos WIDTH (W) e HEIGHT (H) determinam o tamanho dos controlos de

áudio na página:
Por exemplo, para os controlos do Quicktime Player terem a seguinte aparên-

cia no browser, necessita de 150 píxeis de largura por 16 de altura:
Repare também no campo PLG URL que permite inserir um endereço Web
para localizar o plug-in necessário para reproduzir o áudio. Desta forma, caso
o visitante do nosso sítio Web não possua esse plug-in instalado, poderá sem-
pre instalá-lo.
Dependendo do tipo de áudio que se inseriu, o Dreamweaver permite a sua
reprodução em vista DESIGN, através do botão PLAY (que se transforma em
STOP quando o áudio está a ser reproduzido).
10.4.2 Vídeo
Com o vídeo temos o mesmo problema do áudio. Sem termos a certeza que a
maior parte dos visitantes do nosso sítio Web possui instalado um determi-
nado plug-in (por exemplo, o plug-in do Quicktime), não podemos arriscar a
utilizar um formato de vídeo.
Como vimos anteriormente, a utilização de Flash Video é, hoje em dia, a
melhor solução para resolver este problema. Ainda por cima com a facilidade
com que se converte filmes em outros formatos para Flash Video. O problema
da inserção directa de vídeo em páginas Web sem recorrer ao Flash só será
resolvido quando todos os browsers suportarem o HTML 5 e os codecs a utili-
zar estiverem normalizados.
São três os tipos de vídeo normalmente utilizados em páginas Web: AVI,
MPEG e MOV. Para os utilizarmos no nosso site podemos criar um link para
possibilitar ao visitante a transferência do ficheiro vídeo respectivo; ou pode-
mos ‘embeber’ o vídeo directamente na página como fizemos com o áudio.
Utiliza-se também a opção MEDIA > PLUG-IN para inserir um vídeo na página, e
as opções disponíveis no PROPERTY INSPECTOR também são idênticas.
10.4.3 Filmes Shockwave

Pode reparar no menu MEDIA que também se podem inserir filmes Shockwave
que são produzidos pelo Adobe Director:
Mais uma vez temos de seleccionar o ficheiro na caixa de diálogo SELECT FILE,
e depois introduzir as propriedades de acessibilidade.
Antes do aparecimento do Flash, o Shockwave era um dos formatos mais utili-

zados para a criação de animações para serem utilizadas em páginas Web.
Mas mais uma vez é necessário que o visitante tenha instalado um plug-in
para visualizar estes ficheiros, e actualmente a maior parte das pessoas não
tem instalado o Shockwave Player.
10.4.4 Applets Java

A linguagem Java permite a criação de ‘pequenas’ aplicações (applets) que
podem ser utilizadas em páginas Web.
Para inserir uma applet Java aceda à opção INSERT > MEDIA > APPLET ou à
mesma opção no menu MEDIA da barra INSERT:
Em primeiro lugar temos de seleccionar na caixa de diálogo SELECT FILE o

ficheiro que pretendemos inserir. Depois, aparece a caixa de diálogo de atri-
butos de acessibilidade:
Estes dois atributos já são nossos conhecidos. O ALTERNATE TEXT serve para
apresentar uma descrição da applet, de forma a que os deficientes visuais
(entre outros) tenham uma ideia da utilidade da mesma. É também útil porque
aparece quando o visitante não possui instalado o plug-in necessário ou
quando a visualização de applets Java estiver desactivada. Já o atributo TITLE
permite apresentar uma tooltip quando o visitante coloca o cursor por cima da
applet.
No Dreamweaver a aparência é:
Enquanto no browser:
As propriedades associadas a uma applet Java são:
Uma das diferenças em relação aos outros conteúdos multimédia, é a utiliza-

ção de dois campos distintos para identificar o ficheiro e a pasta onde este se
encontra. Enquanto o atributo CODE corresponde ao nome do ficheiro que
contém a applet Java, o atributo BASE identifica a pasta onde esse ficheiro se
encontra.
10.4.5 Controlos ActiveX

Os controlos ActiveX (anteriormente conhecidos por controlos OLE), são com-
ponentes reutilizáveis, isto é, uma espécie de aplicações em miniatura, que
podem funcionar como plug-ins dos browsers. Mas apenas são reconhecidos
pelo Internet Explorer no Windows. Isto significa que apenas são úteis em
ambientes controlados, por exemplo em intranets, em que se pode controlar o
browser utilizado.
O processo de inserção de um controlo ActiveX numa página utilizando o
Dreamweaver é semelhante ao dos outros componentes multimédia que já
abordámos:
11 CSS (Cascading Style Sheets)
Até agora preocupamo-nos em colocar o conteúdo nas nossas páginas Web.

Agora temos de nos preocupar com a aparência das páginas. Por muito que
os nossos visitantes apenas estejam interessados no conteúdo, a aparência é
sempre importante.
Quando a World Wide Web e o HTML foram inventados, o único elemento que
dava algum interesse a uma página era o <hr>. Mais tarde apareceram as
imagens, o que permitia fazer mais algumas coisas nas páginas, como subs-
tituir o <hr> para criar separadores gráficos, e valorizava muito o designer.
Não tardou muito a ser necessário criar layouts mais agradáveis, o que se
conseguiu recorrendo a tabelas, se bem que a sua função não fosse essa.
Finalmente surgiu o elemento <font> que permitia alterar o tipo e o tamanho
de letra utilizados no texto.
Mas foi então que começaram as incompatibilidades e os problemas, que só
começaram a ser resolvidos quando o W3C (World Wide Web Consortium),
que é a entidade que gere as normas que são aplicadas na World Wide Web,
resolveu criar as CSS (Cascading Style Sheets), uma linguagem de folhas de
estilo que permite alterar a aparência e formatação (na gíria, presentation
semantics) dos elementos existentes numa página Web.
Não só as CSS permitem formatar visualmente elementos da página como
também permitem a criação de layouts bastante complexos. Algo que deve-
mos ter sempre em mente é que os browsers correntes têm um nível diferente
de suporte das normas CSS1, CSS2 e CSS3. Isso significa que nem sempre
podemos utilizar as CSS para criar determinados ‘efeitos’ dado que corremos
o risco de alguns visitantes do nosso sítio Web não os conseguirem ver.
O conceito principal associado às CSS é o de criação de um look-and-feel
comum a todas as páginas do sítio Web, isto é, assegurar que todas as pági-
nas possuem a mesma identidade. Consegue-se este objectivo colocando
todos os estilos comuns num ou mais ficheiros .css e referenciando esse(s)
ficheiro(s) em todas as páginas do sítio. Se existir um estilo que apenas se
pretende aplicar a uma dada página, então esse estilo será local à página.
Um dos sítios Web que melhor exemplificam a capacidade das CSS é o Zen-
Garden (http://www.csszengarden.com/). Tendo por base o seguinte ficheiro .html,
que não contém nenhuns estilos CSS,
os web designers são convidados a submeterem ficheiros .css que alterem o

aspecto da página. Desde 2003 que muitos web designers têm respondido ao
desafio, criando verdadeiras obras de arte, apenas utilizando estilos CSS e
imagens.
Por exemplo, utilizando o Orchid Beauty, transforma-se a página anterior em:
11. CSS 271
Em alguns casos custa a acreditar que se trata da mesma página, com o

mesmo conteúdo textual. Mas é fácil de tirar a prova dos nove. Guarde a
página no disco duro do seu computador e depois remova a seguinte referên-
cia na área <head> do ficheiro .html:
<STYLE title=currentStyle type=text/css
media=screen>@import url( /211/211.css );
</STYLE>
Verá que aparecerá a página original, apenas com o conteúdo textual e sem
nenhuma formatação.
Claro está que as imagens dão muita vida ao design, mas no exemplo Orchid
Beauty, se retirarmos as imagens, obtemos o seguinte resultado que ainda é
bastante diferente do original:
11.1 Criar uma identidade para o sítio Web

Antes de se começarem a definir e a aplicar estilos CSS, é necessário criar
uma identidade para o sítio Web, isto é, definir o tipo de letra a utilizar, a paleta
de cores, o layout das páginas, etc.
Claro está, que não devemos utilizar o Dreamweaver para esta tarefa, sendo
normal recorrer ao Photoshop e ao Fireworks. Esta é uma tarefa do âmbito
das competências dos designers.
Quando se tiver toda esta informação de forma definitiva é que se deverá
começar a criar e a aplicar os estilos CSS.
O design de páginas Web é assunto para outro livro, e existem diversas opi-
niões abalizadas no que diz respeito à escolha de cores. Por exemplo, alguns
entendidos na ‘arte’ dizem que se deve utilizar uma paleta com as cores
extraídas do logótipo, ou com cores complementares. Já outras pessoas afir-
mam a pés juntos que o que está a dar é a utilização de cores contrastantes
com as do logótipo.
Em relação à utilização de tipos de letra, dado que existem poucos tipos de
letra que podem ser utilizados sem problemas nos sítios Web, muitos desig-
ners recorrem a imagens para criar cabeçalhos com tipos de letra exóticos.
11.2 Anatomia de um estilo CSS

Os estilos CSS são ‘instruções’ que possuem o seguinte formato:
selector {declaração};
Por sua vez a declaração possui o seguinte formato:
propriedade: valor; propriedade: valor; ...
O selector descreve o(s) elemento(s) na página que vai(ão) ser controlado(s)
pelo estilo (rule), que é o nome atribuído a cada uma destas ‘instruções’.
Existem três tipos de selector: elemento (ou tag), id e classe.
Já a declaração, que é apresentada entre chavetas, informa o browser que
todas as propriedades existentes entre chavetas devem ser aplicadas ao(s)
elemento(s) identificado(s) pelo selector. Dentro da declaração, temos proprie-
dades e valores separados por ‘:’, e entre eles por ‘;’.
Exemplo de um estilo CSS que é aplicado a todos os cabeçalhos de primeiro
nível e que muda o tipo de letra, o tamanho de letra e a cor:
h1 {
font-family: Arial;
font-size: 1.4em;
color:#CCCCCC;
}
As propriedades e os respectivos valores podem estar em linhas separadas,

como no exemplo anterior, para uma leitura mais fácil, ou todos na mesma
linha: h1 { font-family: Arial;font-size: 1.4em; color:#CCCCCC;}
11. CSS 273
11.3 Criar estilos CSS

Ao longo das diversas versões o Dreamweaver tem mudado bastante a forma
e as possibilidades de definir e aplicar estilos CSS, se bem que a caixa de
diálogo de definição de estilos se tenha mantido inalterada ao longo dos tem-
pos. A versão CS5 traz bastantes novidades que vêm facilitar a vida ao web
designer.
No Dreamweaver podemos utilizar a vista CODE para inserir manualmente os
estilos CSS, contando com a ajuda interactiva para listar e completar as pro-
priedades e os respectivos valores. Ou podemos utilizar a vista DESIGN recor-
rendo à caixa de diálogo CSS RULE DEFINITION.
Embora possamos criar e aplicar estilos CSS apenas na vista DESIGN, é sem-
pre útil perceber o que o Dreamweaver coloca na página como ‘código’. É que
existem algumas propriedades e valores das CSS que apenas podem ser
inseridos na vista CODE. E quando se começa a trabalhar com páginas dinâ-
micas dá muito jeito perceber como é que se escrevem ‘manualmente’ estilos
CSS.
O processo normal de criação e gestão de estilos CSS recorre ao painel CSS
STYLES:
O ícone NEW CSS RULE, existente no canto inferior direito deste painel,
permite iniciar o processo de criação de um estilo CSS, apresentando ao web

designer a seguinte caixa de diálogo:
Aqui escolhe-se o selector, isto é, o(s) elemento(s) ao(s) qual(is) se vai aplicar
o estilo CSS. A lista disponibiliza as seguintes opções:
Estamos a editar a página quemsomos.html (que se encontra na pasta

info). Em primeiro lugar vamos formatar o cabeçalho de primeiro nível, iden-
tificado pelo elemento <h1> de HTML. Como se trata de um elemento HTML
selecciona-se a opção TAG na lista SELECTOR TYPE. Se, por acaso, tivesse o
cursor no cabeçalho INFORMAÇÃO SOBRE A EMPRESA quando clicou no ícone
NEW CSS RULE, poderá verificar que aparece automaticamente o tag referente
ao elemento h1:
11. CSS 275
Caso não o tenha feito, introduza h1 no campo SELECTOR NAME, ou seleccione

esse elemento da lista associada:
Esta lista contém os tags de todos os elementos HTML que podem ser utiliza-
dos numa página Web.
Repare que o Dreamweaver, na textarea existente logo abaixo do campo
SELECTOR NAME, apresenta uma descrição dos elementos aos quais o estilo
CSS vai ser aplicado.
Finalmente, é necessário informar o Dreamweaver relativamente ao local onde
pretendemos que o estilo CSS que vamos criar seja armazenado:
Embora só apareçam duas opções na lista, no dia-a-dia aparecerão mais.

Essas outras opções correspondem aos ficheiros CSS externos que estão
ligados à página que estamos a editar. Como ainda não criamos nenhum fi-
cheiro externo, estamos limitados às seguintes duas opções:
• (THIS DOCUMENT ONLY) – o estilo CSS será criado na área <head> da
página, dentro de um elemento <style>. Isto significa que apenas
poderemos aplicar o estilo a elementos existentes na página.
• (NEW STYLE SHEET FILE) – é criado um novo ficheiro CSS. Na caixa de
diálogo seguinte será pedido o nome e a localização desse ficheiro. Os
estilos que criarmos dentro deste ficheiro poderão ser utilizados por
outras páginas desde que referenciem este ficheiro.
O aspecto corrente da caixa de diálogo NEW CSS RULE é:

Quando se clica em OK aparece outra caixa de diálogo, CSS RULE DEFINITION,

que permite criar as propriedades CSS e atribuir valores:
Nesta caixa de diálogo as propriedades CSS estão separadas em 8 catego-

rias, se bem que essa separação não existe na realidade, sendo apenas uma
forma do Dreamweaver ‘arrumar’ as propriedades na caixa de diálogo.
Vamos definir como tipo de letra primário para o cabeçalho da página o ARIAL
e utilizar um tom de vermelho como cor:
11. CSS 277
Se clicarmos em APPLY podemos ver o efeito da aplicação do estilo sem

fecharmos a caixa de diálogo. Esta possibilidade é bastante útil dado que
podemos efectuar correcções imediatas caso o resultado não nos agrade, sem
termos de fechar a caixa de diálogo.
11.3.1 Painel CSS STYLES

Após estarmos satisfeitos e clicarmos no botão OK, aparece listado, no painel
CSS STYLES, o estilo CSS criado:
Repare que o estilo h1 está debaixo do elemento <style>, o que significa

que o estilo está definido na própria página, dentro do elemento <style> na
área <head>, como pode verificar se aceder ao código HTML:
<head>
charset=utf-8" />
<title>AutoVende - Quem Somos</title>
<style type="text/css">
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #DC000B;
}
</style>
</head>
Com o estilo seleccionado no painel CSS STYLES, aparece na parte de baixo

deste painel uma lista de propriedades definidas no estilo:
Caso pretenda ver uma lista alfabética de todas as propriedades CSS que
estão disponíveis, clique no ícone SHOW LIST VIEW:
As propriedades que estão definidas no estilo seleccionado aparecem no topo

da lista a azul.
O outro ícone, SHOW CATEGORY VIEW, lista as propriedades disponíveis agru-
padas por categorias, aparecendo mais uma vez no topo da lista de cada
categoria e a azul, as propriedades que estão definidas no estilo seleccionado:
11. CSS 279
As categorias utilizadas são as existentes na caixa de diálogo CSS RULE

DEFINITION, além de outras específicas de browsers:
11.3.2 Editar um estilo CSS

Podemos utilizar o link ADD PROPERTY para adicionar uma nova propriedade e
o respectivo valor sem termos de aceder à caixa de diálogo CSS RULE
DEFINITION. Ao clicar neste link entramos em modo de edição, podendo escre-
ver o nome de uma propriedade,
ou seleccioná-la da lista anexa:

Na segunda coluna temos de escrever o valor a atribuir à propriedade. Caso a

propriedade em causa possua uma lista de valores fixos, eles aparecerão
associados ao campo:
O resultado é:
Se estivermos em modo SHOW LIST VIEW ou em modo SHOW CATEGORY VIEW,

basta localizar a propriedade na lista e atribuir o valor pretendido:
Podemos também inserir estilos CSS recorrendo ao código, mas como a maior
parte dos web designers não gosta de mexer
em código, então o ideal é mesmo recorrer à
caixa de diálogo CSS RULE DEFINITION. Para
alterarmos os estilos CSS clique no botão EDIT
RULE que se encontra no canto inferior direito
do painel CSS STYLES (ou, em alternativa,
efectuar um duplo clique em cima do nome do
estilo):
11. CSS 281
Pode confirmar que a regra que inserimos no painel CSS STYLES aparece
nesta caixa de diálogo:
Caso efectue alterações aos estilos CSS directamente em código, convém que
depois clique no botão REFRESH que aparece no painel CSS STYLES:
11.3.3 Eliminar propriedades e estilos CSS

Caso pretenda eliminar uma propriedade que pertença a um estilo, basta
seleccioná-la no painel CSS STYLES (clicando no nome ou no valor) e clicar no
ícone DELETE CSS PROPERTY (ou em alternativa teclar DELETE):
Para eliminar um estilo o procedimento é semelhante, isto é, seleccionar um

estilo na lista e clicar no ícone DELETE CSS RULE (ou em alternativa teclar
DELETE):
11.3.4 Formatar outros elementos

Agora que já temos o cabeçalho de primeiro nível formatado, vamos formatar
os cabeçalhos de segundo nível (<h2>). O procedimento é idêntico, mudando
apenas o selector de h1 para h2:
As propriedades e os valores que vamos utilizar também são os mesmos,

embora a cor seja ligeiramente diferente:
Repetimos o procedimento para os parágrafos (p), mas desta vez vamos utili-
zar a cor preta (#000000). Pode parecer esquisito que se defina a cor para
preto dado que, por omissão, é utilizado o preto quando não se especifica
nenhuma cor. Mas o problema, como iremos ver mais à frente, é que os ele-
mentos HTML herdam propriedades CSS dos elementos que são seus paren-
tes, e isso significa que se um elemento parente dos parágrafos (<body>, por
exemplo) tiver uma cor associada, então o parágrafo herdará essa cor.
11. CSS 283
Nesta altura a aparência da nossa página quemsomos.html é:
11.3.5 Utilização de cores

Na maior parte das vezes que temos de seleccionar uma cor na caixa de diá-
logo CSS RULE DEFINITION, o Dreamweaver apresenta uma ‘caixa’ de selecção
de cores, que, na gíria, se chama color picker (ou color chooser):
Podemos escolher uma cor da paleta de cores apresentada, ou utilizar a

pipeta para seleccionar qualquer cor que se encontre visível no ecrã. Se não
pretender escolher nenhuma cor tecle ESCAPE para fechar o color picker. Se
pretender limpar a escolha corrente de cor clique no botão DEFAULT COLOR:
Como a paleta de cores apresentada está limitada a 228 cores, o Dreamwea-

ver disponibiliza outras paletas para seleccionar a cor pretendida. Uma das
opções é o SYSTEM COLOR PICKER que pode ser invocado clicando no botão
COLOR WHEEL:
É invocada a paleta de cores do sistema operativo que está a ser utilizado

pelo web designer. No caso do Windows é:
Outras paletas de cores estão disponíveis a partir do menu que existe no

canto superior direito do color picker:
Destas 5 paletas adicionais que estão disponíveis, as duas primeiras, COLOR

CUBES e CONTINUOUS TONE, são web-safe, enquanto as outras três não o são.
Mas o que são paletas web-safe? Houve uma altura em que os computadores
apenas conseguiam colocar no ecrã 256 cores diferentes. Sempre que tives-
sem de utilizar uma cor que não existia na paleta de 256 cores, tinham de utili-
zar uma cor próxima que existisse na paleta ou utilizavam uma técnica cha-
mada dithering.
11. CSS 285
Foi criada uma paleta de 216 cores que foi designada como ‘standard’. Não se
utilizaram 256 cores, porque normalmente os sistemas operativos reservam
entre 16 e 20 cores para utilização própria. O número 216 também foi selec-
cionado porque permite 6 tonalidades de vermelho, verde e azul, que mistura-
das (6x6x6) dão as 216 cores.
Actualmente todos os computadores suportam 16 milhões de cores, por isso
as cores web-safe já não fazem qualquer sentido. A única razão para ainda se
utilizar cores web-safe é se estivermos a desenvolver páginas para smartpho-
nes ou outros equipamentos que estejam limitados a 256 cores.
Quando se escolhe uma cor no color picker o Dreamweaver converte a cor
num número hexadecimal composto por 3 letras e/ou algarismos, cada uma
das quais corresponde a uma cor do modelo RBG (Red, Green, Blue). Mas
normalmente são utilizadas 6 letras e/ou algarismos para identificar uma cor. A
conversão do modelo de 3 para 6 letras e/ou algarismos, faz-se duplicando
cada uma das letras e/ou algarismos. Por exemplo, se tivermos a cor #C62 o
equivalente em 6 letras e/ou algarismos é #CC6622.
Na notação hexadecimal utilizam-se os ‘algarismos’ de 0 a F
(0123456789ABCDEF), correspondendo o F ao 15. Não é necessário fazer
contas (deixamos isso para os informáticos), porque a maior parte dos pro-
gramas de desenho apresenta estes valores quando seleccionamos uma cor.
Uma alternativa menos utilizada, se bem que tenha ganho visibilidade com as
normas CSS3 e HTML5, e que é mais lógica para a maior parte dos web
designers, é utilizar valores entre 0 e 255 para cada uma das cores do modelo
RGB. Nesse caso, utiliza-se uma sintaxe do tipo:
rgb(vermelho, verde, azul)
como, por exemplo:
rgb(255,0,0)
que corresponde a vermelho, ou

rgb(192,192,255)
que corresponde a lilás.

Estes valores podem ser introduzidos directamente em qualquer campo COLOR:
Como podemos utilizar 256 valores distintos (0 a 255) para cada uma das
cores base, isso significa que podemos utilizar 16777216 cores
(256x256x256).
Existe ainda a possibilidade de utilizar o nome da cor em inglês, como red ou
green, se bem que só existe uma meia dúzia de nomes que podiam ser utili-
zados, mais exactamente 16, que foram definidos pela norma HTML 4.01. A
norma CSS2.1 juntou mais uma cor, o orange.
Os browsers modernos reconhecem muitos mais nomes de cores sobretudo
por causa da lista de cores definida na especificação CSS3.
11.4 Utilizar ids em estilos

Até agora quisemos aplicar sempre um determinado estilo a todas as ocorrên-
cias na página de um determinado elemento. Isto é, ao definirmos um estilo
para o selector p, estamos a formatar todos os parágrafos da mesma forma.
Mas existem ocasiões em que pretendemos definir um estilo CSS para aplicar
a um elemento específico na página, por exemplo, a uma imagem. Se utilizar-
mos o selector img, vamos afectar todas as imagens na página. A solução
está na utilização do id do elemento em causa.
Como já vimos em capítulos anteriores, o id é um atributo cujo valor identifica
de forma única um elemento na página. Por exemplo, o logótipo do nosso sítio
Web tem atribuído um id:
Antes de criarmos um estilo para o logótipo vamos primeiro retirar os atributos

que lhe estão associados, nomeadamente o H SPACE e o ALIGN. O primeiro
atributo deixa de ter valor e o segundo passa a ser DEFAULT:
11. CSS 287
Para criarmos um estilo CSS específico para esta imagem, seleccionamos a

imagem e depois clicamos no ícone NEW CSS RULE no painel CSS STYLES.
Como tínhamos a imagem seleccionada, o Dreamweaver automaticamente
percebeu que pretendíamos criar um selector do tipo ID:
Este tipo de selector começa por ‘#’ e, por omissão, o respectivo estilo aplica-
-se apenas a um único objecto na página. Embora possa existir mais de um
objecto na página com o mesmo id, tal não é aconselhável.
Para substituir os atributos H SPACE e ALIGN de HTML vamos utilizar as pro-
priedades margin e float, respectivamente:
O resultado é:
Mais uma vez não tivemos necessidade de aplicar o estilo CSS que criamos.
A propriedade float informa o browser que o objecto ao qual se aplica vai
flutuar para a esquerda ou para a direita. Todo o conteúdo da página que vir a
seguir à imagem vai-se colocar à esquerda ou direita da imagem, dependendo
do valor da propriedade.
Lista de estilos que criamos até agora:
11.5 Classes CSS

Continuando na página quemsomos.html, pretende-se agora colocar em
destaque o nome da empresa, AutoVende, sempre que ocorrer no texto. Já o
fizemos num capítulo anterior, mas apenas para a secção QUEM SOMOS, utili-
zando para isso o elemento <strong> do HTML.
Como queremos formatar o nome de forma especial, alterando inclusive a cor,
temos de recorrer a estilos CSS. Mas deparámo-nos com um problema. Não
só o nome da empresa não está rodeado de nenhum elemento HTML identifi-
cativo (se exceptuarmos as duas ocorrências do elemento <strong> que
definimos), como nenhuma das ocorrências tem associado um atributo id.
Claro está que podemos resolver o problema de uma destas duas formas.
Dica
Para remover um elemento HTML que esteja a envolver texto ou outro objecto,
selecciona-se o elemento no TAG SELECTOR,
E depois por cima do texto ou objecto acede-se ao menu de contexto (botão

direito do rato no Windows e CONTROL+CLIQUE no Macintosh) e selecciona-se
a opção REMOVE TAG:
11. CSS 289
Claro que, no nosso caso, é bem mais fácil de remover o elemento <strong>.
Basta seleccioná-lo e clicar no ícone no PROPERTY INSPECTOR, em modo
HTML.
Em primeiro lugar podíamos atribuir um elemento <strong> a todas as ocor-

rências do nome da empresa e depois criávamos um estilo CSS para strong.
Teríamos então o problema de não podermos utilizar mais o elemento
<strong> na página, porque iria herdar a formatação CSS.
A outra hipótese era atribuir um id (do tipo empresa1, empresa2,
empresa3, ...) a cada uma das ocorrências e depois definir um estilo para
cada um desses ids. Ou até fazer aquilo que dissemos que não devemos
fazer, que é utilizar o mesmo id para vários objectos na página.
Claro está que tem de existir uma solução mais fácil. E a solução é recorrer às
classes CSS, que são semelhantes aos estilos do Word.
Podemos utilizar os selectores do tipo classe em qualquer elemento na página
e as vezes que quisermos. A desvantagem é que temos de aplicá-las
manualmente, ao contrário dos selectores que utilizamos anteriormente. Qual-
quer objecto da página que possua um atributo class herda os estilos defini-
dos nessa classe.
Existem mesmo muitos web designers que apenas utilizam selectores deste
tipo, não sabendo sequer que os outros selectores existem.
Se já utilizou estilos no Word, sabe como funcionam. É um processo composto
por dois passos:
• Define-se a classe;
• Aplica-se a classe.
Para definir a classe utiliza-se o processo habitual de definição de estilos CSS.
Na caixa de diálogo NEW CSS RULE selecciona-se a opção CLASS no campo
SELECTOR TYPE:
No campo SELECTOR NAME temos de ser nós a atribuir um nome à classe que
tem de começar por um ponto:
Os nomes não podem ter espaços e sinais de pontuação, excepto o unders-

core (_), não podem começar por um algarismo, e deve-se evitar utilizar
caracteres acentuados e c cedilhados. Pode utilizar a chamada camel nota-
tion, que é do tipo nomeEmpresa, em que as palavras começam sempre por
maiúsculas, excepto a primeira que começa por minúsculas.
As propriedades e valores que vamos utilizar são:
Falta agora definir a que objecto da página é que queremos atribuir a classe.
Seleccionamos a primeira ocorrência do nome da empresa, mas desta vez
não utilizamos o TAG SELECTOR, recorrendo ao tradicional clicar-e-arrastar:
11. CSS 291
Agora, no PROPERTY INSPECTOR, estando no modo HTML, seleccionamos, na

lista que aparece no campo CLASS, a classe que pretendemos aplicar:
Note que, embora já tenhamos criado 5 estilos CSS apenas aparece um deles
na lista, dado que esta lista apenas lista as classes CSS. Com o tempo vai
verificar que o nome da classe aparece formatado com algumas das proprie-
dades que lhe estão associadas. No caso da nossa classe aparece a negrito
(bold).
O resultado é (aplicamos a classe a duas ocorrências da palavra AutoVende):
Convém que a página seja visualizada no browser ou em modo LIVE VIEW,

dado que o Dreamweaver não mostra as SMALL CAPS em modo DESIGN.
Em código:
<p>A <span class="nome_empresa">AutoVende</span> é uma
empresa que se dedica exclusivamente à comercialização
de automóveis usados multimarca, procurando oferecer a
melhor garantia de qualidade e o melhor preço. A <span
class="nome_empresa">AutoVende</span> procura propiciar
o mais vasto conjunto de viaturas de preferência dos
seus clientes, tendo disponíveis cerca de um milhar de
viaturas totalmente verificadas e recondicionadas
segundo criteriosa metodologia.</p>
Pode ficar surpreendido pelo facto do Dreamweaver ter inserido um elemento

<span> que nós não pedimos, mas é a única hipótese em HTML e CSS de
resolver o nosso problema. O elemento <span>, tal como acontece com o
elemento <div> que veremos num dos próximos capítulos, é um elemento
que não tem representação ‘física’ na página. Permite efectuar alterações em
parte do texto de um parágrafo.
11.6 Utilizar ficheiros CSS

Referimos anteriormente que uma das formas de tirar partido dos estilos CSS
era criar um ficheiro .css que é referenciado por todas as páginas do sítio
Web, mantendo assim um aspecto coerente.
Podemos criar um ficheiro .css utilizando a opção FILE > NEW, e depois
seleccionando a opção CSS na área PAGE TYPE:
Aparece um documento aberto no Dreamweaver com o seguinte conteúdo (já

atribuímos um nome, estilos.css, ao ficheiro):
A primeira linha, @charset "utf-8", define o tipo de codificação a utilizar

no ficheiro .css. Esta instrução só é necessária se for utilizar caracteres
acentuados ou c cedilhados nos nomes dos estilos.
A segunda linha, /* CSS Document */, é um comentário como pode ver
pela cor utilizada.
Podemos agora criar estilos CSS em modo CODE, já que este tipo de ficheiro
não permite a utilização do modo DESIGN. Mas também é possível utilizar o
painel CSS STYLES para criar os estilos CSS como fizemos anteriormente.
11.6.1 Exportar estilos para um ficheiro CSS

Seria boa ideia aproveitarmos os estilos que já criamos, nomeadamente o h1,
o h2 e o p. Uma das formas de o fazer seria ver a página quemsomos.html
em modo CODE e copiarmos (ou mover) o conteúdo do elemento <style>:
11. CSS 293
para o ficheiro estilos.css que criamos anteriormente:
Mas existe uma forma mais fácil de fazer esta operação, basta seleccionar, no
painel CSS STYLES, os estilos que se pretendem mover para um ficheiro CSS
externo,
e depois seleccionar a opção MOVE CSS RULES do menu de contexto (botão

direito do rato no Windows e CONTROL+CLIQUE no Macintosh):
No painel CSS STYLES utilize a tecla SHIFT para seleccionar estilos seguidos e
a tecla CTRL para seleccionar estilos não seguidos.
Aparece a caixa de diálogo MOVE TO EXTERNAL STYLE SHEET,
onde temos a possibilidade de mover os estilos seleccionados para um ficheiro

existente (opção STYLE SHEET) ou criar um novo ficheiro (opção A NEW STYLE
SHEET), sendo que neste caso nos é pedido um nome e uma localização para
o ficheiro.
Se movermos os estilos para o ficheiro estilos.css, agora o painel CSS
STYLES tem o seguinte conteúdo:
11. CSS 295
Isto acontece porque, além de o Dreamweaver ter movido os estilos do ficheiro

quemsomos.html para o ficheiro estilos.css, também criou, no ficheiro
quemsomos.html, uma referência ao ficheiro estilos.css, utilizando para
isso um elemento <link> de HTML, como pode verificar em código:
</style>
<link href="../estilos.css" rel="stylesheet"
type="text/css" />
</head>
11.6.2 Ligações a ficheiros CSS

A existência de um ficheiro CSS que possui estilos a serem utilizados em
todas as páginas no sítio Web obriga a que, sempre que for criada uma nova
página, se estabeleça uma ligação com esse ficheiro.
Tomemos como exemplo o ficheiro index.html que neste momento não
possui nenhum estilo CSS definido internamente. Para referenciarmos o
ficheiro estilos.css utilizamos o ícone ATTACH STYLE SHEET no painel CSS
STYLES:
Na caixa de diálogo ATTACH EXTERNAL STYLE SHEET seleccionamos, através

do botão BROWSE, o ficheiro .css que pretendemos referenciar na página:
A opção ADD AS: LINK cria o já nosso conhecido comando:

<link href="estilos.css" rel="stylesheet"
type="text/css" />
enquanto a opção ADD AS: IMPORT cria o seguinte comando,

@import url("estilos.css");
</style>
</head>
que pode aparecer misturado com estilos CSS internos da página, mas nesse
caso tem de ser o primeiro comando dentro do elemento <style>.
Este tipo de referenciação de ficheiros CSS externos utilizando o comando
import não é suportado pelos browsers mais antigos. Pode ser utilizado para
criar folhas de estilos modulares, isto é, cria-se diversos ficheiros .css, cada
um com o seu fim específico e depois utiliza-se o @import para referenciar os
ficheiros que pretendermos a partir de um único ficheiro .css.
Cada um destes métodos de referenciar um ficheiro CSS é apresentado de
forma diferente no painel CSS STYLES. No caso da opção LINK o aspecto é,
enquanto para a opção IMPORT:
O facto de agora o ficheiro index.html referenciar um ficheiro CSS externo,

pode ser verificado no topo da janela de documento:
Repare que, devido à inclusão de uma animação Flash, a página também refe-
rencia o ficheiro swobject_modified.js.
A partir do momento em que um ficheiro .css está referenciado numa página,
quando criamos um novo estilo CSS temos a possibilidade de informar o
Dreamweaver que pretendemos que o estilo seja criado nesse ficheiro:
11. CSS 297
Podemos aceder às propriedades do elemento <link> inserido na página

para referenciar o ficheiro CSS sem ter necessidade de aceder à vista Code.
Seleccione a opção VIEW > HEAD CONTENT para mostrar a barra HEAD:
O penúltimo ícone diz respeito ao elemento <link> e o último ícone diz res-
peito ao elemento <style>. Ao clicarmos no ícone associado ao elemento
<link>, aparecem as propriedades que podemos alterar no PROPERTY
INSPECTOR:
11.7 Cascading
Agora que temos os estilos h1, h2 e p no ficheiro estilos.css, todas as
páginas do nosso sítio Web podem usufruir desses estilos. Mas se repararmos
nestes três estilos, notamos que todos têm a seguinte propriedade:
Isto significa que, salvo raras excepções, o texto utilizado nas páginas do sítio
Web é deste tipo. Mas então podemos remover esta propriedade dos três
estilos e aplicá-la num estilo relativo a um elemento que é o pai de todos os
elementos numa página, o <body>:
h1 {
color: #DC000B;
}
body {
}
h2 {
font-weight: bold;
color: #BC0010;
}
p {
color: #000;
}
Quando criamos um novo estilo através do ícone NEW CSS RULE do painel
CSS STYLES, ele é inserido a seguir ao estilo que esteja seleccionado. Como
tínhamos o primeiro estilo seleccionado (o h1), o estilo body ficou logo a
seguir:
Como existe uma precedência na aplicação dos estilos, o ideal é o body ser o
primeiro estilo. Para isso, arrastamos o estilo body para entre a identificação
do ficheiro estilos.css e o estilo h1:
11.7.1 Propriedades da página

Já deve ter reparado que muitos elementos possuem no PROPERTY INSPECTOR
um botão PAGE PROPERTIES:
11. CSS 299
Este botão dá acesso a uma caixa de diálogo PAGE PROPERTIES que permite
definir um conjunto de propriedades CSS para diversos elementos na página:
A primeira categoria, APPEARANCE (CSS), permite definir propriedades CSS

para o elemento body. A segunda categoria, APPEARANCE (HTML), também
permite definir características desse elemento, mas recorrendo a atributos
HTML. Deve evitar utilizar esta categoria.
Já a terceira categoria, LINKS (CSS), define propriedades para todos os links
existentes na página, enquanto a quarta categoria, HEADINGS (CSS), define
propriedades para os cabeçalhos da página (h1, h2, h3, h4, h5 e h6).
Se mudarmos a cor de fundo da página,
o Dreamweaver cria um novo estilo body na página onde nos encontramos:
Repare que neste caso até foi criado um novo elemento style. Para o código
não ficar todo ‘baralhado’ e para evitar problemas, devemos passar este estilo
para o primeiro elemento <style> (basta arrastá-lo) e depois devemos elimi-
nar o elemento <style> que fica sem estilos.
No código, passamos a referência ao ficheiro estilos.css,
type="text/css" />
para antes do elemento <style>:

<head>
charset=utf-8" />
<title>AutoVende - Quem Somos</title>
type="text/css" />
#logotipo {
float: left;
margin-right: 35px;
}
Qualquer referência a um ficheiro CSS através do elemento <link> deve

aparecer antes do elemento <style>.
11.7.2 Estilos inline, internos e externos

As três possibilidades de definir estilos CSS são:
• Ficheiro externo CSS que é referenciado por um elemento <link>
numa página Web;
• Estilos internos que são definidos dentro do elemento <style> da
área <head>;
11. CSS 301
• Estilos inline que são definidos no próprio elemento e que utilizam o

atributo style.
Vamos exemplificar a utilização de estilos CSS inline, já que utilizamos ante-
riormente as duas primeiras possibilidades.
Os estilos inline são definidos e aplicados directamente nos elementos. Na
página quemsomos.html, temos uma secção de opiniões de clientes:
Para formatar a aparência do comentário, podíamos criar uma classe que

seria aplicada a todos os comentários. Ou podíamos atribuir um id a esta opi-
nião (já que só existe uma opinião) e criar um estilo específico do id.
A definição e aplicação de um estilo inline faz-se através do PROPERTY INSPEC-
TOR utilizando o modo CSS (também pode utilizar a vista Code para o fazer):
Repare que se colocar o cursor no meio do parágrafo que define a opinião do

cliente, aparece seleccionado o elemento p no campo TARGETED RULE. Não é
este estilo que pretendemos, dado que este corresponde ao estilo definido no
ficheiro estilos.css, como pode comprovar se deixar ficar o cursor por
cima do campo:
Temos então de aceder ao menu associado ao campo TARGETED RULE, e

seleccionar a opção <NEW INLINE STYLE>:
Agora podemos utilizar os diversos campos de formatação existentes no

PROPERTY INSPECTOR para formatar o comentário do cliente:
Em alternativa, podemos utilizar o botão EDIT RULE,
para aceder à já nossa conhecida caixa de diálogo CSS RULE DEFINITION:
Vamos só colocar o texto em itálico, atribuindo o valor italic à propriedade

font-style:
No código HTML:
<p style="font-style: italic">"Estou muito
satisfeito com o automóvel que comprei na
AutoVende. Nunca me deu qualquer tipo de problema,
e tenho efectuado as revisões nas oficinas da
empresa."</p>
11. CSS 303
Nos estilos inline é utilizado o atributo style para definir e aplicar estilos CSS.
11.7.3 Precedência
Se visualizar agora o menu associado ao campo TARGETED RULE, com o
comentário seleccionado, poderá verificar que existem três estilos na área
CASCADE. Nesta área, o Dreamweaver lista todos os estilos CSS que são apli-
cados ao elemento corrente/seleccionado, sendo a ordem a da definição:
Isto significa que são aplicadas as seguintes propriedades ao parágrafo que

contém o comentário do cliente:
• body – definido no ficheiro estilos.css. Possui a seguinte proprie-
dade:
• p – definido no ficheiro estilos.css. Possui a seguinte propriedade:

color: #000;
• <inline style> – definido no próprio elemento. Possui a seguinte

propriedade:
font-style: italic;
Existe uma relação hierárquica de todos os elementos HTML existentes numa

página, sendo o ‘avô’ de todos os elementos, o <html>, e o pai de todos os
elementos o <body>. Lembre-se da estrutura de uma página HTML:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Por isso, quando se definem propriedades para o elemento <body>, elas são
herdadas por todos os elementos da página, excepto os que se encontram na
secção <head>.
Além disso, o comentário do cliente também herda a propriedade aplicada a
todos os parágrafos da página, dado que o comentário se encontra dentro de
um parágrafo.
Mas o que acontece se alterarmos a cor e/ou o tipo de letra ao nível do estilo
inline:
Como o estilo inline está mais próximo do elemento é o que tem precedência
sobre os outros.
Como regra geral a ordem de preferência na aplicação de estilos (cascading)
é:
• Estilos inline
• Estilos internos ou embedded
• Estilos externos
Partindo deste pressuposto se pretendermos que todos os parágrafos de uma
determinada página tenham uma cor diferente, basta definir um estilo interno
nessa página:
<head>
p {
color: #333;
}
</style>
</head>
Esta cor vai-se sobrepor à cor que é definida no ficheiro externo esti-
los.css.
A noção de precedência e cascading permite que tenhamos estilos globais em
ficheiros CSS externos e depois possamos ‘alterar’ alguns desses estilos glo-
bais localmente em páginas específicas.
Como nota final, o facto de não ser aconselhável a utilização de estilos inline
dado que provocam muitas dores de cabeça quando se pretende alterar o
valor de uma propriedade em muitos desses estilos. São contudo muito utili-
11. CSS 305
zados quando se trabalha com páginas dinâmicas, em que o conteúdo HTML

é criado ‘na hora’.
11.8 Selectores descendant

Vamos acrescentar outra opinião à nossa secção «Opiniões dos clientes»:
O mais lógico é colocar o cursor no fim de «Pedro Remoaldo» e carregar em
ENTER (ou RETURN) para criar um novo parágrafo, e depois escrever a opinião:
Como aplicamos o estilo directamente ao elemento parágrafo que contém a

primeira opinião, esta nova opinião não fica formatada da mesma forma. Con-
vinha termos alguma coerência, por isso vamos ter de efectuar algumas alte-
rações.
Temos duas possibilidades:
• removemos o estilo inline do parágrafo que contém a primeira opinião
e depois criamos num novo estilo;
• ou convertemos o estilo inline num estilo interno;
O Dreamweaver não possui um método que permita remover os estilos inline
de parágrafos. Mas podemos aproveitar, em modo CODE, o mecanismo de
FIND/REPLACE:
Primeiro seleccionamos o valor SPECIFIC TAG na opção SEARCH, e em seguida

escolhemos o valor [ANY TAG] na lista que aparece a seguir. Podíamos ter
escolhida nesta lista o valor p (para parágrafos). Esta primeira selecção de
valores indica ao Dreamweaver que pretendemos pesquisar em qualquer ele-
mento da página.
Depois em WITH ATTRIBUTE, selecciona-se STYLE e [ANY VALUE]. Aqui informa-
-se o Dreamweaver que pretendemos apenas localizar os elementos que pos-
suam um atributo style independentemente do seu valor.
Finalmente, definimos que acção pretendemos efectuar. No campo ACTION
selecciona-se REMOVE ATTRIBUTE e depois STYLE. Clicando no botão REPLACE
ALL o Dreamweaver remove todos os atributos style de todos os elementos
da página e apresenta uma lista com as ocorrências eliminadas:
Por acaso, no nosso exemplo apenas temos um único elemento com o atributo
style e é esse elemento que pretendemos alterar.
Podemos ser mais específicos jogando com as opções SEARCH e WITH
ATTRIBUTE.
Mas talvez seja mais lógico converter o estilo inline para um estilo interno.
Seleccione o parágrafo que contém a primeira opinião e depois, no menu de
contexto (botão direito do rato no Windows e CONTROL+CLIQUE no Macintosh),
escolha a opção CSS STYLES > CONVERT INLINE CSS TO RULE:
Aparece uma caixa de diálogo CONVERT INLINE CSS:

11. CSS 307
Na primeira lista, CONVERT TO, temos de decidir se pretendemos criar uma

nova classe (A NEW CSS CLASS), aplicar as propriedades a todos os elementos
p (ALL PTAGS) ou criar um novo selector CSS (A NEW CSS SELECTOR):
Vamos optar por criar um novo selector que possui a seguinte identificação:
À primeira vista este selector pode parecer esquisito, dado que é composto
por dois elementos HTML separados por um espaço. Mas o que isto significa é
que existe uma relação hierárquica entre os dois elementos. Este selector sig-
nifica: «aplica o estilo a todos os parágrafos que se encontrem dentro de um
elemento <blockquote>». O estilo não será aplicado a outros parágrafos da
página. Relembre-se que as opiniões estão contidas dentro de um elemento
<blockquote>:
<h2><a name="opinioesdosclientes"
id="opinioesdosclientes"></a>Opiniões dos
clientes</h2>
<p>Algumas das opiniões dos nossos clientes:</p>
<blockquote>
<p>"Estou muito satisfeito com o automóvel que
comprei na AutoVende. Nunca me deu qualquer tipo de
problema, e tenho efectuado as revisões nas
oficinas da empresa."</p>
<p>Pedro Remoaldo</p>
<p>"Embora inicialmente tenha ficado satisfeita
com o automóvel que comprei na AutoVende,
posteriormente tive alguns problemas com ele, mas
que foram prontamente resolvidos, dentro da
garantia."</p>
<p>Elsa Bessa</p>
</blockquote>
Em CSS este tipo de selector chama-se um descendant selector.

Na caixa de diálogo CONVERT INLINE CSS temos de decidir onde vamos colo-
car o estilo. Como o estilo vai ser específico da página corrente, selecciona-
mos a opção THE HEAD OF THIS DOCUMENT:
No painel CSS Styles podemos verificar que foi acrescentado um novo estilo,
blockquote p, ao elemento <style> da página:
O resultado é:
Mas, e se existissem outros elementos <blockquote> na página? Os pará-

grafos existentes dentro desses elementos também ficariam com esta forma-
tação. Para o evitarmos, vamos primeiro atribuir um id ao blockquote que
está associado às opiniões dos clientes:
11. CSS 309
E agora alteramos o nome do estilo que criamos anteriormente. Clique no

estilo no painel CSS Styles e seleccione a opção EDIT SELECTOR do menu de
contexto:
Pode alterar directamente o nome do estilo sem passar por este menu, cli-
cando no estilo, esperando 1 segundo, e depois voltando a clicar. Ou ainda em
alternativa, após clicar no estilo, teclar F2.
Vamos mudar o nome do estilo para:
Muitos peritos em CSS acham que se deve sempre qualificar o elemento que
está associado a um selector do tipo id, o que implicaria um nome de estilo:
blockquote#opinioes p
Não notará nenhuma diferença no aspecto da página.

11.9 Activar e desactivar propriedades CSS

Com a versão CS5 do Dreamweaver a Adobe disponibilizou uma nova funcio-
nalidade, CSS Enable/Disable, que permite aos web designers fazerem expe-
riências em tempo real com as propriedades dos estilos CSS.
Até esta versão a única forma de se ir testando as propriedades quando se
estava a criar um estilo era utilizar o botão APPLY da caixa de diálogo CSS
RULE DEFINITION:
Se gostássemos da alteração bastava clicar em OK para ela ficar permanente.

Senão repúnhamos o valor original da propriedade.
Com a versão CS5 podemos utilizar o painel CSS STYLES para activar e
desactivar propriedades. Com o estilo pretendido em selecção, basta colocar o
cursor atrás da propriedade que se pretende desactivar que aparece um sinal
de proibido:
Ao clicar no ícone a propriedade fica desactivada e pode-se assim ver o efeito

que essa desactivação tem no aspecto de um elemento ou da página.
O ícone de proibição fica ao lado do nome da propriedade enquanto esta esti-
ver desactivada, e o nome da propriedade fica a cinzento:
11. CSS 311
Em código, as propriedades desactivadas são identificadas por um comentário

que possui [disabled] no início:
#opinioes p {
font-style: italic;
/* [disabled]font-family: 'Times New Roman', Times,
serif; */
color: #333;
}
Deve evitar remover o comentário em código, dado que se se esquecer de

remover o [disabled], a propriedade não será aplicada.
O ideal é voltar a clicar no ícone ‘proibido’ para ele desaparecer e assim a
propriedade voltar a ficar activa.
Se, por acaso verificar que realmente a propriedade não era necessária, pode
removê-la teclando DELETE quando ela estiver seleccionada. Contudo, se pos-
suir muitas propriedades desactivadas, para as activar ou eliminar todas
recorra ao menu de contexto (botão direito do rato no Windows e CON-
TROL+CLIQUE no Macintosh):
Deve-se remover ou activar as propriedades desactivadas quando tiver aca-

bado de trabalhar com o respectivo estilo, para evitar confundir outras pessoas
ou acrescentar lixo aos ficheiros.
11.10 Informação sobre os estilos CSS de um elemento

Quando um objecto da página está seleccionado é útil saber que propriedades
CSS lhe estão aplicadas. Para o sabermos podemos recorrer à opção CUR-
RENT do painel CSS STYLES:
Agora o painel CSS Styles está dividido em três partes:

• SUMMARY FOR SELECTION – esta área apresenta as propriedades que
efectivamente estão aplicadas ao elemento seleccionado, e que po-
dem ser provenientes de diversos estilos CSS.
• RULES – lista os estilos CSS que possuem propriedades que podem
afectar o elemento seleccionado. As da parte de baixo desta lista são
as mais específicas e sobrepõem-se às do início da lista.
• PROPERTIES FOR – seleccionando um estilo na área RULES, aparecem
aqui listadas as propriedades que o constituem.
Na área SUMMARY FOR SELECTION para sabermos a que estilo CSS é que per-
tence uma determinada propriedade basta passar o rato por cima:
Repare que na área PROPERTIES aparecem algumas propriedades com o

nome riscado. Isso significa que embora pudessem afectar o elemento selec-
cionado, por alguma razão não o afectam.
Se colocarmos o cursor por cima da propriedade riscada, o Dreamweaver
apresenta-nos a razão:
11. CSS 313
Neste caso, existe um estilo CSS, o #opinioes p, que define a mesma pro-
priedade, font-family, e como é um estilo interno tem precedência sobre o
estilo externo.
11.10.1 CODE NAVIGATOR

Existe outra forma rápida de obter a lista de propriedades e estilos aplicados a
um determinado objecto da página. Clicando num objecto da página (não
necessita de o seleccionar caso seja texto) e esperando um segundo ou dois,
verá aparecer um ícone que parece um leme de um navio:
Se passar o cursor por cima desse ícone, o Dreamweaver informa que se cli-
car nesse ícone aparecerá o CODE NAVIGATOR:
Clicando no ícone, aparece uma lista,
com os estilos que estão a afectar o objecto seleccionado e os ficheiros onde

estes estilos se encontram.
Ao passar o cursor por cima de um estilo, aparece a lista das propriedades
que lá estão definidas:
No CODE NAVIGATOR, os estilos estão ordenados do mais próximo do elemento

(que no nosso caso é #opinioes p) para o mais afastado. Isto significa que
se uma propriedade no topo da lista entrar em conflito com uma propriedade
no fundo da lista, a propriedade no topo da lista ‘ganha’.
Se não quiser o CODE NAVIGATOR, por passar a vida a aparecer, pode desac-
tivá-lo seleccionando a opção DISABLE no canto inferior direito:
Mas se ele estiver desactivado como é que o utiliza? Utilizando o atalho

(ALT+CLIQUE no Windows e COMMAND+OPTION+CLIQUE no Macintosh) tal como
aparece descrito no canto inferior esquerdo:
Mal se põe o cursor por cima de um estilo, aparece um link associado:
Ao clicar no link vamos aceder ao estilo em duas localizações distintas:

11. CSS 315
No lado esquerdo acede em código ao estilo CSS, que pode estar num ficheiro
CSS. No lado direito, a regra em causa é seleccionada no painel CSS STYLES.
11.10.2 Modo INSPECT

Vimos num capítulo anterior a funcionalidade de LIVE VIEW do Dreamweaver
que, através da utilização do moto de rendering WebKit permite ver, em modo
DESIGN, as nossas páginas como se estivéssemos num browser.
Na versão CS5, o Dreamweaver possui uma nova funcionalidade que pode ser
utilizada em conjunto com o LIVE VIEW para ver em tempo real os estilos que
estão associados a elementos da página. Essa funcionalidade chama-se
INSPECT MODE e é activada clicando no botão INSPECT da barra DOCUMENT:
Como o próprio tooltip indica, também é activada a LIVE VIEW quando se clica
no botão INSPECT.
Aparece normalmente uma mensagem abaixo da barra NAVIGATION,
com dois links associados. Clicando no link MORE INFO, ficamos a saber a
razão da mensagem:
O Dreamweaver está a aconselhar-nos a activar certas funcionalidades, por-

que o modo INSPECT funciona melhor assim. Clicando no botão SWITCH ou no
link SWITCH NOW na mensagem original, as funcionalidades são activadas e
temos assim a seguinte interface:
Isto é, no lado esquerdo aparece uma vista CODE em que está seleccionado o
código referente ao elemento corrente. No meio aparece a vista Design em
que se pode ‘seleccionar’ elementos passando o cursor por cima. E no lado
direito o painel CSS STYLES está aberto em modo CURRENT.
A função do modo INSPECT é possibilitar ver rapidamente os estilos que estão
associados a um determinado elemento da página. Basta passar o cursor por
cima desse elemento na vista DESIGN, para os estilos respectivos aparecerem
no painel CSS STYLES, e para o código aparecer seleccionado na vista CODE.
Na vista DESIGN o Dreamweaver utiliza cores específicas para assinalar as
propriedades que estão associados ao chamado CSS box model, e que
incluem margin, padding e border.
Por exemplo, se passarmos o cursor por cima do logótipo,
podemos ver que o elemento é colocado num rectângulo azul turquesa (cyan),
enquanto a margem é identificada pela cor verde amarelado.
Se fizermos o mesmo processo para um cabeçalho de nível 2 (isto é, um ele-
mento <h2>),
11. CSS 317
vemos a cor azul turquesa para o conteúdo, a cor verde amarelado para as
margens intrínsecas do cabeçalho e a cor lilás para o padding-bottom de 5
píxeis entre o conteúdo e a moldura (border).
Este modo INSPECT permite assim descobrir muitas vezes porque é que deter-
minados elementos estão afastados um do outro.
Quando se passa o rato por cima de um elemento, ele fica identificado com as
cores e podemos efectuar alterações no painel CSS STYLES que elas serão
repercutidas imediatamente nas duas vistas. Neste caso continuamos em mo-
do INSPECT.
É também possível clicar num determinado elemento para a selecção ficar
bloqueada e podermos fazer alterações aos valores das propriedadas CSS
sem correr o risco de mudarmos de elemento inadvertidamente, mas neste
caso saímos do modo INSPECT, embora continuemos em modo LIVE VIEW.
Outra funcionalidade deste modo é a possibilidade de identificar o elemento
parente de um elemento. Quando o elemento está seleccionado, isto é,
quando o cursor está por cima dele, se carregarmos na tecla seta esquerda
(Í), o elemento pai ficará em realce.
Por exemplo, se estivermos com o cursor por cima do item HABITÁCULO e car-
regarmos na tecla seta esquerda (Í), ficará em realce a lista (isto é, o ele-
mento <UL>) a que o item pertence:
Para voltar ao item tecle seta direita (Î) ou mova o cursor.

O modo INSPECT é especialmente útil para páginas cujo conteúdo é gerado por
JavaScript ou por uma linguagem server-side, como o PHP ou o ColdFusion,
dado que permite visualizar e editar rapidamente os estilos CSS de conteúdo
que não está visível nas vistas CODE e DESIGN.
Para sair do modo INSPECT basta clicar outra vez no respectivo botão. Mas
tenha em atenção que não sairá do modo LIVE VIEW.
11.11 Preferências na utilização de CSS

O Dreamweaver permite configurar a forma como as CSS são utilizadas no
seu ambiente de trabalho. Esta configuração pode ser definida para o código
ou para o ambiente de design.
11.11.1 Preferências para o código

Acedemos à opção EDIT > PREFERENCES (DREAMWEAVER > PREFERENCES no
Macintosh), e depois, na caixa de diálogo PREFERENCES, clica-se na categoria
CODE COLORING:
Em seguida clica-se no botão EDIT COLORING SCHEME para aceder a outra

caixa de diálogo, EDIT COLORING SCHEME FOR CSS, em que se pode configurar
as cores que são atribuídas a cada componente dos estilos CSS:
11. CSS 319
A categoria CODE FORMAT também possui diversas opções de configuração

dos estilos CSS em código:
Na área ADVANCED FORMATTING clica-se no botão CSS para aceder à caixa de

diálogo CSS SOURCE FORMAT OPTIONS, que define como é que as CSS são
formatadas:
11.11.2 Outras preferências

Outro tipo de preferências é configurado através da categoria CSS STYLES da
caixa de diálogo PREFERENCES:
A shorthand notation tem a ver com a forma como o Dreamweaver escreve

propriedades que estão relacionadas entre si. Por exemplo, se pretendermos
definir uma margem igual para todos os lados de um determinado objecto, o
Dreamweaver criaria quatro propriedades distintas se, na caixa de diálogo
CSS RULE DEFINITION, não seleccionássemos a opção SAME FOR ALL:
11. CSS 321
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
Ao activar a opção MARGIN AND PADDING na área USE SHORTHAND FOR,
e mesmo que nos esquecêssemos de seleccionar a opção SAME FOR ALL, o

Dreamweaver criaria apenas uma única propriedade:
margin: 10px;
Já a área WHEN DOUBLE-CLICKING IN CSS PANEL define o que acontece quando

efectuamos um duplo-clique em cima de um estilo no painel CSS STYLES. Por
omissão (valor EDIT USING CSS DIALOG), aparece a caixa de diálogo CSS RULE
DEFINITION, com os valores das propriedades que fazem parte do estilo:
Se escolhermos a opção EDIT USING PROPERTIES PANE, o valor da primeira

propriedade do estilo entra em modo de edição na área PROPERTIES do painel
CSS STYLES:
Finalmente, a opção EDIT USING CODE VIEW, coloca a área do documento em

modo SPLIT, aparecendo o painel de código com o documento em que o estilo
se encontra:
11.12 Barra STYLE RENDERING

Por omissão o Dreamweaver apresenta o design da sua página (e os respecti-
vos estilos CSS) para o tipo de média screen, isto é, para o ecrã. As alterna-
tivas são:
• print – mostra como é que a página aparece em papel quando
impressa;
• handheld – mostra como é que a página aparece num equipamento
móvel como um telemóvel;
• projection – mostra como é que a página aparece num equipa-
mento de projecção, como um videoprojector;
• TTY – mostra como é que a página aparece numa máquina teletype,
um tipo de ‘máquina de escrever’ completamente obsoleta há já alguns
anos.
• TV – mostra como é que a página aparece num televisor.
Como é óbvio, além do tipo de média screen, que é o mais comum, os outros
são pouco ou nunca utilizados. O tipo de média print dá muito jeito quando
se tem uma página demasiado complexa e com muitas cores e se pretende
simplificá-la para poder ser impressa.
A barra STYLE RENDERING que, por omissão, está escondida, contém botões
que permitem ver como é que as nossas páginas aparecem em diferentes
tipos de média, caso se utilizem folhas de estilos específicas para cada média.
11. CSS 323
Esta barra pode ser visualizada seleccionando a opção VIEW > TOOLBARS >
STYLE RENDERING,
ou clicando com o botão direito do rato (CONTROL+CLIQUE no Macintosh) em

cima de uma das barras que estejam visíveis:
A aparência da barra é:
Os primeiros seis botões têm a ver com tipos de média: screen, print, han-
dheld, projection, TTY e TV. O botão seguinte ( ) permite mostrar a
página com as CSS activadas ou com as CSS desactivadas. A seguir, aparece
o botão que permite aceder à definição de DESIGN-TIME STYLE SHEETS, que
abordaremos na secção seguinte. Os três botões seguintes permitem aumen-
tar ou diminuir o tamanho da letra de todo o texto da página, mas sem alterar
nenhuma propriedade CSS. Finalmente, os últimos cinco botões são utilizados
principalmente com links e serão abordados no capítulo seguinte.
Neste momento, se clicar em qualquer um dos seis primeiros botões da barra
STYLE RENDERING a página que aparece no ecrã não mudará. Isso acontece
porque não só não existe nenhum estilo CSS definido especificamente para
um tipo de média, como o elemento <link> que referencia o ficheiro de esti-
los CSS utilizado por todas as páginas do nosso sítio Web não tem a proprie-
dade media definida:
type="text/css" />
Podemos acrescentar essa propriedade na vista CODE, ou com a barra HEAD

visível (utilizar a opção VIEW > HEAD CONTENT),
clicamos no ícone que representa o elemento <link>, e depois selecciona-

mos a opção MODIFY > EDIT TAG. Na caixa de diálogo TAG EDITOR, acedemos à
categoria HTML 4.0 e, no campo MEDIA, inserimos o valor screen:
Repetimos a operação para o elemento <style>:
Em HTML os dois elementos alterados têm agora a seguinte aparência:

type="text/css" media="screen" />
<style type="text/css" media="screen">
Partindo de uma página que tem o seguinte aspecto com os estilos CSS apli-
cados para o tipo de média screen,
11. CSS 325
se clicarmos agora num ícone de tipo de média da barra STYLE RENDERING,

excepto no tipo de média screen, a aparência da página será:
Fazendo o PRINT PREVIEW da página no Firefox:
Neste caso, não criamos um conjunto de estilos CSS específico para o tipo de
média print. O que fizemos foi definir um tipo de média (screen) para os
estilos existentes. O efeito secundário desta acção foi que todos os tipos de
média, excepto o screen, deixaram de ter estilos CSS associados.
Mas podemos criar um conjunto de estilos específico para o tipo de média

print. Vamos então criar um novo ficheiro .css utilizando a opção FILE >
NEW para abrir a caixa de diálogo NEW DOCUMENT e depois, na coluna PAGE
TYPE, seleccionamos CSS. Aparecerá um ficheiro CSS sem conteúdo (excepto
a primeira linha que define a codificação):
Vamos atribuir um nome ao ficheiro, print_quemsomos.css, e fechá-lo. Em

seguida referenciamos este ficheiro na nossa página quemsomos.html utili-
zando o ícone ATTACH STYLE SHEET no painel CSS STYLES:
Na caixa de diálogo ATTACH EXTERNAL STYLE SHEET, depois de termos selec-

cionado o ficheiro print_quemsomos.css, temos de assegurar que esco-
lhemos a opção PRINT no menu MEDIA:
Repare que este menu possui mais dois tipos de média, aural e braille
(utilizados para sintetizadores de fala/som e para equipamentos braille, res-
pectivamente), além do all que abrange todos os tipos de média.
Como vamos criar estilos para o tipo de média print, clicamos no respectivo
ícone na barra STYLE RENDERING.
11. CSS 327
Uma das nossas primeiras acções vai ser remover o menu de links, que não
faz qualquer sentido numa página impressa. Este menu de links que vamos
estilizar no próximo capítulo, está dentro de um elemento <div> que tem o id
conteudo.
Definimos um selector do tipo id, chamado #conteudo, e no campo RULE
DEFINITION não podemos esquecer-nos de seleccionar o ficheiro print_
quemsomos.css:
A única propriedade que vamos manipular é a propriedade display, atri-

buindo-lhe um valor none, isto é, vamos ‘esconder’ o menu de links:
Se reparar agora na página, o menu desapareceu:

Podemos agora definir mais estilos CSS de forma a criar uma página que
tenha bom aspecto quando for impressa. Algo que deve ter em mente é que
as unidades utilizadas em documentos impressos são os points e não os
pixels.
O ficheiro .css que criamos para o tipo de média print também pode ser
aproveitado para outros tipos de média. Nesse caso, temos de atribuir à pro-
priedade media do elemento <link> a lista de tipos de média separados por
vírgulas, como, por exemplo:
media="print, handheld"
Caso pretenda aplicar um ficheiro .css, ou um conjunto de estilos (através do

elemento <style>) a todos os tipos de média, omita o atributo media, ou
mais correctamente atribua-lhe o valor all.
A utilização de tipos de média pressupõe uma estruturação correcta da página
em HTML e a utilização preferencial de ficheiros CSS para conterem os estilos
CSS. É fácil de perceber que se utilizarmos estilos inline nas nossas páginas
(através do atributo style dos elementos) teremos problemas na utilização de
tipos de média.
11.13 Design-Time style sheets

O Dreamweaver permite que se utilizem temporariamente ficheiros CSS numa
página sem ter de os referenciar com um elemento <link>. Isto é, podemos
ver como é que determinados estilos CSS existentes num ficheiro CSS afec-
tam a página corrente, sem ter de os ‘ligar’ à página.
Esta funcionalidade é uma forma de alternar rapidamente entre folhas de esti-
los numa página Web para explorar cenários alternativos, antes de aplicar
essas folhas de estilos.
As folhas de estilos design-time apenas são utilizadas quando se está a tra-
balhar com as páginas no Dreamweaver. Quando as páginas são visualizadas
num browser, apenas são utilizados os estilos definidos em ficheiros CSS liga-
dos às páginas, os estilos definidos em elementos <style>, e os estilos
inline.
Na barra STYLE RENDERING existe um botão que permite aceder à definição de
DESIGN-TIME STYLE SHEETS:
11. CSS 329
Pode-se utilizar, em alternativa, a opção FORMAT > CSS STYLES > DESIGN-TIME,
ou a opção DESIGN-TIME do menu de contexto do painel CSS STYLES.
Em qualquer dos casos aparecerá a caixa de diálogo DESIGN-TIME STYLE
SHEETS:
Clique no botão + na área SHOW ONLY AT DESIGN TIME para seleccionar um

ficheiro CSS que pretenda aplicar temporariamente à página corrente. Caso já
possua um ficheiro CSS associado à página, então seleccione-o na área HIDE
AT DESIGN TIME para não interferir com os estilos que pretende testar.
Para remover qualquer ficheiro das duas listas, basta seleccioná-lo e clicar no
botão -.
11.14 Verificar a compatibilidade do browser

Como já foi referido anteriormente, browsers diferentes possuem formas dife-
rentes de interpretar e apresentar código HTML e estilos CSS. Muitas vezes
criamos uma página que tem um aspecto fantástico no Firefox, mas que no
Internet Explorer parece que foi criada por um ‘amador’.
O botão LIVE CODE tem associado o menu CHECK BROWSER COMPATIBILITY,
que permite efectuar uma análise à página corrente para detectar possíveis
problemas com determinados browsers. As mensagens aparecem no separa-
dor BROWSER COMPATIBILITY do painel RESULTS:
Existem três níveis de problemas potenciais:

• Um erro que assinala código CSS que pode provocar um problema
grave visível para o visitante num determinado browser como, por
exemplo, o desaparecimento de partes da página.
• Um aviso que assinala código CSS que não é suportado num determi-
nado browser, mas que não provoca problemas graves na visualização
da página.
• Uma mensagem informativa que assinala código que não é suportado
num determinado browser, mas que não tem qualquer efeito visível.
Tenha em atenção que esta verificação da compatibilidade não altera a página
corrente.
Na opção SETTINGS do menu CHECK BROWSER COMPATIBILITY é possível verifi-
car (e alterar) a lista de browsers (e respectivas versões) que o Dreamweaver
utiliza para efectuar os testes:
No menu CHECK BROWSER COMPATIBILITY a opção CHECK CSS ADVISOR

WEBSITE FOR NEW ISSUES permite aceder a um sítio Web disponibilizado pela
Adobe que contém informação sobre os últimos problemas surgidos com os
browsers ao nível da compatibilidade com as normas, sobretudo com as CSS.
12 Formatar texto com CSS
A maior parte do conteúdo dos sítios Web é composta maioritariamente por

texto. Por isso não admira que existam muitas propriedades CSS que têm por
objectivo a formatação de texto.
O Dreamweaver agrupa, na caixa de diálogo CSS RULE DEFINITION, a maior
parte das propriedades CSS específicas de texto nas categorias TYPE e
BLOCK:
12.1 Famílias de tipos de letra

Uma das primeiras decisões que se tem de tomar quando se define um estilo
a aplicar ao texto é o tipo de letra que se pretende utilizar.
Esta pode parecer uma decisão fácil de tomar sobretudo porque a maior parte
das pessoas estão habituadas a utilizar o Microsoft Word ou outro processador
de texto, que lista os tipos de letra que estão instaladas no sistema operativo e
que por isso podem ser utilizados no nosso documento.
Mas numa página Web o problema reside no facto de não sabermos que tipos
de letra estão instalados no computador do visitante do nosso sítio Web, já
que diferentes sistemas operativos (Windows, Mac OS e Linux), possuem dife-
rentes tipos de letra instalados por omissão.
Estamos então restringidos a utilizar famílias de tipos de letra standard. Como
o HTML não guarda informação sobre tipos de letra, uma página Web
depende do facto do computador do visitante possuir a fonte instalada. Se a
fonte não estiver disponível é utilizada outra.
Isto significa que se utilizarmos o tipo de letra Cambria, que é fornecida com o
Windows Vista e o Windows 7 (e com o Microsoft Office 2007 e o Microsoft
Office 2008 for Mac), sabemos que os utilizadores destes sistemas operativos
conseguem ver o texto formatado tal qual o web designer imaginou. Mas e se
o visitante utilizar o Windows XP? Ou o Mac OS? Neste caso, o browser vai
utilizar um tipo de letra de sistema, o que pode provocar resultados inespera-
dos.
Com as CSS pode definir que tipo de letra deve ser utilizada, e caso não
exista, que tipo de letra alternativo deve ser utilizado. Se só definir um único
tipo de letra, e se o sistema operativo do visitante não o tiver instalado, então
este utiliza o seu tipo de letra por omissão, sobre a qual não temos controlo.
Para resolver este problema utilizam-se as chamadas listas de famílias de
tipos de letra (em inglês font stack). Quando acedemos à lista associada ao
campo FONT-FAMILY na caixa de diálogo CSS RULE DEFINITION, aparecem listas
de tipos de letra:
12. FORMATAR TEXTO COM CSS 333
E a última opção é maioritariamente serif ou sans serif.
12.1.1 Serif e sans-serif

Em tipografia, as serifas (serif em inglês) são pequenos traços e prolonga-
mentos que ocorrem no fim das hastes das letras. Por exemplo, no caso do
TIMES NEW ROMAN:
CENTRO
As famílias tipográficas sem serifas são conhecidas como sans-serif. Um
exemplo de um tipo de letra sans-serif é o ARIAL:
CENTRO
Tradicionalmente, os textos serifados são usados em blocos de texto pois as
serifas tendem a guiar o olhar através do texto. O ser humano lê palavras ao
invés de letras individuais, e as letras serifadas parecem juntar-se devido aos
seus prolongamentos, unindo as palavras.
Por outro lado, os tipos sem-serifa costumam ser usados em títulos e chama-
das, pois valorizam cada palavra individualmente e tendem a ter maior peso e
presença para os olhos, já que parecem mais limpos.
Porém, a utilização de tipos de letra serifados em texto de páginas Web não é
aconselhável dado que a resolução actual dos monitores de computador não
permite que as letras fiquem com bom aspecto visual, mesmo utilizando técni-
cas como o anti-aliasing.
12.1.2 Font stacks

O Dreamweaver disponibiliza no campo FONT-FAMILY os font stacks mais
habituais das páginas Web. Cada font stack é constituído por mais de um tipo
de letra de forma a abranger o maior número de sistemas operativos. Vejamos
um exemplo, que é um dos utilizados nas páginas Web:
Arial, Helvetica, sans-serif
Neste caso, o browser do visitante do nosso site em primeiro lugar vai ver se o
sistema operativo tem instalado o tipo de letra Arial, que está disponível por
omissão no Windows. Caso tenha instalado, utiliza-a no texto, senão vai ver o
segundo tipo de letra, Helvetica, que é comum no Macintosh. Se mesmo assim
não tiver esse tipo de letra instalado, utilizará o tipo de letra sans-serif por
omissão do browser ou do sistema operativo.
Para saber o tipo de letra utilizado por omissão pelo Internet Explorer aceda à
caixa de diálogo INTERNET OPTIONS [OPÇÕES DA INTERNET] (pode fazê-lo tam-
bém através do PAINEL DE CONTROLO [CONTROL PANEL]), e clique no botão
FONTS [TIPOS DE LETRA] que se encontra na parte de baixo da categoria
GENERAL [GERAL]:
O Arial e o Helvetica, para um leigo, são praticamente iguais, mas existem

outros font stacks que possuem tipos de letra algo diferentes.
O web designer não é obrigado a utilizar os font stacks fornecidos pelo
Dreamweaver. Pode criar os seus próprios font stacks ou escrever directa-
mente no campo FONT-FAMILY uma lista de tipos de letra.
A criação de um font stack personalizado só tem razão de ser se esse font
stack for muito utilizado pelo web designer em sites Web. Para criar um font
stack personalizado utiliza-se a opção EDIT FONT LIST que aparece no fim da
lista associada ao campo FONT-FAMILY na caixa de diálogo CSS RULE DEFI-
NITION:
selecciona-se um tipo de letra na lista AVAILABLE FONTS e clica-se no botão <<

para colocar esse tipo de letra na lista CHOSEN FONTS. Caso o tipo de letra que
pretendamos utilizar não se encontre na lista AVAILABLE FONTS podemos
escrevê-lo no campo de texto que aparece logo abaixo da lista AVAILABLE
FONTS. Foi o que fizemos com o tipo de letra LUCIDA GRANDE.
Tenha em atenção que a ordem dos tipos de letra é importante. Devemos co-
locar em primeiro lugar os tipos de letra que têm mais possibilidades de estar
disponíveis no computador da maior parte dos visitantes do nosso sítio Web.
Se pretender escrever um font stack directamente no código não se esqueça
que os tipos de letra cujo nome seja constituído por mais de uma palavra têm
de aparecer entre aspas ou entre plicas ('), como no exemplo seguinte:
font-family: 'Times New Roman', Times, serif;
E também assegurar que se coloca as maiúsculas e minúsculas correctas.

Muitos web designers no passado, e também alguns actualmente, ultrapassam
o problema da inexistência de determinado tipo de letra nos computadores dos
visitantes dos sítios Web utilizando o Photoshop para criar imagens que con-
têm títulos que usam um tipo de letra pouco comum.
De referir que a norma CSS3 que tem vindo a ser cada vez mais utilizada,
nomeadamente em conjunto com o HTML 5, tem uma propriedade FONT-
FAMILY que permite apontar para um tipo de letra que esteja guardada no ser-
vidor. Desta forma asseguramos que mesmo que o visitante não possua esse
tipo de letra instalado no computador, a página Web possa utilizá-lo.
12.1.3 Tamanho de letra

O tamanho de letra (chamado corpo em tipografia), é a segunda decisão que
se tem de tomar. Aqui não só o valor é importante, como a unidade utilizada
também o é.
O campo FONT-SIZE (a que corresponde a propriedade font-size das CSS)

permite definir este tamanho de letra:
Seria expectável que a única unidade disponível fosse o píxel (unidade px),
dado que os monitores são divididos nesses pequenos pontos (em inglês,
picture element). Porém, como pode verificar pela lista, existem diversas uni-
dades que se podem dividir em duas categorias:
• Absolutas – tamanho fixo
• Relativas – relacionadas com um elemento parente ou com a janela do
browser utilizando esse valor base para determinar o tamanho.
As unidades absolutas são:
• POINTS (pt) – os ‘pontos’ são a unidade típica utilizada nos documen-
tos impressos. Um point é 1/72 de uma polegada, o que implica mais
uma conversão para gerar um valor em píxeis. Não é recomendada a
sua utilização em páginas Web, a não ser em folhas de estilo de
impressão (print style sheets).
• PICAS (pc) – uma pica é equivalente a 12 pontos. Outra unidade utili-
zada em documentos impressos.
• INCHES (in) – as polegadas são, tal como os points, adequados a
documentos impressos.
• CENTIMETERS (cm) – mais uma vez, uma unidade, centímetros, que não
resulta bem no ecrã.
• MILLIMETERS (mm) – outra unidade, milímetros, que também não resulta
bem no ecrã.
Unidades relativas:
• EMS (em) – é praticamente equivalente ao tamanho de um M maiúsculo
em todos os tipos de letra. É a unidade aconselhada para o tamanho
do texto dado que é relativa ao tipo de letra.
• EX (ex) – é relativa à altura do carácter x minúsculo (conhecido por x-
height) de qualquer tipo de letra. Tem muitas das vantagens dos ems,
mas não é muito utilizada.
• Percentagem (%) – não está associada a qualquer carácter ou altura. O

valor 100% significa 100% do tamanho corrente do tipo de letra.
A vantagem das unidades relativas é que possibilita um maior controlo da
página aos visitantes mas mantendo a integridade do layout. Os visitantes
podem, por exemplo, ter dispositivos que forçam a utilização de um tamanho
de letra maior.
Finalmente, a unidade mais utilizada, os píxeis (px), tanto podem ser inter-
pretados como unidade absoluta ou como unidade relativa. Embora a utiliza-
ção de píxeis ‘fixe’ o tamanho de forma absoluta, as variações das resoluções
dos monitores faz com que o tamanho final dos píxeis também mude. Os
browsers mais antigos têm dificuldade em redimensionar o texto definido em
píxeis, o que torna a sua utilização insegura para sítios Web com funcionalida-
des de acessibilidade para pessoas com deficiência.
Por omissão, a maior parte dos browsers utiliza um tamanho do tipo de letra
de 16 píxeis, como pode verificar nas opções do Firefox:
Isto significa que 1em é igual a 16px na maior parte dos browsers. Mas se
mudarmos o tamanho por omissão a equivalência também muda. Então
podemos assumir que 1em é igual ao tamanho por omissão do tipo de letra do
browser.
O recomendado é definir o estilo associado ao elemento body utilizando como
unidade a percentagem (por exemplo, font-size: 100%, para utilizar o
tamanho por omissão do browser) e nos outros elementos, como parágrafos e
cabeçalhos, utilizar os em como unidade da propriedade font-size.
Desta forma ao aumentar ou diminuir o tamanho da página (com o zoom), todo
o tamanho do texto é relativo um ao outro. Isto significa que os cabeçalhos
diminuem de tamanho na mesma proporção que o texto.
12.2 Aspecto do texto

Existem diversas propriedades CSS que permitem alterar o aspecto do texto:
12.2.1 Font-weight
A primeira é a font-weight que permite colocar em negrito (bold) partes do
texto ou todo um parágrafo. Vimos num capítulo anterior que é possível utilizar
o elemento <strong> do HTML para efectuar esta operação. Mas nem sem-
pre os dois são sinónimos, dado que cabe ao browser interpretar o elemento
<strong>, não sendo obrigatório que utilize o negrito.
A propriedade font-weight permite-nos vários níveis de negrito:
Os primeiros quatro valores estão relacionados entre si e definem um grau de

negrito que a maior parte dos browsers não consegue mostrar, como pode ver
pelo exemplo seguinte visualizado no Mozilla Firefox:
Na escala de valores numéricos, 100 é o mais leve e 900 é o mais carregado.

Mais uma vez, a maior parte dos browsers não consegue mostrar estes níveis
de negrito (visualização no Mozilla Firefox):
Pode achar estranho existir um valor normal, quando, por omissão, os

objectos/elementos de texto HTML não aparecem a negrito. Mas, por omissão,
todos os cabeçalhos aparecem a negrito. Neste caso, se atribuirmos o valor
normal estamos a remover o negrito.
12.2.2 Font-style
A propriedade font-style permite atribuir itálico a texto:
O elemento <em> do HTML tem o mesmo efeito desta propriedade na maior

parte dos browsers. Relativamente aos valores disponíveis existe uma dife-
rença entre o italic e o oblique. O italic utiliza a versão itálica do tipo
de letra (se existir), enquanto o oblique ‘inclina’ (skew em inglês) as letras
ligeiramente e só é útil se o tipo de letra utilizado não tiver uma versão itálica.
Nos tipos de letra mais utilizados a diferença não é perceptível (exemplo com
Arial no Mozilla Firefox):
12.2.3 Font-variant
Algumas vezes é necessário dar uma ênfase diferente a determinado texto,
quando o negrito não é apropriado e não se pretende utilizar itálico. Neste
caso pode-se utilizar small caps (abreviatura de small capitals) em que os
caracteres minúsculos são convertidos em maiúsculos mas têm o mesmo
tamanho do dos minúsculos. Muitas vezes é utilizado para que palavras
escritas em maiúsculas não sobressaiam no meio do texto. Tipicamente, a
altura de um carácter em small caps é um ex (ver unidades), a mesma altura
da maior parte dos caracteres num tipo de letra.
A propriedade font-variant é utilizada para converter partes de texto para

small caps, utilizando normalmente o elemento <span>:
Utilizamos no capítulo anterior esta propriedade no nome da empresa (tenha

em atenção que neste caso o texto também está a negrito):
Nem todos os tipos de letra suportam o small caps.
12.2.4 Text-transform
Outra propriedade que altera o aspecto do texto é a text-transform que
permite converter todos os caracteres para maiúsculas (uppercase), para
minúsculas (lowercase), ou apenas o primeiro caracter de cada palavra para
maiúsculas (capitalize):
Os valores uppercase e lowercase são úteis quando se trabalha com pági-

nas dinâmicas para assegurar que os dados que se recebe de uma base de
dados e que se pretende apresentar na página estão todos em maiúsculas ou
em minúsculas.
12.2.5 Text-decoration
Uma série de alterações do aspecto do texto está agrupada na propriedade
text-decoration:
Os três primeiros valores têm a ver com linhas que aparecem por baixo do
texto (sublinhado – underline), por cima do texto (overline) e que cortam
o texto a meio (line-through). O valor blink coloca o texto a ‘piscar’.

Exceptuando o primeiro valor (underline), que é utilizado com links, nenhum
dos outros valores é muito comum em páginas, e percebe-se porquê.
12.3 Espaçamento entre palavras e caracteres

Embora pouco utilizado em páginas Web, é possível definir o espaçamento
entre palavras e caracteres do texto (kerning e tracking em inglês). Utilizam-se
as propriedades word-spacing e letter-spacing para esse efeito.
Estes espaçamentos são mais utilizados em documentos impressos, em que
normalmente é necessário ter um controlo mais preciso do posicionamento
dos caracteres, sobretudo quando se utiliza o alinhamento justificado de texto.
As duas propriedades podem ser definidas através da categoria BLOCK da
caixa de diálogo CSS RULE DEFINITION:
Uma das possíveis utilizações é, por exemplo, para afastar os caracteres de

cabeçalhos, para obter um efeito visual diferente. Partindo de um valor nor-
mal de letter-spacing,
primeiro atribuímos um valor positivo (0.3em),
e depois um valor negativo (-0.1em):

12.4 Espaçamento entre linhas

O espaçamento entre linhas (em inglês leading, line spacing ou line height) é o
espaço vertical que existe entre as linhas de um parágrafo.
A propriedade line-height permite controlar esse espaço:
Existem basicamente três formas de atribuir valores a esta propriedade:

• número – corresponde a um número que é multiplicado pelo tamanho
corrente do tipo de letra para determinar a altura da linha. Isto significa
que um valor 2.0 implica uma altura de linha duas vezes a altura base,
o que corresponde a 200%. Não se utiliza nenhuma unidade.
• altura – um tamanho fixo para a altura da linha, especificado numa uni-
dade (px, pt, in, cm, mm, pc, em ou ex).
• valor% - corresponde a uma percentagem do tamanho corrente do tipo
de letra, que é 100%.
Por norma, um valor superior ao do tamanho corrente do tipo de letra, afasta
as linhas entre si (exemplo para 200%),
enquanto um valor inferior as sobrepõe (exemplo para 50%):
A norma CSS diz que o valor por omissão para a propriedade line-height
deve ser entre 1.0 e 1.2. Diferentes browsers possuem valores diferentes den-
tro deste intervalo de valores. Por isso, definir explicitamente a propriedade
line-height para 1.0 ou outro valor assegura consistência entre diferentes
browsers.
Esta propriedade é útil quando temos cabeçalhos que possuem cor de fundo e
se pretende definir uma determinada altura.
Vamos utilizar, como exemplo, um menu que posteriormente iremos aplicar na

página quemsomos.html, e que é constituído por um cabeçalho e um grupo
de opções:
Para criarmos o cabeçalho começamos com um parágrafo ao qual atribuímos

uma cor de fundo e uma cor às letras, além de centrarmos o texto (todos os
parágrafos estão dentro de um elemento <div> com uma largura de 200px):
Era ideal dar mais espaço entre o texto Informação e o topo e o fundo da
‘caixa’ em que está inserido. Podemos fazer isso com a propriedade padding
de que iremos falar mais à frente. Mas também é possível resolver o problema
recorrendo à propriedade line-height à qual vamos atribuir o valor 2 (sem
unidade), o que significa duas vezes o espaçamento entre linhas por omissão
(também atribuímos o valor 0 à propriedade margin-top):
Podíamos ter utilizado píxeis como unidade, mas nesse caso a caixa à volta
do texto não redimensionaria quando o visitante reduzisse ou aumentasse o
tamanho do tipo de letra no browser.
12.5 Espaçamento entre parágrafos

Como já deve ter reparado, por omissão os parágrafos em HTML possuem
uma linha em branco entre eles, tal como acontece com os cabeçalhos:
O espaço entre parágrafos é controlado por uma propriedade CSS chamada

margin, que pode ser utilizada com qualquer elemento HTML de uma página,
incluindo tabelas, formulários, imagens, etc.
Esta propriedade permite afastar ou aproximar os objectos entre si, e existe
uma propriedade para cada um dos lados do objecto: margin-top, margin-
right, margin-bottom e margin-left.
No nosso menu anterior, INFORMAÇÃO, as opções do menu estão muito afasta-
das umas das outras, dado que se trata de parágrafos. Podemos aproximá-las
atribuindo um valor 0 à margem superior (margin-top) e à margem inferior
(margin-bottom):
Para definirmos valores diferentes para as quatro margens temos primeiro de

desactivar a opção SAME FOR ALL, e depois introduzir os valores pretendidos
nos campos respectivos.
Aproveitamos também para reduzir o tamanho da letra para 0.8em e atribuir
um valor de 10px à margem esquerda para afastar as opções dos limites da
caixa. O estilo criado possui as seguintes propriedades:
.paragrafos {
margin-left: 10px;
margin-bottom: 0px;
margin-top: 0px;
font-size: 0.8em;
}
O resultado é:
Agora, temos demasiado espaço antes da primeira opção e pouco espaço

abaixo da última opção. O espaço em branco acima das opções é provocado
pela margem inferior (margin-bottom) do cabeçalho, por isso basta atribuir-
-lhe um valor da ordem dos 5px:
#cabecalho {
margin-top: 0px;
margin-bottom: 5px;
line-height: 2;
color: #FFF;
text-align: center;
background-color: #666;
}
Quanto ao pouco espaço na parte de baixo das opções, podemos resolver

esse problema de duas formas:
• Atribuímos uma margin-bottom de 5px ao último parágrafo, criando
uma classe especial,
.ultimo_paragrafo {
margin-bottom: 5px;
}
e aplicando-a ao parágrafo:
<p class="paragrafos ultimo_paragrafo">
Repare que neste caso atribuímos mais de uma classe CSS a um

elemento HTML. Podemos fazê-lo em código, ou recorrendo à caixa
de diálogo TAG EDITOR (opção MODIFY > EDIT TAG):
• Em alternativa, definimos um espaçamento interior (padding-

bottom) no elemento <div> que define a estrutura do menu:
#conteudo {
font-family: Arial;
width: 200px;
border: 1px solid #000;
padding-bottom: 5px;
}
É preciso compreender como é que as margens funcionam, sobretudo no caso

dos parágrafos. Cada parágrafo tem, por omissão, uma margem superior e
uma margem inferior. Isto significa que, em teoria, o espaço entre dois pará-
grafos seria a soma da margem inferior de um e da margem superior do outro:
} 20px
} 10px
Neste exemplo, o espaço entre os dois parágrafos deveria ser de 30 píxeis.

Mas os browsers colapsam as margens, o que significa que não somam as
duas margens que são contíguas, utilizando apenas a margem maior.
Se um parágrafo possuir uma margem inferior de 20 píxeis e o parágrafo
seguinte possuir uma margem superior de 10 píxeis, como acontece no nosso
exemplo, então os browsers vão utilizar 20 píxeis (o maior valor) como espa-
çamento entre os dois parágrafos:
É por isso que quando se remove a margem superior do segundo parágrafo, a

distância entre os parágrafos continua a mesma. Para se anular a distância
entre dois parágrafos tem-se de atribuir 0 à margem inferior de um e 0 à mar-
gem superior do outro.
Sem este colapsar das margens, os parágrafos e os cabeçalhos seriam espa-
çados a duplicar (em inglês, double-spaced). Mas o problema é que cada
browser define os seus valores para as margens. Para eliminarmos estas
inconsistências entre browsers, temos primeiro de eliminar os valores por
omissão dos browsers relativos às propriedades margin e padding (opera-
ção que em inglês é conhecida como CSS Reset).
Mas se limparmos estas propriedades para todo o documento temos depois de
as atribuir elemento a elemento. Podemos contudo fazer o reset apenas a
alguns elementos:
html, body {
margin: 0px;
padding: 0px;
}
h1, h2, h3, h4, h5, h6, p, address, blockquote, div, ul,
li {
margin: 0px;
padding: 0px;
}
Esta é a primeira vez que apresentamos selectores separados por vírgulas. É

uma forma mais económica de criar um único estilo para vários selectores.
Utilizaram-se dois estilos diferentes por razões estruturais.
Para criar estes estilos no Dreamweaver, temos de seleccionar o valor Com-
pound na lista SELECTOR TYPE, e depois escrever html, body no campo
SELECTOR NAME:
Na categoria BOX, como as opções SAME FOR ALL para PADDING e MARGIN
estão activadas por omissão, basta escrever o valor 0 nos respectivos campos
TOP:
Se por acaso se pretender remover a margin e o padding a todos os elemen-

tos da página, existe um operador especial que significa ‘todos os elementos’,
e que é o ‘*’:
* {
margin:0;
padding:0;
}
Um dos maiores peritos mundiais em CSS, Eric Meyer, aconselha a utilização

dos seguintes estilos:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
color: black;
background: white;
}
12.6 Box Model

Cada elemento HTML de uma página Web possui diversas propriedades CSS
associadas que definem a forma como o elemento é apresentado na página e
a sua relação com os elementos circundantes. Já falamos na maior parte des-
sas propriedades, excepto o padding. Colectivamente essas propriedades
têm o nome de box model, dado que cada uma ‘cria’ uma caixa à volta do
elemento:
A ‘caixa’ principal é a área de conteúdo (texto, imagem, etc.) e opcionalmente

podem também existir as áreas padding, border e margin. O elemento
também pode ter associadas as propriedades width e height que definem a
largura e altura, respectivamente.
Quando se define uma cor de fundo para um elemento, abrange tanto o con-
teúdo como o padding do elemento.
12.6.1 Padding
O padding serve para afastar o conteúdo da sua moldura (border). No exemplo
de menu que formatamos anteriormente,
podíamos ter utilizado padding no cabeçalho,

#cabecalho {
margin-top: 0px;
margin-bottom: 5px;
padding-top: 7px;
color: #FFF;
text-align: center;
background-color: #666;
}
em vez do line-height: 2.
No caso do elemento <div> também podíamos ter utilizado um padding-
left, não necessitando de utilizar a margin-left nos parágrafos:
#conteudo {
font-family: Arial;
width: 200px;
border: 1px solid #000;
padding-left: 10px;
}
O grande problema do padding tem a ver com as incongruências dos browsers

na sua utilização, nomeadamente do Internet Explorer 6 e versões anteriores.
Nestas versões do Internet Explorer, quando se define a propriedade width, o
browser assume que a largura inclui também o padding e a border. Nos
outros browsers e nas versões mais recentes do Internet Explorer, em modo
standards-compliant, a propriedade width apenas diz respeito ao conteúdo
do elemento.
Uma das utilizações mais comuns do padding é quando se utiliza uma linha
por baixo dos cabeçalhos (elementos <h1>, <h2>, etc.). Vamos então trans-
formar os nossos cabeçalhos da página quemsomos.html. Criamos um estilo
h2 local à página,
e, na categoria BORDER, desactivamos as três opções SAME FOR ALL, e atribuí-

mos os seguintes valores ao border-bottom:
Em seguida, na categoria BOX, podemos utilizar o padding-bottom para

afastar a linha do cabeçalho:
O resultado é:
12.7 Alinhar texto

Utiliza-se a propriedade text-align para alinhar o texto de um parágrafo ou
de um cabeçalho:
Em texto corrido os valores mais comuns são o left e o justify. Porém, ao

contrário dos documentos em papel, não é muito vulgar utilizar justify no
alinhamento de texto numa página Web. E o alinhamento right praticamente
só é utilizado em cabeçalhos.
Se não especificar uma propriedade text-align, a maior parte dos browsers
alinha o texto à esquerda. Como o alinhamento é herdado pelos elementos
filho, isso significa que, se alinhar ao centro o elemento body, a maior parte
dos elementos da página aparecerão centrados.
12.7.1 Alinhamento vertical

Os layouts HTML não foram desenhados para especificar alinhamento vertical,
mas muitas vezes é necessário alinhar verticalmente um elemento dentro de
outro elemento. Por exemplo, uma única linha de texto dentro de um elemento
<div>.
O problema é que nas CSS a propriedade vertical-align é utilizada para
definir dois comportamentos completamente diferentes, dependendo do ele-
mento onde é aplicada.
Quando é utilizada em células de tabelas, a propriedade vertical-align é
equivalente ao atributo valign (que devemos evitar utilizar), e alinha verti-
calmente o conteúdo da célula. Isso significa que se tivermos,
<td style="vertical-align:middle"> ... </td>
o conteúdo desta célula aparecerá alinhado ao centro verticalmente, o que já é

o comportamento por omissão.
Nos browsers mais recentes podemos também utilizar este comportamento
com outros elementos, como o <div>:
<div style="display:table-cell; vertical-align:middle">
... </div>
O que a propriedade display faz ao <div> é dizer para ele se comportar

como uma célula de uma tabela.
Mas a aplicação da propriedade vertical-align em elementos inline como

as imagens e as porções de texto (elemento <span>) é diferente. Nestes
casos comporta-se como o atributo align do elemento <img>. Por exemplo,
vamos escrever H2O numa página. Podemos recorrer ao elemento <sub>,
como vimos num capítulo anterior, mas dessa forma não controlamos o posi-
cionamento do 2 em relação ao resto do texto. A solução é utilizar um valor da
propriedade vertical-align como o sub:
Se achar que está muito em baixo ou muito em cima pode especificar um valor
numérico e depois escolher uma unidade. Esse valor pode ser negativo, como
-0.2em para ‘empurrar’ o 2 mais para baixo, ou positivo, para ‘puxar’ o 2 mais
para cima.
Caso insira um valor negativo, o Dreamweaver apresenta uma mensagem de
aviso,
dado que as versões iniciais das CSS não suportavam estes valores. Clique
em YES.
Se pretender efectuar alinhamentos verticais de elementos então o melhor é
utilizar margin, padding e line-height e evitar o vertical-align.
12.8 Listas
As listas de itens são dos elementos que mais podem ser alterados através
das CSS. Para exemplificarmos, vamos converter a lista de links existentes na
página index.html num menu horizontal. Mas primeiro fazemos algumas

alterações, removendo alguns links e acrescentando outros:
A primeira operação é converter o conjunto de parágrafos numa lista. Porquê

utilizar uma lista em vez de um conjunto de parágrafos? Porque desta forma
temos um único objecto que representa o menu e que confere uma relação
entre os itens. Podíamos também ter utilizado um elemento <div> a englobar
um conjunto de parágrafos, mas perdíamos a relação entre os itens.
Seleccione todos os parágrafos e depois clique no ícone UNORDERED LIST no
PROPERTY INSPECTOR:
Aproveitamos também para atribuir um id à lista (atribuímos o nome menu)

para ser mais fácil criar um estilo CSS. Neste momento a lista tem o seguinte
aspecto:
O estilo a criar é do tipo ID, e, caso tenha o elemento <ul> seleccionado não
necessita de preencher nada na caixa de diálogo NEW CSS RULE, dado que o
Dreamweaver preenche automaticamente o campo SELECTOR NAME:
Assegure-se que está a criar o estilo no próprio documento e não num ficheiro
CSS.
Na caixa de diálogo CSS RULE DEFINITION acedemos à categoria LIST e depois
seleccionamos a opção NONE da lista LIST-STYLE-TYPE:
Com esta propriedade e este valor vamos remover as marcas (bullets) que
aparecem antes de qualquer item:
Temos agora de colocar todos os itens na mesma linha. Como o elemento

<li> é um elemento block-level, e por isso ocupa todo o espaço disponível na
linha, temos de converter os <li> da nossa lista para elementos inline. Pri-
meiro temos de criar outro estilo, #menu li, isto é, um estilo compound, utili-
zando selectores descendant. Com este estilo pretendemos formatar todos os
elementos <li> que se encontram dentro de um elemento cujo id é menu, e
que corresponde à nossa lista de links.
Para converter os elementos <li> para inline utilizamos a propriedade dis-
play com o valor inline:
Já temos um menu horizontal no topo da página:
A lista de itens ainda está afastada do lado esquerdo da página e isso deve-se
ao padding-left associado à lista. Voltando ao estilo #menu, utilizamos a
categoria BOX e a propriedade PADDING para remover todos os ‘espaços’ à
volta da lista:
Este problema já está resolvido:
Vamos agora atribuir uma cor de fundo aos itens da lista (alterando o estilo
#menu li),
colocar uma moldura de cor branca, apenas no lado direito de cada item,
e afastar o texto da moldura:

O resultado está quase como o pretendido, dado que depois vamos alterar os
links:
Existe só muito espaço entre os itens. Isso deve-se ao facto de, no código, os
elementos <li> estarem em linhas separadas:
<ul id="menu">
<li><a href="destaques.html">Destaques</a></li>
<li><a href="info/quemsomos.html">Quem Somos</a></li>
<li><a href="info/faq.html">FAQ</a></li>
<li><a href="info/contactar.html">Contactar</a></li>
<li><a href="registo.html">Registo</a></li>
</ul>
Se, em código, colocar o cursor no fim de um dos elementos <li> e teclar

DELETE, verá que ficam dois espaços entre os dois elementos <li>:
<ul id="menu">
<li><a href="destaques.html">Destaques</a></li><li>
<a href="info/quemsomos.html">Quem Somos</a></li>
A solução é colocar os itens todos numa única linha e remover os espaços

existentes entre eles:
Veremos no próximo capítulo como é que podemos criar o mesmo menu hori-
zontal recorrendo à propriedade float com o valor left, em vez de utilizar a
propriedade display.
O menu que criamos, quando o browser é redimensionado e a largura da
janela não comporta todo o menu, é desdobrado em duas linhas, sobretudo
porque existe um espaço no item «Quem Somos»:
Para evitar que isto aconteça, podemos utilizar a propriedade white-space

com o valor nowrap:
Desta forma o browser não quebra nenhum texto evitando-se assim a mu-
dança de linha.
Na caixa de diálogo CSS RULE DEFINITION existem outras opções, na categoria
LIST, que podem ser utilizadas com listas:
A propriedade list-style-image permite utilizar uma outra marca (bullet)

em vez das tradicionais (circle, square e disc). Podem ser utilizadas ima-
gens nos formatos .gif, .jpg e .png.
Já a propriedade list-style-position define se as marcas aparecem
dentro (inside) ou fora da área de conteúdo (outside, que é o valor por
omissão). Para que se perceba a diferença, atribuímos aos elementos <li>
uma moldura (border):
12.8.1 Listas de definições

As listas de definição, como são constituídas por três elementos HTML distin-
tos, são formatadas de forma diferente.
Na página faq.html utilizamos uma lista de definições. Esta página ainda
não foi formatada, além dos estilos ‘herdados’ da ligação ao ficheiro
estilos.css:
Uma lista de definições é composta por três elementos: <dl> para a lista,
como um todo; <dt> para a palavra a definir; e <dd> para a definição. No
nosso caso o elemento <dt> é utilizado para a questão e <dd> para a res-
posta.
Embora a página contenha apenas uma única lista de definições, é sempre
conveniente atribuir-lhe um nome:
O primeiro estilo que vamos criar, #faq dt, é para formatar o aspecto das
questões:
Em primeiro lugar, vamos aplicar negrito e um tamanho de letra superior:
Ainda permanecendo no estilo #faq dt, vamos afastar as perguntas das res-
postas utilizando a propriedade margin:
Finalmente, vamos colocar uma linha vermelha com uma espessura de 2

píxeis, debaixo de cada pergunta:
O aspecto da página é, neste momento:
Só falta formatar as respostas, com um estilo #faq dd:

Vamos apenas alterar o tamanho da letra:
Se pretender remover a ‘indentação’ das respostas e alinhá-las ao lado

esquerdo, basta utilizar margin-left:0px:
Como existe uma lista não numerada na terceira pergunta e dois parágrafos, o
espaço entre a pergunta e a resposta é maior do que o habitual. Podemos
atribuir um estilo inline ao primeiro parágrafo da terceira resposta com a pro-
priedade margin-top: 0px.
A lista não numerada também necessita de formatação. Atribuímos-lhe um id
igual a criterios, e depois criamos um estilo #criterios li que define
um espaçamento maior entre os itens da lista:
Reduzimos para 5px a margin-bottom do primeiro parágrafo da terceira

resposta antes da lista não numerada, e para 5px a margin-top do pará-
grafo a seguir à lista não numerada. O aspecto da terceira pergunta/resposta é
agora:
12.9 Selectores específicos dos links

Os links são alguns dos elementos do HTML que possuem estilos específicos,
que se chamam pseudo-classes. Um link pode estar, num determinado mo-
mento em um de cinco estados:
• LINK – é o aspecto ‘normal’ de um link, sem ter sido visitado. Tradicio-
nalmente os links de texto são azuis e com sublinhado.
• VISITED – estado visitado do link. O link muda de cor, para púrpura,
quando a página para a qual aponta tiver sido visitada. É habitual o
aspecto visual deste estado e do anterior ser idêntico para o browser
não mudar o aspecto do link quando a página for visitada.
• HOVER – quando o visitante coloca o cursor por cima do link. É o esta-
do utilizado quando se pretende criar um efeito de rollover.
• FOCUS – quando se utiliza a tecla TAB para saltar entre links e o brow-
ser assinala o link corrente (neste caso basta teclar RETURN/ENTER
para o link ser ‘seguido’ e a página referenciada ser aberta) ou quando
fazemos BACK [RETROCEDER] no browser e fica assinalado o link em
que clicamos. Esta é sobretudo uma funcionalidade associada à aces-
sibilidade de páginas Web para permitir navegar na Internet sem utili-
zar o rato e para assinalar com realce o link corrente (isto é, o que está
em foco). Existem alguns problemas com a utilização deste estado no
Internet Explorer 6 e 7.
Por omissão, os browsers assinalam o estado focus com um qua-
drado pontilhado à volta (em inglês, outline):
• ACTIVE – quando alguém está a clicar no link mas antes de libertar o

botão do rato. Normalmente a maior parte dos browsers assinala este
estado de forma idêntica ao estado focus, isto é, com um pontilhado
à volta.
São utilizados cinco pseudo-classes para definir estilos para estes estados:
a:link
a:visited
a:hover
a:focus
a:active
Esta é a ordem pela qual se tem obrigatoriamente de definir as pseudo-clas-

ses, senão existirão problemas na aplicação das respectivas propriedades.
Para remover o quadrado pontilhado que está associado aos estados focus e
active, utiliza-se a propriedade outline que é parecida com a propriedade
border, mas que é desenhada à volta de um elemento, englobando a border

e que pretende dar destaque ao elemento, realçando-o na página. A remoção
da outline faz-se atribuindo o valor none:
a:focus, a:active {
outline: none;
}
Claro está que pode, em contrapartida, alterar o pontilhado, a espessura da

linha e a cor da outline:
a:focus {
outline: 4px solid #F00;
}
Vamos exemplificar a utilização destas pseudo-classes (sobretudo o a:link e

o a:hover, que são as mais utilizadas) terminando o nosso exemplo de menu
na página index.html.
Primeiro vamos criar um estilo para os links no seu estado normal. Colocando
o cursor no meio de um dos links do menu e clicando no ícone NEW CSS RULE
do painel CSS STYLES, o nome proposto para o estilo é #menu li a:
Isto é, vamos definir um estilo para todos os links que se encontrem dentro de
elementos <li> existentes dentro de um elemento com o id igual a menu.
Podíamos ter utilizado apenas #menu a, dado que todos os links se encon-
tram dentro de elementos <li> e não existem outros elementos dentro da lista
menu.
Como vamos definir o estado normal de um link o nome correcto a atribuir
seria #menu li a:link (ou #menu li a:link na versão abreviada). Mas
nesse caso também teríamos de definir um estilo para a:visited, a:hover
e a:active com outros valores (ou não) para as mesmas propriedades.
O que se faz normalmente é definir um conjunto de propriedades comuns aos

quatro estados num único estilo a que abrange todos esses estados. Só são
utilizadas as pseudo-classes para os estados e as propriedades que sejam
diferentes. Isso significa que normalmente apenas se define um estilo para o
estado a:hover. A utilização de um estilo a, corresponde a um hipotético
estilo:
a:link, a:visited, a:hover, a:active
De referir que as pseudo-classes podem ser utilizadas em conjunto com as

classes normais, como no exemplo seguinte:
a.opcoes:hover
Neste caso apenas pretendemos afectar o estado hover dos links que pos-
suem aplicada a classe opcoes.
Vamos retirar o sublinhado aos links (propriedade text-decoration:
none), mudar-lhes a cor para branco (propriedade color: #FFFFFF), definir
um tamanho de letra de 1em (propriedade font-size), e colocar o texto a
negrito (propriedade font-weight: bold):
O menu já está com melhor aspecto:
Agora vamos alterar o estado a:hover, criando um estilo com o seguinte

nome (podíamos ter utilizado em alternativa, #menu a:hover):
A única propriedade que modificamos é a cor de fundo que mudamos para

vermelho:
O problema é que agora quando passamos por cima de um dos links, a cor
vermelha não preenche todo o rectângulo onde o link se encontra:
Isto acontece porque as propriedades padding e background-color estão

aplicadas ao elemento <li> e não ao elemento <a>. Basta mudá-las de um
estilo (#menu li) para o outro (#menu li a) para resolver o problema. Pode
fazê-lo em código (o que é mais rápido), ou utilizando a caixa de diálogo CSS
RULE DEFINITION. Agora, já muda a cor de todo o rectângulo (o elemento <li>)
onde o link se encontra:
As imagens do exemplo que temos estado a apresentar foram obtidas num

browser, mas podemos, em modo DESIGN, perceber que propriedades são
afectadas pelos vários estados dos links recorrendo à barra STYLE RENDERING:
Para obter esta barra de ferramentas aceda à opção VIEW > TOOLBARS > STYLE
RENDERING ou clique com o botão do direito do rato (CONTROL+CLIQUE no
Macintosh) em cima da barra DOCUMENT e seleccione a opção STYLE
RENDERING:
Ao clicarmos num dos cinco últimos ícones vemos o que acontece quando o
respectivo estado está activo. Por exemplo, para o estado hover:
Os ícones possuem o seguinte significado: :l corresponde ao estado link,

:v ao estado visited, :h ao estado hover, :a ao estado active e :f ao
estado focus.
Mas o melhor é mesmo utilizar a funcionalidade de LIVE VIEW ou pré-visualizar
num browser para assegurar que tudo funciona como idealizamos.
13 Layout de páginas Web
Originalmente as páginas Web não eram atractivas dado que os elementos

HTML eram limitados e não permitiam desenhar layouts complexos. A maior
parte do conteúdo era contínuo, isto é, aparecia um a seguir ao outro, sendo
constituído maioritariamente por texto.
Entretanto alguém se lembrou de utilizar tabelas para desenhar layouts mais
complexos. Dessa forma, tivemos durante muitos anos páginas baseadas em
tabelas, dado que era a única forma de criar layouts. O problema é que as
tabelas foram criadas no HTML para apresentar dados em formato tabular, e
não para desenhar layouts, por isso com o tempo começaram a mostrar mui-
tas limitações.
Entretanto, com o aparecimento das frames, a filosofia de desenho dos layouts
alterou-se um pouco. Já não se tratava de um layout definido em cada página,
mas sim de um layout único que referenciava todas as páginas do sítio Web.
Contudo, e por várias razões, as frames caíram em desgraça, de tal forma que
hoje em dia o W3C, entidade que desenvolve e gere as normas que são apli-
cadas na Internet e na World Wide Web, define as frames como estando de-
precated, o que significa que não aconselham a sua utilização.
Mas então qual é a forma correcta de desenhar layouts de páginas Web? Utili-
zando estilos CSS e as propriedades float e position, que foram criadas
com o propósito de controlar o posicionamento dos elementos HTML numa
página Web.
13.1 Utilizar tabelas para layout

Existem muitos tipos de layouts de páginas que são utilizados nas páginas
Web, mas o mais comum é do tipo:
Cabeçalho
Menu Conteúdo
Rodapé
Este layout visualmente é parecido com uma tabela de 2 colunas e 3 linhas do

tipo:
Se definirmos a primeira coluna mais estreita que a segunda,
atribuirmos o valor 1 ao atributo cellspacing,
fizermos a fusão das células da primeira linha,

13. LAYOUT DE PÁGINAS WEB 371
e a fusão das células da terceira linha, temos a estrutura base do layout:
Atribuímos uma largura de 100% à tabela para ela se ajustar automaticamente

à largura da janela do browser. Mas podíamos ter utilizado píxeis para atribuir
à largura um valor fixo.
Na célula do lado esquerdo, que vai conter o menu, atribuímos uma largura de
160 píxeis.
Agora só falta colocar conteúdo em cada célula. Vamos utilizar este layout
para a nossa página quemsomos.html. Criamos esta tabela no topo da
página, antes do logótipo, e depois arrastamos o conteúdo para cada uma das
células. O resultado, utilizando os estilos CSS que já aplicamos anteriormente,
é:
O que é que aconteceu ao menu? Não deveria estar encostado ao topo da

respectiva célula? O que se passa é que, por omissão, o HTML alinha ao cen-
tro verticalmente o conteúdo das células de uma tabela. Para corrigir o pro-
blema seleccionamos a célula onde se encontra o menu e no PROPERTY
INSPECTOR atribuímos o valor top ao atributo valign (campo VERT):
Aproveitamos para fazer a mesma operação para a célula que contém o texto,
embora neste caso não fosse necessário:
No rodapé vamos colocar a morada da empresa e um elemento <hr> para a

separar do resto do texto da página:
Aplicamos o seguinte estilo aos parágrafos da morada:

.morada {
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
font-size: 10px;
}
Tanto o conteúdo do cabeçalho, o texto da área de conteúdo e o texto do

rodapé, estão muito perto dos limites das células. Podíamos atribuir um valor
ao atributo cellpadding da tabela, mas nesse caso o conteúdo do menu
também seria afectado. O ideal é mesmo criar um estilo do tipo classe e com o
nome .afastarlimite, em que atribuímos 15px à propriedade padding:
Não se esqueça de aplicar este estilo às três células (excepto a célula que
contém o menu).
Atribuindo o valor 0 ao atributo border da tabela (pode fazê-lo no PROPERTY
INSPECTOR) temos a nossa página pronta (visualizada em LIVE VIEW):
Ainda podíamos inserir no cabeçalho uma nova tabela com 2 colunas e 1 linha
para colocar o logótipo e o título em cada célula. Teríamos primeiro de remo-
ver o atributo align da imagem e o estilo CSS que lhe está aplicado.
Tentou-se utilizar o máximo de elementos e atributos HTML para demonstrar
como é que se utilizavam tabelas para criar layouts no passado. Este conhe-
cimento de como se criam layouts com tabelas é importante porque ainda
existem na Web muitas páginas desenhadas desta forma, e muitas vezes
temos de as alterar.
Contudo, esta forma de criar layouts está completamente ultrapassada e foi
substituída pela utilização de CSS.
13.2 Frames
Uma frame é uma região na janela do browser que pode apresentar um docu-
mento HTML independentemente do que está a ser apresentado no resto da
janela do browser. As frames disponibilizam então uma forma de dividir a
janela do browser em múltiplas regiões, cada um das quais com um docu-
mento HTML diferente. Na utilização habitual das frames, uma frame apre-
senta um documento que contém os controlos de navegação, enquanto outra
frame apresenta o conteúdo de outros documentos.
Um frameset é um ficheiro HTML que define o layout e as propriedades de um
conjunto de frames, incluindo o número de frames, o tamanho e localização
das frames e o endereço (URL) da página que aparece inicialmente em cada
frame. O ficheiro frameset não possui conteúdo HTML que seja apresentado
no browser excepto a secção noframes que contém a informação a apre-
sentar em browsers que não suportam frames.
A maior parte dos web designers (e a própria Adobe) desaconselha a utiliza-
ção de frames, devido a várias razões:
• Dificuldade no alinhamento de elementos existentes em frames
diferentes;
• Problemas em fazer o bookmarking de uma determinada página, dado
que o endereço (URL) que aparece na barra ADDRESS [ENDEREÇO] é
sempre o mesmo.
• Problemas na impressão de todo o conteúdo visível na janela do brow-
ser.
• Problemas com o botão de REFRESH e o botão BACK [RETROCEDER]
dos browsers.
Embora a maior parte destes problemas não ocorra nos browsers mais
recentes, a má fama associada às frames é muito difícil de combater e por
isso caíram em desuso.
A utilização mais comum das frames é para facilitar a navegação dentro de um
sítio Web. Normalmente, uma das frames possui um menu, e outra frame
recebe as páginas destino dos links que existem no menu.
A possibilidade de utilizar barras de deslocamento independentes em frames
distintas evita que, para se navegar para outra página, se tenha sempre que
voltar ao início da página. A frame que possui o menu está sempre acessível e
visível.
No nosso sítio Web a página index.html parece a candidata ideal para ser
convertida para frames obedecendo ao layout que definimos anteriormente.
Além de criar a página que corresponde ao frameset, temos também de criar 4
páginas diferentes para o cabeçalho, para o menu, para a área de conteúdo e
para o rodapé.
No Dreamweaver existem duas formas de criar um frameset:
• Pode seleccionar um dos framesets predefinidos;
• Ou pode desenhar o seu próprio frameset.
Para utilizar um dos framesets predefinidos aceda à opção FILE > NEW. Na
caixa de diálogo NEW DOCUMENT,
seleccione na primeira coluna a opção PAGE FROM SAMPLE, depois, na

segunda coluna, seleccione FRAMESET e, finalmente, na coluna SAMPLE PAGE,
seleccione o frameset que pretende utilizar. Sempre que escolher um frameset
na coluna SAMPLE PAGE pode ver um esquema da aparência no lado direito da
caixa de diálogo.
Depois de se clicar no botão CREATE aparece a já nossa conhecida caixa de

diálogo de atributos de acessibilidade:
em que, para cada frame podemos especificar um título. Vamos atribuir os

seguintes títulos:
• topFrame – Logotipo
• leftFrame – Menu
• mainFrame – Conteúdo
Também é possível criar um frameset predefinido recorrendo à categoria

LAYOUT do painel INSERT:
Mas, neste caso, primeiro terá de criar uma página HTML ‘em branco’.
O aspecto do frameset na janela de documento do Dreamweaver é:
As linhas cinzentas que dividem as frames podem ser escondidas (ou mostra-
das) seleccionando a opção FRAME BORDERS do menu VISUAL AIDS:
Pode-se agora começar a introduzir conteúdo em cada uma das frames. Mas
antes de o fazer, convém guardar as 4 páginas, utilizando para isso a opção
FILE > SAVE ALL. Primeiro o Dreamweaver pede-lhe o nome a atribuir ao fra-
meset e depois o nome para cada frame. À medida que vai pedindo os nomes,
o Dreamweaver assinala na janela DOCUMENT a frame que vai guardar:
Em alternativa pode clicar em cada uma das frames e utilizar o comando FILE
> SAVE FRAME ou FILE > SAVE FRAME AS.
Os nomes que atribuímos foram: index.html, cabecalho.html, menu.
html, conteudo_inicial.html. Guardamos estes ficheiros numa pasta
com o nome frames. Optamos por não criar o rodapé.
Vamos agora copiar o conteúdo da página index.html, que tínhamos criado
anteriormente no root folder, para as diversas frames. Cada frame funciona
como uma página independente. Para inserir conteúdo basta colocar o cursor
dentro da frame e escrever texto ou inserir imagens.
A aparência do nosso frameset neste momento é:
Repare que aparentemente a frame cabecalho não possui espaço suficiente

para o logótipo, embora se virmos a página no modo LIVE VIEW, pareça estar
tudo bem.
Para efectuar alterações às propriedades de uma frame ou de um frameset,
temos de seleccionar o objecto (frame ou frameset) que pretendemos alterar
no painel FRAMES (para o tornar visível seleccione a opção WINDOW >
FRAMES):
Tenha em atenção que seleccionar uma frame não é o mesmo que colocar o
cursor dentro da frame.
As propriedades disponíveis no PROPERTY INSPECTOR para uma frame são:
O nome das frames (campo FRAME NAME) é utilizado em vários locais nomea-
damente na propriedade target dos links.
Por omissão, as frames não possuem molduras (campo BORDERS), não podem
ser redimensionadas (campo NO RESIZE) e não têm barras de deslocamento
(campo SCROLL), mas no PROPERTY INSPECTOR estes valores podem ser alte-
rados.
Para seleccionar um frameset tem de utilizar o painel FRAMES, clicando numa
das molduras mais grossas:
Repare que existem dois framesets, um dentro do outro. Se virmos o código

HTML percebemos a estrutura:
<frameset rows="80,*" cols="*" frameborder="no"
border="0" framespacing="0">
<frame src="cabecalho.html" name="topFrame"
scrolling="No" noresize="noresize" id="topFrame"
title="cabecalho" />
<frameset cols="80,*" frameborder="no" border="0"
framespacing="0">
<frame src="menu.html" name="leftFrame"
scrolling="No" noresize="noresize" id="leftFrame"
title="menu" />
<frame src="conteudo_inicial.html" name="mainFrame"
id="mainFrame" title="conteudo" />
</frameset>
</frameset>
O frameset principal está dividido em duas linhas (que são frames), como
atesta o atributo rows, cujo valor ‘80,*’ define que a linha superior tem uma
altura de 80 píxeis e a linha de baixo tem como altura o resto do espaço dis-
ponível (é isso que significa o *).
A linha de baixo está dividida em duas colunas (que são frames) por um outro
frameset. A primeira frame deste frameset tem uma largura de 80 píxeis.
No PROPERTY INSPECTOR, com o frameset principal seleccionado, também
obtém esta informação:
Aqui pode controlar as dimensões das frames e a apresentação da border em

cada frame.
Vamos tratar agora dos links. Em primeiro lugar vamos aumentar as dimen-
sões da respectiva frame, seleccionando o frameset interior no painel FRAMES,
e depois, no PROPERTY INSPECTOR, com a primeira frame seleccionada, mudar

o valor no campo COLUMN para 120 píxeis:
Agora, para cada link temos de definir a página destino e seleccionar em que
frame é que se pretende que essa página seja apresentada, que no nosso
caso é na frame com o nome mainFrame (se quiser pode mudar o nome da
frame para conteudo, para ser mais fácil de identificar):
Se não seleccionar uma frame no campo TARGET, o que vai acontecer é a

página destino substituir a página menu.html na frame leftFrame e perder
assim o nosso menu. Não se pode esquecer de seleccionar o valor main-
Frame para todos os links do menu.
No capítulo sobre links já tínhamos mencionado que a maior parte dos valores
fixos que aparecem no campo TARGET dizem respeito a frames:
• _blank – abre a página destino numa nova janela do browser (ou
numa nova aba/separador);
• _parent – abre a página destino por cima do frameset parente da
frame corrente, substituindo assim todo esse frameset;
• _self – abre a página destino na frame corrente, substituíndo o con-
teúdo da frame;
• _top – abre a página destino na janela corrente do browser, substi-
tuindo todas as frames (e por arrasto o frameset principal).
Experimentando agora a nossa página num browser e clicando no link FAQ, o
resultado é:
Escolhemos o link FAQ dado que a página faq.html não tem grande forma-
tação e não possui o logótipo. Tente agora o link QUEM SOMOS e verá que
ainda temos muito trabalho pela frente, nomeadamente remover todos os

logótipos das páginas já criadas, e alterar a forma como a informação é apre-
sentada nessas páginas, de forma a adequá-la ao layout criado com as fra-
mes.
13.3 Layouts CSS

Com o aparecimento e a evolução das CSS, os web designers passaram a ter
uma ‘ferramenta’ que possibilitava a criação de layouts sofisticados.
A transição de layouts baseados em tabelas ou em frames, para layouts
baseados em CSS foi lenta, sobretudo por causa de problemas no suporte de
algumas propriedades e valores CSS por parte do Internet Explorer.
Mas após alguns sítios Web de referência terem feito a conversão, os outros
sítios seguiram o exemplo. Além disso, começaram a surgir formas de contor-
nar os problemas colocados pelo Internet Explorer.
13.3.1 Tracing image

A maior parte das vezes os layouts de páginas Web são criados em ferra-
mentas de desenho, como o Adobe Photoshop, o Adobe Fireworks ou o
Adobe Illustrator. A facilidade de criar, mover e apagar objectos nestas aplica-
ções torna-as a ferramenta ideal para a tarefa.
Só que depois é necessário converter esse layout para elementos HTML e
propriedades CSS. O Dreamweaver facilita essa conversão permitindo que
uma imagem JPEG, GIF, ou PNG seja utilizada como imagem de fundo da
página para servir como guia no desenho do layout Web.
Esta funcionalidade tem o nome de tracing image, e a imagem é apenas visí-
vel no Dreamweaver, não aparecendo quando a página é visualizada num
browser. Como é evidente, depois do layout da página estar concluído, é con-
veniente remover a tracing image. A cor ou imagem de fundo da página não
são visíveis quando se utiliza uma tracing image.
Para colocar uma tracing image num documento, pode-se utilizar um de dois
métodos:
• Seleccionar a opção VIEW > TRACING IMAGE > LOAD;
• Seleccionar a opção MODIFY > PAGE PROPERTIES e, na caixa de diálogo
que aparece, seleccionar a categoria TRACING IMAGE e depois clicar no
botão BROWSE:
Em qualquer dos casos aparece a caixa de diálogo SELECT IMAGE SOURCE

onde se selecciona o ficheiro que contém a imagem que se pretende utilizar
como tracing image.
Uma das primeiras decisões que se tem de tomar é o nível de transparência
da tracing image. Por omissão, esse nível é 100%, o que produz uma imagem
opaca que pode interferir com o trabalho normal de desenho da página no
Dreamweaver.
Na caixa de diálogo PAGE PROPERTIES (opção MODIFY > PAGE PROPERTIES),
existe um slider que permite definir o nível de transparência:
Um nível de transparência de 50% é suficiente para se ter uma ideia do layout

que temos de criar, e não interfere com o trabalho de desenho da página no
Dreamweaver:
O menu VIEW > TRACKING IMAGE possui diversas opções que nos permitem
controlar a visualização e o posicionamento da tracing image:
A opção SHOW mostra ou esconde a tracing image, o que é útil quando se

pretende ver a página com a respectiva cor ou imagem de fundo.
Caso pretenda colocar a tracing image em outra posição, seleccione a opção
ADJUST POSITION, e na caixa de diálogo ADJUST TRACING IMAGE POSITION,
introduza novas coordenadas X e Y, que são relativas ao canto superior

esquerdo da página. Repare que, por omissão, a tracing image não está
encostada ao lado esquerdo e ao topo, mas se atribuir o valor 0 às duas coor-
denadas, resolve-se esse problema.
13.3.2 Elementos block-level versus elementos inline

Em HTML os elementos dividem-se em duas categorias: block-level e inline
(ou text-level).
Os elementos block-level ocupam toda a largura do elemento parente, o que
significa que não podem existir dois elementos block-level na mesma linha, a
não ser que se utilizem propriedades CSS para alterar esse comportamento.
Isto também significa que quando se utiliza um elemento HTML do tipo block-
level, o browser ‘muda de linha’.
Os elementos block-level podem conter elementos inline ou outros elementos
block-level. Nem todos os elementos block-level podem conter todos os outros
elementos block-level. Por exemplo, um parágrafo não pode conter listas,
tabelas, cabeçalhos ou outros elementos p. O elemento div pode conter
todos os outros elementos block-level inclusive outros elementos div.
Grande parte dos elementos HTML que utilizamos até agora é do tipo block-
level: h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, blockquote,
hr, div, form e fieldset. São estes elementos que estruturam o conteúdo
de uma página.
Os elementos inline são tratados como parte do fluxo do texto do documento.

Apenas ocupam na página o espaço relativo ao seu conteúdo, não obrigando
o browser a ‘mudar de linha’. De uma forma geral, os elementos inline apenas
podem conter dados e outros elementos inline. Teoricamente também não se
pode definir a largura e a altura de um elemento inline, se bem que algumas
versões do Internet Explorer o permitam.
Elementos inline do HTML que utilizamos até agora: a, em, strong, sup, sub,
span, br, img, object, input, select e textarea.
Se atribuirmos uma cor de fundo a um elemento block-level e a um elemento
inline, perceberá rapidamente uma das diferenças entre eles:
A cor de fundo aplicada ao elemento block-level (que é um parágrafo) permite

verificar que é utilizada toda a largura da janela do browser (ou do elemento
parente do parágrafo). Enquanto que, no caso do elemento <span>, que é um
elemento inline, apenas o texto recebe a cor de fundo.
Como já vimos anteriormente é possível converter um elemento block-level
num elemento inline, e vice-versa, utilizando a propriedade display das
CSS.
13.3.3 O elemento div

Um dos elementos block-level mais importantes é o <div> que, ao contrário
dos outros elementos HTML, não é visível, por omissão, numa página. Este é
o elemento por excelência que é utilizado nos layouts CSS.
Para se inserir um elemento <div> na página podemos utilizar a opção
INSERT > LAYOUT OBJECT > DIV TAG, mas é mais prático recorrermos ao ícone
INSERT DIV TAG da categoria LAYOUT do painel INSERT:
A caixa de diálogo INSERT DIV TAG permite-nos definir onde é que vamos inse-
rir o elemento <div> (campo INSERT), o que nos vai ser útil mais para a frente:
Temos também a possibilidade de atribuir uma identificação (campo ID), que é

sempre obrigatória neste tipo de elementos dado que é a forma ideal de serem
referenciados num selector CSS. O botão NEW CSS RULE permite-nos criar um
estilo CSS que ficará associado ao elemento div e cujo nome será uma
classe (caso tenha preenchido o campo Class), ou um id (caso tenha preen-
chido o campo ID).
Após atribuirmos um id ao elemento e clicarmos no botão OK, a aparência do
elemento no documento é:
Como um elemento <div> não possui nenhum conteúdo de origem, nem é

visível na página, o Dreamweaver insere o texto CONTENT FOR ID "CONTEUDO"
GOES HERE, além de colocar um quadrado tracejado a definir os respectivos
limites (se a opção CSS LAYOUT OUTLINES estiver activada). Se o Dreamwea-
ver não utilizasse estas formas de identificar o elemento div na página, o web
designer teria dificuldade em o identificar.
Mas mesmo sem estas ajudas, é possível identificar um elemento div porque
quando se passa com o rato por cima dos seus limites (a chamada outline),
aparece um rectângulo vermelho:
Se clicar nesse rectângulo, o elemento div ficará seleccionado, aparecendo

agora identificado com um rectângulo azul:
Normalmente costuma-se criar um elemento div e só depois colocar conteúdo

lá dentro. Mas pode acontecer que já tenha o conteúdo introduzido na página
e pretenda colocar esse conteúdo dentro de um elemento div. Se o elemento
div já existir, pode arrastar o conteúdo para dentro dele. Se o elemento div
não existir, uma forma rápida de o criar já com o conteúdo lá dentro é recorrer
à opção INSERT DIV TAG da categoria LAYOUT do painel INSERT. Com o con-
teúdo seleccionado,
escolha essa opção e depois, na caixa de diálogo que aparece, repare que o
valor seleccionado na lista INSERT é W RAP AROUND SELECTION,
o que significa que o elemento div vai ser colocado ‘à volta’ do conteúdo
seleccionado:
Se preferir um método que recorra apenas ao teclado, com o conteúdo selec-

cionado, tecle CONTROL+T (COMMAND+T no Macintosh) e escreva o seguinte:
13.3.4 Opções de visualização dos elementos CSS

Através do menu VISUAL AIDS, o Dreamweaver disponibiliza ajudas visuais que
ajudam o web designer a identificar visualmente na página certas proprieda-
des CSS relacionadas com o layout:
As quatro ajudas só são aplicadas aos CSS LAYOUT BLOCKS que é o nome
genérico atribuído no Dreamweaver aos elementos div ou a qualquer ele-
mento da página que possua as seguintes propriedades e valores CSS atri-

buídos: display:block, position:absolute ou position:relative.
Por exemplo:
• Uma imagem com uma propriedade position definida com o valor
absolute ou relative;
• Um link (elemento a) com o valor da propriedade display igual a
block;
• Um parágrafo com uma propriedade position definida com o valor
absolute ou relative;
Por omissão, três destas ajudas estão activas:
• CSS LAYOUT BOX MODEL – Apresenta os valores de diversas
propriedades CSS, nomeadamente as que fazem parte do box model
(margin, padding e border) para qualquer CSS LAYOUT BLOCK. Por
exemplo, para um elemento div, se clicarmos em cima da outline
(rectângulo tracejado), aparecem identificadas visualmente as proprie-
dades referidas:
E esperando 1 segundo com o cursor em cima de qualquer parte do

CSS LAYOUT BLOCK, aparece também uma tooltip com os valores des-
sas propriedades. No caso do conteúdo, aparecem outras proprieda-
des que não têm a ver com o box model:
• CSS LAYOUT OUTLINES – apresenta um rectângulo tracejado (em

inglês, outline) à volta dos CSS LAYOUT BLOCKS.
É por causa desta opção estar activada que os elementos div apare-
cem na vista DESIGN do Dreamweaver identificados por um rectângulo
tracejado.
• AP ELEMENT OUTLINES – permite identificar os elementos que estão
posicionados de forma absoluta, isto é, que possuem o valor abso-
lute na propriedade position.
Outra opção que é bastante útil mas que não está seleccionada por omissão é
a CSS LAYOUT BACKGROUNDS que atribui temporariamente cores de fundo
aleatórias a CSS LAYOUT BLOCKS, e esconde outras cores ou imagens de fundo
que existam na página. As cores utilizadas ajudam a identificar rapidamente,
por exemplo, os elementos div existentes na página.
Por exemplo:
13.3.5 Utilização de floats

Normalmente, os elementos HTML que são inseridos numa página seguem
um fluxo que vai do topo ao fundo da página. Contrariamente aos programas
de desenho, não existe nenhum elemento HTML que possibilite colocar ele-
mentos block-level, como parágrafos ou elementos div uns ao lado dos
outros. Com os elementos inline, isso já é possível, como, por exemplo uma
imagem, em que utilizando o atributo align podemos colocar texto ao lado
direito ou esquerdo da imagem.
A propriedade float das CSS é a propriedade principal na criação de layouts
e permite retirar um determinado elemento/objecto do fluxo normal do con-
teúdo de uma página e ‘flutuar’ esse elemento.
Uma das utilizações mais comuns é para colocar texto à volta de uma ima-
gem. Lembre-se que efectuamos esta operação num capítulo anterior recor-
rendo ao atributo align do elemento img.
A propriedade float possui dois valores: left e right. Isto significa que se
pretendermos colocar texto ao lado direito de uma imagem, temos de atribuir o
valor left à propriedade float no estilo associado à imagem. Normalmente
convém também atribuir um valor à propriedade margin-right para afastar
o texto do lado direito:
Repare que o texto segue o fluxo normal do documento e por isso passa para
debaixo da imagem. Para conseguirmos que o resto da lista apareça na
sequência dos itens que se encontram ao lado da imagem, temos de atribuir
um valor à propriedade margin-bottom do estilo associado à imagem:
13.3.6 Layouts baseados em floats

No desenho de layouts deve seguir as seguintes regras:
• utilize uma estrutura simples.
• a estrutura deve existir para exprimir significado, não para encaixar
num design predefinido. Os elementos da página devem ter um signi-
ficado.
• o fluxo normal do documento HTML deve controlar a maior parte do
layout.
• muitos utilizadores visualizarão, por várias razões, o conteúdo da
página sem estilos CSS. Nesses casos pretenderá assegurar que os
elementos da página aparecem por uma ordem lógica. Daí a importân-
cia de estruturar a página com elementos HTML.
Recorrendo à propriedade float vamos agora criar o layout que definimos

anteriormente utilizando tabelas e frames.
Dica
Durante este exercício convinha que estivesse activada a opção CSS LAYOUT
BACKGROUNDS do menu VISUAL AIDS (barra DOCUMENT), para que seja atri-
buída uma cor de fundo a cada elemento div que criarmos. Evitamos assim a
utilização de cores de fundo para conseguir distinguir entre os vários elemen-
tos div que vamos criar.
Em primeiro lugar temos de criar cinco elementos div. Um para cada área
(cabeçalho, menu, conteúdo e rodapé), mais um que envolve estes quatro.
Este elemento div ‘exterior’, que na gíria se chama wrapper, e envolve todo o
conteúdo da página, possibilita, entre outras coisas, centrar o conteúdo da
página na janela do browser.
Permite também definir uma largura para o conteúdo da página, e fornecer um
ponto de referência para esse conteúdo. Dentro do wrapper coloca-se todo o
conteúdo da página pela ordem pela qual se pretende que seja acedido, para
o caso do visitante não utilizar estilos CSS.
No nosso caso, a ordem dos elementos div será (utilizamos os nomes que
vamos atribuir a cada um deles:
• wrapper
• cabecalho
• menu
• conteudo
• rodape
Visualmente, o layout pretendido é:
Wrapper
Cabeçalho
Menu Conteúdo
Rodapé
Todos os browsers possuem valores por omissão para as margens e o pad-

ding do elemento body. Para um posicionamento consistente em todos os
browsers convém colocar esses valores a 0.
Criamos para isso um estilo composto:
html, body {
margin: 0px;
padding: 0px;
}
A maior parte dos browsers vê o elemento body como o elemento parente de

todo o conteúdo da página, mas alguns browsers vêem o elemento html
como o elemento parente de topo, daí a sua inclusão no selector CSS.
Podemos agora atribuir uma cor de fundo à página e centrar os elementos:
body {
text-align: center;
background-color: #9FF
}
Já anteriormente tínhamos definido no ficheiro estilos.css uma cor por

omissão para o fundo de todas as páginas, por isso, não necessitávamos de o
fazer aqui.
A utilização da propriedade text-align com o valor center prende-se com
um problema existente em algumas versões do Internet Explorer que não
interpretam correctamente a propriedade margin com o valor auto, que
vamos utilizar para centrar o wrapper na página.
Agora inserimos na página o elemento div correspondente ao wrapper (o div
é inserido na posição corrente do cursor na página),
e criamos um estilo com as seguintes propriedades clicando no botão NEW

CSS RULE:
#wrapper {
margin: 0 auto
width: 930px;
}
A propriedade margin é utilizada para centrar o elemento div na página.

Habitualmente definimos um valor para cada margem o que corresponde a
quatro propriedades: margin-top, margin-right, margin-bottom, mar-
gin-left. Quando utilizamos o mesmo valor para todas as margens pode-
mos utilizar uma única propriedade: margin:10px.
Mas neste caso temos dois valores. O valor 0 é para as propriedades mar-
gin-top e margin-bottom, enquanto o valor auto é para as propriedades
margin-left e margin-right.
Inserindo os valores na caixa de diálogo CSS RULE DEFINITION escusa de se
preocupar com isto:
O valor auto significa: determinar a largura do elemento parente (no nosso

caso, o elemento body), dividir esse valor por dois e atribuir o resultado à
margem esquerda e à margem direita. Temos assim um elemento div perfei-
tamente centrado.
A largura foi definida atribuindo um valor em píxeis, e define a largura máxima
utilizada para o conteúdo. Num ecrã com uma resolução de 1024x768, este
valor é o adequado, embora pudéssemos utilizar um valor ligeiramente maior.
Caso o visitante veja a página num ecrã com uma resolução superior, por
exemplo, 1280x1024 (ou 1280x800, que é a resolução de muitos portáteis),
aparecerão duas barras verticais de cada lado do conteúdo com a cor de
fundo da página. Além da resolução 1440x900 utilizada nos ecrãs wide, estas
são as três resoluções mais utilizadas nos monitores dos visitantes dos sítios
Web.
Podemos evitar que essas barras apareçam utilizando unidades relativas,
como percentagens, mas neste caso é mais trabalhoso o controlo do design.
Este tipo de layouts mais flexíveis tem o nome de liquid layouts, enquanto os
layouts que utilizam unidades absolutas (como píxeis) se chamam fixed
layouts. É possível ter uma mistura dos dois, por exemplo fixando a largura de
certos elementos da página, como o nosso menu, e permitindo que outros
elementos, como o nosso div com o conteúdo, tenham uma largura flexível
que se adapta à dimensão da janela do browser.
A nossa página tem neste momento o seguinte aspecto (em modo DESIGN):
Primeiro apagamos o texto que se encontra dentro do wrapper (o div ficará

muito estreito mas não se preocupe) e em seguida vamos criar o div para o
cabeçalho. Para assegurar que criamos este novo div dentro do wrapper,
vamos seleccionar a opção AFTER START OF TAG no menu INSERT e o valor <DIV
ID="WRAPPER"> na lista que aparece a seguir (AFTER START OF TAG significa
após a etiqueta/tag de início, o que quer dizer, dentro do elemento) :
Depois de introduzirmos o nome no campo ID, clicamos no botão NEW CSS

RULE para criar um estilo para este div:
Atribuímos uma altura de 100px a este elemento div porque o nosso logótipo
tem uma altura de 72px, mas podíamos não ter atribuído nenhum valor, que o
conteúdo do elemento div definiria a altura a utilizar. A largura é idêntica à do
div wrapper.
O div que vai conter o menu, é definido para aparecer a seguir ao div do
cabeçalho (repare no campo INSERT):
Para este div vamos só definir a largura:

#menu {
width: 200px;
}
Em modo DESIGN (e com a opção CSS LAYOUT BACKGROUNDS activada) a

nossa página tem o seguinte aspecto:
Segue-se o div para o conteúdo específico de cada página:
Para já não vamos criar nenhum estilo para este div.

Finalmente, criamos o elemento div para o rodapé:
Neste div não vamos definir a altura, deixando que o conteúdo a defina. A
largura é idêntica à do div wrapper, embora, como se trata de um elemento
block-level, ajustava-se automaticamente à largura do seu elemento parente
que é o wrapper.
#rodape {
width: 930px;
border-top: solid 1px #000;
margin-top: 10px;
}
Aproveitamos para colocar uma linha separadora na moldura de topo e para

atribuir uma margem superior de 10px para afastar o rodapé do resto do con-
teúdo da página.
A aparência actual da nossa página é:
E em código:
<body>
<div id="wrapper">
<div id="cabecalho">Content for id "cabecalho" Goes
Here</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="conteudo">Content for id "conteudo" Goes
Here</div>
<div id="rodape">Content for id "rodape" Goes
Here</div>
</div>
</body>
Temos agora de colocar o elemento conteudo ao lado direito do elemento

menu. Para isso utilizamos a propriedade float com o valor left no ele-
mento menu:
#menu {
width: 200px;
float: left;
}
O resultado não é bem o esperado:

O elemento conteudo passou para o lado direito do elemento menu, mas

também se encontra por baixo deste elemento. O elemento rodape também
se encontra parcialmente debaixo do elemento menu.
Isto acontece porque ao atribuirmos a propriedade float a um estilo aplicado
ao elemento menu, este deixou de estar inserido no fluxo normal do texto e os
elementos que se encontravam imediatamente abaixo ocuparam o seu lugar.
O primeiro problema resolve-se atribuindo uma largura ao elemento con-
teudo. Temos de criar um estilo para este elemento:
A largura utilizada corresponde ao resultado da subtracção entre a largura do

wrapper (930px) e a largura do elemento menu (200px).
Aproveitamos para aplicar uma propriedade float com o valor right ao
elemento conteudo para exemplificar a forma como poderíamos ter, de forma
natural, um espaço entre os elementos menu e conteudo sem recorrer a
margin e a padding. Mas para isso teríamos de reduzir a largura do ele-
mento conteudo em alguns píxeis.
Repare que agora o rodapé ainda está debaixo do elemento menu:
Se introduzirmos alguns parágrafos em branco no elemento conteudo para

simular linhas de texto, repare como o elemento rodape parece que só apa-
rece debaixo do elemento menu:
O elemento rodape está a tentar encontrar um espaço livre no fluxo do con-

teúdo do documento em que se possa encaixar. Mas nós não queremos que
ele vá para a esquerda nem para a direita, queremos que ele fique abaixo dos
elementos menu e conteudo.
Para isso vamos ter de ‘dizer’ ao elemento rodape que não deve ‘flutuar’ para
nenhum dos lados. O ‘problema’ da propriedade float é que todos os ele-
mentos que aparecem, no fluxo do documento, a seguir a um elemento que
tenha essa propriedade definida, herdam a propriedade. Para cortar essa
‘ligação’ recorremos à propriedade clear com o valor both:
E cá temos nós o nosso layout terminado, faltando apenas a introdução de

conteúdo:
Repare que o conteúdo de cada div aparece centrado. Isso deve-se à utiliza-
ção de text-align: center no elemento body por causa de problemas
com o Internet Explorer. Temos então de acrescentar a seguinte propriedade
ao estilo aplicado ao elemento wrapper:
#wrapper {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 930px;
text-align: left;
}
Com conteúdo extraído da página quemsomos.html o resultado é:

Necessitamos de atribuir uma margem superior à imagem (10px), dado que

está muito encostada ao limite da página, e de afastar dos limites o texto que
se encontra dentro do elemento conteudo.
Poderíamos ser tentados a utilizar um padding (15px) no elemento conteudo,
mas o resultado não seria o esperado (visualização no browser):
Isto aconteceu porque a largura de um elemento corresponde à soma da

espessura da moldura (border) esquerda, mais a largura do padding esquerdo,
mais a largura do conteúdo, mais a largura do padding direito, mais a largura
da moldura direita. Neste caso, não temos moldura definida, mas temos os
outros três valores que, somados, 15+730+15, perfazem 760. Se somarmos a
largura do elemento menu (200px), chegamos ao valor 960px que é superior à

largura do elemento wrapper, que é 930px. Como o elemento conteudo não
cabe nas dimensões do elemento wrapper ao lado do elemento menu, pas-
sou para baixo.
Cá está um dos problemas da utilização de unidades absolutas e de valores
fixos na largura dos elementos do layout de uma página. É necessário fazer
muito bem as contas para tudo bater certo.
Para resolver o problema, mudamos a largura do elemento conteudo para
700px:
Em alternativa podíamos ter utilizado margens, mas existem versões do Inter-

net Explorer que se dão mal com a sua utilização em elementos que possuem
atribuída uma propriedade float.
13.3.7 Starter Pages

A utilização de floats para criar layouts de páginas é um pouco complicada
para quem nunca trabalhou ou tem pouca experiência com CSS. Esta dificul-
dade é ainda maior se pretendermos criar layouts mais sofisticados.
A Adobe, reconhecendo este problema, disponibiliza no Dreamweaver layouts
predefinidos aos quais chamou starter pages. São layouts que obedecem às
normas, e são compatíveis cross-browser, o que significa que têm pratica-
mente a mesma aparência numa conjunto de browsers e de versões desses
browsers, nomeadamente:
• Internet Explorer 5 a 8
• Firefox Mac/Windows 1, 2 e 3
• Opera Mac/Windows 8 e 9
• Safari 2, 3 e 4
Para se criar um destes layouts acede-se à caixa de diálogo NEW DOCUMENT,
através da opção FILE > NEW:
As Starter Pages aparecem na coluna LAYOUT, a seguir à opção <none>. Na

imagem anterior temos seleccionada a opção que corresponde ao layout que
criamos anteriormente.
Repare que existem layouts com larguras fixas (fixed) e com larguras variáveis
(liquid), e com 1, 2 ou 3 colunas. Caso tenha instalado a versão 11.0.3 ou o
Dreamweaver CS5 HTML 5 Pack Update, terá de bónus mais dois layouts que
utilizam as normas HTML5 e CSS3.
Quando escolhe uma das starter pages, o Dreamweaver permite colocar os
estilos utilizados na página, numa nova folha de estilos externa, numa folha de
estilos existente, ou embeber os estilos na própria página:
O ideal é colocar os estilos CSS num ficheiro separado para que possa ser
utilizado em outras páginas do sítio Web. Terá de atribuir um nome ao ficheiro,
como, por exemplo, estilos.css.
Escolhendo então a starter page «2 COLUMN FIXED, LEFT SIDEBAR, HEADER AND
FOOTER», o que aparece na janela DOCUMENT do Dreamweaver é o seguinte:
Conteúdo exemplo e cores neutras de fundo marcam claramente as áreas de

conteúdo que pode ser substituído pelo nosso próprio conteúdo. Se reparar, a
maior parte das áreas tem instruções sobre a forma de substituir o conteúdo.
Se mudar para a vista CODE pode verificar que os estilos e as propriedades
CSS utilizadas têm comentários associados para que o web designer aprenda
a criar layouts:
13.3.8 Posicionamento absoluto de elementos

Para os designers que estão habituados a utilizar o Adobe Photoshop ou outro
tipo de programas de desenho, a utilização de floats para criar um layout de
uma página é muito complicada. Esses designers estão habituados a colocar
os elementos numa página sem qualquer tipo de restrições.
Uma possibilidade de criar layouts de páginas que pode agradar a esses
designers é a utilização de elementos posicionados de forma absoluta. Neste
caso, a página é uma folha em branco e podemos dispor os nossos elementos
(normalmente elementos div) em qualquer parte da página.
O posicionamento absoluto utiliza um sistema de coordenadas cujo ponto 0,0
se situa no canto superior esquerdo do elemento parente, desde que este
tenha aplicada uma propriedade position. No caso dos elementos div que
criamos anteriormente, o elemento parente directo é o wrapper, mas como
este elemento não tem aplicada uma propriedade position, então o ele-
mento de referência para todos os elementos div da página, inclusive para o
elemento wrapper, é o elemento body e neste caso o ponto 0,0 é o canto
superior esquerdo da página.
Uma das limitações deste tipo de posicionamento é que temos sempre de for-
necer as coordenadas para posicionar o elemento, dado que ele é removido
do fluxo normal do documento e ‘flutua’ por cima do resto do conteúdo da
página. Estas coordenadas são definidas pelas propriedades left e top, que
são relativas aos limites da página. Isto é, um valor de 20px atribuído à pro-
priedade left significa que o elemento ao qual a propriedade é aplicada
ficará afastado 20px do limite esquerdo da página.
Como curiosidade o facto de se poderem utilizar valores negativos nas co-
ordenadas. Isso significa que o elemento terá parte do conteúdo ‘fora’ do ecrã.
Dado que podem existir vários elementos posicionados de forma absoluta
numa página, existe a probabilidade de se sobreporem. Para controlar a
ordem de sobreposição existe a propriedade z-index. Por omissão o valor 0
corresponde ao conteúdo normal da página. Valores mais altos significam que
os elementos aos quais são aplicados aparecem por cima dos outros. Pode-
mos ver esta sobreposição como sendo o equivalente aos layers dos progra-
mas de desenho.
Vamos converter o nosso layout para elementos posicionados de forma abso-
luta. Para inserir um elemento deste tipo numa página (no Dreamweaver estes
elementos chamam-se AP ELEMENTS), recorremos ao ícone DRAW AP DIV do
panel INSERT (em alternativa, INSERT > LAYOUT OBJECTS > AP DIV):
O cursor transforma-se numa cruz, +, e temos de desenhar o div na página

utilizando o método de clicar e arrastar:
Para desenhar o elemento AP Div, o ideal é activar a régua e provavelmente

definir algumas guias. Depois de largar o rato o elemento div tem o seguinte
aspecto:
O código relativo ao elemento AP Div, que não é mais do que um elemento

div com um atributo id,
<div id="apDiv1"></div>
é inserido no local onde o cursor se encontrava na página.

Pode mover o elemento AP Div clicando e arrastando pela sua moldura ou

pelo quadrado que existe no canto superior esquerdo:
Os quadrados que se encontram nos cantos e a meio dos lados permitem

redimensionar o elemento AP Div.
Caso este elemento tenha sido desenhado por cima de texto, poderá verificar
que, por omissão, não tem cor de fundo:
Mesmo sem estar seleccionado, o elemento AP Div é visível na página porque

normalmente uma das opções CSS LAYOUT OUTLINES ou AP ELEMENT
OUTLINES está activada no menu VISUAL AIDS da barra DOCUMENT:
Com o elemento seleccionado podemos verificar no PROPERTY INSPECTOR que

propriedades estão disponíveis e que valores foram atribuídos quando dese-
nhamos o elemento:
Foram definidas as coordenadas do canto superior esquerdo (left e top) a

largura (height) e a altura (width). Também foi atribuído um id ao elemento
criado (apDiv1). O valor 1 no campo Z-INDEX significa que o elemento flutua
por cima do conteúdo normal da página.
No painel CSS STYLES também podemos verificar que foi criado um estilo que
tem associadas todas estas propriedades que aparecem no Property Ins-
pector.
A propriedade que define o elemento como posicionado de forma absoluta é a

propriedade position com o valor absolute.
Ao lado do painel CSS STYLES costuma estar o painel AP ELEMENTS que per-
mite seleccionar elementos AP, verificar que elementos AP se encontram na
página, se estão ou não visíveis (propriedade visibility que também pode
ser definida no PROPERTY INSPECTOR) e qual é o respectivo valor da proprie-
dade z-index:
Repare que à medida que vai criando novos elementos AP Div o Dreamwea-
ver vai-lhes atribuindo um valor de z-index mais alto.
Para o nosso layout, o primeiro AP Div que vamos criar é o cabecalho.
Desenhamos um elemento AP Div na página e depois atribuímos os seguintes
valores ao estilo CSS associado:
Ao criarmos os elementos AP Div para o menu e o conteudo, deparámo-nos

com um problema. Que valor vamos utilizar para a propriedade height? Na
realidade podemos utilizar qualquer valor, dado que o conteúdo do elemento
AP Div vai ‘esticando’ à medida que o conteúdo vai necessitando de espaço.
Por isso a propriedade height é apenas um valor mínimo, a não ser que se
utilize a propriedade overflow.
Para o AP Div menu,
e para o AP Div conteudo:
Neste momento a página tem a seguinte aparência:

Só falta agora criar o AP Div para o rodape. Mas agora é que temos um pro-
blema sério. Que valor vamos atribuir à propriedade top deste elemento? É
que não temos forma nenhuma de saber qual vai ser a altura dos elementos
menu e conteudo.
Esta é uma grande limitação de apenas utilizarmos posicionamento absoluto
para criarmos um layout de uma página. Claro que é possível criar um layout
desta forma, mas apenas se soubermos de antemão as dimensões (largura e
altura) dos elementos AP Div que vamos utilizar. Além disso é impossível criar
layouts flexíveis que se adaptam às dimensões da janela do browser do visi-
tante do nosso sítio Web e à resolução do respectivo ecrã.
A maior parte das vezes os elementos posicionados de forma absoluta utili-
zam-se em conjunto com os floats e o posicionamento relativo para criar
determinados ‘efeitos’ que são impossíveis de obter de outra forma.
Outra utilização é a criação de pseudo-pop-ups como os que são actualmente
utilizados para apresentar publicidade criada em Flash por cima do conteúdo
da página. O sítio Web do jornal Público é um dos utilizadores dessa técnica.
13.3.9 Posicionamento relativo

O posicionamento relativo de um elemento tem a ver com um novo posiciona-
mento do elemento relativamente ao local onde seria encontrado na página.
Podemos utilizar as propriedades left, top, right e bottom para controlar
essa nova localização. O espaço ocupado originalmente pelo elemento per-
manece inalterado e é como se o elemento ainda lá estivesse, não podendo
ser utilizado por outro elemento da página. O espaço originalmente ocupado
pelo elemento permanece na página. De realçar que um elemento posicionado
de forma relativa continua a fazer parte do fluxo normal do documento.
A utilização de elementos posicionados de forma relativa é bastante limitada,
mas em alguns casos é importante.
O posicionamento relativo permite-nos, por exemplo, reproduzir o comporta-
mento dos elementos <sub> e <sup> do HTML. Num capítulo anterior cria-
mos em HTML o símbolo químico da água, H2O.
Para fazê-lo com propriedades CSS, primeiro colocávamos o 2 dentro de um
elemento span e atribuíamos-lhe um id (por exemplo, agua):
Basta agora criar um estilo CSS com as seguintes propriedades e valores:

Reduzindo o tamanho da letra para 0.8em,
obtemos o resultado pretendido:
Outra utilização do posicionamento relativo é permitir redefinir o elemento

parente de um elemento posicionado de forma absoluta. Referimos anterior-
mente que no caso dos elementos posicionados de forma absoluta, o ele-
mento parente é o primeiro na hierarquia que possua uma propriedade posi-
tion definida. Caso não exista nenhum, o que é o mais comum, então o
posicionamento é efectuado em relação ao pai de todos os elementos da
página, o elemento body.
Combinando o posicionamento absoluto e o posicionamento relativo, vamos
colocar o menu existente na página index.html no canto superior direito do
nosso layout:
Copiamos, da página index.html, o elemento ul e os estilos que lhe estão

associados. Temos de efectuar uma ligeira alteração no div menu, tendo de
mudar-lhe o nome para div_menu para não interferir com o elemento ul que
também se chama menu. Mudamos também o nome do estilo #menu as-
sociado ao div, para #div_menu.
A lista deve ser colocada a seguir ao logótipo:
<div id="wrapper">
<div id="cabecalho"><img
src="../_imagens/logotipo.png" alt="logotipo"
name="logotipo" width="163" height="72"
id="logotipo" /><ul id="menu">
<li><a
href="stock/destaques.html">Destaques</a></li><li><
a href="info/quemsomos.html" title="Informação
sobre a empresa AutoVende">Quem
Somos</a></li><li><a
href="info/faq.html">FAQ</a></li><li><a
href="info/contactar.html">Contactar</a></li><li><a
href="registo.html">Registo</a></li>
</ul></div>
O menu aparece logo por baixo da imagem, alargando a altura do cabecalho

(visualização em LIVE VIEW):
Atribuímos agora o valor relative à propriedade position do elemento

cabecalho:
Não é alterada a aparência da página dado que não mexemos nas proprieda-
des top, right, bottom e left do cabecalho. A propriedade position
com o valor relative, possibilitou-nos apenas posicionar elementos de
forma absoluta dentro do elemento cabecalho.
Vamos agora posicionar de forma absoluta a lista não numerada:
Também não houve alterações na página e pela mesma razão apresentada

anteriormente. Temos agora de definir as coordenadas de posicionamento
absoluto da lista. Como queremos encostar a lista ao lado direito e ao topo
vamos utilizar o valor 0 para as propriedades top e right:
Estamos quase no pretendido:
O menu ainda não encosta à parte de cima da página. Isso acontece devido à
forma como foi construído. A solução é manipular a margem superior do ele-
mento ul:
O resultado final é:
Será que o posicionamento deste menu podia ser efectuado de outra forma?
Podia, mas não era a mesma coisa!
Por exemplo, podíamos criar dois elementos div, um com a imagem e outro
com a lista. Aplicávamos um float: left ao div que tinha a imagem e um
float:right ao div que tinha a lista. Em seguida alinhávamos o texto à
direita no div que continha a lista, e fazíamos as contas para definir o valor a
aplicar à margin-bottom da lista ou utilizávamos as propriedades dis-
play:table-cell e vertical-align:middle, que só são suportadas
nos browsers mais modernos. Parece-nos bastante mais complicado e pouco
lógico.
14 Behaviors JavaScript
Historicamente, a linguagem JavaScript sempre foi utilizada para dar inte-

ractividade às páginas Web e torná-las, assim, mais atractivas para o visitante
dos sítios Web. Com o aparecimento do Flash perdeu alguma importância,
mas nos últimos anos, com o aparecimento do AJAX e de várias frameworks
como o jQuery, voltou à ribalta.
Dado que a JavaScript é uma linguagem de difícil aprendizagem para o web
designer, o Dreamweaver disponibiliza scripts JavaScript predefinidos que
permitem efectuar um conjunto de efeitos interactivos que são bastante utiliza-
dos actualmente em sítios Web.
Esses scripts têm o nome de behaviors, e permitem que qualquer web desig-
ner possa aplicar efeitos interactivos sem perceber nada de JavaScript.
14.1 Behaviors, eventos e acções

No Dreamweaver, uma behavior é a combinação entre um evento e uma
acção. Por exemplo, clicando (evento) num botão algo acontecerá (acção). As
behaviors estão associadas a um elemento específico da página, quer se trate
de um link de texto, de uma imagem ou do elemento <body>.
Os eventos podem ser interactivos, como o clique de um utilizador num link,
ou automáticos, como o carregamento de uma página Web. Existem eventos
por omissão para as behaviors, tendo em conta o elemento utilizado.
Praticamente todas as acções que o utilizador pode efectuar numa página
possuem associado um evento.
Por exemplo, associado à página Web existem dois eventos:
load – Ocorre quando a página termina o seu carregamento.
Também pode ser utilizado com imagens.
unload – Ocorre quando o utilizador sai da página, porque fecha o
browser, clica num link ou escreve outro endereço na barra
de endereços.
Estes eventos podem estar associados a elementos body e frameset.
Como seria de esperar, o maior número de eventos estão associados ao rato:

click – Ocorre quando se clica com o botão principal do rato
num elemento da página. Pode ser utilizado com a
maior parte dos elementos de uma página (texto, links,
imagens, etc.).
dblclick – Ocorre quando se efectua um duplo-clique com o botão
principal do rato num elemento da página. Pode ser
utilizado com a maior parte dos elementos de uma
página (texto, links, imagens, etc.).
mousedown – Ocorre quando o botão principal do rato está a ser
pressionado.
mouseup – Ocorre quando o botão principal do rato, depois de ter
sido pressionado, é largado pelo utilizador.
mouseover – Ocorre quando o cursor do rato passa por cima de um
elemento da página.
mousemove – Ocorre quando o cursor do rato é movimentado
enquanto se encontra por cima de um elemento da
página.
mouseout – Ocorre quando o cursor do rato é movido para ‘fora’ de
um elemento da página. É o inverso do evento
mouseover.
Quando se clica num elemento a sequência de eventos é mousedown,
mouseup e click. Quando se passa com o rato por cima de um elemento a
sequência de eventos é mouseover, mousemove e mouseout.
Os eventos associados ao rato podem ser utilizados com a maior parte dos
elementos de uma página (texto, links, imagens, etc.).
Associados ao teclado existem os seguintes eventos:
keypress – Ocorre quando se carrega numa tecla do teclado, isto é,
quando se carrega e se retira o dedo.
keydown – Ocorre quando se está a carregar numa tecla do teclado.
keyup – Ocorre quando se liberta o dedo de uma tecla em que se
tenha carregado.
Quando se carrega numa tecla a sequência de eventos é keydown,
keypress, keyup. Se mantiver a pressionar uma tecla e esta se auto repetir,
podem existir múltiplos eventos keypress entre os eventos keydown e o
keyup, mas isto é dependente do sistema operativo e do browser.
14. BEHAVIORS JAVASCRIPT 415
Os eventos associados ao teclado podem ser utilizados com a maior parte dos
elementos de uma página, mas são mais utilizados com elementos de um
formulário.
Eventos associados com formulários:
submit – Ocorre quando se submete um formulário clicando num
botão de Submit ou num image field. Só se aplica ao
elemento form.
reset – Ocorre quando se faz reset a um formulário clicando num
botão de Reset. Só se aplica ao elemento form.
select – Ocorre quando o utilizador selecciona algum texto de um
campo de texto. Pode ser utilizado com os elementos
input e textarea.
change – Ocorre quando o utilizador altera algum valor num campo de
um formulário e ‘abandona’ esse campo utilizando a tecla
TAB ou clicando em outro campo/objecto da página. Pode
ser utilizado com os elementos input, select e
textarea.
Outros eventos:
focus – Ocorre quando um elemento recebe o foco de atenção do
utilizador, por este ter clicado no elemento ou utilizado a
tecla TAB para aceder ao elemento. Este evento pode ser
utilizado com os elementos a, area, label, input,
select, textarea e button.
blur – Ocorre quando um elemento perde o foco de atenção do
utilizador, por este ter clicado em outro elemento ou utilizado
a tecla TAB para aceder a outro elemento. Pode ser utilizado
com os mesmos elementos do evento onfocus.
abort – Ocorre quando o carregamento de uma imagem é
interrompido. É associado apenas a imagens (img).
error – Ocorre quando um erro é detectado no carregamento de um
documento ou de uma imagem. Foi analisado no capítulo
anterior.
resize – Ocorre quando a janela do browser ou uma frame são
redimensionadas.
De forma a se poderem associar event handlers com elementos HTML
utilizam-se atributos cuja designação corresponde ao evento precedido de on.
Por exemplo, onclick tem a ver com o clique do rato num elemento da
página.
14.2 Utilizar behaviors

O Dreamweaver necessita de um elemento HTML específico para associar
uma behavior. O elemento a é muitas vezes utilizado porque, em JavaScript,
os links podem responder a vários eventos diferentes, incluindo o tradicional
onClick.
Um elemento HTML pode ter múltiplas behaviors associadas, cada uma com
um evento diferente. Um elemento gráfico de navegação pode, por exemplo:
o executar uma acção SWAP IMAGE quando o utilizador passa o rato por
cima (evento onMouseOver);
o executar uma acção SWAP IMAGE RESTORE quando o rato se afasta
(evento onMouseOut);
o e mostrar outra página Web numa janela adicional mais pequena com
a acção OPEN BROWSER WINDOW, quando clicado (evento onClick).
Da mesma forma, um único evento pode desencadear várias acções. Por
exemplo, actualizar frames múltiplas através de um único link utilizando várias
acções GO TO URL associadas ao evento onClick. Além disso, não está
restringido a associar múltiplas instâncias da mesma acção a um único evento.
14.2.1 O painel BEHAVIORS

O painel BEHAVIORS disponibiliza duas colunas que correspondem aos eventos
e às acções, respectivamente:
Existem vários métodos para abrir o painel BEHAVIORS:

o Escolhendo a opção W INDOW > BEHAVIORS;
o Seleccionando o separador BEHAVIORS do painel TAG INSPECTOR, se
este estiver visível;
o Utilizando o atalho de teclado SHIFT+F4.
Depois de associar uma behavior a um elemento, o evento desencadeador
(onClick, onMouseOver, etc.) é apresentado à esquerda, e a acção associa-
da – o que é desencadeado – aparecerá na
coluna da direita. Uma seta ao lado do evento,
permite escolher outro tipo de evento, diferente do utilizado por omissão.

Efectue um duplo-clique em cima da acção para abrir a caixa de diálogo de
parâmetros, onde pode modificar os atributos da acção.
Caso possua várias behaviors associadas a um mesmo elemento, pode
determinar a ordem de execução das acções utilizando as setas que se en-
contram ao lado dos sinais + e -:
Depois de ter associado uma behavior a um elemento HTML e fechado a caixa

de diálogo de parâmetros da acção associada, o Dreamweaver escreve o
código HTML e JavaScript necessário no documento. Dado que contém
funções que têm de ser invocadas de qualquer parte do documento, a parte
principal do código JavaScript é colocada na secção <head> da página; o
código que liga o elemento seleccionado a estas funções é escrito na secção
<body>. Algumas acções, poderão colocar código HTML ou JavaScript em
outras partes do documento.
14.2.2 Criar uma behavior

Para associar uma behavior a um elemento da página:
1. Seleccione um elemento na janela DOCUMENT ou no TAG SELECTOR.
Todas as behaviors estão associadas a um elemento HTML especí-
fico: desde o <body>, a um elemento <a>, à <textarea> de um for-
mulário, etc. Se pretender associar uma behavior a toda a página,
seleccione o elemento <body>.
2. Abra o painel BEHAVIORS escolhendo W INDOW > BEHAVIORS ou teclan-
do SHIFT+F4.
3. Clique no botão + para revelar as acções disponíveis para o elemento
seleccionado:
Se uma determinada acção estiver indisponível, é porque o elemento

necessário não está presente na página ou não está seleccionado.
Não pode, por exemplo, escolher a acção SHOW -HIDE ELEMENTS, a não
ser que já tenha inserido um ou mais elementos AP na página.
4. Seleccione uma das acções disponíveis.
5. Introduza os valores desejados na caixa de diálogo de parâmetros da
acção. Dependendo da acção, pode escolher ficheiros, definir atribu-
tos, e activar/desactivar funcionalidades.
6. Clique em OK para fechar a caixa de diálogo quando tiver terminado.
O Dreamweaver adiciona uma linha ao painel BEHAVIORS apresen-
tando o evento (definido por omissão) e a acção seleccionada.
7. Se desejar pode alterar o evento criado por omissão.
14.2.3 Gerir eventos

Só pode utilizar certos eventos com determinados elementos. Mesmo em
browsers recentes, eventos chave, como onMouseDown, onMouseOver e
onMouseOut não funcionam com todos os elementos de uma página, sendo
utilizados preferencialmente com links.
De cada vez que o Dreamweaver associa uma behavior a um elemento HTML,
selecciona um evento por omissão que aparece na primeira coluna do painel
BEHAVIORS.
Se não pretender seleccionar o evento por omissão numa determinada
instância, pode escolher outro, após ter criado a behavior. Clique na seta ao
lado do evento apresentado no painel BEHAVIORS e seleccione o evento pre-
tendido na lista:
Embora qualquer elemento HTML possa potencialmente ser utilizado para

associar uma behavior, os mais utilizados são o <body> (para eventos
relacionados com a página, como onLoad), <img> (utilizado como botão), e
<a>, que corresponde a um link.
No caso de outros elementos, como uma imagem, a lista de eventos é dife-

rente porque podemos associar um evento em conjunto com um elemento <a>
(isto é, com um link):
Este elemento a não acede a nenhuma página, dado que utiliza no atributo
href o seguinte valor (chama-se um null link): href="javascript:;".
14.3 Swap Image e Swap Image Restore

Os image rollovers são uma das técnicas mais frequentemente utilizadas
actualmente no desenho de páginas. Num image rollover típico, o cursor
passa por cima de uma imagem e o gráfico muda, às vezes apenas parecendo
que brilha ou muda de cor. O evento ONMOUSEOVER desencadeia a troca
praticamente instantânea de uma imagem por outra.
O Dreamweaver torna possível combinar as behaviors SWAP IMAGE e SWAP
IMAGE RESTORE numa operação fácil, bem como o pré-carregamento de todas
as imagens.
Para utilizar a acção SWAP IMAGE:
1. Seleccione o objecto que vai desencadear a acção. Não é obrigatório
utilizar uma imagem podendo recorrer a outros elementos HTML;
2. A partir do painel BEHAVIORS, clique no botão + e seleccione SWAP
IMAGE. Aparecerá a seguinte caixa de diálogo:
3. Escolha uma imagem disponível a partir da lista IMAGES. O Dreamwea-

ver carrega automaticamente uma lista com todos os nomes de ima-
gens que encontrar na página Web corrente. Por isso, é importante
que atribua nomes com significado às imagens, pelo menos àquelas
que pretenda utilizar nas behaviors.
A imagem que pretende alterar pode ser a mesma imagem à qual está
ligada a behavior, ou outra qualquer existente na página;
4. Na caixa de texto SET SOURCE TO, introduza a localização da imagem
que pretende utilizar para substituir a existente. Pode também clicar no
botão BROWSE para localizar o ficheiro que contém a imagem. Apare-
cerá um asterisco no fim do nome da imagem seleccionada para indi-
car que foi seleccionada uma imagem alternativa;
5. Para trocar imagens adicionais utilizando o mesmo evento, repita os
passos 3 e 4. Pode efectuar a troca de mais de uma imagem em cada
acção SWAP IMAGE. Por exemplo, se pretende que todo um submenu
mude quando um utilizador passa com o rato por cima de uma deter-
minada opção, pode utilizar uma única acção SWAP IMAGE para mudar
todas as imagens dos botões do submenu;
6. Para pré-carregar todas as imagens envolvidas na acção SWAP IMAGE
na cache do browser, quando a página é carregada, assegure-se que
a opção PRELOAD IMAGES está activada.
A nova imagem aparecerá assim instantaneamente, e não será neces-
sário solicitar a imagem ao sítio Web, o que em alguns casos pode
provocar um ligeiro atraso na apresentação da imagem;
7. Para que as imagens seleccionadas revertam para as imagens origi-
nais quando o visitante afastar o cursor do objecto seleccionado,
assegure-se que a opção RESTORE IMAGES ONMOUSEOUT está selec-
cionada. Esta opção não aparecerá caso tenha seleccionado outro
elemento que não uma imagem. O Dreamweaver adicionará automati-
camente uma acção SWAP IMAGE RESTORE e o respectivo evento (nor-
malmente, ONMOUSEOUT) ao painel BEHAVIORS;
8. Clique em OK quando tiver terminado.

O resultado desta operação no painel BEHAVIORS é:
Embora não seja habitual, é possível que a imagem de troca tenha dimensões
diferentes das da imagem original. Neste caso, a acção SWAP IMAGE redimen-
sionará a imagem de troca para a altura e largura da primeira imagem.
14.3.1 Swap Image Restore

Caso não tenha seleccionado a opção RESTORE IMAGES ONMOUSEOUT pode, a
posteriori, inserir o mesmo comportamento recorrendo à acção SWAP IMAGE
RESTORE, que apenas apresenta uma mensagem do tipo,
quando é seleccionada, para se confirmar a sua selecção. Esta acção pode

ser utilizada apenas após uma acção SWAP IMAGE.
14.3.2 Preload Images

A behavior PRELOAD IMAGES é utilizada para carregar, na cache do browser,
imagens que normalmente não aparecem quando a página é carregada pela
primeira vez, como acontece com as imagens dos image rollovers. Se a
imagem for pré-carregada (preloaded), quando for necessária num rollover, é
apresentada imediatamente porque não existe atraso provocado pela espera
para que a imagem seja descarregada do sítio Web.
Se estiver a utilizar a behavior SWAP IMAGE, não necessita de adicionar a
behavior PRELOAD IMAGES, basta activar a opção PRELOAD IMAGES na caixa de
diálogo SWAP IMAGE.
A maior parte das vezes a acção PRELOAD IMAGES aparece associada ao
evento ONLOAD do elemento body de uma página:
A caixa de diálogo associada à acção PRELOAD IMAGES é:
Nesta caixa de diálogo:

1. Introduza, no campo IMAGE SOURCE FILE, que está na parte de baixo
da caixa de diálogo, a localização e o nome do ficheiro relativo à ima-
gem que pretende pré-carregar, ou clique no botão BROWSE para se-
leccionar o ficheiro que contenha a imagem;
2. Clique no botão + localizado no topo da caixa de diálogo para adicio-
nar a imagem à lista PRELOAD IMAGES;
3. Repita os passos 1 e 2 para adicionar ficheiros de imagens adicionais.
Seleccione uma imagem da lista PRELOAD IMAGES e clique no botão ‘-‘ no topo
da caixa de diálogo para remover a imagem da lista.
14.3.3 Rollover Image

O processo mais tradicional de criar image rollovers é recorrer à opção INSERT
> IMAGE OBJECTS > ROLLOVER IMAGE. Ou, em alternativa, utilizar o ícone com o
mesmo nome do menu do botão IMAGES da categoria COMMON na barra
INSERT:
terá de especificar a imagem original, a imagem de rollover e se pretende pré-

carregar a imagem de rollover (PRELOAD ROLLOVER IMAGE). Pode também
definir um link para a imagem para aceder a outra página quando se clica na
imagem, bem como atribuir um texto alternativo (para efeitos de acessibili-
dade).
Para utilizar a behavior ROLLOVER IMAGE, não necessita de ter nenhuma
imagem seleccionada nem sequer inserida na página. A imagem inicial será
inserida na página e terá associado um link, mesmo que não tenha preenchido
o campo W HEN CLICKED, GO TO URL. Serão criadas três behaviors já nossas
conhecidas (além das existentes na imagem seguinte, também é criada uma
acção PRELOAD IMAGES associada ao evento onLoad do elemento <body>):
Neste nosso exemplo, inserimos na página uma capa de um livro que é basea-
da em níveis de cinzento:
Quando passamos o cursor por cima da imagem aparece a capa com as cores
originais. Ao clicar na imagem acedemos a uma página com informação sobre
o livro (ummundodestetamanho.html).
14.4 Call JavaScript

Uma acção muito interessante é a CALL JAVASCRIPT, que executa um
comando JavaScript (pode ser a invocação de uma função). Para configurar a
acção aparece apenas uma caixa de diálogo onde se introduz o comando a
executar:
Se pretender executar mais de um comando, separe-os por ‘;’, ou crie uma

função onde colocar esses comandos e na caixa de diálogo CALL JAVASCRIPT
especifique apenas o nome da função seguido de ().
O problema é que é necessário perceber da linguagem JavaScript o que limita
bastante a sua utilização.
14.5 Trabalhar com janelas de pop-up

As janelas de pop-up são uma das maiores pragas da Internet. Para as evitar,
os browsers mais recentes começaram a implementar bloqueadores deste tipo
de janelas. Mas as janelas de pop-up continuam a ter a sua utilidade desde
que sejam invocadas explicitamente pelo utilizador, por exemplo, clicando num
link ou num botão. Neste caso, não são bloqueadas pelos browsers.
O Dreamweaver disponibiliza a acção OPEN BROWSER WINDOW, que permite
abrir uma nova janela do browser e especificar o seu tamanho exacto, bem co-
mo outros atributos:
Para utilizar a acção OPEN BROWSER WINDOW :

1. Seleccione o objecto que vai desencadear a acção;
2. No painel BEHAVIORS clique no botão + e seleccione OPEN BROWSER
WINDOW;
3. No campo URL TO DISPLAY, introduza o endereço da página Web que
pretende visualizar na nova janela. Pode também clicar no botão
BROWSE para localizar o ficheiro;
4. Para especificar o tamanho da janela, introduza os valores de largura e
altura nos campos apropriados (W INDOW WIDTH e WINDOW HEIGHT). Se
não introduzir a largura e a altura, a nova janela do browser abre com
o tamanho por omissão;
5. Active as checkboxes ATTRIBUTES apropriadas para mostrar as
funcionalidades desejadas da janela, que incluem as barras de fer-
ramentas, as barras de scroll, etc. Por omissão, tem de seleccionar
explicitamente qualquer dos atributos que pretende que apareçam na
nova janela. A nova janela conterá apenas os atributos que estejam
activos, mais os elementos básicos das janelas como a barra de título
e o botão de Close;
6. Se planeia utilizar código JavaScript para endereçar ou controlar a
janela, escreva um nome único no campo W INDOW NAME. Este nome
não pode conter espaços ou caracteres especiais. O Dreamweaver
alerta-o se o nome não for aceitável;
14.6 Show-Hide Elements

Uma das características chave dos elementos AP (isto é, elementos posi-
cionados de forma absoluta, mais conhecidos por layers) em interfaces Web é
a capacidade de aparecerem e desaparecerem à nossa vontade. A acção
SHOW -HIDE ELEMENTS permite um controlo fácil sobre o atributo de visibilidade
(propriedade visibility das CSS) de todos os elementos com um id
existentes na página Web corrente. Além de explicitamente mostrar e
esconder elementos, esta acção pode também repor elementos no valor por
defeito de visibilidade (que é visible).
Esta acção é muitas vezes utilizada para revelar ou esconder um único
elemento – contudo pode esconder ou revelar mais de um elemento em
simultâneo. A caixa de diálogo de parâmetros desta acção mostra uma lista de
todos os elementos com ID existentes na página Web corrente a partir da qual
pode escolher os que desejar esconder ou revelar:
Para utilizar a acção SHOW-HIDE ELEMENTS:

1. Seleccione o objecto que desencadeia a acção;
2. A partir do painel BEHAVIORS clique no botão + e seleccione SHOW-
HIDE ELEMENTS. A caixa de diálogo de parâmetros apresenta uma lista
de elementos disponíveis na página Web corrente;
3. Para mostrar um elemento escondido, seleccione o elemento na lista
ELEMENTS e clique no botão SHOW;
4. Para esconder um elemento visível, seleccione o elemento na lista
ELEMENTS e clique no botão HIDE;
5. Para repor o valor de visibilidade por omissão do elemento, seleccione
o elemento e clique no botão DEFAULT;
14.7 Set Text

O Dreamweaver agrupa quatro acções semelhantes no grupo de acções SET
TEXT, que permitem alterar o conteúdo de vários elementos da página Web e
do browser:
14.7.1 Set Text of Container

A primeira, SET TEXT OF CONTAINER, permite reescrever dinamicamente o
conteúdo inteiro de qualquer elemento. Pode mesmo incorporar funções
JavaScript ou informação interactiva no novo conteúdo. Todo o código HTML
do elemento utilizado é substituído pelo conteúdo fornecido. O elemento deve
ter preferencialmente associado um id de forma a poder ser identificado.
Para definir o texto de um elemento AP (normalmente um elemento div) de
forma dinâmica:
1. Assegure-se que o elemento AP que pretende alterar foi criado e lhe
foi atribuído um id;
2. Seleccione o objecto que desencadeará a acção;
3. A partir do painel BEHAVIORS, clique no botão + e escolha SET TEXT >
SET TEXT OF CONTAINER;
4. Na caixa de diálogo SET TEXT OF CONTAINER seleccione o elemento a
modificar a partir da lista CONTAINER:
5. Introduza o conteúdo de substituição na área de texto NEW HTML.

Pode incluir código JavaScript colocando-o entre chavetas;
6. Clique OK quando tiver terminado.
14.7.2 Set Text of Frame

Esta acção substitui dinamicamente o conteúdo de um elemento <body> de
uma frame, utilizando qualquer código HTML. Naturalmente, tem de se
encontrar dentro de um frameset para utilizar esta acção e as frames têm de
possuir nomes correctos – isto é, únicos sem caracteres especiais ou espaços.
Para alterar o conteúdo de uma frame de forma dinâmica:
2. No painel BEHAVIORS, clique no botão + e escolha SET TEXT > SET TEXT
OF FRAME;
3. Na caixa de diálogo SET TEXT OF FRAME escolha a frame que pretende

alterar a partir da lista FRAME:
4. Introduza o novo código HTML para a frame na área NEW HTML.

Tenha em atenção que não está a alterar apenas uma palavra ou
frase, mas todo o HTML que está contido na secção <body> da frame.
Se pretender obter o HTML corrente da frame, para depois acrescentar
ou eliminar elementos, clique no botão GET CURRENT HTML;
5. Para manter os atributos do <body> da frame, como o fundo e as
cores do texto, seleccione a opção PRESERVE BACKGROUND COLOR. Se
esta opção não estiver seleccionada, o fundo da frame e as cores do
texto são substituídas pelos valores por omissão (um fundo branco e
texto em preto);
14.7.3 Set Text of Status Bar

Utilize esta acção para apresentar uma mensagem de texto na barra de
estado do browser baseada na acção do visitante, como mover o cursor para
cima de uma imagem. Pode utilizar esta acção para descrever o destino de um
link em vez de apresentar o URL associado com o link.
A mensagem permanece na barra de estado até que outra mensagem a
substitua. As mensagens de sistema, como endereços/URLs, tendem a ser
temporárias e visíveis apenas quando o cursor se encontra por cima de um link.
O único limite ao comprimento da mensagem é o tamanho da barra de estado
do browser – deve testar a sua mensagem em vários browsers para assegurar
que é completamente visível.
Para apresentar uma mensagem apenas quando o cursor do utilizador se
encontra em cima de uma imagem ou link, utilize uma acção SET TEXT OF
STATUS BAR ligada a um evento ONMOUSEOVER, com a mensagem da barra de
estado desejada. Utilize outra acção SET TEXT OF STATUS BAR ligada a um
evento ONMOUSEOUT, com uma string vazia (“ “) como texto.
Devido a restrições de segurança, alguns browsers como o Internet Explorer

6/7/8 ou o Firefox não apresentam a alteração do texto da barra de estado,
excepto se o utilizador tiver alterado as preferências do browser. No Internet
Explorer 7/8 é necessário activar a opção ALLOW STATUS BAR UPDATES VIA
SCRIPT nas configurações de segurança (SECURITY SETTINGS) para se poder
ver as alterações à barra de estado.
Embora tenha existido um período de tempo durante o qual a animação de
mensagens na barra de estado era o último grito, com as restrições de segu-
rança dos browsers modernos deixou de fazer qualquer sentido.
Para utilizar a acção SET TEXT OF STATUS BAR:
2. No painel BEHAVIORS, clique no botão + e seleccione SET TEXT OF
STATUS BAR;
3. Introduza o texto no campo MESSAGE:
14.7.4 Set Text of Text Field

A acção SET TEXT OF TEXT FIELD permite actualizar qualquer campo de texto
(input type="text") ou área de texto (textarea) de um formulário de
forma dinâmica. Tem de existir um campo de texto ou uma área de texto na
página para que esta acção fique disponível.
Para alterar o texto de um campo de texto ou de uma área de texto:
2. No painel BEHAVIORS clique no botão + e escolha SET TEXT > SET TEXT
OF TEXT FIELD.
3. Na caixa de diálogo SET TEXT OF TEXT FIELD seleccione o campo de

texto desejado da lista TEXT FIELD:
4. Introduza o novo texto e/ou código JavaScript na área NEW TEXT.

14.8 Check Plugin

Se certas páginas requerem a utilização de um ou mais plugins, pode utilizar a
acção CHECK PLUGIN para ver se um visitante da página possui instalado o
plugin necessário. Pode então redireccionar os utilizadores que possuem o
plugin para um URL e os que não o têm para outro URL. Só pode verificar um
plugin de cada vez, mas pode utilizar múltiplas instâncias da acção CHECK
PLUGIN se necessário.
Não pode detectar plugins específicos no Internet Explorer utilizando
JavaScript. Contudo, ao seleccionar os plugins Flash ou Director na caixa de
diálogo CHECK PLUGIN, será adicionado o código VBScript apropriado à página
para detectar esses plugins no Internet Explorer.
A caixa de diálogo de parâmetros do CHECK PLUGIN,
oferece a detecção de cinco plugins: Flash, Shockwave, LiveAudio, QuickTime

e Windows Media Player. Pode testar a existência de qualquer outro plugin
introduzindo o respectivo nome no campo ENTER. Neste caso, utilize o nome
exactamente como aparece a negrito/bold (e sem o número de versão)
quando escreve about:plugins na barra de endereços do Firefox – por
exemplo, NULLSOFT WINAMP PLUG-IN FOR GECKO.
Para utilizar a acção CHECK PLUGIN:
1. Seleccione o objecto que desencadeia a acção. A maior parte das
vezes utilizará o elemento <body> e o evento onload;
2. A partir do painel BEHAVIORS clique no botão + e seleccione CHECK
PLUGIN;
3. Seleccione um plugin da lista SELECT ou escreva um nome de plugin
no campo ENTER;
4. Os nomes que aparecem na lista estão abreviados (para serem mais

facilmente identificáveis) e não são os nomes formais inseridos no
código. Por exemplo, quando selecciona SHOCKWAVE, o que é colo-
cado no código é SHOCKWAVE FOR DIRECTOR. Por outro lado o nome de
plugin que introduzir manualmente no campo ENTER é inserido tal qual
no código;
5. Se pretender enviar os utilizadores que possuem o plugin para uma
página diferente, introduza o URL absoluto ou relativo (ou utilize o
botão BROWSE para localizar o ficheiro) no campo IF FOUND, GO TO
URL. Se pretender que os utilizadores permaneçam na página cor-
rente, deixe o campo de texto vazio;
6. No campo OTHERWISE, GO TO URL, introduza o URL da página a ser
invocada para os utilizadores que não possuem instalado o plugin
necessário;
7. Se a detecção do plugin falhar – o que acontece regularmente no Inter-
net Explorer, quer o plugin esteja presente ou não – pode manter o uti-
lizador na página onde a detecção ocorre. Para o fazer, active a opção
ALWAYS GO TO FIRST URL IF DETECTION IS NOT POSSIBLE. De outra
forma, se a detecção falhar por alguma razão, os utilizadores são redi-
reccionados para o URL listado no campo OTHERWISE;
14.9 Go to URL
Uma das tarefas mais complicadas quando se utilizam frames é actualizar
duas ou mais frames em simultâneo com apenas um clique. A acção GO TO
URL pode efectuar este processo e também pode ser utilizada como
‘redireccionador’ que envia o utilizador para outra página Web depois do
evento onLoad ter terminado a sua execução. A caixa de diálogo GO TO URL,
apresenta quaisquer frames ou framesets existentes na página corrente, além

da página corrente (MAIN WINDOW) caso não se utilizem frames. Para carregar
múltiplos URLs ao mesmo tempo em frames distintas, seleccione a primeira
frame da lista OPEN IN e introduza a página ou localização desejada no campo
URL. Em seguida seleccione a segunda frame da lista e introduza o respectivo
URL, e assim sucessivamente. Se seleccionar uma frame ao qual está atri-
buído um URL, esse endereço aparece no campo URL.
Para utilizar a behavior GO TO URL:
2. A partir do painel BEHAVIORS clique no botão + e seleccione GO TO
URL;
3. Da caixa de diálogo GO TO URL seleccione, na área OPEN IN, em que
frame deverá ser aberta a página que pretende invocar, ou se pre-
tende apenas substituir a página corrente (MAIN WINDOW). Se não utili-
zar frames na página corrente apenas aparecerá a opção MAIN
WINDOW;
4. No campo URL introduza a localização do ficheiro (ou sítio Web) a

abrir, ou clique no botão BROWSE para localizar o ficheiro. Aparecerá
um asterisco ao lado do nome da frame (ou de MAIN WINDOW) para
indicar que foi escolhido um URL;
5. Para seleccionar outro destino/frame, para carregar um URL diferente,
repita os passos 3 e 4;
14.10 Drag AP Element

A acção DRAG AP ELEMENT permite que os visitantes das páginas Web movam
elementos AP (absolutely positioned element), e tudo o que estes contêm, no
ecrã com a técnica do arrastar-e-largar (drag-and-drop). Com a acção DRAG
AP ELEMENT, pode facilmente configurar as seguintes funcionalidades para o
utilizador:
o Permitir que elementos AP sejam arrastados no ecrã para qualquer
posição;
o Restringir o arrastar numa determinada direcção ou combinação de
direcções. Por exemplo, um elemento AP apenas de movimento
horizontal com o movimento restrito para a esquerda e para a direita;
o Limitar a zona de arrasto (drag handle) a uma porção do elemento AP,
como a barra superior, ou permitir que todo o elemento AP seja
utilizado;
o Disponibilizar um método alternativo de clipping activando apenas uma

porção do elemento AP a ser arrastado;
o Permitir a alteração da ordem de posicionamento (stacking) dos ele-
mentos AP entre si, enquanto se arrasta um elemento AP ou quando o
botão do rato é ‘libertado’;
o Definir uma área de encaixe (snap-up) na página Web para os ele-
mentos AP quando o utilizador liberta o elemento a uma distância
predefinida;
o Programar um comando JavaScript (ou um conjunto de comandos, ou
uma função) a ser executado quando a área de destino é atingida ou
de cada vez que o elemento AP é libertado.
Um ou mais elementos AP têm de existir na página antes da acção DRAG AP
ELEMENT ficar disponível. Como esta acção tem de ser invocada antes do
visitante da página poder arrastar o elemento AP, deve ser associada com o
elemento <body> e com o evento onLoad. Pode atribuir acções DRAG AP
ELEMENT distintas a diferentes elementos AP para obter efeitos de arrasto
diferentes.
Para utilizar a acção DRAG AP ELEMENT:
1. Assegure-se que possui um ou mais elementos AP na sua página –
insira-os através da opção INSERT > LAYOUT OBJECTS > AP DIV ou cli-
que no botão DRAW AP DIV da barra INSERT e desenhe um elemento
AP na página;
2. Seleccione o elemento <body> no TAG INSPECTOR;
3. No painel BEHAVIORS clique no botão + e escolha DRAG AP ELEMENT;
4. Seleccione o separador BASIC:
5. Na lista AP ELEMENT, seleccione o elemento AP que pretende que

possa ser arrastado;
6. Para limitar o movimento do elemento AP, altere a opção MOVEMENT
de UNCONSTRAINED para CONSTRAINED.
7. No tipo de movimento CONSTRAINED aparecem as caixas de texto UP,
DOWN, LEFT e RIGHT. Introduza valores, em píxeis, nas caixas de texto
para controlar o intervalo de movimento do elemento AP:
o Para restringir o movimento verticalmente, introduza valores

positivos nos campos UP e DOWN e zeros nos campos LEFT e
RIGHT;
o Para restringir o movimento horizontalmente, introduza valores
positivos nos campos LEFT e RIGHT e zeros nos campos UP e
DOWN;
o Para permitir movimento numa região rectangular, introduza
valores positivos em todos os quatro campos;
Por exemplo, se introduzir 100 no campo LEFT e 400 no campo RIGHT
isso significa que, a partir da posição corrente do cursor, pode deslo-
car-se, no máximo, 100 píxeis para a esquerda e 400 para a direita;
8. Para definir uma localização destino para o elemento AP, introduza
coordenadas nos campos LEFT e TOP da área DROP TARGET. Um ele-
mento AP terá chegado à área destino quando as coordenadas left e
top forem idênticas às coordenadas introduzidas nos campos LEFT e
TOP. Os valores introduzidos nestes campos são valores absolutos
relativos ao canto superior esquerdo da janela do browser;
9. Clique no botão GET CURRENT POSITION para preencher os campos
LEFT e TOP com a localização corrente do elemento AP (coordenadas
left e top). Se planeia utilizar uma localização destino, poderá colo-
car o seu elemento AP na localização final antes de criar a behavior,
de forma a tirar partido do botão GET CURRENT POSITION;
10. Para definir uma área de encaixe à volta das coordenadas da localiza-
ção destino introduza um valor em píxeis no campo SNAP IF WITHIN.
Esta é a distância à localização destino a que o visitante pode largar o
elemento AP, que ele será automaticamente deslocado para a locali-
zação destino;
11. Para opções adicionais, seleccione o separador ADVANCED:
12. Se pretender que todo o elemento AP funcione como zona de arrasto

(drag handle), seleccione a opção ENTIRE AP ELEMENT da lista DRAG
HANDLE. Se, pelo contrário, pretende limitar a área a ser utilizada como
zona de arrasto, seleccione AREA WITHIN AP ELEMENT. Aparecerão os
campos L(eft), T(op), W(idth) e H(eight):
13. Nos campos apropriados introduza as coordenadas para o rectângulo

que define a zona de arrasto;
14. Para controlar o posicionamento do elemento AP, relativamente a
outros elementos da página, quando é arrastado, defina as seguintes
opções na área W HILE DRAGGING:
o Para evitar que o elemento AP passe para a ‘frente’ dos outros
elementos AP quando é arrastado, desseleccione a opção
WHILE DRAGGING: BRING ELEMENT TO FRONT.
o Para alterar a ordem de ‘empilhamento’ (stacking order) do
elemento AP quando é libertado, seleccione a opção W HILE
DRAGGING: BRING ELEMENT TO FRONT e escolha LEAVE ON TOP
(mantém o elemento AP em cima de todos os elementos da
página) ou RESTORE Z-INDEX (em que o elemento AP volta para
a posição que tinha na pilha de elementos quando começou a
ser arrastado) da lista de opções;
15. Para executar um comando JavaScript repetidamente enquanto o ele-
mento AP estiver a ser arrastado, introduza o(s) comando(s) ou função
no campo CALL JAVASCRIPT na área W HILE DRAGGING;
16. Para executar um comando quando o elemento AP é largado na
localização alvo, introduza o(s) comando(s) ou função no campo W HEN
DROPPED: CALL JAVASCRIPT. Se pretender que o código JavaScript seja
executado apenas quando o elemento AP chega à localização alvo
(através de uma área de encaixe), seleccione a opção ONLY IF
SNAPPED. Esta opção requer que seja introduzido um valor no campo
DROP TARGET no separador BASIC;
A acção DRAG AP ELEMENT pode ser utilizada para criar puzzles e outro tipo de
jogos. A página Jessus Dress Up (http://www.jesusdressup.com) é um exemplo de
uma página que pode ser criada recorrendo a esta acção.
14.11 Pop-up message

Pode enviar uma mensagem rápida aos visitantes do seu sítio Web utilizando
a acção POPUP MESSAGE. Quando desencadeada, esta acção abre uma caixa
de alerta JavaScript e apresenta a mensagem especificada. Introduz-se no
campo MESSAGE a mensagem que pretendemos que apareça:
Para utilizar a acção POPUP MESSAGE:

2. A partir do painel BEHAVIORS, clique no botão + e seleccione POPUP
MESSAGE;
3. Introduza o texto no campo MESSAGE;
14.12 Spry Effects

O Dreamweaver utiliza a Spry framework, uma biblioteca JavaScript que
permite a utilização de áreas interactivas e de efeitos visuais em páginas.
Alguns desses efeitos visuais estão disponíveis a partir do submenu EFFECTS
e são identificados pelo nome SPRY EFFECTS:
Os SPRY EFFECTS necessitam de referenciar elementos que possuam um id

definido. Para utilizar um EFFECT:
1. Assegure-se que o elemento que pretende afectar possui um id
associado:
2. Seleccione o elemento que desencadeará o efeito;
3. A partir do painel BEHAVIORS clique no botão + e seleccione o efeito
que pretende aplicar;
4. Seleccione o elemento ao qual pretende aplicar o efeito, identificando-
o através do respectivo id;
5. Introduza a duração do efeito em milissegundos no campo EFFECT
DURATION (1000 milissegundos equivale a um segundo).
Pode aplicar vários efeitos ao mesmo elemento.
O motor JavaScript para todos os efeitos está contido num único ficheiro,
SpryEffects.js. A referência a este ficheiro é adicionada automaticamente
à página corrente e o ficheiro é colocado na pasta SpryAssets na raiz do seu
sítio Web da primeira vez que um efeito é adicionado. Necessitará de publicar
o ficheiro JavaScript no seu sítio Web para que os efeitos funcionem
correctamente.
14.12.1 Appear/Fade
Este efeito permite que um elemento apareça ou desapareça de forma gradual
ao longo de um determinado período de tempo. Pode, por exemplo, fazer com
que um elemento AP apareça de forma gradual com informação adicional
quando um utilizador clica num ícone de ajuda. Da mesma forma, dado que a
behavior permite que o efeito seja ‘invertido’ (toggled), o elemento AP pode
desaparecer de forma gradual com outro clique no mesmo ícone.
Na caixa de diálogo APPEAR/FADE:
1. Escolha se pretende que o elemento alvo apareça (APPEAR) ou

desapareça (FADE) a partir da lista EFFECTS;
2. Defina a percentagem inicial de opacidade no campo APPEAR FROM /
FADE FROM;
3. Defina a percentagem final de opacidade no campo APPEAR TO / FADE

TO;
4. Se pretender que o efeito inverso ocorra da próxima vez que o efeito
for desencadeado para o elemento em causa, clique na opção TOGGLE
EFFECT.
14.12.2 Blind
Este efeito simula os estores de uma janela, baixando para esconder conteúdo
específico ou levantando para o revelar. Só pode utilizar este efeito com os
seguintes elementos HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4,
h5, h6, p, ol, ul, li, applet, center, dir, menu e pre.
Na caixa de diálogo BLIND,
1. Escolha, na lista EFFECT, se pretende que o elemento ao qual se vai

aplicar o efeito seja escondido (BLIND UP) ou se vai ser revelado um
elemento previamente escondido (BLIND DOWN);
2. Defina a percentagem de início no campo BLIND UP FROM / BLIND
DOWN FROM;
3. Defina a percentagem de fim no campo BLIND UP TO / BLIND DOWN TO;
4. Ao definir os valores dos campos TO e FROM define a direcção de
abertura ou fecho;
EFFECT.
14.12.3 Grow/Shrink
Este efeito reduz ou alarga o tamanho de um determinado elemento da
página. Este efeito pode ser utilizado para temporariamente tornar uma
imagem maior quando o visitante passa o rato por cima de uma versão
‘pequena’ da imagem (thumbnail) e torná-la mais pequena quando o visitante
move o rato para fora do thumbnail.
Para conseguir o efeito de crescimento e de redução de tamanho do thumbnail

de acordo com a posição do rato, aplique o efeito GROW/SHRINK duas vezes:
primeiro cresça a imagem ligeiramente com um evento onMouseOver e
depois reduza-a às dimensões originais com um evento onMouseOut.
Só pode utilizar este efeito com os seguintes elementos HTML: address, dd,
div, dl, dt, form, p, ol, ul, applet, center, dir, menu e pre.
Na caixa de diálogo GROW/SHRINK:
1. A partir da lista EFFECT, escolha se pretende que o elemento cresça

(GROW) ou diminua (SHRINK);
2. Defina a percentagem de opacidade inicial no campo GROW FROM /
SHRINK FROM;
3. Defina a percentagem de opacidade final no campo GROW TO / SHRINK
TO;
4. A partir da lista GROW FROM / SHRINK TO escolha a direcção desejada:
alargar/reduzir a partir do centro do elemento (CENTER) ou do canto
superior esquerdo (TOP LEFT CORNER);
EFFECT. Neste caso tenha cuidado de não especificar o valor 0 no
campo GROW TO / SHRINK TO, senão o elemento desaparecerá e não
terá a possibilidade de aplicar o efeito inverso.
14.12.4 Highlight
Este efeito permite ‘animar’ o fundo de um elemento, começando numa
determinada cor e depois apresentando as cores intermédias até chegar a
uma cor final. Funciona bem para atrair a atenção de um visitante para um
determinado elemento da página sem afectar o layout da página. Pode utilizar
este efeito com qualquer elemento HTML excepto: applet, body, frame,
frameset, ou noframes.
Na caixa de diálogo HIGHLIGHT:
1. Escolha a cor inicial de fundo em START COLOR;

2. Escolha a cor de fundo para a qual a cor inicial vai sendo alterada em
END COLOR;
3. Escolha a cor de fundo apresentada quando o efeito de fade terminar
em COLOR AFTER EFFECT;
EFFECT.
14.12.5 Shake
Se já se enganou a escrever uma palavra-passe no ecrã de login do Mac OS
X, já visualizou o efeito SHAKE. Este efeito abana rapidamente o elemento
referenciado para a esquerda e para a direita. É garantido que obterá a
atenção do utilizador. Não pode contudo definir a duração e a distância aplica-
da pelo efeito.
div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img,
object, p, ol, ul, li, applet, dir, hr, menu, pre e table.
Para utilizar o efeito SHAKE basta seleccionar o elemento ao qual o pretende
aplicar:
14.12.6 Slide
Este efeito é semelhante ao efeito BLIND dado que esconde ou revela
conteúdo, contudo neste caso é o próprio conteúdo que parece que apa-
rece/desaparece da vista do utilizador.
Relativamente ao elemento referenciado pelo efeito é necessário que esteja
dentro de um elemento div com um id. Por exemplo:
<div id="divexterior">
<div id="conteudo">
<p>...</p>
</div>
</div>
Neste caso, o elemento que deve ser seleccionado no campo TARGET

ELEMENT é divexterior.
Só pode utilizar este efeito com os seguintes elementos HTML: blockquote,
dd, div, form e center.
Na caixa de diálogo SLIDE:
1. Na lista EFFECT, se pretender que o elemento seleccionado seja es-

condido, escolha SLIDE UP; para revelar um elemento previamente es-
condido, escolha SLIDE DOWN;
2. Para definir a percentagem de início utilize o campo SLIDE UP FROM /
SLIDE DOWN FROM;
3. Para definir a percentagem de fim utilize o campo SLIDE UP TO / SLIDE
DOWN TO;
EFFECT.
14.12.7 Squish
Este efeito é semelhante a uma utilização especializada do efeito GROW/
SHRINK. Quando um efeito SQUISH é desencadeado, o elemento referenciado
reduz o respectivo tamanho de 100% para 0% na direcção do canto superior
esquerdo do elemento; desencadeando o efeito outra vez o elemento cresce
para 100% na direcção oposta.
div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, e pre.
O único parâmetro definido pelo utilizador é a escolha do elemento ao qual se
pretende aplicar o efeito:
14.13 Utilizar outras behaviors

Além das behaviors que são disponibilizadas de raiz pelo Dreamweaver CS5,
o web designer pode instalar outras behaviors que tenham sido transferidas do
Adobe Exchange (um serviço que disponibiliza uma grande quantidade de
extensões incluindo behaviors), transferidas de outro sítio Web que
disponibilize extensões ou que tenham sido criadas por outros web designers.
O Dreamweaver inclui uma opção GET MORE BEHAVIORS no fim da lista +,
que permite aceder ao sítio Adobe Exchange.

Também poderá aceder a esta página utilizando a opção HELP > DREAM-
WEAVER EXCHANGE. Para aceder à área relacionada com o Dreamweaver
deverá clicar no link Dreamweaver na área EXCHANGES BY PRODUCT.
Na página que aparece,
pode pesquisar extensões (ou behavior), aceder a uma página onde pode
efectuar uma pesquisa mais avançada, ou pode navegar por categoria a partir
do menu existente no lado direito da página. Algumas das extensões/
behaviors são gratuitas enquanto outras são pagas.
Depois de localizar a extensão pretendida e clicar no botão DOWNLOAD
respectivo aparecerá uma página de SIGN IN (o procedimento poderá ser
diferente dependendo da extensão seleccionada). Para poder transferir exten-
sões/behaviors para o seu computador necessita de estar registado no sítio
Web da Adobe.
Aparecerá então a página que efectuará a transferência da extensão para o
seu computador. Dependendo do seu browser pode ser-lhe dada a opção de
instalar o ficheiro da extensão directamente a partir do sítio Web ou guardá-lo
primeiro em disco e instalá-lo a partir daí.
14.13.1 Instalar behaviors

Depois de ter transferido para o seu computador o ficheiro relativo à exten-
são/behavior, para a instalar no Dreamweaver deverá:
1. Efectuar um duplo clique no ficheiro com a extensão .mxp ou utilizar a
opção HELP > MANAGE EXTENSIONS para abrir o EXTENSION MANAGER:
e utilizar a opção FILE > INSTALL EXTENSION para seleccionar o ficheiro.

Utiliza-se o EXTENSION MANAGER para instalar, remover e acti-
var/desactivar temporariamente ficheiros com a extensão .mxp;
2. Terá de aceitar a licença de utilização (License Agreement);
3. Depois de a instalação estar terminada poderá ver no EXTENSION MA-

NAGER a extensão instalada, a versão e o autor;
4. Algumas extensões ficam inacessíveis até ter reiniciado o Dreamwea-

ver – na maior parte dos casos ser-lhe-á pedido que o faça;
5. Cada extensão/behavior instalada no seu computador poderá ser invo-
cada a partir de um determinado menu da interface do Dreamweaver.
No Adobe Exchange leia a informação disponível sobre a extensão pa-
ra determinar qual a opção e menu que terá de utilizar.
15 Navegação com Spry Widgets
Além das behaviors que apresentámos no capítulo anterior, o Dreamweaver

também disponibiliza behaviors específicas de navegação, isto é, behaviors
que permitem criar elementos de navegação na página.
No Dreamweaver CS5 os elementos de navegação são constituídos pelos
Spry Widgets que fazem parte da Spry framework, que é uma biblioteca de
métodos e funções JavaScript, que permite criar áreas interactivas de navega-
ção em páginas Web.
15.1 Spry widgets

Os widgets são elementos da interface, como uma barra de menus, que
geralmente tornam uma página mais fácil de utilizar para os visitantes. Combi-
nam HTML, JavaScript e CSS para produzir layouts interactivos avançados.
Os widgets Spry são fáceis de implementar e podem ser personalizados atra-
vés do PROPERTY INSPECTOR e de estilos CSS, permitindo assim uma fácil
integração em sítios Web existentes.
Os widgets dependem do Javascript. Embora a maior parte das pessoas
navegue na Internet com o JavaScript activo, algumas pessoas desactivam o
JavaScript (alegadamente por razões de segurança) ou utilizam um browser
que não suporta o JavaScript (o que nos dias de hoje é raríssimo). Isto signi-
fica que alguns dos widgets não funcionarão, como as barras de navegação,
em que os submenus nunca serão mostrados. Deve-se por isso desenhar os
sítios Web para, caso o JavaScript esteja desactivado, a funcionalidade conti-
nuar presente.
Para introduzir um Spry widget numa página pode recorrer ao submenu INSERT
> SPRY,
ou utilizar a categoria SPRY da barra INSERT,
Os Spry widgets de navegação também estão disponíveis na categoria

LAYOUT desta barra.
Depois de serem introduzidos numa página, todos os Spry widgets são identi-
ficados por um separador identificativo com fundo azul que aparece quando
passa o rato por cima do widget ou quando este está seleccionado:
Estes separadores permitem seleccionar um widget, por exemplo, para alterar

a sua configuração no PROPERTY INSPECTOR.
Quando guardar a página em que o widget foi inserido, e se for a primeira vez
que utiliza esse tipo de widget no sítio Web, aparecerá uma caixa de diálogo a
avisar o web designer que vão ser copiados os ficheiros de suporte do widget.
Por exemplo, para uma SPRY MENU BAR:
15. NAVEGAÇÃO COM SPRY WIDGETS 447
Os ficheiros de suporte de cada widget são copiados automaticamente para a

pasta SpryAssets (será criada se não existir) localizada na pasta raiz (root
folder) do sítio Web:
Cada widget Spry utiliza um ficheiro JavaScript, um ficheiro CSS e ficheiros de

imagens. Estes ficheiros são necessários e têm de ser depois transferidos
para o servidor onde o sítio Web ficará alojado, juntamente com as páginas.
15.2 Spry Menu Bar

O Dreamweaver disponibiliza o widget SPRY MENU BAR, para criar menus de
navegação. Este widget utiliza listas não ordenadas (elementos ul), estilos
CSS e código JavaScript, para conseguir navegação multi-nível.
Depois de o widget ser colocado na página, o PROPERTY INSPECTOR personali-
zado fornece uma forma intuitiva para ajustar o menu de qualquer forma que
deseje. Pode adicionar mais itens principais ou submenus, alterar o respectivo

texto, adicionar links, e mesmo adicionar tooltips.
Pode ser aplicado horizontalmente ou verticalmente e oferece um nível de
navegação principal com até dois níveis de submenus do tipo drop-down. Os
botões principais de navegação (isto é, o primeiro nível de menu) aparecem
sempre na página. Cada um destes botões pode ter o seu próprio menu, que
apenas aparece quando um visitante passa com o cursor por cima de um
botão. Cada botão no segundo nível de menus (o pop-up menu ou submenu)
pode ter outro menu de pop-up.
Para inserir uma SPRY MENU BAR:
1. Coloque o cursor onde pretende que o menu apareça. Por exemplo,
dentro de um elemento <div>;
2. A partir das categorias SPRY ou LAYOUT da barra INSERT, clique no
ícone SPRY MENU BAR (ou utilize a opção INSERT > SPRY > SPRY MENU
BAR).
3. Quando a caixa de diálogo SPRY MENU BAR aparecer,
escolha uma das opções para definir a orientação da barra de navega-

ção. Clique em OK.
4. O Dreamweaver insere a barra de navegação na página e mostra uma
PROPERTY INSPECTOR personalizada.
O aspecto inicial de um menu horizontal é,
enquanto um menu vertical tem a seguinte aparência:

Por omissão, são criadas quatro opções principais, e a primeira e terceira

opções têm já associados submenus, o que é assinalado pela seta a apontar
para baixo ou para o lado direito.
Caso pretenda apenas uma barra de navegação sem submenus, basta remo-
ver os submenus criados por omissão. Para isso, seleccione a SPRY MENU
BAR, clicando no separador azul. No PROPERTY INSPECTOR,
repare que com o ITEM 1 seleccionado na primeira lista, aparecem três itens na
segunda lista. Se remover estes itens (basta seleccioná-los e clicar no botão ‘-’
que se encontra na parte de cima da lista) e também remover os subitens do
ITEM 3, terá uma barra de navegação sem submenus.
Para alterar o texto de qualquer item do menu, seleccione o item no PROPERTY
INSPECTOR e introduza um novo valor no campo TEXT:
Pode também modificar o texto directamente na DESIGN VIEW. Para alterar as

propriedades de qualquer item terá de o seleccionar na respectiva lista.
Para associar um link, seleccione um item de menu no PROPERTY INSPECTOR e
introduza o endereço destino no campo LINK ou utilize o ícone BROWSE para
seleccionar o ficheiro. Os links também podem ser criados directamente na
janela de documento, seleccionando um item do menu e introduzindo a página
destino no campo LINK.
Repare que, por omissão, os itens possuem um # (isto é, um null link) no
campo LINK, o que significa que nenhuma página será invocada. Isto deverá
ser assim quando um item possui um submenu.
Caso pretenda que a página indicada no campo LINK abra em outra janela do
browser (ou em outra frame) escreva um valor no campo TARGET. Existem
quatro valores standard que pode utilizar – _blank, _parent, _top e _self
– sendo que os três últimos são apenas utilizados com frames. O valor
_blank permite abrir a página destino numa janela autónoma do browser.
Para adicionar uma tooltip a um item de menu (isto é, apresentar uma mensa-
gem debaixo do cursor quando este se encontra por cima de um item), selec-
cione o item e introduza o texto para a tooltip no campo TITLE.
Uma forma fácil de modificar rapidamente o texto dos itens, os links e a estru-
tura é clicar no botão TURN STYLES OFF. Os estilos CSS serão desactivados e
verá a lista de itens que constituem o menu:
Evite adicionar itens nesta vista dado que terá de se lembrar de associar os
estilos correctos, nomeadamente o .MenuBarItemSubmenu. Clicando no bo-
tão TURN STYLES ON volta a repor os estilos.
Para fazer ajustes aos itens de um menu ou submenu:
1. Para adicionar um novo item ao menu, clique no botão + localizado
acima da respectiva lista. É adicionado um novo item de menu com o
texto UNTITLED ITEM, logo abaixo do item seleccionado (se não tiver
nenhum item seleccionado, o novo item será adicionado ao fim da
lista):
Modifique o texto no campo TEXT e associe um link.

2. Para remover um item do menu, seleccione-o e clique no botão ‘-’ no
topo da lista. Se o item do menu possuir quaisquer submenus associa-
dos, o Dreamweaver pede-lhe uma confirmação antes de o eliminar:
3. Para alterar a ordem de um item de menu, seleccione-o e clique numa

das setas da lista corrente. Num menu horizontal a seta para cima
move o botão para a esquerda, enquanto a seta para baixo move o bo-
tão para o lado direito.
4. Para adicionar um item de um submenu, seleccione o item do menu
parente e clique no botão ‘+’ na segunda ou terceira lista de itens.
O Dreamweaver utiliza um nome genérico, MenuBarn (em que n é um número
sequencial) para cada SPRY MENU BAR que insere numa página. Este nome
nunca é visível na página, mas pode alterá-lo para algo mais descritivo como
menuNavegacao. Na atribuição do nome só deve utilizar letras e algarismos,
não deve utilizar espaços, sinais de pontuação, caracteres acentuados e
cedilhas (ç).
15.2.1 Criar um menu de navegação

No nosso sítio Web, vamos substituir o menu que criámos inicialmente para a
página index.html,
por um menu SPRY MENU BAR.

Primeiro inserimos um widget SPRY MENU BAR na página, e depois, no
PROPERTY INSPECTOR, atribuímos um nome ao menu (menu_principal) e
definimos as opções de primeiro nível:
Para todas as opções, excepto para a opção QUEM SOMOS, vamos definir um
link que corresponde à página que é invocada quando o botão é clicado:
Para a opção QUEM SOMOS o valor do campo LINK tem de ser #, dado que vai
ter associado um sub-menu. Aproveitamos também para atribuir um TITLE a
cada opção.
Como apenas a opção QUEM SOMOS vai ter associado um sub-menu, remo-
vemos todas as opções de sub-menu de todas as outras opções:
E agora acrescentamos as opções para o sub-menu da opção QUEM SOMOS:
O campo LINK de cada uma destas cinco opções aponta para a página
quemsomos.html e para a âncora respectiva nessa página:
../info/quemsomos.html#precosbaixos
Isto é, os links apontam todos para a mesma página, mas para secções dife-
rentes.
A estrutura do menu está definida, temos agora de nos concentrar no seu
aspecto.
15.2.2 Alterar o aspecto de uma Spry Menu Bar

Um menu Spry não é mais do que uma simples lista (não numerada) de links,
e por isso utiliza os elementos ul e li do HTML:
<ul id="menu_principal" class="MenuBarHorizontal">

<li><a href="../stock/destaques.html"
title="Destaques">Destaques</a> </li>
<li><a href="#" title="Quem Somos"
class="MenuBarItemSubmenu">Quem Somos</a>
<ul>
<li><a
href="../info/quemsomos.html#quemsomos">Empresa</a></li>
<li><a
href="../info/quemsomos.html#precosbaixos">Preços
Baixos</a></li>
<li><a
href="../info/quemsomos.html#qualidadegarantida">Qualidade
Garantida</a></li>
<li><a
href="../info/quemsomos.html#assistenciatecnica">Assistê
ncia Técnica</a></li>
<li><a
href="../info/quemsomos.html#opinioesdosclientes">Opini&otilde
;es dos clientes</a></li>
</ul>
</li>
<li><a href="../info/faq.html" title="FAQ">FAQ</a> </li>
<li><a href="../info/contactar.html"
title="Contactar">Contactar</a></li>
<li><a href="../registo.html"
title="Registo">Registo</a></li>
</ul>
A aparência é criada pelos estilos CSS e a interactividade pelo JavaScript.

Associada a uma SPRY MENU BAR existe uma lista extensa de estilos CSS, que
pode ver no painel CSS STYLES, que permitem alterar o aspecto visual de
todos os elementos da lista:
Estes estilos estão localizados no ficheiro SpryMenuBarHorizontal.css

(ou SpryMenuBarVertical.css para o caso de um menu vertical) que se
encontra na pasta SpryAssets.
A maior parte dos estilos é do tipo COMPOUND, tendo como base ul.Menu-
BarVertical para os menus verticais e ul.MenuBarHorizontal para os
menus horizontais.
O problema reside em identificar os estilos que se tem de alterar. O processo
para alterar qualquer elemento é: identificar o elemento que se pretende modi-
ficar, localizar o estilo que controla esse elemento e depois editar esse estilo.
Uma técnica possível é seleccionar o elemento que pretende ajustar no TAG
SELECTOR,
e depois no PROPERTY INSPECTOR, seleccionar o modo CSS, e clicar na lista

associada ao campo TARGETED RULE:
Pode-se também ver os estilos utilizados no elemento correntemente selec-

cionado, no painel CSS STYLES no modo CURRENT:
Podemos ver por esta imagem que a primeira opção do menu tem associados
quatro estilos, todos genéricos. Um dos estilos diz respeito à lista
(ul.MenuBarHorizontal) o outro aos itens da lista (ul.MenuBar-
Horizontal li), o terceiro aos links associados às opções (ul.MenuBar-
Horizontal a), e finalmente um estilo para os estados hover e focus dos
links (ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:
focus).
Para alterar as propriedades de um determinado estilo poderá seleccioná-lo na
secção CASCADE do campo TARGETED RULE no PROPERTY INSPECTOR e depois
clicar no botão EDIT RULE para invocar a caixa de diálogo CSS RULE DEFI-
NITION. Em alternativa pode editar o estilo a partir do painel CSS STYLES, no
modo CURRENT.
Se preferir trabalhar em código, os ficheiros SpryMenuBarHorizontal.css
e SpryMenuBarVertical.css possuem comentários detalhados sobre os
estilos utilizados numa SPRY MENU BAR.
O problema de se trabalhar directamente com os ficheiros CSS é que estamos
a alterar os estilos para todas as SPRY MENU BAR existentes no nosso sítio
Web. Se pretendermos ter widgets SPRY MENU BAR com cores de fundo dis-
tintas em páginas diferentes, não podemos alterar os ficheiros SpryMenuBa-
rHorizontal.css e SpryMenuBarVertical.css. Temos de criar, na pró-
pria página, os mesmos estilos existentes nesses ficheiros, mas apenas com
as propriedades que pretendemos alterar.
Vamos agora identificar os estilos que estão associados aos itens/botões de
uma SPRY MENU BAR. Existem dois tipos diferentes de botões num menu Spry:
um botão básico do menu e um botão de submenu. Um botão básico é um
botão que não possui um submenu agarrado – é simplesmente um botão que
o visitante carrega para ir para uma nova página. Um botão de submenu é
qualquer botão que produz um menu de pop-up quando o visitante passa o
cursor por cima. Além disso, cada um destes tipos de botões possui dois esta-
dos: o estado normal e o estado quando o cursor passa por cima (evento
mouseover).
Os estilos utilizados são então:
2
6
1
5
4
3
1 – Barra de menus principal (ul.MenuBarVertical)

2 – Barra de menus secundária (submenu) (ul.MenuBarVertical

ul)
3 – Botão/item básico (ul.MenuBarVertical a)
4 – Rato por cima de um botão/item básico (ul.MenuBarVertical
a.MenuBarItemHover e ul.MenuBarVertical a:hover pa-
ra o Internet Explorer 6)
5 – Botão de submenu (ul.MenuBarVertical a.MenuBarItem-
Submenu)
6 – Rato por cima de um botão de submenu (ul.MenuBarVertical
a.MenuBarItemSubmenuHover e ul.MenuBarVertical a:
hover para o Internet Explorer 6)
Estes estilos são os utilizados num menu vertical. Para um menu horizontal,
substitua Vertical por Horizontal no nome dos estilos.
15.2.2.1 Formatar botões básicos

Pode-se definir a aparência de um botão básico de um menu e ao mesmo
tempo definir o aspecto básico para todos os botões editando o estilo
ul.MenuBarVertical a (ul.MenuBarHorizontal a, para um menu
horizontal). Todas as definições (excepto a cor do texto) serão partilhadas
pelos outros tipos de botões – a cor do texto muda quando o cursor passa por
cima de qualquer botão. A cor de fundo dos botões básicos e dos submenus
também é controlada por este estilo.
É possível também adicionar linhas de moldura aos botões – por exemplo,
uma linha a separar cada botão – definindo a propriedade border do estilo.
Defina o padding para controlar o espaço entre o texto num botão e o limite
do botão. Para que o texto esteja mais perto dos limites do botão, reduza o
padding. Para colocar mais espaço em branco à volta do texto, aumente o
padding.
15.2.2.2 Formatar o estado de mouseover dos botões

Mover o rato por cima de um botão de menu altera a cor de fundo do botão e o
respectivo texto, assinalando ao visitante que pode clicar ali. Os botões pos-
suem, por omissão, um fundo púrpura com texto branco, mas pode alterar esta
configuração, editando o estilo ul.MenuBarVertical a:hover, ul.
MenuBarVertical a:focus.
Pode alterar outras coisas. Por exemplo, se tiver adicionado linhas de moldura
entre os botões, pode alterar a cor dessas linhas quando o cursor está por
cima. Ou pode fazer com que o texto apareça a negrito.
O estilo utilizado para o comportamento de mouseover/hover é:
ul.MenuBarHorizontal a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible.
15.2.2.3 Formatar botões dos submenus

Os botões de submenu (isto é, os botões que produzem um menu de pop-up
quando se passa o cursor por cima) são praticamente idênticos aos outros
botões de menu. De facto, os dois estilos mencionados acima que controlam
um botão nos estados normal e mouseover definem a formatação básica para
os botões dos submenus. A única diferença visível é a pequena seta que apa-
rece no lado direito de um botão de submenu. A seta indica visualmente a pre-
sença de um menu de pop-up.
Pode substituir as imagens (setas) que o Dreamweaver utiliza para os subme-
nus que se encontram na pasta SpryAsstes: SpryMenuBarDown.gif,
SpryMenuBarDownHover.gif, SpryMenuBarRight.gif, e SpryMenu-
BarRightHover.gif. Os ficheiros com Down no nome só são utilizadas para
menus horizontais, enquanto os ficheiros com Right no nome são utilizados
para os menus verticais. Crie as suas próprias setas (no formato GIF) com os
mesmos nomes e substitua os ficheiros originais na pasta SpryAssets, no
seu síto Web. Os gráficos devem ser suficientemente pequenos para serem
visíveis nos botões dos menus – os fornecidos pelo Dreamweaver possuem
uma dimensão de 4x7 píxeis (seta direita) e 7x4 píxeis (seta para baixo) – e
devem existir versões para os estados normal e mouseover do botão do sub-
menu.
Se desejar alterar a aparência dos botões de submenu (por exemplo, para
alterar o tipo de letra) edite o estilo ul.MenuBarVertical a.MenuBar-
ItemSubmenu. O estado de mouseover para os botões de submenu nos
menus verticais é controlado pelo estilo ul.MenuBarVertical a.Menu-
BarItemSubmenuHover.
15.2.2.4 Alterar a largura dos menus e dos botões

Os botões de menu de uma SPRY MENU BAR possuem larguras predefinidas.
Os botões de menu principais possuem uma largura de 8em, enquanto os
botões dos submenus possuem uma largura de 8.2em. Se os botões de nave-
gação possuírem muito texto, 8ems é muito estreito. Ou até pode ser dema-
siado se o texto dos itens for pequeno e constituído por palavras curtas.
Pode ajustar a largura dos botões e dos menus abrindo o estilo CSS apro-
priado e alterando a propriedade width:
o Largura do menu principal – a largura do menu é definida pelo estilo
ul.MenuBarVertical. Para um menu vertical, utilize a mesma lar-
gura para o menu que a utilizada para a largura do botão. A largura de

um menu horizontal é determinada pelo número de botões no menu.
o Largura dos botões do menu principal – A largura dos botões que
aparecem no menu principal é determinada pelo estilo ul.MenuBar-
Vertical li, e é, por omissão, de 8em. Pode querer que o botão
seja ajustado ao texto respectivo, o que fará com que os botões
tenham larguras diferentes. Para isso terá de utilizar o valor auto para
a largura. Botões de largura variável têm bom aspecto nos menus
horizontais, mas não nos menus verticais.
o Largura do submenu – controle a largura dos submenus com o estilo
ul.MenuBarVertical ul. A largura que definir para este estilo
deve ser igual à largura dos botões de submenu.
o Largura dos botões do submenu – o estilo ul.MenuBarVertical ul
li controla a largura dos botões de submenu. O valor por omissão é
8.2em, mas pode ser ajustado.
15.2.2.5 Posicionar os submenus

Os submenus nas barras verticais de menus sobrepõem-se ao botão que os
abriu:
Isto dá uma aparência tridimensional ao menu. Pode aumentar a sobreposição

ou fazer com que o menu apareça directamente ao lado do botão do menu,
sem sobreposição. No caso de um menu horizontal não existe esta sobreposi-
ção no primeiro nível de opções.
Para alterar a posição do submenu, edite o estilo ul.MenuBarVertical ul.
A propriedade margin controla o posicionamento do menu. Para um menu
vertical, o submenu possui uma margem de topo de -5% o que coloca o topo
do submenu ligeiramente acima do botão de submenu que o desencadeia. A
margem esquerda é definida a 95%, o que move o submenu para a esquerda
sobrepondo-se ao menu.
Para que o submenu apareça directamente ao lado direito sem sobreposições
e alinhado com o topo do botão do submenu, mude a margem de topo para 0
e a margem esquerda para 100%.
Se, pelo contrário, pretende que o submenu ainda se sobreponha mais, pode
mudar de -5% para -10% a margem de topo e de 95% para 85% a margem
esquerda.
Um submenu horizontal aparece directamente debaixo do botão de submenu
que o desencadeia. A respectiva margem é 0. Se pretender que esse menu se
sobreponha ao botão do submenu, pode alterar a margem de topo para -0.5%
e a margem esquerda para 5%, por exemplo.
A aparência dos sub-submenus de um menu horizontal é controlada pelo estilo
ul.MenuBarHorizontal ul ul.
15.2.3 Aplicar estilos ao nosso menu exemplo

Na posse desta informação sobre estilos vamos alterar o aspecto visual do
nosso menu para o adequar ao definido inicialmente.
Uma das primeiras alterações diz respeito à largura dos botões, que deve ser
ajustada ao respectivo conteúdo. O estilo a alterar é o ul.MenuBarVertical
li, mudando a propriedade width de 8em para auto:
A seguir, mudamos o tipo de letra utilizado. Ao estilo ul.MenuBarVertical

acrescentamos uma propriedade font-family com o valor Arial, Helve-
tica, sans-serif:
Continuando neste estilo vamos criar a propriedade font-weight com o

valor bold:
A cor das letras é definida no estilo ul.MenuBarVertical a. Mudamos para

branco (#fff):
Agora vamos mudar a cor de fundo que também se encontra no estilo ul.
MenuBarVertical a. Mudamos para #F90:
Seguimos para a alteração da cor de mouseover, alterando a propriedade

background-color para #F00 no estilo ul.MenuBarHorizontal
a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSub-

menuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible:
Só falta a linha branca a separar as opções do menu principal. Acrescentamos

a propriedade border-right com o valor solid 1px #FFF ao estilo
ul.MenuBarHorizontal li:
Para as opções do sub-menu, acrescentamos a propriedade border-bottom

com o valor solid 1px #FFF ao estilo ul.MenuBarHorizontal ul li. E
no segundo estilo ul.MenuBarHorizontal ul, mudamos a cor da border para
#FFF:
Só falta dar uma largura maior às opções do sub-menu. Alteramos o valor da

propriedade width para 12em no estilo ul.MenuBarHorizontal ul e para
o mesmo valor no estilo ul.MenuBarHorizontal ul li:
15.2.4 Remover uma Spry Menu Bar

Para nos vermos livres de uma SPRY MENU BAR, basta seleccioná-la (clicando
no separador azul existente no topo) e depois teclar DELETE. Além de remover
o HTML utilizado para criar o menu, o Dreamweaver também removerá os
ficheiros CSS e JavaScript externos desde que não exista mais nenhuma
SPRY MENU BAR no nosso sítio Web.
15.3 Spry Tabbed Panel

Alguns visitantes de páginas Web não gostam de fazer scroll. Se não virem o
que pretendem quando uma página é carregada, passam à frente. Devido a
este facto muitos web designers dividem grandes quantidades de informação
em páginas múltiplas para que cada página apresente pedaços pequenos e
fáceis de digerir. Claro que isso envolve a construção de várias páginas em
vez de apenas uma, e força o visitante a clicar através de uma série de pági-
nas.
Os SPRY TABBED PANELS são uma forma óptima de colocar bastante conteúdo
num pequeno espaço. O visitante vê um painel com separadores quando a
página é carregada pela primeira vez, com o conteúdo de um dos painéis visí-
vel. Um único clique permite ao utilizador mudar para qualquer outro separa-
dor.
Um exemplo deste tipo de elemento de navegação aparece na página princi-
pal do sítio MaisFutebol (http://www.maisfutebol.iol.pt/):
Em vez de se criar uma página longa, ou várias páginas pequenas, pode

organizar informação em vários painéis de separadores. Desta forma o con-
teúdo está sempre acessível pelo utilizador e pode-se aceder facilmente e
rapidamente a diferentes secções clicando no separador que existe acima de
cada painel.
Pode colocar um SPRY TABBED PANEL em qualquer parte de uma página Web.
Mas dado que os separadores formam uma linha única no topo do grupo de
painéis, necessitará de espaço para acomodar todos os separadores.
Para adicionar um widget SPRY TABBED PANEL a uma página:
1. Coloque o cursor onde pretende que o menu apareça. Por exemplo,
2. A partir das categorias SPRY ou LAYOUT da barra INSERT, escolha SPRY
TABBED PANEL BAR. Em alternativa pode utilizar a opção INSERT > SPRY
> SPRY TABBED PANELS. Por omissão, o painel possui dois separado-
res:
3. Opcionalmente atribua um nome ao SPRY TABBED PANEL. O Dream-

weaver fornece um nome genérico, TabbedPanels1.
4. Para aumentar o número de separadores clique no botão + no PRO-
PERTY INSPECTOR. O novo separador é inserido abaixo do separador
correntemente seleccionado:
5. Para remover um separador existente, clique no botão -.

6. Para alterar a ordem dos separadores, seleccione qualquer separador
na lista e utilize os botões seta para ajustar a posição dos separado-
res. A seta para cima move um painel para a esquerda e a seta para
baixo move-o para a direita. Os separadores que se encontrem no
topo na lista no PROPERTY INSPECTOR são, na DESIGN VIEW, posiciona-
dos à esquerda dos separadores que se encontrem mais abaixo na
lista.
7. Para definir o separador/painel que é apresentado inicialmente aberto
quando a página é carregada, seleccione o nome do separador na lista
DEFAULT PANEL. Por omissão o primeiro separador/painel aparece
aberto.
Todas as modificações do texto dos separadores e das áreas de conteúdo são
executadas directamente na DESIGN VIEW na janela do documento. Por exem-
plo, se pretender alterar o texto de um separador, seleccione simplesmente o
texto e substitua-o (um clique triplo selecciona todo o texto).
Para adicionar conteúdo, substitua a frase Content 1. Tudo o que pode

colocar numa página Web também pode colocar num painel: por exemplo,
cabeçalhos, parágrafos, listas, formulários, imagens e filmes Flash. Pode
mesmo inserir outro SPRY TABBED PANEL.
Para mudar para um separador diferente de forma a mudar o conteúdo do pai-
nel, mova o cursor para cima do separador e quando aparecer o ícone do olho
no lado direito do separador,
clique nesse olho para trazer o painel respectivo para a frente dos outros pai-
néis.
Em HTML, um SPRY TABBED PANEL é composto por um elemento div que
agrupa uma lista não numerada (elemento ul) e um conjunto de elementos
div, que correspondem aos conteúdos de cada painel:
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
</div>
</div>
15.3.1 Formatar os painéis

Os SPRY TABBED PANELS não são mais do que HTML básico com estilos CSS
aplicados. Os ‘botões’ dos separadores são uma lista, e cada painel é um div,
estando todos os painéis envolvidos por outro div. Toda a formatação é con-
trolada por uma folha de estilos externa, SpryTabbedPanels.css, que está
localizada na pasta SpryAssets.
O Dreamweaver fornece diferentes estilos CSS para formatar os painéis, o
separador correntemente seleccionado, e os separadores cujos painéis não se
encontrem visíveis.
Lista de elementos do painel com os estilos que controlam a sua aparência:
o SPRY TABBED PANEL como um todo (.TabbedPanels) – Normalmente
a largura do SPRY TABBED PANEL ajusta-se ao espaço disponível na
página. Caso pretenda uma largura fixa terá de alterar a propriedade
width do estilo .TabbedPanels, cujo valor é por omissão 100%. O
grupo inteiro de painéis e separadores está floated para a esquerda,

por isso, qualquer conteúdo que apareça após o grupo de painéis apa-
recerá ao lado direito dos painéis. É por isso que é sempre ideal colo-
car um SPRY TABBED PANEL dentro de um div.
o Todos os separadores (.TabbedPanelsTab) – Existem dois tipos de
separadores: o separador correntemente visível e os separadores que
não estão activos. O estilo .TabbedPanelsTab controla ambos estes
tipos. Se pretender alterar o tipo de letra utilizado em todos os separa-
dores, ou alterar a moldura que aparece à volta dos separadores, edite
este estilo. Para ajustar a quantidade de espaço entre o limite do sepa-
rador e o texto, edite a propriedade padding. Para alterar o espaço
entre separadores, edite a propriedade margin.
o Separador não activo (.TabbedPanelsTab e .TabbedPanelsTab-
Hover) – O estilo .TabbedPanelsTab também define o aspecto
básico de um separador não activo – cor de fundo, etc. Além disso, um
separador não activo possui um estilo de hover/mouseover, que é o
.TabbedPanelsTabHover. A folha de estilos fornecida pelo Dream-
weaver apenas altera a cor de fundo do separador quando o rato está
por cima (hover), mas pode efectuar outras alterações como a cor da
letra.
o Separador activo (.TabbedPanelsTabSelected) – Este estilo
sobrepõe-se às propriedades herdadas do estilo .TabbedPanelsTab
que todos os separadores partilham. A cor de fundo e a cor do texto
diferem do outro estilo de separador, mas pode modificá-las.
Tenha em atenção alguns detalhes. Primeiro o estilo tem uma moldura
inferior definida que não deve eliminar a não ser que elimine as moldu-
ras inferiores do estilo .TabbedPanelsTab. Senão, verá uma linha a
separar o separador do painel. Além disso, se alterar a cor de fundo do
separador e do painel (possuem normalmente a mesma cor para fazer
com que pareça que formam um único elemento), defina a cor da mol-
dura inferior deste estilo para o mesmo valor. Senão, terá uma linha a
separar o separador do painel.
Evite utilizar tamanhos diferentes para o texto do separador activo e
dos separadores não activos.
o Painéis (.TabbedPanelsContentGroup ou .TabbedPanels-
Content) – O estilo .TabbedPanelsContentGroup é aplicado ao
elemento <div> que ‘embrulha’ todos os painéis. O conteúdo de cada
painel é ele próprio ‘embrulhado’ num elemento <div> que possui
associada a classe .TabbedPanelsContent. A moldura e cor de
fundo dos painéis são controladas pelo estilo .TabbedPanels-

ContentGroup.
Se um painel possuir muita informação e outro painel possuir pouca,
os painéis aparecerão muito diferentes quando alternar entre eles.
Para definir uma altura idêntica para todos os painéis, edite o estilo
.TabbedPanelsContent e adicione uma propriedade height. Esta
propriedade deverá ter um valor correspondente à altura do painel
mais alto.
Nos browsers, quando clica num separador aparece um outline à volta,
que indica que está no estado focus, isto é, que tem a atenção do uti-
lizador:
Para remover este comportamento, tem de criar um estilo chamado

.TabbedPanelsTab:focus. Depois necessita de definir a proprie-
dade outline para o valor none utilizando o PROPERTIES PANEL na
parte de baixo do painel CSS. Clique no link ADD PROPERTY, escreva
outline, tecle TAB e depois escreva none.
o Conteúdo dentro do painel – Embora os cabeçalhos e parágrafos her-
dem quaisquer propriedades de texto adicionadas aos estilos dos pai-
néis, pode querer definir um novo aspecto visual para os cabeçalhos,
parágrafos, listas e outros elementos que coloque dentro de um painel.
Por exemplo, para definir as características de todos os parágrafos de
todos os painéis, utilize um estilo com a designação .TabbedPa-
nelsContent p.
No ficheiro SpryTabbedPanels.css existem estilos que começam por
.VTabbedPanels e que se destinam aos painéis de separadores verticais.
Estes painéis verticais apresentam os separadores uns por cima dos outros ao
longo do lado esquerdo do grupo de painéis:
Para criar um destes painéis basta aplicar a classe .VTabbedPanels ao ele-

mento <div> que engloba todo o grupo de painéis, e que é identificado no
TAG SELECTOR por <div.TabbedPanels#TabbedPanels1>.
Clique com o botão direito do rato (CONTROL+CLIQUE no Macintosh) por cima
do elemento no Tag Selector, seleccione a opção Set Class do menu que apa-
rece e depois seleccione VtabbedPanels do submenu que aparece:
15.4 Spry Accordion Panel

Um painel acordeão é ideal quando se tem de apresentar bastante informação
num espaço pequeno. Utiliza painéis de informação como os SPRY TABBED
PANELS, mas os separadores estão uns por cima dos outros e o conteúdo de
todos os painéis, menos o activo, aparece escondido.
Ao contrário dos separadores de um SPRY TABBED PANEL, nos separadores de
um SPRY ACCORDION PANEL a porção do texto ocupa toda a largura de um pai-
nel e, quando seleccionado, abre suavemente para revelar o conteúdo.
Além disso tem de se definir a altura de cada painel, o que significa que se o
conteúdo dentro de um painel for maior do que o próprio painel, aparecerá
uma barra de scroll no limite direito do painel. O Dreamweaver, por omissão,
define 200 píxeis como altura, mas pode alterar este valor.
Não existe forma de alterar o painel por omissão no PROPERTY INSPECTOR.
Quando uma página é apresentada ao utilizador, o painel do topo está sempre
aberto.
Para adicionar um widget SPRY ACCORDION PANEL:
1. Coloque o cursor onde pretende que o menu apareça, por exemplo,

botão SPRY ACCORDION. Em alternativa pode utilizar a opção INSERT >
SPRY > SPRY ACCORDION. O SPRY ACCORDION PANEL, com dois sepa-
radores, é inserido na página:
Verá um separador (com o texto LABEL 1), um painel aberto (com

CONTENT 1) e outro separador (com o texto LABEL 2) no fundo. Aparece
um separador Spry azul acima do separador do topo a identificar o
SPRY ACCORDION PANEL.
3. No PROPERTY INSPECTOR pode atribuir um nome ao SPRY ACCORDION
PANEL. Por omissão é utilizado o nome Accordion1:
4. Para aumentar o número de painéis, clique no botão + na lista PANELS.

O novo separador é inserido abaixo da entrada correntemente selec-
cionada.
5. Para remover um painel previamente inserido, seleccione-o na lista
PANELS e clique em -;
6. Para alterar a ordem dos painéis, seleccione qualquer item, na lista
PANELS, e utilize os botões das setas para ajustar a posição relativa do
painel. Os painéis que se encontrem perto do topo no PROPERTY
INSPECTOR são, na DESIGN VIEW, posicionados ao lado esquerdo dos
painéis abaixo deles na lista.
Tal como acontece com os outros widgets, a primeira vez que guarda um
ficheiro com um widget SPRY ACCORDION PANEL, o Dreamweaver informa-o
sobre os ficheiros de suporte que foram copiados para o seu site e que é
necessário colocar online: SpryAccordionPanels.js e SpryAccordion-
Panels.css.
Se olhar para o código HTML que suporta a estrutura de um SPRY ACCORDION

PANEL, verá o que é essencialmente um conjunto de elementos <div> imbri-
cados:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
O comportamento de um SPRY ACCORDION PANEL é controlado pelo objecto

Accordion que é criado na parte de baixo da página:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
Um SPRY ACCORDION PANEL está dividido em secções compostas por um

separador com um texto e por um painel com conteúdo que está associado ao
separador. Cada separador está embebido no seu próprio elemento <div> – o
conteúdo para um painel aparece dentro de outro elemento <div>. Cada par
separador/painel está dentro de outro div. E, já agora, o SPRY ACCORDION
PANEL está ‘embrulhado’ por um div final.
As modificações ao texto do separador e às áreas de conteúdo são executa-
das directamente na DESIGN VIEW . Para alterar o texto de um separador, basta
seleccioná-lo e substituí-lo. Como um separador ‘ocupa’ a largura inteira do
SPRY ACCORDION PANEL, pode colocar aqui mais palavras do que num separa-
dor de um SPRY TABBED PANEL.
Mais uma vez, pode mudar de um painel para outro através do ícone olho na
DESIGN VIEW , que aparece quando passa com o cursor por cima do separador:
Para adicionar conteúdo a um painel basta começar a escrever. Pode utilizar

qualquer combinação de elementos HTML dentro de um painel. Porém, se
ultrapassar a altura predefinida, que é de 200 píxeis, terá de efectuar um duplo
clique no painel de forma a entrar em modo de edição e poder visualizar todo
o conteúdo do painel.
Pode também alternar entre a altura predefinida e o conteúdo total do painel

utilizando o submenu ELEMENT VIEW que aparece quando se clica com o botão
direito do rato dentro do conteúdo de um painel:
Todos os painéis expandem-se ao efectuar o duplo-clique ou escolher a opção

FULL do submenu ELEMENT VIEW.
Para seleccionar todo o conteúdo de um painel utilize a opção EDIT > SELECT
ALL ou tecle CONTROL+A.
15.4.1 Formatar um Spry Accordion Panel

Quando adiciona um SPRY ACCORDION PANEL à página, o Dreamweaver asso-
cia à página uma folha de estilos externa, de nome SpryAccordion.css.
Este ficheiro CSS contém todos os estilos que controlam o aspecto dos sepa-
radores e painéis do SPRY ACCORDION PANEL. O processo de modificação da
aparência destes separadores é semelhante ao dos outros widgets Spry abor-
dados anteriormente – identifique o elemento que pretende formatar e depois
abra e edite o estilo do elemento.
Elementos e estilos utilizados num SPRY ACCORDION PANEL:
o SPRY ACCORDION PANEL como um todo (.Accordion) – Esta classe
controla as definições gerais do SPRY ACCORDION PANEL. É aplicada ao
elemento <div> que rodeia os separadores e os painéis. Se adicionar
formatação básica do texto a este estilo, como cor, tamanho e família,
os separadores e painéis herdam estas configurações.
Os limites esquerdo, direito e do fundo (isto é, a moldura) que apare-
cem à volta do SPRY ACCORDION PANEL são definidos neste estilo.
o Todos os separadores (.AccordionPanelTab) – Este estilo altera a
aparência básica de todos os separadores. Se definir um tipo de letra
para este estilo, então todos os separadores utilizam esse tipo de letra.
Além disso, o padding dentro de cada separador, e a moldura que

aparecem à volta de cada separador são definidas neste estilo.
Os separadores existentes dentro de um SPRY ACCORDION PANEL são
apresentados em quatro formas possíveis: separador activo (o separa-
dor para o painel correntemente seleccionado), separador não activo
(correspondente aos separadores que possuem o painel escondido) e
o estado focus para cada um dos tipos de separadores anteriores.
Para perceber o estado focus clique num separador e verá que todos
os separadores mudam de aparência, nomeadamente a cor de fundo.
A existência deste estado destina-se a ajudar os visitantes que nave-
gam nas páginas Web recorrendo ao teclado. Neste caso, pode utilizar
a tecla TAB para saltar para o SPRY ACCORDION PANEL e depois utilizar
as teclas de cursor (× e Ø) para esconder e revelar os painéis.
o Separador não activo (.AccordionPanelTab, .AccordionPanel-
TabHover, e .AccordionFocused .AccordionPanelTab). O esti-
lo .AccordionPanelTab também define a cor de fundo de um
separador não activo. Além disso, um separador não activo possui um
estilo mouseover (hover), .AccordionPanelTabHover, para que
quando o visitante passa o cursor por cima do separador, o separador
fique realçado para indicar que pode clicar nele. A folha de estilos
básica fornecida com o Dreamweaver apenas altera a cor do texto do
separador quando o cursor passa por cima.
Quando se clica em qualquer separador, todos os separadores não
activos também mudam de aparência, graças ao estilo .Accordion-
Focused .AccordionPanelTab. Os separadores também utilizam
este estilo quando um visitante carrega na tecla TAB para aceder aos
painéis de um SPRY ACCORDION PANEL. A cor de fundo muda para um
azul claro. Pode eliminar o estilo se não pretender que os separadores
mudem quando são clicados, ou mudar a cor utilizada.
Temos o mesmo problema do que nos SPRY TABBED PANELS relativa-
mente à linha que os browsers colocam à volta dos separadores que
possuem o focus. Neste caso, aparece à volta de todo o SPRY ACCOR-
DION PANEL. Para a remover crie um estilo .Accordion:focus e
depois defina a propriedade outline com o valor none.
o Separador activo (.AccordionPanelOpen .AccordionPanelTab,
.AccordionPanelOpen .AccordionPanelTabHover e .Accor-
dionFocused .AccordionPanelTab) – O estilo .Accordion-
PanelOpen .AccordionPanelTab aplica-se ao separador associa-
do com o painel correntemente aberto. Este estilo essencialmente
sobrepõe-se às propriedades de estilo herdadas do estilo .Accor-
dionPanelTab que todos os separadores partilham. Na folha de

estilo geral, apenas a cor de fundo difere do outro estilo de separador.
Além disso, o texto num separador activo também muda de cor
quando o rato de um utilizador passa por cima graças ao estilo
.AccordionPanelOpen .AccordionPanelTabHover. Não parece
muito lógico este comportamento, já que não adianta nada clicar num
separador relativo a um painel aberto.
Um separador activo também muda de cor quando clica no respectivo
separador, ou tecla TAB, para aceder ao SPRY ACCORDION PANEL.
Neste caso é utilizado o estilo .AccordionFocused .Accordion-
PanelTab.
o Painéis (.AccordionPanelContent) – Este estilo é aplicado ao ele-
mento <div> que rodeia o HTML contido num SPRY ACCORDION
PANEL. Pode ajustar as definições de tipo de letra para este estilo para
afectar apenas o texto que se encontre dentro do painel.
Este estilo define também a altura de cada um dos painéis. A proprie-
dade height possui, por omissão, o valor 200 píxeis, mas pode alte-
rar este valor para mostrar um painel maior ou mais pequeno. Infeliz-
mente, não existe forma para fazer com que os painéis se ajustem
automaticamente ao respectivo conteúdo – para que os painéis do
SPRY ACCORDION PANEL funcionarem é necessário definir sempre uma
altura.
o Conteúdo dentro do painel – O Dreamweaver não fornece estilos
específicos para controlar os elementos HTML que se encontram den-
tro dos painéis de um SPRY ACCORDION PANEL. Pode recorrer ao pro-
cesso utilizado anteriormente nos Spry TABBED PANELS, utilizando
.Accordion como primeira parte do identificador do estilo. Por exem-
plo, .Accordion p, pode ser utilizado para formatar a aparência vi-
sual dos parágrafos existentes em todos os painéis.
Repare também que o conteúdo existente dentro de um painel aparece
encostado aos limites esquerdo e direito do painel. Não pode aplicar o
padding directamente ao painel (isto é, ao estilo .AccordionPa-
nelContent) porque criaria um espaço vazio debaixo dos
separadores dos painéis fechados. Em vez disso, tem de adicionar
padding aos elementos que aparecem dentro do painel. Se pretender
que todos os elementos h2 se afastem 5 píxeis dos lados esquerdo e
direito, crie um estilo .Accordion h2, e depois defina os valores
left e right da propriedade margin para 5 píxeis.
15.5 Spry Collapsible Panel

Um SPRY COLLAPSIBLE PANEL pode ser visto como um SPRY ACCORDION PANEL
com um único separador/painel. O mesmo estilo de layout é utilizado com o
texto colocado no separador, que quando clicado mostra ou esconde o painel:
Dado que não existe outro painel associado, apenas o separador fica visível
quando o painel é escondido. O painel pode estar aberto ou fechado quando a
página é apresentada inicialmente. Um SPRY COLLAPSIBLE PANEL é óptimo
para manter a informação fora do ‘caminho’ de um visitante até que ele queira
essa informação – como um formulário para assinar uma newsletter via e-mail
ou direcções para deslocar-se à sua empresa. Adicione um painel aberto
quando pretender apresentar uma informação importante, que uma vez lida,
possa ser rapidamente escondida com o clique de um rato.
Os SPRY COLLAPSIBLE PANEL funcionam particularmente bem quando inseridos
dentro de elementos div posicionados de forma absoluta (elemento AP), dado
que quando abertos não interferem com o resto dos elementos da página
(apenas os poderão tapar). E, se o elemento AP estiver associado à acção
DRAG AP ELEMENT, então poderemos ter um menu que pode ser deslocado
pelo utilizador na janela do browser de forma a estar sempre à mão.
Para adicionar um widget SPRY COLLAPSIBLE PANEL a uma página:
1. Coloque o cursor onde pretende que o menu apareça, por exemplo,
botão SPRY COLLAPSIBLE PANEL. Em alternativa pode utilizar a opção
INSERT > SPRY > SPRY COLLAPSIBLE PANEL. É inserido na página um
conjunto separador/painel, com Content como conteúdo do painel e
um separador azul Spry acima do separador:
3. No PROPERTY INSPECTOR pode atribuir opcionalmente um nome ao

SPRY COLLAPSIBLE PANEL.
Não pode adicionar outros separadores ou painéis. Pode contudo

colocar múltiplos SPRY COLLAPSIBLE PANELS numa página, uns em
cima dos outros. Este método tem duas vantagens. Primeiro, não
necessita que um painel apareça aberto quando a página é carregada
como acontece com um SPRY ACCORDION PANEL. Pode ter vários SPRY
COLLAPSIBLE PANEL numa página estando todos fechados. Um visitante
clica no separador de um painel e ele abre deixando os outros painéis
fechados.
Além disso, como cada SPRY COLLAPSIBLE PANELS é independente dos
outros, um visitante pode ter todos os painéis abertos em simultâneo.
4. No menu DISPLAY pode escolher OPEN ou CLOSED mas isto só se
aplica quando se está em DESIGN VIEW para ajudar o web designer.
Não afecta a forma como o painel aparece quando a página é visuali-
zada num browser. Para abrir/fechar um SPRY COLLAPSIBLE PANEL na
DESIGN VIEW pode também recorrer ao ícone olho que aparece no
canto superior direito do separador quando se passa o cursor por
cima.
5. Para que o painel apareça aberto quando a página é visualizada no

browser, escolha a opção OPEN da lista DEFAULT STATE no PROPERTY
INSPECTOR. Para que o painel apareça fechado, escolha CLOSED.
6. A opção ENABLE ANIMATION permite activar/desactivar a animação (do
tipo window-blind) que é executada quando se clica no separador, para
abrir/fechar o respectivo painel. Se a animação estiver desactivada, o
painel fecha ou abre imediatamente.
Tal como acontece com os outros widgets, a primeira vez que guarda um
ficheiro com um widget SPRY COLLAPSIBLE PANEL, o Dreamweaver informa-o
sobre os ficheiros de suporte que foram copiados para o seu site e que é
necessário colocar online. Neste caso são os ficheiros SpryCollapsible-
Panels.js e SpryCollapsiblePanels.css.
Este widget expande-se ocupando a largura completa do elemento que o

contém. Por isso o ideal é colocá-lo dentro de um elemento div que tenha
uma propriedade width definida no estilo CSS associado.
Um SPRY COLLAPSIBLE PANEL consiste numa combinação simples de elemen-
tos div: um elemento div que marca o início e o fim do widget e que envolve
dois outros elementos div (um para o separador e outro para o painel):
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
Para editar o texto de um separador, seleccione-o em DESIGN VIEW, e altere-o.

Para editar o conteúdo do painel este tem de estar visível. Para isso utilize a
opção OPEN da lista DISPLAY do PROPERTY INSPECTOR ou clique no ícone olho
que aparece no canto superior direito do separador quando o cursor passa por
cima do separador. Seleccione todo o texto existente no painel utilizando EDIT
> SELECT ALL ou teclando CTRL+A. Pode colocar num painel qualquer combi-
nação de elementos HTML.
15.5.1 Formatar a aparência de um SPRY COLLAPSIBLE PANEL

Quando adiciona um SPRY COLLAPSIBLE PANEL a uma página, o Dreamweaver
estabelece uma ligação entre a página e a folha de estilos externa SpryCol-
lapsiblePanel.css que contém todos os estilos que controlam o aspecto
do separador e do painel.
Os estilos utilizáveis e as suas restrições já foram abordados na secção sobre
o SPRY ACCORDION PANEL. Mas para ter uma ideia rápida dos estilos utilizados:
o SPRY COLLAPSIBLE PANEL como um todo (.CollapsiblePanel) –
controla a moldura que aparece à volta de um SPRY COLLAPSIBLE
PANEL. Altere a cor ou o estilo da moldura, ou remova-a completa-
mente.
o Separador (.CollapsiblePanelTab) – Este estilo permite alterar a
aparência básica do separador.
o Separador quando o painel está fechado (.CollapsiblePanelTab)
– Define as propriedades do separador, como a cor de fundo, quando
o painel está fechado.
o Separador quando o cursor se encontra por cima (.Collapsible-
PanelTabHover, .CollapsiblePanelOpen .CollapsiblePa-
nelTabHover) – Este estilo aplica-se ao estado mouseover/hover do
separador, tanto quando o painel está aberto como quando está
fechado. Se pretender definir uma aparência diferente para o estado
mouseover/hover para um separador quando o painel está aberto, tem

de criar dois estilos: .CollapsiblePanelTabHover para quando o
painel está fechado e .CollapsiblePanelOpen .Collapsible-
PanelTabHover para quando o painel está aberto.
Deverá também eliminar o estilo .CollapsiblePanelTabHover,
.CollapsiblePanelOpen .CollapsiblePanelTabHover, ou al-
terar o seu nome para que só se aplique a um dos estados do sepa-
rador.
o Separador quando o painel está aberto (.CollapsiblePanelOpen
.CollapsiblePanelTab e .CollapsiblePanelFocused .Col-
lapsiblePanelTab) – o estilo .CollapsiblePanelOpen .Col-
lapsiblePanelTab aplica-se ao separador quando o painel está
aberto. Este estilo sobrepõe-se às propriedades de estilo herdadas do
estilo genérico .CollapsiblePanelTab. Na folha de estilos por
omissão, apenas a cor de fundo difere do outro estilo de separador,
mas pode ser alterada.
O separador também muda de cor quando clica nele ou tecla TAB. O
estilo .CollapsiblePanelFocused .CollapsiblePanelTab é
utilizado neste caso, por isso poderá querer editá-lo se não quiser este
comportamento.
o Painel (.CollapsiblePanelContent) – Este estilo é aplicado ao
elemento <div> que envolve o HTML contido no painel. Pode ajustar
as definições de tipo de letra para este estilo para que afectem apenas
o texto dentro do painel, ou adicionar uma cor de fundo para destacar
o painel do resto do conteúdo da página.
o Conteúdo dentro do painel – Tal como acontece com os SPRY TABBED
PANELS e os SPRY ACCORDION PANELS, o Dreamweaver não fornece
estilos que controlem elementos específicos dentro de um SPRY
COLLAPSIBLE PANEL. Utilize nomes do tipo .CollapsiblePanel-
Content para para os estilos que alteram a aparência dos Pará-
grafos.
Tenha em atenção que o conteúdo existente dentro de um SPRY
ACCORDION PANEL interfere directamente com os limites esquerdo e
direito do painel. Não pode aplicar padding directamente ao painel
(isto é, ao estilo .CollapsiblePanelContent) porque isto adiciona
espaço extra dentro de um painel fechado, não o deixando fechar.
Tem de adicionar padding aos elementos existentes dentro do painel.
15.6 Spry Tooltip

Uma SPRY TOOLTIP é um widget que permite que apareça uma tooltip por cima
de qualquer elemento da página:
Está muitas vezes associado a um link para fornecer informação sobre a

página destino, sem ser necessário visitar essa página.
Para inserir uma SPRY TOOLTIP é necessário, em primeiro lugar, seleccionar o
elemento da página ao qual vai estar associado.
Em seguida clica-se no ícone SPRY TOOLTIP da barra INSERT,
ou selecciona-se a opção INSERT > SPRY > SPRY TOOLTIP.

O Dreamweaver insere uma SPRY TOOLTIP logo após o elemento block-level
(parágrafo, div, ou outro) em que a selecção estava inserida:
Dentro da tooltip pode inserir o conteúdo que muito bem entender incluindo
imagens.
Ao guardar a página em que a SPRY TOOLTIP existe, serão copiados os fichei-
ros SpryTooltip.css e SpryTootip.js para a pasta SpryAssets.
O PROPERTY INSPECTOR permite alterar a funcionalidade da SPRY TOOLTIP:
Uma das opções que mais impacto tem no visitante da página é a opção
FOLLOW MOUSE, que faz com que a tooltip siga o ponteiro do rato enquanto
este estiver por cima do elemento que está associado à SPRY TOOLTIP.
As propriedades HORIZONTAL OFFSET e VERTICAL OFFSET permitem definir, em
píxeis, a distância entre o ponteiro do rato e a tooltip. Se utilizar valores nega-
tivos a tooltip passa para o lado esquerdo e para cima do ponteiro do rato. Por
exemplo, se utilizarmos -30 para o HORIZONTAL OFFSET:
A propriedade SHOW DELAY define o período de tempo que decorre, em milis-

segundos, entre o cursor passar por cima do elemento e a tooltip aparecer. A
propriedade HIDE DELAY permite definir o período de tempo associado ao es-
conder da tooltip.
As opções de BLIND e FADE são utilizadas para criar um efeito visual quando a
tooltip é mostrada e quando é escondida.
Só existem dois estilos associados a uma SPRY TOOLTIP:
Não convém mexer no estilo .iframeTooltip, por isso o estilo que devemos alte-
rar é o .tooltipContent. Por omissão apenas possui definida a proprie-
dade background-color com o valor #FFFFCC que é a cor tradicionalmente
associada às tooltips.
Como o que podemos colocar dentro de uma tooltip é qualquer conteúdo
HTML com estilos CSS aplicados, podemos fazer algo do género:
15.7 Widget Browser

O Adobe Widget Browser é uma aplicação que ajuda a localizar e configurar
widgets que estão disponíveis no Adobe Exchange. Podemos assim instalar
novos widgets no Dreamweaver de forma a disponibilizarmos novos efeitos
visuais ou funcionalidades nas nossas páginas Web.
Para instalar esta aplicação no seu computador, aceda à opção INSERT >
WIDGET e, na caixa de diálogo que aparece, clique no link WIDGET BROWSER:
Acederá a uma página da Adobe que lhe permite transferir a aplicação:
Depois de transferir o W IDGET BROWSER e de o instalar no seu computador, ele

fica disponível no menu START do Windows e na Pasta APPLICATIONS do
Macintosh. Invocando o programa aparece uma lista das widgets disponíveis

no Adobe Exchange:
Terá de fazer o login no Adobe Exchange (clique no link SIGN IN) para poder
pré-visualizar e ver informação sobre widgets.
Clicando num dos widgets disponíveis, abre uma página específica desse wid-
get, onde pode obter diversa informação:
Clicando no botão PREVIEW no canto superior direito pode testar o widget:
Se clicar no botão ADD TO MY WIDGETS, o widget será adicionado à área MY

WIDGETS do WIDGET BROWSER e também será adicionado ao Dreamweaver
para poder ser utilizado em páginas Web.
Na área MY WIDGETS podemos clicar num widget para aceder à respectiva
área de visualização e configuração. Clicando no botão CONFIGURE acedemos
à área de configuração,
onde podemos definir cores e outros parâmetros, personalizando assim o wid-

get de acordo com a página onde pretendemos inseri-lo. Atribua um nome à
configuração no campo NAME e clique no botão SAVE PRESET para guardar a
configuração. Pode criar diversas configurações.
Na página principal do widget pode clicar no botão SAVE WIDGET FILES para
guardar numa pasta em disco os ficheiros necessários para utilizar o widget,
bem como uma página exemplo, para poder testar no seu browser.
No Dreamweaver, os widgets instalados através do WIDGET BROWSER, estão
disponíveis a partir da opção INSERT > WIDGET:
Também pode ter acesso a esta caixa de diálogo através do ícone W IDGET na
categoria COMMON da barra INSERT:
Seleccionando um widget no campo WIDGET poderá inseri-lo na página cor-

rente:
Muitos destes widgets recorrem à biblioteca jQuery, por isso não se admire de
ver uma pasta js criada no seu sítio Web com um ficheiro do tipo, jquery-
1.4.2.js.
Caso tenha definido uma ou mais configurações para um widget, elas apare-
cem disponíveis no campo PRESET:
16 Validação de formulários
A forma mais tradicional dos utilizadores de páginas Web submeterem infor-

mação é através dos formulários. Um dos maiores problemas que um web
developer pode ter, com o processamento da informação inserida nos formulá-
rios, é a inexistência dessa informação (isto é, os campos não foram preenchi-
dos) ou o formato indevido dos dados fornecidos.
Quando cria um formulário numa página define cada campo com um determi-
nado propósito. O campo de nome, o campo do correio electrónico e o código
postal têm de ter limitações relativamente à informação que se pode lá inserir.
É normal utilizar um programa do lado do servidor para verificar os dados
introduzidos pelo utilizador no formulário. Mas para o visitante de uma página
é muito aborrecido submeter um formulário, e passado uns segundos aparecer
uma mensagem a informá-lo que algo está errado.
O Dreamweaver tem, desde há muitos anos, uma behavior (VALIDATE FORM)
que permite a validação do preenchimento de campos de formulários. Con-
tudo, esta behavior é bastante limitada nas validações que disponibiliza.
A Spry framework que é utilizada pelo Dreamweaver disponibiliza diversos
widgets que permitem uma validação avançada dos conteúdos dos campos de
um formulário.
16.1 Validação com widgets Spry

O método típico de validação de formulários requer passos múltiplos para
cada elemento do formulário: primeiro o elemento tem de ser inserido na
página, depois adiciona-se a behavior e finalmente as mensagens de erro.
Com os widgets SPRY de validação de formulários, todas estas tarefas são
incluídas num único passo.
Dado que o preenchimento de um formulário é um processo interactivo, cada
um dos widgets de formulário Spry é capaz de ter estados diferentes. No
Dreamweaver pode escolher o estado INVALID FORMAT do widget SPRY
VALIDATION TEXT FIELD para modificar a mensagem de erro e depois mudar
para o estado VALID para afinar a propriedade background-color (cor de
fundo) para assinalar um valor correcto.
Outra funcionalidade comum entre os widgets de formulário Spry é a capaci-

dade de aplicar a validação em pontos múltiplos do processo. Por omissão,
todos os widgets executam automaticamente a validação quando o utilizador
submete o formulário. Pode-se porém optar por executar a validação quando o
utilizador clica noutro campo ou tecla TAB para mudar para outro campo
(evento onBlur) ou quando o valor no campo do formulário é alterado (evento
onChange).
Quando pretender construir um formulário com validação Spry, terá de utilizar
os widgets Spry em vez dos campos tradicionais que estão disponíveis no
menu INSERT > FORM ou na categoria FORM da barra INSERT.
Para inserir um elemento SPRY VALIDATION utilize as últimas sete opções do
menu INSERT > FORM ou os últimos sete botões da categoria FORM da barra
INSERT (poderá também utilizar a categoria SPRY):
Para seleccionar um elemento SPRY terá de clicar no separador que aparece

com fundo azul quando o cursor passa por cima do elemento:
É importante ter em conta que o nome que aparece no PROPERTY INSPECTOR,

quando é seleccionado um widget de validação Spry, não é o nome do ele-
mento do formulário. Para atribuir um nome a um elemento clique no campo
do formulário. Ficará assim disponível o PROPERTY INSPECTOR para o campo
do formulário e o nome pode ser introduzido no canto superior esquerdo:
Existem quatro passos que são comuns a todos os widgets Spry:

1. Coloque o cursor no local onde pretende que apareça o campo de
texto, de preferência, dentro de um formulário existente;
2. A partir da categoria FORMS ou SPRY da barra INSERT clique no botão
correspondente ao widget SPRY de validação que pretende inserir;
3. Se as preferências do Dreamweaver estiverem definidas para apresen-
tar os atributos de acessibilidade para os campos de um formulário
(estão activas por omissão), aparecerá a caixa de diálogo INPUT FORM
ACCESSIBILITY ATTRIBUTES:
16. VALIDAÇÃO DE FORMULÁRIOS 485
Deverá preencher pelo menos o campo ID para atribuir um nome ao

campo que está a introduzir na página;
4. Se o cursor não estiver dentro de um elemento <form>, o Dreamwea-
ver pergunta-lhe se pretende criar um formulário. Responda YES, caso
ainda não possua nenhum formulário na página. Normalmente o apa-
recimento da caixa de diálogo é sinal que o cursor não se encontrava
no local correcto.
Quando um utilizador guarda uma página que contenha um widget SPRY
VALIDATION, aparece um aviso relativo aos ficheiros de suporte, tal como
acontece com os outros widgets Spry. Para cada widget Spry Validation é
copiado um ficheiro JavaScript (que define a funcionalidade) e um ficheiro
CSS (que define a aparência).
16.1.1 Utilizar widgets de validação com tabelas

Muitos web designers utilizam tabelas com duas ou três colunas para mante-
rem um formulário visualmente agradável. Nestes casos terá de efectuar
alguma manipulação de código para que os widgets SPRY VALIDATION caibam
dentro dessa estrutura.
Por exemplo, na estrutura de um formulário, é normal utilizar-se uma tabela
com três colunas: a primeira coluna é destinada ao texto identificador dos
campos (labels), a segunda para o campo do formulário e a terceira para men-
sagens de erro. A melhor técnica para integrar os widgets SPRY VALIDATION
numa tabela destas é começar por colocar o widget na coluna do meio:
<tr>
<td>Nome:</td>
<td><span id="sprytextfield1">
<span class="textfieldRequiredMsg">A value is
required.</span></span></td>
<td> </td>
</tr>
A seguir mova o atributo id (neste caso id="sprytextfield1"), que existe

no primeiro elemento <span>, para o elemento <tr>. Depois elimine o ele-
mento <span> onde se encontrava o id, que já não é necessário, dado que
identificou a linha inteira com um ID Spry. Finalmente, mova o elemento
<span> com a mensagem para a terceira coluna. O código final será:
<tr id="sprytextfield1">
<td>Nome:</td>
<td><input type="text" name="nome" id="nome"
/></td>
<td><span class="textfieldRequiredMsg">A value is
required.</span></td>
</tr>
O problema é que este rearranjo do código faz com que já não seja depois
possível aceder ao PROPERTY INSPECTOR do widget Spry, por isso é recomen-
dável que todos os ajustes ao widget sejam efectuados antes de mover o
código.
16.2 Spry Validation Text Field

O campo de texto é o campo de formulário mais comum dado que pode ser
utilizado para propósitos diferentes – quer esteja a recolher nomes, endereços
de correio electrónico, ou números de contribuinte.
Requer assim o maior número possível de tipos de validação, estando dispo-
níveis 14 tipos diferentes:
o NONE (nenhuma validação específica);
o INTEGER (número inteiro);
o EMAIL ADDRESS (endereço de correio electrónico);
o DATE (data);
o TIME (hora);
o CREDIT CARD (número de cartão de crédito);
o ZIP CODE (código postal);
o PHONE NUMBER (número de telefone);

o SOCIAL SECURITY NUMBER (número da segurança social dos EUA);
o CURRENCY (moeda);
o REAL NUMBER/SCIENTIFIC NOTATION (números inteiros, decimais e de
notação científica);
o IP ADDRESS (endereço IP numérico);
o URL (endereço Web);
o CUSTOM (validação personalizada);
Alguns dos tipos de validação – DATE, TIME, CREDIT CARD, ZIP CODE, PHONE
NUMBER, CURRENCY, e IP ADDRESS – incluem vários formatos que se podem
escolher, expandindo assim as possibilidades de validação. Além disso, a
opção de validação personalizada (CUSTOM) permite aos web designers espe-
cificarem qualquer padrão de letras, números e caracteres especiais.
Para inserir um widget SPRY VALIDATION TEXT FIELD:
1. Siga os procedimentos comuns de inserção de um widget SPRY VALI-
DATION;
2. O campo de texto, com código de validação associado, será introdu-

zido na página:
3. Com o elemento SPRY seleccionado, no PROPERTY INSPECTOR, selec-

cione na lista TYPE o tipo de validação a aplicar:
Se pretender apenas assegurar-se que é introduzido um valor textual

(isto é, o campo é de preenchimento obrigatório), deixe o campo TYPE
com o valor NONE e assegure-se que a opção REQUIRED é seleccio-
nada;
4. Se escolher um tipo de validação que possua formatos variados, como

DATE, seleccione o formato pretendido na lista FORMAT:
5. Se pretender que a validação seja efectuada antes de o formulário ser

submetido, seleccione as opções VALIDATE ON BLUR e/ou VALIDATE ON
CHANGE. A opção VALIDATE ON BLUR efectua a validação quando o
campo perde o focus, isto é, quando o utilizador ‘sai’ do campo, por
exemplo, para aceder a outro campo do formulário. A opção VALIDATE
ON CHANGE efectua a validação quando o utilizador altera o conteúdo
existente de um campo;
Pode seleccionar ambas as opções, mas em campos de texto, a opção
VALIDATE ON BLUR – isto é, validar depois do utilizador teclar TAB ou cli-
car noutro campo – cobre todas as possibilidades, incluindo se o utili-
zador alterou ou não o valor existente;
6. Introduza o texto que pretende que apareça dentro do campo por
omissão no campo HINT:
Quando o utilizador coloca o cursor num campo de texto que possua

esta pista, ela é removida.
A funcionalidade de HINT permite-lhe avisar o utilizador sobre o tipo de
informação que deverá inserir no campo em causa. E pode, por exem-
plo, evitar a existência de texto identificativo do campo, o que é útil
quando se tem pouco espaço disponível na página;
7. Defina quaisquer outras opções para a validação seleccionada.
Dependendo do tipo de validação escolhida, pode definir o número
mínimo (MIN CHARS) e máximo de caracteres (MAX CHARS) bem como o
valor mínimo (MIN VALUE) e máximo (MAX VALUE);
8. Se pretender evitar que os utilizadores introduzam caracteres inváli-
dos, seleccione a opção ENFORCE PATTERN. Quando esta opção está
activada, o utilizador não pode introduzir caracteres inválidos – os
caracteres no campo do formulário piscam brevemente a vermelho e
os caracteres inválidos são eliminados. Por exemplo, num campo que
só aceite números (validação INTEGER), não será permitida a introdu-
ção de letras.
16.2.1 Preview States

Depois de ter definido as opções de validação para o campo de texto, pode
personalizar os vários estados que estão disponíveis para o widget SPRY
VALIDATION TEXT FIELD:
o INITIAL – o estado por omissão do campo de texto. Se tiver sido defi-
nido um valor no campo HINT é apresentado no campo (quando a
página é visualizada no browser) quando este se encontrar neste
estado;
o REQUIRED – apresenta uma mensagem de erro se nenhum valor tiver
sido introduzido no campo quando este é validado:
Como é óbvio, pode alterar a mensagem, editando-a directamente na

janela do documento;
o INVALID FORMAT – apresenta uma mensagem de erro se um valor invá-
lido tiver sido introduzido no campo quando este é validado:
o VALID – ocorre quando o valor introduzido tiver passado a validação:
Para mudar entre estados, escolha um valor diferente na lista PREVIEW STATES
no PROPERTY INSPECTOR:
Quando o faz, a DESIGN VIEW muda para revelar ou esconder as possíveis

mensagens de erro e os estilos CSS utilizados.
16.2.2 Criar padrões personalizados de validação

Além das validações predefinidas é possível criar um padrão personalizado de
validação, seleccionando a opção CUSTOM na lista TYPE do PROPERTY
INSPECTOR. Ficará então disponível o campo PATTERN onde deverá escrever a
expressão de validação a aplicar. A Spry framework disponibiliza um conjunto
de caracteres especiais utilizados para definir um padrão personalizado:
Carácter Representa
0 Algarismos entre 0 e 9.
A ou a Caracteres alfabéticos case-sensitive.
B ou b Caracteres alfabéticos case-insensitive.
X ou x Caracteres alfanuméricos case-sensitive.
Y ou y Caracteres alfanuméricos case-insensitive.
? Qualquer carácter
Por exemplo, se pretender especificar como formato um código com três letras
seguidas de três algarismos, o padrão seria AAA999. Pode também especifi-
car caracteres que serão utilizados de forma literal como acontece com o
padrão associado aos números de telefone americanos que é (000) 000-000.
Neste caso, se a opção ENFORCE PATTERN estiver seleccionada, o parêntesis
de abertura aparecerá depois do primeiro número ser introduzido e os outros
caracteres não numéricos aparecem à medida que o utilizador introduz os
algarismos – não são aceites caracteres não numéricos.
16.2.3 Alterar a aparência dos campos e das mensagens de erro

Por omissão, cada estado possui estilos CSS associados que formatam a apa-
rência dos campos (nomeadamente a moldura e a cor de fundo) e das mensa-
gens de erro. Estes estilos encontram-se definidos no ficheiro SpryValida-
tionTextField.css.
As mensagens de erro aparecem a vermelho (#CC3333) com uma moldura à
volta. O estilo que permite formatar as mensagens de erro é:
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState
.textfieldInvalidFormatMsg, .textfieldMinValueState
.textfieldMinValueMsg, .textfieldMaxValueState
.textfieldMaxValueMsg, .textfieldMinCharsState
.textfieldMinCharsMsg, .textfieldMaxCharsState
.textfieldMaxCharsMsg
Para alterar as cores de fundo do campo para cada um dos estados disponí-
veis, utilize os seguintes estilos:
VALID – .textfieldValidState input,
input.textfieldValidState
INVALID (inclui estados REQUIRED e INVALID FORMAT) –

input.textfieldRequiredState,
.textfieldRequiredState input,
input.textfieldInvalidFormatState,
.textfieldInvalidFormatState input,
input.textfieldMinValueState,
.textfieldMinValueState input,
input.textfieldMaxValueState,
.textfieldMaxValueState input,
input.textfieldMinCharsState,
.textfieldMinCharsState input,
input.textfieldMaxCharsState,
.textfieldMaxCharsState input
FOCUS – .textfieldFocusState input,
input.textfieldFocusState
O estado FOCUS é utilizado quando o utilizador coloca o cursor dentro do
campo. Para formatar o estado inicial crie um estilo e aplique-o ao elemento
input que corresponde ao campo de texto.
16.3 Spry Validation Textarea

O elemento <textarea> de um formulário é utilizado para campos onde o
utilizador pode ter de escrever bastante texto, como acontece com os campos
de comentário.
Dado que um elemento <textarea> pode aceitar qualquer tipo de texto, não
existe um tipo de validação como acontece no SPRY VALIDATION TEXT FIELD.
Mas é habitual limitar o número máximo de caracteres que pode ser introdu-
zido no campo.
Para inserir um widget SPRY VALIDATION TEXTAREA:
1. Siga os procedimentos comuns de inserção de um widget SPRY
VALIDATION;
2. A textarea, com código de validação associado, será introduzida na
página:
3. A partir do PROPERTY INSPECTOR da SPRY VALIDATION TEXTAREA esco-

lha se o campo deverá ser de preenchimento obrigatório, ou não, acti-
vando/desactivando a opção REQUIRED:
4. Se pretender que a validação do campo seja efectuada antes de o for-

mulário ser submetido, seleccione as opções VALIDATE ON BLUR e/ou
VALIDATE ON CHANGE;
5. Se pretender restringir o número de caracteres introduzidos, defina o
número mínimo e/ou máximo de caracteres nos campos MIN CHARS e
MAX CHARS, respectivamente;
6. Para ajudar o utilizador a controlar os caracteres introduzidos, pode-se
adicionar um contador para mostrar os caracteres introduzidos ou que
ainda faltam para o máximo. Utilize para isso a opção COUNTER: o
valor CHARS COUNT permite apresentar o número de caracteres que já
foram inseridos, enquanto a opção CHARS REMAINING permite apre-
sentar o número de caracteres que ainda podem ser inseridos.
Necessita de introduzir um valor no campo MAX CHARS para activar a

opção CHARS REMAINING;
7. Se tiver definido um número máximo de caracteres e quer proibir o
utilizador de introduzir quaisquer caracteres adicionais, seleccione a
opção BLOCK EXTRA CHARACTERS.
Dependendo dos parâmetros do PROPERTY INSPECTOR, o widget SPRY VALIDA-
TION TEXTAREA
disponibiliza até cinco estados diferentes:
o INITIAL – é o estado por omissão de um campo textarea. Se tiver sido
definido um valor no campo HINT é apresentado no campo (quando
visualizado no browser) quando este se encontrar neste estado;
o REQUIRED – apresenta uma mensagem de erro se não tiver sido intro-
duzido nenhum valor no campo quando este é validado;
o MIN. # OF CHARS NOT MET – disponível se for introduzido um valor no
campo MIN CHARS do PROPERTY INSPECTOR. Apresenta uma mensa-
gem de erro se a contagem de caracteres corrente é inferior ao mínimo

especificado;
o EXCEEDED MAX. # OF CHARS – disponível se for introduzido um valor no
campo MAX CHARS do PROPERTY INSPECTOR. Apresenta uma mensa-
gem de erro se a contagem corrente de caracteres for maior do que o
máximo definido;
o VALID – ocorre quando o valor introduzido tiver passado a validação.
Pode mudar de um estado para o outro seleccionando o valor pretendido na
lista PREVIEW STATES no PROPERTY INSPECTOR. Esta acção expõe as mensa-
gens de erros e os estilos CSS possíveis para cada estado para que os possa
modificar, se necessário.
As opções CHARS COUNT e CHARS REMAINING simplesmente adicionam um
número sem qualquer texto identificativo que ajude o utilizador a perceber a
utilidade do número apresentado. Para adicionar um texto identificativo ao
contador, mude para CODE VIEW e localize <span id="countsprytext
area1">. Coloque o texto identificativo antes deste elemento span:
<p><span id="sprytextarea1">
<label for="comentarios">Comentários: </label>
<textarea name="comentarios" id="comentarios"
cols="45" rows="5"></textarea>
Caracteres introduzidos: <span
id="countsprytextarea1"> </span><span
class="textareaRequiredMsg">A value is
required.</span></span></p>
O resultado será:
Para formatar a aparência dos campos textarea e das mensagens de erro

utilize a informação apresentada na secção sobre a SPRY VALIDATION TEXT
FIELD.
A única diferença reside no nome dos estilos e no ficheiro que contém os esti-
los – SpryValidationTextArea.css. O estilo que permite formatar as
mensagens de erro é:
textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
VALID – .textareaValidState textarea,
textarea.textareaValidState
INVALID (inclui estados REQUIRED, MIN. # OF CHARS NOT MET e
EXCEEDED MAX. # OF CHARS) –
textarea.textareaRequiredState,
.textareaRequiredState textarea,
textarea.textareaMinCharsState,
.textareaMinCharsState textarea,
textarea.textareaMaxCharsState,
.textareaMaxCharsState textarea
FOCUS – .textareaFocusState textarea,
textarea.textareaFocusState
16.4 Spry Validation Checkbox

A SPRY VALIDATION CHECKBOX permite a validação da selecção de opções
(checkboxes). Pode ser utilizada com uma única checkbox se esta for de
selecção obrigatória ou com múltiplas checkboxes para controlar o número de
checkboxes seleccionadas.
Uma checkbox individual obrigatória é muitas vezes utilizada para certificar
que o visitante leu e está de acordo com algum tipo de acordo de utilização, do
tipo, CONCORDO COM OS TERMOS DA LICENÇA. A validação de múltiplas check-
boxes pode acontecer quando a aplicação requer que o visitante seleccione
um número mínimo/máximo de opções dentro de um determinado intervalo.
Para inserir um widget SPRY VALIDATION CHECKBOX:
VALIDATION;
2. A checkbox, com código de validação associado, será introduzida na
página:
3. A partir do PROPERTY INSPECTOR do SPRY VALIDATION CHECKBOX esco-

lha se pretende validar uma única checkbox ou múltiplas checkboxes,
seleccionando, para isso, a opção REQUIRED ou a opção ENFORCE
RANGE, respectivamente:

VALIDATE ON CHANGE;
5. Se escolher a opção ENFORCE RANGE, introduza o número mínimo de
escolhas no campo MIN # OF SELECTIONS ou o número máximo no
campo MAX # OF SELECTIONS, ou ambos. Esta opção só é utilizada
quando possui um conjunto de checkboxes associadas, por exemplo,
para o visitante seleccionar os respectivos hobbies.
Dependendo da configuração do PROPERTY INSPECTOR, o widget SPRY VALIDA-
TION CHECKBOX disponibiliza até quatro estados diferentes:
o INITIAL – o estado por omissão do campo;

o REQUIRED – apresenta uma mensagem de erro se a opção REQUIRED
tiver sido seleccionada e a checkbox não estiver seleccionada. Apenas
disponível se tiver seleccionado a opção REQUIRED (SINGLE);
o MIN. # OF SELECTIONS NOT MET – apresenta uma mensagem de erro se
a opção ENFORCE RANGE tiver sido seleccionada e o número corrente
de checkboxes seleccionadas for inferior ao mínimo especificado;
o MAX. # OF SELECTIONS EXCEEDED – apresenta uma mensagem de erro
se a opção ENFORCE RANGE tiver sido seleccionada e o número cor-
rente de checkboxes seleccionadas for superior ao máximo especifi-
cado.
Muda entre estados seleccionando um valor na lista PREVIEW STATES no
PROPERTY INSPECTOR. Esta acção expõe as mensagens de erro e os estilos
CSS possíveis para cada estado para que os possa modificar, se necessário.
Se estiver a trabalhar com múltiplas checkboxes, depois de inserir o widget
SPRY VALIDATION CHECKBOX, todas as outras checkboxes devem ser introduzi-
das da forma tradicional, mas assegurando-se que todas as checkboxes inse-
ridas encontram-se dentro do elemento <SPAN ID=”SPRYCHECKBOX”>:
Para formatar a aparência das mensagens de erro utilize a informação apre-

sentada na secção sobre a SPRY VALIDATION TEXT FIELD.
los – SpryValidationCheckbox.css. O estilo que permite formatar as
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState
.checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState
.checkboxMaxSelectionsMsg
16.5 Spry Validation Select

As select lists, também conhecidas por drop-down menus (ou no Dreamwea-
ver, LIST/MENU), são utilizadas nos formulários para listar um grande número
de valores. São nomeadamente utilizadas para listar os países em formulários
de registo de utilizadores.
Validar uma select list significa assegurar que o utilizador efectua uma escolha
e que o utilizador não selecciona um separador ou outro valor inválido.
O widget SPRY VALIDATION SELECT não fornece um campo no PROPERTY
INSPECTOR para adicionar uma hint (isto é, para alertar o utilizador sobre o sig-
nificado do elemento do formulário), mas pode configurar a sua primeira opção
com um valor do tipo -- SELECCIONE UM PAÍS -- para conseguir o mesmo efeito.
Para inserir um widget SPRY VALIDATION SELECT:
VALIDATION;
2. A select list, com código de validação associado, será introduzida na
página:
3. A partir do PROPERTY INSPECTOR do SPRY VALIDATION CHECKBOX esco-

lha se é necessário o utilizador seleccionar um valor (isto é, o campo é
de preenchimento obrigatório), activando ou desactivando a opção
BLANK VALUE:
Caso esta opção esteja activa isso significa que não pode ter na lista
itens que ao serem seleccionados pelo utilizador, como -- SELECCIONE
UM PAÍS --, não possuam um valor associado (isto é, o atributo value é
igual a ""). No caso de não seleccionar a opção BLANK VALUE poderá
incluir itens sem nenhum valor associado, como, por exemplo:
<option value="" selected="selected">-- Seleccione um
país --</option>
Normalmente utilizam-se itens deste tipo como primeiras opções da

select list;
VALIDATE ON CHANGE;
5. Se o seu formulário inclui separadores ou outras escolhas sem signifi-
cado, seleccione a opção INVALID VALUE e defina o valor a restringir no
campo adjacente.
A opção INVALID VALUE é destinada a proibir os utilizadores de selec-
cionarem opções como a seguinte, que funciona como separador de
grupos de opções:
<option value="-1">--------------------</option>
Caso o utilizador seleccione esta opção o widget SPRY VALIDATION

SELECT apresentará uma mensagem de erro.
TION SELECT disponibiliza até quatro estados diferentes:
o INITIAL – o estado por omissão do campo de texto;

o REQUIRED – apresenta uma mensagem de erro se a opção BLANK
VALUE tiver sido seleccionada e não tiver sido efectuada nenhuma
escolha;
o INVALID – apresenta uma mensagem de erro se a opção INVALID VALUE
tiver sido seleccionada e o utilizador tiver seleccionado uma opção
com um valor impróprio;
o VALID – apresentada quando o valor introduzido no campo tiver pas-
sado a validação.
Terá agora de seleccionar o elemento select e depois clicar no botão LIST
VALUES que aparece no PROPERTY INSPECTOR para inserir as opções a apre-
sentar na lista:
Para formatar a aparência dos campos select e das mensagens de erro utilize
a informação apresentada na secção sobre a SPRY VALIDATION TEXT FIELD.
los – SpryValidationSelect.css. O estilo que permite formatar as men-
sagens de erro é:
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg
VALID – .selectValidState select,
select.selectValidState
INVALID (inclui estado REQUIRED) –
select.selectRequiredState,
.selectRequiredState select,
select.selectInvalidState,
.selectInvalidState select
FOCUS – .selectFocusState select,
select.selectFocusState
16.6 Spry Validation Password

Um campo de formulário do tipo SPRY VALIDATION PASSWORD é muito seme-
lhante a um widget SPRY VALIDATION TEXT FIELD. A única diferença é que os
caracteres que o visitante insere num campo deste tipo não aparecem visíveis
sendo substituídos por pontos ou asteriscos.
Para inserir um widget SPRY VALIDATION PASSWORD na página:
VALIDATION;
2. O campo de texto do tipo password será introduzido na página:
3. O PROPERTY INSPECTOR, possui diversas propriedades de configuração

do widget:

(isto é, o campo é de preenchimento obrigatório), assegure-se que a
opção REQUIRED é seleccionada;
CHANGE. A opção VALIDATE ON BLUR efectua a validação quando o
campo perde o focus, isto é, quando o utilizador ‘sai’ do campo, por
exemplo, para aceder a outro campo do formulário. A opção VALIDATE
ON CHANGE efectua a validação quando o utilizador altera o conteúdo
existente de um campo.
Pode seleccionar ambas as opções, mas em campos de texto, a opção
VALIDATE ON BLUR – isto é, validar depois do utilizador teclar TAB ou cli-
car noutro campo – cobre todas as possibilidades, incluindo se o utili-
zador alterou ou não o valor existente;
5. Pode definir o número mínimo (MIN CHARS) e o número máximo de ca-
racteres (MAX CHARS) que o visitante pode introduzir;
6. Os 8 campos que se encontram na parte de baixo do PROPERTY INS-
PECTOR permitem definir o nível de exigência para as senhas:

TION PASSWORD disponibiliza até cinco estados diferentes:
o INITIAL – é o estado por omissão de um campo confirm;

o REQUIRED – apresenta uma mensagem de erro se não tiver sido
introduzido nenhum valor no campo quando este é validado;
o MIN. # OF CHARS NOT MET – disponível se for introduzido um valor no
campo MIN CHARS do PROPERTY INSPECTOR. Apresenta uma mensa-
gem de erro se a contagem de caracteres corrente é inferior ao mínimo

especificado;
o EXCEEDED MAX. # OF CHARS – disponível se for introduzido um valor no
campo MAX CHARS do PROPERTY INSPECTOR. Apresenta uma mensa-
gem de erro se a contagem corrente de caracteres for maior do que o
máximo definido;
o INVALID STRENGTH – disponível se for introduzido um valor em algum
dos oito campos que controlam o nível de exigência na criação de uma
senha (password strength);
Para formatar a aparência de campos password e das mensagens de erro uti-
lize a informação apresentada na secção sobre a SPRY VALIDATION TEXT FIELD.
los – SpryValidationPassword.css. O estilo que permite formatar as
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState
.passwordInvalidStrengthMsg, .passwordCustomState
.passwordCustomMsg
VALID – .passwordValidState input,
input.passwordValidState
INVALID (inclui estados REQUIRED, MIN. # OF CHARS NOT MET,
EXCEEDED MAX. # OF CHARS e INVALID STRENGTH) –
input.passwordRequiredState,
.passwordRequiredState input,
input.passwordInvalidStrengthState,
.passwordInvalidStrengthState input,
input.passwordMinCharsState,
.passwordMinCharsState input,
input.passwordCustomState,
.passwordCustomState input,
input.passwordMaxCharsState,
.passwordMaxCharsState input
FOCUS – .passwordFocusState input,
input.passwordFocusState
16.7 Spry Validation Confirm

Este widget permite que seja comparado o valor inserido no campo com outro
valor de outro campo do formulário. Deve ser sempre utilizado em conjunto
com outro campo do formulário, sendo normalmente utilizado para a confirma-
ção de introdução de senhas.
Para inserir um widget SPRY VALIDATION CONFIRM na página:
VALIDATION;
2. O campo de texto do tipo SPRY VALIDATION CONFIRM será introduzido
na página:
3. O PROPERTY INSPECTOR, possui diversas propriedades de configuração

do widget:

(isto é, o campo é de preenchimento obrigatório), assegure-se que a
opção REQUIRED é seleccionada;
4. Na lista VALIDATE AGAINST seleccione o campo do formulário relativa-
mente ao qual o valor introduzido no campo SPRY VALIDATION CONFIRM
deve ser comparado. Nesta lista só aparecem outros campos de texto
(text field ou password).
Se pretender que a validação seja efectuada antes de o formulário ser
CHANGE.
TION PASSWORD disponibiliza até cinco estados diferentes:
o INITIAL – é o estado por omissão de um campo confirm;

o REQUIRED – apresenta uma mensagem de erro se não tiver sido intro-
duzido nenhum valor no campo quando este é validado;
o INVALID – apresenta uma mensagem de erro para o caso em que o

valor introduzido neste campo não for igual ao valor introduzido no
campo referenciado pela propriedade VALIDATE AGAINST;
Para formatar a aparência de campos confirm e das mensagens de erro utilize
a informação apresentada na secção sobre a SPRY VALIDATION TEXT FIELD.
los – SpryValidationConfirm.css. O estilo que permite formatar as men-
sagens de erro é:
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg
VALID – .confirmValidState input,
input.confirmValidState
INVALID (inclui estado REQUIRED) –input.confirmRequiredState,
.confirmRequiredState input,
input.confirmInvalidState,
.confirmInvalidState input
FOCUS – .confirmFocusState input,
input.confirmFocusState
16.8 Spry Validation Radio Group

Este widget permite que seja comparado o valor inserido no campo com outro
valor de outro campo do formulário. Deve ser sempre utilizado em conjunto
com outro campo do formulário, sendo normalmente utilizado para a confirma-
ção de introdução de senhas.
Para inserir um widget SPRY VALIDATION RADIO GROUP na página:
VALIDATION;
2. Aparece uma caixa de diálogo onde temos de atribuir um nome ao
grupo de radio buttons, e de definir as opções que aparecerão:
3. O LABEL é o valor que aparece a seguir ao radio button enquanto o

VALUE é o valor que é enviado para o programa que processa os
dados inseridos no formulário. Muitas vezes utilizam-se os mesmos
valores nos dois campos, mas não é obrigatório;
4. A área Lay out using decide a forma como os radio buttons vão apare-
cer no formulário. Se vão aparecer um em cada linha, separados por
elementos <br /> (LINE BREAKS) ou se pretendemos que apareçam
numa tabela, como era habitual há uns anos (opção TABLE);
5. Depois de clicarmos em OK, os radio buttons do widget SPRY VALIDA-
TION RADIO GROUP serão introduzidos na página:
6. Podemos atribuir um título ao grupo de radio buttons, e passar o

segundo radio button para a mesma linha do primeiro colocando o cur-
sor à frente de ‘masculino’ e teclando DELETE:
7. O PROPERTY INSPECTOR possui diversas propriedades de configuração

deste widget:
Se pretender apenas assegurar-se que é seleccionado um dos radio

buttons (isto é, o campo é de preenchimento obrigatório), seleccione a
opção REQUIRED;
8. Pode definir um valor que funciona como EMPTY VALUE ou INVALID
VALUE se o utilizador seleccionar um radio button que esteja associado
com um destes valores. É necessário seleccionar o radio button que se
pretende utilizar para o efeito e colocar no campo CHECKED VALUE o

valor none ou invalid, e depois colocar estes valores nos campos
EMPTY VALUE ou INVALID VALUE;
submetido, seleccione as opções VALIDATE ON BLUR ou VALIDATE ON
CHANGE.
TION RADIO GROUP disponibiliza três estados diferentes:
o INITIAL – o estado por omissão do campo;

o REQUIRED – apresenta uma mensagem de erro se nenhum radio button
tiver sido seleccionado;
o INVALID – apresenta uma mensagem de erro se for seleccionado o
radio button que possui atribuído o EMPTY VALUE ou o INVALID VALUE.
Para formatar a aparência das mensagens de erro utilize a informação apre-
sentada na secção sobre a SPRY VALIDATION TEXT FIELD.
los – SpryValidationRadio.css. O estilo que permite formatar as mensa-
gens de erro é:
.radioRequiredState .radioRequiredMsg,
.radioInvalidState .radioInvalidMsg
16.9 Conclusão
Ao longo do livro abordamos as três principais tecnologias que são utilizadas
para o desenho e criação de páginas Web (HTML, CSS e JavaScript), na
óptica da sua utilização no Dreamweaver CS5.
Os assuntos abordados e os exercícios realizados permitem que o web desig-
ner passe a criar páginas Web suficientemente sofisticadas. Mas, como é
óbvio, a qualidade das páginas Web produzidas depende da capacidade artís-
tica e técnica de cada pessoa.
O conteúdo deste livro é um bom ponto de partida para o aprofundamento dos
conhecimentos técnicos sobre CSS e, sobretudo, JavaScript.
São imensas as possibilidades de utilização da JavaScript, mas a maior parte
das vezes envolvem conhecimentos adicionais dessa linguagem, o que está
fora do âmbito deste livro, cuja abordagem se baseou no desenho de páginas
Web sem recorrer a código (ou, pelo menos, recorrer a código de programa-
ção de forma muito pontual).

O Guia Pratico Do Dreamweaver cs5 Com HTML Css e Javascript PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

O Guia Pratico Do Dreamweaver cs5 Com HTML Css e Javascript PDF

Uploaded by

Copyright:

Available Formats

PEDRO REMOALDO

O GUIA PRÁTICO DO DREAMWEAVER CS5

© Centro Atlântico, Lda., 2010

Impressão e acabamento: Papelmunde

5 Trabalhar com texto 117

10 Conteúdo multimédia 249

11 CSS (Cascading Style Sheets) 269

11.10.1 CODE NAVIGATOR 313

11.11 Preferências na utilização de CSS 318

12 Formatar texto com CSS 331

13 Layout de páginas Web 369

14 Behaviors JavaScript 413

14.10 Drag AP Element 432

15 Navegação com Spry Widgets 445

16 Validação de formulários 483

16.2.1 Preview States 489

Características principais do livro

 As alterações a serem efectuadas no código são assinaladas a negrito:

 O acesso a opções de menus ou de caixas de diálogo é formatado em

Visão geral e Organização

 Capítulo 13 – Layout de páginas Web. Enumera todos os métodos

* O leitor consente, de forma expressa, a incorporação e o tratamento dos seus da-

O desenvolvimento de projectos Web é uma actividade que junta vários sa-

1.1 Tecnologias client-side

Como pode verificar pelo gráfico, as tecnologias são normalmente divididas

recorrendo às CSS. As CSS permitem definir o tipo de letra, cor do texto

A estruturação é aplicada ao texto existente entre a etiqueta de início e a eti-

<h1>Bem-vindo ao Centro das Artes</h1>

Um programa utilizado pelo visitante (que tem a designação genérica de user-

Esta tecnologia está normalmente associada às páginas dinâmicas ou ao

A JavaScript é a única linguagem de programação de uso geral que se utiliza

1.2 Ferramentas de Web Design

• Editores HTML em modo código

1.3 Adobe Dreamweaver

É um editor do tipo WYSIWYG que foi criado originalmente pela Macromedia,

1.3.1 Versões disponíveis

1.3.2 Requisitos de sistema

1.4 Novidades no Dreamweaver CS5

Agora, para criar um novo sítio Web, só é necessário fornecer o respectivo

Sempre que, ao longo do trabalho, o Dreamweaver CS5 necessitar de mais in-

1.4.1 Para os web designers

1.4.1.1 Adobe BrowserLab

Este serviço funciona através de cópias de ecrã (screenshots) da página cor-

1.4.1.2 CSS Disable/Enable

Ao desactivar uma propriedade CSS, o Dreamweaver transforma-a simples-

1.4.1.3 CSS Inspection

Funciona de uma forma parecida com o add-on Firebug do Firefox.

1.4.1.4 CSS Starter Layouts

1.4.2 Para os web developers

1.4.2.1 Integração com o Business Catalyst

A integração com o Business Catalyst tem a forma de uma extensão ao

1.4.2.2 Suporte integrado de CMS PHP

Por omissão, o Dreamweaver CS5 suporta esta funcionalidade para os siste-

1.4.2.3 Navegação Live View

estivéssemos a utilizar um browser, mesmo nas aplicações que utilizem dados

Também é possível introduzir um endereço Web (URL) para inspeccionar

1.4.2.4 Code hinting de classes em PHP

Funciona também com as funções e classes definidas pelo web developer,

1.4.2.5 Code hints específicas de sítio

1.4.2.6 Melhorias no suporte do Subversion

1.4.2.7 Server Behaviors

1.4.3 Funcionalidades removidas

As seguintes behaviors JavaScript suportadas pelo Dreamweaver até à versão

As alterações a serem efectuadas no código são assinaladas a negrito:

O acesso a opções de menus ou de caixas de diálogo é formatado em

Capítulo 13 – Layout de páginas Web. Enumera todos os métodos