o guia prático do dreamweaver cs5 com html, css e javascript

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

[email protected] 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 [email protected] 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

Comportamento

HTMLHTML

XHTMLXHTML

XMLXML

CSSCSS

XSLXSL

XSLTXSLT

ECMAScriptECMAScript(JavaScript)(JavaScript)

DOMDOM

Estrutura Apresentação

Comportamento

HTMLHTML

XHTMLXHTML

XMLXML

CSSCSS

XSLXSL

XSLTXSLT

ECMAScriptECMAScript(JavaScript)(JavaScript)

DOMDOM

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 (WHAT 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 WEB;

• 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 WELCOME 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 WELCOME SCREEN. Mas se fechar todos os fichei-ros abertos no Dreamweaver, o WELCOME SCREEN volta a aparecer.


Uma das funcionalidades do WELCOME 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 WELCOME 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 WELCOME 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 WELCOME 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 WORKSPACE:

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


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 WINDOW, 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 EDIT 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:

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

root

_css _imagens livros _scripts index.html

... autores


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 WELCOME 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 WELCOME 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 WELCOME 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 PRE-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):

<meta http-equiv="Content-Type" content="text/html; 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 WITH, 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:


rootroot

_css_css _imagens_imagens infoinfo ...stockstock

destaques.html

faq.html

quemsomos.html

index.html

rootroot

_css_css _imagens_imagens infoinfo ...stockstock

destaques.html

faq.html

quemsomos.html

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

• Link relativo ao documento: ../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:

• Link relativo ao documento: ../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:[email protected]?subject=Pedido de Informação">[email protected]</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 WINDOW > 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):

<table width="597" border="1" cellpadding="5" 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:

<table width="300" border="1" cellpadding="5" 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.

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

registo.htm processa.php


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, WRAP WITH LABEL TAG, faz com que o elemento input seja ‘embrulhado’ pelo elemento label, tornando assim dispensável o atributo for:


<label>Nome: <input type="text" name="nome" id="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> <input type="checkbox" name="preferencias"

value="carrinhas" id="preferencias_1" /> Carrinhas</label> <br /> <label> <input type="checkbox" name="preferencias"

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> <select name="distrito" id="distrito"> <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:

<select name="distrito" id="distrito"> <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 WRAP 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> … <script type="text/javascript"> swfobject.registerObject("FlashID"); </script>

No local de inserção do ficheiro .swf o código produzido é:


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 WIDTH 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 WMODE é 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_buttons/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> <meta http-equiv="Content-Type" content="text/html;

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,

<style type="text/css"> @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:

font-family: Arial, Helvetica, sans-serif;

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 { font-family: Arial, Helvetica, sans-serif; } 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, <link href="../estilos.css" rel="stylesheet"

type="text/css" />

para antes do elemento <style>: <head> <meta http-equiv="Content-Type" content="text/html;

charset=utf-8" /> <title>AutoVende - Quem Somos</title> <link href="../estilos.css" rel="stylesheet"

type="text/css" /> <style 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:

font-family: Arial, Helvetica, sans-serif;

• 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> <style type="text/css"> 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:

<link href="../estilos.css" rel="stylesheet" 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:

<link href="../estilos.css" rel="stylesheet" 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:


Na caixa de diálogo que aparece,

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:

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:

} 20px } 10px


É 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; padding-bottom: 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-bottom: 5px; 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

Rodapé

Menu Conteúdo

Cabeçalho

Rodapé

Menu Conteúdo

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 é WRAP 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 é:

Cabeçalho

Rodapé

Menu Conteúdo

Wrapper

Cabeçalho

Rodapé

Menu Conteúdo

Wrapper


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 WINDOW > 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 WINDOW > 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:


Na caixa de diálogo que aparece,

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 WHEN 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 (WINDOW 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 WINDOW NAME. Este nome não pode conter espaços ou caracteres especiais. O Dreamweaver alerta-o se o nome não for aceitável;

7. Clique em OK quando tiver terminado.

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:

1. Seleccione o objecto que desencadeia a acção; 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:

1. Seleccione o objecto que desencadeia a acção; 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:

1. Seleccione o objecto que desencadeia a acção; 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. 5. Clique em OK quando tiver terminado.

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:

1. Seleccione o objecto que desencadeia a acção; 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 WHILE 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 WHILE 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 WHILE 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 WHEN 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;

17. Clique em OK quando tiver terminado. 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:

1. Seleccione o objecto que desencadeia a acção; 2. A partir do painel BEHAVIORS, clique no botão + e seleccione POPUP

MESSAGE; 3. Introduza o texto no campo MESSAGE; 4. Clique em OK quando tiver terminado.

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

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

Só pode utilizar este efeito com os seguintes elementos HTML: address, dd, 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;

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


Só pode utilizar este efeito com os seguintes elementos HTML: address, dd, 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õ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:

1

2

34

5

6

1

2

34

5

6

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, dentro de um elemento <div>;

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> <li class="TabbedPanelsTab" tabindex="0">Tab 2</li> <li class="TabbedPanelsTab" tabindex="0">Tab 3</li> </ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelsContent">Content 1</div> <div class="TabbedPanelsContent">Content 2</div> <div class="TabbedPanelsContent">Content 3</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, dentro de um elemento <div>;


2. A partir das categorias SPRY ou LAYOUT da barra INSERT, clique no 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:

<script type="text/javascript"> 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, dentro de um elemento <div>;

2. A partir das categorias SPRY ou LAYOUT da barra INSERT, clique no 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 WIDGET 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 WIDGET 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"> <input type="text" name="nome" id="nome" /> <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:


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:


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 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. A única diferença reside no nome dos estilos e no ficheiro que contém os esti-los – SpryValidationCheckbox.css. O estilo que permite formatar as mensagens de erro é:

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


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;

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

Dependendo da configuração do PROPERTY INSPECTOR, o widget SPRY VALIDA-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.

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.

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. A única diferença reside no nome dos estilos e no ficheiro que contém os esti-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:


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:

Se pretender apenas assegurar-se que é introduzido um valor textual (isto é, o campo é de preenchimento obrigatório), assegure-se que a opção REQUIRED é seleccionada;

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

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:

Dependendo dos parâmetros do PROPERTY INSPECTOR, o widget SPRY VALIDA-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);

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. 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. A única diferença reside no nome dos estilos e no ficheiro que contém os esti-los – SpryValidationPassword.css. O estilo que permite formatar as mensagens de erro é:

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


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:

Se pretender apenas assegurar-se que é introduzido um valor textual (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 submetido, seleccione as opções VALIDATE ON BLUR e/ou VALIDATE ON CHANGE.

Dependendo dos parâmetros do PROPERTY INSPECTOR, o widget SPRY VALIDA-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;

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. 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. A única diferença reside no nome dos estilos e no ficheiro que contém os esti-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:


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;

9. Se pretender que a validação seja efectuada antes de o formulário ser submetido, seleccione as opções VALIDATE ON BLUR ou VALIDATE ON CHANGE.

Dependendo da configuração do PROPERTY INSPECTOR, o widget SPRY VALIDA-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. 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. Para formatar a aparência das mensagens de erro utilize a informação apre-sentada 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 – 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 prático do dreamweaver cs5 com html, css e javascript

Documents

Transcript of o guia prático do dreamweaver cs5 com html, css e javascript