O Guia Prático Do Dreamweaver cs5 Com HTML, Css e Javascript

PEDRO REMOALDO
Portugal/2010
Reservados todos os direitos por Centro Atlntico, Lda.

Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa dos editores da obra.
O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Autor:
Pedro Remoaldo
Coleco: Tecnologias Direco grfica: Centro Atlntico Reviso tcnica: Centro Atlntico Capa: Paulo Buchinho Centro Atlntico, Lda., 2010 Ap. 413 4764-901 V. N. Famalico Portugal Tel. 808 20 22 21
geral@centroatlantico.pt www.centroatlantico.pt Impresso e acabamento: Papelmunde 1 edio: Outubro de 2010 ISBN: 978-989-615-098-3 Depsito legal: /10
Marcas registadas: Todos os termos mencionados neste livro conhecidos como sendo marcas registadas de produtos e servios foram apropriadamente capitalizados. A utilizao de um termo neste livro no deve ser encarada como afectando a validade de alguma marca registada de produto ou servio. O Editor e o Autor no se responsabilizam por possveis danos morais ou fsicos causados pelas instrues contidas no livro nem por endereos Internet que no correspondam s Home-Pages pretendidas. O Guia Prtico do Dreamweaver CS5 com HTML, CSS e JavaScript uma publicao independente no filiada na Adobe Systems Incorporated.
NDICE
Prefcio
Introduo Pblico-alvo e pr-requisitos Caractersticas principais do livro Convenes usadas Viso geral e Organizao Sobre o Autor
15
15 15 16 16 17 19
1 Web Design
1.1 Tecnologias client-side
1.1.1 HTML 1.1.2 XML 1.1.3 XHTML 1.1.4 CSS 1.1.5 JavaScript
21
21 23 24 25 25 25 26 27 28 29 30 31 33 37
1.2 Ferramentas de Web Design 1.3 Adobe Dreamweaver

1.3.1 Verses disponveis 1.3.2 Requisitos de sistema
1.4 Novidades no Dreamweaver CS5

1.4.1 Para os web designers 1.4.2 Para os web developers 1.4.3 Funcionalidades removidas
2 Ambiente de trabalho
2.1 WELCOME SCREEN 2.2 Barras de ferramentas
2.2.1 APPLICATION TOOLBAR 2.2.2 DOCUMENT TOOLBAR 2.2.3 Outras barras de ferramentas
39
39 42 42 45 48 49 50 51 52 54 56 56 57 59 60 61 62 64 64 64 66 68 69 70
2.3 Painis
2.3.1 Alterar a disposio dos painis 2.3.2 Flutuar um painel 2.3.3 Colocar grupos de painis no panel dock 2.3.4 Minimizar painis 2.3.5 Criar outro panel dock 2.3.6 Painis horizontais 2.3.7 Painel INSERT 2.3.8 PROPERTY INSPECTOR 2.3.9 Painel RESULTS
2.4 Workspaces
2.4.1 Criar um workspace 2.4.2 Repor tudo como estava
2.5 rea de documento

2.5.1 TAG SELECTOR 2.5.2 Outros cones e informao 2.5.3 Trabalhar com rguas 2.5.4 Trabalhar com a grelha 2.5.5 Trabalhar com guias
3 Stios Web
3.1 Definir um stio Web 3.2 Gesto de stios Web 3.3 Gerir ficheiros 3.4 Outra informao sobre o stio Web
3.4.1 Servidores Web 3.4.2 Trocar ficheiros com o servidor remoto
73
74 78 80 83 83 85
NDICE
4 Documentos
4.1 Preferncias dos novos documentos 4.2 Estrutura de um documento HTML
4.2.1 Seco HEAD 4.2.2 Seco BODY
87
93 94 95 97 98 100 101 102 104 112 115
4.3 Trabalhar com documentos 4.4 Visualizar pginas

4.4.1 Live View 4.4.2 Pr-visualizao das pginas em browsers 4.4.3 BrowserLab 4.4.4 Multiscreen 4.4.5 Device Central
5 Trabalhar com texto

5.1 Definir a estrutura do documento 5.2 Pargrafos
5.2.1 Seleccionar texto
117
117 117 118 120 122 123 125 126 127 128 129 130 133 134 136 140 142 142
5.3 Cabealhos 5.4 Alinhamentos 5.5 Quebras de linha e espaos 5.6 Caracteres especiais 5.7 Formatao especial 5.8 Citar texto 5.9 Dar nfase ao texto 5.10 Dividir em seces 5.11 Listas
5.11.1 Listas imbricadas 5.11.2 Listas de definies
5.12 Importar texto 5.13 Integrao com o Microsoft Word 5.14 Localizar e substituir 5.15 Dicionrio
6 Imagens
6.1 Formatos de imagens
6.1.1 Formato GIF 6.1.2 Formato JPEG 6.1.3 Formato PNG 6.1.4 Formato SVG
145
147 147 148 148 149 150 153 154 157 157 159 160 161 161 163 166
6.2 Insero de imagens

6.2.1 Image placeholders 6.2.2 Posicionar imagens
6.3 Optimizar e alterar imagens

6.3.1 Crop 6.3.2 Redimensionar 6.3.3 Luminosidade e contraste 6.3.4 Melhorar a definio 6.3.5 Optimizar imagens 6.3.6 Editar imagens num programa externo 6.3.7 Integrao com o Photoshop
7 Hiperligaes
7.1 Tipos de links 7.2 Criar links
7.2.1 Links para pginas externas ao site
169
169 171 175 175 175 176 177 178 179 181 181 182 184 186 187
7.3 Propriedades dos links

7.3.1 Abrir pginas em janelas ou separadores do browser 7.3.2 Outras propriedades dos links
7.4 Links em imagens 7.5 Links para ficheiros PDF e outros 7.6 Outro tipo de links 7.7 Links internos a uma pgina
7.7.1 Criar named anchors 7.7.2 Elementos invisveis 7.7.3 Criar links para aceder s named anchors 7.7.4 Named anchors externas
7.8 Image maps
NDICE
8 Tabelas
8.1 Criar uma tabela 8.2 Estrutura de uma tabela 8.3 Alterar uma tabela
8.3.1 Seleccionar uma tabela 8.3.2 Largura da tabela e das colunas 8.3.3 Seleccionar linhas e colunas 8.3.4 Inserir linhas e colunas 8.3.5 Alinhamento vertical 8.3.6 No wrap 8.3.7 Fundir e dividir clulas
191
192 194 195 196 196 198 199 201 202 204 206 208 210 212 213
8.4 Importar dados num formato tabular 8.5 Acessibilidade em tabelas 8.6 Outros elementos e atributos de uma tabela 8.7 Ordenar os dados de uma tabela 8.8 Modo expandido
9 Formulrios
9.1 Criar um formulrio
9.1.1 Propriedades do formulrio
215
216 218 219 220 220 223 224 226 227 232 235 240 241 242 243 246
9.2 Campos de texto

9.2.1 Text 9.2.2 Atributos de acessibilidade 9.2.3 Atributos dos campos de texto 9.2.4 Textarea 9.2.5 Password
9.3 Radio buttons 9.4 Checkboxes 9.5 Select

9.5.1 Jump menu
9.6 Botes
9.6.1 Botes do tipo imagem
9.7 Melhorar a organizao do formulrio 9.8 Outros campos
10
10 Contedo multimdia
10.1 Contedo Flash em pginas Web
10.1.1 Propriedades de uma animao Flash 10.1.2 Deteco do Flash Player
249
249 254 258 259 261 264 264 266 266 267 268
10.2 Integrao do Flash com o Dreamweaver 10.3 Vdeo Flash 10.4 Outros contedos multimdia
10.4.1 udio 10.4.2 Vdeo 10.4.3 Filmes Shockwave 10.4.4 Applets Java 10.4.5 Controlos ActiveX
11 CSS (Cascading Style Sheets)

11.1 Criar uma identidade para o stio Web 11.2 Anatomia de um estilo CSS 11.3 Criar estilos CSS
11.3.1 Painel CSS STYLES 11.3.2 Editar um estilo CSS 11.3.3 Eliminar propriedades e estilos CSS 11.3.4 Formatar outros elementos 11.3.5 Utilizao de cores
269
271 272 273 277 279 281 282 283 286 288 292 292 295 297 298 300 303 305 310 311
11.4 Utilizar ids em estilos 11.5 Classes CSS 11.6 Utilizar ficheiros CSS
11.6.1 Exportar estilos para um ficheiro CSS 11.6.2 Ligaes a ficheiros CSS
11.7 Cascading
11.7.1 Propriedades da pgina 11.7.2 Estilos inline, internos e externos 11.7.3 Precedncia
11.8 Selectores descendant 11.9 Activar e desactivar propriedades CSS 11.10 Informao sobre os estilos CSS de um elemento
NDICE
11
11.10.1 CODE NAVIGATOR 11.10.2 Modo INSPECT
313 315 318 318 320 322 328 329
11.11 Preferncias na utilizao de CSS

11.11.1 Preferncias para o cdigo 11.11.2 Outras preferncias
11.12 Barra STYLE RENDERING 11.13 Design-Time style sheets 11.14 Verificar a compatibilidade do browser
12 Formatar texto com CSS

12.1 Famlias de tipos de letra
12.1.1 Serif e sans-serif 12.1.2 Font stacks 12.1.3 Tamanho de letra
331
332 333 333 335 338 338 339 339 340 340 341 342 344 349 349 351 352 353 360 364
12.2 Aspecto do texto

12.2.1 12.2.2 12.2.3 12.2.4 12.2.5 Font-weight Font-style Font-variant Text-transform Text-decoration
12.3 Espaamento entre palavras e caracteres 12.4 Espaamento entre linhas 12.5 Espaamento entre pargrafos 12.6 Box Model
12.6.1 Padding
12.7 Alinhar texto

12.7.1 Alinhamento vertical
12.8 Listas
12.8.1 Listas de definies
12.9 Selectores especficos dos links
12
13 Layout de pginas Web

13.1 Utilizar tabelas para layout 13.2 Frames 13.3 Layouts CSS
13.3.1 Tracing image 13.3.2 Elementos block-level versus elementos inline 13.3.3 O elemento div 13.3.4 Opes de visualizao dos elementos CSS 13.3.5 Utilizao de floats 13.3.6 Layouts baseados em floats 13.3.7 Starter Pages 13.3.8 Posicionamento absoluto de elementos 13.3.9 Posicionamento relativo
369
369 374 382 382 384 385 387 389 390 400 403 408
14 Behaviors JavaScript
14.1 Behaviors, eventos e aces 14.2 Utilizar behaviors
14.2.1 O painel BEHAVIORS 14.2.2 Criar uma behavior 14.2.3 Gerir eventos
413
413 416 416 417 418 419 421 421 422 424 424 425 426 427 427 428 429 430 431
14.3 Swap Image e Swap Image Restore

14.3.1 Swap Image Restore 14.3.2 Preload Images 14.3.3 Rollover Image
14.4 Call JavaScript 14.5 Trabalhar com janelas de pop-up 14.6 Show-Hide Elements 14.7 Set Text
14.7.1 Set Text of Container 14.7.2 Set Text of Frame 14.7.3 Set Text of Status Bar 14.7.4 Set Text of Text Field
14.8 Check Plugin 14.9 Go to URL
NDICE
13
14.10 Drag AP Element 14.11 Pop-up message 14.12 Spry Effects

14.12.1 Appear/Fade 14.12.2 Blind 14.12.3 Grow/Shrink 14.12.4 Highlight 14.12.5 Shake 14.12.6 Slide 14.12.7 Squish
14.13 Utilizar outras behaviors

14.13.1 Instalar behaviors
432 436 436 437 438 438 439 440 441 441 442 443
15 Navegao com Spry Widgets

15.1 Spry widgets 15.2 Spry Menu Bar
15.2.1 Criar um menu de navegao 15.2.2 Alterar o aspecto de uma Spry Menu Bar 15.2.3 Aplicar estilos ao nosso menu exemplo 15.2.4 Remover uma Spry Menu Bar
445
445 447 451 452 459 461 461 463 466 469 472 474 476 478
15.3 Spry Tabbed Panel

15.3.1 Formatar os painis
15.4 Spry Accordion Panel

15.4.1 Formatar um Spry Accordion Panel
15.5 Spry Collapsible Panel

15.5.1 Formatar a aparncia de um SPRY COLLAPSIBLE PANEL
15.6 Spry Tooltip 15.7 Widget Browser
16 Validao de formulrios
16.1 Validao com widgets Spry
16.1.1 Utilizar widgets de validao com tabelas
483
483 485 486
16.2 Spry Validation Text Field
14
16.2.1 Preview States 16.2.2 Criar padres personalizados de validao 16.2.3 Alterar a aparncia dos campos e das mensagens de erro
16.3 Spry Validation Textarea 16.4 Spry Validation Checkbox 16.5 Spry Validation Select 16.6 Spry Validation Password 16.7 Spry Validation Confirm 16.8 Spry Validation Radio Group 16.9 Concluso
489 489 490 491 494 496 498 501 502 504
Prefcio
Introduo
O desenvolvimento de stios Web, partilhado, entre outros, por informticos, designers, arquitectos de informao e profissionais de marketing, tem sido uma das actividades que mais alteraes tem sofrido ao longo dos seus poucos anos de existncia. O desenho de pginas Web est em constante evoluo, passando de estticas para interactivas e depois para dinmicas. Originalmente criadas em simples editores de texto, com o desenvolvimento das tecnologias que possibilitam a criao de pginas cada vez mais complexas, foram surgindo aplicaes para simplificar o trabalho dos web designers e dos web developers. O Adobe Dreamweaver uma das aplicaes que, ao longo de diversas verses, soube acompanhar a evoluo dos stios Web. Aplicao de web design por excelncia, disponibiliza inmeras funcionalidades que facilitam o dia-a-dia do web designer. A integrao com outras aplicaes da Adobe, como o Adobe Photoshop e o Adobe Fireworks, e com os servios online que a Adobe disponibiliza, como o BrowserLab, e a integrao do WebKit, que permite uma rpida pr-visualizao das pginas dentro do prprio Dreamweaver, so pontos fortes desta aplicao. Mas sobretudo a facilidade de utilizao do ambiente de trabalho, o facto de se poderem criar pginas Web sem recorrer ao cdigo, as funcionalidades avanadas de criao, aplicao e interaco com as Cascading Style Sheets, e, mais recentemente, a integrao da Spry framework, que tornam o Dreamweaver uma ferramenta de excelncia na criao de stios Web.
Pblico-alvo e pr-requisitos
Este livro destinado a todos os web designers, existentes ou potenciais, que pretendam desenvolver competncias sobre a criao de stios Web. No exigida nenhuma experincia ao nvel do desenho de pginas Web, dado que o livro pretende ser acessvel a qualquer pessoa que tenha interesse no desenvolvimento de stios Web.
16
Caractersticas principais do livro

Neste livro todos os captulos tentam ter uma componente prtica, mesmo aqueles em que so apresentadas, de forma mais terica, as tecnologias que vo ser utilizadas. Existem diversos projectos prticos, do tipo exerccio guiado, em que o leitor pode reproduzir, passo-a-passo, a demonstrao ou projecto a desenvolver. Todos os captulos encontram-se profusamente ilustrados. Este aspecto considerado fundamental de forma a melhor guiar o leitor na reproduo dos passos a efectuar em cada projecto. Os ficheiros dos exemplos prticos encontram-se disponveis para os leitores. Veja na pgina 20 como pode ter acesso a esses ficheiros.
Convenes usadas
Este livro utiliza diversas convenes com vista a facilitar a assimilao da informao: Termos em ingls so apresentados, de uma forma geral, em itlico: Utilizando as behaviors JavaScript, que so ... no aparecer nenhuma lista de drop-down. O cdigo encontra-se formatado em Courier New:
#conteudo { background-color: #FF0; margin-bottom: 10px; }
As alteraes a serem efectuadas no cdigo so assinaladas a negrito:

<textarea name="comentarios" id="comentarios" cols="45" rows="5"></textarea> Caracteres introduzidos: <span id="countsprytextarea1"> </span>
O acesso a opes de menus ou de caixas de dilogo formatado em letras maisculas pequenas. O carcter > utilizado para separar o menu da opo: ... seleccionamos a opo INSERT > FORM > TEXT FIELD Combinaes de teclas so identificadas atravs do carcter +. 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.
PREFCIO
17
Viso geral e Organizao

Este livro est organizado em dezasseis captulos: Captulo 1 Web Design. Apresentao das tecnologias utilizadas no desenvolvimento de pginas e stios Web, e das novidades da verso CS5 do Dreamweaver. Captulo 2 Ambiente de trabalho. Descrio do ambiente de trabalho do Dreamweaver CS5, nomeadamente as barras de ferramentas, os painis, os workspaces e a janela de documento. Captulo 3 Stios Web. Descreve a definio e gesto de stios Web no Dreamweaver CS5. Captulo 4 Documentos. Aborda a criao e gesto de documentos no Dreamweaver, a estrutura dos documentos HTML e a pr-visualizao de pginas nos browsers, a utilizao do servio online BrowserLab e das ferramentas Multiscreen e Device Central. Captulo 5 Trabalhar com texto. Explica a estruturao do texto em pginas Web e os elementos HTML utilizados para essa operao. Captulo 6 Imagens. Enumera os diferentes formatos de imagens que podem ser utilizados em pginas Web e a sua alterao e optimizao em integrao com o Adobe Photoshop e o Adobe Fireworks. Captulo 7 Hiperligaes. Neste captulo so apresentadas as hiperligaes, a sua utilizao em pginas Web e os seus diferentes tipos. Captulo 8 Tabelas. Descreve a utilizao de tabelas para a apresentao de dados em formato tabular. Captulo 9 Formulrios. Explica a criao de formulrios, e cada um dos tipos diferentes de campos que podem ser utilizados para interagir com os visitantes das pginas Web. Captulo 10 Contedo multimdia. Apresenta a forma como o contedo multimdia, nomeadamente animaes e filmes Flash, podem ser integrados em pginas Web. Captulo 11 CSS (Cascading Style Sheets). Neste captulo so introduzidos os conceitos associados s folhas de estilos CSS, e as funcionalidades existentes no Dreamweaver para trabalhar com esta tecnologia. Captulo 12 Formatar texto com CSS. Detalha as propriedades CSS que so utilizadas com elementos textuais para a sua formatao.
18
Captulo 13 Layout de pginas Web. Enumera todos os mtodos que podem ser utilizados para desenhar layouts de pginas Web, nomeadamente, as tabelas, as frames, e as CSS. Captulo 14 Behaviors JavaScript. Explica as behaviors JavaScript que esto disponveis no Dreamweaver para a criao de pginas interactivas. Captulo 15 Navegao com Spry Widgets. So apresentados os widgets Spry que permitem criar elementos de navegao, nomeadamente navigation bars, jump menus, pop-up menus, painis e tooltips. Captulo 16 Validao de formulrios. Aborda a validao da informao introduzida pelo utilizador em formulrios, recorrendo a widgets Spry Validation.
Sobre o Autor
Pedro Remoaldo
Pedro Remoaldo licenciado em Informtica, formador e consultor em sistemas e tecnologias de informao com cerca de uma dcada de experincia como docente no ensino superior. Autor de 17 livros sobre sistemas operativos, software, Internet, segurana e web development, dos quais os 10 ttulos mais recentes foram publicados pelo Centro Atlntico. Os seus interesses so bastante abrangentes, mas dedica particular ateno s tecnologias Internet, aos sistemas de gesto de bases de dados e ao Business Intelligence.
Torne a sua leitura mais produtiva, reproduzindo os exemplos do livro no seu computador
OFERTA:
Envie um e-mail* para dreamweaver@centroatl.pt para receber os endereos de Internet de onde poder fazer o download dos ficheiros de apoio deste livro (bem como futuras actualizaes e outras informaes 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 incorporao e o tratamento dos seus dados nos ficheiros automatizados da responsabilidade do Centro Atlntico, para os fins comerciais e operativos do mesmo. O leitor fica igualmente informado sobre a possibilidade de exercer os direitos de acesso, rectificao e cancelamento dos seus dados nos termos estabelecidos na legislao vigente, junto do Centro Atlntico, por qualquer meio escrito.
Web Design
O desenvolvimento de projectos Web uma actividade que junta vrios saberes e tecnologias para produzir sites visualmente agradveis, funcionais e que forneam a informao ou o servio pretendido pelo visitante. Quando se fala de pginas estticas e de interface com o utilizador associa-se normalmente o conceito de Web Design. Embora muitas vezes este conceito seja utilizado para designar a construo de um stio Web, incluindo pginas dinmicas e bases de dados, cada vez mais restringido o seu mbito s tecnologias client-side. Um Web Designer ser ento um profissional que desenha interfaces e pginas Web, recorrendo a princpios 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, ). tambm o responsvel pela criao e/ou manipulao de todas as imagens utilizadas no stio Web. Dever conhecer, preferencialmente, CSS e, se possvel, HTML. Para efectuar este trabalho sobretudo necessrio ter capacidade artstica e criatividade.
1.1 Tecnologias client-side

Existem diversas tecnologias que so utilizadas na construo de pginas Web (tambm conhecidas por tecnologias client-side). Dependendo da audincia, a maior parte dos visitantes utilizam os browsers mais recentes que suportam CSS avanadas e JavaScript, mas muitos visitantes podem estar sujeitos a polticas internas do departamento de informtica que os fora a utilizar browsers mais antigos ou a navegar com algumas funcionalidades (como o JavaScript) desactivadas. As pessoas com problemas de viso navegam muitas vezes utilizando leitores de ecr (screen readers) ou software de ampliao, e para estes um design bastante sofisticado de uma pgina pode ser um empecilho.
22
Alguns utilizadores no visitaro mesmo o seu stio Web, preferindo ler content feeds, utilizando RSS. Quando se constri estes feeds, querer enviar o seu contedo HTML sem qualquer cdigo JavaScript ou estilos CSS. A forma de acomodar o maior intervalo possvel de visitantes pensar na criao de pginas Web como utilizando um modelo de trs camadas. Este o modelo aconselhado pelo W3C (World Wide Web Consortium www.w3c.org), a entidade responsvel pela criao das normas que gerem a Internet. As camadas so:
Estrutura
HTML XHTML XML
Apresentao
CSS XSL XSLT
Comportamento
ECMAScript (JavaScript) DOM
Como pode verificar pelo grfico, as tecnologias so normalmente divididas em trs reas: Estrutura (structure) define o contedo e a estrutura desse contedo. Apresentao (presentation) define a aparncia do contedo na pgina, incluindo tipo de letra, cor do texto, alinhamento do texto e das imagens, etc. Comportamento (behaviour) define a interaco entre o utilizador e a pgina. Exemplo tpico so os botes ou links que mudam de cor ou de imagem quando o cursor passa por cima. Utilizando este modelo, quando se constri um stio Web devemos seguir a seguinte sequncia: Comeamos com a produo de contedo e estrutura da pgina utilizando a linguagem HTML. Esta a camada base que qualquer visitante, utilizando qualquer tipo de browser, deve ser capaz de ver. No existem aqui preocupaes com o aspecto visual do contedo na pgina. Com o contedo definido damos agora importncia aparncia visual do stio Web, adicionando uma camada de informao de apresentao
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 numa pgina (texto, imagens, etc.). Finalmente, podemos utilizar o JavaScript para introduzir uma camada adicional de interactividade e comportamento dinmico, que tornar a navegao do stio Web mais agradvel quando se utilizem browsers que suportem JavaScript. Um exemplo tpico so os links que mudam de cor quando o rato passa por cima. Tambm possvel disponibilizar alguma interactividade recorrendo s CSS. Este modelo de trs camadas torna mais fcil a reutilizao de pores do cdigo em projectos futuros, reduz a quantidade de cdigo duplicado e torna mais fcil localizar e resolver problemas umas semanas, meses ou anos mais tarde. Permite tambm lidar com as diferentes formas como as pessoas acedem s pginas Web (browsers, PDAs, tablets e smartphones, entre outros dispositivos). Se mantivermos o cdigo HTML, CSS e JavaScript separado, ser possvel que a camada de contedo permanea utilizvel em ambientes onde as camadas de apresentao e/ou comportamento no podem operar. Este mtodo conhecido por progressive enhancement.
1.1.1 HTML
A HTML (Hypertext Markup Language) a linguagem de marcao mais utilizada para a criao de pginas Web. Permite a descrio da estrutura da informao existente num documento, quer seja textual (atravs de cabealhos, pargrafos e listas, entre outros), quer sejam formulrios interactivos, imagens e outros objectos (como filmes, animaes ou udio). A HTML escrita na forma de etiquetas (conhecidas por tags), que so colocadas entre os sinais < e >. Um conjunto de etiquetas de incio e de fim, bem como o respectivo contedo, tem o nome de elemento HTML. A etiqueta de fim idntica etiqueta de incio, excepto que o texto na etiqueta de fim precedido por um smbolo /. Por exemplo:
<p>Exemplo de um pargrafo</p>
A estruturao aplicada ao texto existente entre a etiqueta de incio e a etiqueta de fim, que corresponde ao contedo do elemento. Exemplo de cdigo HTML:
<html> <head> <title>Pgina teste</title> </head> <body>
24
<h1>Bem-vindo ao Centro das Artes</h1> <p>Se pretender contactar-nos utilize o seguinte endereo de e-mail:</p> ... </body> </html>
Um programa utilizado pelo visitante (que tem a designao genrica de useragent), e que normalmente um browser, interpreta os elementos HTML, para determinar como que o documento deve ser apresentado ao utilizador. Alguns elementos no necessitam de uma etiqueta de fim porque no estruturam ou formatam contedo. So os chamados elementos vazios (empty elements). Um exemplo o <img> que permite a insero de uma imagem numa pgina Web. A especificao HTML define o tipo de contedo 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 endereo 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 parcialmente suportada pelos browsers mais recentes. Introduz novos elementos e novas funcionalidades que permitem criar pginas mais parecidas com as produzidas pelo Adobe Flash.
1.1.2 XML
A eXtensible Markup Language uma linguagem de marcao genrica. O principal propsito desta linguagem facilitar a partilha de dados entre sistemas diferentes, particularmente atravs da Internet. Algumas das linguagens actualmente utilizadas na Internet so baseadas no XML, como o XHTML, o RSS e o SVG, entre outras. Exemplo do contedo 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 pginas dinmicas 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 marcao semelhante ao HTML, mas que obedece s regras mais rgidas do XML. Enquanto a HTML uma aplicao da SGML, uma linguagem de marcao muito flexvel, a XHTML uma aplicao da XML, um subconjunto mais restritivo da SGML. A XHTML pode ser vista como uma reformulao da HTML utilizando XML. A XHTML 1.0 tornou-se uma recomendao do W3C, em Janeiro de 2000, e a XHTML 1.1 tornou-se uma recomendao do W3C em Maio de 2001. Como parte da especificao HTML5, est a ser desenvolvida a XHTML5.
1.1.4 CSS
As Cascading Style Sheets so uma linguagem de folhas de estilo utilizada para descrever a apresentao visual de um documento escrito numa linguagem de marcao como o HTML, o XHTML ou mesmo o XML. As normas associadas s CSS definem vrios nveis e perfis, que podem ser suportados pelos browsers. Cada nvel das CSS construdo em cima do nvel anterior, adicionando novas funcionalidades. Actualmente existem basicamente trs nveis: CSS1, CSS2 e CSS3. Os perfis (profiles) so subconjuntos de um ou mais nveis das CSS que foram criados para um determinado equipamento ou interface com o utilizador. Existem perfis para equipamentos mveis, 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. No tem nenhuma relao 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.
26
A JavaScript a nica linguagem de programao de uso geral que se utiliza no lado do cliente (client-side) e os scripts Javascript so 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 criao de aplicaes Web interactivas com acesso a dados dinmicos. O objectivo tornar as pginas mais interactivas trocando pequenas quantidades de dados com o servidor sem as pginas Web serem redesenhadas e sem o utilizador se aperceber do facto. O AJAX no uma tecnologia per se, mas sim um grupo de tecnologias utilizadas em conjunto.
1.2 Ferramentas de Web Design

Alm das ferramentas de criao e manipulao de imagens (como o Adobe Photoshop, o Adobe Illustrator e o Adobe Fireworks), que esto fora do mbito deste livro, o web designer utiliza, para o desenvolvimento de pginas Web, uma de trs categorias de ferramentas: Editores ou processadores de texto possvel criar pginas 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 cdigo HTML e guard-lo num ficheiro com a extenso .html ou .htm. Depois, utiliza-se um browser (como o Internet Explorer ou o Mozilla Firefox) para visualizar as pginas criadas. Pode-se tambm utilizar um editor rudimentar (mas ainda assim bastante 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 utilizao de cores para realar a sintaxe, invocao de aplicaes externas e possibilidade de utilizao de expresses regulares para localizar e substituir texto.
1. WEB DESIGN
27
Editores HTML em modo cdigo Os editores HTML (HTML Editors) so editores de texto criados especificamente para lidar com linguagens de programao ou formatao especficas da World Wide Web. Tm funcionalidades tpicas de um editor de texto, como utilizao de cores para realar a sintaxe, invocao de aplicaes externas e expresses regulares, mas acrescentam funcionalidades especficas das linguagens que suportam, como auto-completion, ajuda contextual, etc. Alguns dos editores HTML em modo cdigo mais conhecidos so: Aptana, Komodo, TopStyle e Arachnophilia. Editores HTML em modo grfico (WYSIWYG) Mais recentemente apareceram programas que permitem desenhar a interface de uma pgina Web de forma livre, como se fossem um cruzamento dos programas Adobe PhotoShop e Microsoft Word. Funcionam no modo WYSIWYG (W HAT YOU SEE IS WHAT YOU GET), isto , tudo o que o web designer criar e visualizar num destes programas ser exactamente o que o utilizador visualizar posteriormente num browser. Estes editores so bastante sofisticados, possuindo todas as ferramentas necessrias para o web designer criar a interface de um stio Web. Alguns deles incluem mesmo interligaes 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 utilizao destas aplicaes da Microsoft que apenas esto disponveis em sistemas operativos Windows (XP, Vista, 7), e muitos dos web designers trabalharem com Macintosh. O Adobe Dreamweaver dos poucos editores HTML em modo grfico que est disponvel tanto para Windows como para Mac OS.
1.3 Adobe Dreamweaver

O Adobe Dreamweaver tambm a aplicao mais utilizada a nvel profissional no desenho de pginas e stios Web, sendo lder no mercado com cerca de 70% de quota.
28
um editor do tipo WYSIWYG que foi criado originalmente pela Macromedia, sendo actualmente disponibilizado pela Adobe, dado que esta empresa comprou a Macromedia. Ao longo do tempo foram lanadas vrias verses, e actualmente lanada uma verso de 18 em 18 meses. Tendo comeado por ser um simples editor HTML, o Dreamweaver evoluiu para um editor WYSIWYG, e a partir da verso 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 stios Web, que tambm pode ser utilizada para a introduo manual de cdigo HTML/XHTML, bem como outras linguagens (PHP, ColdFusion, etc.). Para utilizar o Dreamweaver, um web designer no tem de perceber HTML, CSS ou JavaScript, dado que o programa esconde o cdigo produzido quando se utiliza apenas o ambiente grfico. Mas em qualquer altura pode mudar para a vista de cdigo, onde possui funcionalidades tpicas de um editor de texto, nomeadamente a utilizao de cores para realar a sintaxe, auto-completion, invocao de aplicaes externas, numerao de linhas e a possibilidade de utilizao de expresses regulares 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), tambm trabalhando com bases de dados (MySQL). Permite uma gesto rpida e eficaz dos ficheiros utilizados na produo de stios 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 tambm suporta outros mtodos de transferncia de ficheiros. A sua arquitectura extensvel permite a utilizao de extenses que adicionam mais funcionalidades ao programa.
1.3.1 Verses disponveis

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 verso de experimentao (trial version) que pode ser descarregada atravs da Internet acedendo ao stio http://www.adobe.com/downloads/. Esta verso vlida por um perodo de 30 dias. Caso possua o Dreamweaver 8, CS3 ou CS4 pode fazer a actualizao para a verso CS5. 1.3.1.1 Actualizaes Periodicamente a Adobe lana actualizaes gratuitas do Dreamweaver que corrigem problemas identificados (bugs) e/ou introduzem novas funcionalidades. Com os problemas que ocorreram com o no suporte do Flash Player no iPhone e no iPad, e com a aposta da Apple nas tecnologias HTML5 e CSS3, a Adobe viu-se forada a disponibilizar alguma funcionalidade do HTML5 no Dreamweaver CS5. Inicialmente disponvel no Dreamweaver CS5 HTML 5 Pack Update, mais tarde foi integrado na actualizao 11.0.3.
1.3.2 Requisitos de sistema

De forma a se poder utilizar o Dreamweaver de forma funcional, necessrio que o computador possua idealmente determinadas caractersticas mnimas, se bem que seja ideal um computador com caractersticas 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 recomendado); Windows Vista Home Premium, Business, Ultimate, ou Enterprise com o Service Pack 1; ou o Windows 7; 1GB de memria; 1GB de espao livre em disco. Pode ser necessrio espao adicional durante a instalao; Monitor com resoluo de 1280x800 pxeis e placa grfica com suporte de 16 bits de cor. Embora possa ser utilizada uma resoluo de 1024x768 pxeis. Unidade de DVD-ROM; Para a activao do produto necessrio ligao Internet, preferencialmente, embora a activao tambm possa ser efectuada atravs do telefone; Ligao Internet de banda larga para usufruir dos servios online que a Adobe disponibiliza.
30
Para o Macintosh: Processador Intel de mltiplos ncleos (por exemplo, Dual Core); Mac OS X v.10.5.7 ou v10.6; 1GB de memria; 1,8GB de espao livre em disco. Pode ser necessrio espao adicional durante a instalao; Monitor com resoluo de 1280x800 pxeis e placa grfica com suporte de 16 bits de cor; Unidade de DVD-ROM; Para a activao do produto necessrio ligao Internet, preferencialmente, embora a activao tambm possa ser efectuada atravs do telefone; Ligao Internet de banda larga para usufruir dos servios online disponveis.
1.4 Novidades no Dreamweaver CS5

O Dreamweaver utilizado preferencialmente por web designers, embora tenha vindo a melhorar as funcionalidades disponveis para o desenvolvimento de aplicaes dinmicas por web developers. Uma das novidades que agradar tanto aos web designers como aos web developers a simplificao do processo de criao de um novo stio:
Agora, para criar um novo stio Web, s necessrio fornecer o respectivo nome e a localizao 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 informao para configurar o stio Web, ele pede-a.
1.4.1 Para os web designers

As novas funcionalidades especficas para os web designers centram-se sobretudo na utilizao das CSS. 1.4.1.1 Adobe BrowserLab O Dreamweaver CS5 integra-se com o Adobe BrowserLab, que um servio online CS Live, que permite testar o stio numa grande variedade de browsers. Permite a comparao, lado a lado, do aspecto de uma pgina em dois browsers diferentes.
Este servio funciona atravs de cpias de ecr (screenshots) da pgina corrente tal como ela aparecer em diferentes browsers. As imagens produzidas podem ser visualizadas no stio Web do BrowserLab. O BrowserLab tambm pode ser utilizado como um servio prprio sem necessidade de o aceder atravs do Dreamweaver (ver a pgina http://browserlab.adobe .com). A vantagem de utilizar o BrowserLab a partir do Dreamweaver que podemos testar as pginas sem ter de as publicar num servidor remoto.
32
1.4.1.2 CSS Disable/Enable Agora possvel desactivar e reactivar propriedades CSS directamente a partir do painel CSS STYLES:
Ao desactivar uma propriedade CSS, o Dreamweaver transforma-a simplesmente num comentrio. 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 necessrio aceder ao cdigo. Isto , ao activarmos este modo, sempre que passarmos com o rato por cima de um elemento da pgina no Dreamweaver, aparecem as propriedades CSS respectivas no painel CSS STYLES, alm 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 simplificadas. A simplificao em relao s starter pages do Dreamweaver CS4 tem a ver com o tipo de selectors CSS utilizados. Esta alterao s perceptvel quando se analisa o cdigo 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 slida com modelos de pginas 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 pginas dinmicas, para se concentrar no web design, eis que a verso CS5 nos traz importantes novidades nesta rea. 1.4.2.1 Integrao com o Business Catalyst O Adobe Business Catalyst (http://businesscatalyst.com/) uma aplicao alojada num servidor que substitui as ferramentas tradicionais utilizadas para o desenvolvimento de stios Web, por uma plataforma central. Permite criar stios sofisticados com recurso a bases de dados, incluindo lojas online:
34
A integrao com o Business Catalyst tem a forma de uma extenso 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 pginas PHP de sistemas de gesto de contedos (Content Management Systems), e apresentar o nome desses ficheiros na barra RELATED FILES:
Por omisso, o Dreamweaver CS5 suporta esta funcionalidade para os sistemas de gesto de contedos WordPress, Drupal e Joomla! 1.4.2.3 Navegao Live View Agora, quando estamos na LIVE VIEW, em que utilizado o motor de rendering WebKit para visualizar pginas Web, podemos interagir com a pgina como se
1. WEB DESIGN
35
estivssemos a utilizar um browser, mesmo nas aplicaes que utilizem dados dinmicos.
Tambm possvel introduzir um endereo Web (URL) para inspeccionar pginas enviadas a partir de um servidor web remoto e editar pginas para as quais tenha navegado, caso existam num stio definido localmente. 1.4.2.4 Code hinting de classes em PHP Esta funcionalidade apresenta a sintaxe de funes, objectos e constantes PHP, permitindo assim cdigo mais correcto:
Funciona tambm com as funes e classes definidas pelo web developer, bem como as existentes em frameworks PHP, como a Zend framework.
36
1.4.2.5 Code hints especficas de stio Permite a personalizao do ambiente de programao 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 verses Subversion, permitindo mover, copiar e eliminar ficheiros localmente, sincronizando depois as alteraes com o repositrio remoto SVN. O novo comando REVERT permite corrigir rapidamente conflitos na rvore de verses ou efectuar o rollback para uma verso anterior de um ficheiro. Adicionalmente, uma nova extenso do Dreamweaver permite especificar que verso do Subversion pretende utilizar em cada projecto. 1.4.2.7 Server Behaviors Ausente das novas funcionalidades esto novas server behaviors, embora existam algumas melhorias menores ao nvel da segurana e da resoluo de bugs, das existentes. Aps a deciso, em Abril de 2009, de abandonar o desenvolvimento da Adobe Dreamweaver Developer Toolbox, parece que a Adobe vai deixar que sejam outras empresas e stios Web, como o WebAssist, o CartWeaver, e a DMXZone, a desenvolverem novas server behaviors para o Dreamweaver.
1. WEB DESIGN
37
1.4.3 Funcionalidades removidas

Em cada nova verso do Dreamweaver, a Adobe tambm remove funcionalidades que j esto obsoletas, eram pouco utilizadas ou j no interessa suportar. Algumas das funcionalidades removidas: Barras de navegao (navigation bars); Criao de um album de fotos Web; Gesto das classes CSS disponveis atravs da edio InContext; Insero de documentos FlashPaper; Ligao a um servidor FTP/RDS sem definir um stio; Menu SHOW EVENTS no painel BEHAVIORS; Opo INSERT/REMOVE MARK OF THE W EB; Relatrio de validao de Acessibilidade; Validao de tags. As seguintes behaviors JavaScript suportadas pelo Dreamweaver at verso 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 produo de stios dinmicos as seguintes funcionalidades deixaram de existir: ASP/JavaScript server behaviors; Integrao do Microsoft Visual Sourcesafe; View Live Data. Isto significa que o Dreamweaver, como ferramenta de desenvolvimento de stios Web dinmicos, passou a suportar apenas o Coldfusion e o PHP, alm do ASP VBScript. De realar que no Dreamweaver CS4 a Adobe j tinha abandonado o suporte do ASP.NET e do JSP.
Ambiente de trabalho
Sempre que abrir o Dreamweaver CS5, o aspecto do ambiente de trabalho o seguinte:
2.1 WELCOME SCREEN

No centro do ecr aparece o W ELCOME SCREEN, que uma espcie de home page do Dreamweaver, dado que permite um acesso rpido s tarefas comuns que so executadas nesta aplicao. Abrindo um ficheiro fecha o W ELCOME SCREEN. Mas se fechar todos os ficheiros abertos no Dreamweaver, o W ELCOME SCREEN volta a aparecer.
40
Uma das funcionalidades do W ELCOME SCREEN a possibilidade de abrir os ficheiros com que trabalhou recentemente:
Esta lista estar vazia a primeira vez que abra o Dreamweaver aps a instalao. medida que vai trabalhando em diferentes pginas, 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 opes cria um documento desse tipo com as respectivas configuraes para esse tipo de ficheiros. Pode depois alterar estas configuraes. Nesta lista aparece tambm a opo DREAMWEAVER SITE que permite a criao de um stio Web e que normalmente a primeira aco que se efectua quando se comea a trabalhar num novo projecto. A opo MORE mostra mais opes de criao de tipos de documentos:
2. AMBIENTE DE TRABALHO
41
A coluna da direita do W ELCOME SCREEN lista vdeos que esto disponveis no stio da Adobe TV sobre diversas funcionalidades do Dreamweaver, estando em destaque os vdeos sobre as novas funcionalidades da verso CS5:
Na parte inferior esquerda temos 3 links que permitem aceder a documentao online existente no stio da Adobe:
A opo DREAMWEAVER EXCHANGE permite transferir widgets e recursos para tornar o Dreamweaver mais poderoso com novas funcionalidades ou melhoria das existentes.
42
Se, por acaso, no pretender que o W ELCOME SCREEN fique visvel quando fecha todos os documentos, existe uma opo no canto inferior esquerdo:
e aparecer uma caixa de dilogo a informar sobre o procedimento que se tem de efectuar para o W ELCOME SCREEN voltar a aparecer:
2.2 Barras de ferramentas

Tal como acontece com a maior parte das aplicaes do Windows e do Mac OS, o Dreamweaver possui diversas barras de ferramentas que facilitam e tornam mais rpido 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 rpido a diversas opes:
O primeiro cone desta barra tem a ver com a interface do Dreamweaver, mais precisamente com a forma como aparece a pgina na rea de documentos:
43
Pode-se ver a pgina em modo DESIGN, em modo CODE ou dividida em dois (CODE AND DESIGN e SPLIT CODE). O segundo boto d acesso a um menu com opes que permitem aumentar as funcionalidades do Dreamweaver instalando extenses e widgets, da Adobe ou de outras empresas:
Estes componentes podem ser gratuitos ou ter um custo associado. O ltimo cone o SITE MANAGEMENT, que permite criar novos stios Web e gerir stios existentes:
Uma das utilizaes mais comuns da APPLICATION TOOLBAR para mudar entre workspaces, utilizando o menu W ORKSPACE:
Os workspaces permitem rearranjar os painis e a interface do Dreamweaver mudando de workspace, utilizando o melhor que se adapta tarefa que temos de efectuar. Na APPLICATION TOOLBAR existe tambm uma caixa de pesquisa.
Ao escrever aqui o nome de uma funcionalidade do Dreamweaver ou das normas Web, e carregando em RETURN (ou ENTER), aceder aplicao Adobe
44
Community Help, que est instalada no seu computador e que permite aceder a artigos sobre diversos assuntos:
Pode acontecer que ao aceder a esta aplicao tenha de fazer a actualizao do Adobe Air ou da prpria aplicao. E finalmente temos o menu CS LIVE,
que nos permite aceder a diversos servios online disponibilizados pela Adobe. O mais interessante para o web designer o Adobe BrowserLab.
45
Dica
Para desactivar a APPLICATION BAR aceda opo W INDOW > APPLICATION BAR. Apenas os trs primeiros cones desaparecem, sendo substitudos 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 pgina, pr-visualizar a pgina, transferir ficheiros (upload), atribuir um nome pgina, etc. A parte mais utilizada a parte do lado esquerdo que permite mudar a forma de visualizao da pgina corrente. Pode-se ver a pgina em modo de desenho (DESIGN), em modo de cdigo (CODE) ou uma mistura de ambos (SPLIT):
Quando estamos em modo SPLIT, podemos personalizar a forma como as duas partes so apresentadas, recorrendo para isso ao menu VIEW (opes SPLIT VERTICALLY e DESIGN DESIGN VIEW ON TOP/LEFT):
46
Estas opes tambm esto disponveis a partir do menu LAYOUT da APPLICATION TOOLBAR. Por omisso, 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 opo DESIGN VIEW ON LEFT a posio das duas vistas trocada. J se desactivarmos a opo, estas duas vistas passam a ficar uma por cima da outra, em vez de ficarem lado a lado. Os botes LIVE CODE, LIVE VIEW e INSPECT tm todos a ver com a integrao, 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 pginas, como se estivessemos a v-las num browser. O boto 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 pginas que o web designer cria podem ter em determinados browsers, sobretudo ao nvel da utilizao de estilos CSS. Mas se quisermos ver a nossa pgina/stio num browser existe um cone para o efeito:
47
As ajudas visuais (VISUAL AIDS) so linhas utilizadas pelo Dreamweaver para identificar certo tipo de elementos numa pgina:
Na DOCUMENT TOOLBAR existe tambm uma caixa de texto para atribuirmos um ttulo pgina:
Este o texto que aparece no canto superior esquerdo dos browsers quando se acede pgina:
Finalmente, o cone FILE MANAGEMENT tem associado um menu com opes que permitem enviar ou receber ficheiros de um servidor Web remoto:
Por exemplo, o comando PUT permite fazer a transferncia (upload) de ficheiros do nosso stio para o servidor remoto.
48
2.2.3 Outras barras de ferramentas

Existem mais trs barras de ferramentas que normalmente aparecem na rea do documento. Estas barras de ferramentas podem ser visualizadas ou escondidas atravs do menu VIEW > TOOLBARS:
Em alternativa pode colocar o cursor em cima de uma barra de ferramentas visvel no Dreamweaver e clicar com o boto direito do rato (CONTROL+CLIQUE no Macintosh) para obter este menu:
A barra STANDARD,
permite efectuar operaes comuns da maior parte dos programas do Windows ou do Mac OS, como abrir documentos, criar novos documentos, guardar documentos, cortar, copiar, colar, undo e redo. J a barra BROWSER NAVIGATION,
permite controlar a navegao do motor de rendering WebKit que a opo LIVE VIEW activa:
49
Repare que temos disponveis os botes BACK [RETROCEDER], FORWARD [AVANAR], REFRESH [REFRESCAR] e a BARRA DE ENDEREOS [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 prprio nome indica, contm opes para configurar a navegao com o browser disponibilizado internamente pelo Dreamweaver. Finalmente, a barra STYLE RENDERING, que ser abordada em mais detalhe no captulo sobre CSS, permite visualizar o design da pgina em diferentes tipos de mdia, como: screen, print, handheld, projection, TTY e TV. Contm tambm um boto que permite activar ou desactivar estilos CSS, alm de botes especficos para as pseudo-classes associadas normalmente aos links:
2.3 Painis
Os painis (em ingls, panels) no Dreamweaver so uma espcie de caixa de dilogo que pode flutuar por cima da interface ou estar encaixada (em ingls, docked) numa parte da interface. Por omisso, os painis aparecem agrupados no lado direito da interface (no PANEL DOCK), quando se utiliza o ambiente de trabalho DESIGNER. Repare que os painis esto agrupados em grupos de painis (em ingls, panel groups), como, por exemplo, os painis FILES e ASSETS. Quando abrimos o Dreamweaver no vemos todos os painis que esto disponveis. Podemos ver os painis que esto disponveis, e podemos mostrar ou ocultar painis, utilizando o menu W INDOW .
50
Para fechar um grupo de painis, fechando os respectivos painis constituintes, clique no cone:
Depois, seleccione a opo CLOSE TAB GROUP no menu que aparece:
2.3.1 Alterar a disposio dos painis

Vamos ver como podemos dispor os painis para que possamos organizar o ambiente de trabalho ao nosso gosto.
51
Uma das formas mais fceis de mudar a disposio dos painis utilizar ambientes de trabalho (em ingls, workspaces) pr-definidos:
Cada um dos workspaces que aparecem na lista dispe os elementos da interface do Dreamweaver de acordo com o respectivo pblico-alvo. Como bvio, um programador ter preferncia pelos workspaces CODER e CODER PLUS e um designer pelos workspaces DESIGNER e DESIGNER COMPACT. Um dos workspaces mais prticos o DUAL SCREEN que permite ter os documentos num monitor e os painis noutro. Mas os painis no esto fixos na interface do Dreamweaver e ns podemos alterar a sua disposio vontade, e at guardar essas alteraes.
2.3.2 Flutuar um painel

Ao clicar num painel ele fica activo, isto , fica no topo do grupo de painis onde est inserido. Por exemplo, clicando no painel AP ELEMENTS, repare como ele se sobrepe ao painel CSS STYLES que era o painel activo desse grupo de painis:
Os painis esto encaixados no panel dock, que se encontra normalmente no lado direito da interface do Dreamweaver. Mas podemos fazer flutuar um painel arrastando-o pelo seu separador identificativo:
52
Ao largar o boto do rato, o painel aparecer a flutuar por cima dos outros elementos da interface:
Para flutuar um grupo de painis, arraste-o pela zona vazia que se encontra ao lado direito dos painis que constituem o grupo:
2.3.3 Colocar grupos de painis no panel dock

A maior parte dos painis possui uma localizao por omisso. Mas podemos criar novos grupos de painis ou rearranjar os respectivos painis constituintes. Por exemplo, se quiser mudar um painel para outro grupo de painis, basta arrastar o painel, pelo respectivo separador, para cima do grupo de painis destino, e, quando aparecer uma moldura azul, largar o boto do rato:
53
Caso tenha flutuado um painel (ou grupo de painis) e pretender voltar a encaix-lo no panel dock, arraste-o pela barra superior,
ou pelo espao vazio ao lado dos painis,
para uma posio entre dois grupos de painis:
Pode verificar que est no local certo se apenas aparecer uma fina barra horizontal azul entre dois grupos de painis, e no aparecer uma moldura azul volta de nenhum painel.
Dica
Tambm podemos arrastar um grupo de painis, arrastando um painel individual existente nesse grupo, bastando para isso manter pressionada a tecla OPTION no Macintosh ou ALT no Windows.
54
2.3.4 Minimizar painis

Como o panel dock fica muito cheio pelos diversos grupos de painis activos, para reduzir um grupo de painis a uma nica barra, basta efectuar um duplo clique num dos painis que constituem esse grupo. assim possvel ter um panel dock com todos os painis minimizados:
Uma utilizao prtica desta possibilidade minimizar todos os painis excepto aquele que pretendemos utilizar num determinado momento. Para ganhar mais espao podemos clicar no cone COLAPSE TO ICONS, identificado por duas setas, que esto no topo direito do panel dock:
O resultado :
Para voltar a repor os grupos de painis basta voltar a clicar no cone COLAPSE
TO ICONS.
Para ainda poupar mais espao, colocamos o cursor entre o panel dock e a janela do documento, at o cursor mudar para,
55
e arrastamos para o lado direito. Ficamos ento com uma nica coluna de cones:
Dica
Se pretender esconder todos os painis 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 PROPERTY INSPECTOR:
Se passar o rato por cima de uma destas barras e esperar 1 segundo, aparecer o panel dock ou o PROPERTY INSPECTOR.
56
No caso de estarmos a utilizar dois monitores, o Dreamweaver permite que todo o panel dock flutue. Basta arrast-lo pela barra de topo:
Tambm nesta barra temos acesso a um menu de contexto (clicando com o boto direito do rato, ou CONTROL+clique no Macintosh) que possui as seguintes opes:
2.3.5 Criar outro panel dock

Se possuirmos um monitor de grandes dimenses podemos criar outro panel dock no lado esquerdo do ecr, arrastando para l um grupo de painis (ou um s painel),
e quando aparecer uma barra azul vertical, largar o grupo de painis (ou o painel):
2.3.6 Painis horizontais

Alguns painis no funcionam muito bem como painis verticais como acontece com o painel INSERT:
57
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 operaes de criao de elementos numa pgina, e est dividido em grupos distintos que so representados por abas/separadores.
58
Dependendo do tipo de pgina em que estiver a trabalhar (por exemplo, uma pgina dinmica) aparecero outros grupos, como PHP, que permitem o acesso rpido a objectos desse tipo. Este painel permite mesmo efectuar operaes que no 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 boto direito do rato na barra (CONTROL+CLIQUE no Macintosh), podemos personalizar este separador:
Na caixa de dilogo que aparece podemos acrescentar objectos/cones ao separador FAVORITES:
Na lista AVAILABLE OBJECTS os objectos esto separados por grupo. Aparecem aqui alguns objectos que no so visveis nos menus, como Flash Paper. O boto ADD SEPARATOR permite adicionar um separador vertical.
59
O resultado da nossa configurao :
Dica Deve ter reparado quando clica com o boto direito do rato na barra (ou CONTROL+CLIQUE no Macintosh), que aparece a opo COLOR ICONS, que permite utilizar, como o prprio 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 seleco na pgina. Possui dois separadores: O separador HTML permite-lhe controlar as propriedades de elementos HTML na pgina:
O separador CSS permite criar novos estilos e editar estilos existentes relativos ao objecto seleccionado na rea de documento:
O PROPERTY INSPECTOR tambm 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 painel, como acontece com os elementos imagem e imageplaceholder:
60
Se efectuar um duplo-clique em qualquer parte vazia do PROPERTY INSPECTOR, a parte de baixo ser escondida ou visualizada, conforme o estado em que se encontre. Esta possibilidade existe para ganhar espao na interface do Dreamweaver.
2.3.9 Painel RESULTS

Um grupo de painis especial o RESULTS que aparece na parte de baixo do ecr, e que ocupa bastante espao:
Para visualizar este painel, seleccione, no menu W INDOW , a opo RESULTS e depois seleccione uma opo no sub-menu que aparece:
Este painel disponibiliza diversa informao e permite efectuar uma srie de operaes na pgina. Se for utilizador frequente deste painel, e para evitar que ocupe tanto espao, pode agreg-lo com o painel PROPERTY INSPECTOR. Pegue no painel PROPERTY INSPECTOR e arraste-o para baixo para cima do painel RESULTS, at ver uma moldura azul:
61
E tem assim o PROPERTY INSPECTOR encaixado (docked) com todos os outros painis do grupo de painis RESULTS:
Como o painel PROPERTY INSPECTOR ficou no fim, e como acontece em qualquer grupo de painis, pode mover os painis de posio dentro de um grupo de painis. Basta clicar no ttulo do painel e arrast-lo para a posio desejada:
2.4 Workspaces
Existem diversas tarefas que se podem efectuar no Dreamweaver quando se constroem stios Web. Num dia podemos estar a trabalhar fortemente em cdigo, noutro em dados dinmicos, e noutro a construir o layout recorrendo a estilos CSS. Cada uma destas actividades utiliza um layout preferencial de painis e de barras de ferramentas diferente. Em vez de estar constantemente a abrir e a fechar painis e a arranj-los, pode recorrer aos workspaces. O Dreamweaver disponibiliza diversos workspaces pr-definidos, como pode verificar no menu respectivo da APPLICATION TOOLBAR:
62
Por omisso, o workspace utilizado pelo Dreamweaver o DESIGNER. Se alterarmos o posicionamento de um painel num determinado workspace, o Dreamweaver vai-se lembrar dessa alterao da prxima 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 prprio workspace. Partindo de um workspace pr-definido, primeiro defina a interface ao seu agrado, colocando os painis nos locais preferidos. O modo de visualizao por omiso (CODE, DESIGN ou SPLIT) tambm guardado no workspace. Quando tiver a interface ao seu gosto crie um novo workspace:
Temos que atribuir um nome ao workspace:
63
Este novo workspace, aparece agora na lista, como sendo o workspace utilizado por omisso quando se abre o Dreamweaver:
Qualquer workspace personalizado aparece no topo da lista e separado dos workspaces pr-definidos. A opo MANAGE WORKSPACES,
permite alterar o nome ou apagar um workspace personalizado:
64
2.4.2 Repor tudo como estava

Pode experimentar mover os painis 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 contedo das pginas Web:
Na parte de baixo desta rea esto 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,
65
que permite seleccionar, editar ou remover objectos da pgina. Ao clicar numa etiqueta (tag) que aparece nesta barra, ser seleccionado o objecto respectivo na pgina:
Este o processo preferido para seleccionar objectos na pgina. Por exemplo, se pretender seleccionar texto, como um pargrafo, clique no meio do pargrafo 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 pargrafo seleccionado se encontra dentro de um elemento <div>, que por sua vez est dentro de um elemento <body>. De realar que todos os objectos existentes numa pgina so 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 cdigo HTML e respectivos atributos associados ao elemento em causa:
Tambm associado a cada etiqueta que aparece no TAG SELECTOR, existe um menu de contexto (boto direito do rato no Windows e CONTROL+CLIQUE no Macintosh),
que permite efectuar diversas operaes sobre o objecto em causa, nomeadamente remover o elemento (REMOVE TAG) ou edit-lo (QUICK TAG EDITOR).
66
2.5.2 Outros cones e informao

No lado direito da barra de estado no fundo da janela DOCUMENT, existe um conjunto de cones e informao: Os trs primeiros cones so mutuamente exclusivos o que significa que apenas um pode estar seleccionado numa determinada altura: a ferramenta de seleco (SELECT) a que est seleccionada por omisso, e a que permite seleccionar objectos na pgina, ou inserir o cursor na pgina 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 ampliao (zoom) que se encontra ao seu lado direito, permite aumentar ou reduzir a ampliao da pgina:
Para reduzir a ampliao da pgina utilize ALT+CLIQUE no Windows ou OPTION+CLIQUE no Macintosh. Permite assim que se possa trabalhar em mais detalhe num determinado aspecto da pgina. Efectuando um duplo-clique neste cone, a ampliao volta a 100%. Pode utilizar em alternativa o teclado para reduzir a ampliao: CONTROL+- no Windows ou COMMAND+- no Macintosh. Esta ferramenta tambm pode ser utilizada com o mtodo clicar e arrastar para efectuar a ampliao apenas de uma determinada rea da pgina.
67
No menu de definio da percentagem de ampliao a opo FIT SELECTION permite ampliar apenas o objecto que estiver seleccionado na pgina. Claro est que tem primeiro de seleccionar o objecto com a ferramenta SELECT. Dica Quando a opo de ampliao est activada, se mantiver a barra de espaos pressionada muda temporariamente para a ferramenta HAND.
A lista seguinte, WINDOW SIZE,
permite dimensionar a janela do documento, para a adequar ao tamanho pretendido. As opes s aparecem seleccionveis se a janela do documento no estiver maximizada. Podem-se definir outros tamanhos personalizados utilizando a opo EDIT SIZES (que acede categoria STATUS BAR da caixa de dilogo PREFERENCES). Este valor no limita o tamanho da pgina, permitindo apenas ao web designer ver a aparncia da pgina numa determinada resoluo de ecr. O tamanho da pgina e o tempo de transferncia (download), so valores estimados para a pgina: O Dreamweaver calcula o tamanho da pgina, baseando-se no contedo da pgina e nos ficheiros dependentes como imagens, ficheiros CSS, etc. Estima o tempo de transferncia baseando-se na velocidade de ligao seleccionada na caixa de dilogo PREFERENCES (EDIT > PREFERENCES > STATUS BAR):
68
Finalmente, o indicador de codificao (encoding) permite ao web designer assegurar que a codificao utilizada na pgina a correcta:
2.5.3 Trabalhar com rguas

Medies precisas so essenciais para posicionar os elementos numa pgina Web. O Dreamweaver disponibiliza duas rguas, uma horizontal e outra vertical, que esto localizadas no topo e no lado esquerdo da janela do documento activo:
As regras podem ser visualizadas ou escondidas atravs da opo SHOW do sub-menu VIEW > RULERS:
Por omisso, a unidade utilizada o pxel, mas tambm se podem utilizar as polegadas (INCHES) ou os centmetros (CENTIMETERS). O ponto 0,0 das rguas no canto superior esquerdo. Contudo, pode-se definir um ponto 0 diferente em cada uma das rguas. Basta clicar e arrastar a partir do quadrado que se encontra no canto superior esquerdo na interseco das duas rguas:
69
Para voltar a repor a origem das medidas no canto superior esquerdo, seleccione a opo VIEW > RULERS > RESET ORIGIN.
Dica Existe tambm um menu de contexto associado a cada uma das rguas, que permite aceder s opes que existem no sub-menu VIEW > RULERS:
2.5.4 Trabalhar com a grelha

O Dreamweaver disponibiliza uma grelha, que uma srie de linhas horizontais e verticais que ajudam no alinhamento de objectos na pgina. Para visualizar a grelha utiliza-se a opo VIEW > GRID > SHOW GRID:
O resultado o aparecimento de linhas horizontais e verticais espaadas 50 pxeis entre si:
70
Pode-se personalizar a distncia entre linhas da grelha e a prpria cor das linhas, acedendo opo VIEW > GRID > GRID SETTINGS:
Com a grelha activada as linhas servem apenas para orientao no posicionamento de objectos, sobretudo os objectos posicionados de forma absoluta. Para que os objectos alinhem automaticamente pelas linhas necessrio activar a opo VIEW > GRID > SNAP TO GRID.
2.5.5 Trabalhar com guias

As guias so linhas que permitem o alinhamento de objectos na pgina. So definidas pelo web designer, podendo ser criadas horizontalmente ou verticalmente. Para criar guias necessrio que as rguas estejam visveis. Clique numa rgua e arraste para o meio da pgina para o local onde pretende criar a guia:
71
Repare que a guia tem cor verde e apresenta uma tooltip a indicar a distncia a que se encontra da origem (ponto 0,0) das rguas. Depois de criar uma guia pode desloc-la para uma nova posio desde que a opo LOCK GUIDES no esteja activada. Dica Para mover uma guia para uma localizao precisa, efectue um duplo-clique por cima da guia, introduza a localizao exacta pretendida, e clique em OK:
Para remover uma guia basta arrast-la para a rgua correspondente. As guias tambm possuem um sub-menu de opes no menu VIEW:
A opo SHOW GUIDES permite mostrar ou esconder as guias e a opo CLEAR GUIDES permite remover todas as guias existentes na pgina. Uma opo 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 opo SNAP TO GUIDES. Depois pode arrastar o(s) elemento(s) para os alinhar guia. Existe tambm a opo 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 pgina.
72
Para personalizar as guias utiliza-se a opo E DIT GUIDES.
Deve ter reparado que existem cinco resolues 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 contedo visvel num ecr com a resoluo seleccionada.
Dica Para visualizar a distncia 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 rguas. Tambm funciona para se saber a distncia de uma guia origem.
Stios Web
O Dreamweaver sempre deu bastante importncia ao conceito de stio Web (site), isto , coleco de ficheiros e pastas inter-relacionados que esto associados a um endereo do tipo http://www.centroatlantico.pt . Existe uma pasta principal que alberga todos os ficheiros e sub-pastas do stio Web e que tem o nome genrico de root folder. Dentro desta pasta so estruturados os ficheiros e as pastas de acordo com o tamanho e funo do stio Web:
root
_css
_imagens
_scripts
livros
autores
index .html
...
Por exemplo, se for um stio Web pequeno, pode colocar todos os ficheiros no root folder. Mas com stios Web maiores e mais complexos vulgar criar-se pastas para arrumar os ficheiros. Normalmente criam-se pastas especficas para conterem os recursos utilizados no stio Web, como imagens, CSS, scripts, imagens, vdeos, etc. Muitas vezes o nome dessas pastas comea por _ para aparecerem no topo das listagens do root folder e para serem facilmente identificadas como contendo recursos e no pginas do stio Web. A pgina principal de um stio Web encontra-se sempre no root folder e tem o nome index ou default, dependendo do servidor Web utilizado. A extenso desta pgina depende do tipo de stio Web: se for um stio esttico ser .html ou .html; caso seja um stio Web dinmico ser .php ou .aspx (entre outros possveis).
74
Dica
Deve planear a estrutura do seu stio Web e os recursos a utilizar antes de comear a trabalhar nas pginas.
3.1 Definir um stio Web

Quando comea a trabalhar num novo projecto no Dreamweaver, a primeira coisa a fazer definir um stio Web. Se no o fizer, o Dreamweaver ser incapaz de identificar os links entre pginas, verificar ficheiros relacionados, ou ajudar a gerir os recursos. Na verso CS5 o processo de definio de stios Web foi bastante simplificado. Agora s necessrio saber duas coisas para criar um stio Web: Onde est localizado o root folder local, que a pasta no seu computador onde vo estar armazenados todos os ficheiros e pastas que fazem parte do seu stio Web; O nome que pretende a atribuir ao stio Web. Quando se comea a utilizar o Dreamweaver, aps ter sido instalado, no existe nenhum stio Web definido, como pode ver pelo painel FILES:
Se clicar na lista, poder verificar que no aparece nenhum nome de stio Web, apenas a identificao dos dispositivos (discos, DVD, etc.) existentes no seu computador:
Existem muitas formas de definir um stio Web no Dreamweaver:
3. STIOS WEB
75
1. Aceder ao menu SITE, na APPLICATION TOOLBAR, e seleccionar a opo NEW SITE:
2. Seleccionar a opo NEW SITE do menu SITE:
3. Ou seleccionar a opo DREAMWEAVER SITE no W ELCOME SCREEN:
Qualquer uma destas opes permite aceder caixa de dilogo SITE SETUP:
Quem j utilizava o Dreamweaver verificar que esta caixa de dilogo foi muito simplificada. A primeira operao atribuir um nome ao stio Web:
76
Pode atribuir o nome que muito bem entender, no existindo nenhuma restrio. Pode mesmo utilizar espaos no nome. Depois preciso definir a localizao do root folder:
Podemos escrever directamente a localizao no campo LOCAL SITE FOLDER ou utilizar o boto BROWSE FOR FOLDER ( ) para localizar a pasta. Neste caso, na caixa de dilogo que aparece, depois de ter seleccionado a pasta, clique no boto SELECT no Windows (ou CHOOSE no Macintosh). Caso tenha um stio Web j criado e pretenda import-lo para o Dreamweaver, basta colocar no campo LOCAL SITE FOLDER a localizao do root folder desse stio Web.
Dica
Quando estamos a criar um stio Web apenas para fazer o design das pginas, podemos coloc-lo em qualquer pasta do disco do nosso computador. Mas se estivermos a trabalhar com stios Web dinmicos, ento teremos de seleccionar uma pasta dentro da instalao do servidor web. Por exemplo, no caso do Apache normalmente dentro da pasta htdocs. Pode reparar que existem outras possibilidades de configurao de um stio Web, a partir da categoria ADVANCED SETTINGS,
3. STIOS WEB
77
mas, neste momento, a informao fornecida suficiente para criar o stio Web no Dreamweaver. Depois de clicar no boto SAVE da caixa de dilogo SITE SETUP, aparecer no painel FILES o novo stio Web seleccionado:
Como estamos a criar um stio Web de raiz no aparecer nenhum ficheiro ou pasta. Caso esteja a importar um stio Web existente, e ele for constitudo por muitos ficheiros e pastas, poder ver uma caixa de dilogo a informar que o Dreamweaver est a fazer o caching do stio Web. Deve colocar os stios Web em pastas distintas de forma a no interferir com outros stios Web que j tenha criado. De qualquer forma, o Dreamweaver avisa sempre que se tente utilizar uma pasta de um stio Web existente para um novo stio Web,
ou se a pasta para o novo stio Web for uma sub-pasta de um stio Web j existente:
Depois de criarmos vrios stios Web no Dreamweaver podemos utilizar a lista do painel FILES para saltar entre esses stios Web:
78
3.2 Gesto de stios Web

Algumas vezes necessrio alterar a configurao de um stio Web. Para o fazer necessrio, em primeiro lugar, aceder caixa de dilogo MANAGE SITES e seleccionar o stio Web que se pretende alterar. As opes disponveis para o fazer so: 1. Aceder ao menu SITE, na APPLICATION TOOLBAR, e seleccionar a opo MANAGE SITES:
2. Seleccionar a opo MANAGE SITES do menu SITE:
3. Ou seleccionar a opo MANAGE SITES na lista de stios Web do painel FILES:
3. STIOS WEB
79
Dica
Para aceder rapidamente caixa de dilogo SITE SETUP, relativa ao stio Web corrente, basta efectuar um duplo clique por cima do respectivo nome na lista de stios Web do painel FILES. Seleccionando qualquer uma destas trs opes, aparecer a caixa de dilogo MANAGE SITES:
Esta caixa de dilogo mostra uma lista de todos os stios Web definidos no Dreamweaver. A partir desta caixa de dilogo pode efectuar diversas operaes com os stios Web: NEW para criar um novo stio Web; EDIT para alterar a configurao de um stio Web; DUPLICATE para duplicar a configurao de um stio Web; REMOVE para eliminar um stio Web do Dreamweaver. No elimina o stio Web (ficheiros e pastas) fisicamente em disco; EXPORT permite exportar a configurao do stio Web para um ficheiro, para o stio Web ser reproduzido noutro computador; IMPORT permite importar, a partir de um ficheiro, a configurao de um stio Web Dreamweaver. Para todas as opes, excepto para NEW e IMPORT, ter primeiro de seleccionar o stio Web na lista da esquerda. Vamos editar o nosso stio Web, seleccionando-o na lista do lado esquerdo e clicando no boto EDIT. Aparece uma caixa de dilogo j nossa conhecida. Na categoria ADVANCED SETTINGS, seleccione a sub-categoria LOCAL INFO:
80
A opo DEFAULT IMAGES FOLDER importante porque se o Dreamweaver tiver de criar grficos para si, por exemplo, caso coloque widgets na pgina, o Dreamweaver saber onde deve colocar as imagens. Cria-se normalmente uma pasta com o nome img, images ou imagens. Este nome pode ser precedido de um _, como vimos anteriormente, para que a pasta aparea no topo da lista do root folder e para mais facilmente se identificar como uma pasta de recursos. A opo WEB URL no precisa de ser preenchida mas normalmente coloca-se l o URL do nosso stio Web (actual ou futuro), do tipo http://www.centroatlantico.pt, e este endereo utilizado nos links absolutos. Quando efectua determinadas alteraes a um stio Web, como o nome ou a localizao, o Dreamweaver alerta para o facto:
3.3 Gerir ficheiros

O painel FILES permite efectuar diversas operaes nos ficheiros/pastas como se tratasse do Windows Explorer ou do Finder do Macintosh. Deve evitar efectuar alteraes (apagar ficheiros, alterar o nome de ficheiros, alterar o respectivo contedo, etc.) directamente no Windows Explorer ou no Finder do Macintosh. Esta precauo tem a ver com o controlo que o Dream-
3. STIOS WEB
81
weaver mantm sobre a localizao dos recursos de cada stio Web (como imagens, ficheiros CSS, ficheiros JavaScript, etc.) e a relao entre os ficheiros atravs de links. Se utilizar o painel FILES para mudar um ficheiro de pasta, o Dreamweaver actualiza automaticamente todos os ficheiros que possuam ligaes 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 aplicao, clique depois no cone REFRESH no Dreamweaver,
para que essas alteraes sejam repercutidas no painel FILES do Dreamweaver. Se tiver um documento aberto no Dreamweaver e o modificar em simultneo, em outra aplicao, quando voltar para o Dreamweaver ser apresentada uma mensagem do tipo:
Se escolher a opo YES ento o documento ser recarregado no Dreamweaver repercutindo as alteraes efectuadas na outra aplicao. A partir do menu de contexto que aparece quando clica com o boto direito do rato (CONTROL+clique no Macintosh) por cima de uma pasta ou de um ficheiro no painel FILES pode efectuar diversas operaes de gesto de ficheiros, nomeadamente as habituais no Windows Explorer ou no Finder do Macintosh: NEW FILE criar um novo ficheiro, que por omisso se chamar untitled.html; NEW FOLDER criar uma nova pasta; EDIT > CUT cortar um ficheiro ou pasta para depois o colar;
82
EDIT > COPY copiar uma pasta ou ficheiro para memria 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 operao; 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 ficheiros existentes na pasta a que alterou o nome, o Dreamweaver perguntar se pretende actualizar esses links:
3. STIOS WEB
83
Dica
Repare que neste menu de contexto a penltima opo EXPLORE, que permite abrir uma janela do Windows Explorer, ou do Finder do Macintosh, com o contedo do root folder. uma forma rpida de aceder a essa pasta para, por exemplo, efectuar uma cpia de segurana.
3.4 Outra informao sobre o stio Web

Na caixa de dilogo SITE SETUP existe muita outra informao que pode ser fornecida para um determinado stio Web, mas a maior parte diz respeito definio de stios Web dinmicos.
3.4.1 Servidores Web

Quando se desenvolvem stios Web dinmicos habitual existir um servidor de testes onde se testam os stios. Isto sobretudo pertinente quando se trata de uma equipa de desenvolvimento em que cada pessoa desenvolve parte do stio Web, e necessrio testar todas as pginas integradas. Este servidor tem, no Dreamweaver, o nome de servidor de testes (testing server). Aps os testes serem efectuados com sucesso necessrio colocar online num fornecedor de acesso o stio Web desenvolvido ou as suas actualizaes. 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 boto + na categoria SERVERS da caixa de dilogo SITE SETUP:
84
Por exemplo, para um servidor de testes local:
A pasta utilizada corresponde pasta de alojamento de stios Web de um servidor Apache local (numa instalao do pacote XAMPP). Na lista de servidores que aparece, desactiva-se a opo REMOTE e activa-se a opo 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 configurao (password: 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. STIOS WEB
85
Quando pretender copiar o stio Web, que tenha criado no Dreamweaver, para o servidor do fornecedor de alojamento, dever utilizar a informao de configurao 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 ligao, utilizando para isso o boto CONNECTS TO REMOTE HOST no painel FILES:
Ser estabelecida ligao com o servidor remoto,
mudando ento o cone para DISCONNECTS FROM REMOTE HOST:
Agora podemos trocar ficheiros com o servidor remoto utilizando os botes GET (para obter ficheiros) e PUT (para enviar ficheiros):
Pode sincronizar automaticamente os ficheiros entre a cpia local e o servidor remoto utilizando o boto SYNCHRONIZE WITH:
86
Se achar o painel FILES algo limitado, pode clicar no boto 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 cpia local do stio Web no seu computador:
Documentos
Depois de termos criado o nosso site no Dreamweaver, a prxima tarefa comear a criar pginas. O Dreamweaver possui muitas formas diferentes de criar pginas. Uma das formas mais fceis recorrer ao W ELCOME SCREEN. Na coluna CREATE NEW aparecem diversas opes de pginas que podem ser criadas no Dreamweaver:
Ao clicar, por exemplo, na opo HTML, ser criada uma nova pgina sem contedo visvel, e que conter o seguinte cdigo:
88
Repare que a pgina neste momento no 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 pgina clicar com o boto direito do rato em cima do nome do root folder no painel FILES, na coluna LOCAL FILES, e escolher a opo NEW FILE do menu de contexto que aparece:
Mas, desta vez, criada no root folder uma nova pgina com o nome untitled.html:
Como o nome do ficheiro est seleccionado, podemos aproveitar para lhe atribuir um novo nome:
Tradicionalmente, o nome da pgina principal de um stio Web index.html (ou default.html). Repare que, ao contrrio da utilizao do W ELCOME SCREEN, o documento criado no abriu automaticamente na rea de documentos do Dreamweaver. Ter de efectuar um duplo-clique para ele abrir.
4. DOCUMENTOS
89
O Dreamweaver tambm no pediu o tipo de pgina, isto , a extenso a atribuir pgina. Isso acontece devido s preferncias definidas no Dreamweaver. Nenhuma das duas opes anteriores deu-nos a hiptese de personalizar a definio da pgina. Se necessitar de maior controlo na criao da pgina, escolha a opo FILE > NEW:
Na primeira coluna,
temos o tipo de pginas que podemos criar: BLANK PAGE criar uma pgina sem contedo;
90
BLANK TEMPLATE criar um novo modelo (template); PAGE FROM TEMPLATE criar uma nova pgina a partir de um modelo (template) existente; PAGE FROM SAMPLE Pginas com folhas de estilo por omisso, mas que no so starter pages; OTHER Outros tipos de pginas para a Web. Na segunda coluna seleccionamos o tipo de pgina que pretendemos criar:
Existe uma diviso entre pginas estticas (opes HTML a XML) e pginas dinmicas (opes ASP JavaScript a PHP). Caso tivesse escolhido a opo OTHER, na primeira coluna,
poderamos criar outro tipo de pginas menos comuns. Ao seleccionar, na segunda coluna, um tipo de pgina, depois temos de seleccionar o layout que pretendemos utilizar, na terceira coluna:
4. DOCUMENTOS
91
Se for inexperiente na utilizao de CSS ou se quiser criar rapidamente uma pgina com um determinado layout, existem aqui bastantes opes. Ao seleccionar um layout (qualquer opo excepto a primeira, <none>) v o modelo respectivo na quarta coluna:
Estes layouts so chamados, no Dreamweaver, CSS STARTER PAGES. Vamos utilizar um layout sem CSS associadas, seleccionando para isso a opo <NONE>.
92
Ainda na caixa de dilogo NEW DOCUMENT, repare que, no canto inferior direito,
existe uma srie de opes que nos permite personalizar a pgina que pretendemos criar. A primeira lista,
permite-nos atribuir uma Document Type Declaration, que uma linha de cdigo no incio da pgina que informa o user-agent (normalmente o browser) que tipo de cdigo esperar. Desta forma o browser sabe quais so as regras que deve utilizar para mostrar e formatar correctamente o cdigo. A declarao mais corrente nos dias de hoje XHTML 1.0 Transitional, embora no futuro mais prximo se v comear a utilizar o HTML 5. Caso tenha importado o stio Web para o Dreamweaver, poder ter CSS externas que vai utilizar com todas as pginas do stio Web. Nesse caso ter de clicar no boto ATTACH STYLE SHEET,
e depois seleccionar o ficheiro .css que pretende utilizar. Finalmente clicamos no boto CREATE para criar uma pgina em branco. Se mudar para a vista CODE, poder verificar que a primeira linha de cdigo HTML corresponde declarao DOCTYPE, cujo valor seleccionamos no campo DOCTYPE da caixa de dilogo NEW DOCUMENT:
4. DOCUMENTOS
93
Agora temos de guardar a pgina em disco atribuindo-lhe um nome.
4.1 Preferncias dos novos documentos

Dependendo do mtodo utilizado pelo web designer para criar uma pgina, o Dreamweaver toma determinadas decises. Caso no lhe agradem estas decises poder efectuar algumas alteraes. Aceda opo EDIT > PREFERENCES no Windows (DREAMWEAVER > PREFERENCES no Macintosh), e depois clique na categoria NEW DOCUMENT. A primeira opo tem a ver com o tipo de documento por omisso que criado:
94
Por omisso HTML, mas se estiver a criar um stio Web dinmico ser natural mudar o valor desta opo, por exemplo, para PHP (ou ColdFusion).
EXTENSION,
Sempre que mudar esta opo, o Dreamweaver coloca, na opo DEFAULT a extenso mais comum para o tipo de documento seleccionado:
Na maior parte dos casos no pode alterar esta extenso, mas se seleccionar a opo HTML, no campo DEFAULT DOCUMENT, pode faz-lo. Vrios designers utilizam a extenso .htm para os documentos HTML em vez da extenso .html. Tambm se pode definir o DTD a utilizar por omisso nos novos documentos criados. Vimos anteriormente que por omisso utilizado o XHTML 1.0 Transitional:
No muito vulgar alterar as outras opes excepto a ltima, SHOW NEW DOCUMENT DIALOG BOX ON CONTROL+N. Se esta opo estiver activada quando teclar CONTROL+N no Windows (ou COMMAND+N no Macintosh), aparece a caixa de dilogo NEW DOCUMENT. Caso a opo esteja desactivada, esta caixa de dilogo no aparece e ser criado automaticamente um documento de acordo com os valores seleccionados para as opes da caixa de dilogo P REFERENCES, aparecendo aberto na rea de documentos.
4.2 Estrutura de um documento HTML

Vamos agora fazer a anlise de um documento em branco HTML criado pelo Dreamweaver:
4. DOCUMENTOS
95
A primeira linha de cdigo, como j vimos anteriormente, identifica a Document Type Definition utilizada para validar o cdigo da pgina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Em seguida, aparece a identificao 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 invlido em documentos HTML. Especifica o namespace XML do documento. Um documento HTML est dividido em duas partes: HEAD e BODY.
4.2.1 Seco HEAD

A seco HEAD contm diversa informao sobre o documento, a maior parte da qual no visvel para o visitante da pgina, excepto o ttulo:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>
O elemento <title> contm o ttulo atribudo pgina. Este ttulo aparece, nos browsers, no canto superior esquerdo, alm de tambm aparecer nos resultados dos motores de pesquisa:
96
Para se atribuir um ttulo a uma pgina no necessrio aceder ao cdigo. Em modo DESIGN, na barra DOCUMENT, existe um campo onde o ttulo pode ser inserido:
Deve ter reparado que, no cdigo, existe um elemento <meta>. Estes elementos, em documentos HTML, servem para passar informao 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 codificao (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 cabealho (<head>) de um documento HTML. Para inserir novos elementos utiliza-se a opo HEAD da categoria COMMON do painel INSERT,
Seleccionando a opo META, aparece uma caixa de dilogo:
O campo ATTRIBUTE possui duas opes: NAME e HTTP-EQUIVALENT. A segunda opo j foi criada automaticamente pelo Dreamweaver. Podemos
4. DOCUMENTOS
97
criar um elemento <meta> com um atributo name. Neste caso existe uma srie de valores pr-definidos que so reconhecidos pelos browsers e pelos motores de pesquisa. Um desses valores o description que permite a introduo de uma breve descrio da finalidade da pgina (campo CONTENT). Depois de se clicar em OK, o cdigo HTML produzido :
<meta name="Description" content="Site de venda de automveis." />
Outro valor muito utilizado o keywords, que permite especificar palavras que identificam o contedo da pgina:
<meta name="keywords" content="automveis, viaturas, comerciais ligeiros, auto-caravanas" />
Estes keywords so utilizados por alguns motores de pesquisa para indexarem a pgina. Se pretender alterar, em modo DESIGN, qualquer um dos elementos presentes no HEAD de um documento HTML, pode activar a barra HEAD utilizando a opo VIEW > HEAD CONTENT:
Clique agora num dos cones e depois altere os respectivos valores no PROPERTY INSPECTOR:
4.2.2 Seco BODY

A segunda parte de um documento HTML o BODY, onde se coloca o contedo da pgina, isto , a informao a que o visitante vai ter acesso:
98
<body> </body>
neste elemento <body> que vamos trabalhar a partir de agora, embora na vista DESIGN no tenhamos a percepo disso.
4.3 Trabalhar com documentos

O Dreamweaver disponibiliza vrios menus e barras de ferramentas que ajudam a trabalhar com os documentos Web. J vimos anteriormente que existe uma barra STANDARD,
que permite efectuar operaes 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 atravs do menu VIEW > TOOLBARS:
Em alternativa pode colocar o cursor em cima de uma barra de ferramentas visvel no Dreamweaver e clicar com o boto direito do rato (CONTROL+CLIQUE no Macintosh) para obter o mesmo menu:
Algumas das opes disponibilizadas na barra STANDARD tambm esto disponveis num menu de contexto que aparece quando se clica com o boto direito do rato (CONTROL+CLIQUE no Macintosh) num separador relativo a uma pgina Web ou no espao em branco existente ao lado desses separadores:
4. DOCUMENTOS
99
Quando uma pgina aberta no Dreamweaver, logo abaixo do separador que identifica essa pgina, o Dreamweaver lista todos os ficheiros que esto relacionados com essa pgina, e que so normalmente ficheiros JavaScript e ficheiro CSS:
Isto significa que, se pretendermos editar um desses ficheiros, basta clicar no respectivo nome no sendo necessrio 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 pgina corrente e a outra para o ficheiro que pretendemos editar. Caso o nmero de ficheiros que esto referenciados pela pgina corrente for elevado, pode filtrar os ficheiros que pretende que apaream na lista. O menu FILTER RELATED FILES permite-lhe efectuar essa filtragem:
100
As opes RELATED FILES e RELATED FILES OPTIONS do menu VIEW , tambm lhe permitem efectuar estas operaes:
Dica Se trabalhar habitualmente com muitos ficheiros abertos e se cansar de os abrir sempre que invoca o Dreamweaver, aceda caixa de dilogo PREFERENCES atravs da opo EDIT > PREFERENCES (DREAMWEAVER > PREFERENCES no Macintosh) e depois seleccione a categoria GENERAL:
Activando a opo REOPEN DOCUMENTS ON STARTUP permite que quando fechar o Dreamweaver e tiver documentos abertos, da prxima vez que invocar o Dreamweaver apaream abertos esses documentos.
4.4 Visualizar pginas

O Dreamweaver faz um grande esforo para apresentar na vista DESIGN a pgina Web tal qual ela aparecer num browser moderno. Porm, esse esforo no suficiente e existem muitos elementos (nomeadamente estilos CSS) que no so representados de forma conveniente na vista DESIGN.
4. DOCUMENTOS
101
4.4.1 Live View

Para resolver esse problema, o Dreamweaver possui disponvel o motor de desenho de pginas 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 boto LIVE VIEW da barra DOCUMENT:
O WebKit um motor moderno de desenho de pginas, por isso o resultado do LIVE VIEW bastante exacto. Quando mudamos da vista DESIGN para a LIVE VIEW, estamos apenas a alternar entre a verso editvel da vista DESIGN e a verso live dessa mesma vista. por isso que, estando em LIVE VIEW, o boto DESIGN permanece pressionado. Embora no possamos efectuar alteraes no modo DESIGN quando o modo LIVE VIEW est activo, podemos contudo efectuar alteraes na vista CODE e depois mudar para a vista DESIGN (continuando em modo LIVE VIEW) para ver os efeitos das alteraes efectuadas. Em modo LIVE VIEW podemos navegar na pgina 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 necessrio manter a tecla CONTROL (ou COMMAND no Macintosh) pressionada, pode seleccionar a opo FOLLOW LINKS CONTINUOUSLY no menu existente na barra BROWSER NAVIGATION:
102
A barra BROWSER NAVIGATION,
semelhante barra de navegao da maior parte dos browsers, possibilitando retroceder para a pgina anterior, refrescar a pgina, ou mesmo voltar pgina 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 pgina, podemos abri-la para edio utilizando a opo EDIT THE LIVE VIEW PAGE IN A NEW TAB:
4.4.2 Pr-visualizao das pginas em browsers

Porm, nem todos os browsers desenham uma pgina Web da mesma forma. Existem mesmo alguns browsers, como o Internet Explorer, que tm tendncia a ser diferentes dos outros. Isso significa que sempre conveniente visualizar as nossas pginas em vrios 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 mnimo, temos de testar as pginas no Internet Explorer e no Mozilla Firefox, e preferencialmente tambm 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 esto disponveis trs, dado que j no existe uma verso recente do Internet Explorer para o Mac OS). O Internet Explorer coloca-nos um problema adicional devido existncia de vrias verses ainda em utilizao. Neste momento as verses 6, 7 e 8 ainda se encontram activas e brevemente vai chegar a verso 9. O Dreamweaver permite-nos invocar a pgina 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 so os browsers que esto disponveis e coloca-os nesta lista. Dica Uma forma mais rpida de fazer a pr-visualizao da pgina corrente no browser por omisso teclar F12. Se, por acaso, no aparecer listado um dos browsers que tenha instalado no seu computador, pode sempre adicion-lo lista clicando na opo EDIT BROWSER LIST para aceder categoria PREVIEW IN BROWSER da caixa de dilogo PREFERENCES:
104
Para acrescentar um novo browser clique no boto +:
Ter de introduzir um nome que identifique o browser na lista, bem como a localizao do respectivo ficheiro executvel, utilizando para isso o boto BROWSE. Em Windows, um ficheiro executvel tem a extenso .exe. Alguns browsers tm o respectivo ficheiro executvel numa localizao algo estranha. Por exemplo, o ficheiro executvel do Google Chrome (chrome.exe) pode estar localizado na pasta nome_utilizador/AppData/Local/Google/ Chrome/Application . Pode-se tambm definir um browser primrio e um browser secundrio, o que facilita a utilizao de teclas de atalho para invocar os browsers. O browser primrio invocado a partir do Dreamweaver utilizando a tecla F12, enquanto o browser secundrio invocado utilizando a combinao de teclas CONTROL +F12. sempre possvel alterar a informao e configurao de um browser nesta lista de browsers, utilizando o boto EDIT. Na caixa de dilogo PREFERENCES a opo PREVIEW USING TEMPORARY FILE s necessria se estiver a trabalhar com pginas dinmicas (PHP, Coldfusion, etc.).
4.4.3 BrowserLab
Novidade na verso CS5 do Dreamewaver a integrao com o BrowserLab, que um servio online CS Live, que permite testar o nosso stio numa grande variedade de browsers. Este servio funciona atravs de cpias de ecr (screenshots) da pgina corrente tal como ela aparecer em diferentes browsers. Uma das suas funcionalidades mais teis permitir a comparao, lado a lado, do aspecto de uma pgina em dois browsers diferentes. Para se poder utilizar o BrowserLab necessrio que o web designer esteja registado no stio 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 servio:
4. DOCUMENTOS
105
Podemos tambm utilizar o menu CS LIVE da barra APPLICATION:
Ao clicar em PREVIEW (ou em PREVIEW IN BROWSERLAB) o Dreamweaver estabelecer ligao com o stio http://browserlab.adobe.com. Em alguns casos poder aparecer uma mensagem de aviso, sobretudo quando a pgina contiver ficheiros externos como animaes/filmes Flash, entre outras:
Este alerta lembra ao web designer que os ficheiros externos referenciados pela pgina corrente sero copiados para o stio BROWSERLAB. Clique em ALLOW para prosseguir. Aparecer a pgina de autenticao onde dever introduzir o e-mail e a senha que utilizou para se registar no stio:
106
Ter de esperar uns segundos at que o servio BROWSERLAB crie as imagens com o resultado da visualizao da pgina em diversos browsers. Ser apresentada a verso criada no browser definido por omisso:
Para ver a pgina em outros browsers, aceda ao menu que est associado ao nome do browser:
4. DOCUMENTOS
107
Repare que alm do browser corrente, existem mais trs outros browsers na lista (Safari 3.0 OS X, Firefox 3.0 Windows e Internet Explorer 7.0 Windows). Estes quatro browsers pertencem ao chamado browser set corrente. Se o browser em que pretende testar a sua pgina no se encontrar na lista, pode seleccion-lo do sub-menu ALL BROWSERS:
Ao seleccionar um browser nesta lista, alm do BrowserLab gerar uma imagem da pgina utilizando esse browser, tambm o acrescenta lista de browser que fazem parte do browser set por omisso.
108
Se pretender criar uma lista browser set diferente da fornecida, ter de aceder opo BROWSER SETS:
Nesta pgina pode adicionar ou remover browsers lista browser set por omisso:
Na coluna BROWSER ORDER possvel definir a ordem pela qual os browsers seleccionados para o browser set aparecem no menu. Basta arrast-los para a nova posio. Existe um browser set definido por omisso, mas podemos definir outros browser sets atravs do boto ADD NEW BROWSER SET:
Depois de atribuirmos um nome ao novo browser set,
4. DOCUMENTOS
109
podemos seleccionar os browsers que pretendemos que faam parte desse browser set. No necessrio guardar o browser set j que essa operao efectuada automaticamente. Para voltar pgina 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 pgina Web lado a lado em dois browsers diferentes. No menu VIEW seleccione a opo 2-UP VIEW:
O resultado ser do tipo:
110
Pode agora seleccionar, no menu de browsers, outros browsers para fazer comparaes na forma como cada um apresenta a sua pgina Web. Quando estamos no modo 2-UP VIEW, se mantivermos a tecla SHIFT pressionada e deslocarmos o rato podemos fazer uma comparao mais precisa entre os dois browsers, dado que aparece um cursor em cada browser posicionado no mesmo local:
Um deles um cursor fantasma (ghost cursor), correspondendo ao cursor do lado esquerdo na nossa imagem. Mas, no menu VIEW, temos disponvel uma opo ONION SKIN,
4. DOCUMENTOS
111
que permite sobrepor as imagens produzidas para dois browsers distintos, podendo assim ver melhor as diferenas:
A barra de percentagens que se encontra entre os nomes dos dois browsers,
define a preponderncia de cada browser, isto , se existir um browser cuja verso da pgina est mais realada do que a verso do outro browser. Se pretender um processo mais preciso de controlo do posicionamento dos elementos da pgina num browser pode recorrer opo SHOW RULERS do menu VIEW ,
que mostra duas rguas, que utilizam como unidade os pxeis:
112
E tal como acontece no Dreamweaver, tambm pode criar guias, puxando-as de uma rgua:
No canto superior esquerdo existem outras funcionalidades disponveis:
Podemos fazer zoom para ter uma ideia mais exacta de um determinado elemento da pgina (zoom maior que 100%) ou para termos uma viso de conjunto da pgina (zoom menor que 100%). A opo DELAY bastante til dado que permite informar o servio BrowserLab que as cpias de ecr (screenshots) devem ser efectuadas com um atraso de x segundos, para permitir que certas animaes ou widgets JavaScript possam ter tempo de executar. Se pretender ficar com uma cpia dos screenshots produzidos para um ou mais browsers, pode faz-lo recorrendo opo SAVE LOCALLY do menu de contexto que aparece quando clica com o boto direito do rato em cima da pgina (CONTROL+CLIQUE no Macintosh):
4.4.4 Multiscreen
Quando se desenha uma pgina Web que vai ser visualizada em diversos equipamentos diferentes (computador, smartphone, tablet, etc.), interessante poder-se ver em simultneo a aparncia da pgina nesses equipamentos.
4. DOCUMENTOS
113
O Dreamweaver disponibiliza a pr-visualizao Multiscreen (apenas se tiver instalada a verso 11.0.3 ou o Dreamweaver CS5 HTML 5 Pack Update), disponvel a partir do boto com o mesmo nome na barra DOCUMENT:
Esta pr-visualizao suporta os trs seguintes tipos de ecrs: Telemvel (smartphone) resoluo por omisso de 320x300 pxeis; Tablet resoluo por omisso de 768x300 pxeis; Computador (desktop) largura de ecr de 1108 pxeis; Pr-visualizando uma das pginas do nosso stio Web em Multiscreen:
Clicando no boto VIEWPORT SIZES,
podemos definir outras dimenses de ecr para os trs tipos de equipamento:
114
Podemos utilizar CSS Media Queries para atribuir ficheiros CSS distintos para cada um dos trs equipamentos. Esta funcionalidade est disponvel na norma CSS3 e por isso s funciona em browsers que suportem essa norma, isto , nas verses mais recentes dos browsers. Clique no boto MEDIA QUERIES e, depois na caixa de dilogo MEDIA QUERIES, seleccione na coluna CSS FILE o ficheiro CSS que pretende utilizar com cada tipo de equipamento:
O Dreamweaver insere na sua pgina, na seco <head>, cdigo 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 ateno que a pr-visualizao Multiscreen no um browser e como tal no se deve esperar a reproduo de vdeos nem a utilizao de links para aceder a outras pginas do stio Web.
4. DOCUMENTOS
115
4.4.5 Device Central

Cada vez mais existem telemveis com funcionalidades semelhantes s de um computador (os chamados smartphones), excepto que a dimenso do ecr bem mais pequena. O Dreamweaver permite testar pginas Web em vrios equipamentos mveis, recorrendo funcionalidade Opera Small-Screen Rendering. Diferentes equipamentos possuem diferentes browsers instalados, mas esta funcionalidade fornece uma imagem bastante boa do aspecto e comportamento que o seu stio Web pode ter num determinado equipamento. Na barra DOCUMENT, clique no boto PREVIEW /DEBUG IN BROWSER e seleccione a opo PREVIEW IN DEVICE CENTRAL:
A pgina corrente apresentada no separador DEVICE CENTRAL EMULATOR:
Pode ver a aparncia da pgina em outros equipamentos, efectuando um duplo clique num equipamento listado no separador TEST DEVICES.
Trabalhar com texto
Nos primrdios da World Wide Web as pginas apenas continham texto. O HTML possui diversos elementos que devem ser utilizados para estruturar o contedo de uma pgina, que, na maior parte das vezes, constitudo principalmente por texto. Trabalhar com texto no Dreamweaver como trabalhar com um processador de texto, como o Microsoft Word. Alis, alguns dos cones utilizados para estruturar o texto so praticamente idnticos.
5.1 Definir a estrutura do documento

A primeira tarefa, quando se desenha um stio Web, criar a estrutura bsica de uma pgina. Esta estrutura pode ser criada utilizando texto fictcio ou com contedo real definitivo. O texto fictcio 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 Pargrafos
Ao escrevermos texto no Dreamweaver e ao carregar em ENTER (ou RETURN), j estamos a estrutur-lo, dado que criado automaticamente um pargrafo que identificado em HTML pelo elemento <p>:
118
Isto significa que se estivermos a escrever texto numa pgina no Dreamweaver sem nos preocuparmos com formataes, a pgina apenas conter pargrafos. possvel verificar que texto est includo num determinado pargrafo, colocando o cursor no meio do texto e depois, no TAG SELECTOR, clicando no elemento <p>:
No assuma que quando v uma linha de texto ou um bloco de texto esta se encontra dentro de um pargrafo. 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 pargrafos que existem no documento:
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 mtodo tradicional do Windows e do Macintosh; Clicar no incio 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 pargrafo efectue um triplo-clique em qualquer parte desse pargrafo; 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 mltiplas linhas de texto, repita o procedimento anterior mas, desta vez, clique e arraste; Combinando a tecla SHIFT com as teclas de cursor pode seleccionar uma letra de cada vez; Utilizando a combinao de teclas CONTROL+SHIFT (ou COMMAND+ SHIFT no Macintosh) com as teclas de cursor pode seleccionar uma palavra de cada vez; CONTROL+A (ou COMMAND+A no Macintosh) permite seleccionar todo o texto da pgina (bem como imagens e outros objectos). Todos estes mtodos seleccionam texto mas no seleccionam elementos especficos de HTML. Com texto assim seleccionado, se efectuar uma seleco de valores no PROPERTY INSPECTOR, ou num menu, o mais provvel a criao de um novo elemento, nomeadamente um elemento <span>, o que, a maior parte das vezes, no o que desejamos. Porm, como iremos ver mais tarde, teremos de recorrer a um destes mtodos em algumas circunstncias. A forma ideal de seleccionar elementos associados a texto (por exemplo, pargrafos), colocar o cursor no meio do pargrafo e clicar, e depois, no TAG SELECTOR, seleccionar o ltimo elemento da lista de elementos:
120
5.3 Cabealhos
A maior parte das vezes o texto de uma pgina est dividido em seces a que corresponde normalmente um ttulo. No nosso texto exemplo j temos quatro ttulos possveis (Quem Somos, Preos Baixos, Qualidade Garantida e Assistncia tcnica qualificada). Necessitamos agora de informar o HTML que esses ttulos correspondem a seces distintas. Para o fazermos seleccionamos primeiro o respectivo pargrafo,
e, em seguida, escolhemos a opo HEADING 2 no campo FORMAT do PROPERTY INSPECTOR (com o separador HTML activo):
O resultado :
Por omisso, todos os browsers apresentam um cabealho de nvel 2 a negrito (bold) e com um tamanho de letra superior ao utilizado no texto. Utilizando estilos CSS pode-se alterar o aspecto dos cabealhos.
121
Aplicamos este tipo de cabealho aos outros 3 ttulos de seces:
Se reparar na lista de opes disponvel no campo FORMAT do PROPERTY INSPECTOR, ver que existem outros nveis de cabealhos. Estes nveis so hierrquicos, isto , o HEADING 1 mais importante que o HEADING 2, que por sua vez mais importante que o HEADING 3 e assim sucessivamente. Ento porque que no utilizamos o HEADING 1 para os nossos ttulos de seco? Porque normalmente s deve existir um HEADING 1 numa pgina, assim como s existe um ttulo para cada captulo de um livro. Mas ento conveniente acrescentar um ttulo principal ao contedo da pgina e format-lo como HEADING 1:
Na lista disponvel no campo FORMAT do PROPERTY INSPECTOR, no temos muitas hipteses de escolha alm dos pargrafos e dos cabealhos. A opo PREFORMATTED permite utilizar um tipo de letra monospaced, isto , um tipo de letra em que todas as letras ocupam o mesmo espao, como acontece com o
122
tipo Courier New. O elemento HTML respectivo o <pre>, e normalmente utilizado para apresentar cdigo informtico, como no seguinte exemplo:
Este elemento <pre> retm quebras de linha e espao em branco, ao contrrio do que acontece com os pargrafos e os cabealhos.
5.4 Alinhamentos
Por omisso, o Dreamweaver e o HTML efectuam um alinhamento do texto (pargrafos, cabealhos, itens de listas, etc.) ao lado esquerdo. Porm, podemos alterar esse alinhamento recorrendo ao atributo align do HTML. Uma das formas de o fazer atravs do sub-menu FORMAT > ALIGN:
Mas repare que, no PROPERTY INSPECTOR, tanto para os pargrafos como para os cabealhos no existe nenhuma opo de alinhamento quando est seleccionado o separador HTML. Mas se mudarmos para o separador CSS encontramos l os tradicionais cones associados ao alinhamento:
123
O Dreamweaver segue a tendncia actual para efectuar o alinhamento de objectos da pgina utilizando estilos CSS e no atributos do HTML. Devemos ter em ateno que as pginas Web so um meio diferente do papel, e por isso no muito habitual a utilizao de texto justificado, embora a deciso final seja do web designer.
5.5 Quebras de linha e espaos

Uma das grandes diferenas entre o Dreamweaver (e por arrasto, o HTML) e um processador de texto, tem a ver com a utilizao de espaos e de quebras de linha. No Dreamweaver, sempre que se carrega no ENTER (ou RETURN) criado um novo pargrafo. E no HTML os pargrafos possuem entre si uma linha em branco. Este efeito pode ser observado no primeiro pargrafo do nosso texto, se separarmos as duas frases que o constituem:
possvel remover ou reduzir o espao 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 no deve recorrer ao elemento <br>, devendo utilizar estilos CSS. O elemento <br> apenas deve ser utilizado em situaes em que, continuando no mesmo pargrafo, se pretende mudar de linha.
124
Quanto aos espaos, no adianta, no Dreamweaver, carregar vrias vezes na barra de espaos, dado que o cursor no sair do stio. O Dreamweaver apenas admite um nico espao dado que o HTML substitui mltiplas ocorrncias seguidas de espaos por um nico espao. Mesmo que introduza os espaos na vista CODE, o resultado na vista DESIGN como se s tivesse inserido um nico espao:
Mas existem ocasies em que necessrio utilizar mais de um espao. Nesses casos temos de recorrer ao caracter especial do HTML, que significa non-breaking space. Utiliza-se a opo INSERT > HTML > SPECIAL CHARACTERS > NON-BREAKING SPACE:
125
5.6 Caracteres especiais

Existem diversos caracteres que so utilizados em texto mas que no se encontram disponveis num teclado. Um destes caracteres o smbolo de copyright, . O Dreamweaver disponibiliza uma lista de caracteres especiais atravs do sub-menu da opo INSERT > HTML > SPECIAL CHARACTERS:
Alm destes, temos acesso a muitos mais atravs da opo OTHER deste sub-menu:
Repare que nesta caixa de dilogo, quando clica num carcter especial, aparece na caixa de texto INSERT a sua representao em HTML. Por exemplo, no caso do copyright ser ©. Todos os caracteres especiais comeam por & e terminam em ;, e quase todos possuem tambm uma representao numrica que, no caso do copyright, ©. Historicamente, quando se utilizava o iso8859-1 como codificao das pginas, os caracteres acentuados tambm eram representados por cdigos. Por
126
exemplo, o representado por ã. Com a utilizao da codificao utf-8 esses cdigos deixaram de ser necessrios. Estes cdigos so especialmente necessrios para representar caracteres que tm um significado especial no HTML como acontece com o &, o > e o <. Mas no necessitamos de nos preocupar com estes caracteres dado que o Dreamweaver automaticamente insere, no cdigo HTML, os respectivos cdigos.
5.7 Formatao especial

Nos processadores de texto temos um controlo absoluto sobre a forma como o texto formatado. Existem opes para todo o tipo de formataes, inclusive para a produo de frmulas matemticas. O HTML mais limitado, e normalmente estas formataes so conseguidas custa de estilos CSS. Mas existem algumas formataes que podem ser efectuadas em HTML. Por exemplo, colocar caracteres ligeiramente acima e ligeiramente abaixo da linha de base do texto (em ingls, baseline). Um dos exemplos tradicionais o H2O, relativo frmula qumica da gua. Para conseguir que o 2 fique mais abaixo do que o normal, temos de seleccionar o algarismo (utilizando neste caso o mtodo 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 ingls subscript),
127
e depois teclar ENTER (ou RETURN). J temos o pretendido:
Veremos, no captulo sobre as CSS, que podemos controlar a distncia do algarismo em relao linha de base do texto. O WRAP TAG coloca o texto seleccionado (ou outro obejcto) dentro do elemento fornecido:
<p>H<sub>2</sub>O</p>
Existe tambm a possibilidade de colocar o algarismo mais acima do que o normal (como em 24 ou em frmulas matemticas) recorrendo ao elemento <sup> (do ingls superscript).
5.8 Citar texto

Certos tipos de contedo necessitam que sejam colocados em destaque certas afirmaes. No nosso exemplo vamos acrescentar uma seco OPINIES DOS CLIENTES, com o seguinte contedo:
As citaes aparecem muitas vezes indentadas para o lado direito, para se realarem do resto de texto. Para assinalarmos determinado texto como uma citao, seleccionamo-lo e escolhemos a opo INSERT > HTML > TEXT OBJECTS > BLOCK QUOTE:
Em HTML utilizado o elemento <blockquote> para este efeito.
128
5.9 Dar nfase ao texto

At ao momento no estivemos preocupados com a aparncia visual do texto. Isto , no definimos tipos de letra, tamanho de letra, realce de determinado texto, etc. Isso aconteceu porque a mudana da aparncia 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 realar fortemente determinada(s) palavra(s). Por exemplo, podemos realar o nome da empresa sempre que ele ocorra no texto, de forma aos visitantes o memorizarem mais rapidamente. Seleccionamos uma ocorrncia do nome da empresa e escolhemos a opo INSERT > HTML > TEXT OBJECTS > STRONG:
Em alternativa podemos clicar no seguinte cone no PROPERTY INSPECTOR:
O resultado da aplicao do elemento <strong> e o prprio 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 realar fortemente determinada(s) palavra(s). A forma como o browser o faz da sua inteira responsabilidade, se bem que a maior parte dos browsers interpreta esse elemento dessa forma, mas nada os obriga a tal. Se o realce que pretende atribuir no for muito forte, ento pode recorrer ao elemento <em>, atravs da opo INSERT > HTML > TEXT OBJECTS > EM ou do seguinte cone no PROPERTY INSPECTOR:
O resultado, na maior parte dos browsers, a aplicao do itlico (s) palavra(s) seleccionada(s), embora isso no seja obrigatrio.
129
5.10 Dividir em seces

Desde a chegada das pginas Web que existiu a necessidade de dividir visualmente em seces o respectivo contedo. Os cabealhos permitiam essa diviso, mas muitas vezes era necessrio um elemento grfico para tornar a diviso mais visvel. Nestes casos podemos recorrer ao elemento <hr>, que em ingls significa horizontal rule. Para inserir este elemento que corresponde a uma linha horizontal que utiliza toda a largura da pgina, utilize a opo INSERT > HTML > HORIZONTAL RULE ou o cone da barra INSERT:
O resultado ser do tipo:
Ao contrrio dos elementos HTML que utilizamos at agora, o elemento <hr> possui diversas propriedades que permitem alterar a sua aparncia, 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 pxeis, enquanto a largura pode ser especificada em pxeis ou em percentagem. No caso das percentagens, referem-se
130
largura da pgina. Isto , uma largura de 50% para um elemento <hr> referese a metade da largura da pgina, seja ela qual for, em pxeis. O alinhamento, que por omisso ao centro, pode ser alterado (opo ALIGN), bem como o efeito de sombreado (opo SHADING). Ao longo dos tempos, o elemento <hr> foi sendo substitudo por imagens, algumas das quais bastante curiosas, e mais recentemente pelas molduras (borders) dos estilos CSS.
5.11 Listas
As listas so uma forma de apresentar itens relacionados de uma forma numerada ou no numerada. Permitem-nos agrupar contedo relacionado, e estruturar esse contedo de uma forma que mostre importncia, posio ou semelhana. Quando utilizado para navegao, permite agrupar hiperligaes relacionadas. O HTML disponibiliza trs tipos principais de listas: Ordered utiliza uma forma de numerao, rabe ou romana; Unordered utiliza marcas (em ingls bullets) ou cones; Definition apresenta uma palavra, seguida da respectiva definio.
Ao contrrio de uma lista de definies, as listas numeradas e no numeradas seguem a mesma estrutura. Embora a palavra inglesa ordered possa dar a ideia que existe uma ordenao dos itens da lista, na realidade os itens apenas esto numerados, no existindo uma ordem definida entre eles. Acrescentamos texto nossa seco QUALIDADE GARANTIDA de forma a criar uma lista no numerada:
131
Agora seleccionamos os itens que pretendemos colocar na lista e clicamos no cone UNORDERED LIST:
O resultado :
Uma lista no numerada recorre ao elemento <ul> (do ingls, unordered list) de HTML, bem como ao elemento <li> (do ingls list item) para identificar os itens da lista. Como as listas numeradas e no 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:
132
Se colocarmos o cursor no texto de um item da lista, aparece, no PROPERTY INSPECTOR, um novo boto, LIST ITEM:
que d acesso a uma caixa de dilogo onde podemos personalizar diversas propriedades da lista:
Por exemplo, o tipo de lista (campo LIST TYPE):
e o estilo de numerao (campo STYLE). Se estivermos a utilizar uma lista no ordenada podemos definir, neste campo, o tipo de marca utilizada:
133
Caso se trate de uma lista numerada, o estilo da numerao tem a ver com o tipo de algarismos ou letras que aparecem no incio de cada item:
Em qualquer dos casos, se mudar o estilo de numerao aparecer uma propriedade type no elemento <ul> ou <ol>:
Na caixa de dilogo LIST PROPERTIES existe tambm a possibilidade de definir, no campo START COUNT, em que nmero que comea a numerao. Finalmente, na rea LIST ITEM desta caixa de dilogo, 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 numerao romana.
5.11.1 Listas imbricadas

Nas reas tcnicas dos pontos vitais da viatura pretendemos detalhar, para cada item, os pontos que so avaliados. Por exemplo, para o habitculo:
134
Para escrevermos estes sub-itens colocamos o cursor frente do item HABITCULO 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 no tem nenhuma relao visvel com o item HABITCULO. Temos de imbricar a lista avanando-a alguns pxeis para o lado direito. Depois de seleccionar a sub-lista basta clicar no cone INDENT no PROPERTY INSPECTOR:
O resultado :
Alm de indentar a sub-lista para o lado direito, o tipo de marca (bullet) utilizado tambm diferente. No cdigo HTML, criada uma nova lista no numerada dentro de um elemento <li>.

As listas de definio so pouco utilizadas, mas so teis em algumas situaes. Por exemplo, em FAQs, isto , conjuntos de perguntas e respostas comuns. Uma lista de definio permite informar o browser que a resposta est relacionada com a pergunta. Vamos criar uma nova pgina no nosso stio Web, faq.html, com texto do tipo:
135
No PROPERTY INSPECTOR no existe nenhum cone para as listas de definies. Por isso, depois de termos seleccionado todo o texto, temos de aceder opo FORMAT > LIST > DEFINITION LIST:
O resultado as respostas ficarem indentadas em relao s perguntas:
136
O elemento <dl> (do ingls, definition list) utilizado para toda a lista de definies, o elemento <dt> (do ingls, definition term) para a palavra a definir (no nosso caso, para a pergunta) e o elemento <dd> (do ingls, definition description) para o texto da definio (no nosso caso, para a resposta). Como tnhamos uma lista no numerada no meio, o resultado no foi o ideal. Mas depois de seleccionarmos outra vez os itens da lista no numerada e clicado no cone UNORDERED LIST do PROPERTY INSPECTOR, o resultado j melhor (definimos tambm toda a lista no numerada, o pargrafo acima e o pargrafo abaixo da terceira resposta, como um nico elemento <dd> da lista de definies):
Se utilizar muitas vezes esta opo pode colocar um cone no painel INSERT ou definir um atalho de teclado. Embora o resultado no seja para j agradvel visualmente, iremos mais tarde utilizar estilos CSS para formatar a apresentao da lista.
5.12 Importar texto

Normalmente no muito comum escrever o texto directamente no Dreamweaver. Algum j ter escrito o texto necessrio no Microsoft Word, por exemplo. Neste caso, o ideal poder importar directamente o texto do Microsoft Word para o Dreamweaver. Normalmente o texto j est formatado, como no exemplo seguinte:
137
Para copiarmos o texto para o Dreamweaver, seleccionamos o texto no processador de texto, e copimo-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 resultado ser:
138
Como se pode observar, o Dreamweaver manteve a formatao existente no documento Microsoft Word so utilizados os elementos correctos de HTML, inclusive o <strong> para o negrito (bold) e o <EM> para o itlico. Isto acontece devido forma como o colar (paste) do Dreamweaver est configurado. Acedemos opo EDIT > PREFERENCES no Windows (DREAMWEAVER > PREFERENCES no Macintosh) e seleccionamos a categoria COPY/PASTE:
FORMATTING (BOLD, ITALIC).
Repare que est seleccionada a opo TEXT WITH STRUCTURE PLUS BASIC Esta opo permite importar a estrutura de um documento (ttulos, texto, etc.), mas a formatao est limitada a negritos (bold) e itlicos (italic). Se tivssemos seleccionada a opo TEXT ONLY, obteramos um texto corrido sem mudanas de linha, e sem qualquer espcie de formatao:
A opo TEXT WITH STRUCTURE (PARAGRAPHS, LISTS, TABLES, ETC.) teria, no nosso exemplo, o mesmo resultado que a opo TEXT WITH STRUCTURE PLUS

BASIC FORMATTING (BOLD, ITALIC),
139
excepto que AutoVende no apareceria a
negrito. Aparentemente a ltima opo, TEXT WITH STRUCTURE PLUS FULL FORMATTING (BOLD, ITALIC, STYLES), tambm apresenta um resultado idntico, mas se olharmos para o cdigo vemos que foram inseridos atributos class para todos os pargrafos e foram criados estilos CSS:
Nunca deve utilizar esta opo, a no ser que pretenda passar muito tempo a remover o cdigo desnecessrio que inserido! De qualquer forma, o Dreamweaver disponibiliza uma opo, COMMANDS > CLEAN UP WORD HTML, que permite limpar a maior parte destes excessos produzidos pelo Microsoft Word:
Na caixa de dilogo PREFERENCES, qualquer uma das opes, excepto a primeira, d-nos acesso a duas opes adicionais:
140
RETAIN LINE BREAKS para manter as quebras de linha. Esta opo fica desactivada caso se escolha a opo 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 espao entre dois pargrafos.
5.13 Integrao com o Microsoft Word

De forma a criar fluxos de trabalho inteligentes, a Adobe integrou o Dreamweaver 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 integrao, mas existem outros programas que tambm so contemplados, como o Microsoft Word. Esta integrao mais completa s existe na verso 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 opo FILE > IMPORT > WORD DOCUMENT:
141
Selecciona-se um ficheiro .doc e, antes de se clicar em OPEN, podemos alterar as opes de importao, que j so nossas conhecidas:
Mas ainda existe uma forma mais fcil de importar um documento Microsoft Word para o Dreamweaver. Podemos arrastar o documento .doc do painel FILES directamente para a pgina:
Aparece a caixa de dilogo:
As sub-opes da opo INSERT THE CONTENTS j so nossas conhecidas. A opo CREATE A LINK permite definir um link para o ficheiro em causa permitindo aos visitantes da pgina transferir esse ficheiro:
142
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 activada atravs da opo EDIT > FIND AND REPLACE, ou mais normalmente pela combinao de teclas CONTROL+F:
IN
Esta caixa de dilogo tem opes bastante poderosas, nomeadamente o FIND e o SEARCH. Podemos pesquisar no documento corrente, em determinadas pginas ou em todo o stio Web (campo FIND IN). A pesquisa pode ser efectuada pelo texto, pelo cdigo ou por elementos HTML especficos (campo SEARCH).
5.15 Dicionrio
Em todos os programas de processamento de texto, como o Microsoft Word, est disponvel um corrector ortogrfico. No Dreamweaver esse corrector tambm existe e est acessvel a partir da opo COMMANDS > CHECK SPELLING:
Sempre que o corrector encontrar uma palavra incorrecta ou desconhecida apresenta a caixa de dilogo CHECK SPELLING:
143
que disponibiliza vrias aces: ADD TO PERSONAL adiciona a palavra ao nosso dicionrio pessoal; IGNORE ignora a ocorrncia da palavra, isto , no 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 ocorrncias da palavra; CHANGE ALL substitui todas as ocorrncias da palavra pela que est seleccionada na lista SUGGESTIONS, ou pela palavra que insira no campo CHANGE TO; Por omisso, o corrector ortogrfico utiliza a lngua inglesa. Para alterar para lngua portuguesa aceda s preferncias (EDIT > PREFERENCES ou DREAMWEAVER > PREFERENCES no Macintosh) e altere o valor da opo SPELLING DICTIONARY:
Imagens
As imagens so um dos elementos mais importantes de uma pgina Web. Uma diferena entre as imagens e o texto, que o texto inserido e faz parte da pgina, enquanto uma imagem sempre um ficheiro externo que referenciado numa pgina Web. Isto significa que quando se insere uma imagem numa pgina, ao contrrio do Microsoft Word e de outros programas em que a imagem faz parte do ficheiro, numa pgina Web apenas se insere a referncia ao ficheiro externo que contm a imagem. Por isso ideal, em primeiro lugar, copiar (ou mover) as imagens para dentro do root folder do nosso stio Web definido no Dreamweaver e s depois utiliz-las nas pginas. 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 pgina do nosso stio Web, imagens que no se encontrem numa das pastas que pertencem ao stio Web, o Dreamweaver apresenta um aviso,
a perguntar se pretendemos copiar a imagem para o stio Web. Se responder YES (que a opo aconselhada) ter de decidir em que pasta do stio Web que pretende colocar o ficheiro:
146
Como vimos num captulo anterior, habitual possuir definida num stio Web uma pasta que armazena todas as imagens utilizadas nesse stio. No nosso stio Web exemplo essa pasta chama-se _imagens. Poder criar a pasta no painel FILES, recorrendo ao menu de contexto (boto direito do rato no Windows e CONTROL+CLIQUE no Macintosh) e opo NEW FOLDER,
Convm tambm que na gesto do site (SITE > MANAGE SITES > EDIT), seleccione 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 no se encontrem no nosso stio Web que o Dreamweaver automaticamente efectuar uma cpia da imagem para a pasta de imagens:
O ideal copiar primeiro as imagens para a pasta pr-definida e s depois as utilizar nas pginas.
6.1 Formatos de imagens

Nas pginas Web no se podem utilizar todos os formatos de imagens existentes no mercado. Os nicos formatos autorizados so: 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 pginas Web. Utiliza uma paleta de 256 cores (8 bits) extrada do modelo de 16 milhes 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 espao em disco o formato GIF recorre compresso Lempel-Ziv-Welch (LZW), uma tcnica que no degrada a qualidade visual da imagem (diz-se que o algoritmo de compresso lossless) mas que no produz ficheiros muito pequenos quando comparada com outras tcnicas disponveis Devido a problemas com as patentes do algoritmo de compresso (que s expiraram em 2003), foi entretanto criado um formato concorrente, o PNG, livre de patentes. O nmero de cores limitado torna o formato GIF inapropriado para a reproduo de fotografias ou imagens com cor contnua. Mas adequado para ima-
148
gens simples como grficos (de barras, por exemplo) ou logtipos com reas slidas de cor. O facto de se poder designar uma cor de transparncia permite a utilizao de imagens em formato GIF sobre fundos com cor. Dado que muitos logtipos no so quadrados perfeitos, assim possvel coloc-los em fundos com cor. Uma das grandes vantagens deste formato o suporte de animaes, baseadas num conjunto de imagens consecutivas, e que ainda utilizado na produo de banners (anncios). Nas animaes pode ser utilizada uma paleta diferente de cores para cada frame. Os ficheiros com imagens em formato GIF possuem normalmente a extenso .gif.
6.1.2 Formato JPEG

O formato JPEG (Joint Photographic Experts Group) o formato mais utilizado em pginas Web para imagens fotogrficas. Suporta 16 milhes de cores (24 bits) por imagem e utiliza um algoritmo de compresso parametrizvel que no garante a qualidade visual da imagem ( do tipo lossy). Isto , quando se guarda uma imagem em formato JPEG pode-se definir o grau de compresso pretendido. Quanto maior for o grau de compresso, menor ser a qualidade visual da imagem resultante. Este formato o mais adequado para imagens fotogrficas mas no nada adequado para imagens que possuam texto, linhas geomtricas ou cones. Os ficheiros com imagens em formato JPEG possuem normalmente a extenso .jpg, embora tambm possam ser utilizadas as extenses .jpeg, .jpe, .jfif e .jif. Em 2000 foi lanado um novo formato JPEG, chamado JPEG 2000, que baseado num algoritmo diferente de compresso. Utiliza como extenses .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 milhes de cores (24 bits) e um algoritmo de compresso mais eficaz que o do formato GIF, embora continue a manter a qualidade visual das imagens ( do tipo lossless). Ao contrrio do formato GIF no suporta animao. Mas o suporte de bits de transparncia foi melhorado podendo-se agora utilizar 256 cores de transparncia atravs do alpha channel.
6. IMAGENS
149
Historicamente, o suporte deste formato por parte dos browsers tem sido lento e errtico o que tem evitado a substituio do formato GIF. Por exemplo, o Internet Explorer apenas suporta correctamente transparncias PNG a partir da verso 7. Porm, as verses 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 imagens que possuam texto e linhas geomtricas. Embora possa ser utilizado para imagens fotogrficas, o maior tamanho dos ficheiros produzidos relativamente a ficheiros JPEG de alta qualidade torna negligvel a ligeira melhoria na qualidade visual das imagens. Os ficheiros com imagens em formato PNG possuem normalmente a extenso .png.
6.1.4 Formato SVG

O formato SVG (Scalable Vector Graphics), apresentado em 2001, o nico formato de representao vectorial de imagens suportado pelos browsers. Ao contrrio da representao bitmapped/raster dos outros formatos anteriores em que a imagem baseada em pxeis (o que no permite o redimensionamento sem perda de qualidade), um formato vectorial utiliza equaes matemticas para representar primitivas geomtricas como pontos, linhas, curvas e polgonos. assim possvel 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 formatao XML. Suporta imagens raster, animao (utilizando linguagem SMIL ou ECMAScript) e interactividade. Historicamente, a maior parte dos browsers possua um suporte limitado do formato SVG. Mas as verses mais recentes dos browsers (Mozilla Firefox, Apple Safari, Opera, Google Chrome) j tm esse suporte, excepto o Internet Explorer que apenas suporta o formato SVG atravs da instalao de um plugin. Apenas na verso 9 do Internet Explorer este problema ser corrigido. Para a maior parte dos web designers este formato sempre foi marginal dado que se dava preferncia ao Adobe Flash que possui praticamente todas as funcionalidades do SVG. Mas recentemente este formato voltou a surgir em fora, sobretudo pela sua associao com a norma HTML 5, e com o suporte por parte da Apple. Existem diversas aplicaes de manipulao grfica que suportam grficos SVG, nomeadamente o Adobe Illustrator, o Microsoft Visio e o Inkscape (um programa muito utilizado em Linux e que utiliza nativamente o formato SVG).
150
Os ficheiros com imagens em formato PNG possuem normalmente a extenso .svg, ou .svgz (neste caso, quando comprimidas).
6.2 Insero de imagens

No Dreamweaver existem muitas formas de inserir uma imagem numa pgina. Uma dessas opes INSERT > IMAGE:
ou o menu do cone IMAGES da barra INSERT:
Aparecer ento a caixa de dilogo SELECT IMAGE SOURCE para podermos seleccionar o ficheiro que contm a imagem que pretendemos introduzir na pgina:
6. IMAGENS
151
Repare nos tipos de ficheiros permitidos, que so os formatos bitmapped abordados anteriormente. O tipo .psd, formato nativo do Photoshop, apenas aparece nesta lista por tambm ser um produto vendido pela Adobe e existir uma grande integrao entre os dois programas. Nesta caixa de dilogo, se tiver dvidas em relao imagem que pretende seleccionar, clique em cima do ficheiro para a pr-visualizar na rea IMAGE PREVIEW , mas ter de ter activada a opo PREVIEW IMAGES. Este mtodo apenas utilizado se no tivermos um stio Web definido. Se j tivermos um stio Web definido basta arrastar para a pgina o ficheiro relativo imagem a partir do painel FILES:
Podemos tambm arrastar imagens do painel ASSETS, que um painel que mostra, entre outras coisas, todas as imagens existentes no stio Web independentemente da pasta onde se encontrem. Para aceder s imagens presentes no stio Web clique primeiro no cone IMAGES na barra de cones do lado esquerdo:
Independentemente do mtodo utilizado para inserir uma imagem, aparece sempre, por omisso, a caixa de dilogo IMAGE TAG ACCESSIBILITY ATTRIBUTES:
152
Esta caixa de dilogo possibilita a introduo de informao que ajuda os deficientes visuais a obterem informao sobre a imagem quando acederem pgina. Os leitores de ecr utilizados por este tipo de deficientes permitem ler a informao 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 contedo da pgina. tambm possvel associar imagem um texto mais descritivo. Utiliza-se para isso o campo LONG DESCRIPTION, que identifica o ficheiro que possui essa descrio mais detalhada. Caso no pretenda que esta caixa de dilogo aparea, aceda s preferncias (opo EDIT > PREFERENCES no Windows ou DREAMWEAVER > PREFERENCES no Macintosh) e na categoria ACCESSIBILITY desmarque a opo IMAGES em SHOW ATTRIBUTES WHEN INSERTING:
No aconselhvel desactivar esta opo, dado que, a nvel mundial, e mesmo em Portugal, cada vez mais vai ser obrigatria a utilizao de funcionalidades de acessibilidade nos stios Web. Como vimos anteriormente, a introduo de uma imagem numa pgina no significa que a imagem v ficar armazenada dentro da pgina. 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 obrigatrio e define o nome e a localizao da imagem relativamente pgina corrente, na estrutura de pastas do stio Web. No nosso exemplo, a imagem est armazenada na pasta _imagens. J os atributos width e height no so obrigatrios, se bem que sejam aconselhveis, e definem a largura e a altura da imagem. Finalmente, o atributo alt corresponde ao texto alternativo que j mencionamos anteriormente nas propriedades de acessibilidade. As propriedades relativas a uma imagem que esto disponveis no PROPERTY INSPECTOR so:
Os campos W e H correspondem largura e altura da imagem em pxeis O campo ALT corresponde ao campo ALTERNATE TEXT da caixa de dilogo IMAGE TAG ACCESSIBILITY ATTRIBUTES. Convm sempre atribuir uma identificao a uma imagem para que se possa controlar o seu posicionamento e aparncia 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 no temos uma imagem preparada, podemos utilizar, por razes de desenho do layout, um image placeholder que reserva espao na pgina para a imagem. Utilizamos para isso a opo INSERT > IMAGE OBJECTS > IMAGE PLACEHOLDER (ou, em alternativa a mesma opo no menu do cone IMAGES no painel INSERT):
154
que invoca a seguinte caixa de dilogo:
Embora no seja necessrio saber de antemo as dimenses da imagem (dado que depois sero substitudas pelas dimenses reais da imagem definitiva), isso importante se estivermos a definir de forma precisa o layout da pgina. Ser colocado na pgina um quadrado com as dimenses especificadas:
Quando tivermos a imagem final pronta, apagamos o image placeholder e colocamos a imagem definitiva. Ou caso tenhamos as dimenses correctas, acedemos, no PROPERTY INSPECTOR, ao campo SRC e escrevemos o nome e a localizao do ficheiro que contm a imagem definitiva (podemos tambm utilizar 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 no se misturam com o texto, isto , uma imagem aparece numa linha, enquanto o texto (cabealhos ou pargrafos) aparece noutra linha. Mas possvel colocar texto ao lado esquerdo ou ao lado direito de uma imagem. No nosso exemplo poderamos querer colocar o ttulo ao lado do logtipo. Partindo do seguinte contedo,
6. IMAGENS
155
para o fazermos basta seleccionar a imagem e escolher a opo LEFT do campo ALIGN no PROPERTY INSPECTOR:
primeira vista o resultado no bem o pretendido:
Temos de dar espao entre a imagem e o ttulo, e entre a imagem e a linha horizontal. Para resolver o segundo problema basta colocar o cursor no fim do cabealho e carregar em ENTER (ou RETURN). introduzido um pargrafo em branco,
<p> </p>
e o resultado :
156
Agora temos de afastar o cabealho da imagem. Seleccionando a imagem, introduzimos um valor, em pxeis, no campo H SPACE no PROPERTY INSPECTOR:
O nico problema que a imagem tambm afastada da margem esquerda:
Veremos mais tarde como resolver este problema recorrendo a estilos CSS. Tambm se pode afastar a imagem verticalmente dos outros elementos recorrendo ao campo V SPACE. Caso pretendesse colocar texto no meio de duas imagens, deveria, em primeiro 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 pgina Web temos necessidade de a optimizar ou alterar (redimensionar, crop, alterar cores, etc.). No Dreamweaver podemos efectuar diversas operaes com imagens:
Edit-las no prprio Dreamweaver; Optimiz-las recorrendo integrao com o Adobe Fireworks; Manipul-las num editor de imagens externo como o Adobe Photoshop.
O Dreamweaver centralizou o acesso s ferramentas grficas em duas reas distintas do PROPERTY INSPECTOR:
Nesta imagem do PROPERTY INSPECTOR, como a rea EDIT no possui os cones do Photoshop ou do Fireworks isso significa que eles no esto instalados.
6.3.1 Crop
Se apenas pretender apresentar parte de uma imagem, para focar a ateno numa determinada rea ou para reduzir o espao ocupado em disco, pode recorrer ferramenta crop. Quando clica na ferramenta CROP, depois de ter seleccionado uma imagem,
e aps o Dreamweaver avisar que a operao que vai efectuar alterar permanentemente a imagem,
158
esta aparece com uma moldura sombreada:
Coloque o cursor por cima de um dos quadrados que aparecem nos vrtices e a meio das linhas (selection handles),
clique e desloque para esconder parte da imagem. Por exemplo, para mostrarmos apenas o automvel:
Se pretender deslocar a rea de visualizao 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 operao de crop basta clicar em qualquer outra parte da pgina. Pode sempre desfazer a operao seleccionando a opo 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 vrtice inferior direito, se mantiver a tecla SHIFT pressionada enquanto arrasta, o Dreamweaver manter a largura proporcional altura. Pode tambm recorrer aos campos W e H do PROPERTY INSPECTOR para especificar de forma precisa a nova largura/altura da imagem. Caso se arrependa do redimensionamento da imagem pode voltar a colocar as medidas originais clicando no boto RESET SIZE:
160
O redimensionamento de uma imagem no afecta o ficheiro que contm a imagem, nem o respectivo tamanho. Por isso prefervel redimensionar primeiro a imagem num programa de edio de imagem e s depois utiliz-la numa pgina Web. Outro problema no redimensionamento que, se aumentar a dimenso da imagem, vai perder qualidade visual da imagem. Se diminuir a dimenso o resultado tambm no muito perfeito. Estes problemas s no existem se o formato da imagem for SVG. O ideal efectuar o resampling da imagem, que um processo que adiciona ou subtrai pxeis de uma imagem quando esta redimensionada. Mas mesmo assim, o resultado no perfeito sobretudo quando se aumentam as dimenses da imagem. Para o fazer no Dreamweaver, em primeiro lugar redimensione a imagem. Em seguida clique no boto RESAMPLE no PROPERTY INSPECTOR:
Aparece o habitual alerta a informar que a operao vai alterar de forma definitiva a imagem (ao contrrio do que acontece com o redimensionamento). Clique em Ok para confirmar a operao.
6.3.3 Luminosidade e contraste

Para alterar a luminosidade e/ou o contraste de uma imagem, seleccione-a e depois clique no boto BRIGHTNESS AND CONTRAST no PROPERTY INSPECTOR:
Aps o alerta a informar que a operao vai alterar de forma definitiva a imagem, aparece uma caixa de dilogo que permite efectuar as alteraes:
6. IMAGENS
161
Com a opo PREVIEW activada pode ir verificando as alteraes na imagem medida que mexe nos controlos BRIGHTNESS e CONTRAST.
6.3.4 Melhorar a definio

Pode melhorar o contraste de pxeis relacionados parecendo assim que melhora a nitidez e a definio da imagem. Para isso utiliza-se o boto SHARPEN existente no PROPERTY INSPECTOR, depois de seleccionada a imagem:
A caixa de dilogo que aparece (aps o alerta a informar que a operao vai alterar de forma definitiva a imagem):
Mais uma vez, com a opo PREVIEW activada, pode ir verificando as alteraes na imagem medida que mexe no controlo SHARPEN.
6.3.5 Optimizar imagens

Nem todas as imagens esto preparadas para serem utilizadas numa pgina Web. Algumas imagens fotogrficas, bem como imagens destinadas a serem impressas em papel, tm de ser optimizadas para a Web. Nomeadamente, necessrio estabelecer um equilbrio 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 pgina e depois clicar no cone EDIT IMAGE SETTINGS do PROPERTY INSPECTOR:
162
A caixa de dilogo que aparece permite efectuar diversas operaes, inclusive converter a imagem para outro formato (opo FORMAT):
Se se tratar de uma imagem em formato JPEG pode, por exemplo, alterar a qualidade de compresso. No caso de uma imagem GIF pode alterar a paleta de cores, a cor de transparncia e as propriedades das animaes. Neste exemplo, reduzimos, na imagem de baixo, a qualidade do JPEG para 22, e podem-se ver nitidamente as diferenas de qualidade. No separador FILE pode redimensionar a imagem, utilizando um valor percentual ou dimenses em pxeis, bem como efectuar o crop utilizando o cursor ou introduzindo coordenadas (opo EXPORT AREA):
Esta caixa de dilogo permite tambm optimizar uma imagem de forma ao seu tamanho final ser igual a um valor definido pelo web designer:
6. IMAGENS
163
Na caixa de dilogo 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 edio e manipulao de imagens, no um editor grfico. Mas pode-se configurar o Dreamweaver para interagir com o seu editor grfico favorito. Como bvio, o Dreamweaver possui uma integrao especial com os editores de imagem da Adobe, nomeadamente o Adobe Fireworks e o Adobe Photoshop. Quando o Dreamweaver CS5 instalado tenta verificar a existncia de programas de edio de imagens no computador, de forma a configurar a respectiva integrao. Para definir o editor que se pretende utilizar com cada formato de imagem utiliza-se a categoria FILE TYPES/EDITORS das preferncias (EDIT > PREFERENCES no Windows e DREAMWEAVER > PREFERENCES no Macintosh):
164
Neste caso pode verificar que o editor primrio 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 boto EDIT,
a imagem em causa ser aberta no Corel Paint Shop Pro Photo. Caso o PhotoShop fosse o editor primrio o cone seria diferente:
Caso no possua nenhum editor grfico instalado obter a seguinte mensagem de erro:
E ao clicar em OK ser apresentada a caixa de dilogo PREFERENCES com a categoria FILE TYPES / EDITORS aberta. Pode alterar nas preferncias o editor grfico primrio para um determinado formato de imagem, seleccionando-o da lista EDITORS e clicando no boto MAKE PRIMARY.
Dica
possvel acrescentar outros programas lista clicando no boto + que se encontra logo acima da lista EDITORS, e depois na caixa de dilogo SELECT EXTERNAL EDITOR seleccionar o ficheiro executvel (em Windows tem a extenso .exe) relativo ao programa pretendido. Depois de ter efectuado as alteraes imagem no editor grfico, basta guardar e fechar o programa que as alteraes j estaro visveis na pgina Web. Caso pretenda editar uma imagem com um programa distinto do que est predefinido, seleccione a imagem, aceda ao menu de contexto (utilizando o boto direito do rato) e depois seleccione o programa pretendido do sub-menu EDIT WITH:
6. IMAGENS
165
No caso dos editores grficos da Adobe e como existe uma interligao 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 cpia 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 boto DONE:
As alteraes efectuadas imagem sero automaticamente repercutidas na imagem existente na pgina do Dreamweaver.
166
6.3.7 Integrao com o Photoshop

O Dreamweaver permite a insero directa de ficheiros PSD (formato nativo de ficheiros do Photoshop) em pginas Web. Mas, como o formato PSD no suportado em pginas Web, automaticamente apresentada uma caixa de dilogo sempre que isso acontecer:
Poder agora escolher o formato para converso da imagem e optimiz-la para a Web. Por exemplo, no caso de seleccionar o formato JPEG poder escolher o nvel de compresso. Depois de ter efectuado todas as optimizaes necessrias, ao clicar no boto OK aparecer outra caixa de dilogo para que possa guardar no seu stio Web a imagem convertida e optimizada:
6. IMAGENS
167
O Dreamweaver mantm a relao entre a imagem original PSD e a nova imagem compatvel Web. Pode verificar essa relao seleccionando a imagem convertida na pgina Web e verificando o contedo do campo ORIGINAL no PROPERTY INSPECTOR:
Repare tambm que a imagem aparece identificada, no PROPERTY INSPECTOR, no canto superior esquerdo, como uma PS IMAGE. Alm disto, a imagem aparece tambm com um cone especfico no canto superior esquerdo a informar que o original e a nova imagem so idnticos (repare que as duas setas esto verdes):
Pode tambm utilizar um procedimento semelhante para copiar partes de uma imagem no Photoshop e col-las numa pgina Dreamweaver. Tambm sero invocadas as caixas de dilogo IMAGE PREVIEW e SAVE WEB IMAGE. Para alterar a imagem original PSD no Photoshop (se ainda estiver localizada na pasta original) e repercutir as alteraes na imagem convertida, seleccione a imagem no Dreamweaver e clique no boto 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 boto direito do rato em cima de uma imagem, dever ter reparado que aparece uma opo EDIT ORIGINAL W ITH, que tambm permite editar a imagem original no PhotoShop:
168
Efectue as alteraes necessrias no Photoshop, e guarde a imagem. Repare que est a efectuar alteraes imagem com a extenso .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 alterada, alm de que agora uma seta est verde e a outra est vermelha:
Para repercutir as alteraes na imagem existente na pgina, ter de clicar no cone UPDATE FROM ORIGINAL, que entretanto ficou activo no PROPERTY INSPECTOR:
Hiperligaes
As hiperligaes (conhecidas por hyperlinks, ou abreviando, links) so a razo da existncia da Web dado que so elas que permitem interligar pginas. Sem hiperligaes para aceder a uma determinada pgina teramos sempre de saber de memria o endereo dessa pgina e escrev-lo na barra de endereos. Em HTML um link representado pelo elemento <a> (que significa anchor) e pela propriedade href. Por exemplo:
<a href="http://www.centroatlantico.pt">Centro Atlntico</a>
7.1 Tipos de links

Os links numa pgina HTML no so todos iguais na definio das pginas s quais possibilitam aceder. Podemos dividir os links em trs categorias: Link absoluto (absolute link) contm o caminho completo para um dado recurso incluindo o protocolo (normalmente, http). So utilizados normalmente para aceder a pginas que no esto no stio Web corrente, isto , que se encontram em outros stios Web. Relativo ao documento (document relative) interno ao stio Web, define o caminho da pgina corrente para a pgina destino. Utiliza-se o / para separar o nome das pastas e ../ para subir um nvel. So os tipos de links mais utilizados. Relativo raiz do site (site-root relative) interno ao stio Web, semelhante ao document relative, mas o caminho comea sempre no root folder, o que significa que comea sempre por /. Um dos problemas destes links que tm de ser testados com um servidor Web. Para explicar melhor cada um destes tipos de links, vamos utilizar a estrutura do stio Web que estamos a criar:
170
root root
_css _css
_imagens _imagens
info info
stock stock
...
index.html
quemsomos.html
destaques.html
faq.html
Como primeiro exemplo, vamos supor que estamos a editar a pgina index. html e que pretendemos inserir um link para a pgina quemsomos.html, que se encontra na pasta info: Link relativo ao documento: info/quemsomos.html Link relativo raiz do stio Web: /info/quemsomos.html Neste caso a nica diferena o / no incio do endereo. Suponhamos agora que pretendemos fazer o inverso, isto , estamos a editar a pgina quemsomos.html e pretendemos inserir um link para a pgina index.html: Link relativo ao documento: ../index.html Link relativo raiz do stio Web: /index.html Finalmente, estamos a editar a pgina quemsomos.html e pretendemos inserir um link para a pgina destaques.html existente na pasta stock: Link relativo ao documento: ../stock/destaques.html Link relativo raiz do stio Web: /stock/destaques.html
7. HIPERLIGAES
171
Na maior parte das vezes quando criamos um link numa pgina 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 ns queremos. Acedemos janela de gesto do site corrente, utilizando a opo SITE > MANAGE SITES ou efectuando um duplo-clique no nome do stio Web corrente no painel FILES. Na categoria ADVANCED SETTINGS > LOCAL INFO temos duas opes disponveis na rea LINKS RELATIVE TO:
Por omisso, a opo activada DOCUMENT.
7.2 Criar links

Para criar um link necessrio em primeiro lugar seleccionar o objecto ao qual se vai aplicar. Esse objecto pode ser texto (o mais habitual), uma imagem ou um elemento multimdia. Por exemplo, podemos criar, na nossa pgina principal, uma lista de links para as outras pginas do stio Web:
Selecciona-se o texto recorrendo tcnica do arrastar-e-largar ou utilizando o TAG SELECTOR. Quando seleccionar texto para criar um link, evite seleccionar os espaos existentes no fim e no incio de palavras bem como sinais de pontuao. Depois do texto seleccionado introduzimos a pgina destino no campo LINK do PROPERTY INSPECTOR:
172
O texto seleccionado aparecer agora sublinhado e azul, que a aparncia definida na norma HTML para os links:
Cuidado com o que escreve no campo LINK. No se engane, seno o link no funciona. Caso a pgina destino no se encontre na mesma pasta da pgina corrente ter de escrever o nome da pasta. Tenha em ateno que podemos escrever o nome de uma pgina mesmo que esta ainda no exista. o que acontece no nosso exemplo com a pgina destaques.html para a qual apontar o link DESTAQUES. Caso no venhamos a criar essa pgina, o link no funcionar no browser, como bvio. Pode recorrer aos cones BROWSE FOR FILE e POINT TO FILE para seleccionar uma pgina do site corrente. Para utilizar a ferramenta POINT TO FILE, clique e arraste o cone apontando para o ficheiro destino no painel FILES:
7. HIPERLIGAES
173
Convm que o painel FILES esteja visvel. Neste painel, se uma pasta no 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 ferramenta POINT TO FILE. J o cone BROWSE FOR FILE d acesso a uma caixa de dilogo tipo de seleco de ficheiros, mas esta possui algumas opes adicionais:
Repare no boto SITE ROOT no topo que permite saltar directamente para a raiz do stio 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 tambm criar um link de texto recorrendo opo INSERT > HYPERLINK,
ou ao cone HYPERLINK da categoria COMMON da barra INSERT:
174
Nestes casos, a caixa de dilogo que aparece possui as propriedades que aparecem no PROPERTY INSPECTOR para um link, mais algumas que no aparecem l:
Alm do texto que estava seleccionado, e que podemos alterar no campo TEXT, existem diversas propriedades de que falaremos mais abaixo e que esto disponveis no PROPERTY INSPECTOR. Apenas as duas ltimas opes, que so opes de acessibilidade, ACCESS KEY e TAB INDEX, no esto disponveis no PROPERTY INSPECTOR. A primeira permite definir uma combinao de teclas para activar o link utilizando o teclado, enquanto a segunda opo permite definir a ordem de seleco 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 stio Web:
A mudana da pgina destino de um link de texto faz-se colocando o cursor no meio do texto do link, no sendo necessrio seleccionar todo o texto do link. Para remover o link basta apagar o contedo do campo LINK no PROPERTY INSPECTOR. Ou recorrer ao menu de contexto do link, seleccionando a opo REMOVE LINK.
7. HIPERLIGAES
175
7.2.1 Links para pginas externas ao site

Caso pretenda criar um link que aponte para uma pgina externa, isto , para outro stio Web, ter de escrever um URL, isto , um endereo completo do tipo http://www.centroatlantico.pt/. O protocolo http (ou https) obrigatrio, dado que se se esquecer de o especificar o link no funcionar. Se o endereo da pgina destino for muito grande, o ideal aceder pgina destino utilizando um browser e depois copiar o endereo da barra ADDRESS [ENDEREO]. Desta forma evitar enganos na transcrio do endereo. 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

Aps um link ter sido criado, podemos definir os valores para as diversas propriedades que esto acessveis 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 pginas em janelas ou separadores do browser

Por omisso, sempre que cria um link numa pgina Web isso significa que, quando o utilizador clicar nesse link a pgina destino ser aberta, no browser, em substituio da pgina corrente. Pode querer que a pgina destino abra numa janela ou separador/aba distinta do browser para que o utilizador no perca visualmente a pgina original. Isto acontece muitas vezes quando se permite abrir, atravs de um link, uma pgina pertencente a outro stio Web.
176
Vamos exemplificar acrescentando na pgina principal um link para a pgina da revista Turbo (http://turbo.sapo.pt/). Podemos posteriormente criar uma pgina com links para pginas de outros stios Web que disponibilizam informao sobre automveis. Seleccionando o texto Revista Turbo, escolhemos agora a opo _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 pgina principal desse stio Web:
Os outros valores disponveis no campo TARGET do PROPERTY INSPECTOR destinam-se utilizao de pginas que sejam construdas com frames.
7.3.2 Outras propriedades dos links

Caso pretenda atribuir um valor s propriedades ACCESS KEY e TAB INDEX, tal no possvel atravs do PROPERTY INSPECTOR. Mas poder recorrer opo MODIFY > EDIT TAG:
7. HIPERLIGAES
177
A caixa de dilogo TAG EDITOR est disponvel para qualquer elemento da pgina, mas necessrio que o elemento seja seleccionado no TAG SELECTOR:
7.4 Links em imagens

Para associar um link a uma imagem o procedimento idntico ao descrito anteriormente para links de texto. No nosso stio Web vamos utilizar um procedimento habitual nos stios Web, que associar ao logtipo um link para a pgina principal do stio Web. Basta clicar na imagem para a seleccionar e depois, utilizando qualquer um dos mtodos mencionados, definir um link para a pgina index.html. Aqui o ideal seria recorrer a um link relativo raiz do stio Web, isto , /index.html:
Mas neste caso era necessrio testar a pgina recorrendo a um servidor Web, por isso o melhor utilizar mesmo um link relativo ao documento: index.html ou ../index.html se estivssemos numa pasta do stio Web.
178
O ideal colocar esta imagem num template utilizado para todas as pginas. Evitamos assim ter de inserir o link e a imagem em todas as pginas 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 pgina HTML. Pode apontar para um ficheiro (que pode ser um PDF, um vdeo, um documento Word, etc.) ou mesmo para uma imagem. A regra , se o ficheiro pode ser visualizado numa pgina Web, ento pode-se definir um link para esse ficheiro. Mas para ser visualizado no browser pode ser necessrio instalar um plug-in ou um visualizador especfico, como acontece com os ficheiros PDF em que necessrio ter instalado o Adobe Reader. Se o programa de visualizao no estiver instalado ento aparece a caixa de dilogo de transferncia de ficheiro (download).
7. HIPERLIGAES
179
Caso se trate de ficheiros com uma dimenso considervel, aconselhvel 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 no 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 pgina http://www.adobe.com/products/acrobat/readstep2.html que permite ao visitante transferir o Adobe Acrobat Reader.
7.6 Outro tipo de links

Existe um tipo de links especial que hoje em dia muito pouco utilizado em pginas Web. Trata-se do EMAIL LINK, que abre o programa de e-mail por omisso 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 no 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 dilogo de configurao do Outlook Express ou do Outlook e a maior parte das pessoas ficar confusa. Se mesmo assim pretender utilizar este tipo de link, seleccione o texto e depois a opo INSERT > EMAIL LINK, ou utilize o cone EMAIL LINK da categoria COMMON da barra INSERT:
Em seguida, na caixa de dilogo EMAIL LINK, introduza o endereo destino:
180
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 possvel configurar o EMAIL LINK para preencher outros campos de uma mensagem de e-mail (incluindo o contedo) mas tem-se de editar o cdigo HTML:
<p>Contacte-nos atravs do endereo <a href="mailto:geral@autovende.com?subject=Pedido de Informao">geral@autovende.com</a>
Neste caso, o campo ASSUNTO apareceria automaticamente preenchido:
No nosso exemplo, para que o utilizador que no 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 dilogo de configurao do programa de e-mail, poder sempre clicar no boto CANCEL e depois copiar o endereo de e-mail para o utilizar no seu stio de webmail para criar uma nova mensagem. Ao longo dos anos estes links de e-mail foram sendo substitudos por formulrios de contacto.
7. HIPERLIGAES
181
7.7 Links internos a uma pgina

tambm possvel definir links que permitem aceder a reas da prpria pgina. Esta funcionalidade pode ser utilizada, por exemplo, para ter um ndice das vrias seces do texto no topo da pgina. Tambm muito utilizada em listas de FAQ (Frequently Asked Questions Perguntas Frequentes), quando estas esto agrupadas por seces. A sua utilizao fundamental em pginas com contedos extensos evitando assim que o visitante tenha de fazer o scroll da pgina para localizar a rea pretendida. Estes links tm o nome de named anchors e a sua utilizao 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 pgina quemsomos.html vamos criar uma lista, no topo da pgina, com a identificao das seces existentes na pgina, separada do resto da pgina por uma horizontal rule:
Agora, para cada seco 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 ttulo da primeira seco:
182
Muitas vezes coloca-se a named anchor na linha anterior a um cabealho (se for uma linha em branco) para que aparea algum espao antes do cabealho quando se clica no link que lhe d acesso. Em seguida utilizamos a opo INSERT > NAMED ANCHOR, ou o cone NAMED ANCHOR da barra INSERT:
Aparecer uma caixa de dilogo onde temos de atribuir um nome NAMED ANCHOR:
Convm que os nomes atribudos sejam curtos, fceis de memorizar, escritos em minsculas, no comecem por um algarismo, no possuam espaos, caracteres acentuados, c cedilhados e caracteres de pontuao. O normal atribuir o mesmo texto que o cabealho, sem utilizar espaos, ou substituindo-os por _, mas evitando grandes nomes. Poder ver que o Dreamweaver colocou um cone com o smbolo de uma ncora atrs do ttulo da seco:
7.7.2 Elementos invisveis

Os named anchors no possuem normalmente contedo, por isso so invisveis ao visitante. O Dreamweaver coloca um cone com uma ncora para permitir ao web designer localizar esses elementos na pgina. Pode parecer que os cones das named anchors do cabo do layout, mas no browser esses cones no so visveis. Se no pretender visualizar estes elementos escondidos, retire a seleco da opo VISUAL AIDS > INVISIBLE ELEMENTS na DOCUMENT TOOLBAR:
7. HIPERLIGAES
183
Esconder assim todos os elementos invisveis. Se pretender apenas esconder determinados elementos invisveis, como as named anchors, aceda opo EDIT > PREFERENCES > INVISIBLE ELEMENTS (DREAMWEAVER > PREFERENCES > INVISIBLE ELEMENTS no Macintosh):
As named anchors so as primeiras da lista. Caso pretenda alterar o nome da NAMED ANCHOR, clique no respectivo cone e altere o nome no PROPERTY INSPECTOR:
184
Para apag-la, basta seleccionar o cone e carregar em DELETE ou BACKSPACE. Se aceder ao cdigo 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 tambm 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 pgina,
e depois escrever, no campo LINK do PROPERTY INSPECTOR, o nome da NAMED ANCHOR associada, precedido do smbolo #. Mais fcil ser utilizar o cone POINT TO FILE do PROPERTY INSPECTOR para apontar para o cone da NAMED ANCHOR que pretendemos utilizar:
7. HIPERLIGAES
185
Caso o cone da NAMED ANCHOR no esteja visvel, 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 fcil do que estar a fazer o scroll com a mira. Em alternativa, podemos recorrer opo INSERT > HYPERLINK, que nos mostra a caixa de dilogo 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 pgina. Agora, quando visualizar a pgina e clicar num link do ndice, saltar imediatamente para a seco respectiva. Caso pretenda criar um link do tipo VOLTAR AO TOPO para colocar no fim da cada notcia, basta definir uma NAMED ANCHOR no topo da pgina e depois associar um link ao texto VOLTAR AO TOPO que referencie essa NAMED ANCHOR:
Em alternativa, no utilize nenhuma NAMED ANCHOR colocando apenas # no campo LINK. Basta criar um link VOLTAR AO TOPO e depois copi-lo para outros locais da pgina. Repare que alinhamos este link ao lado direito, como habitual nas pginas Web.
186
7.7.4 Named anchors externas

Existe a possibilidade de criarmos um LINK para uma named anchor existente em outra pgina. No nosso exemplo vamos criar uma lista de links debaixo do link QUEM SOMOS na pgina principal, index.html:
As named anchors encontram-se na pgina quemsomos.html. Se soubermos os nomes das named anchors podemos criar os links na pgina index.html. Mas podemos colocar as pginas lado-a-lado, abrindo-as na rea de documento e seleccionando a opo W INDOW > TILE VERTICALLY:
Agora mais fcil 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 pgina index.html.
7. HIPERLIGAES
187
Os links para named anchors em outras pginas so do tipo:

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

muito comum na Internet encontrar pginas que possuem imagens com determinadas reas que, quando clicadas, permitem aceder a outras pginas. 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 so conhecidas por hotspots. No nosso stio Web vamos utilizar a imagem de um automvel para, na rea QUALIDADE GARANTIDA da pgina quemsomos.html, identificar os pontos vitais da viatura que so analisados. Em primeiro lugar inserimos uma imagem na pgina:
Pretendemos agora atribuir reas sensveis que nos permitam identificar os pontos vitais. Para o fazermos, e com a imagem seleccionada, dispomos de trs ferramentas que se encontram no canto inferior esquerdo do PROPERTY INSPECTOR:
188
Estas ferramentas, RECTANGULAR, OVAL e POLYGON permitem desenhar figuras geomtricas para definir as reas sensveis. Basta seleccionar uma delas e depois desenhar o polgono 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 sensvel pretendemos aceder NAMED ANCHOR chamada MOTOR que se encontra na pgina pontosvitais.html. Podemos utilizar qualquer link a apontar para uma seco da pgina corrente, para outra pgina do stio Web ou para outro stio Web. Dado que quando se criou a rea sensvel o Dreamweaver nos pediu para descrever a imagem,
escrevemos MOTOR no campo ALT.
7. HIPERLIGAES
189
Se, por acaso, a rea no ficou muito bem desenhada, seleccione a ferramenta POINTER,
e arraste os vrtices do rectngulo para o redimensionar. Pode ainda deslocar o rectngulo arrastando pelo seu interior. A ferramenta CIRCLE tambm fcil de utilizar. Basta clicar e arrastar para desenhar um crculo:
Finalmente, a ferramenta POLYGON, que permite definir uma rea correspondente a um polgono irregular. Ao contrrio das ferramentas RECTANGULAR e CIRCLE em que se clica e arrasta para desenhar a rea sensvel, com a ferramenta POLYGON necessrio ir clicando sucessivamente nos locais que sero os vrtices do polgono:
190
Se visualizar a pgina num browser ver o cursor transformar-se numa mo com o indicador a apontar, sempre que passar por cima de uma rea sensvel, o que significa que existe nessa rea um link:
Se pretender eliminar uma rea sensvel, seleccione-a com a ferramenta POINTER, e depois tecle DELETE ou BACKSPACE.
Tabelas
As tabelas tm como funo, numa pgina Web, apresentar dados em formato tabular ao visitante. Existem vrias ocasies em que aconselhvel a utilizao de uma tabela para apresentar os dados neste formato. No nosso exemplo, associada a cada automvel disponvel no site, existe diversa informao como marca, modelo, cor, cilindrada, etc. Esta informao perfeita para ser colocada numa tabela. Vamos criar uma nova pgina, destaques.html, na pasta stock, que vai conter trs viaturas em destaque. Colocamos primeiro as imagens na pgina:
Para criar uma tabela com os dados para cada viatura podemos: Criar uma tabela e inserir os dados nas clulas apropriadas; Importar a tabela de um programa como o Excel ou de um ficheiro de texto.
192
8.1 Criar uma tabela

Para se inserir uma tabela numa pgina utiliza-se a opo INSERT > TABLE ou o cone TABLE da categoria COMMON do painel INSERT:
Em qualquer dos casos, aparece uma caixa de dilogo, que permite personalizar a tabela a inserir:
Em primeiro lugar temos de definir o nmero 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 pxeis ou em percentagem, sendo a percentagem relativa ao elemento parente, que pode ser a largura da pgina ou a largura de um elemento em que a tabela est inserida, como um elemento <div>. Se no especificar a largura, ento o contedo da tabela determina a largura desta. Vamos definir para a nossa tabela uma largura de 300 pxeis. O campo BORDER THICKNESS tem a ver com a largura da moldura volta da tabela. Se for 0 no aparece moldura, e um valor superior cria no s a moldura como linhas separadoras entre colunas e entre linhas. Vamos manter o valor 1, que apresentado por omisso.
8. TABELAS
193
CELL PADDING o espao, em pxeis, entre o contedo de uma clula e a respectiva moldura. Utilizamos como valor, 5px, para as clulas no ficarem com o contedo muito junto dos respectivos limites. CELL SPACING a distncia entre duas clulas adjacentes. Se for 0, no existir nenhum espao 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 clulas numa linha, isto , define cabealhos para as colunas e/ou linhas, sendo estes apresentados centrados na clula e a negrito. No obrigatria a sua existncia. No nosso exemplo os cabealhos vo existir na primeira coluna, por isso vamos utilizar a opo LEFT. Na parte de baixo da caixa de dilogo existem dois campos para funcionalidades de acessibilidade. A CAPTION a legenda da tabela, enquanto o SUMMARY uma descrio do contedo da tabela mas que no aparece visvel ao visitante. No nosso exemplo, no 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 dilogo TABLE pode ser mais tarde alterado atravs do PROPERTY INSPECTOR. O resultado :
194
Depois da tabela estar criada e se pretender movimentar-se nas clulas utilizando o teclado, pode teclar TAB para mover para a clula seguinte e SHIFT+TAB para andar para a clula anterior. Estas teclas tambm funcionam entre linhas, isto , se estiver na ltima clula de uma linha e teclar TAB, avanar para a primeira clula da linha seguinte. Mesmo que no defina uma moldura para a tabela, isto , se o valor do atributo border for igual a 0, o Dreamweaver apresenta umas linhas pontilhadas que permitem visualmente ver os limites das clulas:
Neste captulo no nos preocupamos com o aspecto visual da pgina e nomeadamente com colocar a tabela ao lado direito da imagem.
8.2 Estrutura de uma tabela

Em HTML, o cdigo 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>Potncia:</th> <td>143 CV (1.995 cm3)</td> </tr> <tr> <th>Primeiro registo:</th> <td>Dezembro 2009</td> </tr> <tr> <th>Quilmetros:</th> <td>7.000 Km</td> </tr> <tr>
8. TABELAS
195
<th>Combustvel:</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 ingls table row). Cada clula de dados um elemento <td> (do ingls table data) e cada cabealho um elemento <th> (do ingls table header). O que reala dos elementos utilizados para definir a estrutura base de uma tabela que no existe nenhum elemento para representar colunas. Existe no entanto um elemento que agrupa clulas em colunas, o <colgroup> e um atributo scope="col" associado a clulas (<th> ou <td>). Como bvio, as propriedades da tabela so representadas por atributos do elemento <table>. possvel existirem clulas vazias numa tabela. Na realidade as clulas no esto vazias, contm o carcter especial (Non-Breaking Space, que um espao):
Isto acontece porque muitos browsers obrigam a que uma clula tenha de possuir contedo seno no mostrada (nem sequer os respectivos limites). Ao introduzir-se contedo na clula vazia o apagado.
8.3 Alterar uma tabela

Depois de termos criado uma tabela podemos fazer-lhe alteraes: inserir novas linhas ou colunas, eliminar linhas ou colunas, alterar a largura, etc. Algumas destas operaes so efectuadas a partir do PROPERTY INSPECTOR, outras atravs de opes do menu ou de atalhos de teclado.
196
A maior parte das opes disponveis na caixa de dilogo TABLE, que apareceu quando criamos a nossa tabela, esto disponveis a partir do PROPERTY INSPECTOR quando a tabela est seleccionada. As nicas duas propriedades que no esto disponveis no PROPERTY INSPECTOR so a CAPTION e o SUMMARY.
8.3.1 Seleccionar uma tabela

Uma forma rpida de seleccionar uma tabela, para se poder alterar as respectivas propriedades, colocar o cursor em qualquer clula e depois clicar no elemento <table> no TAG SELECTOR:
Pode tambm seleccion-la acedendo opo TABLE > SELECT TABLE do respectivo menu de contexto (boto 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 (tambm pode aparecer em baixo) a indicao das larguras da tabela e das respectivas colunas:
Como no definimos nenhuma largura para as colunas, os valores utilizados no aparecem visveis, sendo a largura de cada coluna determinada automaticamente pelo browser dependendo do contedo de cada clula e coluna.
8. TABELAS
197
Dica
Se no gosta que aparea esta informao sobre as larguras, pode desactiv-la atravs da opo TABLE > TABLE WIDTHS do menu de contexto que aparece quando clica com o boto direito do rato (ou CTRL+CLIQUE no Macintosh) numa clula 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 operaes:
Pode-se agora verificar, no PROPERTY INSPECTOR (separador HTML), as propriedades disponveis:
A maior parte das propriedades j foram mencionadas anteriormente. A propriedade ALIGN permite definir o alinhamento da tabela relativamente ao elemento no qual est contida. A propriedade CLASS serve para aplicar um estilo CSS, que veremos num captulo posterior. Existem 4 cones no campo inferior esquerdo que nos permitem alterar as larguras das colunas, linhas e tabela:
198
CLEAR COLUMN WIDTHS permite limpar as larguras atribudas s colunas pelo web designer. CLEAR ROW HEIGHTS permite limpar as alturas atribudas s linhas pelo web designer. CONVERT TABLE WIDTHS TO PIXELS converte a largura da tabela, de percentagem para pxeis. O valor utilizado em pxeis corresponde largura corrente da janela de documento do Dreamweaver. CONVERT TABLE WIDTHS TO PERCENT converte a largura da tabela, de pxeis para percentagem. O valor utilizado em percentagem corresponde relao 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 identificao da viatura aparecer no topo da tabela como um cabealho de nvel 2. Vamos ento apagar primeiro as duas primeiras linhas da tabela. Para seleccionar uma linha basta colocar o cursor numa das clulas que pertena linha em causa e clicar no elemento <tr> no TAG SELECTOR:
Mas para seleccionar duas linhas j no podemos recorrer a este mtodo. 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 seleccionadas:
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 opo TABLE > DELETE ROW do menu de contexto (boto 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 cabealho de nvel 2 a marca e o modelo da viatura em destaque:
Pretende-se agora inserir uma linha no fim da tabela. Uma das hipteses para o fazer colocar o cursor numa das clulas da ltima linha da tabela e depois escolher a opo INSERT > TABLE OBJECTS > INSERT ROW BELOW. Mas mais fcil colocar o cursor no fim do contedo da ltima clula da ltima linha,
e depois teclar TAB. Pode continuar a teclar TAB para ir criando mais linhas. Basta agora introduzir os valores das novas clulas:
200
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 clula da tabela e se clica com o boto direito do rato (CONTROL+clique no Macintosh), possui opes ligeiramente diferentes:
8. TABELAS
201
A opo INSERT ROW insere uma linha antes da linha corrente. Uma opo prtica a INSERT ROWS OR COLUMNS que permite definir o nmero de linhas/colunas que pretendemos inserir e se so inseridas antes ou depois da linha/coluna corrente:

Acrescentamos mais uma linha nossa tabela e introduzimos a seguinte informao:
Repare que o cabealho Equipamento: encontra-se centrado verticalmente na respectiva clula. Este o comportamento por omisso de qualquer contedo de uma clula de uma tabela HTML. Se no gostar deste alinhamento vertical pode recorrer ao atributo valign da clula cujo valor pode ser alterado no campo VERT do PROPERTY INSPECTOR:
Por exemplo, se seleccionar o valor TOP o resultado :
202
Em cdigo:
<tr> <th valign="top">Equipamento:</th> <td><p>Bancos desportivos</p> <p>Bluetooth Kit mos livres</p> <p>Computador de bordo</p> <p>Faris Xnon</p> <p>Jantes em liga leve</p> <p>Retrovisores elctricos</p></td> </tr>
O valor utilizado por omisso o middle. O valor baseline, quando aplicado, faz com que todas as clulas na mesma linha cujo atributo valign possua esse valor, tenham o respectivo contedo posicionado de forma que o texto da primeira clula ocorra numa linha imaginria (baseline) comum a todas as clulas da linha. Mais uma vez, aconselhvel definir esta alterao visual recorrendo a estilos CSS.
8.3.6 No wrap
Neste momento a nossa tabela possui 300 pxeis de largura e para j todo o contedo das clulas no necessita de mais espao. Mas se mudarmos um dos equipamentos para,
8. TABELAS
203
ento o Dreamweaver (e posteriormente o browser) tm necessidade de mudar de linha para que a identificao do equipamento fique dentro dos limites da clulas. Caso no pretenda este resultado, mas sim, que a descrio fique toda numa nica linha, ento temos de recorrer ao atributo nowrap, seleccionando para isso a clula em causa, e clicando na opo NO WRAP no PROPERTY INSPECTOR:
Resultado:
Isto , o Dreamweaver automaticamente aumentou a largura da tabela e, em consequncia, a largura da clula (ou mais correctamente, de todas as clulas que pertencem coluna onde a clula est inserida), de forma a evitar uma mudana de linha no contedo da clula. O mais curioso que a largura oficial da tabela manteve-se em 300 pxeis, mas o Dreamweaver indica a largura real da tabela nas indicaes de largura no topo da tabela:
E repare que o Dreamweaver indica com um tracejado a largura a mais necessria para acomodar a alterao:
204
8.3.7 Fundir e dividir clulas

Em alguns casos necessrio efectuar a fuso de clulas, isto , juntar duas ou mais clulas numa nica clula. Por exemplo, uma tabela do tipo:
Vamos partir da seguinte tabela base:
Em primeiro lugar vamos fazer com que Funcionalidade ocupe as duas primeiras clulas da primeira coluna. Depois de seleccionadas as clulas, com o clicar e arrastar,
clica-se no cone MERGE no PROPERTY INSPECTOR ou selecciona-se a opo TABLE > MERGE CELLS no menu de contexto, ou a opo MODIFY > TABLE > MERGE CELLS:
8. TABELAS
205
Resultado:
Fazemos agora o mesmo procedimento para as 5 clulas que vo conter a identificao Windows e as 3 clulas que vo conter a identificao Macintosh:
Podemos transformar as clulas em cabealhos e centrar o contedo na clula, e ajustar as larguras das colunas, para obtermos o resultado pretendido. Em HTML este efeito de fuso de clulas conseguido recorrendo aos atributos colspan (para fundir clulas na horizontal) e rowspan (para fundir clulas 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 tambm a operao inversa, SPLIT CELLS, que permite dividir uma clula em duas ou mais clulas:
206
Para aceder a esta caixa de dilogo utilize a opo MODIFY > TABLE > SPLIT CELL, a opo TABLE > SPLIT CELL do menu de contexto da clula ou o cone SPLIT do PROPERTY INSPECTOR:
A nossa tabela ainda no tem grande aspecto, mas tem os dados necessrios na posio necessria. Para tornar a tabela mais atractiva visualmente podemos 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 hipteses 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 pgina ou utilizar as opes FILE > IMPORT > WORD DOCUMENT ou FILE > IMPORT > EXCEL DOCUMENT. Contudo, estas opes apenas existem na verso Windows do Dreamweaver. No Macintosh temos de utilizar outro processo que tambm vlido para Windows. Este processo envolve a criao de um ficheiro num formato especial, chamado CSV (Comma-Separated Values). Um ficheiro deste tipo pode ser criado no Excel, no Word, ou em qualquer outro programa, inclusivamente num sistema de gesto de bases de dados. Cada linha do ficheiro corresponde a uma linha da tabela, e os valores das clulas esto separados por um determinado carcter definido pelo web designer, sendo os mais comuns o ;, o :, o | e mesmo o TAB, embora tradicionalmente se utilizasse a , (comma em ingls significa vrgula). Isto significa que o ficheiro CSV para a tabela da nossa primeira viatura pode ter o seguinte formato:
Potncia:;143 CV (1.995 cm3) Primeiro registo:;Dezembro 2009 Quilmetros:;7.000 Km Combustvel:;Diesel Cor:;Cinzento metalizada Preo:;36500
8. TABELAS
207
Agora, para importarmos estes dados para a pgina, coloca-se o cursor no local onde se pretende criar a tabela, e depois selecciona-se a opo FILE > IMPORT > TABULAR DATA ou INSERT > TABLE OBJECTS > IMPORT TABULAR DATA. Na caixa de dilogo que aparece,
temos primeiro de identificar o ficheiro que contm os dados, utilizando nomeadamente o boto BROWSE. Em seguida escolhe-se o limitador de campos. Existem 4 opes fixas, podendo no entanto o web designer utilizar outro carcter bastando para isso seleccionar a opo OTHER e depois, no campo que est frente da lista de valores do campo DELIMITER, introduzir o carcter que pretende utilizar:
Na caixa de dilogo IMPORT TABULAR DATA temos algumas opes de formatao da tabela, nomeadamente a largura da tabela (TABLE WIDTH), que pode ser fixa (campo SET TO), em pxeis ou percentagem, ou adaptar-se aos dados existentes nas clulas (opo FIT TO DATA). O campo FORMAT TOP ROW pode ser til quando, juntamente com os dados, tambm existe no ficheiro, na primeira linha, uma descrio de cada item. Por exemplo, nos dados seguintes a primeira linha contm a identificao dos dados:
Marca|Modelo|Potncia|Primeiro registo|Quilmetros|Combustvel|Cor|Preo 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 no podemos utilizar esta opo FORMAT TOP ROW porque os cabealhos se encontram na primeira coluna. No entanto, depois de importarmos os dados do ficheiro CSV, podemos convert-los em cabealhos seleccionando a primeira coluna,
208
e depois clicando na opo HEADER no PROPERTY INSPECTOR:
O resultado :
8.5 Acessibilidade em tabelas

Utilizar tabelas para agrupar e apresentar dados muito utilizado para estruturar dados numa pgina Web. Mas esses dados tm de estar acessveis a todos os utilizadores nomeadamente aos deficientes visuais, entre outros. Uma tabela em HTML possui elementos e atributos que permitem tornar a tabela mais acessvel 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 dilogo TABLE permite introduzir essa legenda. Mas caso no 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 opo 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 pgina no faz muito sentido ter uma legenda e um cabealho com o mesmo contedo. Podemos prescindir do cabealho dado que possvel formatar a legenda com estilos CSS de forma a que fique idntica ao cabealho. 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 espao, aparece uma lista dos atributos que se podem utilizar com o elemento <caption>:
Para colocar a legenda na parte de baixo da tabela vamos seleccionar o atributo align, e depois seleccionamos o valor bottom,
210
C est o resultado pretendido:
Se no gostar de mexer em cdigo, na vista DESIGN coloque o cursor no meio da caption, seleccione-a no TAG SELECTOR e depois escolha a opo MODIFY > EDIT TAG, e na caixa de dilogo que aparece, na categoria GENERAL, escolha o alinhamento pretendido:
Quanto ao SUMMARY, um atributo do elemento <table>, e o seu valor uma descrio do contedo 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

possvel estruturar, em HTML, tabelas em reas lgicas recorrendo aos elementos <thead>, <tbody> e <tfoot>. Pelos nomes percebe-se que o <thead> define a rea de cabealhos, o <tbody> a rea de contedo, e o <tfoot> uma rea de rodap. O <thead> e o <tfoot> so opcionais, mas se utilizar um deles tem de utilizar o <tbody>.
8. TABELAS
211
Esta definio de reas lgicas ajuda imenso quando se aplicam os estilos CSS a uma tabela para alterar a sua aparncia. Mas preciso ter em ateno que, sem a aplicao de estilos, estes elementos no alteram a aparncia da tabela na pgina. Para exemplificar a aplicao destes elementos vamos criar uma nova pgina, stock.html, na pasta stock. Esta pgina vai conter uma listagem das viaturas que se encontram em stock:
Em primeiro lugar vamos seleccionar a primeira linha e transformar todas as clulas em cabealhos, clicando na opo 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>. Podamos fazer isso em cdigo, mas para no estar a criar muita confuso 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:
212
Visualmente no existiu nenhuma alterao, mas sim no cdigo:

<table border="1"> <thead> <tr> <th>Marca</th> <th>Modelo</th> <th>Potncia</th> <th>Primeiro registo</th> <th>Quilmetros</th> <th>Combustvel</th> <th>Cor</th> <th>Preo</th> </tr> </thead>
Agora teriam de se seleccionar as linhas de dados e repetir a operao de WRAP TAG, inserindo o elemento <tbody>. O problema que o Dreamweaver, quando teclamos CONTROL+T (COMMAND+T no Macintosh), pensa que queremos envolver toda a tabela num determinado elemento. Por isso, ter de efectuar esta operao 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 cdigo entre o elemento <thead> e o <tbody>, de forma a que o browser possa apresentar o rodap antes de comear a apresentar linhas de dados. Utilizando JavaScript e cdigo server-side possvel efectuar a paginao das linhas de dados mantendo os cabealhos 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 importados pela ordem pretendida, pode ser necessrio efectuar uma ordenao. preciso ter em ateno que esta ordenao efectuada pelo web designer quando desenha a pgina, e no pelo visitante quando visita a pgina. Se pretender que o visitante possa ordenar os dados pelas colunas, ter de utilizar cdigo JavaScript ou cdigo server-side (PHP ou ColdFusion, entre outros). Seleccione a tabela e escolha a opo COMMANDS > SORT TABLE. Caso a tabela no esteja construda de forma correcta, obtm-se o aviso que lana pistas sobre o possvel problema:
8. TABELAS
213
Neste caso tratava-se de um problema que tinha a ver com a falta de uma etiqueta de fecho de um elemento da tabela. possvel ordenar alfabtica ou numericamente, por ordem ascendente ou descendente:
Selecciona-se, no campo SORT BY, a coluna pela qual se pretende ordenar. Caso existam valores idnticos nessa coluna pode-se seleccionar outra coluna (campo THEN BY) para ordenar esses valores. o que acontece com a nossa tabela de viaturas disponveis, se a ordenarmos por marca (COLUMN 1) e depois por modelo (COLUMN 2):
Por omisso, o Dreamweaver assume que a primeira linha no utilizada na ordenao porque normalmente contm os cabealhos, a no ser que se seleccione a opo SORT INCLUDES THE FIRST ROW.
8.8 Modo expandido

O modo EXPANDED TABLES adiciona, temporariamente, cell padding e cell spacing a todas as clulas de todas as tabelas da pgina, e aumenta a moldura das tabelas para tornar mais fcil a edio do contedo das clulas. Permite seleccionar determinados itens ou colocar, de forma precisa, o cursor. Este modo s funciona em vista CODE ou vista SPLIT.
214
Utilizando este modo pode expandir uma tabela para, por exemplo, colocar o cursor esquerda ou direita de uma imagem sem seleccionar inadvertidamente a imagem ou clula.
Dica
Depois de ter efectuado a seleco pretendida ou de ter colocado o cursor no local desejado, deve voltar ao modo STANDARD da vista DESIGN para efectuar as alteraes, dado que algumas operaes visuais, como o redimensionamento, no tm os resultados esperados quando se est em modo EXPANDED TABLES. Para aceder a este modo, seleccione a opo VIEW > TABLE MODE > EXPANDED TABLES MODE ou clique no cone EXPANDED TABLES MODE na categoria LAYOUT do painel INSERT: Alm 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 hipteses: Clique no link exit na barra EXPANDED TABLES MODE no topo da janela de documento. Seleccione a opo VIEW > TABLE MODE > STANDARD MODE. Clique no cone STANDARD MODE na categoria LAYOUT do painel INSERT.
Formulrios
Os formulrios so dos elementos mais importantes em pginas Web dado que permitem recolher informao dos visitantes. As pginas que contm formulrios recolhem os dados introduzidos pelos visitantes e enviam esses dados para outra pgina ou script (normalmente uma pgina PHP, Coldfusion ou outra linguagem server-side), para serem processados.
registo.htm
processa.php
Esta pgina 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 formulrio. Isto significa que tornar os formulrios funcionais implica a utilizao de uma linguagem server-side como o PHP, o que est fora do mbito deste livro. Mas interessa que conceptualmente perceba como que os formulrios funcionam e como que os stios Web processam os dados inseridos nos formulrios pelos visitantes. Os formulrios so criados recorrendo ao elemento <form> que contm atributos que definem o nome do formulrio, uma aco e um mtodo de envio de dados. A aco (correspondente ao atributo action) identifica a pgina que processar o formulrio, isto , a pgina para a qual o formulrio deve enviar os dados introduzidos pelo visitante. Como dissemos anteriormente, trata-se de uma pgina server-side (em PHP, Coldfusion ou outra linguagem).
216
O mtodo (que corresponde ao atributo method) descreve como que os dados so enviados para a pgina server-side que os vai processar. Existem dois valores possveis: get acrescenta os dados ao endereo da pgina definida no atributo action (isto , querystring): post acrescenta os dados ao cabealho (head) do pedido que efectuado pelo browser ao servidor, para aceder pgina de processamento de dados.
Isto significa que os dados submetidos pelo mtodo get so visveis no endereo aps o formulrio ser submetido, enquanto os dados submetidos pelo processo post so escondidos dos visitantes. Pode ver uma utilizao do mtodo get e da querystring quando efectua pesquisa num motor de pesquisa:
Os valores a seguir aos caracteres & so parmetros que so passados para a pgina os processar. O mtodo que devemos utilizar num formulrio depende da forma como a pgina de processamento espera receber os dados e das limitaes dos processos de submisso. Os dados submetidos atravs do mtodo get so menos seguros e podem ser cortados devido limitao de tamanho da querystring. Por isso o mtodo get tipicamente utilizado para dados no crticos e de pequeno tamanho, como os utilizados num formulrio de pesquisa. O mtodo post tipicamente utilizado para transaces mais seguras e para dados mais longos como comentrios dos visitantes, ou quando se possui campos do tipo password.
9.1 Criar um formulrio

Para exemplificar a utilizao de formulrios em pginas Web vamos criar dois formulrios: 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 informaes, necessria a existncia de um formulrio de contacto. Vamos criar ento uma pgina contactar.html na pasta info do nosso stio Web.
9. FORMULRIOS
217
Quando se est a construir um formulrio, o ideal utilizar a categoria FORMS da barra INSERT que possui cones para praticamente todos os elementos HTML especficos dos formulrios:
Estes elementos tambm esto disponveis a partir do sub-menu INSERT > FORM. Tudo comea com um elemento <form> que inserido atravs do cone FORM da barra INSERT (tambm pode utilizar a opo INSERT > FORM > FORM):
Na pgina, o Dreamweaver apresenta um tracejado vermelho para indicar ao web designer os limites do formulrio:
Devemos assegurar que todos os elementos do formulrio so inseridos dentro deste tracejado. Caso insira um elemento de um formulrio, fora de um formulrio j existente, o Dreamweaver alerta-o para o facto com a seguinte mensagem:
Se clicar no boto YES, o que acontecer que ser criado outro formulrio na pgina,
218
o que normalmente no o que pretendemos. O cdigo HTML criado pelo Dreamweaver :

<form id="form1" name="form1" method="post" action=""> </form>
9.1.1 Propriedades do formulrio

Tal como acontece com a maior parte dos elementos HTML de uma pgina, o formulrio tem propriedades associadas, que podem ser manipuladas atravs do PROPERTY INSPECTOR (dever em primeiro lugar seleccionar o formulrio recorrendo ao TAG SELECTOR):
Em primeiro lugar, podemos atribuir um nome ao formulrio:
Por omisso o Dreamweaver atribui o nome form1 ao primeiro formulrio da pgina, form2 ao segundo, form3 ao terceiro e assim sucessivamente. normal atribuir um nome mais identificativo ao formulrio, utilizando muitos web designers o prefixo frm. Neste caso, o nome do nosso formulrio poderia ser frmRegisto. Ao alterar o nome no campo especfico 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. FORMULRIOS
219
O nome dos formulrios era muito utilizado h uns anos para referenciar, em JavaScript, o formulrio e os respectivos elementos. Mas hoje em dia tal no necessrio. Contudo o nome (mais concretamente o valor do atributo id) ainda importante para ser referenciado nos estilos CSS. Os nomes que se podem atribuir aos formulrios seguem a lgica habitual de terem de comear por letras, s poderem ter letras, algarismos, o underscore e o hfen, e no devem ter caracteres acentuados e c cedilhados. O atributo action identifica a pgina que processar o formulrio. Como normalmente se trata de uma pgina server-side (em PHP ou Coldfusion) no a vamos preencher. Podemos preencher este campo mesmo que a pgina referenciada ainda no exista. O atributo method permite definir o mtodo utilizado para enviar os dados para a pgina server-side que os vai processar. Como vimos anteriormente, existem dois mtodos possveis: GET e POST. Vamos utilizar o mtodo POST nos nossos formulrios, que tambm o mtodo seleccionado por omisso. J o atributo enctype permite definir o tipo de codificao (encoding) utilizado para o envio dos dados para a pgina definida no atributo action. Se no se atribuir nenhum valor utilizado, por omisso, o application/x-wwwform-urlencoded. S se atribui um valor a este atributo quando se utilizam campos de upload (transferncia) no formulrio. Nesse caso o valor a utilizar multipart/form-data. Finalmente, e tal como acontece nos links, podemos decidir que a pgina que est definida no atributo action e que executada quando o formulrio submetido (normalmente, quando o visitante clica num boto de submit), aberta numa janela/aba separada, recorrendo ao valor _blank do atributo target. Os outros valores possveis para este atributo so utilizados apenas com frames.
9.2 Campos de texto

Os elementos mais utilizados em formulrios so os campos de texto, que como o prprio nome indica, permitem a introduo de texto. Existem trs tipos de campos de texto: TEXT para linhas nicas de texto; PASSWORD idntico ao anterior mas esconde o texto inserido pelo utilizador, substituindo os caracteres por estrelas ou pontos. TEXTAREA permite inserir vrias linhas de texto sendo normalmente utilizado para campos de comentrios.
220
9.2.1 Text
O primeiro campo que vamos inserir no nosso formulrio um campo de texto normal, que pode ser inserido, aps termos colocado o cursor dentro dos limites do formulrio, clicando no cone TEXT FIELD da barra INSERT (ou seleccionando a opo INSERT > FORM > TEXT FIELD):
9.2.2 Atributos de acessibilidade

Por omisso, aparece a seguinte caixa de dilogo:
Isto acontece porque, por omisso, as funcionalidades de acessibilidade esto activas para os formulrios.
Dica
Se no quiser que a caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES aparea sempre que insere um campo no formulrio, aceda opo VIEW > PREFERENCES no Windows (DREAMWEAVER > PREFERENCES no Macintosh), e depois, na caixa de dilogo que aparece, seleccione a categoria ACCESSIBILITY, e desactive a opo FORMS OBJECTS:
9. FORMULRIOS
221
No obrigado a inserir nenhum valor na caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES. Pode mesmo clicar no boto CANCEL, que o campo ser inserido no formulrio. Mas deve aproveitar esta caixa de dilogo para evitar ter de aceder ao cdigo para activar ou atribuir valores a propriedades dos campos. Um dos valores que deve inserir na caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES o nome que pretende atribuir ao campo. O valor introduzido no campo ID da caixa de dilogo vai ser atribudo aos atributos id e name (este, por razes histricas e de compatibilidade). Quando se trabalha com pginas dinmicas 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 vo ser inseridos. LABEL o texto que aparece atrs do campo de texto e que identifica, para o visitante, o contedo desse campo. Os labels no esto limitados a apenas uma palavra, podendo ser bastante longos, embora por razes estticas tal no seja aconselhado. A rea STYLE, que possui trs opes, define o relacionamento entre o label e o campo de texto. A primeira opo, ATTACH LABEL TAG USING FOR ATTRIBUTE, cria um elemento label autnomo do respectivo campo de texto. A relao entre o label e o campo de texto faz-se atravs 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 opo vantajosa quando se tem de separar o label do respectivo campo, por razes de design ou layout. J a segunda opo, W RAP WITH LABEL TAG, faz com que o elemento input seja embrulhado pelo elemento label, tornando assim dispensvel o atributo for:
222
<label>Nome: <input type="text" name="nome" id="nome" /> </label>
Caso se seleccione a terceira opo, 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 trs opes so idnticas. Para o web designer a primeira opo mais vantajosa porque permite estilizar o aspecto do label independentemente do campo de texto. Em seguida, a rea POSITION define a posio do label relativamente ao campo de texto. Pode ser antes do campo de texto (opo BEFORE FORM ITEM) ou depois (opo AFTER FORM ITEM). Para a maior parte dos elementos HTML que podem ser utilizados num formulrio selecciona-se a opo BEFORE FORM ITEM. J no caso dos radio buttons e das checkboxes, selecciona-se a opo AFTER FORM ITEM. A ACCESS KEY permite a definio de uma combinao de teclas para o visitante saltar directamente para o campo. So sobretudo importantes para pessoas com limitaes de vria ordem que no conseguem utilizar um rato. Embora a utilizao da tecla TAB permita saltar entre campos, como veremos a seguir, em algumas ocasies 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 formulrio em causa. Muitas vezes coloca-se a negrito (bold), no label, o carcter definido para access key. O problema que muitos browsers j tm um conjunto de teclas de atalho definidas que impossibilitam a utilizao 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 , possvel, num browser, saltar entre campos de um formulrio (e, j agora, entre links) recorrendo tecla TAB. Por omisso, os browsers (e outros user agents) definem a ordem de salto da esquerda para a direita e de cima para baixo da pgina. Podemos alterar esta ordem, se o desejarmos, atribuindo nmeros a cada campo. O normal utilizar nmeros de 10 em 10 para o TAB INDEX para o caso de querermos mudar elementos de stio no formulrio ou de inserir novos e no termos assim de reescrever todos os valores de TAB INDEX de todos os campos do formulrio. Em HTML corresponde a um atributo tabindex do elemento <input>:
9. FORMULRIOS
223
<input type="text" name="nome" id="nome" tabindex="10" />
O nosso formulrio 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, alm dos existentes na caixa de dilogo 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 aparecero visveis quando o visitante introduzir um valor no campo. O problema reside no facto do tamanho dos caracteres variar entre sistemas operativos e browsers podendo, alm isso, cada utilizador definir 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 nmero de caracteres mximo que se podem introduzir num determinado campo. Corresponde ao atributo maxlength de HTML. Sem este atributo, o visitante pode praticamente introduzir um nmero infinito de caracteres num campo de texto. Curiosamente, o HTML no prev um atributo para o nmero mnimo de caracteres. Muitas vezes no existe espao no layout de uma pgina (ou o design no 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 pgina principal do jornal Pblico (http://www.publico.pt), na rea de pesquisa no canto superior direito:
224
Este atributo muitas vezes complementado com cdigo JavaScript, para que a mensagem seja removida quando o visitante clica dentro do campo. Finalmente, as opes DISABLED e READ-ONLY so pouco utilizadas quando se desenha uma pgina, sendo a sua utilizao mais orientada para JavaScript. DISABLED (em HTML, disabled="disabled") significa que o campo no pode ser preenchido aparecendo com um aspecto diferente (se bem que nos browsers e sistemas operativos mais recentes, a diferena visual seja pouco perceptvel). Na imagem abaixo, o campo NOME est desactivado:
A opo READ-ONLY (em HTML, readonly="readonly") tambm no permite que o campo seja preenchido. Isto significa que para o visitante a diferena entre este atributo e o disabled no evidente, embora um campo de texto que tenha o atributo readonly activado tenha um aspecto idntico aos outros campos. A diferena entre os dois atributos que o valor existente num campo disabled no enviado para a pgina de processamento. Como curiosidade, o facto de um campo poder ter os dois atributos, disabled e readonly, activados. Vamos acrescentar mais dois campos de texto (com os ids telefone e email) ao nosso formulrio:
Atribumos 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 dvida, temos de utilizar outro tipo de elemento do formulrio. Recorremos a uma textarea:
9. FORMULRIOS
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 formulrio recorre ao elemento <input>:
<textarea name="comentario" id="comentario" cols="45" rows="5"></textarea>
Mais uma vez, podemos alterar diversos atributos deste elemento do formulrio, recorrendo ao PROPERTY INSPECTOR:
Repare, em primeiro lugar, que o valor do campo TYPE MULTI LINE. Os atributos so semelhantes aos de um campo de texto normal, excepto que podemos definir a altura da textarea atravs do nmero 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 no corresponde ao atributo value, mas sim ao contedo do elemento, isto , ao que aparece entre <textarea> e </textarea>. Normalmente, este atributo mais utilizado quando se trabalha com pginas dinmicas e se disponibiliza um formulrio j
226
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 utilizao de estilos CSS o alinhamento do label em relao textarea. Por omisso, o label aparece alinhado pela parte de baixo da textarea. O label tem de ser perceptvel e permitir ao visitante perceber que est associado textarea. Alm disso temos de ter em conta a forma como os outros labels esto apresentados. Sem recorrer a estilos CSS, uma forma de melhorar a aparncia inserir um break aps o fim do label (tecle SHIFT+ENTER):
O nosso formulrio de contacto est praticamente terminado, s faltando o boto de submisso, que adicionaremos mais frente.
9.2.5 Password
Para exemplificar a utilizao de campos de senha (password), vamos criar um formulrio de registo para permitir que os visitantes se registem no nosso stio Web e possam assim receber informao da AutoVende e reservar viaturas que pretendam adquirir. Vamos criar ento uma pgina registo.html no root folder do nosso stio Web. Para j este formulrio tem a seguinte aparncia:
Vamos utilizar, como nome de utilizador para aceder ao stio Web, o respectivo e-mail.
9. FORMULRIOS
227
No existe, na barra INSERT, um cone para um campo do tipo password porque muito fcil 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 opo PASSWORD na rea TYPE:
Visualmente, no existe nenhuma alterao relativamente a um campo de texto normal, mas se a pgina for carregada no browser, e se introduzir contedo nos campos, j se v a diferena:
Inserimos mais um campo para o utilizador confirmar a senha:
9.3 Radio buttons

vulgar nos formulrios existirem opes para o visitante seleccionar. Quando se pretende apresentar um conjunto de opes ao utilizador, para este seleccionar apenas uma, e o nmero de opes disponveis no muito grande (at cerca 5 opes), recorre-se aos radio buttons. Para inserir um radio button num formulrio recorre-se ao cone RADIO BUTTON da barra INSERT (ou opo INSERT > FORM > RADIO BUTTON):
228
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 seleco (GNERO):
Ao seleccionarmos um dos radio buttons, podemos ver no PROPERTY INSPECTOR que o Dreamweaver tomou algumas decises por ns:
Por exemplo, atribuiu um valor (campo CHECKED VALUE) a cada um dos radio buttons, que igual ao id, como podemos ver pelo cdigo HTML produzido:
<p> Gnero: <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 pgina de processamento de dados do formulrio quando este submetido pelo visitante da pgina. O mais curioso que o Dreamweaver atribuiu um valor ao atributo name diferente do valor do atributo id. Normalmente estes dois valores so idnticos
9. FORMULRIOS
229
para um determinado elemento HTML, mas no caso dos radio buttons e das checkboxes eles so 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 pertenam ao mesmo campo do formulrio tm de possuir um valor idntico do campo name. No possvel, na caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES, definir o valor do atributo name a atribuir ao radio button. Essa operao tem de ser efectuada a partir do PROPERTY INSPECTOR. Por omisso, o Dreamweaver atribui o valor radio ao primeiro conjunto de radio buttons existentes na pgina. Embora possa manter este nome, lembre-se que este o nome identificativo do valor que passado para a pgina de processamento de dados do formulrio. O ideal atribuir a designao do grupo de radio buttons, que no nosso caso genero (sem acento). Ter de alterar este valor nos dois radio buttons. Muitas vezes necessrio apresentar uma opo j seleccionada. Isto pode acontecer, por exemplo, se o stio Web abordar assuntos para mulheres. Neste caso, colocaramos seleccionado, por omisso, o radio button feminino, activando a opo CHECKED na rea INITIAL STATE:
Ateno que muitas vezes apresenta-se ao visitante uma das opes j seleccionada para o forar a escolher essa opo. Embora possa inserir radio buttons individualmente na pgina, a forma mais fcil de inserir grupos de radio buttons utilizar os radio groups do Dreamweaver:
Neste caso j no aparece a caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES. mostrada uma caixa de dilogo em que temos de inserir os radio buttons que pretendemos agrupar:
230
Em primeiro lugar, no campo NAME, vamos definir o valor do atributo name, isto , a identificao do grupo de radio buttons, que no nosso caso genero. Em seguida inserimos os radio buttons clicando no cone +. Mas, por omisso, o Dreamweaver j criou dois radio buttons. Temos ento de alterar os labels e valores destes radio buttons:
Para o fazermos, basta clicar no valor que j existe. Embora tenhamos utilizado o mesmo valor para o elemento label (e, por consequncia, para o atributo id) e para o atributo value, isso no obrigatrio. Podamos ter um id igual a feminino e um value igual a F. S falta decidir a forma como os radio buttons vo aparecer no formulrio:
Se vo aparecer um em cada linha, separados por elementos <br /> (LINE BREAKS, que a opo que vamos utilizar) ou se pretendemos que apaream numa tabela, como era habitual h uns anos atrs (opo TABLE). Curiosamente, no existe opo para eles aparecerem numa linha s.
9. FORMULRIOS
231
O cdigo produzido semelhante ao que foi gerado quando crimos 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>
Porm, os labels no utilizam o atributo for, optando por englobar o radio button. Uma das vantagens da utilizao do elemento <label> nos radio buttons que no necessrio clicar no radio button para o seleccionar, basta clicar no texto. De forma aos radio buttons ficarem numa nica linha vamos remover os elementos <br /> na vista CODE. S falta agora colocar no incio da linha a identificao do grupo de radio buttons, Gnero:. Um dos atributos que no 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 numrico entre parntesis. Em alternativa pode seleccionar a opo EDIT TAG <INPUT> do menu de contexto do radio button (boto direito do rato em Windows e CONTROL+CLIQUE no Macintosh):
232
Na caixa de dilogo TAG EDITOR, clique na categoria STYLE SHEET/ ACCESSIBILITY:
9.4 Checkboxes
As checkboxes podem ser utilizadas num formulrio de forma isolada ou agrupada. Quando as checkboxes so utilizadas de forma isolada servem normalmente para o utilizador confirmar que est de acordo com algo, por exemplo com as condies de utilizao de um determinado servio. No nosso formulrio podamos acrescentar uma checkbox com este propsito. Clica-se no cone CHECKBOX da barra INSERT (ou selecciona-se a opo INSERT > FORM > CHECKBOX):
9. FORMULRIOS
233
Aparece a j nossa conhecida caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES. Depois de preenchidos os campos necessrios, a aparncia da checkbox na pgina :
Em HTML:
<p> <input type="checkbox" name="aceita_termos" id="aceita_termos" /> <label for="aceita_termos">Aceito os termos e condies de utilizao do site</label> </p>
Falta um atributo da checkbox, que o valor que passado para a pgina de processamento dos dados do formulrio caso a checkbox seja seleccionada. Temos de recorrer ao PROPERTY INSPECTOR:
No campo CHECKED VALUE inserimos o valor a ser passado. Repare que tambm podemos definir o estado inicial da checkbox (rea INITIAL STATE) fazendo com que ela aparea seleccionada quando o visitante abre a pgina com o formulrio. Para complementar a checkbox podemos acrescentar um link para uma pgina (ou janela) onde existe uma descrio dos termos e condies de utilizao do stio Web. Para colocar esse link entre parntesis 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 elemento <label>, e depois escrevemos o texto e aplicamos o link para a pgina pretendida: As checkboxes tambm so utilizadas em grupo para permitir a seleco de mltiplos itens relacionados. Porm, apenas devem ser utilizadas quando o nmero de checkboxes no grupo no ultrapasse 10.
234
Podemos criar um grupo de checkboxes manualmente, inserindo uma checkbox de cada vez. Neste caso temos de assegurar que o valor do atributo name de cada uma igual. Mas o Dreamweaver permite a criao de um grupo de checkboxes de forma automtica. Utilizamos para isso o cone CHECKBOX GROUP da barra INSERT (ou a opo INSERT > FORM > CHECKBOX GROUP):
Na caixa de dilogo 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. FORMULRIOS
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="coups" id="preferencias_2" /> Coups</label> <br /> ...
S falta atribuir um ttulo ao grupo das checkboxes, bem como remover os elementos <br /> substituindo-os por pargrafos. 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 pargrafo com a checkbox seguinte. Repita o procedimento para todas as checkboxes. Na ltima checkbox basta teclar DELETE. A aparncia do formulrio agora:
9.5 Select
Quando se tem pouco espao num formulrio, ou quando as opes so demasiadas, utiliza-se um menu de drop-down, que permite apenas a seleco de uma nica opo:
236
Para inserir um destes elementos utiliza-se a opo SELECT (LIST/MENU) da barra INSERT (ou a mesma opo do menu INSERT > FORM):
Preenche-se os valores desejados na caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES, nomeadamente o ID e o LABEL. A aparncia do menu de drop-down numa pgina no Dreamweaver ,
e o cdigo HTML associado :

<p> <select name="distrito" id="distrito"> </select> </p>
Mas agora necessrio introduzir as opes que vo estar disponveis no menu de drop-down. Para o fazer temos de utilizar o boto LIST VALUES do PROPERTY INSPECTOR (estando o elemento select seleccionado):
9. FORMULRIOS
237
A insero de opes faz-se na caixa de dilogo LIST VALUES, clicando no boto +:
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 formulrio. Embora o VALUE possa ficar em branco, sendo nesse caso utilizado o valor do ITEM LABEL, alguns browsers, como o Internet Explorer, no seguem esta regra, por isso o ideal mesmo preencher os dois. Estas opes 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="Bragana">Bragana</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="Santarm">Santarm</option>
238
<option value="Setbal">Setbal</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 opes que so utilizadas frequentemente em formulrios (como no caso da lista de pases), o normal reutilizar os elementos <option> em outras pginas. Muitas vezes utilizam-se nmeros ou abreviaes nos valores. No nosso exemplo, cada distrito podia ter um cdigo interno atribudo e era esse cdigo que teramos de utilizar no atributo value. Se utilizarmos pginas dinmicas podemos preencher as opes a partir de uma tabela da base de dados. Embora no Dreamweaver aparea Viana do Castelo (ou outro valor) como opo seleccionada,
no browser a opo que aparece a primeira da lista, Aveiro: Mas normal aparecer uma mensagem do tipo -- Seleccione um distrito -- como primeira opo de um menu de drop-down, porque seno se o visitante no seleccionar nenhum distrito, ser enviado o valor da primeira opo para a pgina de processamento de dados. O mtodo de introduo desta opo igual ao utilizado para as opes normais. Repare que, embora clicando no boto + crie uma opo no fim da lista, pode utilizar as setas para posicionar essa opo no incio da lista:
Atribumos o valor 0, dado que este valor muito utilizado quando queremos assinalar que o visitante no seleccionou nenhum valor de um menu de dropdown.
9. FORMULRIOS
239
Como um browser apresenta sempre a primeira opo de um menu de dropdown, no PROPERTY INSPECTOR podemos seleccionar outra opo para aparecer seleccionada, utilizando para isso a lista INITIALLY SELECTED:
Basta clicar na opo que se pretende colocar em seleco. No cdigo HTML:

<select name="distrito" id="distrito"> <option value="0" selected="selected">-- Seleccione um distrito --</option> <option value="Aveiro">Aveiro</option> ...
Existe uma opo no PROPERTY INSPECTOR que ainda no abordamos, que o TYPE. Por questes estticas ou por preferncia, pode-se converter o menu de drop-down numa lista:
Ao activar a opo LIST ficam disponveis mais duas opes no PROPERTY INSPECTOR, HEIGHT e ALLOW MULTIPLE SELECTIONS:
A opo HEIGHT (a que corresponde o atributo height de HTML) define o nmero de opes visveis em simultneo. J a opo ALLOW MULTIPLE SELECTIONS (a que corresponde o atributo multiple de HTML), permite que seja seleccionada mais de uma opo. Esta possibilidade muito mal compreendida pelos visitantes dos stios Web j que a mltipla seleco de opes implica a utilizao das teclas SHIFT e CTRL, para seleccionar opes consecutivas e opes no 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">
240
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 cdigo JavaScript associado que permite que seja invocada uma pgina, sempre que o visitante seleccione um valor da lista. Na caixa de dilogo INSERT JUMP MENU,
para cada opo que se pretenda criar (utilizando o boto +) tem-se de atribuir o texto que aparece ao visitante (campo TEXT), e no campo WHEN SELECTED, GO TO URL, a pgina de destino. Na parte de baixo da caixa de dilogo podemos definir onde que aparecem as pginas invocadas e se pretendemos que aparea um boto GO a seguir ao menu. Neste caso, alm de seleccionar uma opo do menu, o visitante tem de clicar no boto GO para aceder pgina que corresponde opo seleccionada. Na pgina a aparncia do jump menu idntica a um menu de drop-down, mas no cdigo produzido pode-se ver um novo atributo, onchange, que invoca uma funo JavaScript sempre que o visitante selecciona uma opo:
<select name="menu_principal" id="menu_principal" onchange="MM_jumpMenu('parent',this,0)"> <option value="index.html">ndice</option>
9. FORMULRIOS
241
<option value="registo.html">Registo</option> <option value="info/quemsomos.html">Quem Somos</option> </select>
A funo 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 Botes
Neste momento qualquer um dos formulrios que criamos no tem forma de ser submetido pelo visitante para os dados serem processados por uma pgina server-side. Temos ento de inserir um boto de submisso na pgina, recorrendo ao cone BUTTON da barra INSERT (ou opo INSERT > FORM > BUTTON):
Na caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES, o Dreamweaver seleccionou automaticamente a opo NO LABEL TAG, porque no se utilizam labels com os botes. Por isso tambm no preenchemos o campo LABEL. O boto inserido na pgina tem o seguinte aspecto:
Como bvio, temos de alterar o texto que aparece no boto, e vamos utilizar para isso o PROPERTY INSPECTOR:
242
O campo VALUE (que corresponde ao atributo value em HTML) contm o texto que pretendemos alterar. A aco que o boto desencadeia quando premido definida pelo campo ACTION que pode ter trs valores: SUBMIT FORM recolhe todos os dados inseridos no formulrio e envia-os para a pgina ou script que os vai processar; RESET FORM limpa todos os campos de um formulrio. Actualmente no muito utilizado, dado que se o visitante o premir por descuido pode ficar sem os dados j inseridos. NONE no atribui nenhuma aco ao boto. Tem-se de utilizar JavaScript para associar alguma aco ao boto. Se vir o cdigo HTML que inserido na pgina pode achar estranho que no exista nenhum atributo ACTION:
<input type="submit" name="btSubmeter" id="btSubmeter" value="Enviar" />
Na realidade, a aco associada ao boto definida pelo atributo type. O atributo action do elemento form que contm a pgina que invocada quando o visitante clica no boto de submisso.
9.6.1 Botes do tipo imagem

Hoje em dia os botes tradicionais de um formulrio tm um aspecto ultrapassado, embora possam ser melhorados atravs da utilizao de estilos CSS. Em alternativa possvel utilizar uma imagem como boto de submisso de um formulrio. para isso que serve o campo de formulrio image que inserido na pgina recorrendo ao cone IMAGE FIELD:
9. FORMULRIOS
243
Em primeiro lugar necessrio escolher, na caixa de dilogo SELECT IMAGE SOURCE, uma imagem que vai estar associada ao boto. Esta imagem pode ser do tipo GIF, JPEG ou PNG. Em seguida aparece a caixa de dilogo INPUT TAG ACCESSIBILITY ATTRIBUTES, onde devemos inserir apenas o nome a atribuir ao campo do formulrio. Resultado:
Em HTML:
<input type="image" name="btEnviar" id="btEnviar" src="../_imagens/enviar.png" />
Muitas vezes as pessoas menos habituadas a desenhar stios Web cometem um erro bastante comum ao pensarem que este tipo de botes so construdos recorrendo a uma imagem (elemento <img>) e a um link associado imagem. Embora nesse caso seja invocada uma pgina, os dados do formulrio no so passados para essa pgina.
9.7 Melhorar a organizao do formulrio

A organizao visual de um formulrio muito importante numa pgina, sobretudo num formulrio longo em que importante separar os vrios campos em reas distintas. O elemento FIELDSET utilizado para criar reas distintas no formulrio, e o elemento LEGEND utilizado para identificar essas reas. Insere-se um fieldset clicando no cone FIELDSET na barra INSERT (ou seleccionando a opo INSERT > FORM > FIELDSET):
A nica opo que aparece, para o web designer fornecer um valor, a legenda que descreve a rea:
244
Normalmente a legenda curta mas pode introduzir o que quiser. O resultado :
Em HTML o cdigo produzido :

<fieldset> <legend>Dados Pessoais</legend> <p> </p> </fieldset>
Visualizando nos browsers, o aspecto semelhante, mas no igual. No Internet 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 dvidas, o ideal ver o cdigo para ver se est tudo bem. O problema de utilizao de fieldsets com os nossos formulrios que j inserimos todos os campos pretendidos. O ideal seria ter planeado o formulrio e inserir primeiro os fieldsets e depois os campos dentro dos fieldsets respectivos.
9. FORMULRIOS
245
Temos agora de resolver o problema. Seleccionamos todos os campos que pretendemos colocar dentro do primeiro fieldset, DADOS PESSOAIS:
Depois, carregamos em CTRL+T para invocar a funcionalidade de W RAP TAG:
Escreve-se agora fieldset, e como vamos utilizar os ids para criar os estilos CSS deve tambm atribuir um valor id. O que dever ento escrever :
<fieldset id="dados_pessoais">
Depois de carregar em ENTER (ou RETURN),
difcil 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>
246
Vamos repetir este procedimento para as outras duas reas de forma a ter o formulrio com o seguinte aspecto:
Por omisso, o aspecto visual de um fieldset uma moldura cinzenta com a legenda a aparecer no topo superior esquerdo. possvel alterar este aspecto recorrendo a estilos CSS.
9.8 Outros campos

Existem outros tipos de campos disponveis para serem utilizados num formulrio, mas que s tm utilidade quando se est a trabalhar com pginas dinmicas. Um desses campos o UPLOAD, que insere uma combinao de campo de texto e de boto de BROWSE, e que permite aos visitantes transferirem ficheiros para o nosso stio Web. O cone para este tipo de campo na barra de INSERT, o FILE FIELD (ou, em alternativa, a opo INSERT > FORM > FILE FIELD):
9. FORMULRIOS
247
O resultado na pgina :
e o cdigo HTML associado:

<p> <label for="btUpload">Enviar ficheiro: </label> <input type="file" name="btUpload" id="btUpload" /> </p>
O texto que aparece no boto depende do sistema operativo, da lngua e do browser utilizado, no podendo ser alterado atravs de HTML ou de CSS. Outro campo apenas utilizado em pginas dinmicas o hidden field, que permite forar um valor quando o formulrio submetido atribuindo a um campo escondido. A sua insero na pgina faz-se atravs do cone HIDDEN FIELD da barra INSERT (ou, em alternativa, a opo INSERT > FORM > HIDDEN FIELD):
No aparece nenhuma caixa de dilogo, apenas um cone na pgina a identificar o local onde o hidden field foi inserido:
necessrio, no PROPERTY INSPECTOR, atribuir um nome e um valor ao campo. Em HTML:

<input name="contador" type="hidden" id="contador" value="300" />
248
No se preocupe com o cone que identifica o hidden field dado que no aparecer no browser, sendo apenas uma forma do Dreamweaver permitir a sua localizao na pgina. Se no gostar que estes elementos invisveis apaream na pgina, desactive a opo INVISIBLE ELEMENTS do menu VISUAL AIDS existente na barra de documento:
Deixar de ver qualquer elemento invisvel existente na pgina. Se apenas pretender no ver os hidden fields, aceda opo EDIT > PREFERENCES (DREAMWEAVER > PREFERENCES no Macintosh), e depois seleccione a categoria INVISIBLE ELEMENTS e tire a seleco da opo HIDDEN FORM FIELDS.
10
Contedo multimdia
A utilizao de contedo multimdia em pginas Web permite tornar as pginas mais apelativas. Existem mesmo servios que so baseados em contedos multimdia, como o YouTube. Sempre foi bastante complicado colocar udio e vdeo em stios Web, e s com a divulgao do formato Flash que se tornou mais simples. O problema sempre residiu na necessidade dos visitantes das pginas terem de possuir instalado um determinado plug-in. E dos plug-ins disponveis no mercado, apenas o Flash Player tem uma cobertura quase universal. O JRE, que o ambiente de execuo das applets Java, tem uma boa cobertura, mas actualmente o Java muito pouco utilizado em pginas Web (excepto no desenvolvimento de pginas server-side). Os plug-ins associados reproduo de vdeo, como o Windows Media Player e o Quicktime, esto instalados em cerca de 65% dos computadores, mas aqui o problema reside na utilizao no Windows versus a utilizao no Macintosh, dado que muito dificilmente um utilizador do Macintosh ter o Windows Media Player instalado.
10.1 Contedo Flash em pginas Web

Pelo facto do Flash e do Dreamweaver terem sido desenvolvidos pela mesma empresa, a Macromedia, sempre tiveram um nvel de integrao bastante elevado. Isto significa, em primeiro lugar, que muito fcil inserir ficheiros .swf (que a extenso dos ficheiros autnomos produzidos pelo Flash) numa pgina Web no Dreamweaver. Basta aceder opo INSERT > MEDIA > SWF, ou clicar no cone MEDIA, da categoria COMMON, na barra INSERT, e seleccionar a opo SWF:
250
Tal como acontece com as imagens, tambm 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 stio Web. Tenha em ateno que o Flash utiliza basicamente dois tipos de ficheiros: .fla para desenvolver as animaes ou filmes Flash. No podem ser utilizados em pginas Web. .swf produzidos a partir dos ficheiros .fla, destinam-se a ser utilizados nas pginas Web.
Independentemente da forma que escolha para inserir um ficheiro .swf, aparecer sempre a seguinte caixa de dilogo:
10. CONTEDO MULTIMEDIA
251
Claro que pode desactivar a apresentao desta caixa de dilogo na categoria ACCESSIBILITY das preferncias (EDIT > PREFERENCES no Windows e DREAMWEAVER > PREFERENCES no Macintosh):
Na caixa de dilogo OBJECT TAG ACCESSIBILITY ATTRIBUTES, alm dos atributos j nossos conhecidos, ACCESS KEY e TAB INDEX, temos o atributo TITLE que tem a mesma funo do que nas imagens, isto , o respectivo valor aparece por cima da animao Flash como uma tooltip e serve como descrio da animao:
Aparncia da animao Flash na pgina, no Dreamweaver:
252
Ao guardar a pgina, o Dreamweaver apresenta um aviso informando o web designer que vai copiar dois ficheiros de suporte para a reproduo do ficheiro .swf na pgina:
Os ficheiros so copiados para a pasta SCRIPTS que criada, se no existir:
Como um destes ficheiros (swfobject_modified.js) JavaScript, inserida na pgina uma referncia a esse ficheiro, na zona do cabealho e invocado um mtodo 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 insero do ficheiro .swf o cdigo produzido :
253
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" width="720" height="540" id="FlashID" title="Honda Civic Type R"> <param name="movie" value="_imagens/hondacivictyper.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="8.0.35.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="_imagens/hondacivictyper.swf" width="720" height="540">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="8.0.35.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_bu ttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div>  </object>  </object> </p>
Repare que existem dois elementos <object>, um para o Internet Explorer e outro para todos os outros browsers. Ambos os elementos <object> possuem elementos <param> associados que contm os parmetros de configurao da reproduo do ficheiro swf.
254
Nos elementos <object> feita referncia ao ficheiro expressInstall .swf que foi colocado na pasta SCRIPTS. Este ficheiro permite detectar a verso do Flash Player instalada no computador do visitante e, caso no seja a mais recente, propor a instalao desta verso. Claro que se o utilizador no possuir o Flash Player instalado tambm lhe proposta a sua instalao. Quando se visualiza, no Internet Explorer, uma pgina que contm cdigo JavaScript, aparece uma mensagem no topo da pgina:
Como inserimos uma animao/filme Flash na pgina, o Dreamweaver acrescentou a referncia a um ficheiro JavaScript, swfobject_modified.js, o que provoca o aparecimento desta mensagem. Isto acontece apenas quando se testa a pgina localmente. Se testarmos a pgina num servidor Web, esta mensagem no aparece. Tipicamente, o Internet Explorer bloqueia scripts e outro contedo ActiveX no disco local para proteger contra vrus e outro malware. Para resolver este problema e poder visualizar as animaes Flash, clique com o boto direito do rato em cima da mensagem e seleccione a opo ALLOW BLOCKED CONTENT:
Aparecer um aviso de segurana, com informao sobre o problema. Ter de clicar em YES para as animaes/filmes Flash poderem ser reproduzidas.
10.1.1 Propriedades de uma animao Flash

So diversos os parmetros que podem ser definidos para uma animao recorrendo ao PROPERTY INSPECTOR:
Em primeiro lugar, podemos alterar a identificao da animao Flash, dado que o Dreamweaver utiliza, por omisso, o valor FlashID. tambm possvel alterar as dimenses da animao Flash, se bem que o devamos fazer no Flash e no no Dreamweaver. Mas se mesmo assim o quiser fazer no Dreamweaver, utilize os campos W (para a largura) e H (para a
255
altura) ou utilize os quadrados que se encontram no lado esquerdo e no fundo da imagem:
Alis, s deve mesmo utilizar o quadrado de redimensionamento que se encontra no canto inferior direito, dado que as outras duas possibilidades deformam a animao, dado que no mantm a proporo entre a largura e a altura. Se por acaso se enganar a redimensionar a imagem pode fazer o reset das dimenses, repondo-as no valor original, clicando no boto RESET SIZE:
Como possvel reproduzir a animao Flash em modo DESIGN no Dreamweaver, pode ento verificar se o redimensionamento teve bom resultado. Clique no boto PLAY:
256
O boto PLAY transforma-se em STOP enquanto a animao reproduzida. Repare como, normalmente, a animao contnua, isto , quando chega ao fim volta a ser reproduzida automaticamente. Isso acontece porque a opo LOOP est activada. Logo abaixo desta opo existe a opo AUTOPLAY que permite que a animao Flash comece a ser reproduzida mal a pgina Web carregada no browser do visitante. Se desactivar a opo AUTOPLAY tem de dar aos utilizadores uma forma de visualizar a animao, caso a prpria animao no disponibilize essa funcionalidade. Contudo, estes parmetros no se sobrepem ao ActionScript que exista dentro do ficheiro Flash e que permite definir outro tipo de procedimento. Os atributos V SPACE e H SPACE tm a mesma funo dos utilizados nas imagens, isto , permitem definir o espao (conhecido como margem) entre a animao Flash e os outros elementos da pgina que estejam acima/abaixo ou esquerda/direita da animao. Mas o ideal utilizar estilos CSS para esta funo. Vamos ver agora os parmetros que permitem influenciar a reproduo da animao. O primeiro a qualidade (QUALITY):
Os valores disponibilizados afectam a reproduo de animaes Flash sobretudo no que diz respeito aos elementos vectoriais e ao texto, dado que controlam a aplicao de anti-aliasing que uma tcnica que permite melhorar a aparncia de certos elementos. Os valores possveis so: HIGH melhora significativamente a qualidade das animaes/filmes, mas implica um bom processador no computador dos visitantes. Se necessrio, sacrifica a velocidade em favor da qualidade; AUTO HIGH quando a animao/filme comea a ser reproduzida favorece a velocidade e a qualidade, mas sacrifica a velocidade em favor da qualidade, se necessrio; Low se a ligao Internet da maior parte dos seus visitantes for lenta ou se a pgina tiver muito contedo multimdia a reproduzir em simultneo, utilize esta opo, que favorece a velocidade em detrimento da qualidade, e pode mesmo saltar algumas frames da animao/filme. AUTO LOW quando a animao/filme comea a ser reproduzida favorece a velocidade, mas melhora a qualidade sempre que possvel;
257
Outro parmetro o SCALE, que sobretudo importante caso a animao Flash aparea numa janela de pop-up:
Em conjunto com as dimenses (campos W IDTH e HEIGHT) da animao/filme, este parmetro determina como que a animao/filme apresentada num browser. Controla especificamente como que a animao/filme reage quando a janela do browser redimensionada. O significado das opes : DEFAULT (SHOW ALL) mostra a animao/filme completo sem compromissos, isto , mantendo a proporo entre largura e altura original (aspect ratio). A animao/filme no aparecer distorcida. NO BORDER embora mantendo a proporo original, o filme redimensionado de forma a caber na rea especificada. No aparecero barras pretas, mas partes do filme (no lado esquerdo e direito) podem ser cortadas. EXACT FIT assegura que toda a animao/filme visvel dentro da rea especificada. Mas a animao/filme poder ser redimensionada e nesse caso pode ser distorcida. J o parmetro WMODE, permite activar ou desactivar a transparncia das animaes Flash:
O valor utilizado por omisso opaque o que significa que a animao/filme tapa tudo o que est por trs dela. O inverso o valor transparent, em que se v o contedo da pgina que se encontra debaixo da animao/filme atravs das respectivas transparncias. Por exemplo, quando se utiliza um elemento div posicionado de forma absoluta por cima do contedo da pgina. o que acontece com os anncios que se sobrepem pgina. Mas nem todos os browsers suportam este modo windowless e por isso o ideal utilizar cdigo de deteco de browser para determinar se pode ser aplicado. Este valor transparent pode ter impacto na performance da reproduo da animao/filme. Finalmente, o valor window faz com que a animao/filme sejam reproduzidos na sua prpria janela rectangular.
258
O parmetro W MODE tambm utilizado para definir a interaco entre elementos interactivos da pgina (widgets JavaScript como menus de pull-down) e animaes/filmes Flash. Com o valor opaque, os widgets podem aparecer por cima de animaes/filmes swf. J o valor window faz com que a animao/filme aparea por cima dos widgets.
10.1.2 Deteco do Flash Player

Para utilizadores que visitam o nosso stio Web e no possuam o Flash Player instalado ou possuam uma verso antiga deste player, -lhes apresentada a seguinte mensagem (que tem o nome de contedo alternativo):
Se vir o cdigo do elemento <object> associado animao Flash reparar que dentro de um elemento <div> est a mensagem apresentada ao visitante:
<div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_bu ttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div>
Pode mudar este contedo alternativo sem recorrer vista CODE. Na vista DESIGN clique no cone que se encontra por cima do quadrado identificativo da animao Flash na barra de cor cyan:
Dica
Caso no veja esta barra isso significa que tem desactivada a visualizao dos elementos invisveis. Dever utilizar a caixa de dilogo PREFERENCES ou o menu VISUAL AIDS da barra de documento para activar a visualizao desses elementos.
259
Ser apresentado o contedo alternativo para a animao em questo:
Como se trata de elementos HTML podemos alter-los, eliminando ou inserindo texto e imagens. Por exemplo, podemos mudar o texto para portugus, e aplicar estilos CSS. No fim das alteraes, volte a clicar no mesmo cone. O boto PARAMETERS existente no PROPERTY INSPECTOR d acesso a uma caixa de dilogo em que podemos definir parmetros da animao Flash que no possam ser controlados a partir das opes disponveis no PROPERTY INSPECTOR. Por omisso, esto definidos dois parmetros, que correspondem verso em que a animao Flash foi criada (parmetro swfversion), bem como identificao do ficheiro swf que permite instalar uma nova verso do Flash (parmetro expressinstall):
10.2 Integrao do Flash com o Dreamweaver

Tal como acontece com o Photoshop, a integrao do Dreamweaver com o Flash bastante abrangente. Por exemplo, se tivermos o ficheiro .fla original que deu origem ao ficheiro .swf, podemos lanar a edio deste ficheiro directamente a partir de uma pgina no Dreamweaver. Quando se insere um ficheiro .swf numa pgina Web no Dreamweaver criado um link para o ficheiro .fla original. O campo SRC no Property Inspector identifica o ficheiro .fla correspondente ao ficheiro .swf inserido na pgina:
260
Claro que muitas vezes isto no automtico e temos de utilizar a mira ou o cone Browse to File para identificar o ficheiro .fla original. Basta ento clicar no boto EDIT para lanar o Flash (que tem de estar instalado no computador, como bvio) e abrir o ficheiro .fla. Pode ter de identificar o ficheiro .fla que deu origem ao ficheiro .swf inserido na pgina Web no Dreamweaver:
No Flash v-se a frase Editing from Dreamweaver no topo a identificar a provenincia do ficheiro:
Depois de termos efectuado as alteraes necessrias, clica-se no boto DONE. O Flash guarda as alteraes no ficheiro .fla e depois exporta esse ficheiro para o formato .swf sobrepondo ao existente,
e voltamos ao Dreamweaver com a animao/filme actualizado.
261
10.3 Vdeo Flash

A utilizao de vdeos em pginas 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 vdeos no formato flv os problemas terminaram. O que seria o YouTube sem a possibilidade de utilizar vdeo Flash? Actualmente, a maior parte dos programas de edio de vdeo permitem codificar vdeos neste formato. Existe mesmo um programa, Adobe Media Encoder, que fornecido com o Flash Professional na Creative Suite que permite converter vdeos em outros formatos (Quicktime, MPEG, AVI, etc.) para o formato flv (ou f4v):
Para inserir um vdeo Flash numa pgina Web utiliza-se a opo INSERT > MEDIA > FLV ou a opo FLV do cone MEDIA, da categoria COMMON, na barra INSERT:
262
Aparece uma caixa de dilogo INSERT FLV:
Em primeiro lugar necessrio definir a forma como o vdeo vai ser reproduzido na pgina. O campo VIDEO TYPE possui duas opes:
PROGRESSIVE DOWNLOAD VIDEO neste caso o vdeo enviado a partir de um servidor Web normal utilizando um pedido HTTP, como se tratasse de um documento normal. O ficheiro que contm o vdeo tem de ser transferido para o computador do visitante antes de comear a ser reproduzido. Mas, ao contrrio dos mtodos tradicionais de transferir e reproduzir, com o progressive download o vdeo comea a ser reproduzido antes de ter sido todo transferido normalmente um a dois segundos depois de ter sido pedida a reproduo. o aconselhvel para stios Web com trfego baixo ou em que os vdeos so de curta durao. STREAMING VIDEO o visitante vai recebendo o vdeo sem ser necessrio 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 faa o streaming de vdeos Flash. Ao seleccionar esta opo, aparecero mais duas opes, SERVER URI e STREAM NAME, na caixa de dilogo INSERT FLV.
263
Selecciona-se o ficheiro flv a utilizar e depois clica-se no boto DETECT SIZE para perceber as dimenses do vdeo:
Isto permite verificar se a largura no inferior das skins, que colocam os controlos do filme (PLAY, STOP, REWIND, etc.) por cima deste:
Existem 3 skins disponveis CLEAR, CORONA e HALO em trs tamanhos distintos. As verses cujo nome termina em 3 das skins (que so as que possuem uma largura maior) possuem mais controlos. A opo AUTO PLAY permite que o filme comece a ser reproduzido logo que a pgina carregada no browser. S deve ser utilizado se o filme estiver localizado no topo da pgina, seno o filme comear a ser reproduzido sem o visitante ter a percepo disso. A opo AUTO REWIND faz com que o filme regresse primeira frame do filme quando chegar ao fim, mas no comea outra vez a ser reproduzido. O cone identificativo de um filme Flash (ficheiro .fla), que aparece no meio do rectngulo, diferente do cone relativo a uma animao Flash (ficheiro .swf):
No conseguimos ver o filme no Dreamweaver como acontece com os ficheiros swf. Temos de pr-visualizar no browser:
264
Quando o utilizador passa o rato por cima do filme aparecem os controlos. As opes disponveis no PROPERTY INSPECTOR esto limitadas s opes que apareceram na caixa de dilogo INSERT FLV:
10.4 Outros contedos multimdia

Podemos adicionar outros contedos multimdia a uma pgina Web, nomeadamente udio, vdeo em outros formatos, applets Java, etc. Com o sucesso do Flash, a maior parte destes formatos deixou de ser utilizado em pginas Web, sobretudo porque obriga instalao de plug-ins especficos por parte dos visitantes do nosso stio 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 reproduo. Um dos problemas que enfrentamos a forma diferente e inconsistente como os ficheiros de udio so 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 pgina Web.
265
Podemos sempre embeber o udio na pgina 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 pgina no Dreamweaver, utiliza-se a opo INSERT > MEDIA > PLUG-IN ou a mesma opo do menu MEDIA, da categoria COMMON da barra INSERT:
Depois de seleccionar, na caixa de dilogo SELECT FILE, o ficheiro udio que pretende inserir, aparecer um identificador na pgina a assinalar o ficheiro udio:
Em HTML:
<embed src="_audio/musica_fundo.mp3" width="32" height="32"></embed>
Existem poucas opes de configurao no PROPERTY INSPECTOR para este objecto udio:
Os atributos WIDTH (W) e HEIGHT (H) determinam o tamanho dos controlos de udio na pgina:
Por exemplo, para os controlos do Quicktime Player terem a seguinte aparncia no browser, necessita de 150 pxeis de largura por 16 de altura: Repare tambm no campo PLG URL que permite inserir um endereo Web para localizar o plug-in necessrio para reproduzir o udio. Desta forma, caso
266
o visitante do nosso stio Web no possua esse plug-in instalado, poder sempre instal-lo. Dependendo do tipo de udio que se inseriu, o Dreamweaver permite a sua reproduo em vista DESIGN, atravs do boto PLAY (que se transforma em STOP quando o udio est a ser reproduzido).
10.4.2 Vdeo
Com o vdeo temos o mesmo problema do udio. Sem termos a certeza que a maior parte dos visitantes do nosso stio Web possui instalado um determinado plug-in (por exemplo, o plug-in do Quicktime), no podemos arriscar a utilizar um formato de vdeo. Como vimos anteriormente, a utilizao de Flash Video , hoje em dia, a melhor soluo para resolver este problema. Ainda por cima com a facilidade com que se converte filmes em outros formatos para Flash Video. O problema da insero directa de vdeo em pginas Web sem recorrer ao Flash s ser resolvido quando todos os browsers suportarem o HTML 5 e os codecs a utilizar estiverem normalizados. So trs os tipos de vdeo normalmente utilizados em pginas Web: AVI, MPEG e MOV. Para os utilizarmos no nosso site podemos criar um link para possibilitar ao visitante a transferncia do ficheiro vdeo respectivo; ou podemos embeber o vdeo directamente na pgina como fizemos com o udio. Utiliza-se tambm a opo MEDIA > PLUG-IN para inserir um vdeo na pgina, e as opes disponveis no PROPERTY INSPECTOR tambm so idnticas.
10.4.3 Filmes Shockwave

Pode reparar no menu MEDIA que tambm se podem inserir filmes Shockwave que so produzidos pelo Adobe Director:
Mais uma vez temos de seleccionar o ficheiro na caixa de dilogo SELECT FILE, e depois introduzir as propriedades de acessibilidade.
267
Antes do aparecimento do Flash, o Shockwave era um dos formatos mais utilizados para a criao de animaes para serem utilizadas em pginas Web. Mas mais uma vez necessrio que o visitante tenha instalado um plug-in para visualizar estes ficheiros, e actualmente a maior parte das pessoas no tem instalado o Shockwave Player.
10.4.4 Applets Java

A linguagem Java permite a criao de pequenas aplicaes (applets) que podem ser utilizadas em pginas Web. Para inserir uma applet Java aceda opo INSERT > MEDIA > APPLET ou mesma opo no menu MEDIA da barra INSERT:
Em primeiro lugar temos de seleccionar na caixa de dilogo SELECT FILE o ficheiro que pretendemos inserir. Depois, aparece a caixa de dilogo de atributos de acessibilidade:
Estes dois atributos j so nossos conhecidos. O ALTERNATE TEXT serve para apresentar uma descrio da applet, de forma a que os deficientes visuais (entre outros) tenham uma ideia da utilidade da mesma. tambm til porque aparece quando o visitante no possui instalado o plug-in necessrio ou quando a visualizao 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 aparncia :
268
Enquanto no browser:
As propriedades associadas a uma applet Java so:
Uma das diferenas em relao aos outros contedos multimdia, a utilizao 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 contm 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), so componentes reutilizveis, isto , uma espcie de aplicaes em miniatura, que podem funcionar como plug-ins dos browsers. Mas apenas so reconhecidos pelo Internet Explorer no Windows. Isto significa que apenas so teis em ambientes controlados, por exemplo em intranets, em que se pode controlar o browser utilizado. O processo de insero de um controlo ActiveX numa pgina utilizando o Dreamweaver semelhante ao dos outros componentes multimdia que j abordmos:
11
CSS (Cascading Style Sheets)
At agora preocupamo-nos em colocar o contedo nas nossas pginas Web. Agora temos de nos preocupar com a aparncia das pginas. Por muito que os nossos visitantes apenas estejam interessados no contedo, a aparncia sempre importante. Quando a World Wide Web e o HTML foram inventados, o nico elemento que dava algum interesse a uma pgina era o <hr>. Mais tarde apareceram as imagens, o que permitia fazer mais algumas coisas nas pginas, como substituir o <hr> para criar separadores grficos, e valorizava muito o designer. No tardou muito a ser necessrio criar layouts mais agradveis, o que se conseguiu recorrendo a tabelas, se bem que a sua funo no fosse essa. Finalmente surgiu o elemento <font> que permitia alterar o tipo e o tamanho de letra utilizados no texto. Mas foi ento que comearam as incompatibilidades e os problemas, que s comearam a ser resolvidos quando o W3C (World Wide Web Consortium), que a entidade que gere as normas que so aplicadas na World Wide Web, resolveu criar as CSS (Cascading Style Sheets), uma linguagem de folhas de estilo que permite alterar a aparncia e formatao (na gria, presentation semantics) dos elementos existentes numa pgina Web. No s as CSS permitem formatar visualmente elementos da pgina como tambm permitem a criao de layouts bastante complexos. Algo que devemos ter sempre em mente que os browsers correntes tm um nvel 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 stio Web no os conseguirem ver. O conceito principal associado s CSS o de criao de um look-and-feel comum a todas as pginas do stio Web, isto , assegurar que todas as pginas 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 pginas do stio. Se existir um estilo que apenas se pretende aplicar a uma dada pgina, ento esse estilo ser local pgina. Um dos stios Web que melhor exemplificam a capacidade das CSS o ZenGarden (http://www.csszengarden.com/). Tendo por base o seguinte ficheiro .html, que no contm nenhuns estilos CSS,
270
os web designers so convidados a submeterem ficheiros .css que alterem o aspecto da pgina. Desde 2003 que muitos web designers tm respondido ao desafio, criando verdadeiras obras de arte, apenas utilizando estilos CSS e imagens. Por exemplo, utilizando o Orchid Beauty, transforma-se a pgina anterior em:
11. CSS
271
Em alguns casos custa a acreditar que se trata da mesma pgina, com o mesmo contedo textual. Mas fcil de tirar a prova dos nove. Guarde a pgina no disco duro do seu computador e depois remova a seguinte referncia na rea <head> do ficheiro .html:
<STYLE title=currentStyle type=text/css media=screen>@import url( /211/211.css ); </STYLE>
Ver que aparecer a pgina original, apenas com o contedo textual e sem nenhuma formatao. Claro est que as imagens do 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 stio Web

Antes de se comearem a definir e a aplicar estilos CSS, necessrio criar uma identidade para o stio Web, isto , definir o tipo de letra a utilizar, a paleta de cores, o layout das pginas, etc.
272
Claro est, que no devemos utilizar o Dreamweaver para esta tarefa, sendo normal recorrer ao Photoshop e ao Fireworks. Esta uma tarefa do mbito das competncias dos designers. Quando se tiver toda esta informao de forma definitiva que se dever comear a criar e a aplicar os estilos CSS. O design de pginas Web assunto para outro livro, e existem diversas opinies abalizadas no que diz respeito escolha de cores. Por exemplo, alguns entendidos na arte dizem que se deve utilizar uma paleta com as cores extradas do logtipo, ou com cores complementares. J outras pessoas afirmam a ps juntos que o que est a dar a utilizao de cores contrastantes com as do logtipo. Em relao utilizao de tipos de letra, dado que existem poucos tipos de letra que podem ser utilizados sem problemas nos stios Web, muitos designers recorrem a imagens para criar cabealhos com tipos de letra exticos.
11.2 Anatomia de um estilo CSS

Os estilos CSS so instrues que possuem o seguinte formato: selector {declarao}; Por sua vez a declarao possui o seguinte formato: propriedade: valor; propriedade: valor; ... O selector descreve o(s) elemento(s) na pgina que vai(o) ser controlado(s) pelo estilo (rule), que o nome atribudo a cada uma destas instrues. Existem trs tipos de selector: elemento (ou tag), id e classe. J a declarao, 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 declarao, temos propriedades e valores separados por :, e entre eles por ;. Exemplo de um estilo CSS que aplicado a todos os cabealhos de primeiro nvel 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 fcil, 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 verses o Dreamweaver tem mudado bastante a forma e as possibilidades de definir e aplicar estilos CSS, se bem que a caixa de dilogo de definio de estilos se tenha mantido inalterada ao longo dos tempos. A verso CS5 traz bastantes novidades que vm 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 propriedades e os respectivos valores. Ou podemos utilizar a vista DESIGN recorrendo caixa de dilogo CSS RULE DEFINITION. Embora possamos criar e aplicar estilos CSS apenas na vista DESIGN, sempre til perceber o que o Dreamweaver coloca na pgina como cdigo. que existem algumas propriedades e valores das CSS que apenas podem ser inseridos na vista CODE. E quando se comea a trabalhar com pginas dinmicas d muito jeito perceber como que se escrevem manualmente estilos CSS. O processo normal de criao e gesto de estilos CSS recorre ao painel CSS STYLES:
O cone NEW CSS RULE, existente no canto inferior direito deste painel,
274
permite iniciar o processo de criao de um estilo CSS, apresentando ao web designer a seguinte caixa de dilogo:
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 opes:
Estamos a editar a pgina quemsomos.html (que se encontra na pasta info). Em primeiro lugar vamos formatar o cabealho de primeiro nvel, identificado pelo elemento <h1> de HTML. Como se trata de um elemento HTML selecciona-se a opo TAG na lista SELECTOR TYPE. Se, por acaso, tivesse o cursor no cabealho INFORMAO 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 no o tenha feito, introduza h1 no campo SELECTOR NAME, ou seleccione esse elemento da lista associada:
Esta lista contm os tags de todos os elementos HTML que podem ser utilizados numa pgina Web. Repare que o Dreamweaver, na textarea existente logo abaixo do campo SELECTOR NAME, apresenta uma descrio dos elementos aos quais o estilo CSS vai ser aplicado. Finalmente, necessrio informar o Dreamweaver relativamente ao local onde pretendemos que o estilo CSS que vamos criar seja armazenado:
Embora s apaream duas opes na lista, no dia-a-dia aparecero mais. Essas outras opes correspondem aos ficheiros CSS externos que esto ligados pgina que estamos a editar. Como ainda no criamos nenhum ficheiro externo, estamos limitados s seguintes duas opes: (THIS DOCUMENT ONLY) o estilo CSS ser criado na rea <head> da pgina, dentro de um elemento <style>. Isto significa que apenas poderemos aplicar o estilo a elementos existentes na pgina. (NEW STYLE SHEET FILE) criado um novo ficheiro CSS. Na caixa de dilogo seguinte ser pedido o nome e a localizao desse ficheiro. Os estilos que criarmos dentro deste ficheiro podero ser utilizados por outras pginas desde que referenciem este ficheiro.
O aspecto corrente da caixa de dilogo NEW CSS RULE :
276
Quando se clica em OK aparece outra caixa de dilogo, CSS RULE DEFINITION, que permite criar as propriedades CSS e atribuir valores:
Nesta caixa de dilogo as propriedades CSS esto separadas em 8 categorias, se bem que essa separao no existe na realidade, sendo apenas uma forma do Dreamweaver arrumar as propriedades na caixa de dilogo. Vamos definir como tipo de letra primrio para o cabealho da pgina o ARIAL e utilizar um tom de vermelho como cor:
11. CSS
277
Se clicarmos em APPLY podemos ver o efeito da aplicao do estilo sem fecharmos a caixa de dilogo. Esta possibilidade bastante til dado que podemos efectuar correces imediatas caso o resultado no nos agrade, sem termos de fechar a caixa de dilogo.
11.3.1 Painel CSS STYLES

Aps estarmos satisfeitos e clicarmos no boto 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 prpria pgina, dentro do elemento <style> na rea <head>, como pode verificar se aceder ao cdigo 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>
278
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 alfabtica de todas as propriedades CSS que esto disponveis, clique no cone SHOW LIST VIEW:
As propriedades que esto definidas no estilo seleccionado aparecem no topo da lista a azul. O outro cone, SHOW CATEGORY VIEW, lista as propriedades disponveis agrupadas por categorias, aparecendo mais uma vez no topo da lista de cada categoria e a azul, as propriedades que esto definidas no estilo seleccionado:
11. CSS
279
As categorias utilizadas so as existentes na caixa de dilogo CSS RULE DEFINITION, alm de outras especficas 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 dilogo CSS RULE DEFINITION. Ao clicar neste link entramos em modo de edio, podendo escrever o nome de uma propriedade,
ou seleccion-la da lista anexa:
280
Na segunda coluna temos de escrever o valor a atribuir propriedade. Caso a propriedade em causa possua uma lista de valores fixos, eles aparecero 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 tambm inserir estilos CSS recorrendo ao cdigo, mas como a maior parte dos web designers no gosta de mexer em cdigo, ento o ideal mesmo recorrer caixa de dilogo CSS RULE DEFINITION. Para alterarmos os estilos CSS clique no boto 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 dilogo:
Caso efectue alteraes aos estilos CSS directamente em cdigo, convm que depois clique no boto REFRESH que aparece no painel CSS STYLES:
11.3.3 Eliminar propriedades e estilos CSS

Caso pretenda eliminar uma propriedade que pertena 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):
282
11.3.4 Formatar outros elementos

Agora que j temos o cabealho de primeiro nvel formatado, vamos formatar os cabealhos de segundo nvel (<h2>). O procedimento idntico, mudando apenas o selector de h1 para h2:
As propriedades e os valores que vamos utilizar tambm so os mesmos, embora a cor seja ligeiramente diferente:
Repetimos o procedimento para os pargrafos (p), mas desta vez vamos utilizar a cor preta (#000000). Pode parecer esquisito que se defina a cor para preto dado que, por omisso, utilizado o preto quando no se especifica nenhuma cor. Mas o problema, como iremos ver mais frente, que os elementos HTML herdam propriedades CSS dos elementos que so seus parentes, e isso significa que se um elemento parente dos pargrafos (<body>, por exemplo) tiver uma cor associada, ento o pargrafo herdar essa cor.
11. CSS
283
Nesta altura a aparncia da nossa pgina quemsomos.html :
11.3.5 Utilizao de cores

Na maior parte das vezes que temos de seleccionar uma cor na caixa de dilogo CSS RULE DEFINITION, o Dreamweaver apresenta uma caixa de seleco de cores, que, na gria, 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 visvel no ecr. Se no pretender escolher nenhuma cor tecle ESCAPE para fechar o color picker. Se pretender limpar a escolha corrente de cor clique no boto DEFAULT COLOR:
284
Como a paleta de cores apresentada est limitada a 228 cores, o Dreamweaver disponibiliza outras paletas para seleccionar a cor pretendida. Uma das opes o SYSTEM COLOR PICKER que pode ser invocado clicando no boto 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 esto disponveis a partir do menu que existe no canto superior direito do color picker:
Destas 5 paletas adicionais que esto disponveis, as duas primeiras, COLOR CUBES e CONTINUOUS TONE, so web-safe, enquanto as outras trs no o so. Mas o que so paletas web-safe? Houve uma altura em que os computadores apenas conseguiam colocar no ecr 256 cores diferentes. Sempre que tivessem de utilizar uma cor que no existia na paleta de 256 cores, tinham de utilizar uma cor prxima que existisse na paleta ou utilizavam uma tcnica chamada dithering.
11. CSS
285
Foi criada uma paleta de 216 cores que foi designada como standard. No se utilizaram 256 cores, porque normalmente os sistemas operativos reservam entre 16 e 20 cores para utilizao prpria. O nmero 216 tambm foi seleccionado porque permite 6 tonalidades de vermelho, verde e azul, que misturadas (6x6x6) do as 216 cores. Actualmente todos os computadores suportam 16 milhes de cores, por isso as cores web-safe j no fazem qualquer sentido. A nica razo para ainda se utilizar cores web-safe se estivermos a desenvolver pginas para smartphones ou outros equipamentos que estejam limitados a 256 cores. Quando se escolhe uma cor no color picker o Dreamweaver converte a cor num nmero hexadecimal composto por 3 letras e/ou algarismos, cada uma das quais corresponde a uma cor do modelo RBG (Red, Green, Blue). Mas normalmente so utilizadas 6 letras e/ou algarismos para identificar uma cor. A converso 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 notao hexadecimal utilizam-se os algarismos de 0 a F (0123456789ABCDEF), correspondendo o F ao 15. No necessrio fazer contas (deixamos isso para os informticos), porque a maior parte dos programas 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 lgica 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 lils. 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 ingls, como red ou green, se bem que s existe uma meia dzia de nomes que podiam ser utili-
286
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 especificao CSS3.
11.4 Utilizar ids em estilos

At agora quisemos aplicar sempre um determinado estilo a todas as ocorrncias na pgina de um determinado elemento. Isto , ao definirmos um estilo para o selector p, estamos a formatar todos os pargrafos da mesma forma. Mas existem ocasies em que pretendemos definir um estilo CSS para aplicar a um elemento especfico na pgina, por exemplo, a uma imagem. Se utilizarmos o selector img, vamos afectar todas as imagens na pgina. A soluo est na utilizao do id do elemento em causa. Como j vimos em captulos anteriores, o id um atributo cujo valor identifica de forma nica um elemento na pgina. Por exemplo, o logtipo do nosso stio Web tem atribudo um id:
Antes de criarmos um estilo para o logtipo vamos primeiro retirar os atributos que lhe esto 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 especfico para esta imagem, seleccionamos a imagem e depois clicamos no cone NEW CSS RULE no painel CSS STYLES. Como tnhamos a imagem seleccionada, o Dreamweaver automaticamente percebeu que pretendamos criar um selector do tipo ID:
Este tipo de selector comea por # e, por omisso, o respectivo estilo aplica-se apenas a um nico objecto na pgina. Embora possa existir mais de um objecto na pgina com o mesmo id, tal no aconselhvel. Para substituir os atributos H SPACE e ALIGN de HTML vamos utilizar as propriedades margin e float, respectivamente:
O resultado :
288
Mais uma vez no 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 contedo da pgina 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 pgina quemsomos.html, pretende-se agora colocar em destaque o nome da empresa, AutoVende, sempre que ocorrer no texto. J o fizemos num captulo anterior, mas apenas para a seco QUEM SOMOS, utilizando 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 deparmo-nos com um problema. No s o nome da empresa no est rodeado de nenhum elemento HTML identificativo (se exceptuarmos as duas ocorrncias do elemento <strong> que definimos), como nenhuma das ocorrncias 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 (boto direito do rato no Windows e CONTROL+CLIQUE no Macintosh) e selecciona-se a opo REMOVE TAG:
11. CSS
289
Claro que, no nosso caso, bem mais fcil de remover o elemento <strong>. Basta seleccion-lo e clicar no cone HTML. no PROPERTY INSPECTOR, em modo
Em primeiro lugar podamos atribuir um elemento <strong> a todas as ocorrncias do nome da empresa e depois crivamos um estilo CSS para strong. Teramos ento o problema de no podermos utilizar mais o elemento <strong> na pgina, porque iria herdar a formatao CSS. A outra hiptese era atribuir um id (do tipo empresa1, empresa2, empresa3, ...) a cada uma das ocorrncias e depois definir um estilo para cada um desses ids. Ou at fazer aquilo que dissemos que no devemos fazer, que utilizar o mesmo id para vrios objectos na pgina. Claro est que tem de existir uma soluo mais fcil. E a soluo recorrer s classes CSS, que so semelhantes aos estilos do Word. Podemos utilizar os selectores do tipo classe em qualquer elemento na pgina e as vezes que quisermos. A desvantagem que temos de aplic-las manualmente, ao contrrio dos selectores que utilizamos anteriormente. Qualquer objecto da pgina que possua um atributo class herda os estilos definidos nessa classe. Existem mesmo muitos web designers que apenas utilizam selectores deste tipo, no 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 definio de estilos CSS. Na caixa de dilogo NEW CSS RULE selecciona-se a opo CLASS no campo SELECTOR TYPE:
290
No campo SELECTOR NAME temos de ser ns a atribuir um nome classe que tem de comear por um ponto:
Os nomes no podem ter espaos e sinais de pontuao, excepto o underscore (_), no podem comear por um algarismo, e deve-se evitar utilizar caracteres acentuados e c cedilhados. Pode utilizar a chamada camel notation, que do tipo nomeEmpresa, em que as palavras comeam sempre por maisculas, excepto a primeira que comea por minsculas. As propriedades e valores que vamos utilizar so:
Falta agora definir a que objecto da pgina que queremos atribuir a classe. Seleccionamos a primeira ocorrncia do nome da empresa, mas desta vez no 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 propriedades que lhe esto associadas. No caso da nossa classe aparece a negrito (bold). O resultado (aplicamos a classe a duas ocorrncias da palavra AutoVende):
Convm que a pgina seja visualizada no browser ou em modo LIVE VIEW, dado que o Dreamweaver no mostra as SMALL CAPS em modo DESIGN. Em cdigo:
<p>A <span class="nome_empresa">AutoVende</span> uma empresa que se dedica exclusivamente comercializao de automveis usados multimarca, procurando oferecer a melhor garantia de qualidade e o melhor preo. A <span class="nome_empresa">AutoVende</span> procura propiciar o mais vasto conjunto de viaturas de preferncia dos seus clientes, tendo disponveis 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 ns no pedimos, mas a nica hiptese em HTML e CSS de resolver o nosso problema. O elemento <span>, tal como acontece com o elemento <div> que veremos num dos prximos captulos, um elemento que no tem representao fsica na pgina. Permite efectuar alteraes em parte do texto de um pargrafo.
292
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 pginas do stio Web, mantendo assim um aspecto coerente. Podemos criar um ficheiro .css utilizando a opo FILE > NEW, e depois seleccionando a opo CSS na rea PAGE TYPE:
Aparece um documento aberto no Dreamweaver com o seguinte contedo (j atribumos um nome, estilos.css, ao ficheiro):
A primeira linha, @charset "utf-8", define o tipo de codificao a utilizar no ficheiro .css. Esta instruo s necessria se for utilizar caracteres acentuados ou c cedilhados nos nomes dos estilos. A segunda linha, /* CSS Document */, um comentrio como pode ver pela cor utilizada. Podemos agora criar estilos CSS em modo CODE, j que este tipo de ficheiro no permite a utilizao do modo DESIGN. Mas tambm possvel 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 pgina quemsomos.html em modo CODE e copiarmos (ou mover) o contedo do elemento <style>:
11. CSS
293
para o ficheiro estilos.css que criamos anteriormente:
Mas existe uma forma mais fcil de fazer esta operao, basta seleccionar, no painel CSS STYLES, os estilos que se pretendem mover para um ficheiro CSS externo,
294
e depois seleccionar a opo MOVE CSS RULES do menu de contexto (boto 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 no seguidos. Aparece a caixa de dilogo MOVE TO EXTERNAL STYLE SHEET,
onde temos a possibilidade de mover os estilos seleccionados para um ficheiro existente (opo STYLE SHEET) ou criar um novo ficheiro (opo A NEW STYLE SHEET), sendo que neste caso nos pedido um nome e uma localizao para o ficheiro. Se movermos os estilos para o ficheiro estilos.css, agora o painel CSS STYLES tem o seguinte contedo:
11. CSS
295
Isto acontece porque, alm de o Dreamweaver ter movido os estilos do ficheiro quemsomos.html para o ficheiro estilos.css, tambm criou, no ficheiro quemsomos.html, uma referncia ao ficheiro estilos.css, utilizando para isso um elemento <link> de HTML, como pode verificar em cdigo:
</style> <link href="../estilos.css" rel="stylesheet" type="text/css" /> </head>
11.6.2 Ligaes a ficheiros CSS

A existncia de um ficheiro CSS que possui estilos a serem utilizados em todas as pginas no stio Web obriga a que, sempre que for criada uma nova pgina, se estabelea uma ligao com esse ficheiro. Tomemos como exemplo o ficheiro index.html que neste momento no 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 dilogo ATTACH EXTERNAL STYLE SHEET seleccionamos, atravs do boto BROWSE, o ficheiro .css que pretendemos referenciar na pgina:
A opo ADD AS: LINK cria o j nosso conhecido comando:

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

<style type="text/css"> @import url("estilos.css"); </style> </head>
296
que pode aparecer misturado com estilos CSS internos da pgina, mas nesse caso tem de ser o primeiro comando dentro do elemento <style>. Este tipo de referenciao de ficheiros CSS externos utilizando o comando import no 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 especfico e depois utiliza-se o @import para referenciar os ficheiros que pretendermos a partir de um nico ficheiro .css. Cada um destes mtodos de referenciar um ficheiro CSS apresentado de forma diferente no painel CSS STYLES. No caso da opo LINK o aspecto ,
enquanto para a opo 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 incluso de uma animao Flash, a pgina tambm referencia o ficheiro swobject_modified.js. A partir do momento em que um ficheiro .css est referenciado numa pgina, 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 pgina para referenciar o ficheiro CSS sem ter necessidade de aceder vista Code. Seleccione a opo VIEW > HEAD CONTENT para mostrar a barra HEAD:
O penltimo cone diz respeito ao elemento <link> e o ltimo cone diz respeito 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 pginas do nosso stio Web podem usufruir desses estilos. Mas se repararmos nestes trs estilos, notamos que todos tm a seguinte propriedade:
font-family: Arial, Helvetica, sans-serif;
Isto significa que, salvo raras excepes, o texto utilizado nas pginas do stio Web deste tipo. Mas ento podemos remover esta propriedade dos trs estilos e aplic-la num estilo relativo a um elemento que o pai de todos os elementos numa pgina, o <body>:
298
h1 { color: #DC000B; } body { font-family: Arial, Helvetica, sans-serif; } h2 { font-weight: bold; color: #BC0010; } p { color: #000; }
Quando criamos um novo estilo atravs do cone NEW CSS RULE do painel CSS STYLES, ele inserido a seguir ao estilo que esteja seleccionado. Como tnhamos o primeiro estilo seleccionado (o h1), o estilo body ficou logo a seguir:
Como existe uma precedncia na aplicao dos estilos, o ideal o body ser o primeiro estilo. Para isso, arrastamos o estilo body para entre a identificao do ficheiro estilos.css e o estilo h1:
11.7.1 Propriedades da pgina

J deve ter reparado que muitos elementos possuem no PROPERTY INSPECTOR um boto PAGE PROPERTIES:
11. CSS
299
Este boto d acesso a uma caixa de dilogo PAGE PROPERTIES que permite definir um conjunto de propriedades CSS para diversos elementos na pgina:
A primeira categoria, APPEARANCE (CSS), permite definir propriedades CSS para o elemento body. A segunda categoria, APPEARANCE (HTML), tambm permite definir caractersticas 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 pgina, enquanto a quarta categoria, HEADINGS (CSS), define propriedades para os cabealhos da pgina (h1, h2, h3, h4, h5 e h6). Se mudarmos a cor de fundo da pgina,
300
o Dreamweaver cria um novo estilo body na pgina onde nos encontramos:
Repare que neste caso at foi criado um novo elemento style. Para o cdigo no ficar todo baralhado e para evitar problemas, devemos passar este estilo para o primeiro elemento <style> (basta arrast-lo) e depois devemos eliminar o elemento <style> que fica sem estilos. No cdigo, passamos a referncia 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 referncia a um ficheiro CSS atravs do elemento <link> deve aparecer antes do elemento <style>.
11.7.2 Estilos inline, internos e externos

As trs possibilidades de definir estilos CSS so: Ficheiro externo CSS que referenciado por um elemento <link> numa pgina Web; Estilos internos que so definidos dentro do elemento <style> da rea <head>;
11. CSS
301
Estilos inline que so definidos no prprio elemento e que utilizam o atributo style. Vamos exemplificar a utilizao de estilos CSS inline, j que utilizamos anteriormente as duas primeiras possibilidades. Os estilos inline so definidos e aplicados directamente nos elementos. Na pgina quemsomos.html, temos uma seco de opinies de clientes:
Para formatar a aparncia do comentrio, podamos criar uma classe que seria aplicada a todos os comentrios. Ou podamos atribuir um id a esta opinio (j que s existe uma opinio) e criar um estilo especfico do id. A definio e aplicao de um estilo inline faz-se atravs do PROPERTY INSPECTOR utilizando o modo CSS (tambm pode utilizar a vista Code para o fazer):
Repare que se colocar o cursor no meio do pargrafo que define a opinio do cliente, aparece seleccionado o elemento p no campo TARGETED RULE. No 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 ento de aceder ao menu associado ao campo TARGETED RULE, e seleccionar a opo <NEW INLINE STYLE>:
302
Agora podemos utilizar os diversos campos de formatao existentes no PROPERTY INSPECTOR para formatar o comentrio do cliente:
Em alternativa, podemos utilizar o boto EDIT RULE,
para aceder j nossa conhecida caixa de dilogo CSS RULE DEFINITION:
Vamos s colocar o texto em itlico, atribuindo o valor italic propriedade font-style:
No cdigo HTML:
<p style="font-style: italic">"Estou muito satisfeito com o automvel que comprei na AutoVende. Nunca me deu qualquer tipo de problema, e tenho efectuado as revises nas oficinas da empresa."</p>
11. CSS
303
Nos estilos inline utilizado o atributo style para definir e aplicar estilos CSS.
11.7.3 Precedncia
Se visualizar agora o menu associado ao campo TARGETED RULE, com o comentrio seleccionado, poder verificar que existem trs estilos na rea CASCADE. Nesta rea, o Dreamweaver lista todos os estilos CSS que so aplicados ao elemento corrente/seleccionado, sendo a ordem a da definio:
Isto significa que so aplicadas as seguintes propriedades ao pargrafo que contm o comentrio do cliente: body definido no ficheiro estilos.css. Possui a seguinte propriedade:
font-family: Arial, Helvetica, sans-serif;
p definido no ficheiro estilos.css. Possui a seguinte propriedade:

color: #000;
<inline style> definido no prprio elemento. Possui a seguinte propriedade:

font-style: italic;
Existe uma relao hierrquica de todos os elementos HTML existentes numa pgina, sendo o av de todos os elementos, o <html>, e o pai de todos os elementos o <body>. Lembre-se da estrutura de uma pgina HTML:
<html> <head> ... </head> <body> ... </body> </html>
304
Por isso, quando se definem propriedades para o elemento <body>, elas so herdadas por todos os elementos da pgina, excepto os que se encontram na seco <head>. Alm disso, o comentrio do cliente tambm herda a propriedade aplicada a todos os pargrafos da pgina, dado que o comentrio se encontra dentro de um pargrafo. Mas o que acontece se alterarmos a cor e/ou o tipo de letra ao nvel do estilo inline:
Como o estilo inline est mais prximo do elemento o que tem precedncia sobre os outros. Como regra geral a ordem de preferncia na aplicao de estilos (cascading) : Estilos inline Estilos internos ou embedded Estilos externos Partindo deste pressuposto se pretendermos que todos os pargrafos de uma determinada pgina tenham uma cor diferente, basta definir um estilo interno nessa pgina:
<head> <style type="text/css"> p { color: #333; } </style> </head>
Esta cor vai-se sobrepor cor que definida no ficheiro externo estilos.css. A noo de precedncia e cascading permite que tenhamos estilos globais em ficheiros CSS externos e depois possamos alterar alguns desses estilos globais localmente em pginas especficas. Como nota final, o facto de no ser aconselhvel a utilizao de estilos inline dado que provocam muitas dores de cabea quando se pretende alterar o valor de uma propriedade em muitos desses estilos. So contudo muito utili-
11. CSS
305
zados quando se trabalha com pginas dinmicas, em que o contedo HTML criado na hora.
11.8 Selectores descendant

Vamos acrescentar outra opinio nossa seco Opinies dos clientes: O mais lgico colocar o cursor no fim de Pedro Remoaldo e carregar em ENTER (ou RETURN) para criar um novo pargrafo, e depois escrever a opinio:
Como aplicamos o estilo directamente ao elemento pargrafo que contm a primeira opinio, esta nova opinio no fica formatada da mesma forma. Convinha termos alguma coerncia, por isso vamos ter de efectuar algumas alteraes. Temos duas possibilidades: removemos o estilo inline do pargrafo que contm a primeira opinio e depois criamos num novo estilo; ou convertemos o estilo inline num estilo interno; O Dreamweaver no possui um mtodo que permita remover os estilos inline de pargrafos. Mas podemos aproveitar, em modo CODE, o mecanismo de FIND/REPLACE:
306
Primeiro seleccionamos o valor SPECIFIC TAG na opo SEARCH, e em seguida escolhemos o valor [ANY TAG] na lista que aparece a seguir. Podamos ter escolhida nesta lista o valor p (para pargrafos). Esta primeira seleco de valores indica ao Dreamweaver que pretendemos pesquisar em qualquer elemento da pgina. Depois em WITH ATTRIBUTE, selecciona-se STYLE e [ANY VALUE]. Aqui informa-se o Dreamweaver que pretendemos apenas localizar os elementos que possuam um atributo style independentemente do seu valor. Finalmente, definimos que aco pretendemos efectuar. No campo ACTION selecciona-se REMOVE ATTRIBUTE e depois STYLE. Clicando no boto REPLACE ALL o Dreamweaver remove todos os atributos style de todos os elementos da pgina e apresenta uma lista com as ocorrncias eliminadas:
Por acaso, no nosso exemplo apenas temos um nico elemento com o atributo style e esse elemento que pretendemos alterar. Podemos ser mais especficos jogando com as opes SEARCH e WITH ATTRIBUTE. Mas talvez seja mais lgico converter o estilo inline para um estilo interno. Seleccione o pargrafo que contm a primeira opinio e depois, no menu de contexto (boto direito do rato no Windows e CONTROL+CLIQUE no Macintosh), escolha a opo CSS STYLES > CONVERT INLINE CSS TO RULE:
Aparece uma caixa de dilogo 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 identificao:
primeira vista este selector pode parecer esquisito, dado que composto por dois elementos HTML separados por um espao. Mas o que isto significa que existe uma relao hierrquica entre os dois elementos. Este selector significa: aplica o estilo a todos os pargrafos que se encontrem dentro de um elemento <blockquote>. O estilo no ser aplicado a outros pargrafos da pgina. Relembre-se que as opinies esto contidas dentro de um elemento <blockquote>:
<h2><a name="opinioesdosclientes" id="opinioesdosclientes"></a>Opinies dos clientes</h2> <p>Algumas das opinies dos nossos clientes:</p> <blockquote> <p>"Estou muito satisfeito com o automvel que comprei na AutoVende. Nunca me deu qualquer tipo de problema, e tenho efectuado as revises nas oficinas da empresa."</p> <p>Pedro Remoaldo</p> <p>"Embora inicialmente tenha ficado satisfeita com o automvel que comprei na AutoVende, posteriormente tive alguns problemas com ele, mas que foram prontamente resolvidos, dentro da garantia."</p> <p>Elsa Bessa</p> </blockquote>
308
Em CSS este tipo de selector chama-se um descendant selector. Na caixa de dilogo CONVERT INLINE CSS temos de decidir onde vamos colocar o estilo. Como o estilo vai ser especfico da pgina corrente, seleccionamos a opo THE HEAD OF THIS DOCUMENT:
No painel CSS Styles podemos verificar que foi acrescentado um novo estilo, blockquote p, ao elemento <style> da pgina:
O resultado :
Mas, e se existissem outros elementos <blockquote> na pgina? Os pargrafos existentes dentro desses elementos tambm ficariam com esta formatao. Para o evitarmos, vamos primeiro atribuir um id ao blockquote que est associado s opinies 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 opo EDIT SELECTOR do menu de contexto:
Pode alterar directamente o nome do estilo sem passar por este menu, clicando no estilo, esperando 1 segundo, e depois voltando a clicar. Ou ainda em alternativa, aps 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
No notar nenhuma diferena no aspecto da pgina.
310
11.9 Activar e desactivar propriedades CSS

Com a verso CS5 do Dreamweaver a Adobe disponibilizou uma nova funcionalidade, CSS Enable/Disable, que permite aos web designers fazerem experincias em tempo real com as propriedades dos estilos CSS. At esta verso a nica forma de se ir testando as propriedades quando se estava a criar um estilo era utilizar o boto APPLY da caixa de dilogo CSS RULE DEFINITION:
Se gostssemos da alterao bastava clicar em OK para ela ficar permanente. Seno repnhamos o valor original da propriedade. Com a verso CS5 podemos utilizar o painel CSS STYLES para activar e desactivar propriedades. Com o estilo pretendido em seleco, basta colocar o cursor atrs 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 desactivao tem no aspecto de um elemento ou da pgina. O cone de proibio fica ao lado do nome da propriedade enquanto esta estiver desactivada, e o nome da propriedade fica a cinzento:
11. CSS
311
Em cdigo, as propriedades desactivadas so identificadas por um comentrio que possui [disabled] no incio:
#opinioes p { font-style: italic; /* [disabled]font-family: 'Times New Roman', Times, serif; */ color: #333; }
Deve evitar remover o comentrio em cdigo, dado que se se esquecer de remover o [disabled], a propriedade no 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 no era necessria, pode remov-la teclando DELETE quando ela estiver seleccionada. Contudo, se possuir muitas propriedades desactivadas, para as activar ou eliminar todas recorra ao menu de contexto (boto direito do rato no Windows e CONTROL+CLIQUE no Macintosh):
Deve-se remover ou activar as propriedades desactivadas quando tiver acabado de trabalhar com o respectivo estilo, para evitar confundir outras pessoas ou acrescentar lixo aos ficheiros.
11.10 Informao sobre os estilos CSS de um elemento

Quando um objecto da pgina est seleccionado til saber que propriedades CSS lhe esto aplicadas. Para o sabermos podemos recorrer opo CURRENT do painel CSS STYLES:
312
Agora o painel CSS Styles est dividido em trs partes: SUMMARY FOR SELECTION esta rea apresenta as propriedades que efectivamente esto aplicadas ao elemento seleccionado, e que podem 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 so as mais especficas e sobrepem-se s do incio 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 pertence 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 seleccionado, por alguma razo no o afectam. Se colocarmos o cursor por cima da propriedade riscada, o Dreamweaver apresenta-nos a razo:
11. CSS
313
Neste caso, existe um estilo CSS, o #opinioes p, que define a mesma propriedade, font-family, e como um estilo interno tem precedncia sobre o estilo externo.
11.10.1 CODE NAVIGATOR

Existe outra forma rpida de obter a lista de propriedades e estilos aplicados a um determinado objecto da pgina. Clicando num objecto da pgina (no 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 clicar nesse cone aparecer o CODE NAVIGATOR:
Clicando no cone, aparece uma lista,
com os estilos que esto 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 esto definidas:
314
No CODE NAVIGATOR, os estilos esto ordenados do mais prximo 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 no quiser o CODE NAVIGATOR, por passar a vida a aparecer, pode desactiv-lo seleccionando a opo 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 pe o cursor por cima de um estilo, aparece um link associado:
Ao clicar no link vamos aceder ao estilo em duas localizaes distintas:
11. CSS
315
No lado esquerdo acede em cdigo 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 captulo anterior a funcionalidade de LIVE VIEW do Dreamweaver que, atravs da utilizao do moto de rendering WebKit permite ver, em modo DESIGN, as nossas pginas como se estivssemos num browser. Na verso 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 esto associados a elementos da pgina. Essa funcionalidade chama-se INSPECT MODE e activada clicando no boto INSPECT da barra DOCUMENT:
Como o prprio tooltip indica, tambm activada a LIVE VIEW quando se clica no boto INSPECT. Aparece normalmente uma mensagem abaixo da barra NAVIGATION,
com dois links associados. Clicando no link MORE INFO, ficamos a saber a razo da mensagem:
O Dreamweaver est a aconselhar-nos a activar certas funcionalidades, porque o modo INSPECT funciona melhor assim. Clicando no boto SWITCH ou no link SWITCH NOW na mensagem original, as funcionalidades so activadas e temos assim a seguinte interface:
316
Isto , no lado esquerdo aparece uma vista CODE em que est seleccionado o cdigo 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 funo do modo INSPECT possibilitar ver rapidamente os estilos que esto associados a um determinado elemento da pgina. Basta passar o cursor por cima desse elemento na vista DESIGN, para os estilos respectivos aparecerem no painel CSS STYLES, e para o cdigo aparecer seleccionado na vista CODE. Na vista DESIGN o Dreamweaver utiliza cores especficas para assinalar as propriedades que esto associados ao chamado CSS box model, e que incluem margin, padding e border. Por exemplo, se passarmos o cursor por cima do logtipo,
podemos ver que o elemento colocado num rectngulo azul turquesa (cyan), enquanto a margem identificada pela cor verde amarelado. Se fizermos o mesmo processo para um cabealho de nvel 2 (isto , um elemento <h2>),
11. CSS
317
vemos a cor azul turquesa para o contedo, a cor verde amarelado para as margens intrnsecas do cabealho e a cor lils para o padding-bottom de 5 pxeis entre o contedo e a moldura (border). Este modo INSPECT permite assim descobrir muitas vezes porque que determinados elementos esto afastados um do outro. Quando se passa o rato por cima de um elemento, ele fica identificado com as cores e podemos efectuar alteraes no painel CSS STYLES que elas sero repercutidas imediatamente nas duas vistas. Neste caso continuamos em modo INSPECT. tambm possvel clicar num determinado elemento para a seleco ficar bloqueada e podermos fazer alteraes aos valores das propriedadas CSS sem correr o risco de mudarmos de elemento inadvertidamente, mas neste caso samos 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 HABITCULO e carregarmos na tecla seta esquerda (), ficar em realce a lista (isto , o elemento <UL>) a que o item pertence:
Para voltar ao item tecle seta direita () ou mova o cursor.
318
O modo INSPECT especialmente til para pginas cujo contedo 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 contedo que no est visvel nas vistas CODE e DESIGN. Para sair do modo INSPECT basta clicar outra vez no respectivo boto. Mas tenha em ateno que no sair do modo LIVE VIEW.
11.11 Preferncias na utilizao de CSS

O Dreamweaver permite configurar a forma como as CSS so utilizadas no seu ambiente de trabalho. Esta configurao pode ser definida para o cdigo ou para o ambiente de design.
11.11.1 Preferncias para o cdigo

Acedemos opo EDIT > PREFERENCES (DREAMWEAVER > PREFERENCES no Macintosh), e depois, na caixa de dilogo PREFERENCES, clica-se na categoria CODE COLORING:
Em seguida clica-se no boto EDIT COLORING SCHEME para aceder a outra caixa de dilogo, EDIT COLORING SCHEME FOR CSS, em que se pode configurar as cores que so atribudas a cada componente dos estilos CSS:
11. CSS
319
A categoria CODE FORMAT tambm possui diversas opes de configurao dos estilos CSS em cdigo:
Na rea ADVANCED FORMATTING clica-se no boto CSS para aceder caixa de dilogo CSS SOURCE FORMAT OPTIONS, que define como que as CSS so formatadas:
320
11.11.2 Outras preferncias

Outro tipo de preferncias configurado atravs da categoria CSS STYLES da caixa de dilogo PREFERENCES:
A shorthand notation tem a ver com a forma como o Dreamweaver escreve propriedades que esto 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 dilogo CSS RULE DEFINITION, no seleccionssemos a opo SAME FOR ALL:
11. CSS
321
margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
Ao activar a opo MARGIN AND PADDING na rea USE SHORTHAND FOR,
e mesmo que nos esquecssemos de seleccionar a opo 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 omisso (valor EDIT USING CSS DIALOG), aparece a caixa de dilogo CSS RULE DEFINITION, com os valores das propriedades que fazem parte do estilo:
Se escolhermos a opo EDIT USING PROPERTIES PANE, o valor da primeira propriedade do estilo entra em modo de edio na rea PROPERTIES do painel CSS STYLES:
322
Finalmente, a opo EDIT USING CODE VIEW, coloca a rea do documento em modo SPLIT, aparecendo o painel de cdigo com o documento em que o estilo se encontra:
11.12 Barra STYLE RENDERING

Por omisso o Dreamweaver apresenta o design da sua pgina (e os respectivos estilos CSS) para o tipo de mdia screen, isto , para o ecr. As alternativas so: print mostra como que a pgina aparece em papel quando impressa; handheld mostra como que a pgina aparece num equipamento mvel como um telemvel; projection mostra como que a pgina aparece num equipamento de projeco, como um videoprojector; TTY mostra como que a pgina aparece numa mquina teletype, um tipo de mquina de escrever completamente obsoleta h j alguns anos. TV mostra como que a pgina aparece num televisor. Como bvio, alm do tipo de mdia screen, que o mais comum, os outros so pouco ou nunca utilizados. O tipo de mdia print d muito jeito quando se tem uma pgina demasiado complexa e com muitas cores e se pretende simplific-la para poder ser impressa. A barra STYLE RENDERING que, por omisso, est escondida, contm botes que permitem ver como que as nossas pginas aparecem em diferentes tipos de mdia, caso se utilizem folhas de estilos especficas para cada mdia.
11. CSS
323
Esta barra pode ser visualizada seleccionando a opo VIEW > TOOLBARS > STYLE RENDERING,
ou clicando com o boto direito do rato (CONTROL+CLIQUE no Macintosh) em cima de uma das barras que estejam visveis:
A aparncia da barra :
Os primeiros seis botes tm a ver com tipos de mdia: screen, print, handheld, projection, TTY e TV. O boto seguinte ( ) permite mostrar a pgina com as CSS activadas ou com as CSS desactivadas. A seguir, aparece o boto que permite aceder definio de DESIGN-TIME STYLE SHEETS, que abordaremos na seco seguinte. Os trs botes seguintes permitem aumentar ou diminuir o tamanho da letra de todo o texto da pgina, mas sem alterar nenhuma propriedade CSS. Finalmente, os ltimos cinco botes so utilizados principalmente com links e sero abordados no captulo seguinte. Neste momento, se clicar em qualquer um dos seis primeiros botes da barra STYLE RENDERING a pgina que aparece no ecr no mudar. Isso acontece porque no s no existe nenhum estilo CSS definido especificamente para um tipo de mdia, como o elemento <link> que referencia o ficheiro de estilos CSS utilizado por todas as pginas do nosso stio Web no tem a propriedade media definida:
<link href="../estilos.css" rel="stylesheet" type="text/css" />
Podemos acrescentar essa propriedade na vista CODE, ou com a barra HEAD visvel (utilizar a opo VIEW > HEAD CONTENT),
324
clicamos no cone que representa o elemento <link>, e depois seleccionamos a opo MODIFY > EDIT TAG. Na caixa de dilogo TAG EDITOR, acedemos categoria HTML 4.0 e, no campo MEDIA, inserimos o valor screen:
Repetimos a operao para o elemento <style>:
Em HTML os dois elementos alterados tm agora a seguinte aparncia:

<link href="../estilos.css" rel="stylesheet" type="text/css" media="screen" /> <style type="text/css" media="screen">
Partindo de uma pgina que tem o seguinte aspecto com os estilos CSS aplicados para o tipo de mdia screen,
11. CSS
325
se clicarmos agora num cone de tipo de mdia da barra STYLE RENDERING, excepto no tipo de mdia screen, a aparncia da pgina ser:
Fazendo o PRINT PREVIEW da pgina no Firefox:
Neste caso, no criamos um conjunto de estilos CSS especfico para o tipo de mdia print. O que fizemos foi definir um tipo de mdia (screen) para os estilos existentes. O efeito secundrio desta aco foi que todos os tipos de mdia, excepto o screen, deixaram de ter estilos CSS associados.
326
Mas podemos criar um conjunto de estilos especfico para o tipo de mdia print. Vamos ento criar um novo ficheiro .css utilizando a opo FILE > NEW para abrir a caixa de dilogo NEW DOCUMENT e depois, na coluna PAGE TYPE, seleccionamos CSS. Aparecer um ficheiro CSS sem contedo (excepto a primeira linha que define a codificao):
Vamos atribuir um nome ao ficheiro, print_quemsomos.css, e fech-lo. Em seguida referenciamos este ficheiro na nossa pgina quemsomos.html utilizando o cone ATTACH STYLE SHEET no painel CSS STYLES:
Na caixa de dilogo ATTACH EXTERNAL STYLE SHEET, depois de termos seleccionado o ficheiro print_quemsomos.css, temos de assegurar que escolhemos a opo PRINT no menu MEDIA:
Repare que este menu possui mais dois tipos de mdia, aural e braille (utilizados para sintetizadores de fala/som e para equipamentos braille, respectivamente), alm do all que abrange todos os tipos de mdia. Como vamos criar estilos para o tipo de mdia print, clicamos no respectivo cone na barra STYLE RENDERING.
11. CSS
327
Uma das nossas primeiras aces vai ser remover o menu de links, que no faz qualquer sentido numa pgina impressa. Este menu de links que vamos estilizar no prximo captulo, est dentro de um elemento <div> que tem o id conteudo. Definimos um selector do tipo id, chamado #conteudo, e no campo RULE DEFINITION no podemos esquecer-nos de seleccionar o ficheiro print_ quemsomos.css:
A nica propriedade que vamos manipular a propriedade display, atribuindo-lhe um valor none, isto , vamos esconder o menu de links:
Se reparar agora na pgina, o menu desapareceu:
328
Podemos agora definir mais estilos CSS de forma a criar uma pgina que tenha bom aspecto quando for impressa. Algo que deve ter em mente que as unidades utilizadas em documentos impressos so os points e no os pixels. O ficheiro .css que criamos para o tipo de mdia print tambm pode ser aproveitado para outros tipos de mdia. Nesse caso, temos de atribuir propriedade media do elemento <link> a lista de tipos de mdia separados por vrgulas, como, por exemplo:
media="print, handheld"
Caso pretenda aplicar um ficheiro .css, ou um conjunto de estilos (atravs do elemento <style>) a todos os tipos de mdia, omita o atributo media, ou mais correctamente atribua-lhe o valor all. A utilizao de tipos de mdia pressupe uma estruturao correcta da pgina em HTML e a utilizao preferencial de ficheiros CSS para conterem os estilos CSS. fcil de perceber que se utilizarmos estilos inline nas nossas pginas (atravs do atributo style dos elementos) teremos problemas na utilizao de tipos de mdia.
11.13 Design-Time style sheets

O Dreamweaver permite que se utilizem temporariamente ficheiros CSS numa pgina sem ter de os referenciar com um elemento <link>. Isto , podemos ver como que determinados estilos CSS existentes num ficheiro CSS afectam a pgina corrente, sem ter de os ligar pgina. Esta funcionalidade uma forma de alternar rapidamente entre folhas de estilos numa pgina Web para explorar cenrios alternativos, antes de aplicar essas folhas de estilos. As folhas de estilos design-time apenas so utilizadas quando se est a trabalhar com as pginas no Dreamweaver. Quando as pginas so visualizadas num browser, apenas so utilizados os estilos definidos em ficheiros CSS ligados s pginas, os estilos definidos em elementos <style>, e os estilos inline. Na barra STYLE RENDERING existe um boto que permite aceder definio de DESIGN-TIME STYLE SHEETS:
11. CSS
329
Pode-se utilizar, em alternativa, a opo FORMAT > CSS STYLES > DESIGN-TIME, ou a opo DESIGN-TIME do menu de contexto do painel CSS STYLES. Em qualquer dos casos aparecer a caixa de dilogo DESIGN-TIME STYLE SHEETS:
Clique no boto + na rea SHOW ONLY AT DESIGN TIME para seleccionar um ficheiro CSS que pretenda aplicar temporariamente pgina corrente. Caso j possua um ficheiro CSS associado pgina, ento seleccione-o na rea HIDE AT DESIGN TIME para no interferir com os estilos que pretende testar. Para remover qualquer ficheiro das duas listas, basta seleccion-lo e clicar no boto -.
11.14 Verificar a compatibilidade do browser

Como j foi referido anteriormente, browsers diferentes possuem formas diferentes de interpretar e apresentar cdigo HTML e estilos CSS. Muitas vezes criamos uma pgina que tem um aspecto fantstico no Firefox, mas que no Internet Explorer parece que foi criada por um amador. O boto LIVE CODE tem associado o menu CHECK BROWSER COMPATIBILITY,
que permite efectuar uma anlise pgina corrente para detectar possveis problemas com determinados browsers. As mensagens aparecem no separador BROWSER COMPATIBILITY do painel RESULTS:
330
Existem trs nveis de problemas potenciais: Um erro que assinala cdigo CSS que pode provocar um problema grave visvel para o visitante num determinado browser como, por exemplo, o desaparecimento de partes da pgina. Um aviso que assinala cdigo CSS que no suportado num determinado browser, mas que no provoca problemas graves na visualizao da pgina. Uma mensagem informativa que assinala cdigo que no suportado num determinado browser, mas que no tem qualquer efeito visvel. Tenha em ateno que esta verificao da compatibilidade no altera a pgina corrente. Na opo SETTINGS do menu CHECK BROWSER COMPATIBILITY possvel verificar (e alterar) a lista de browsers (e respectivas verses) que o Dreamweaver utiliza para efectuar os testes:
No menu CHECK BROWSER COMPATIBILITY a opo CHECK CSS ADVISOR WEBSITE FOR NEW ISSUES permite aceder a um stio Web disponibilizado pela Adobe que contm informao sobre os ltimos problemas surgidos com os browsers ao nvel da compatibilidade com as normas, sobretudo com as CSS.
12
Formatar texto com CSS
A maior parte do contedo dos stios Web composta maioritariamente por texto. Por isso no admira que existam muitas propriedades CSS que tm por objectivo a formatao de texto. O Dreamweaver agrupa, na caixa de dilogo CSS RULE DEFINITION, a maior parte das propriedades CSS especficas de texto nas categorias TYPE e BLOCK:
332
12.1 Famlias de tipos de letra

Uma das primeiras decises 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 deciso fcil de tomar sobretudo porque a maior parte das pessoas esto habituadas a utilizar o Microsoft Word ou outro processador de texto, que lista os tipos de letra que esto instaladas no sistema operativo e que por isso podem ser utilizados no nosso documento. Mas numa pgina Web o problema reside no facto de no sabermos que tipos de letra esto instalados no computador do visitante do nosso stio Web, j que diferentes sistemas operativos (Windows, Mac OS e Linux), possuem diferentes tipos de letra instalados por omisso. Estamos ento restringidos a utilizar famlias de tipos de letra standard. Como o HTML no guarda informao sobre tipos de letra, uma pgina Web depende do facto do computador do visitante possuir a fonte instalada. Se a fonte no estiver disponvel 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 inesperados. Com as CSS pode definir que tipo de letra deve ser utilizada, e caso no exista, que tipo de letra alternativo deve ser utilizado. Se s definir um nico tipo de letra, e se o sistema operativo do visitante no o tiver instalado, ento este utiliza o seu tipo de letra por omisso, sobre a qual no temos controlo. Para resolver este problema utilizam-se as chamadas listas de famlias de tipos de letra (em ingls font stack). Quando acedemos lista associada ao campo FONT-FAMILY na caixa de dilogo CSS RULE DEFINITION, aparecem listas de tipos de letra:
12. FORMATAR TEXTO COM CSS
333
E a ltima opo maioritariamente serif ou sans serif.
12.1.1 Serif e sans-serif

Em tipografia, as serifas (serif em ingls) so pequenos traos e prolongamentos que ocorrem no fim das hastes das letras. Por exemplo, no caso do TIMES NEW ROMAN:
CENTRO
As famlias tipogrficas sem serifas so conhecidas como sans-serif. Um exemplo de um tipo de letra sans-serif o ARIAL:
CENTRO
Tradicionalmente, os textos serifados so usados em blocos de texto pois as serifas tendem a guiar o olhar atravs do texto. O ser humano l palavras ao invs 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 ttulos e chamadas, pois valorizam cada palavra individualmente e tendem a ter maior peso e presena para os olhos, j que parecem mais limpos. Porm, a utilizao de tipos de letra serifados em texto de pginas Web no aconselhvel dado que a resoluo actual dos monitores de computador no permite que as letras fiquem com bom aspecto visual, mesmo utilizando tcnicas como o anti-aliasing.
12.1.2 Font stacks

O Dreamweaver disponibiliza no campo FONT-FAMILY os font stacks mais habituais das pginas Web. Cada font stack constitudo por mais de um tipo de letra de forma a abranger o maior nmero de sistemas operativos. Vejamos um exemplo, que um dos utilizados nas pginas 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 disponvel por omisso no Windows. Caso tenha instalado, utiliza-a no texto, seno vai ver o segundo tipo de letra, Helvetica, que comum no Macintosh. Se mesmo assim
334
no tiver esse tipo de letra instalado, utilizar o tipo de letra sans-serif por omisso do browser ou do sistema operativo. Para saber o tipo de letra utilizado por omisso pelo Internet Explorer aceda caixa de dilogo INTERNET OPTIONS [OPES DA INTERNET] (pode faz-lo tambm atravs do PAINEL DE CONTROLO [CONTROL PANEL]), e clique no boto FONTS [TIPOS DE LETRA] que se encontra na parte de baixo da categoria GENERAL [GERAL]:
O Arial e o Helvetica, para um leigo, so praticamente iguais, mas existem outros font stacks que possuem tipos de letra algo diferentes. O web designer no obrigado a utilizar os font stacks fornecidos pelo Dreamweaver. Pode criar os seus prprios font stacks ou escrever directamente no campo FONT-FAMILY uma lista de tipos de letra. A criao de um font stack personalizado s tem razo de ser se esse font stack for muito utilizado pelo web designer em sites Web. Para criar um font stack personalizado utiliza-se a opo EDIT FONT LIST que aparece no fim da lista associada ao campo FONT-FAMILY na caixa de dilogo CSS RULE DEFINITION:
335
Na caixa de dilogo que aparece,
selecciona-se um tipo de letra na lista AVAILABLE FONTS e clica-se no boto << para colocar esse tipo de letra na lista CHOSEN FONTS. Caso o tipo de letra que pretendamos utilizar no 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 ateno que a ordem dos tipos de letra importante. Devemos colocar em primeiro lugar os tipos de letra que tm mais possibilidades de estar disponveis no computador da maior parte dos visitantes do nosso stio Web. Se pretender escrever um font stack directamente no cdigo no se esquea que os tipos de letra cujo nome seja constitudo por mais de uma palavra tm de aparecer entre aspas ou entre plicas ('), como no exemplo seguinte:
font-family: 'Times New Roman', Times, serif;
E tambm assegurar que se coloca as maisculas e minsculas correctas. Muitos web designers no passado, e tambm alguns actualmente, ultrapassam o problema da inexistncia de determinado tipo de letra nos computadores dos visitantes dos stios Web utilizando o Photoshop para criar imagens que contm ttulos 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 FONTFAMILY que permite apontar para um tipo de letra que esteja guardada no servidor. Desta forma asseguramos que mesmo que o visitante no possua esse tipo de letra instalado no computador, a pgina Web possa utiliz-lo.
12.1.3 Tamanho de letra

O tamanho de letra (chamado corpo em tipografia), a segunda deciso que se tem de tomar. Aqui no s o valor importante, como a unidade utilizada tambm o .
336
O campo FONT-SIZE (a que corresponde a propriedade font-size das CSS) permite definir este tamanho de letra:
Seria expectvel que a nica unidade disponvel fosse o pxel (unidade px), dado que os monitores so divididos nesses pequenos pontos (em ingls, picture element). Porm, como pode verificar pela lista, existem diversas unidades 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 so: POINTS (pt) os pontos so a unidade tpica utilizada nos documentos impressos. Um point 1/72 de uma polegada, o que implica mais uma converso para gerar um valor em pxeis. No recomendada a sua utilizao em pginas Web, a no ser em folhas de estilo de impresso (print style sheets). PICAS (pc) uma pica equivalente a 12 pontos. Outra unidade utilizada em documentos impressos. INCHES (in) as polegadas so, tal como os points, adequados a documentos impressos. CENTIMETERS (cm) mais uma vez, uma unidade, centmetros, que no resulta bem no ecr. MILLIMETERS (mm) outra unidade, milmetros, que tambm no resulta bem no ecr. Unidades relativas: EMS (em) praticamente equivalente ao tamanho de um M maisculo 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 carcter x minsculo (conhecido por xheight) de qualquer tipo de letra. Tem muitas das vantagens dos ems, mas no muito utilizada.
337
Percentagem (%) no est associada a qualquer carcter 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 pgina aos visitantes mas mantendo a integridade do layout. Os visitantes podem, por exemplo, ter dispositivos que foram a utilizao de um tamanho de letra maior. Finalmente, a unidade mais utilizada, os pxeis (px), tanto podem ser interpretados como unidade absoluta ou como unidade relativa. Embora a utilizao de pxeis fixe o tamanho de forma absoluta, as variaes das resolues dos monitores faz com que o tamanho final dos pxeis tambm mude. Os browsers mais antigos tm dificuldade em redimensionar o texto definido em pxeis, o que torna a sua utilizao insegura para stios Web com funcionalidades de acessibilidade para pessoas com deficincia. Por omisso, a maior parte dos browsers utiliza um tamanho do tipo de letra de 16 pxeis, como pode verificar nas opes do Firefox:
Isto significa que 1em igual a 16px na maior parte dos browsers. Mas se mudarmos o tamanho por omisso a equivalncia tambm muda. Ento podemos assumir que 1em igual ao tamanho por omisso 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 omisso do browser) e nos outros elementos, como pargrafos e cabealhos, utilizar os em como unidade da propriedade font-size. Desta forma ao aumentar ou diminuir o tamanho da pgina (com o zoom), todo o tamanho do texto relativo um ao outro. Isto significa que os cabealhos diminuem de tamanho na mesma proporo que o texto.
338
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 pargrafo. Vimos num captulo anterior que possvel utilizar o elemento <strong> do HTML para efectuar esta operao. Mas nem sempre os dois so sinnimos, dado que cabe ao browser interpretar o elemento <strong>, no sendo obrigatrio que utilize o negrito. A propriedade font-weight permite-nos vrios nveis de negrito:
Os primeiros quatro valores esto relacionados entre si e definem um grau de negrito que a maior parte dos browsers no consegue mostrar, como pode ver pelo exemplo seguinte visualizado no Mozilla Firefox:
339
Na escala de valores numricos, 100 o mais leve e 900 o mais carregado. Mais uma vez, a maior parte dos browsers no consegue mostrar estes nveis de negrito (visualizao no Mozilla Firefox):
Pode achar estranho existir um valor normal, quando, por omisso, os objectos/elementos de texto HTML no aparecem a negrito. Mas, por omisso, todos os cabealhos 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 itlico a texto:
O elemento <em> do HTML tem o mesmo efeito desta propriedade na maior parte dos browsers. Relativamente aos valores disponveis existe uma diferena entre o italic e o oblique. O italic utiliza a verso itlica do tipo de letra (se existir), enquanto o oblique inclina (skew em ingls) as letras ligeiramente e s til se o tipo de letra utilizado no tiver uma verso itlica. Nos tipos de letra mais utilizados a diferena no perceptvel (exemplo com Arial no Mozilla Firefox):
12.2.3 Font-variant
Algumas vezes necessrio dar uma nfase diferente a determinado texto, quando o negrito no apropriado e no se pretende utilizar itlico. Neste caso pode-se utilizar small caps (abreviatura de small capitals) em que os caracteres minsculos so convertidos em maisculos mas tm o mesmo tamanho do dos minsculos. Muitas vezes utilizado para que palavras escritas em maisculas no sobressaiam no meio do texto. Tipicamente, a altura de um carcter em small caps um ex (ver unidades), a mesma altura da maior parte dos caracteres num tipo de letra.
340
A propriedade font-variant utilizada para converter partes de texto para small caps, utilizando normalmente o elemento <span>:
Utilizamos no captulo anterior esta propriedade no nome da empresa (tenha em ateno que neste caso o texto tambm 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 maisculas (uppercase), para minsculas (lowercase), ou apenas o primeiro caracter de cada palavra para maisculas (capitalize):
Os valores uppercase e lowercase so teis quando se trabalha com pginas dinmicas para assegurar que os dados que se recebe de uma base de dados e que se pretende apresentar na pgina esto todos em maisculas ou em minsculas.
12.2.5 Text-decoration
Uma srie de alteraes do aspecto do texto est agrupada na propriedade text-decoration:
Os trs primeiros valores tm a ver com linhas que aparecem por baixo do texto (sublinhado underline), por cima do texto (overline) e que cortam
341
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 pginas, e percebe-se porqu.
12.3 Espaamento entre palavras e caracteres

Embora pouco utilizado em pginas Web, possvel definir o espaamento entre palavras e caracteres do texto (kerning e tracking em ingls). Utilizam-se as propriedades word-spacing e letter-spacing para esse efeito. Estes espaamentos so mais utilizados em documentos impressos, em que normalmente necessrio ter um controlo mais preciso do posicionamento dos caracteres, sobretudo quando se utiliza o alinhamento justificado de texto. As duas propriedades podem ser definidas atravs da categoria BLOCK da caixa de dilogo CSS RULE DEFINITION:
Uma das possveis utilizaes , por exemplo, para afastar os caracteres de cabealhos, para obter um efeito visual diferente. Partindo de um valor normal de letter-spacing,
primeiro atribumos um valor positivo (0.3em),
e depois um valor negativo (-0.1em):
342
12.4 Espaamento entre linhas

O espaamento entre linhas (em ingls leading, line spacing ou line height) o espao vertical que existe entre as linhas de um pargrafo. A propriedade line-height permite controlar esse espao:
Existem basicamente trs formas de atribuir valores a esta propriedade: nmero corresponde a um nmero 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%. No se utiliza nenhuma unidade. altura um tamanho fixo para a altura da linha, especificado numa unidade (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 sobrepe (exemplo para 50%):
A norma CSS diz que o valor por omisso para a propriedade line-height deve ser entre 1.0 e 1.2. Diferentes browsers possuem valores diferentes dentro deste intervalo de valores. Por isso, definir explicitamente a propriedade line-height para 1.0 ou outro valor assegura consistncia entre diferentes browsers. Esta propriedade til quando temos cabealhos que possuem cor de fundo e se pretende definir uma determinada altura.
343
Vamos utilizar, como exemplo, um menu que posteriormente iremos aplicar na pgina quemsomos.html, e que constitudo por um cabealho e um grupo de opes:
Para criarmos o cabealho comeamos com um pargrafo ao qual atribumos uma cor de fundo e uma cor s letras, alm de centrarmos o texto (todos os pargrafos esto dentro de um elemento <div> com uma largura de 200px):
Era ideal dar mais espao entre o texto Informao 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 tambm possvel resolver o problema recorrendo propriedade line-height qual vamos atribuir o valor 2 (sem unidade), o que significa duas vezes o espaamento entre linhas por omisso (tambm atribumos o valor 0 propriedade margin-top):
344
Podamos ter utilizado pxeis como unidade, mas nesse caso a caixa volta do texto no redimensionaria quando o visitante reduzisse ou aumentasse o tamanho do tipo de letra no browser.
12.5 Espaamento entre pargrafos

Como j deve ter reparado, por omisso os pargrafos em HTML possuem uma linha em branco entre eles, tal como acontece com os cabealhos:
O espao entre pargrafos controlado por uma propriedade CSS chamada margin, que pode ser utilizada com qualquer elemento HTML de uma pgina, incluindo tabelas, formulrios, 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, marginright, margin-bottom e margin-left. No nosso menu anterior, INFORMAO, as opes do menu esto muito afastadas umas das outras, dado que se trata de pargrafos. Podemos aproxim-las atribuindo um valor 0 margem superior (margin-top) e margem inferior (margin-bottom):
345
Para definirmos valores diferentes para as quatro margens temos primeiro de desactivar a opo SAME FOR ALL, e depois introduzir os valores pretendidos nos campos respectivos. Aproveitamos tambm para reduzir o tamanho da letra para 0.8em e atribuir um valor de 10px margem esquerda para afastar as opes 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 espao antes da primeira opo e pouco espao abaixo da ltima opo. O espao em branco acima das opes provocado pela margem inferior (margin-bottom) do cabealho, 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 espao na parte de baixo das opes, podemos resolver esse problema de duas formas: Atribumos uma margin-bottom de 5px ao ltimo pargrafo, criando uma classe especial,
.ultimo_paragrafo { margin-bottom: 5px; }
e aplicando-a ao pargrafo:
<p class="paragrafos ultimo_paragrafo">
346
Repare que neste caso atribumos mais de uma classe CSS a um elemento HTML. Podemos faz-lo em cdigo, ou recorrendo caixa de dilogo TAG EDITOR (opo MODIFY > EDIT TAG):
Em alternativa, definimos um espaamento interior (paddingbottom) 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 pargrafos. Cada pargrafo tem, por omisso, uma margem superior e uma margem inferior. Isto significa que, em teoria, o espao entre dois pargrafos seria a soma da margem inferior de um e da margem superior do outro:
} 20px
} 10px
Neste exemplo, o espao entre os dois pargrafos deveria ser de 30 pxeis. Mas os browsers colapsam as margens, o que significa que no somam as duas margens que so contguas, utilizando apenas a margem maior. Se um pargrafo possuir uma margem inferior de 20 pxeis e o pargrafo seguinte possuir uma margem superior de 10 pxeis, como acontece no nosso exemplo, ento os browsers vo utilizar 20 pxeis (o maior valor) como espaamento entre os dois pargrafos:
347
por isso que quando se remove a margem superior do segundo pargrafo, a distncia entre os pargrafos continua a mesma. Para se anular a distncia entre dois pargrafos tem-se de atribuir 0 margem inferior de um e 0 margem superior do outro. Sem este colapsar das margens, os pargrafos e os cabealhos seriam espaados a duplicar (em ingls, double-spaced). Mas o problema que cada browser define os seus valores para as margens. Para eliminarmos estas inconsistncias entre browsers, temos primeiro de eliminar os valores por omisso dos browsers relativos s propriedades margin e padding (operao que em ingls 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 vrgulas. uma forma mais econmica de criar um nico estilo para vrios selectores. Utilizaram-se dois estilos diferentes por razes estruturais. Para criar estes estilos no Dreamweaver, temos de seleccionar o valor Compound na lista SELECTOR TYPE, e depois escrever html, body no campo SELECTOR NAME:
348
Na categoria BOX, como as opes SAME FOR ALL para PADDING e MARGIN esto activadas por omisso, basta escrever o valor 0 nos respectivos campos TOP:
Se por acaso se pretender remover a margin e o padding a todos os elementos da pgina, 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 utilizao 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 {
349
line-height: 1; color: black; background: white; }
12.6 Box Model

Cada elemento HTML de uma pgina Web possui diversas propriedades CSS associadas que definem a forma como o elemento apresentado na pgina e a sua relao com os elementos circundantes. J falamos na maior parte dessas propriedades, excepto o padding. Colectivamente essas propriedades tm o nome de box model, dado que cada uma cria uma caixa volta do elemento:
A caixa principal a rea de contedo (texto, imagem, etc.) e opcionalmente podem tambm existir as reas padding, border e margin. O elemento tambm 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 contedo como o padding do elemento.
12.6.1 Padding
O padding serve para afastar o contedo da sua moldura (border). No exemplo de menu que formatamos anteriormente,
350
podamos ter utilizado padding no cabealho,

#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> tambm podamos ter utilizado um paddingleft, no necessitando de utilizar a margin-left nos pargrafos:
#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 incongruncias dos browsers na sua utilizao, nomeadamente do Internet Explorer 6 e verses anteriores. Nestas verses do Internet Explorer, quando se define a propriedade width, o browser assume que a largura inclui tambm o padding e a border. Nos outros browsers e nas verses mais recentes do Internet Explorer, em modo standards-compliant, a propriedade width apenas diz respeito ao contedo do elemento. Uma das utilizaes mais comuns do padding quando se utiliza uma linha por baixo dos cabealhos (elementos <h1>, <h2>, etc.). Vamos ento transformar os nossos cabealhos da pgina quemsomos.html. Criamos um estilo h2 local pgina,
e, na categoria BORDER, desactivamos as trs opes SAME FOR ALL, e atribumos os seguintes valores ao border-bottom:
351
Em seguida, na categoria BOX, podemos utilizar o padding-bottom para afastar a linha do cabealho:
O resultado :
12.7 Alinhar texto

Utiliza-se a propriedade text-align para alinhar o texto de um pargrafo ou de um cabealho:
352
Em texto corrido os valores mais comuns so o left e o justify. Porm, ao contrrio dos documentos em papel, no muito vulgar utilizar justify no alinhamento de texto numa pgina Web. E o alinhamento right praticamente s utilizado em cabealhos. Se no 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 pgina aparecero centrados.

Os layouts HTML no foram desenhados para especificar alinhamento vertical, mas muitas vezes necessrio 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 elemento onde aplicada. Quando utilizada em clulas de tabelas, a propriedade vertical-align equivalente ao atributo valign (que devemos evitar utilizar), e alinha verticalmente o contedo da clula. Isso significa que se tivermos,
<td style="vertical-align:middle"> ... </td>
o contedo desta clula aparecer alinhado ao centro verticalmente, o que j o comportamento por omisso. Nos browsers mais recentes podemos tambm 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 clula de uma tabela.
353
Mas a aplicao da propriedade vertical-align em elementos inline como as imagens e as pores de texto (elemento <span>) diferente. Nestes casos comporta-se como o atributo align do elemento <img>. Por exemplo, vamos escrever H2O numa pgina. Podemos recorrer ao elemento <sub>, como vimos num captulo anterior, mas dessa forma no controlamos o posicionamento do 2 em relao ao resto do texto. A soluo 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 numrico 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 verses iniciais das CSS no suportavam estes valores. Clique em YES. Se pretender efectuar alinhamentos verticais de elementos ento o melhor utilizar margin, padding e line-height e evitar o vertical-align.
12.8 Listas
As listas de itens so dos elementos que mais podem ser alterados atravs das CSS. Para exemplificarmos, vamos converter a lista de links existentes na
354
pgina index.html num menu horizontal. Mas primeiro fazemos algumas alteraes, removendo alguns links e acrescentando outros:
A primeira operao converter o conjunto de pargrafos numa lista. Porqu utilizar uma lista em vez de um conjunto de pargrafos? Porque desta forma temos um nico objecto que representa o menu e que confere uma relao entre os itens. Podamos tambm ter utilizado um elemento <div> a englobar um conjunto de pargrafos, mas perdamos a relao entre os itens. Seleccione todos os pargrafos e depois clique no cone UNORDERED LIST no PROPERTY INSPECTOR:
Aproveitamos tambm para atribuir um id lista (atribumos o nome menu) para ser mais fcil 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 no necessita de preencher nada na caixa de dilogo NEW CSS RULE, dado que o Dreamweaver preenche automaticamente o campo SELECTOR NAME:
355
Assegure-se que est a criar o estilo no prprio documento e no num ficheiro CSS. Na caixa de dilogo CSS RULE DEFINITION acedemos categoria LIST e depois seleccionamos a opo 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 espao disponvel na linha, temos de converter os <li> da nossa lista para elementos inline. Primeiro temos de criar outro estilo, #menu li, isto , um estilo compound, utilizando 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 display com o valor inline:
356
J temos um menu horizontal no topo da pgina:
A lista de itens ainda est afastada do lado esquerdo da pgina 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 espaos volta da lista:
357
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:
358
O resultado est quase como o pretendido, dado que depois vamos alterar os links:
Existe s muito espao entre os itens. Isso deve-se ao facto de, no cdigo, 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 cdigo, colocar o cursor no fim de um dos elementos <li> e teclar DELETE, ver que ficam dois espaos 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 soluo colocar os itens todos numa nica linha e remover os espaos existentes entre eles:
Veremos no prximo captulo como que podemos criar o mesmo menu horizontal 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 no comporta todo o menu, desdobrado em duas linhas, sobretudo porque existe um espao no item Quem Somos:
359
Para evitar que isto acontea, podemos utilizar a propriedade white-space com o valor nowrap:
Desta forma o browser no quebra nenhum texto evitando-se assim a mudana de linha. Na caixa de dilogo CSS RULE DEFINITION existem outras opes, 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 imagens nos formatos .gif, .jpg e .png. J a propriedade list-style-position define se as marcas aparecem dentro (inside) ou fora da rea de contedo (outside, que o valor por omisso). Para que se perceba a diferena, atribumos aos elementos <li> uma moldura (border):
360

As listas de definio, como so constitudas por trs elementos HTML distintos, so formatadas de forma diferente. Na pgina faq.html utilizamos uma lista de definies. Esta pgina ainda no foi formatada, alm dos estilos herdados da ligao ao ficheiro estilos.css:
Uma lista de definies composta por trs elementos: <dl> para a lista, como um todo; <dt> para a palavra a definir; e <dd> para a definio. No nosso caso o elemento <dt> utilizado para a questo e <dd> para a resposta. Embora a pgina contenha apenas uma nica lista de definies, sempre conveniente atribuir-lhe um nome:
361
O primeiro estilo que vamos criar, #faq dt, para formatar o aspecto das questes:
Em primeiro lugar, vamos aplicar negrito e um tamanho de letra superior:
Ainda permanecendo no estilo #faq dt, vamos afastar as perguntas das respostas utilizando a propriedade margin:
362
Finalmente, vamos colocar uma linha vermelha com uma espessura de 2 pxeis, debaixo de cada pergunta:
O aspecto da pgina , neste momento:
S falta formatar as respostas, com um estilo #faq dd:
363
Vamos apenas alterar o tamanho da letra:
Se pretender remover a indentao das respostas e alinh-las ao lado esquerdo, basta utilizar margin-left:0px:
Como existe uma lista no numerada na terceira pergunta e dois pargrafos, o espao entre a pergunta e a resposta maior do que o habitual. Podemos atribuir um estilo inline ao primeiro pargrafo da terceira resposta com a propriedade margin-top: 0px. A lista no numerada tambm necessita de formatao. Atribumos-lhe um id igual a criterios, e depois criamos um estilo #criterios li que define um espaamento maior entre os itens da lista:
Reduzimos para 5px a margin-bottom do primeiro pargrafo da terceira resposta antes da lista no numerada, e para 5px a margin-top do pargrafo a seguir lista no numerada. O aspecto da terceira pergunta/resposta agora:
364
12.9 Selectores especficos dos links

Os links so alguns dos elementos do HTML que possuem estilos especficos, que se chamam pseudo-classes. Um link pode estar, num determinado momento em um de cinco estados: LINK o aspecto normal de um link, sem ter sido visitado. Tradicionalmente os links de texto so azuis e com sublinhado. VISITED estado visitado do link. O link muda de cor, para prpura, quando a pgina para a qual aponta tiver sido visitada. habitual o aspecto visual deste estado e do anterior ser idntico para o browser no mudar o aspecto do link quando a pgina for visitada. HOVER quando o visitante coloca o cursor por cima do link. o estado utilizado quando se pretende criar um efeito de rollover. FOCUS quando se utiliza a tecla TAB para saltar entre links e o browser assinala o link corrente (neste caso basta teclar RETURN/ENTER para o link ser seguido e a pgina referenciada ser aberta) ou quando fazemos BACK [RETROCEDER] no browser e fica assinalado o link em que clicamos. Esta sobretudo uma funcionalidade associada acessibilidade de pginas Web para permitir navegar na Internet sem utilizar o rato e para assinalar com realce o link corrente (isto , o que est em foco). Existem alguns problemas com a utilizao deste estado no Internet Explorer 6 e 7. Por omisso, os browsers assinalam o estado focus com um quadrado pontilhado volta (em ingls, outline): ACTIVE quando algum est a clicar no link mas antes de libertar o boto do rato. Normalmente a maior parte dos browsers assinala este estado de forma idntica ao estado focus, isto , com um pontilhado volta. So 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-classes, seno existiro problemas na aplicao 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
365
border, mas que desenhada volta de um elemento, englobando a border e que pretende dar destaque ao elemento, realando-o na pgina. A remoo 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 utilizao destas pseudo-classes (sobretudo o a:link e o a:hover, que so as mais utilizadas) terminando o nosso exemplo de menu na pgina 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. Podamos ter utilizado apenas #menu a, dado que todos os links se encontram dentro de elementos <li> e no 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 verso abreviada). Mas nesse caso tambm teramos de definir um estilo para a:visited, a:hover e a:active com outros valores (ou no) para as mesmas propriedades.
366
O que se faz normalmente definir um conjunto de propriedades comuns aos quatro estados num nico estilo a que abrange todos esses estados. S so 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 utilizao de um estilo a, corresponde a um hipottico 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 possuem 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 (podamos ter utilizado em alternativa, #menu a:hover):
367
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 no preenche todo o rectngulo onde o link se encontra:
Isto acontece porque as propriedades padding e background-color esto aplicadas ao elemento <li> e no 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 cdigo (o que mais rpido), ou utilizando a caixa de dilogo CSS RULE DEFINITION. Agora, j muda a cor de todo o rectngulo (o elemento <li>) onde o link se encontra:
368
As imagens do exemplo que temos estado a apresentar foram obtidas num browser, mas podemos, em modo DESIGN, perceber que propriedades so afectadas pelos vrios estados dos links recorrendo barra STYLE RENDERING:
Para obter esta barra de ferramentas aceda opo VIEW > TOOLBARS > STYLE RENDERING ou clique com o boto do direito do rato (CONTROL+CLIQUE no Macintosh) em cima da barra DOCUMENT e seleccione a opo 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 pginas Web
Originalmente as pginas Web no eram atractivas dado que os elementos HTML eram limitados e no permitiam desenhar layouts complexos. A maior parte do contedo era contnuo, isto , aparecia um a seguir ao outro, sendo constitudo maioritariamente por texto. Entretanto algum se lembrou de utilizar tabelas para desenhar layouts mais complexos. Dessa forma, tivemos durante muitos anos pginas 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 no para desenhar layouts, por isso com o tempo comearam a mostrar muitas limitaes. Entretanto, com o aparecimento das frames, a filosofia de desenho dos layouts alterou-se um pouco. J no se tratava de um layout definido em cada pgina, mas sim de um layout nico que referenciava todas as pginas do stio Web. Contudo, e por vrias razes, as frames caram em desgraa, de tal forma que hoje em dia o W3C, entidade que desenvolve e gere as normas que so aplicadas na Internet e na World Wide Web, define as frames como estando deprecated, o que significa que no aconselham a sua utilizao. Mas ento qual a forma correcta de desenhar layouts de pginas Web? Utilizando estilos CSS e as propriedades float e position, que foram criadas com o propsito de controlar o posicionamento dos elementos HTML numa pgina Web.
13.1 Utilizar tabelas para layout

Existem muitos tipos de layouts de pginas que so utilizados nas pginas Web, mas o mais comum do tipo:
370
Cabealho
Menu
Contedo
Rodap
Este layout visualmente parecido com uma tabela de 2 colunas e 3 linhas do tipo:
Se definirmos a primeira coluna mais estreita que a segunda,
atribuirmos o valor 1 ao atributo cellspacing,
fizermos a fuso das clulas da primeira linha,
13. LAYOUT DE PGINAS WEB
371
e a fuso das clulas da terceira linha, temos a estrutura base do layout:
Atribumos uma largura de 100% tabela para ela se ajustar automaticamente largura da janela do browser. Mas podamos ter utilizado pxeis para atribuir largura um valor fixo. Na clula do lado esquerdo, que vai conter o menu, atribumos uma largura de 160 pxeis. Agora s falta colocar contedo em cada clula. Vamos utilizar este layout para a nossa pgina quemsomos.html. Criamos esta tabela no topo da pgina, antes do logtipo, e depois arrastamos o contedo para cada uma das clulas. O resultado, utilizando os estilos CSS que j aplicamos anteriormente, :
O que que aconteceu ao menu? No deveria estar encostado ao topo da respectiva clula? O que se passa que, por omisso, o HTML alinha ao centro verticalmente o contedo das clulas de uma tabela. Para corrigir o problema seleccionamos a clula onde se encontra o menu e no PROPERTY INSPECTOR atribumos o valor top ao atributo valign (campo VERT):
372
Aproveitamos para fazer a mesma operao para a clula que contm o texto, embora neste caso no fosse necessrio:
No rodap vamos colocar a morada da empresa e um elemento <hr> para a separar do resto do texto da pgina:
Aplicamos o seguinte estilo aos pargrafos da morada:

.morada { margin-top: 0px; margin-bottom: 0px; text-align: center; font-size: 10px; }
373
Tanto o contedo do cabealho, o texto da rea de contedo e o texto do rodap, esto muito perto dos limites das clulas. Podamos atribuir um valor ao atributo cellpadding da tabela, mas nesse caso o contedo do menu tambm seria afectado. O ideal mesmo criar um estilo do tipo classe e com o nome .afastarlimite, em que atribumos 15px propriedade padding:
No se esquea de aplicar este estilo s trs clulas (excepto a clula que contm o menu). Atribuindo o valor 0 ao atributo border da tabela (pode faz-lo no PROPERTY INSPECTOR) temos a nossa pgina pronta (visualizada em LIVE VIEW):
374
Ainda podamos inserir no cabealho uma nova tabela com 2 colunas e 1 linha para colocar o logtipo e o ttulo em cada clula. Teramos primeiro de remover o atributo align da imagem e o estilo CSS que lhe est aplicado. Tentou-se utilizar o mximo de elementos e atributos HTML para demonstrar como que se utilizavam tabelas para criar layouts no passado. Este conhecimento de como se criam layouts com tabelas importante porque ainda existem na Web muitas pginas desenhadas desta forma, e muitas vezes temos de as alterar. Contudo, esta forma de criar layouts est completamente ultrapassada e foi substituda pela utilizao de CSS.
13.2 Frames
Uma frame uma regio na janela do browser que pode apresentar um documento HTML independentemente do que est a ser apresentado no resto da janela do browser. As frames disponibilizam ento uma forma de dividir a janela do browser em mltiplas regies, cada um das quais com um documento HTML diferente. Na utilizao habitual das frames, uma frame apresenta um documento que contm os controlos de navegao, enquanto outra frame apresenta o contedo de outros documentos. Um frameset um ficheiro HTML que define o layout e as propriedades de um conjunto de frames, incluindo o nmero de frames, o tamanho e localizao das frames e o endereo (URL) da pgina que aparece inicialmente em cada frame. O ficheiro frameset no possui contedo HTML que seja apresentado no browser excepto a seco noframes que contm a informao a apresentar em browsers que no suportam frames. A maior parte dos web designers (e a prpria Adobe) desaconselha a utilizao de frames, devido a vrias razes: Dificuldade no alinhamento de elementos existentes em frames diferentes; Problemas em fazer o bookmarking de uma determinada pgina, dado que o endereo (URL) que aparece na barra ADDRESS [ENDEREO] sempre o mesmo. Problemas na impresso de todo o contedo visvel na janela do browser. Problemas com o boto de REFRESH e o boto BACK [RETROCEDER] dos browsers.
375
Embora a maior parte destes problemas no ocorra nos browsers mais recentes, a m fama associada s frames muito difcil de combater e por isso caram em desuso. A utilizao mais comum das frames para facilitar a navegao dentro de um stio Web. Normalmente, uma das frames possui um menu, e outra frame recebe as pginas 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 pgina, se tenha sempre que voltar ao incio da pgina. A frame que possui o menu est sempre acessvel e visvel. No nosso stio Web a pgina index.html parece a candidata ideal para ser convertida para frames obedecendo ao layout que definimos anteriormente. Alm de criar a pgina que corresponde ao frameset, temos tambm de criar 4 pginas diferentes para o cabealho, para o menu, para a rea de contedo e para o rodap. No Dreamweaver existem duas formas de criar um frameset: Pode seleccionar um dos framesets predefinidos; Ou pode desenhar o seu prprio frameset. Para utilizar um dos framesets predefinidos aceda opo FILE > NEW. Na caixa de dilogo NEW DOCUMENT,
seleccione na primeira coluna a opo 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 aparncia no lado direito da caixa de dilogo.
376
Depois de se clicar no boto CREATE aparece a j nossa conhecida caixa de dilogo de atributos de acessibilidade:
em que, para cada frame podemos especificar um ttulo. Vamos atribuir os seguintes ttulos: topFrame Logotipo leftFrame Menu mainFrame Contedo Tambm possvel criar um frameset predefinido recorrendo categoria LAYOUT do painel INSERT:
Mas, neste caso, primeiro ter de criar uma pgina HTML em branco. O aspecto do frameset na janela de documento do Dreamweaver :
377
As linhas cinzentas que dividem as frames podem ser escondidas (ou mostradas) seleccionando a opo FRAME BORDERS do menu VISUAL AIDS:
Pode-se agora comear a introduzir contedo em cada uma das frames. Mas antes de o fazer, convm guardar as 4 pginas, utilizando para isso a opo FILE > SAVE ALL. Primeiro o Dreamweaver pede-lhe o nome a atribuir ao frameset e depois o nome para cada frame. medida que vai pedindo os nomes, o Dreamweaver assinala na janela DOCUMENT a frame que vai guardar:
378
Em alternativa pode clicar em cada uma das frames e utilizar o comando FILE > SAVE FRAME ou FILE > SAVE FRAME AS. Os nomes que atribumos foram: index.html, cabecalho.html, menu. html, conteudo_inicial.html. Guardamos estes ficheiros numa pasta com o nome frames. Optamos por no criar o rodap. Vamos agora copiar o contedo da pgina index.html, que tnhamos criado anteriormente no root folder, para as diversas frames. Cada frame funciona como uma pgina independente. Para inserir contedo basta colocar o cursor dentro da frame e escrever texto ou inserir imagens. A aparncia do nosso frameset neste momento :
Repare que aparentemente a frame cabecalho no possui espao suficiente para o logtipo, embora se virmos a pgina no modo LIVE VIEW, parea estar tudo bem. Para efectuar alteraes 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 visvel seleccione a opo WINDOW > FRAMES):
379
Tenha em ateno que seleccionar uma frame no o mesmo que colocar o cursor dentro da frame. As propriedades disponveis no PROPERTY INSPECTOR para uma frame so:
O nome das frames (campo FRAME NAME) utilizado em vrios locais nomeadamente na propriedade target dos links. Por omisso, as frames no possuem molduras (campo BORDERS), no podem ser redimensionadas (campo NO RESIZE) e no tm barras de deslocamento (campo SCROLL), mas no PROPERTY INSPECTOR estes valores podem ser alterados. 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 cdigo 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>
380
O frameset principal est dividido em duas linhas (que so frames), como atesta o atributo rows, cujo valor 80,* define que a linha superior tem uma altura de 80 pxeis e a linha de baixo tem como altura o resto do espao disponvel ( isso que significa o *). A linha de baixo est dividida em duas colunas (que so frames) por um outro frameset. A primeira frame deste frameset tem uma largura de 80 pxeis. No PROPERTY INSPECTOR, com o frameset principal seleccionado, tambm obtm esta informao:
Aqui pode controlar as dimenses das frames e a apresentao da border em cada frame. Vamos tratar agora dos links. Em primeiro lugar vamos aumentar as dimenses 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 pxeis:
Agora, para cada link temos de definir a pgina destino e seleccionar em que frame que se pretende que essa pgina 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 fcil de identificar):
381
Se no seleccionar uma frame no campo TARGET, o que vai acontecer a pgina destino substituir a pgina menu.html na frame leftFrame e perder assim o nosso menu. No se pode esquecer de seleccionar o valor mainFrame para todos os links do menu. No captulo sobre links j tnhamos mencionado que a maior parte dos valores fixos que aparecem no campo TARGET dizem respeito a frames: _blank abre a pgina destino numa nova janela do browser (ou numa nova aba/separador); _parent abre a pgina destino por cima do frameset parente da frame corrente, substituindo assim todo esse frameset; _self abre a pgina destino na frame corrente, substitundo o contedo da frame; _top abre a pgina destino na janela corrente do browser, substituindo todas as frames (e por arrasto o frameset principal). Experimentando agora a nossa pgina num browser e clicando no link FAQ, o resultado :
Escolhemos o link FAQ dado que a pgina faq.html no tem grande formatao e no possui o logtipo. Tente agora o link QUEM SOMOS e ver que
382
ainda temos muito trabalho pela frente, nomeadamente remover todos os logtipos das pginas j criadas, e alterar a forma como a informao apresentada nessas pginas, de forma a adequ-la ao layout criado com as frames.
13.3 Layouts CSS

Com o aparecimento e a evoluo das CSS, os web designers passaram a ter uma ferramenta que possibilitava a criao de layouts sofisticados. A transio 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 aps alguns stios Web de referncia terem feito a converso, os outros stios seguiram o exemplo. Alm disso, comearam a surgir formas de contornar os problemas colocados pelo Internet Explorer.
13.3.1 Tracing image

A maior parte das vezes os layouts de pginas Web so criados em ferramentas de desenho, como o Adobe Photoshop, o Adobe Fireworks ou o Adobe Illustrator. A facilidade de criar, mover e apagar objectos nestas aplicaes torna-as a ferramenta ideal para a tarefa. S que depois necessrio converter esse layout para elementos HTML e propriedades CSS. O Dreamweaver facilita essa converso permitindo que uma imagem JPEG, GIF, ou PNG seja utilizada como imagem de fundo da pgina para servir como guia no desenho do layout Web. Esta funcionalidade tem o nome de tracing image, e a imagem apenas visvel no Dreamweaver, no aparecendo quando a pgina visualizada num browser. Como evidente, depois do layout da pgina estar concludo, conveniente remover a tracing image. A cor ou imagem de fundo da pgina no so visveis quando se utiliza uma tracing image. Para colocar uma tracing image num documento, pode-se utilizar um de dois mtodos: Seleccionar a opo VIEW > TRACING IMAGE > LOAD; Seleccionar a opo MODIFY > PAGE PROPERTIES e, na caixa de dilogo que aparece, seleccionar a categoria TRACING IMAGE e depois clicar no boto BROWSE:
383
Em qualquer dos casos aparece a caixa de dilogo SELECT IMAGE SOURCE onde se selecciona o ficheiro que contm a imagem que se pretende utilizar como tracing image. Uma das primeiras decises que se tem de tomar o nvel de transparncia da tracing image. Por omisso, esse nvel 100%, o que produz uma imagem opaca que pode interferir com o trabalho normal de desenho da pgina no Dreamweaver. Na caixa de dilogo PAGE PROPERTIES (opo MODIFY > PAGE PROPERTIES), existe um slider que permite definir o nvel de transparncia:
Um nvel de transparncia de 50% suficiente para se ter uma ideia do layout que temos de criar, e no interfere com o trabalho de desenho da pgina no Dreamweaver:
O menu VIEW > TRACKING IMAGE possui diversas opes que nos permitem controlar a visualizao e o posicionamento da tracing image:
384
A opo SHOW mostra ou esconde a tracing image, o que til quando se pretende ver a pgina com a respectiva cor ou imagem de fundo. Caso pretenda colocar a tracing image em outra posio, seleccione a opo ADJUST POSITION, e na caixa de dilogo ADJUST TRACING IMAGE POSITION,
introduza novas coordenadas X e Y, que so relativas ao canto superior esquerdo da pgina. Repare que, por omisso, a tracing image no est encostada ao lado esquerdo e ao topo, mas se atribuir o valor 0 s duas coordenadas, 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 no podem existir dois elementos block-level na mesma linha, a no ser que se utilizem propriedades CSS para alterar esse comportamento. Isto tambm significa que quando se utiliza um elemento HTML do tipo blocklevel, 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 pargrafo no pode conter listas, tabelas, cabealhos 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 blocklevel: h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, blockquote, hr, div, form e fieldset. So estes elementos que estruturam o contedo de uma pgina.
385
Os elementos inline so tratados como parte do fluxo do texto do documento. Apenas ocupam na pgina o espao relativo ao seu contedo, no obrigando o browser a mudar de linha. De uma forma geral, os elementos inline apenas podem conter dados e outros elementos inline. Teoricamente tambm no se pode definir a largura e a altura de um elemento inline, se bem que algumas verses 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 diferenas entre eles: A cor de fundo aplicada ao elemento block-level (que um pargrafo) permite verificar que utilizada toda a largura da janela do browser (ou do elemento parente do pargrafo). Enquanto que, no caso do elemento <span>, que um elemento inline, apenas o texto recebe a cor de fundo. Como j vimos anteriormente possvel 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 contrrio dos outros elementos HTML, no visvel, por omisso, numa pgina. Este o elemento por excelncia que utilizado nos layouts CSS. Para se inserir um elemento <div> na pgina podemos utilizar a opo INSERT > LAYOUT OBJECT > DIV TAG, mas mais prtico recorrermos ao cone INSERT DIV TAG da categoria LAYOUT do painel INSERT:
A caixa de dilogo INSERT DIV TAG permite-nos definir onde que vamos inserir o elemento <div> (campo INSERT), o que nos vai ser til mais para a frente:
386
Temos tambm a possibilidade de atribuir uma identificao (campo ID), que sempre obrigatria neste tipo de elementos dado que a forma ideal de serem referenciados num selector CSS. O boto 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 preenchido o campo ID). Aps atribuirmos um id ao elemento e clicarmos no boto OK, a aparncia do elemento no documento :
Como um elemento <div> no possui nenhum contedo de origem, nem visvel na pgina, o Dreamweaver insere o texto CONTENT FOR ID "CONTEUDO" GOES HERE, alm de colocar um quadrado tracejado a definir os respectivos limites (se a opo CSS LAYOUT OUTLINES estiver activada). Se o Dreamweaver no utilizasse estas formas de identificar o elemento div na pgina, o web designer teria dificuldade em o identificar. Mas mesmo sem estas ajudas, possvel identificar um elemento div porque quando se passa com o rato por cima dos seus limites (a chamada outline), aparece um rectngulo vermelho:
Se clicar nesse rectngulo, o elemento div ficar seleccionado, aparecendo agora identificado com um rectngulo azul:
Normalmente costuma-se criar um elemento div e s depois colocar contedo l dentro. Mas pode acontecer que j tenha o contedo introduzido na pgina e pretenda colocar esse contedo dentro de um elemento div. Se o elemento div j existir, pode arrastar o contedo para dentro dele. Se o elemento div no existir, uma forma rpida de o criar j com o contedo l dentro recorrer opo INSERT DIV TAG da categoria LAYOUT do painel INSERT. Com o contedo seleccionado,
387
escolha essa opo e depois, na caixa de dilogo que aparece, repare que o valor seleccionado na lista INSERT W RAP AROUND SELECTION,
o que significa que o elemento div vai ser colocado volta do contedo seleccionado:
Se preferir um mtodo que recorra apenas ao teclado, com o contedo seleccionado, tecle CONTROL+T (COMMAND+T no Macintosh) e escreva o seguinte:
13.3.4 Opes de visualizao dos elementos CSS

Atravs do menu VISUAL AIDS, o Dreamweaver disponibiliza ajudas visuais que ajudam o web designer a identificar visualmente na pgina certas propriedades CSS relacionadas com o layout:
As quatro ajudas s so aplicadas aos CSS LAYOUT BLOCKS que o nome genrico atribudo no Dreamweaver aos elementos div ou a qualquer ele-
388
mento da pgina que possua as seguintes propriedades e valores CSS atribudos: 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 pargrafo com uma propriedade position definida com o valor absolute ou relative; Por omisso, trs destas ajudas esto 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 (rectngulo tracejado), aparecem identificadas visualmente as propriedades referidas:
E esperando 1 segundo com o cursor em cima de qualquer parte do CSS LAYOUT BLOCK, aparece tambm uma tooltip com os valores dessas propriedades. No caso do contedo, aparecem outras propriedades que no tm a ver com o box model:
389
CSS LAYOUT OUTLINES apresenta um rectngulo tracejado (em ingls, outline) volta dos CSS LAYOUT BLOCKS. por causa desta opo estar activada que os elementos div aparecem na vista DESIGN do Dreamweaver identificados por um rectngulo tracejado. AP ELEMENT OUTLINES permite identificar os elementos que esto posicionados de forma absoluta, isto , que possuem o valor absolute na propriedade position. Outra opo que bastante til mas que no est seleccionada por omisso a CSS LAYOUT BACKGROUNDS que atribui temporariamente cores de fundo aleatrias a CSS LAYOUT BLOCKS, e esconde outras cores ou imagens de fundo que existam na pgina. As cores utilizadas ajudam a identificar rapidamente, por exemplo, os elementos div existentes na pgina. Por exemplo:
13.3.5 Utilizao de floats

Normalmente, os elementos HTML que so inseridos numa pgina seguem um fluxo que vai do topo ao fundo da pgina. Contrariamente aos programas de desenho, no existe nenhum elemento HTML que possibilite colocar elementos block-level, como pargrafos ou elementos div uns ao lado dos outros. Com os elementos inline, isso j possvel, 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 criao de layouts e permite retirar um determinado elemento/objecto do fluxo normal do contedo de uma pgina e flutuar esse elemento. Uma das utilizaes mais comuns para colocar texto volta de uma imagem. Lembre-se que efectuamos esta operao num captulo anterior recorrendo 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 convm tambm atribuir um valor propriedade margin-right para afastar o texto do lado direito:
390
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 aparea na sequncia 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, no para encaixar num design predefinido. Os elementos da pgina devem ter um significado. o fluxo normal do documento HTML deve controlar a maior parte do layout. muitos utilizadores visualizaro, por vrias razes, o contedo da pgina sem estilos CSS. Nesses casos pretender assegurar que os elementos da pgina aparecem por uma ordem lgica. Da a importncia de estruturar a pgina com elementos HTML.
391
Recorrendo propriedade float vamos agora criar o layout que definimos anteriormente utilizando tabelas e frames. Dica Durante este exerccio convinha que estivesse activada a opo CSS LAYOUT BACKGROUNDS do menu VISUAL AIDS (barra DOCUMENT), para que seja atribuda uma cor de fundo a cada elemento div que criarmos. Evitamos assim a utilizao de cores de fundo para conseguir distinguir entre os vrios elementos div que vamos criar. Em primeiro lugar temos de criar cinco elementos div. Um para cada rea (cabealho, menu, contedo e rodap), mais um que envolve estes quatro. Este elemento div exterior, que na gria se chama wrapper, e envolve todo o contedo da pgina, possibilita, entre outras coisas, centrar o contedo da pgina na janela do browser. Permite tambm definir uma largura para o contedo da pgina, e fornecer um ponto de referncia para esse contedo. Dentro do wrapper coloca-se todo o contedo da pgina pela ordem pela qual se pretende que seja acedido, para o caso do visitante no utilizar estilos CSS. No nosso caso, a ordem dos elementos div ser (utilizamos os nomes que vamos atribuir a cada um deles: wrapper cabecalho menu conteudo rodape Visualmente, o layout pretendido :
Wrapper Cabealho
Menu
Contedo
Rodap
392
Todos os browsers possuem valores por omisso para as margens e o padding do elemento body. Para um posicionamento consistente em todos os browsers convm 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 contedo da pgina, mas alguns browsers vem o elemento html como o elemento parente de topo, da a sua incluso no selector CSS. Podemos agora atribuir uma cor de fundo pgina e centrar os elementos:
body { text-align: center; background-color: #9FF }
J anteriormente tnhamos definido no ficheiro estilos.css uma cor por omisso para o fundo de todas as pginas, por isso, no necessitvamos de o fazer aqui. A utilizao da propriedade text-align com o valor center prende-se com um problema existente em algumas verses do Internet Explorer que no interpretam correctamente a propriedade margin com o valor auto, que vamos utilizar para centrar o wrapper na pgina. Agora inserimos na pgina o elemento div correspondente ao wrapper (o div inserido na posio corrente do cursor na pgina),
e criamos um estilo com as seguintes propriedades clicando no boto NEW CSS RULE:
#wrapper { margin: 0 auto width: 930px; }
393
A propriedade margin utilizada para centrar o elemento div na pgina. Habitualmente definimos um valor para cada margem o que corresponde a quatro propriedades: margin-top, margin-right, margin-bottom, margin-left. Quando utilizamos o mesmo valor para todas as margens podemos utilizar uma nica propriedade: margin:10px. Mas neste caso temos dois valores. O valor 0 para as propriedades margin-top e margin-bottom, enquanto o valor auto para as propriedades margin-left e margin-right. Inserindo os valores na caixa de dilogo 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 perfeitamente centrado. A largura foi definida atribuindo um valor em pxeis, e define a largura mxima utilizada para o contedo. Num ecr com uma resoluo de 1024x768, este valor o adequado, embora pudssemos utilizar um valor ligeiramente maior. Caso o visitante veja a pgina num ecr com uma resoluo superior, por exemplo, 1280x1024 (ou 1280x800, que a resoluo de muitos portteis), aparecero duas barras verticais de cada lado do contedo com a cor de fundo da pgina. Alm da resoluo 1440x900 utilizada nos ecrs wide, estas so as trs resolues mais utilizadas nos monitores dos visitantes dos stios Web. Podemos evitar que essas barras apaream utilizando unidades relativas, como percentagens, mas neste caso mais trabalhoso o controlo do design. Este tipo de layouts mais flexveis tem o nome de liquid layouts, enquanto os layouts que utilizam unidades absolutas (como pxeis) se chamam fixed layouts. possvel ter uma mistura dos dois, por exemplo fixando a largura de certos elementos da pgina, como o nosso menu, e permitindo que outros elementos, como o nosso div com o contedo, tenham uma largura flexvel que se adapta dimenso da janela do browser. A nossa pgina tem neste momento o seguinte aspecto (em modo DESIGN):
394
Primeiro apagamos o texto que se encontra dentro do wrapper (o div ficar muito estreito mas no se preocupe) e em seguida vamos criar o div para o cabealho. Para assegurar que criamos este novo div dentro do wrapper, vamos seleccionar a opo AFTER START OF TAG no menu INSERT e o valor <DIV ID="WRAPPER"> na lista que aparece a seguir (AFTER START OF TAG significa aps a etiqueta/tag de incio, o que quer dizer, dentro do elemento) :
Depois de introduzirmos o nome no campo ID, clicamos no boto NEW CSS RULE para criar um estilo para este div:
Atribumos uma altura de 100px a este elemento div porque o nosso logtipo tem uma altura de 72px, mas podamos no ter atribudo nenhum valor, que o contedo do elemento div definiria a altura a utilizar. A largura idntica do div wrapper. O div que vai conter o menu, definido para aparecer a seguir ao div do cabealho (repare no campo INSERT):
395
Para este div vamos s definir a largura:

#menu { width: 200px; }
Em modo DESIGN (e com a opo CSS LAYOUT BACKGROUNDS activada) a nossa pgina tem o seguinte aspecto:
Segue-se o div para o contedo especfico de cada pgina:
Para j no vamos criar nenhum estilo para este div. Finalmente, criamos o elemento div para o rodap:
Neste div no vamos definir a altura, deixando que o contedo a defina. A largura idntica do div wrapper, embora, como se trata de um elemento block-level, ajustava-se automaticamente largura do seu elemento parente que o wrapper.
396
#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 contedo da pgina. A aparncia actual da nossa pgina :
E em cdigo:
<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 elemento menu:
#menu { width: 200px; float: left; }
O resultado no bem o esperado:
397
O elemento conteudo passou para o lado direito do elemento menu, mas tambm se encontra por baixo deste elemento. O elemento rodape tambm 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 conteudo. Temos de criar um estilo para este elemento:
A largura utilizada corresponde ao resultado da subtraco 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 poderamos ter, de forma natural, um espao entre os elementos menu e conteudo sem recorrer a margin e a padding. Mas para isso teramos de reduzir a largura do elemento conteudo em alguns pxeis. Repare que agora o rodap ainda est debaixo do elemento menu:
Se introduzirmos alguns pargrafos em branco no elemento conteudo para simular linhas de texto, repare como o elemento rodape parece que s aparece debaixo do elemento menu:
398
O elemento rodape est a tentar encontrar um espao livre no fluxo do contedo do documento em que se possa encaixar. Mas ns no 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 no deve flutuar para nenhum dos lados. O problema da propriedade float que todos os elementos que aparecem, no fluxo do documento, a seguir a um elemento que tenha essa propriedade definida, herdam a propriedade. Para cortar essa ligao recorremos propriedade clear com o valor both:
E c temos ns o nosso layout terminado, faltando apenas a introduo de contedo:
Repare que o contedo de cada div aparece centrado. Isso deve-se utilizao de text-align: center no elemento body por causa de problemas com o Internet Explorer. Temos ento 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 contedo extrado da pgina quemsomos.html o resultado :
399
Necessitamos de atribuir uma margem superior imagem (10px), dado que est muito encostada ao limite da pgina, e de afastar dos limites o texto que se encontra dentro do elemento conteudo. Poderamos ser tentados a utilizar um padding (15px) no elemento conteudo, mas o resultado no seria o esperado (visualizao 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 contedo, mais a largura do padding direito, mais a largura da moldura direita. Neste caso, no temos moldura definida, mas temos os outros trs valores que, somados, 15+730+15, perfazem 760. Se somarmos a
400
largura do elemento menu (200px), chegamos ao valor 960px que superior largura do elemento wrapper, que 930px. Como o elemento conteudo no cabe nas dimenses do elemento wrapper ao lado do elemento menu, passou para baixo. C est um dos problemas da utilizao de unidades absolutas e de valores fixos na largura dos elementos do layout de uma pgina. necessrio fazer muito bem as contas para tudo bater certo. Para resolver o problema, mudamos a largura do elemento conteudo para 700px:
Em alternativa podamos ter utilizado margens, mas existem verses do Internet Explorer que se do mal com a sua utilizao em elementos que possuem atribuda uma propriedade float.
13.3.7 Starter Pages

A utilizao de floats para criar layouts de pginas um pouco complicada para quem nunca trabalhou ou tem pouca experincia com CSS. Esta dificuldade ainda maior se pretendermos criar layouts mais sofisticados. A Adobe, reconhecendo este problema, disponibiliza no Dreamweaver layouts predefinidos aos quais chamou starter pages. So layouts que obedecem s normas, e so compatveis cross-browser, o que significa que tm praticamente a mesma aparncia numa conjunto de browsers e de verses desses browsers, nomeadamente: Internet Explorer 5 a 8 Firefox Mac/Windows 1, 2 e 3
401
Opera Mac/Windows 8 e 9 Safari 2, 3 e 4 Para se criar um destes layouts acede-se caixa de dilogo NEW DOCUMENT, atravs da opo FILE > NEW:
As Starter Pages aparecem na coluna LAYOUT, a seguir opo <none>. Na imagem anterior temos seleccionada a opo que corresponde ao layout que criamos anteriormente. Repare que existem layouts com larguras fixas (fixed) e com larguras variveis (liquid), e com 1, 2 ou 3 colunas. Caso tenha instalado a verso 11.0.3 ou o Dreamweaver CS5 HTML 5 Pack Update, ter de bnus mais dois layouts que utilizam as normas HTML5 e CSS3. Quando escolhe uma das starter pages, o Dreamweaver permite colocar os estilos utilizados na pgina, numa nova folha de estilos externa, numa folha de estilos existente, ou embeber os estilos na prpria pgina:
O ideal colocar os estilos CSS num ficheiro separado para que possa ser utilizado em outras pginas do stio Web. Ter de atribuir um nome ao ficheiro, como, por exemplo, estilos.css.
402
Escolhendo ento a starter page 2 COLUMN FIXED, LEFT SIDEBAR, HEADER AND FOOTER, o que aparece na janela DOCUMENT do Dreamweaver o seguinte:
Contedo exemplo e cores neutras de fundo marcam claramente as reas de contedo que pode ser substitudo pelo nosso prprio contedo. Se reparar, a maior parte das reas tem instrues sobre a forma de substituir o contedo. Se mudar para a vista CODE pode verificar que os estilos e as propriedades CSS utilizadas tm comentrios associados para que o web designer aprenda a criar layouts:
403
13.3.8 Posicionamento absoluto de elementos

Para os designers que esto habituados a utilizar o Adobe Photoshop ou outro tipo de programas de desenho, a utilizao de floats para criar um layout de uma pgina muito complicada. Esses designers esto habituados a colocar os elementos numa pgina sem qualquer tipo de restries. Uma possibilidade de criar layouts de pginas que pode agradar a esses designers a utilizao de elementos posicionados de forma absoluta. Neste caso, a pgina uma folha em branco e podemos dispor os nossos elementos (normalmente elementos div) em qualquer parte da pgina. 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 no tem aplicada uma propriedade position, ento o elemento de referncia para todos os elementos div da pgina, inclusive para o elemento wrapper, o elemento body e neste caso o ponto 0,0 o canto superior esquerdo da pgina. Uma das limitaes deste tipo de posicionamento que temos sempre de fornecer as coordenadas para posicionar o elemento, dado que ele removido do fluxo normal do documento e flutua por cima do resto do contedo da pgina. Estas coordenadas so definidas pelas propriedades left e top, que so relativas aos limites da pgina. Isto , um valor de 20px atribudo propriedade left significa que o elemento ao qual a propriedade aplicada ficar afastado 20px do limite esquerdo da pgina. Como curiosidade o facto de se poderem utilizar valores negativos nas coordenadas. Isso significa que o elemento ter parte do contedo fora do ecr. Dado que podem existir vrios elementos posicionados de forma absoluta numa pgina, existe a probabilidade de se sobreporem. Para controlar a ordem de sobreposio existe a propriedade z-index. Por omisso o valor 0 corresponde ao contedo normal da pgina. Valores mais altos significam que os elementos aos quais so aplicados aparecem por cima dos outros. Podemos ver esta sobreposio como sendo o equivalente aos layers dos programas de desenho. Vamos converter o nosso layout para elementos posicionados de forma absoluta. Para inserir um elemento deste tipo numa pgina (no Dreamweaver estes elementos chamam-se AP ELEMENTS), recorremos ao cone DRAW AP DIV do panel INSERT (em alternativa, INSERT > LAYOUT OBJECTS > AP DIV):
404
O cursor transforma-se numa cruz, +, e temos de desenhar o div na pgina utilizando o mtodo de clicar e arrastar:
Para desenhar o elemento AP Div, o ideal activar a rgua e provavelmente definir algumas guias. Depois de largar o rato o elemento div tem o seguinte aspecto:
O cdigo relativo ao elemento AP Div, que no mais do que um elemento div com um atributo id,
<div id="apDiv1"></div>
inserido no local onde o cursor se encontrava na pgina.
405
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 omisso, no tem cor de fundo:
Mesmo sem estar seleccionado, o elemento AP Div visvel na pgina porque normalmente uma das opes 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 esto disponveis e que valores foram atribudos quando desenhamos o elemento:
406
Foram definidas as coordenadas do canto superior esquerdo (left e top) a largura (height) e a altura (width). Tambm foi atribudo um id ao elemento criado (apDiv1). O valor 1 no campo Z-INDEX significa que o elemento flutua por cima do contedo normal da pgina. No painel CSS STYLES tambm podemos verificar que foi criado um estilo que tem associadas todas estas propriedades que aparecem no Property Inspector.
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 permite seleccionar elementos AP, verificar que elementos AP se encontram na pgina, se esto ou no visveis (propriedade visibility que tambm pode ser definida no PROPERTY INSPECTOR) e qual o respectivo valor da propriedade z-index:
Repare que medida que vai criando novos elementos AP Div o Dreamweaver 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 pgina e depois atribumos os seguintes valores ao estilo CSS associado:
407
Ao criarmos os elementos AP Div para o menu e o conteudo, deparmo-nos com um problema. Que valor vamos utilizar para a propriedade height? Na realidade podemos utilizar qualquer valor, dado que o contedo do elemento AP Div vai esticando medida que o contedo vai necessitando de espao. Por isso a propriedade height apenas um valor mnimo, a no ser que se utilize a propriedade overflow. Para o AP Div menu,
e para o AP Div conteudo:
Neste momento a pgina tem a seguinte aparncia:
408
S falta agora criar o AP Div para o rodape. Mas agora que temos um problema srio. Que valor vamos atribuir propriedade top deste elemento? que no temos forma nenhuma de saber qual vai ser a altura dos elementos menu e conteudo. Esta uma grande limitao de apenas utilizarmos posicionamento absoluto para criarmos um layout de uma pgina. Claro que possvel criar um layout desta forma, mas apenas se soubermos de antemo as dimenses (largura e altura) dos elementos AP Div que vamos utilizar. Alm disso impossvel criar layouts flexveis que se adaptam s dimenses da janela do browser do visitante do nosso stio Web e resoluo do respectivo ecr. A maior parte das vezes os elementos posicionados de forma absoluta utilizam-se em conjunto com os floats e o posicionamento relativo para criar determinados efeitos que so impossveis de obter de outra forma. Outra utilizao a criao de pseudo-pop-ups como os que so actualmente utilizados para apresentar publicidade criada em Flash por cima do contedo da pgina. O stio Web do jornal Pblico um dos utilizadores dessa tcnica.
13.3.9 Posicionamento relativo

O posicionamento relativo de um elemento tem a ver com um novo posicionamento do elemento relativamente ao local onde seria encontrado na pgina. Podemos utilizar as propriedades left, top, right e bottom para controlar essa nova localizao. O espao ocupado originalmente pelo elemento permanece inalterado e como se o elemento ainda l estivesse, no podendo ser utilizado por outro elemento da pgina. O espao originalmente ocupado pelo elemento permanece na pgina. De realar que um elemento posicionado de forma relativa continua a fazer parte do fluxo normal do documento. A utilizao de elementos posicionados de forma relativa bastante limitada, mas em alguns casos importante. O posicionamento relativo permite-nos, por exemplo, reproduzir o comportamento dos elementos <sub> e <sup> do HTML. Num captulo anterior criamos em HTML o smbolo qumico da gua, H2O. Para faz-lo com propriedades CSS, primeiro colocvamos o 2 dentro de um elemento span e atribuamos-lhe um id (por exemplo, agua):
Basta agora criar um estilo CSS com as seguintes propriedades e valores:
409
Reduzindo o tamanho da letra para 0.8em,
obtemos o resultado pretendido:
Outra utilizao do posicionamento relativo permitir redefinir o elemento parente de um elemento posicionado de forma absoluta. Referimos anteriormente que no caso dos elementos posicionados de forma absoluta, o elemento parente o primeiro na hierarquia que possua uma propriedade position definida. Caso no exista nenhum, o que o mais comum, ento o posicionamento efectuado em relao ao pai de todos os elementos da pgina, o elemento body. Combinando o posicionamento absoluto e o posicionamento relativo, vamos colocar o menu existente na pgina index.html no canto superior direito do nosso layout:
410
Copiamos, da pgina index.html, o elemento ul e os estilos que lhe esto associados. Temos de efectuar uma ligeira alterao no div menu, tendo de mudar-lhe o nome para div_menu para no interferir com o elemento ul que tambm se chama menu. Mudamos tambm o nome do estilo #menu associado ao div, para #div_menu. A lista deve ser colocada a seguir ao logtipo:
<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="Informao 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 (visualizao em LIVE VIEW):
Atribumos agora o valor relative propriedade position do elemento cabecalho:
411
No alterada a aparncia da pgina dado que no mexemos nas propriedades 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 no numerada:
Tambm no houve alteraes na pgina e pela mesma razo 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 no encosta parte de cima da pgina. Isso acontece devido forma como foi construdo. A soluo manipular a margem superior do elemento ul:
412
O resultado final :
Ser que o posicionamento deste menu podia ser efectuado de outra forma? Podia, mas no era a mesma coisa! Por exemplo, podamos criar dois elementos div, um com a imagem e outro com a lista. Aplicvamos um float: left ao div que tinha a imagem e um float:right ao div que tinha a lista. Em seguida alinhvamos o texto direita no div que continha a lista, e fazamos as contas para definir o valor a aplicar margin-bottom da lista ou utilizvamos as propriedades display:table-cell e vertical-align:middle, que s so suportadas nos browsers mais modernos. Parece-nos bastante mais complicado e pouco lgico.
14
Behaviors JavaScript
Historicamente, a linguagem JavaScript sempre foi utilizada para dar interactividade s pginas Web e torn-las, assim, mais atractivas para o visitante dos stios Web. Com o aparecimento do Flash perdeu alguma importncia, mas nos ltimos anos, com o aparecimento do AJAX e de vrias frameworks como o jQuery, voltou ribalta. Dado que a JavaScript uma linguagem de difcil aprendizagem para o web designer, o Dreamweaver disponibiliza scripts JavaScript predefinidos que permitem efectuar um conjunto de efeitos interactivos que so bastante utilizados actualmente em stios Web. Esses scripts tm o nome de behaviors, e permitem que qualquer web designer possa aplicar efeitos interactivos sem perceber nada de JavaScript.
14.1 Behaviors, eventos e aces

No Dreamweaver, uma behavior a combinao entre um evento e uma aco. Por exemplo, clicando (evento) num boto algo acontecer (aco). As behaviors esto associadas a um elemento especfico da pgina, 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 automticos, como o carregamento de uma pgina Web. Existem eventos por omisso para as behaviors, tendo em conta o elemento utilizado. Praticamente todas as aces que o utilizador pode efectuar numa pgina possuem associado um evento. Por exemplo, associado pgina Web existem dois eventos: load unload Ocorre quando a pgina termina o seu carregamento. Tambm pode ser utilizado com imagens. Ocorre quando o utilizador sai da pgina, porque fecha o browser, clica num link ou escreve outro endereo na barra de endereos.
Estes eventos podem estar associados a elementos body e frameset.
414
Como seria de esperar, o maior nmero de eventos esto associados ao rato: click Ocorre quando se clica com o boto principal do rato num elemento da pgina. Pode ser utilizado com a maior parte dos elementos de uma pgina (texto, links, imagens, etc.). Ocorre quando se efectua um duplo-clique com o boto principal do rato num elemento da pgina. Pode ser utilizado com a maior parte dos elementos de uma pgina (texto, links, imagens, etc.).
dblclick
mousedown Ocorre quando o boto principal do rato est a ser pressionado. mouseup Ocorre quando o boto 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 pgina. mousemove Ocorre quando o cursor do rato movimentado enquanto se encontra por cima de um elemento da pgina. mouseout Ocorre quando o cursor do rato movido para fora de um elemento da pgina. o inverso do evento mouseover.
Quando se clica num elemento a sequncia de eventos mousedown, mouseup e click. Quando se passa com o rato por cima de um elemento a sequncia de eventos mouseover, mousemove e mouseout. Os eventos associados ao rato podem ser utilizados com a maior parte dos elementos de uma pgina (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 keyup Ocorre quando se est a carregar numa tecla do teclado. Ocorre quando se liberta o dedo de uma tecla em que se tenha carregado.
Quando se carrega numa tecla a sequncia de eventos keydown, keypress, keyup. Se mantiver a pressionar uma tecla e esta se auto repetir, podem existir mltiplos 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 pgina, mas so mais utilizados com elementos de um formulrio. Eventos associados com formulrios: submit Ocorre quando se submete um formulrio clicando num boto de Submit ou num image field. S se aplica ao elemento form. reset Ocorre quando se faz reset a um formulrio clicando num boto 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 formulrio e abandona esse campo utilizando a tecla TAB ou clicando em outro campo/objecto da pgina. Pode ser utilizado com os elementos input, select e textarea. Outros eventos: focus Ocorre quando um elemento recebe o foco de ateno 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. Ocorre quando um elemento perde o foco de ateno 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. Ocorre quando o carregamento de uma imagem interrompido. associado apenas a imagens (img). Ocorre quando um erro detectado no carregamento de um documento ou de uma imagem. Foi analisado no captulo anterior.
blur
abort error
resize Ocorre quando a janela do browser ou uma frame so redimensionadas. De forma a se poderem associar event handlers com elementos HTML utilizam-se atributos cuja designao corresponde ao evento precedido de on. Por exemplo, onclick tem a ver com o clique do rato num elemento da pgina.
416
14.2 Utilizar behaviors

O Dreamweaver necessita de um elemento HTML especfico para associar uma behavior. O elemento a muitas vezes utilizado porque, em JavaScript, os links podem responder a vrios eventos diferentes, incluindo o tradicional onClick. Um elemento HTML pode ter mltiplas behaviors associadas, cada uma com um evento diferente. Um elemento grfico de navegao pode, por exemplo:
o o o
executar uma aco SWAP IMAGE quando o utilizador passa o rato por cima (evento onMouseOver); executar uma aco SWAP IMAGE RESTORE quando o rato se afasta (evento onMouseOut); e mostrar outra pgina Web numa janela adicional mais pequena com a aco OPEN BROWSER WINDOW, quando clicado (evento onClick).
Da mesma forma, um nico evento pode desencadear vrias aces. Por exemplo, actualizar frames mltiplas atravs de um nico link utilizando vrias aces GO TO URL associadas ao evento onClick. Alm disso, no est restringido a associar mltiplas instncias da mesma aco a um nico evento.
14.2.1 O painel BEHAVIORS

O painel BEHAVIORS disponibiliza duas colunas que correspondem aos eventos e s aces, respectivamente:
Existem vrios mtodos para abrir o painel BEHAVIORS:

o o o
Escolhendo a opo W INDOW > BEHAVIORS; Seleccionando o separador BEHAVIORS do painel TAG INSPECTOR, se este estiver visvel; 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 aco associada o que desencadeado aparecer na coluna da direita. Uma seta ao lado do evento,
417
permite escolher outro tipo de evento, diferente do utilizado por omisso. Efectue um duplo-clique em cima da aco para abrir a caixa de dilogo de parmetros, onde pode modificar os atributos da aco. Caso possua vrias behaviors associadas a um mesmo elemento, pode determinar a ordem de execuo das aces utilizando as setas que se encontram ao lado dos sinais + e -:
Depois de ter associado uma behavior a um elemento HTML e fechado a caixa de dilogo de parmetros da aco associada, o Dreamweaver escreve o cdigo HTML e JavaScript necessrio no documento. Dado que contm funes que tm de ser invocadas de qualquer parte do documento, a parte principal do cdigo JavaScript colocada na seco <head> da pgina; o cdigo que liga o elemento seleccionado a estas funes escrito na seco <body>. Algumas aces, podero colocar cdigo HTML ou JavaScript em outras partes do documento.
14.2.2 Criar uma behavior

Para associar uma behavior a um elemento da pgina: 1. Seleccione um elemento na janela DOCUMENT ou no TAG SELECTOR. Todas as behaviors esto associadas a um elemento HTML especfico: desde o <body>, a um elemento <a>, <textarea> de um formulrio, etc. Se pretender associar uma behavior a toda a pgina, seleccione o elemento <body>. 2. Abra o painel BEHAVIORS escolhendo W INDOW > BEHAVIORS ou teclando SHIFT+F4. 3. Clique no boto + para revelar as aces disponveis para o elemento seleccionado:
418
Se uma determinada aco estiver indisponvel, porque o elemento necessrio no est presente na pgina ou no est seleccionado. No pode, por exemplo, escolher a aco SHOW -HIDE ELEMENTS, a no ser que j tenha inserido um ou mais elementos AP na pgina. 4. Seleccione uma das aces disponveis. 5. Introduza os valores desejados na caixa de dilogo de parmetros da aco. Dependendo da aco, pode escolher ficheiros, definir atributos, e activar/desactivar funcionalidades. 6. Clique em OK para fechar a caixa de dilogo quando tiver terminado. O Dreamweaver adiciona uma linha ao painel BEHAVIORS apresentando o evento (definido por omisso) e a aco seleccionada. 7. Se desejar pode alterar o evento criado por omisso.
14.2.3 Gerir eventos

S pode utilizar certos eventos com determinados elementos. Mesmo em browsers recentes, eventos chave, como onMouseDown, onMouseOver e onMouseOut no funcionam com todos os elementos de uma pgina, sendo utilizados preferencialmente com links. De cada vez que o Dreamweaver associa uma behavior a um elemento HTML, selecciona um evento por omisso que aparece na primeira coluna do painel BEHAVIORS. Se no pretender seleccionar o evento por omisso numa determinada instncia, pode escolher outro, aps ter criado a behavior. Clique na seta ao lado do evento apresentado no painel BEHAVIORS e seleccione o evento pretendido na lista:
Embora qualquer elemento HTML possa potencialmente ser utilizado para associar uma behavior, os mais utilizados so o <body> (para eventos relacionados com a pgina, como onLoad), <img> (utilizado como boto), e <a>, que corresponde a um link.
419
No caso de outros elementos, como uma imagem, a lista de eventos diferente porque podemos associar um evento em conjunto com um elemento <a> (isto , com um link):
Este elemento a no acede a nenhuma pgina, 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 so uma das tcnicas mais frequentemente utilizadas actualmente no desenho de pginas. Num image rollover tpico, o cursor passa por cima de uma imagem e o grfico muda, s vezes apenas parecendo que brilha ou muda de cor. O evento ONMOUSEOVER desencadeia a troca praticamente instantnea de uma imagem por outra. O Dreamweaver torna possvel combinar as behaviors SWAP IMAGE e SWAP IMAGE RESTORE numa operao fcil, bem como o pr-carregamento de todas as imagens. Para utilizar a aco SWAP IMAGE: 1. Seleccione o objecto que vai desencadear a aco. No obrigatrio utilizar uma imagem podendo recorrer a outros elementos HTML; 2. A partir do painel BEHAVIORS, clique no boto + e seleccione SWAP IMAGE. Aparecer a seguinte caixa de dilogo:
420
3. Escolha uma imagem disponvel a partir da lista IMAGES. O Dreamweaver carrega automaticamente uma lista com todos os nomes de imagens que encontrar na pgina 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 pgina; 4. Na caixa de texto SET SOURCE TO, introduza a localizao da imagem que pretende utilizar para substituir a existente. Pode tambm clicar no boto BROWSE para localizar o ficheiro que contm a imagem. Aparecer um asterisco no fim do nome da imagem seleccionada para indicar 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 aco SWAP IMAGE. Por exemplo, se pretende que todo um submenu mude quando um utilizador passa com o rato por cima de uma determinada opo, pode utilizar uma nica aco SWAP IMAGE para mudar todas as imagens dos botes do submenu; 6. Para pr-carregar todas as imagens envolvidas na aco SWAP IMAGE na cache do browser, quando a pgina carregada, assegure-se que a opo PRELOAD IMAGES est activada. A nova imagem aparecer assim instantaneamente, e no ser necessrio solicitar a imagem ao stio Web, o que em alguns casos pode provocar um ligeiro atraso na apresentao da imagem; 7. Para que as imagens seleccionadas revertam para as imagens originais quando o visitante afastar o cursor do objecto seleccionado, assegure-se que a opo RESTORE IMAGES ONMOUSEOUT est seleccionada. Esta opo no aparecer caso tenha seleccionado outro elemento que no uma imagem. O Dreamweaver adicionar automaticamente uma aco SWAP IMAGE RESTORE e o respectivo evento (normalmente, ONMOUSEOUT) ao painel BEHAVIORS;
421
8. Clique em OK quando tiver terminado. O resultado desta operao no painel BEHAVIORS :
Embora no seja habitual, possvel que a imagem de troca tenha dimenses diferentes das da imagem original. Neste caso, a aco SWAP IMAGE redimensionar a imagem de troca para a altura e largura da primeira imagem.
14.3.1 Swap Image Restore

Caso no tenha seleccionado a opo RESTORE IMAGES ONMOUSEOUT pode, a posteriori, inserir o mesmo comportamento recorrendo aco SWAP IMAGE RESTORE, que apenas apresenta uma mensagem do tipo,
quando seleccionada, para se confirmar a sua seleco. Esta aco pode ser utilizada apenas aps uma aco SWAP IMAGE.
14.3.2 Preload Images

A behavior PRELOAD IMAGES utilizada para carregar, na cache do browser, imagens que normalmente no aparecem quando a pgina carregada pela primeira vez, como acontece com as imagens dos image rollovers. Se a imagem for pr-carregada (preloaded), quando for necessria num rollover, apresentada imediatamente porque no existe atraso provocado pela espera para que a imagem seja descarregada do stio Web. Se estiver a utilizar a behavior SWAP IMAGE, no necessita de adicionar a behavior PRELOAD IMAGES, basta activar a opo PRELOAD IMAGES na caixa de dilogo SWAP IMAGE. A maior parte das vezes a aco PRELOAD IMAGES aparece associada ao evento ONLOAD do elemento body de uma pgina:
422
A caixa de dilogo associada aco PRELOAD IMAGES :
Nesta caixa de dilogo: 1. Introduza, no campo IMAGE SOURCE FILE, que est na parte de baixo da caixa de dilogo, a localizao e o nome do ficheiro relativo imagem que pretende pr-carregar, ou clique no boto BROWSE para seleccionar o ficheiro que contenha a imagem; 2. Clique no boto + localizado no topo da caixa de dilogo para adicionar 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 boto - no topo da caixa de dilogo para remover a imagem da lista.
14.3.3 Rollover Image

O processo mais tradicional de criar image rollovers recorrer opo INSERT > IMAGE OBJECTS > ROLLOVER IMAGE. Ou, em alternativa, utilizar o cone com o mesmo nome do menu do boto IMAGES da categoria COMMON na barra INSERT:
423
Na caixa de dilogo que aparece,
ter de especificar a imagem original, a imagem de rollover e se pretende prcarregar a imagem de rollover (PRELOAD ROLLOVER IMAGE). Pode tambm definir um link para a imagem para aceder a outra pgina quando se clica na imagem, bem como atribuir um texto alternativo (para efeitos de acessibilidade). Para utilizar a behavior ROLLOVER IMAGE, no necessita de ter nenhuma imagem seleccionada nem sequer inserida na pgina. A imagem inicial ser inserida na pgina e ter associado um link, mesmo que no tenha preenchido o campo W HEN CLICKED, GO TO URL. Sero criadas trs behaviors j nossas conhecidas (alm das existentes na imagem seguinte, tambm criada uma aco PRELOAD IMAGES associada ao evento onLoad do elemento <body>):
Neste nosso exemplo, inserimos na pgina uma capa de um livro que baseada em nveis de cinzento:
424
Quando passamos o cursor por cima da imagem aparece a capa com as cores originais. Ao clicar na imagem acedemos a uma pgina com informao sobre o livro (ummundodestetamanho.html).
14.4 Call JavaScript

Uma aco muito interessante a CALL JAVASCRIPT, que executa um comando JavaScript (pode ser a invocao de uma funo). Para configurar a aco aparece apenas uma caixa de dilogo onde se introduz o comando a executar:
Se pretender executar mais de um comando, separe-os por ;, ou crie uma funo onde colocar esses comandos e na caixa de dilogo CALL JAVASCRIPT especifique apenas o nome da funo seguido de (). O problema que necessrio perceber da linguagem JavaScript o que limita bastante a sua utilizao.
14.5 Trabalhar com janelas de pop-up

As janelas de pop-up so uma das maiores pragas da Internet. Para as evitar, os browsers mais recentes comearam 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 boto. Neste caso, no so bloqueadas pelos browsers. O Dreamweaver disponibiliza a aco OPEN BROWSER WINDOW, que permite abrir uma nova janela do browser e especificar o seu tamanho exacto, bem como outros atributos:
425
Para utilizar a aco OPEN BROWSER WINDOW : 1. Seleccione o objecto que vai desencadear a aco; 2. No painel BEHAVIORS clique no boto + e seleccione OPEN BROWSER WINDOW; 3. No campo URL TO DISPLAY, introduza o endereo da pgina Web que pretende visualizar na nova janela. Pode tambm clicar no boto BROWSE para localizar o ficheiro; 4. Para especificar o tamanho da janela, introduza os valores de largura e altura nos campos apropriados (W INDOW WIDTH e WINDOW HEIGHT). Se no introduzir a largura e a altura, a nova janela do browser abre com o tamanho por omisso; 5. Active as checkboxes ATTRIBUTES apropriadas para mostrar as funcionalidades desejadas da janela, que incluem as barras de ferramentas, as barras de scroll, etc. Por omisso, tem de seleccionar explicitamente qualquer dos atributos que pretende que apaream na nova janela. A nova janela conter apenas os atributos que estejam activos, mais os elementos bsicos das janelas como a barra de ttulo e o boto de Close; 6. Se planeia utilizar cdigo JavaScript para enderear ou controlar a janela, escreva um nome nico no campo W INDOW NAME. Este nome no pode conter espaos ou caracteres especiais. O Dreamweaver alerta-o se o nome no for aceitvel; 7. Clique em OK quando tiver terminado.
14.6 Show-Hide Elements

Uma das caractersticas chave dos elementos AP (isto , elementos posicionados de forma absoluta, mais conhecidos por layers) em interfaces Web a capacidade de aparecerem e desaparecerem nossa vontade. A aco SHOW -HIDE ELEMENTS permite um controlo fcil sobre o atributo de visibilidade (propriedade visibility das CSS) de todos os elementos com um id existentes na pgina Web corrente. Alm de explicitamente mostrar e esconder elementos, esta aco pode tambm repor elementos no valor por defeito de visibilidade (que visible). Esta aco muitas vezes utilizada para revelar ou esconder um nico elemento contudo pode esconder ou revelar mais de um elemento em simultneo. A caixa de dilogo de parmetros desta aco mostra uma lista de todos os elementos com ID existentes na pgina Web corrente a partir da qual pode escolher os que desejar esconder ou revelar:
426
Para utilizar a aco SHOW-HIDE ELEMENTS: 1. Seleccione o objecto que desencadeia a aco; 2. A partir do painel BEHAVIORS clique no boto + e seleccione SHOWHIDE ELEMENTS. A caixa de dilogo de parmetros apresenta uma lista de elementos disponveis na pgina Web corrente; 3. Para mostrar um elemento escondido, seleccione o elemento na lista ELEMENTS e clique no boto SHOW; 4. Para esconder um elemento visvel, seleccione o elemento na lista ELEMENTS e clique no boto HIDE; 5. Para repor o valor de visibilidade por omisso do elemento, seleccione o elemento e clique no boto DEFAULT; 6. Clique em OK quando tiver terminado.
14.7 Set Text

O Dreamweaver agrupa quatro aces semelhantes no grupo de aces SET TEXT, que permitem alterar o contedo de vrios elementos da pgina Web e do browser:
427
14.7.1 Set Text of Container

A primeira, SET TEXT OF CONTAINER, permite reescrever dinamicamente o contedo inteiro de qualquer elemento. Pode mesmo incorporar funes JavaScript ou informao interactiva no novo contedo. Todo o cdigo HTML do elemento utilizado substitudo pelo contedo 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 dinmica: 1. Assegure-se que o elemento AP que pretende alterar foi criado e lhe foi atribudo um id; 2. Seleccione o objecto que desencadear a aco; 3. A partir do painel BEHAVIORS, clique no boto + e escolha SET TEXT > SET TEXT OF CONTAINER; 4. Na caixa de dilogo SET TEXT OF CONTAINER seleccione o elemento a modificar a partir da lista CONTAINER:
5. Introduza o contedo de substituio na rea de texto NEW HTML. Pode incluir cdigo JavaScript colocando-o entre chavetas; 6. Clique OK quando tiver terminado.
14.7.2 Set Text of Frame

Esta aco substitui dinamicamente o contedo de um elemento <body> de uma frame, utilizando qualquer cdigo HTML. Naturalmente, tem de se encontrar dentro de um frameset para utilizar esta aco e as frames tm de possuir nomes correctos isto , nicos sem caracteres especiais ou espaos. Para alterar o contedo de uma frame de forma dinmica: 1. Seleccione o objecto que desencadeia a aco; 2. No painel BEHAVIORS, clique no boto + e escolha SET TEXT > SET TEXT OF FRAME; 3. Na caixa de dilogo SET TEXT OF FRAME escolha a frame que pretende alterar a partir da lista FRAME:
428
4. Introduza o novo cdigo HTML para a frame na rea NEW HTML. Tenha em ateno que no est a alterar apenas uma palavra ou frase, mas todo o HTML que est contido na seco <body> da frame. Se pretender obter o HTML corrente da frame, para depois acrescentar ou eliminar elementos, clique no boto GET CURRENT HTML; 5. Para manter os atributos do <body> da frame, como o fundo e as cores do texto, seleccione a opo PRESERVE BACKGROUND COLOR. Se esta opo no estiver seleccionada, o fundo da frame e as cores do texto so substitudas pelos valores por omisso (um fundo branco e texto em preto); 6. Clique em OK quando tiver terminado.
14.7.3 Set Text of Status Bar

Utilize esta aco para apresentar uma mensagem de texto na barra de estado do browser baseada na aco do visitante, como mover o cursor para cima de uma imagem. Pode utilizar esta aco 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 endereos/URLs, tendem a ser temporrias e visveis 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 vrios browsers para assegurar que completamente visvel. Para apresentar uma mensagem apenas quando o cursor do utilizador se encontra em cima de uma imagem ou link, utilize uma aco SET TEXT OF STATUS BAR ligada a um evento ONMOUSEOVER, com a mensagem da barra de estado desejada. Utilize outra aco SET TEXT OF STATUS BAR ligada a um evento ONMOUSEOUT, com uma string vazia ( ) como texto.
429
Devido a restries de segurana, alguns browsers como o Internet Explorer 6/7/8 ou o Firefox no apresentam a alterao do texto da barra de estado, excepto se o utilizador tiver alterado as preferncias do browser. No Internet Explorer 7/8 necessrio activar a opo ALLOW STATUS BAR UPDATES VIA SCRIPT nas configuraes de segurana (SECURITY SETTINGS) para se poder ver as alteraes barra de estado. Embora tenha existido um perodo de tempo durante o qual a animao de mensagens na barra de estado era o ltimo grito, com as restries de segurana dos browsers modernos deixou de fazer qualquer sentido. Para utilizar a aco SET TEXT OF STATUS BAR: 1. Seleccione o objecto que desencadeia a aco; 2. No painel BEHAVIORS, clique no boto + e seleccione SET TEXT OF STATUS BAR; 3. Introduza o texto no campo MESSAGE:
4. Clique em OK quando tiver terminado.
14.7.4 Set Text of Text Field

A aco SET TEXT OF TEXT FIELD permite actualizar qualquer campo de texto (input type="text") ou rea de texto (textarea) de um formulrio de forma dinmica. Tem de existir um campo de texto ou uma rea de texto na pgina para que esta aco fique disponvel. Para alterar o texto de um campo de texto ou de uma rea de texto: 1. Seleccione o objecto que desencadeia a aco; 2. No painel BEHAVIORS clique no boto + e escolha SET TEXT > SET TEXT OF TEXT FIELD. 3. Na caixa de dilogo SET TEXT OF TEXT FIELD seleccione o campo de texto desejado da lista TEXT FIELD:
430
4. Introduza o novo texto e/ou cdigo JavaScript na rea NEW TEXT. 5. Clique em OK quando tiver terminado.
14.8 Check Plugin

Se certas pginas requerem a utilizao de um ou mais plugins, pode utilizar a aco CHECK PLUGIN para ver se um visitante da pgina possui instalado o plugin necessrio. Pode ento redireccionar os utilizadores que possuem o plugin para um URL e os que no o tm para outro URL. S pode verificar um plugin de cada vez, mas pode utilizar mltiplas instncias da aco CHECK PLUGIN se necessrio. No pode detectar plugins especficos no Internet Explorer utilizando JavaScript. Contudo, ao seleccionar os plugins Flash ou Director na caixa de dilogo CHECK PLUGIN, ser adicionado o cdigo VBScript apropriado pgina para detectar esses plugins no Internet Explorer. A caixa de dilogo de parmetros do CHECK PLUGIN,
oferece a deteco de cinco plugins: Flash, Shockwave, LiveAudio, QuickTime e Windows Media Player. Pode testar a existncia 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 nmero de verso) quando escreve about:plugins na barra de endereos do Firefox por exemplo, NULLSOFT WINAMP PLUG-IN FOR GECKO. Para utilizar a aco CHECK PLUGIN: 1. Seleccione o objecto que desencadeia a aco. A maior parte das vezes utilizar o elemento <body> e o evento onload; 2. A partir do painel BEHAVIORS clique no boto + e seleccione CHECK PLUGIN; 3. Seleccione um plugin da lista SELECT ou escreva um nome de plugin no campo ENTER;
431
4. Os nomes que aparecem na lista esto abreviados (para serem mais facilmente identificveis) e no so os nomes formais inseridos no cdigo. Por exemplo, quando selecciona SHOCKWAVE, o que colocado no cdigo SHOCKWAVE FOR DIRECTOR. Por outro lado o nome de plugin que introduzir manualmente no campo ENTER inserido tal qual no cdigo; 5. Se pretender enviar os utilizadores que possuem o plugin para uma pgina diferente, introduza o URL absoluto ou relativo (ou utilize o boto BROWSE para localizar o ficheiro) no campo IF FOUND, GO TO URL. Se pretender que os utilizadores permaneam na pgina corrente, deixe o campo de texto vazio; 6. No campo OTHERWISE, GO TO URL, introduza o URL da pgina a ser invocada para os utilizadores que no possuem instalado o plugin necessrio; 7. Se a deteco do plugin falhar o que acontece regularmente no Internet Explorer, quer o plugin esteja presente ou no pode manter o utilizador na pgina onde a deteco ocorre. Para o fazer, active a opo ALWAYS GO TO FIRST URL IF DETECTION IS NOT POSSIBLE. De outra forma, se a deteco falhar por alguma razo, os utilizadores so redireccionados para o URL listado no campo OTHERWISE; 8. Clique em OK quando tiver terminado.
14.9 Go to URL
Uma das tarefas mais complicadas quando se utilizam frames actualizar duas ou mais frames em simultneo com apenas um clique. A aco GO TO URL pode efectuar este processo e tambm pode ser utilizada como redireccionador que envia o utilizador para outra pgina Web depois do evento onLoad ter terminado a sua execuo. A caixa de dilogo GO TO URL,
432
apresenta quaisquer frames ou framesets existentes na pgina corrente, alm da pgina corrente (MAIN WINDOW) caso no se utilizem frames. Para carregar mltiplos URLs ao mesmo tempo em frames distintas, seleccione a primeira frame da lista OPEN IN e introduza a pgina ou localizao 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 atribudo um URL, esse endereo aparece no campo URL. Para utilizar a behavior GO TO URL: 1. Seleccione o objecto que desencadeia a aco; 2. A partir do painel BEHAVIORS clique no boto + e seleccione GO TO URL; 3. Da caixa de dilogo GO TO URL seleccione, na rea OPEN IN, em que frame dever ser aberta a pgina que pretende invocar, ou se pretende apenas substituir a pgina corrente (MAIN WINDOW). Se no utilizar frames na pgina corrente apenas aparecer a opo MAIN WINDOW; 4. No campo URL introduza a localizao do ficheiro (ou stio Web) a abrir, ou clique no boto 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; 6. Clique em OK quando tiver terminado.
14.10 Drag AP Element

A aco DRAG AP ELEMENT permite que os visitantes das pginas Web movam elementos AP (absolutely positioned element), e tudo o que estes contm, no ecr com a tcnica do arrastar-e-largar (drag-and-drop). Com a aco DRAG AP ELEMENT, pode facilmente configurar as seguintes funcionalidades para o utilizador:
o o
Permitir que elementos AP sejam arrastados no ecr para qualquer posio; Restringir o arrastar numa determinada direco ou combinao de direces. Por exemplo, um elemento AP apenas de movimento horizontal com o movimento restrito para a esquerda e para a direita; Limitar a zona de arrasto (drag handle) a uma poro do elemento AP, como a barra superior, ou permitir que todo o elemento AP seja utilizado;
433
o o
Disponibilizar um mtodo alternativo de clipping activando apenas uma poro do elemento AP a ser arrastado; Permitir a alterao da ordem de posicionamento (stacking) dos elementos AP entre si, enquanto se arrasta um elemento AP ou quando o boto do rato libertado; Definir uma rea de encaixe (snap-up) na pgina Web para os elementos AP quando o utilizador liberta o elemento a uma distncia predefinida; Programar um comando JavaScript (ou um conjunto de comandos, ou uma funo) a ser executado quando a rea de destino atingida ou de cada vez que o elemento AP libertado.
Um ou mais elementos AP tm de existir na pgina antes da aco DRAG AP ELEMENT ficar disponvel. Como esta aco tem de ser invocada antes do visitante da pgina poder arrastar o elemento AP, deve ser associada com o elemento <body> e com o evento onLoad. Pode atribuir aces DRAG AP ELEMENT distintas a diferentes elementos AP para obter efeitos de arrasto diferentes. Para utilizar a aco DRAG AP ELEMENT: 1. Assegure-se que possui um ou mais elementos AP na sua pgina insira-os atravs da opo INSERT > LAYOUT OBJECTS > AP DIV ou clique no boto DRAW AP DIV da barra INSERT e desenhe um elemento AP na pgina; 2. Seleccione o elemento <body> no TAG INSPECTOR; 3. No painel BEHAVIORS clique no boto + 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 opo MOVEMENT de UNCONSTRAINED para CONSTRAINED. 7. No tipo de movimento CONSTRAINED aparecem as caixas de texto UP, DOWN, LEFT e RIGHT. Introduza valores, em pxeis, nas caixas de texto para controlar o intervalo de movimento do elemento AP:
434
Para restringir o movimento verticalmente, introduza valores positivos nos campos UP e DOWN e zeros nos campos LEFT e RIGHT; Para restringir o movimento horizontalmente, introduza valores positivos nos campos LEFT e RIGHT e zeros nos campos UP e DOWN; Para permitir movimento numa regio 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 posio corrente do cursor, pode deslocar-se, no mximo, 100 pxeis para a esquerda e 400 para a direita; 8. Para definir uma localizao destino para o elemento AP, introduza coordenadas nos campos LEFT e TOP da rea DROP TARGET. Um elemento AP ter chegado rea destino quando as coordenadas left e top forem idnticas s coordenadas introduzidas nos campos LEFT e TOP. Os valores introduzidos nestes campos so valores absolutos relativos ao canto superior esquerdo da janela do browser; 9. Clique no boto GET CURRENT POSITION para preencher os campos LEFT e TOP com a localizao corrente do elemento AP (coordenadas left e top). Se planeia utilizar uma localizao destino, poder colocar o seu elemento AP na localizao final antes de criar a behavior, de forma a tirar partido do boto GET CURRENT POSITION; 10. Para definir uma rea de encaixe volta das coordenadas da localizao destino introduza um valor em pxeis no campo SNAP IF WITHIN. Esta a distncia localizao destino a que o visitante pode largar o elemento AP, que ele ser automaticamente deslocado para a localizao destino; 11. Para opes adicionais, seleccione o separador ADVANCED:
12. Se pretender que todo o elemento AP funcione como zona de arrasto (drag handle), seleccione a opo ENTIRE AP ELEMENT da lista DRAG HANDLE. Se, pelo contrrio, pretende limitar a rea a ser utilizada como zona de arrasto, seleccione AREA WITHIN AP ELEMENT. Aparecero os campos L(eft), T(op), W(idth) e H(eight):
435
13. Nos campos apropriados introduza as coordenadas para o rectngulo que define a zona de arrasto; 14. Para controlar o posicionamento do elemento AP, relativamente a outros elementos da pgina, quando arrastado, defina as seguintes opes na rea W HILE DRAGGING: o Para evitar que o elemento AP passe para a frente dos outros elementos AP quando arrastado, desseleccione a opo WHILE DRAGGING: BRING ELEMENT TO FRONT. Para alterar a ordem de empilhamento (stacking order) do elemento AP quando libertado, seleccione a opo W HILE DRAGGING: BRING ELEMENT TO FRONT e escolha LEAVE ON TOP (mantm o elemento AP em cima de todos os elementos da pgina) ou RESTORE Z-INDEX (em que o elemento AP volta para a posio que tinha na pilha de elementos quando comeou a ser arrastado) da lista de opes;
15. Para executar um comando JavaScript repetidamente enquanto o elemento AP estiver a ser arrastado, introduza o(s) comando(s) ou funo no campo CALL JAVASCRIPT na rea W HILE DRAGGING; 16. Para executar um comando quando o elemento AP largado na localizao alvo, introduza o(s) comando(s) ou funo no campo W HEN DROPPED: CALL JAVASCRIPT. Se pretender que o cdigo JavaScript seja executado apenas quando o elemento AP chega localizao alvo (atravs de uma rea de encaixe), seleccione a opo ONLY IF SNAPPED. Esta opo requer que seja introduzido um valor no campo DROP TARGET no separador BASIC; 17. Clique em OK quando tiver terminado. A aco DRAG AP ELEMENT pode ser utilizada para criar puzzles e outro tipo de jogos. A pgina Jessus Dress Up (http://www.jesusdressup.com) um exemplo de uma pgina que pode ser criada recorrendo a esta aco.
436
14.11 Pop-up message

Pode enviar uma mensagem rpida aos visitantes do seu stio Web utilizando a aco POPUP MESSAGE. Quando desencadeada, esta aco abre uma caixa de alerta JavaScript e apresenta a mensagem especificada. Introduz-se no campo MESSAGE a mensagem que pretendemos que aparea:
Para utilizar a aco POPUP MESSAGE: 1. Seleccione o objecto que desencadeia a aco; 2. A partir do painel BEHAVIORS, clique no boto + 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 utilizao de reas interactivas e de efeitos visuais em pginas. Alguns desses efeitos visuais esto disponveis a partir do submenu EFFECTS e so identificados pelo nome SPRY EFFECTS:
437
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 boto + e seleccione o efeito que pretende aplicar; 4. Seleccione o elemento ao qual pretende aplicar o efeito, identificandoo atravs do respectivo id; 5. Introduza a durao do efeito em milissegundos no campo EFFECT DURATION (1000 milissegundos equivale a um segundo). Pode aplicar vrios efeitos ao mesmo elemento. O motor JavaScript para todos os efeitos est contido num nico ficheiro, SpryEffects.js. A referncia a este ficheiro adicionada automaticamente pgina corrente e o ficheiro colocado na pasta SpryAssets na raiz do seu stio Web da primeira vez que um efeito adicionado. Necessitar de publicar o ficheiro JavaScript no seu stio Web para que os efeitos funcionem correctamente.
14.12.1 Appear/Fade
Este efeito permite que um elemento aparea ou desaparea de forma gradual ao longo de um determinado perodo de tempo. Pode, por exemplo, fazer com que um elemento AP aparea de forma gradual com informao 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 dilogo APPEAR/FADE:
1. Escolha se pretende que o elemento alvo aparea (APPEAR) ou desaparea (FADE) a partir da lista EFFECTS; 2. Defina a percentagem inicial de opacidade no campo APPEAR FROM / FADE FROM;
438
3. Defina a percentagem final de opacidade no campo APPEAR TO / FADE TO; 4. Se pretender que o efeito inverso ocorra da prxima vez que o efeito for desencadeado para o elemento em causa, clique na opo TOGGLE EFFECT.
14.12.2 Blind
Este efeito simula os estores de uma janela, baixando para esconder contedo especfico 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 dilogo 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 incio 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 direco de abertura ou fecho; 5. Se pretender que o efeito inverso ocorra da prxima vez que o efeito for desencadeado para o elemento em causa, clique na opo TOGGLE EFFECT.
14.12.3 Grow/Shrink
Este efeito reduz ou alarga o tamanho de um determinado elemento da pgina. Este efeito pode ser utilizado para temporariamente tornar uma imagem maior quando o visitante passa o rato por cima de uma verso pequena da imagem (thumbnail) e torn-la mais pequena quando o visitante move o rato para fora do thumbnail.
439
Para conseguir o efeito de crescimento e de reduo de tamanho do thumbnail de acordo com a posio do rato, aplique o efeito GROW/SHRINK duas vezes: primeiro cresa a imagem ligeiramente com um evento onMouseOver e depois reduza-a s dimenses 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 dilogo GROW/SHRINK:
1. A partir da lista EFFECT, escolha se pretende que o elemento cresa (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 direco 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 prxima vez que o efeito for desencadeado para o elemento em causa, clique na opo TOGGLE EFFECT. Neste caso tenha cuidado de no especificar o valor 0 no campo GROW TO / SHRINK TO, seno o elemento desaparecer e no ter a possibilidade de aplicar o efeito inverso.
14.12.4 Highlight
Este efeito permite animar o fundo de um elemento, comeando numa determinada cor e depois apresentando as cores intermdias at chegar a uma cor final. Funciona bem para atrair a ateno de um visitante para um determinado elemento da pgina sem afectar o layout da pgina. Pode utilizar
440
este efeito com qualquer elemento HTML excepto: applet, body, frame, frameset, ou noframes. Na caixa de dilogo 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 prxima vez que o efeito for desencadeado para o elemento em causa, clique na opo 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 ateno do utilizador. No pode contudo definir a durao e a distncia aplicada 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:
441
14.12.6 Slide
Este efeito semelhante ao efeito BLIND dado que esconde ou revela contedo, contudo neste caso o prprio contedo que parece que aparece/desaparece da vista do utilizador. Relativamente ao elemento referenciado pelo efeito necessrio 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 dilogo SLIDE:
1. Na lista EFFECT, se pretender que o elemento seleccionado seja escondido, escolha SLIDE UP; para revelar um elemento previamente escondido, escolha SLIDE DOWN; 2. Para definir a percentagem de incio 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 prxima vez que o efeito for desencadeado para o elemento em causa, clique na opo TOGGLE EFFECT.
14.12.7 Squish
Este efeito semelhante a uma utilizao especializada do efeito GROW/ SHRINK. Quando um efeito SQUISH desencadeado, o elemento referenciado reduz o respectivo tamanho de 100% para 0% na direco do canto superior esquerdo do elemento; desencadeando o efeito outra vez o elemento cresce para 100% na direco oposta.
442
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 parmetro definido pelo utilizador a escolha do elemento ao qual se pretende aplicar o efeito:
14.13 Utilizar outras behaviors

Alm das behaviors que so disponibilizadas de raiz pelo Dreamweaver CS5, o web designer pode instalar outras behaviors que tenham sido transferidas do Adobe Exchange (um servio que disponibiliza uma grande quantidade de extenses incluindo behaviors), transferidas de outro stio Web que disponibilize extenses ou que tenham sido criadas por outros web designers. O Dreamweaver inclui uma opo GET MORE BEHAVIORS no fim da lista +,
que permite aceder ao stio Adobe Exchange. Tambm poder aceder a esta pgina utilizando a opo HELP > DREAMWEAVER EXCHANGE. Para aceder rea relacionada com o Dreamweaver dever clicar no link Dreamweaver na rea EXCHANGES BY PRODUCT. Na pgina que aparece,
443
pode pesquisar extenses (ou behavior), aceder a uma pgina onde pode efectuar uma pesquisa mais avanada, ou pode navegar por categoria a partir do menu existente no lado direito da pgina. Algumas das extenses/ behaviors so gratuitas enquanto outras so pagas. Depois de localizar a extenso pretendida e clicar no boto DOWNLOAD respectivo aparecer uma pgina de SIGN IN (o procedimento poder ser diferente dependendo da extenso seleccionada). Para poder transferir extenses/behaviors para o seu computador necessita de estar registado no stio Web da Adobe. Aparecer ento a pgina que efectuar a transferncia da extenso para o seu computador. Dependendo do seu browser pode ser-lhe dada a opo de instalar o ficheiro da extenso directamente a partir do stio 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 extenso/behavior, para a instalar no Dreamweaver dever: 1. Efectuar um duplo clique no ficheiro com a extenso .mxp ou utilizar a opo HELP > MANAGE EXTENSIONS para abrir o EXTENSION MANAGER:
e utilizar a opo FILE > INSTALL EXTENSION para seleccionar o ficheiro. Utiliza-se o EXTENSION MANAGER para instalar, remover e activar/desactivar temporariamente ficheiros com a extenso .mxp; 2. Ter de aceitar a licena de utilizao (License Agreement);
444
3. Depois de a instalao estar terminada poder ver no EXTENSION MANAGER a extenso instalada, a verso e o autor; 4. Algumas extenses ficam inacessveis at ter reiniciado o Dreamweaver na maior parte dos casos ser-lhe- pedido que o faa; 5. Cada extenso/behavior instalada no seu computador poder ser invocada a partir de um determinado menu da interface do Dreamweaver. No Adobe Exchange leia a informao disponvel sobre a extenso para determinar qual a opo e menu que ter de utilizar.
15
Navegao com Spry Widgets
Alm das behaviors que apresentmos no captulo anterior, o Dreamweaver tambm disponibiliza behaviors especficas de navegao, isto , behaviors que permitem criar elementos de navegao na pgina. No Dreamweaver CS5 os elementos de navegao so constitudos pelos Spry Widgets que fazem parte da Spry framework, que uma biblioteca de mtodos e funes JavaScript, que permite criar reas interactivas de navegao em pginas Web.
15.1 Spry widgets

Os widgets so elementos da interface, como uma barra de menus, que geralmente tornam uma pgina mais fcil de utilizar para os visitantes. Combinam HTML, JavaScript e CSS para produzir layouts interactivos avanados. Os widgets Spry so fceis de implementar e podem ser personalizados atravs do PROPERTY INSPECTOR e de estilos CSS, permitindo assim uma fcil integrao em stios 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 razes de segurana) ou utilizam um browser que no suporta o JavaScript (o que nos dias de hoje rarssimo). Isto significa que alguns dos widgets no funcionaro, como as barras de navegao, em que os submenus nunca sero mostrados. Deve-se por isso desenhar os stios Web para, caso o JavaScript esteja desactivado, a funcionalidade continuar presente. Para introduzir um Spry widget numa pgina pode recorrer ao submenu INSERT > SPRY,
446
ou utilizar a categoria SPRY da barra INSERT,
Os Spry widgets de navegao tambm esto disponveis na categoria LAYOUT desta barra. Depois de serem introduzidos numa pgina, todos os Spry widgets so identificados 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 configurao no PROPERTY INSPECTOR. Quando guardar a pgina em que o widget foi inserido, e se for a primeira vez que utiliza esse tipo de widget no stio Web, aparecer uma caixa de dilogo a avisar o web designer que vo ser copiados os ficheiros de suporte do widget. Por exemplo, para uma SPRY MENU BAR:
15. NAVEGAO COM SPRY WIDGETS
447
Os ficheiros de suporte de cada widget so copiados automaticamente para a pasta SpryAssets (ser criada se no existir) localizada na pasta raiz (root folder) do stio Web:
Cada widget Spry utiliza um ficheiro JavaScript, um ficheiro CSS e ficheiros de imagens. Estes ficheiros so necessrios e tm de ser depois transferidos para o servidor onde o stio Web ficar alojado, juntamente com as pginas.
15.2 Spry Menu Bar

O Dreamweaver disponibiliza o widget SPRY MENU BAR, para criar menus de navegao. Este widget utiliza listas no ordenadas (elementos ul), estilos CSS e cdigo JavaScript, para conseguir navegao multi-nvel. Depois de o widget ser colocado na pgina, o PROPERTY INSPECTOR personalizado fornece uma forma intuitiva para ajustar o menu de qualquer forma que
448
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 nvel de navegao principal com at dois nveis de submenus do tipo drop-down. Os botes principais de navegao (isto , o primeiro nvel de menu) aparecem sempre na pgina. Cada um destes botes pode ter o seu prprio menu, que apenas aparece quando um visitante passa com o cursor por cima de um boto. Cada boto no segundo nvel 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 aparea. 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 opo INSERT > SPRY > SPRY MENU BAR). 3. Quando a caixa de dilogo SPRY MENU BAR aparecer,
escolha uma das opes para definir a orientao da barra de navegao. Clique em OK. 4. O Dreamweaver insere a barra de navegao na pgina e mostra uma PROPERTY INSPECTOR personalizada. O aspecto inicial de um menu horizontal ,
enquanto um menu vertical tem a seguinte aparncia:
449
Por omisso, so criadas quatro opes principais, e a primeira e terceira opes tm j associados submenus, o que assinalado pela seta a apontar para baixo ou para o lado direito. Caso pretenda apenas uma barra de navegao sem submenus, basta remover os submenus criados por omisso. 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 trs itens na segunda lista. Se remover estes itens (basta seleccion-los e clicar no boto - que se encontra na parte de cima da lista) e tambm remover os subitens do ITEM 3, ter uma barra de navegao 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 tambm 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 endereo destino no campo LINK ou utilize o cone BROWSE para seleccionar o ficheiro. Os links tambm podem ser criados directamente na janela de documento, seleccionando um item do menu e introduzindo a pgina destino no campo LINK. Repare que, por omisso, os itens possuem um # (isto , um null link) no campo LINK, o que significa que nenhuma pgina ser invocada. Isto dever ser assim quando um item possui um submenu. Caso pretenda que a pgina 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 trs ltimos so apenas utilizados com frames. O valor _blank permite abrir a pgina destino numa janela autnoma do browser.
450
Para adicionar uma tooltip a um item de menu (isto , apresentar uma mensagem debaixo do cursor quando este se encontra por cima de um item), seleccione o item e introduza o texto para a tooltip no campo TITLE. Uma forma fcil de modificar rapidamente o texto dos itens, os links e a estrutura clicar no boto TURN STYLES OFF. Os estilos CSS sero 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 boto 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 boto + localizado acima da respectiva lista. adicionado um novo item de menu com o texto UNTITLED ITEM, logo abaixo do item seleccionado (se no 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 boto - no topo da lista. Se o item do menu possuir quaisquer submenus associados, o Dreamweaver pede-lhe uma confirmao antes de o eliminar:
451
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 boto para a esquerda, enquanto a seta para baixo move o boto para o lado direito. 4. Para adicionar um item de um submenu, seleccione o item do menu parente e clique no boto + na segunda ou terceira lista de itens. O Dreamweaver utiliza um nome genrico, MenuBarn (em que n um nmero sequencial) para cada SPRY MENU BAR que insere numa pgina. Este nome nunca visvel na pgina, mas pode alter-lo para algo mais descritivo como menuNavegacao. Na atribuio do nome s deve utilizar letras e algarismos, no deve utilizar espaos, sinais de pontuao, caracteres acentuados e cedilhas ().
15.2.1 Criar um menu de navegao

No nosso stio Web, vamos substituir o menu que crimos inicialmente para a pgina index.html,
por um menu SPRY MENU BAR. Primeiro inserimos um widget SPRY MENU BAR na pgina, e depois, no PROPERTY INSPECTOR, atribumos um nome ao menu (menu_principal) e definimos as opes de primeiro nvel:
Para todas as opes, excepto para a opo QUEM SOMOS, vamos definir um link que corresponde pgina que invocada quando o boto clicado:
452
Para a opo QUEM SOMOS o valor do campo LINK tem de ser #, dado que vai ter associado um sub-menu. Aproveitamos tambm para atribuir um TITLE a cada opo. Como apenas a opo QUEM SOMOS vai ter associado um sub-menu, removemos todas as opes de sub-menu de todas as outras opes:
E agora acrescentamos as opes para o sub-menu da opo QUEM SOMOS:
O campo LINK de cada uma destas cinco opes aponta para a pgina quemsomos.html e para a ncora respectiva nessa pgina:
../info/quemsomos.html#precosbaixos
Isto , os links apontam todos para a mesma pgina, mas para seces diferentes. 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 no mais do que uma simples lista (no numerada) de links, e por isso utiliza os elementos ul e li do HTML:
453
<ul id="menu_principal" class="MenuBarHorizontal"> <li><a href="../stock/destaques.html" title="Destaques">Destaques</a> </li> <li><a href="#" title="Quem Somos" class="MenuBarItemSubmenu">Quem Somos</a> <ul> <li><a href="../info/quemsomos.html#quemsomos">Empresa</a></li> <li><a href="../info/quemsomos.html#precosbaixos">Preços Baixos</a></li> <li><a href="../info/quemsomos.html#qualidadegarantida">Qualidade Garantida</a></li> <li><a href="../info/quemsomos.html#assistenciatecnica">Assistê ncia Técnica</a></li> <li><a href="../info/quemsomos.html#opinioesdosclientes">Opini&otilde ;es dos clientes</a></li> </ul> </li> <li><a href="../info/faq.html" title="FAQ">FAQ</a> </li> <li><a href="../info/contactar.html" title="Contactar">Contactar</a></li> <li><a href="../registo.html" title="Registo">Registo</a></li> </ul>
A aparncia 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:
454
Estes estilos esto 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.MenuBarVertical 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 modificar, localizar o estilo que controla esse elemento e depois editar esse estilo. Uma tcnica possvel 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 tambm ver os estilos utilizados no elemento correntemente seleccionado, no painel CSS STYLES no modo CURRENT:
455
Podemos ver por esta imagem que a primeira opo do menu tem associados quatro estilos, todos genricos. Um dos estilos diz respeito lista (ul.MenuBarHorizontal) o outro aos itens da lista (ul.MenuBarHorizontal li), o terceiro aos links associados s opes (ul.MenuBarHorizontal 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 seco CASCADE do campo TARGETED RULE no PROPERTY INSPECTOR e depois clicar no boto EDIT RULE para invocar a caixa de dilogo CSS RULE DEFINITION. Em alternativa pode editar o estilo a partir do painel CSS STYLES, no modo CURRENT. Se preferir trabalhar em cdigo, os ficheiros SpryMenuBarHorizontal.css e SpryMenuBarVertical.css possuem comentrios 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 stio Web. Se pretendermos ter widgets SPRY MENU BAR com cores de fundo distintas em pginas diferentes, no podemos alterar os ficheiros SpryMenuBarHorizontal.css e SpryMenuBarVertical.css. Temos de criar, na prpria pgina, os mesmos estilos existentes nesses ficheiros, mas apenas com as propriedades que pretendemos alterar. Vamos agora identificar os estilos que esto associados aos itens/botes de uma SPRY MENU BAR. Existem dois tipos diferentes de botes num menu Spry: um boto bsico do menu e um boto de submenu. Um boto bsico um boto que no possui um submenu agarrado simplesmente um boto que o visitante carrega para ir para uma nova pgina. Um boto de submenu qualquer boto que produz um menu de pop-up quando o visitante passa o cursor por cima. Alm disso, cada um destes tipos de botes possui dois estados: o estado normal e o estado quando o cursor passa por cima (evento mouseover). Os estilos utilizados so ento:
2 6
5 3 4
1 Barra de menus principal (ul.MenuBarVertical)
456
2 Barra de menus secundria (submenu) (ul.MenuBarVertical ul) 3 Boto/item bsico (ul.MenuBarVertical a) 4 Rato por cima de um boto/item bsico (ul.MenuBarVertical a.MenuBarItemHover e ul.MenuBarVertical a:hover para o Internet Explorer 6) 5 Boto de submenu (ul.MenuBarVertical a.MenuBarItemSubmenu) 6 Rato por cima de um boto de submenu (ul.MenuBarVertical a.MenuBarItemSubmenuHover e ul.MenuBarVertical a: hover para o Internet Explorer 6) Estes estilos so os utilizados num menu vertical. Para um menu horizontal, substitua Vertical por Horizontal no nome dos estilos. 15.2.2.1 Formatar botes bsicos Pode-se definir a aparncia de um boto bsico de um menu e ao mesmo tempo definir o aspecto bsico para todos os botes editando o estilo ul.MenuBarVertical a (ul.MenuBarHorizontal a, para um menu horizontal). Todas as definies (excepto a cor do texto) sero partilhadas pelos outros tipos de botes a cor do texto muda quando o cursor passa por cima de qualquer boto. A cor de fundo dos botes bsicos e dos submenus tambm controlada por este estilo. possvel tambm adicionar linhas de moldura aos botes por exemplo, uma linha a separar cada boto definindo a propriedade border do estilo. Defina o padding para controlar o espao entre o texto num boto e o limite do boto. Para que o texto esteja mais perto dos limites do boto, reduza o padding. Para colocar mais espao em branco volta do texto, aumente o padding. 15.2.2.2 Formatar o estado de mouseover dos botes Mover o rato por cima de um boto de menu altera a cor de fundo do boto e o respectivo texto, assinalando ao visitante que pode clicar ali. Os botes possuem, por omisso, um fundo prpura com texto branco, mas pode alterar esta configurao, 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 botes, pode alterar a cor dessas linhas quando o cursor est por cima. Ou pode fazer com que o texto aparea a negrito. O estilo utilizado para o comportamento de mouseover/hover :
457
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible. 15.2.2.3 Formatar botes dos submenus Os botes de submenu (isto , os botes que produzem um menu de pop-up quando se passa o cursor por cima) so praticamente idnticos aos outros botes de menu. De facto, os dois estilos mencionados acima que controlam um boto nos estados normal e mouseover definem a formatao bsica para os botes dos submenus. A nica diferena visvel a pequena seta que aparece no lado direito de um boto de submenu. A seta indica visualmente a presena de um menu de pop-up. Pode substituir as imagens (setas) que o Dreamweaver utiliza para os submenus que se encontram na pasta SpryAsstes: SpryMenuBarDown.gif, SpryMenuBarDownHover.gif, SpryMenuBarRight.gif, e SpryMenuBarRightHover.gif. Os ficheiros com Down no nome s so utilizadas para menus horizontais, enquanto os ficheiros com Right no nome so utilizados para os menus verticais. Crie as suas prprias setas (no formato GIF) com os mesmos nomes e substitua os ficheiros originais na pasta SpryAssets, no seu sto Web. Os grficos devem ser suficientemente pequenos para serem visveis nos botes dos menus os fornecidos pelo Dreamweaver possuem uma dimenso de 4x7 pxeis (seta direita) e 7x4 pxeis (seta para baixo) e devem existir verses para os estados normal e mouseover do boto do submenu. Se desejar alterar a aparncia dos botes de submenu (por exemplo, para alterar o tipo de letra) edite o estilo ul.MenuBarVertical a.MenuBarItemSubmenu. O estado de mouseover para os botes de submenu nos menus verticais controlado pelo estilo ul.MenuBarVertical a.MenuBarItemSubmenuHover. 15.2.2.4 Alterar a largura dos menus e dos botes Os botes de menu de uma SPRY MENU BAR possuem larguras predefinidas. Os botes de menu principais possuem uma largura de 8em, enquanto os botes dos submenus possuem uma largura de 8.2em. Se os botes de navegao possurem muito texto, 8ems muito estreito. Ou at pode ser demasiado se o texto dos itens for pequeno e constitudo por palavras curtas. Pode ajustar a largura dos botes e dos menus abrindo o estilo CSS apropriado 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-
458
gura para o menu que a utilizada para a largura do boto. A largura de um menu horizontal determinada pelo nmero de botes no menu.
o
Largura dos botes do menu principal A largura dos botes que aparecem no menu principal determinada pelo estilo ul.MenuBarVertical li, e , por omisso, de 8em. Pode querer que o boto seja ajustado ao texto respectivo, o que far com que os botes tenham larguras diferentes. Para isso ter de utilizar o valor auto para a largura. Botes de largura varivel tm bom aspecto nos menus horizontais, mas no nos menus verticais. 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 botes de submenu. Largura dos botes do submenu o estilo ul.MenuBarVertical ul li controla a largura dos botes de submenu. O valor por omisso 8.2em, mas pode ser ajustado.
15.2.2.5 Posicionar os submenus Os submenus nas barras verticais de menus sobrepem-se ao boto que os abriu:
Isto d uma aparncia tridimensional ao menu. Pode aumentar a sobreposio ou fazer com que o menu aparea directamente ao lado do boto do menu, sem sobreposio. No caso de um menu horizontal no existe esta sobreposio no primeiro nvel de opes. Para alterar a posio 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 boto 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 aparea directamente ao lado direito sem sobreposies e alinhado com o topo do boto do submenu, mude a margem de topo para 0 e a margem esquerda para 100%.
459
Se, pelo contrrio, 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 boto de submenu que o desencadeia. A respectiva margem 0. Se pretender que esse menu se sobreponha ao boto do submenu, pode alterar a margem de topo para -0.5% e a margem esquerda para 5%, por exemplo. A aparncia 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 informao sobre estilos vamos alterar o aspecto visual do nosso menu para o adequar ao definido inicialmente. Uma das primeiras alteraes diz respeito largura dos botes, que deve ser ajustada ao respectivo contedo. 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, Helvetica, 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 tambm se encontra no estilo ul. MenuBarVertical a. Mudamos para #F90:
Seguimos para a alterao da cor de mouseover, alterando a propriedade background-color para #F00 no estilo ul.MenuBarHorizontal
460
a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible:
S falta a linha branca a separar as opes do menu principal. Acrescentamos a propriedade border-right com o valor solid 1px #FFF ao estilo ul.MenuBarHorizontal li:
Para as opes 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 opes 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:
461
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. Alm de remover o HTML utilizado para criar o menu, o Dreamweaver tambm remover os ficheiros CSS e JavaScript externos desde que no exista mais nenhuma SPRY MENU BAR no nosso stio Web.
15.3 Spry Tabbed Panel

Alguns visitantes de pginas Web no gostam de fazer scroll. Se no virem o que pretendem quando uma pgina carregada, passam frente. Devido a este facto muitos web designers dividem grandes quantidades de informao em pginas mltiplas para que cada pgina apresente pedaos pequenos e fceis de digerir. Claro que isso envolve a construo de vrias pginas em vez de apenas uma, e fora o visitante a clicar atravs de uma srie de pginas. Os SPRY TABBED PANELS so uma forma ptima de colocar bastante contedo num pequeno espao. O visitante v um painel com separadores quando a pgina carregada pela primeira vez, com o contedo de um dos painis visvel. Um nico clique permite ao utilizador mudar para qualquer outro separador. Um exemplo deste tipo de elemento de navegao aparece na pgina principal do stio MaisFutebol (http://www.maisfutebol.iol.pt/):
Em vez de se criar uma pgina longa, ou vrias pginas pequenas, pode organizar informao em vrios painis de separadores. Desta forma o contedo est sempre acessvel pelo utilizador e pode-se aceder facilmente e rapidamente a diferentes seces clicando no separador que existe acima de cada painel.
462
Pode colocar um SPRY TABBED PANEL em qualquer parte de uma pgina Web. Mas dado que os separadores formam uma linha nica no topo do grupo de painis, necessitar de espao para acomodar todos os separadores. Para adicionar um widget SPRY TABBED PANEL a uma pgina: 1. Coloque o cursor onde pretende que o menu aparea. 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 opo INSERT > SPRY > SPRY TABBED PANELS. Por omisso, o painel possui dois separadores:
3. Opcionalmente atribua um nome ao SPRY TABBED PANEL. O Dreamweaver fornece um nome genrico, TabbedPanels1. 4. Para aumentar o nmero de separadores clique no boto + no PROPERTY INSPECTOR. O novo separador inserido abaixo do separador correntemente seleccionado:
5. Para remover um separador existente, clique no boto -. 6. Para alterar a ordem dos separadores, seleccione qualquer separador na lista e utilize os botes seta para ajustar a posio dos separadores. 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 so, na DESIGN VIEW, posicionados esquerda dos separadores que se encontrem mais abaixo na lista. 7. Para definir o separador/painel que apresentado inicialmente aberto quando a pgina carregada, seleccione o nome do separador na lista DEFAULT PANEL. Por omisso o primeiro separador/painel aparece aberto. Todas as modificaes do texto dos separadores e das reas de contedo so executadas directamente na DESIGN VIEW na janela do documento. Por exemplo, se pretender alterar o texto de um separador, seleccione simplesmente o texto e substitua-o (um clique triplo selecciona todo o texto).
463
Para adicionar contedo, substitua a frase Content 1. Tudo o que pode colocar numa pgina Web tambm pode colocar num painel: por exemplo, cabealhos, pargrafos, listas, formulrios, imagens e filmes Flash. Pode mesmo inserir outro SPRY TABBED PANEL. Para mudar para um separador diferente de forma a mudar o contedo do painel, 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 painis. Em HTML, um SPRY TABBED PANEL composto por um elemento div que agrupa uma lista no numerada (elemento ul) e um conjunto de elementos div, que correspondem aos contedos 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 painis

Os SPRY TABBED PANELS no so mais do que HTML bsico com estilos CSS aplicados. Os botes dos separadores so uma lista, e cada painel um div, estando todos os painis envolvidos por outro div. Toda a formatao controlada por uma folha de estilos externa, SpryTabbedPanels.css, que est localizada na pasta SpryAssets. O Dreamweaver fornece diferentes estilos CSS para formatar os painis, o separador correntemente seleccionado, e os separadores cujos painis no se encontrem visveis. Lista de elementos do painel com os estilos que controlam a sua aparncia:
o
SPRY TABBED PANEL como um todo (.TabbedPanels) Normalmente a largura do SPRY TABBED PANEL ajusta-se ao espao disponvel na pgina. Caso pretenda uma largura fixa ter de alterar a propriedade width do estilo .TabbedPanels, cujo valor por omisso 100%. O
464
grupo inteiro de painis e separadores est floated para a esquerda, por isso, qualquer contedo que aparea aps o grupo de painis aparecer ao lado direito dos painis. por isso que sempre ideal colocar um SPRY TABBED PANEL dentro de um div.
o
Todos os separadores (.TabbedPanelsTab) Existem dois tipos de separadores: o separador correntemente visvel e os separadores que no esto activos. O estilo .TabbedPanelsTab controla ambos estes tipos. Se pretender alterar o tipo de letra utilizado em todos os separadores, ou alterar a moldura que aparece volta dos separadores, edite este estilo. Para ajustar a quantidade de espao entre o limite do separador e o texto, edite a propriedade padding. Para alterar o espao entre separadores, edite a propriedade margin. Separador no activo (.TabbedPanelsTab e .TabbedPanelsTabHover) O estilo .TabbedPanelsTab tambm define o aspecto bsico de um separador no activo cor de fundo, etc. Alm disso, um separador no activo possui um estilo de hover/mouseover, que o .TabbedPanelsTabHover. A folha de estilos fornecida pelo Dreamweaver apenas altera a cor de fundo do separador quando o rato est por cima (hover), mas pode efectuar outras alteraes como a cor da letra. Separador activo (.TabbedPanelsTabSelected) Este estilo sobrepe-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 ateno alguns detalhes. Primeiro o estilo tem uma moldura inferior definida que no deve eliminar a no ser que elimine as molduras inferiores do estilo .TabbedPanelsTab. Seno, ver uma linha a separar o separador do painel. Alm disso, se alterar a cor de fundo do separador e do painel (possuem normalmente a mesma cor para fazer com que parea que formam um nico elemento), defina a cor da moldura inferior deste estilo para o mesmo valor. Seno, ter uma linha a separar o separador do painel. Evite utilizar tamanhos diferentes para o texto do separador activo e dos separadores no activos.
Painis (.TabbedPanelsContentGroup ou .TabbedPanelsContent) O estilo .TabbedPanelsContentGroup aplicado ao elemento <div> que embrulha todos os painis. O contedo de cada painel ele prprio embrulhado num elemento <div> que possui associada a classe .TabbedPanelsContent. A moldura e cor de
465
fundo dos painis so controladas pelo estilo .TabbedPanelsContentGroup. Se um painel possuir muita informao e outro painel possuir pouca, os painis aparecero muito diferentes quando alternar entre eles. Para definir uma altura idntica para todos os painis, 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 ateno do utilizador:
Para remover este comportamento, tem de criar um estilo chamado .TabbedPanelsTab:focus. Depois necessita de definir a propriedade 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
Contedo dentro do painel Embora os cabealhos e pargrafos herdem quaisquer propriedades de texto adicionadas aos estilos dos painis, pode querer definir um novo aspecto visual para os cabealhos, pargrafos, listas e outros elementos que coloque dentro de um painel. Por exemplo, para definir as caractersticas de todos os pargrafos de todos os painis, utilize um estilo com a designao .TabbedPanelsContent p.
No ficheiro SpryTabbedPanels.css existem estilos que comeam por .VTabbedPanels e que se destinam aos painis de separadores verticais. Estes painis verticais apresentam os separadores uns por cima dos outros ao longo do lado esquerdo do grupo de painis:
466
Para criar um destes painis basta aplicar a classe .VTabbedPanels ao elemento <div> que engloba todo o grupo de painis, e que identificado no TAG SELECTOR por <div.TabbedPanels#TabbedPanels1>. Clique com o boto direito do rato (CONTROL+CLIQUE no Macintosh) por cima do elemento no Tag Selector, seleccione a opo Set Class do menu que aparece e depois seleccione VtabbedPanels do submenu que aparece:
15.4 Spry Accordion Panel

Um painel acordeo ideal quando se tem de apresentar bastante informao num espao pequeno. Utiliza painis de informao como os SPRY TABBED PANELS, mas os separadores esto uns por cima dos outros e o contedo de todos os painis, menos o activo, aparece escondido. Ao contrrio dos separadores de um SPRY TABBED PANEL, nos separadores de um SPRY ACCORDION PANEL a poro do texto ocupa toda a largura de um painel e, quando seleccionado, abre suavemente para revelar o contedo. Alm disso tem de se definir a altura de cada painel, o que significa que se o contedo dentro de um painel for maior do que o prprio painel, aparecer uma barra de scroll no limite direito do painel. O Dreamweaver, por omisso, define 200 pxeis como altura, mas pode alterar este valor. No existe forma de alterar o painel por omisso no PROPERTY INSPECTOR. Quando uma pgina 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 aparea, por exemplo, dentro de um elemento <div>;
467
2. A partir das categorias SPRY ou LAYOUT da barra INSERT, clique no boto SPRY ACCORDION. Em alternativa pode utilizar a opo INSERT > SPRY > SPRY ACCORDION. O SPRY ACCORDION PANEL, com dois separadores, inserido na pgina:
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 omisso utilizado o nome Accordion1:
4. Para aumentar o nmero de painis, clique no boto + na lista PANELS. O novo separador inserido abaixo da entrada correntemente seleccionada. 5. Para remover um painel previamente inserido, seleccione-o na lista PANELS e clique em -; 6. Para alterar a ordem dos painis, seleccione qualquer item, na lista PANELS, e utilize os botes das setas para ajustar a posio relativa do painel. Os painis que se encontrem perto do topo no PROPERTY INSPECTOR so, na DESIGN VIEW, posicionados ao lado esquerdo dos painis 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 necessrio colocar online: SpryAccordionPanels.js e SpryAccordionPanels.css.
468
Se olhar para o cdigo HTML que suporta a estrutura de um SPRY ACCORDION PANEL, ver o que essencialmente um conjunto de elementos <div> imbricados:
<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 pgina:
<script type="text/javascript"> var Accordion1 = new Spry.Widget.Accordion("Accordion1"); </script> </body>
Um SPRY ACCORDION PANEL est dividido em seces compostas por um separador com um texto e por um painel com contedo que est associado ao separador. Cada separador est embebido no seu prprio elemento <div> o contedo 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 modificaes ao texto do separador e s reas de contedo so executadas 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 separador de um SPRY TABBED PANEL. Mais uma vez, pode mudar de um painel para outro atravs do cone olho na DESIGN VIEW , que aparece quando passa com o cursor por cima do separador:
Para adicionar contedo a um painel basta comear a escrever. Pode utilizar qualquer combinao de elementos HTML dentro de um painel. Porm, se ultrapassar a altura predefinida, que de 200 pxeis, ter de efectuar um duplo clique no painel de forma a entrar em modo de edio e poder visualizar todo o contedo do painel.
469
Pode tambm alternar entre a altura predefinida e o contedo total do painel utilizando o submenu ELEMENT VIEW que aparece quando se clica com o boto direito do rato dentro do contedo de um painel:
Todos os painis expandem-se ao efectuar o duplo-clique ou escolher a opo FULL do submenu ELEMENT VIEW. Para seleccionar todo o contedo de um painel utilize a opo EDIT > SELECT ALL ou tecle CONTROL+A.
15.4.1 Formatar um Spry Accordion Panel

Quando adiciona um SPRY ACCORDION PANEL pgina, o Dreamweaver associa pgina uma folha de estilos externa, de nome SpryAccordion.css. Este ficheiro CSS contm todos os estilos que controlam o aspecto dos separadores e painis do SPRY ACCORDION PANEL. O processo de modificao da aparncia destes separadores semelhante ao dos outros widgets Spry abordados 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 definies gerais do SPRY ACCORDION PANEL. aplicada ao elemento <div> que rodeia os separadores e os painis. Se adicionar formatao bsica do texto a este estilo, como cor, tamanho e famlia, os separadores e painis herdam estas configuraes. Os limites esquerdo, direito e do fundo (isto , a moldura) que aparecem volta do SPRY ACCORDION PANEL so definidos neste estilo.
Todos os separadores (.AccordionPanelTab) Este estilo altera a aparncia bsica de todos os separadores. Se definir um tipo de letra para este estilo, ento todos os separadores utilizam esse tipo de letra.
470
Alm disso, o padding dentro de cada separador, e a moldura que aparecem volta de cada separador so definidas neste estilo. Os separadores existentes dentro de um SPRY ACCORDION PANEL so apresentados em quatro formas possveis: separador activo (o separador para o painel correntemente seleccionado), separador no 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 aparncia, nomeadamente a cor de fundo. A existncia deste estado destina-se a ajudar os visitantes que navegam nas pginas 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 painis.
o
Separador no activo (.AccordionPanelTab, .AccordionPanelTabHover, e .AccordionFocused .AccordionPanelTab). O estilo .AccordionPanelTab tambm define a cor de fundo de um separador no activo. Alm disso, um separador no activo possui um estilo mouseover (hover), .AccordionPanelTabHover, para que quando o visitante passa o cursor por cima do separador, o separador fique realado para indicar que pode clicar nele. A folha de estilos bsica 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 no activos tambm mudam de aparncia, graas ao estilo .AccordionFocused .AccordionPanelTab. Os separadores tambm utilizam este estilo quando um visitante carrega na tecla TAB para aceder aos painis de um SPRY ACCORDION PANEL. A cor de fundo muda para um azul claro. Pode eliminar o estilo se no pretender que os separadores mudem quando so clicados, ou mudar a cor utilizada. Temos o mesmo problema do que nos SPRY TABBED PANELS relativamente linha que os browsers colocam volta dos separadores que possuem o focus. Neste caso, aparece volta de todo o SPRY ACCORDION PANEL. Para a remover crie um estilo .Accordion:focus e depois defina a propriedade outline com o valor none.
Separador activo (.AccordionPanelOpen .AccordionPanelTab, .AccordionPanelOpen .AccordionPanelTabHover e .AccordionFocused .AccordionPanelTab) O estilo .AccordionPanelOpen .AccordionPanelTab aplica-se ao separador associado com o painel correntemente aberto. Este estilo essencialmente sobrepe-se s propriedades de estilo herdadas do estilo .Accor-
471
dionPanelTab que todos os separadores partilham. Na folha de estilo geral, apenas a cor de fundo difere do outro estilo de separador. Alm disso, o texto num separador activo tambm muda de cor quando o rato de um utilizador passa por cima graas ao estilo .AccordionPanelOpen .AccordionPanelTabHover. No parece muito lgico este comportamento, j que no adianta nada clicar num separador relativo a um painel aberto. Um separador activo tambm muda de cor quando clica no respectivo separador, ou tecla TAB, para aceder ao SPRY ACCORDION PANEL. Neste caso utilizado o estilo .AccordionFocused .AccordionPanelTab.
o
Painis (.AccordionPanelContent) Este estilo aplicado ao elemento <div> que rodeia o HTML contido num SPRY ACCORDION PANEL. Pode ajustar as definies de tipo de letra para este estilo para afectar apenas o texto que se encontre dentro do painel. Este estilo define tambm a altura de cada um dos painis. A propriedade height possui, por omisso, o valor 200 pxeis, mas pode alterar este valor para mostrar um painel maior ou mais pequeno. Infelizmente, no existe forma para fazer com que os painis se ajustem automaticamente ao respectivo contedo para que os painis do SPRY ACCORDION PANEL funcionarem necessrio definir sempre uma altura.
Contedo dentro do painel O Dreamweaver no fornece estilos especficos para controlar os elementos HTML que se encontram dentro dos painis de um SPRY ACCORDION PANEL. Pode recorrer ao processo utilizado anteriormente nos Spry TABBED PANELS, utilizando .Accordion como primeira parte do identificador do estilo. Por exemplo, .Accordion p, pode ser utilizado para formatar a aparncia visual dos pargrafos existentes em todos os painis. Repare tambm que o contedo existente dentro de um painel aparece encostado aos limites esquerdo e direito do painel. No pode aplicar o padding directamente ao painel (isto , ao estilo .AccordionPanelContent) porque criaria um espao vazio debaixo dos separadores dos painis 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 pxeis dos lados esquerdo e direito, crie um estilo .Accordion h2, e depois defina os valores left e right da propriedade margin para 5 pxeis.
472
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 no existe outro painel associado, apenas o separador fica visvel quando o painel escondido. O painel pode estar aberto ou fechado quando a pgina apresentada inicialmente. Um SPRY COLLAPSIBLE PANEL ptimo para manter a informao fora do caminho de um visitante at que ele queira essa informao como um formulrio para assinar uma newsletter via e-mail ou direces para deslocar-se sua empresa. Adicione um painel aberto quando pretender apresentar uma informao 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 no interferem com o resto dos elementos da pgina (apenas os podero tapar). E, se o elemento AP estiver associado aco DRAG AP ELEMENT, ento poderemos ter um menu que pode ser deslocado pelo utilizador na janela do browser de forma a estar sempre mo. Para adicionar um widget SPRY COLLAPSIBLE PANEL a uma pgina: 1. Coloque o cursor onde pretende que o menu aparea, por exemplo, dentro de um elemento <div>; 2. A partir das categorias SPRY ou LAYOUT da barra INSERT, clique no boto SPRY COLLAPSIBLE PANEL. Em alternativa pode utilizar a opo INSERT > SPRY > SPRY COLLAPSIBLE PANEL. inserido na pgina um conjunto separador/painel, com Content como contedo do painel e um separador azul Spry acima do separador:
3. No PROPERTY INSPECTOR pode atribuir opcionalmente um nome ao SPRY COLLAPSIBLE PANEL.
473
No pode adicionar outros separadores ou painis. Pode contudo colocar mltiplos SPRY COLLAPSIBLE PANELS numa pgina, uns em cima dos outros. Este mtodo tem duas vantagens. Primeiro, no necessita que um painel aparea aberto quando a pgina carregada como acontece com um SPRY ACCORDION PANEL. Pode ter vrios SPRY COLLAPSIBLE PANEL numa pgina estando todos fechados. Um visitante clica no separador de um painel e ele abre deixando os outros painis fechados. Alm disso, como cada SPRY COLLAPSIBLE PANELS independente dos outros, um visitante pode ter todos os painis abertos em simultneo. 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. No afecta a forma como o painel aparece quando a pgina visualizada num browser. Para abrir/fechar um SPRY COLLAPSIBLE PANEL na DESIGN VIEW pode tambm recorrer ao cone olho que aparece no canto superior direito do separador quando se passa o cursor por cima.
5. Para que o painel aparea aberto quando a pgina visualizada no browser, escolha a opo OPEN da lista DEFAULT STATE no PROPERTY INSPECTOR. Para que o painel aparea fechado, escolha CLOSED. 6. A opo ENABLE ANIMATION permite activar/desactivar a animao (do tipo window-blind) que executada quando se clica no separador, para abrir/fechar o respectivo painel. Se a animao 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 necessrio colocar online. Neste caso so os ficheiros SpryCollapsiblePanels.js e SpryCollapsiblePanels.css.
474
Este widget expande-se ocupando a largura completa do elemento que o contm. 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 combinao simples de elementos div: um elemento div que marca o incio 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 contedo do painel este tem de estar visvel. Para isso utilize a opo 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 combinao de elementos HTML.
15.5.1 Formatar a aparncia de um SPRY COLLAPSIBLE PANEL

Quando adiciona um SPRY COLLAPSIBLE PANEL a uma pgina, o Dreamweaver estabelece uma ligao entre a pgina e a folha de estilos externa SpryCollapsiblePanel.css que contm todos os estilos que controlam o aspecto do separador e do painel. Os estilos utilizveis e as suas restries j foram abordados na seco sobre o SPRY ACCORDION PANEL. Mas para ter uma ideia rpida 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 completamente. Separador (.CollapsiblePanelTab) Este estilo permite alterar a aparncia bsica do separador. Separador quando o painel est fechado (.CollapsiblePanelTab) Define as propriedades do separador, como a cor de fundo, quando o painel est fechado. Separador quando o cursor se encontra por cima (.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover) Este estilo aplica-se ao estado mouseover/hover do separador, tanto quando o painel est aberto como quando est fechado. Se pretender definir uma aparncia diferente para o estado
o o
475
mouseover/hover para um separador quando o painel est aberto, tem de criar dois estilos: .CollapsiblePanelTabHover para quando o painel est fechado e .CollapsiblePanelOpen .CollapsiblePanelTabHover para quando o painel est aberto. Dever tambm eliminar o estilo .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover, ou alterar o seu nome para que s se aplique a um dos estados do separador.
o
Separador quando o painel est aberto (.CollapsiblePanelOpen .CollapsiblePanelTab e .CollapsiblePanelFocused .CollapsiblePanelTab) o estilo .CollapsiblePanelOpen .CollapsiblePanelTab aplica-se ao separador quando o painel est aberto. Este estilo sobrepe-se s propriedades de estilo herdadas do estilo genrico .CollapsiblePanelTab. Na folha de estilos por omisso, apenas a cor de fundo difere do outro estilo de separador, mas pode ser alterada. O separador tambm muda de cor quando clica nele ou tecla TAB. O estilo .CollapsiblePanelFocused .CollapsiblePanelTab utilizado neste caso, por isso poder querer edit-lo se no quiser este comportamento.
Painel (.CollapsiblePanelContent) Este estilo aplicado ao elemento <div> que envolve o HTML contido no painel. Pode ajustar as definies 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 contedo da pgina. Contedo dentro do painel Tal como acontece com os SPRY TABBED PANELS e os SPRY ACCORDION PANELS, o Dreamweaver no fornece estilos que controlem elementos especficos dentro de um SPRY COLLAPSIBLE PANEL. Utilize nomes do tipo .CollapsiblePanelContent para para os estilos que alteram a aparncia dos Pargrafos. Tenha em ateno que o contedo existente dentro de um SPRY ACCORDION PANEL interfere directamente com os limites esquerdo e direito do painel. No pode aplicar padding directamente ao painel (isto , ao estilo .CollapsiblePanelContent) porque isto adiciona espao extra dentro de um painel fechado, no o deixando fechar. Tem de adicionar padding aos elementos existentes dentro do painel.
476
15.6 Spry Tooltip

Uma SPRY TOOLTIP um widget que permite que aparea uma tooltip por cima de qualquer elemento da pgina:
Est muitas vezes associado a um link para fornecer informao sobre a pgina destino, sem ser necessrio visitar essa pgina. Para inserir uma SPRY TOOLTIP necessrio, em primeiro lugar, seleccionar o elemento da pgina ao qual vai estar associado. Em seguida clica-se no cone SPRY TOOLTIP da barra INSERT,
ou selecciona-se a opo INSERT > SPRY > SPRY TOOLTIP. O Dreamweaver insere uma SPRY TOOLTIP logo aps o elemento block-level (pargrafo, div, ou outro) em que a seleco estava inserida:
Dentro da tooltip pode inserir o contedo que muito bem entender incluindo imagens. Ao guardar a pgina em que a SPRY TOOLTIP existe, sero copiados os ficheiros SpryTooltip.css e SpryTootip.js para a pasta SpryAssets. O PROPERTY INSPECTOR permite alterar a funcionalidade da SPRY TOOLTIP:
477
Uma das opes que mais impacto tem no visitante da pgina a opo 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 pxeis, a distncia entre o ponteiro do rato e a tooltip. Se utilizar valores negativos 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 perodo de tempo que decorre, em milissegundos, entre o cursor passar por cima do elemento e a tooltip aparecer. A propriedade HIDE DELAY permite definir o perodo de tempo associado ao esconder da tooltip. As opes de BLIND e FADE so utilizadas para criar um efeito visual quando a tooltip mostrada e quando escondida. S existem dois estilos associados a uma SPRY TOOLTIP:
No convm mexer no estilo .iframeTooltip, por isso o estilo que devemos alterar o .tooltipContent. Por omisso apenas possui definida a propriedade background-color com o valor #FFFFCC que a cor tradicionalmente associada s tooltips. Como o que podemos colocar dentro de uma tooltip qualquer contedo HTML com estilos CSS aplicados, podemos fazer algo do gnero:
478
15.7 Widget Browser

O Adobe Widget Browser uma aplicao que ajuda a localizar e configurar widgets que esto disponveis no Adobe Exchange. Podemos assim instalar novos widgets no Dreamweaver de forma a disponibilizarmos novos efeitos visuais ou funcionalidades nas nossas pginas Web. Para instalar esta aplicao no seu computador, aceda opo INSERT > WIDGET e, na caixa de dilogo que aparece, clique no link WIDGET BROWSER:
Aceder a uma pgina da Adobe que lhe permite transferir a aplicao:
Depois de transferir o W IDGET BROWSER e de o instalar no seu computador, ele fica disponvel no menu START do Windows e na Pasta APPLICATIONS do
479
Macintosh. Invocando o programa aparece uma lista das widgets disponveis no Adobe Exchange:
Ter de fazer o login no Adobe Exchange (clique no link SIGN IN) para poder pr-visualizar e ver informao sobre widgets. Clicando num dos widgets disponveis, abre uma pgina especfica desse widget, onde pode obter diversa informao:
480
Clicando no boto PREVIEW no canto superior direito pode testar o widget:
Se clicar no boto ADD TO MY WIDGETS, o widget ser adicionado rea MY WIDGETS do WIDGET BROWSER e tambm ser adicionado ao Dreamweaver para poder ser utilizado em pginas Web. Na rea MY WIDGETS podemos clicar num widget para aceder respectiva rea de visualizao e configurao. Clicando no boto CONFIGURE acedemos rea de configurao,
onde podemos definir cores e outros parmetros, personalizando assim o widget de acordo com a pgina onde pretendemos inseri-lo. Atribua um nome configurao no campo NAME e clique no boto SAVE PRESET para guardar a configurao. Pode criar diversas configuraes.
481
Na pgina principal do widget pode clicar no boto SAVE WIDGET FILES para guardar numa pasta em disco os ficheiros necessrios para utilizar o widget, bem como uma pgina exemplo, para poder testar no seu browser. No Dreamweaver, os widgets instalados atravs do WIDGET BROWSER, esto disponveis a partir da opo INSERT > WIDGET:
Tambm pode ter acesso a esta caixa de dilogo atravs do cone W IDGET na categoria COMMON da barra INSERT:
Seleccionando um widget no campo WIDGET poder inseri-lo na pgina corrente:
Muitos destes widgets recorrem biblioteca jQuery, por isso no se admire de ver uma pasta js criada no seu stio Web com um ficheiro do tipo, jquery1.4.2.js. Caso tenha definido uma ou mais configuraes para um widget, elas aparecem disponveis no campo PRESET:
16
Validao de formulrios
A forma mais tradicional dos utilizadores de pginas Web submeterem informao atravs dos formulrios. Um dos maiores problemas que um web developer pode ter, com o processamento da informao inserida nos formulrios, a inexistncia dessa informao (isto , os campos no foram preenchidos) ou o formato indevido dos dados fornecidos. Quando cria um formulrio numa pgina define cada campo com um determinado propsito. O campo de nome, o campo do correio electrnico e o cdigo postal tm de ter limitaes relativamente informao que se pode l inserir. normal utilizar um programa do lado do servidor para verificar os dados introduzidos pelo utilizador no formulrio. Mas para o visitante de uma pgina muito aborrecido submeter um formulrio, 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 validao do preenchimento de campos de formulrios. Contudo, esta behavior bastante limitada nas validaes que disponibiliza. A Spry framework que utilizada pelo Dreamweaver disponibiliza diversos widgets que permitem uma validao avanada dos contedos dos campos de um formulrio.
16.1 Validao com widgets Spry

O mtodo tpico de validao de formulrios requer passos mltiplos para cada elemento do formulrio: primeiro o elemento tem de ser inserido na pgina, depois adiciona-se a behavior e finalmente as mensagens de erro. Com os widgets SPRY de validao de formulrios, todas estas tarefas so includas num nico passo. Dado que o preenchimento de um formulrio um processo interactivo, cada um dos widgets de formulrio 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.
484
Outra funcionalidade comum entre os widgets de formulrio Spry a capacidade de aplicar a validao em pontos mltiplos do processo. Por omisso, todos os widgets executam automaticamente a validao quando o utilizador submete o formulrio. Pode-se porm optar por executar a validao quando o utilizador clica noutro campo ou tecla TAB para mudar para outro campo (evento onBlur) ou quando o valor no campo do formulrio alterado (evento onChange). Quando pretender construir um formulrio com validao Spry, ter de utilizar os widgets Spry em vez dos campos tradicionais que esto disponveis no menu INSERT > FORM ou na categoria FORM da barra INSERT. Para inserir um elemento SPRY VALIDATION utilize as ltimas sete opes do menu INSERT > FORM ou os ltimos sete botes da categoria FORM da barra INSERT (poder tambm 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 validao Spry, no o nome do elemento do formulrio. Para atribuir um nome a um elemento clique no campo do formulrio. Ficar assim disponvel o PROPERTY INSPECTOR para o campo do formulrio e o nome pode ser introduzido no canto superior esquerdo:
Existem quatro passos que so comuns a todos os widgets Spry: 1. Coloque o cursor no local onde pretende que aparea o campo de texto, de preferncia, dentro de um formulrio existente; 2. A partir da categoria FORMS ou SPRY da barra INSERT clique no boto correspondente ao widget SPRY de validao que pretende inserir; 3. Se as preferncias do Dreamweaver estiverem definidas para apresentar os atributos de acessibilidade para os campos de um formulrio (esto activas por omisso), aparecer a caixa de dilogo INPUT FORM ACCESSIBILITY ATTRIBUTES:
16. VALIDAO DE FORMULRIOS
485
Dever preencher pelo menos o campo ID para atribuir um nome ao campo que est a introduzir na pgina; 4. Se o cursor no estiver dentro de um elemento <form>, o Dreamweaver pergunta-lhe se pretende criar um formulrio. Responda YES, caso ainda no possua nenhum formulrio na pgina. Normalmente o aparecimento da caixa de dilogo sinal que o cursor no se encontrava no local correcto. Quando um utilizador guarda uma pgina 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 aparncia).
16.1.1 Utilizar widgets de validao com tabelas

Muitos web designers utilizam tabelas com duas ou trs colunas para manterem um formulrio visualmente agradvel. Nestes casos ter de efectuar alguma manipulao de cdigo para que os widgets SPRY VALIDATION caibam dentro dessa estrutura. Por exemplo, na estrutura de um formulrio, normal utilizar-se uma tabela com trs colunas: a primeira coluna destinada ao texto identificador dos campos (labels), a segunda para o campo do formulrio e a terceira para mensagens de erro. A melhor tcnica para integrar os widgets SPRY VALIDATION numa tabela destas comear por colocar o widget na coluna do meio:
486
<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 elemento <span> onde se encontrava o id, que j no necessrio, dado que identificou a linha inteira com um ID Spry. Finalmente, mova o elemento <span> com a mensagem para a terceira coluna. O cdigo 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 cdigo faz com que j no seja depois possvel aceder ao PROPERTY INSPECTOR do widget Spry, por isso recomendvel que todos os ajustes ao widget sejam efectuados antes de mover o cdigo.
16.2 Spry Validation Text Field

O campo de texto o campo de formulrio mais comum dado que pode ser utilizado para propsitos diferentes quer esteja a recolher nomes, endereos de correio electrnico, ou nmeros de contribuinte. Requer assim o maior nmero possvel de tipos de validao, estando disponveis 14 tipos diferentes:
o o o o o o o
NONE (nenhuma validao especfica); INTEGER (nmero inteiro); EMAIL ADDRESS (endereo de correio electrnico); DATE (data); TIME (hora); CREDIT CARD (nmero de carto de crdito); ZIP CODE (cdigo postal);
487
o o o o o o o
PHONE NUMBER (nmero de telefone); SOCIAL SECURITY NUMBER (nmero da segurana social dos EUA); CURRENCY (moeda); REAL NUMBER/SCIENTIFIC NOTATION (nmeros inteiros, decimais e de notao cientfica); IP ADDRESS (endereo IP numrico); URL (endereo Web); CUSTOM (validao personalizada);
Alguns dos tipos de validao DATE, TIME, CREDIT CARD, ZIP CODE, PHONE NUMBER, CURRENCY, e IP ADDRESS incluem vrios formatos que se podem escolher, expandindo assim as possibilidades de validao. Alm disso, a opo de validao personalizada (CUSTOM) permite aos web designers especificarem qualquer padro de letras, nmeros e caracteres especiais. Para inserir um widget SPRY VALIDATION TEXT FIELD: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. O campo de texto, com cdigo de validao associado, ser introduzido na pgina:
3. Com o elemento SPRY seleccionado, no PROPERTY INSPECTOR, seleccione na lista TYPE o tipo de validao a aplicar:
Se pretender apenas assegurar-se que introduzido um valor textual (isto , o campo de preenchimento obrigatrio), deixe o campo TYPE com o valor NONE e assegure-se que a opo REQUIRED seleccionada;
488
4. Se escolher um tipo de validao que possua formatos variados, como DATE, seleccione o formato pretendido na lista FORMAT:
5. Se pretender que a validao seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR e/ou VALIDATE ON CHANGE. A opo VALIDATE ON BLUR efectua a validao quando o campo perde o focus, isto , quando o utilizador sai do campo, por exemplo, para aceder a outro campo do formulrio. A opo VALIDATE ON CHANGE efectua a validao quando o utilizador altera o contedo existente de um campo; Pode seleccionar ambas as opes, mas em campos de texto, a opo VALIDATE ON BLUR isto , validar depois do utilizador teclar TAB ou clicar noutro campo cobre todas as possibilidades, incluindo se o utilizador alterou ou no o valor existente; 6. Introduza o texto que pretende que aparea dentro do campo por omisso 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 informao que dever inserir no campo em causa. E pode, por exemplo, evitar a existncia de texto identificativo do campo, o que til quando se tem pouco espao disponvel na pgina; 7. Defina quaisquer outras opes para a validao seleccionada. Dependendo do tipo de validao escolhida, pode definir o nmero mnimo (MIN CHARS) e mximo de caracteres (MAX CHARS) bem como o valor mnimo (MIN VALUE) e mximo (MAX VALUE); 8. Se pretender evitar que os utilizadores introduzam caracteres invlidos, seleccione a opo ENFORCE PATTERN. Quando esta opo est activada, o utilizador no pode introduzir caracteres invlidos os caracteres no campo do formulrio piscam brevemente a vermelho e os caracteres invlidos so eliminados. Por exemplo, num campo que s aceite nmeros (validao INTEGER), no ser permitida a introduo de letras.
489
16.2.1 Preview States

Depois de ter definido as opes de validao para o campo de texto, pode personalizar os vrios estados que esto disponveis para o widget SPRY VALIDATION TEXT FIELD:
o
INITIAL o estado por omisso do campo de texto. Se tiver sido definido um valor no campo HINT apresentado no campo (quando a pgina visualizada no browser) quando este se encontrar neste estado; 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 invlido tiver sido introduzido no campo quando este validado:
VALID ocorre quando o valor introduzido tiver passado a validao:
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 possveis mensagens de erro e os estilos CSS utilizados.
16.2.2 Criar padres personalizados de validao

Alm das validaes predefinidas possvel criar um padro personalizado de validao, seleccionando a opo CUSTOM na lista TYPE do PROPERTY INSPECTOR. Ficar ento disponvel o campo PATTERN onde dever escrever a expresso de validao a aplicar. A Spry framework disponibiliza um conjunto de caracteres especiais utilizados para definir um padro personalizado:
490
Carcter 0 A ou a B ou b X ou x Y ou y ?
Representa Algarismos entre 0 e 9. Caracteres alfabticos case-sensitive. Caracteres alfabticos case-insensitive. Caracteres alfanumricos case-sensitive. Caracteres alfanumricos case-insensitive. Qualquer carcter
Por exemplo, se pretender especificar como formato um cdigo com trs letras seguidas de trs algarismos, o padro seria AAA999. Pode tambm especificar caracteres que sero utilizados de forma literal como acontece com o padro associado aos nmeros de telefone americanos que (000) 000-000. Neste caso, se a opo ENFORCE PATTERN estiver seleccionada, o parntesis de abertura aparecer depois do primeiro nmero ser introduzido e os outros caracteres no numricos aparecem medida que o utilizador introduz os algarismos no so aceites caracteres no numricos.
16.2.3 Alterar a aparncia dos campos e das mensagens de erro

Por omisso, cada estado possui estilos CSS associados que formatam a aparncia dos campos (nomeadamente a moldura e a cor de fundo) e das mensagens de erro. Estes estilos encontram-se definidos no ficheiro SpryValidationTextField.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 disponveis, utilize os seguintes estilos: VALID .textfieldValidState input, input.textfieldValidState
491
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 formulrio utilizado para campos onde o utilizador pode ter de escrever bastante texto, como acontece com os campos de comentrio. Dado que um elemento <textarea> pode aceitar qualquer tipo de texto, no existe um tipo de validao como acontece no SPRY VALIDATION TEXT FIELD. Mas habitual limitar o nmero mximo de caracteres que pode ser introduzido no campo. Para inserir um widget SPRY VALIDATION TEXTAREA: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. A textarea, com cdigo de validao associado, ser introduzida na pgina:
492
3. A partir do PROPERTY INSPECTOR da SPRY VALIDATION TEXTAREA escolha se o campo dever ser de preenchimento obrigatrio, ou no, activando/desactivando a opo REQUIRED:
4. Se pretender que a validao do campo seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR e/ou VALIDATE ON CHANGE; 5. Se pretender restringir o nmero de caracteres introduzidos, defina o nmero mnimo e/ou mximo 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 mximo. Utilize para isso a opo COUNTER: o valor CHARS COUNT permite apresentar o nmero de caracteres que j foram inseridos, enquanto a opo CHARS REMAINING permite apresentar o nmero de caracteres que ainda podem ser inseridos.
Necessita de introduzir um valor no campo MAX CHARS para activar a opo CHARS REMAINING; 7. Se tiver definido um nmero mximo de caracteres e quer proibir o utilizador de introduzir quaisquer caracteres adicionais, seleccione a opo BLOCK EXTRA CHARACTERS.
TION TEXTAREA
Dependendo dos parmetros do PROPERTY INSPECTOR, o widget SPRY VALIDAdisponibiliza at cinco estados diferentes:
o
INITIAL o estado por omisso 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; REQUIRED apresenta uma mensagem de erro se no tiver sido introduzido nenhum valor no campo quando este validado; MIN. # OF CHARS NOT MET disponvel se for introduzido um valor no campo MIN CHARS do PROPERTY INSPECTOR. Apresenta uma mensa-
o o
493
gem de erro se a contagem de caracteres corrente inferior ao mnimo especificado;

o
EXCEEDED MAX. # OF CHARS disponvel se for introduzido um valor no campo MAX CHARS do PROPERTY INSPECTOR. Apresenta uma mensagem de erro se a contagem corrente de caracteres for maior do que o mximo definido; VALID ocorre quando o valor introduzido tiver passado a validao.
Pode mudar de um estado para o outro seleccionando o valor pretendido na lista PREVIEW STATES no PROPERTY INSPECTOR. Esta aco expe as mensagens de erros e os estilos CSS possveis para cada estado para que os possa modificar, se necessrio. As opes CHARS COUNT e CHARS REMAINING simplesmente adicionam um nmero sem qualquer texto identificativo que ajude o utilizador a perceber a utilidade do nmero 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">Comentrios: </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 aparncia dos campos textarea e das mensagens de erro utilize a informao apresentada na seco sobre a SPRY VALIDATION TEXT FIELD. A nica diferena reside no nome dos estilos e no ficheiro que contm os estilos SpryValidationTextArea.css. O estilo que permite formatar as mensagens de erro :
textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg
494
Para alterar as cores de fundo do campo para cada um dos estados disponveis, utilize os seguintes estilos: 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 validao da seleco de opes (checkboxes). Pode ser utilizada com uma nica checkbox se esta for de seleco obrigatria ou com mltiplas checkboxes para controlar o nmero de checkboxes seleccionadas. Uma checkbox individual obrigatria muitas vezes utilizada para certificar que o visitante leu e est de acordo com algum tipo de acordo de utilizao, do tipo, CONCORDO COM OS TERMOS DA LICENA. A validao de mltiplas checkboxes pode acontecer quando a aplicao requer que o visitante seleccione um nmero mnimo/mximo de opes dentro de um determinado intervalo. Para inserir um widget SPRY VALIDATION CHECKBOX: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. A checkbox, com cdigo de validao associado, ser introduzida na pgina:
3. A partir do PROPERTY INSPECTOR do SPRY VALIDATION CHECKBOX escolha se pretende validar uma nica checkbox ou mltiplas checkboxes, seleccionando, para isso, a opo REQUIRED ou a opo ENFORCE RANGE, respectivamente:
495
4. Se pretender que a validao do campo seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR e/ou VALIDATE ON CHANGE; 5. Se escolher a opo ENFORCE RANGE, introduza o nmero mnimo de escolhas no campo MIN # OF SELECTIONS ou o nmero mximo no campo MAX # OF SELECTIONS, ou ambos. Esta opo s utilizada quando possui um conjunto de checkboxes associadas, por exemplo, para o visitante seleccionar os respectivos hobbies. Dependendo da configurao do PROPERTY INSPECTOR, o widget SPRY VALIDATION CHECKBOX disponibiliza at quatro estados diferentes:
o o
INITIAL o estado por omisso do campo; REQUIRED apresenta uma mensagem de erro se a opo REQUIRED tiver sido seleccionada e a checkbox no estiver seleccionada. Apenas disponvel se tiver seleccionado a opo REQUIRED (SINGLE); MIN. # OF SELECTIONS NOT MET apresenta uma mensagem de erro se a opo ENFORCE RANGE tiver sido seleccionada e o nmero corrente de checkboxes seleccionadas for inferior ao mnimo especificado; MAX. # OF SELECTIONS EXCEEDED apresenta uma mensagem de erro se a opo ENFORCE RANGE tiver sido seleccionada e o nmero corrente de checkboxes seleccionadas for superior ao mximo especificado.
Muda entre estados seleccionando um valor na lista PREVIEW STATES no PROPERTY INSPECTOR. Esta aco expe as mensagens de erro e os estilos CSS possveis para cada estado para que os possa modificar, se necessrio. Se estiver a trabalhar com mltiplas checkboxes, depois de inserir o widget SPRY VALIDATION CHECKBOX, todas as outras checkboxes devem ser introduzidas da forma tradicional, mas assegurando-se que todas as checkboxes inseridas encontram-se dentro do elemento <SPAN ID=SPRYCHECKBOX>:
496
Para formatar a aparncia das mensagens de erro utilize a informao apresentada na seco sobre a SPRY VALIDATION TEXT FIELD. A nica diferena reside no nome dos estilos e no ficheiro que contm os estilos 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, tambm conhecidas por drop-down menus (ou no Dreamweaver, LIST/MENU), so utilizadas nos formulrios para listar um grande nmero de valores. So nomeadamente utilizadas para listar os pases em formulrios de registo de utilizadores. Validar uma select list significa assegurar que o utilizador efectua uma escolha e que o utilizador no selecciona um separador ou outro valor invlido. O widget SPRY VALIDATION SELECT no fornece um campo no PROPERTY INSPECTOR para adicionar uma hint (isto , para alertar o utilizador sobre o significado do elemento do formulrio), mas pode configurar a sua primeira opo com um valor do tipo -- SELECCIONE UM PAS -- para conseguir o mesmo efeito. Para inserir um widget SPRY VALIDATION SELECT: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. A select list, com cdigo de validao associado, ser introduzida na pgina:
3. A partir do PROPERTY INSPECTOR do SPRY VALIDATION CHECKBOX escolha se necessrio o utilizador seleccionar um valor (isto , o campo de preenchimento obrigatrio), activando ou desactivando a opo BLANK VALUE:
497
Caso esta opo esteja activa isso significa que no pode ter na lista itens que ao serem seleccionados pelo utilizador, como -- SELECCIONE UM PAS --, no possuam um valor associado (isto , o atributo value igual a ""). No caso de no seleccionar a opo BLANK VALUE poder incluir itens sem nenhum valor associado, como, por exemplo:
<option value="" selected="selected">-- Seleccione um pas --</option>
Normalmente utilizam-se itens deste tipo como primeiras opes da select list; 4. Se pretender que a validao do campo seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR e/ou VALIDATE ON CHANGE; 5. Se o seu formulrio inclui separadores ou outras escolhas sem significado, seleccione a opo INVALID VALUE e defina o valor a restringir no campo adjacente. A opo INVALID VALUE destinada a proibir os utilizadores de seleccionarem opes como a seguinte, que funciona como separador de grupos de opes:
<option value="-1">--------------------</option>
Caso o utilizador seleccione esta opo o widget SPRY VALIDATION SELECT apresentar uma mensagem de erro. Dependendo da configurao do PROPERTY INSPECTOR, o widget SPRY VALIDATION SELECT disponibiliza at quatro estados diferentes:
o o
INITIAL o estado por omisso do campo de texto; REQUIRED apresenta uma mensagem de erro se a opo BLANK VALUE tiver sido seleccionada e no tiver sido efectuada nenhuma escolha; INVALID apresenta uma mensagem de erro se a opo INVALID VALUE tiver sido seleccionada e o utilizador tiver seleccionado uma opo com um valor imprprio; VALID apresentada quando o valor introduzido no campo tiver passado a validao.
Muda entre estados seleccionando um valor na lista PREVIEW STATES no PROPERTY INSPECTOR. Esta aco expe as mensagens de erro e os estilos CSS possveis para cada estado para que os possa modificar, se necessrio. Ter agora de seleccionar o elemento select e depois clicar no boto LIST VALUES que aparece no PROPERTY INSPECTOR para inserir as opes a apresentar na lista:
498
Para formatar a aparncia dos campos select e das mensagens de erro utilize a informao apresentada na seco sobre a SPRY VALIDATION TEXT FIELD. A nica diferena reside no nome dos estilos e no ficheiro que contm os estilos SpryValidationSelect.css. O estilo que permite formatar as mensagens de erro :
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg
Para alterar as cores de fundo do campo para cada um dos estados disponveis, utilize os seguintes estilos: 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 formulrio do tipo SPRY VALIDATION PASSWORD muito semelhante a um widget SPRY VALIDATION TEXT FIELD. A nica diferena que os caracteres que o visitante insere num campo deste tipo no aparecem visveis sendo substitudos por pontos ou asteriscos. Para inserir um widget SPRY VALIDATION PASSWORD na pgina: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. O campo de texto do tipo password ser introduzido na pgina:
499
3. O PROPERTY INSPECTOR, possui diversas propriedades de configurao do widget:
Se pretender apenas assegurar-se que introduzido um valor textual (isto , o campo de preenchimento obrigatrio), assegure-se que a opo REQUIRED seleccionada; 4. Se pretender que a validao seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR e/ou VALIDATE ON CHANGE. A opo VALIDATE ON BLUR efectua a validao quando o campo perde o focus, isto , quando o utilizador sai do campo, por exemplo, para aceder a outro campo do formulrio. A opo VALIDATE ON CHANGE efectua a validao quando o utilizador altera o contedo existente de um campo. Pode seleccionar ambas as opes, mas em campos de texto, a opo VALIDATE ON BLUR isto , validar depois do utilizador teclar TAB ou clicar noutro campo cobre todas as possibilidades, incluindo se o utilizador alterou ou no o valor existente; 5. Pode definir o nmero mnimo (MIN CHARS) e o nmero mximo de caracteres (MAX CHARS) que o visitante pode introduzir; 6. Os 8 campos que se encontram na parte de baixo do PROPERTY INSPECTOR permitem definir o nvel de exigncia para as senhas:
Dependendo dos parmetros do PROPERTY INSPECTOR, o widget SPRY VALIDATION PASSWORD disponibiliza at cinco estados diferentes:
o o o
INITIAL o estado por omisso de um campo confirm; REQUIRED apresenta uma mensagem de erro se no tiver sido introduzido nenhum valor no campo quando este validado; MIN. # OF CHARS NOT MET disponvel se for introduzido um valor no campo MIN CHARS do PROPERTY INSPECTOR. Apresenta uma mensa-
500
gem de erro se a contagem de caracteres corrente inferior ao mnimo especificado;

o
EXCEEDED MAX. # OF CHARS disponvel se for introduzido um valor no campo MAX CHARS do PROPERTY INSPECTOR. Apresenta uma mensagem de erro se a contagem corrente de caracteres for maior do que o mximo definido; INVALID STRENGTH disponvel se for introduzido um valor em algum dos oito campos que controlam o nvel de exigncia na criao de uma senha (password strength); VALID ocorre quando o valor introduzido tiver passado a validao.
Pode mudar de um estado para o outro seleccionando o valor pretendido na lista PREVIEW STATES no PROPERTY INSPECTOR. Esta aco expe as mensagens de erros e os estilos CSS possveis para cada estado para que os possa modificar, se necessrio. Para formatar a aparncia de campos password e das mensagens de erro utilize a informao apresentada na seco sobre a SPRY VALIDATION TEXT FIELD. A nica diferena reside no nome dos estilos e no ficheiro que contm os estilos SpryValidationPassword.css. O estilo que permite formatar as mensagens de erro :
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg
Para alterar as cores de fundo do campo para cada um dos estados disponveis, utilize os seguintes estilos: 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,
501
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 formulrio. Deve ser sempre utilizado em conjunto com outro campo do formulrio, sendo normalmente utilizado para a confirmao de introduo de senhas. Para inserir um widget SPRY VALIDATION CONFIRM na pgina: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. O campo de texto do tipo SPRY VALIDATION CONFIRM ser introduzido na pgina:
3. O PROPERTY INSPECTOR, possui diversas propriedades de configurao do widget:
Se pretender apenas assegurar-se que introduzido um valor textual (isto , o campo de preenchimento obrigatrio), assegure-se que a opo REQUIRED seleccionada; 4. Na lista VALIDATE AGAINST seleccione o campo do formulrio relativamente 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 validao seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR e/ou VALIDATE ON CHANGE. Dependendo dos parmetros do PROPERTY INSPECTOR, o widget SPRY VALIDATION PASSWORD disponibiliza at cinco estados diferentes:
o o
INITIAL o estado por omisso de um campo confirm; REQUIRED apresenta uma mensagem de erro se no tiver sido introduzido nenhum valor no campo quando este validado;
502
INVALID apresenta uma mensagem de erro para o caso em que o valor introduzido neste campo no for igual ao valor introduzido no campo referenciado pela propriedade VALIDATE AGAINST; VALID ocorre quando o valor introduzido tiver passado a validao.
Pode mudar de um estado para o outro seleccionando o valor pretendido na lista PREVIEW STATES no PROPERTY INSPECTOR. Esta aco expe as mensagens de erros e os estilos CSS possveis para cada estado para que os possa modificar, se necessrio. Para formatar a aparncia de campos confirm e das mensagens de erro utilize a informao apresentada na seco sobre a SPRY VALIDATION TEXT FIELD. A nica diferena reside no nome dos estilos e no ficheiro que contm os estilos SpryValidationConfirm.css. O estilo que permite formatar as mensagens de erro :
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg
Para alterar as cores de fundo do campo para cada um dos estados disponveis, utilize os seguintes estilos: 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 formulrio. Deve ser sempre utilizado em conjunto com outro campo do formulrio, sendo normalmente utilizado para a confirmao de introduo de senhas. Para inserir um widget SPRY VALIDATION RADIO GROUP na pgina: 1. Siga os procedimentos comuns de insero de um widget SPRY VALIDATION; 2. Aparece uma caixa de dilogo onde temos de atribuir um nome ao grupo de radio buttons, e de definir as opes que aparecero:
503
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 formulrio. Muitas vezes utilizam-se os mesmos valores nos dois campos, mas no obrigatrio; 4. A rea Lay out using decide a forma como os radio buttons vo aparecer no formulrio. Se vo aparecer um em cada linha, separados por elementos <br /> (LINE BREAKS) ou se pretendemos que apaream numa tabela, como era habitual h uns anos (opo TABLE); 5. Depois de clicarmos em OK, os radio buttons do widget SPRY VALIDATION RADIO GROUP sero introduzidos na pgina:
6. Podemos atribuir um ttulo ao grupo de radio buttons, e passar o segundo radio button para a mesma linha do primeiro colocando o cursor frente de masculino e teclando DELETE:
7. O PROPERTY INSPECTOR possui diversas propriedades de configurao deste widget:
Se pretender apenas assegurar-se que seleccionado um dos radio buttons (isto , o campo de preenchimento obrigatrio), seleccione a opo 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. necessrio seleccionar o radio button que se
504
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 validao seja efectuada antes de o formulrio ser submetido, seleccione as opes VALIDATE ON BLUR ou VALIDATE ON CHANGE. Dependendo da configurao do PROPERTY INSPECTOR, o widget SPRY VALIDATION RADIO GROUP disponibiliza trs estados diferentes:
o o o
INITIAL o estado por omisso do campo; REQUIRED apresenta uma mensagem de erro se nenhum radio button tiver sido seleccionado; INVALID apresenta uma mensagem de erro se for seleccionado o radio button que possui atribudo o EMPTY VALUE ou o INVALID VALUE.
Muda entre estados seleccionando um valor na lista PREVIEW STATES no PROPERTY INSPECTOR. Esta aco expe as mensagens de erro e os estilos CSS possveis para cada estado para que os possa modificar, se necessrio. Para formatar a aparncia das mensagens de erro utilize a informao apresentada na seco sobre a SPRY VALIDATION TEXT FIELD. A nica diferena reside no nome dos estilos e no ficheiro que contm os estilos SpryValidationRadio.css. O estilo que permite formatar as mensagens de erro :
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg
16.9 Concluso
Ao longo do livro abordamos as trs principais tecnologias que so utilizadas para o desenho e criao de pginas Web (HTML, CSS e JavaScript), na ptica da sua utilizao no Dreamweaver CS5. Os assuntos abordados e os exerccios realizados permitem que o web designer passe a criar pginas Web suficientemente sofisticadas. Mas, como bvio, a qualidade das pginas Web produzidas depende da capacidade artstica e tcnica de cada pessoa. O contedo deste livro um bom ponto de partida para o aprofundamento dos conhecimentos tcnicos sobre CSS e, sobretudo, JavaScript. So imensas as possibilidades de utilizao 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 pginas Web sem recorrer a cdigo (ou, pelo menos, recorrer a cdigo de programao de forma muito pontual).

O Guia Prático Do Dreamweaver cs5 Com HTML, Css e Javascript

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

O Guia Prático Do Dreamweaver cs5 Com HTML, Css e Javascript

Загружено:

Авторское право:

Доступные форматы

PEDRO REMOALDO

Reservados todos os direitos por Centro Atlntico, Lda.

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.2 Ferramentas de Web Design 1.3 Adobe Dreamweaver

1.4 Novidades no Dreamweaver CS5

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

2.5 rea de documento

4.3 Trabalhar com documentos 4.4 Visualizar pginas

5 Trabalhar com texto

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

6.2 Insero de imagens

6.3 Optimizar e alterar imagens

7.3 Propriedades dos links

7.8 Image maps

9.2 Campos de texto

9.3 Radio buttons 9.4 Checkboxes 9.5 Select

9.7 Melhorar a organizao do formulrio 9.8 Outros campos

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

11 CSS (Cascading Style Sheets)

11.10.1 CODE NAVIGATOR 11.10.2 Modo INSPECT

313 315 318 318 320 322 328 329

11.11 Preferncias na utilizao de CSS

12 Formatar texto com CSS

12.2 Aspecto do texto

12.7 Alinhar texto

12.9 Selectores especficos dos links

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

13 Layout de pginas Web

14.3 Swap Image e Swap Image Restore

14.8 Check Plugin 14.9 Go to URL

14.10 Drag AP Element 14.11 Pop-up message 14.12 Spry Effects

14.13 Utilizar outras behaviors

15 Navegao com Spry Widgets

15.3 Spry Tabbed Panel

15.4 Spry Accordion Panel

15.5 Spry Collapsible Panel

15.6 Spry Tooltip 15.7 Widget Browser

16.2 Spry Validation Text Field

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Caractersticas principais do livro

As alteraes a serem efectuadas no cdigo so assinaladas a negrito:

Viso geral e Organizao

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.1 Tecnologias client-side

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.2 Ferramentas de Web Design

1.3 Adobe Dreamweaver

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.3.1 Verses disponveis

1.3.2 Requisitos de sistema

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.4 Novidades no Dreamweaver CS5

1.4.1 Para os web designers

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.4.2 Para os web developers

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

O GUIA PRTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.4.3 Funcionalidades removidas

Sempre que abrir o Dreamweaver CS5, o aspecto do ambiente de trabalho o seguinte:

2.1 WELCOME SCREEN