PEDRO REMOALDO

Portugal/2010

Reservados todos os direitos por Centro Atlântico, Lda. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa dos editores da obra.

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT Autor:

Pedro Remoaldo

Colecção: Tecnologias Direcção gráfica: Centro Atlântico Revisão técnica: Centro Atlântico Capa: Paulo Buchinho © Centro Atlântico, Lda., 2010 Ap. 413 4764-901 V. N. Famalicão Portugal Tel. 808 20 22 21

[email protected] www.centroatlantico.pt Impressão e acabamento: Papelmunde 1ª edição: Outubro de 2010 ISBN: 978-989-615-098-3 Depósito legal: /10

Marcas registadas: Todos os termos mencionados neste livro conhecidos como sendo marcas registadas de produtos e serviços foram apropriadamente capitalizados. A utilização de um termo neste livro não deve ser encarada como afectando a validade de alguma marca registada de produto ou serviço. O Editor e o Autor não se responsabilizam por possíveis danos morais ou físicos causados pelas instruções contidas no livro nem por endereços Internet que não correspondam às Home-Pages pretendidas. O Guia Prático do Dreamweaver CS5 com HTML, CSS e JavaScript é uma publicação independente não filiada na Adobe Systems Incorporated.

ÍNDICE

Prefácio

15

Introdução Público-alvo e pré-requisitos Características principais do livro Convenções usadas Visão geral e Organização Sobre o Autor

15 15 16 16 17 19

1 Web Design

21

1.1 Tecnologias client-side

21 23 24 25 25 25 26 27 28 29 30 31 33 37

1.1.1 HTML 1.1.2 XML 1.1.3 XHTML 1.1.4 CSS 1.1.5 JavaScript

1.2 Ferramentas de Web Design 1.3 Adobe Dreamweaver 1.3.1 Versões disponíveis 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

6

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

2 Ambiente de trabalho

39

2.1 WELCOME SCREEN 2.2 Barras de ferramentas

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.2.1 APPLICATION TOOLBAR 2.2.2 DOCUMENT TOOLBAR 2.2.3 Outras barras de ferramentas

2.3 Painéis 2.3.1 Alterar a disposição dos painéis 2.3.2 Flutuar um painel 2.3.3 Colocar grupos de painéis no panel dock 2.3.4 Minimizar painéis 2.3.5 Criar outro panel dock 2.3.6 Painéis 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 informação 2.5.3 Trabalhar com réguas 2.5.4 Trabalhar com a grelha 2.5.5 Trabalhar com guias

3 Sítios Web

73

3.1 Definir um sítio Web 3.2 Gestão de sítios Web 3.3 Gerir ficheiros 3.4 Outra informação sobre o sítio Web

74 78 80 83 83 85

3.4.1 Servidores Web 3.4.2 Trocar ficheiros com o servidor remoto

ÍNDICE

7

4 Documentos

87

4.1 Preferências dos novos documentos 4.2 Estrutura de um documento HTML

93 94 95 97 98 100 101 102 104 112 115

4.2.1 Secção HEAD 4.2.2 Secção BODY

4.3 Trabalhar com documentos 4.4 Visualizar páginas 4.4.1 Live View 4.4.2 Pré-visualização das páginas 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 Parágrafos 5.2.1 Seleccionar texto

5.3 Cabeçalhos 5.4 Alinhamentos 5.5 Quebras de linha e espaços 5.6 Caracteres especiais 5.7 Formatação especial 5.8 Citar texto 5.9 Dar ênfase ao texto 5.10 Dividir em secções 5.11 Listas 5.11.1 Listas imbricadas 5.11.2 Listas de definições

5.12 Importar texto 5.13 Integração com o Microsoft Word 5.14 Localizar e substituir 5.15 Dicionário

117 117 117 118 120 122 123 125 126 127 128 129 130 133 134 136 140 142 142

8

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

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

6.2 Inserção 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 definição 6.3.5 Optimizar imagens 6.3.6 Editar imagens num programa externo 6.3.7 Integração com o Photoshop

7 Hiperligações 7.1 Tipos de links 7.2 Criar links 7.2.1 Links para páginas externas ao site

7.3 Propriedades dos links 7.3.1 Abrir páginas 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 página 7.7.1 Criar named anchors 7.7.2 Elementos invisíveis 7.7.3 Criar links para aceder às named anchors 7.7.4 Named anchors externas

7.8 Image maps

145 147 147 148 148 149 150 153 154 157 157 159 160 161 161 163 166

169 169 171 175 175 175 176 177 178 179 181 181 182 184 186 187

Í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 células

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 Formulários 9.1 Criar um formulário 9.1.1 Propriedades do formulário

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 Botões 9.6.1 Botões do tipo imagem

9.7 Melhorar a organização do formulário 9.8 Outros campos

9

191 192 194 195 196 196 198 199 201 202 204 206 208 210 212 213

215 216 218 219 220 220 223 224 226 227 232 235 240 241 242 243 246

10

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

10 Conteúdo multimédia 10.1 Conteúdo Flash em páginas Web 10.1.1 Propriedades de uma animação Flash 10.1.2 Detecção do Flash Player

10.2 Integração do Flash com o Dreamweaver 10.3 Vídeo Flash 10.4 Outros conteúdos multimédia 10.4.1 Áudio 10.4.2 Vídeo 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 sítio 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 Utilização de cores

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 Ligações a ficheiros CSS

11.7 Cascading 11.7.1 Propriedades da página 11.7.2 Estilos inline, internos e externos 11.7.3 Precedência

11.8 Selectores descendant 11.9 Activar e desactivar propriedades CSS 11.10 Informação sobre os estilos CSS de um elemento

249 249 254 258 259 261 264 264 266 266 267 268

269 271 272 273 277 279 281 282 283 286 288 292 292 295 297 298 300 303 305 310 311

11

ÍNDICE

11.10.1 CODE NAVIGATOR 11.10.2 Modo INSPECT

11.11 Preferências na utilização de CSS 11.11.1 Preferências para o código 11.11.2 Outras preferências

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 Famílias de tipos de letra 12.1.1 Serif e sans-serif 12.1.2 Font stacks 12.1.3 Tamanho de letra

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 Espaçamento entre palavras e caracteres 12.4 Espaçamento entre linhas 12.5 Espaçamento entre parágrafos 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 definições

12.9 Selectores específicos dos links

313 315 318 318 320 322 328 329

331 332 333 333 335 338 338 339 339 340 340 341 342 344 349 349 351 352 353 360 364

12

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

13 Layout de páginas 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 Opções de visualização dos elementos CSS 13.3.5 Utilização 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

413

14.1 Behaviors, eventos e acções 14.2 Utilizar behaviors

413 416 416 417 418 419 421 421 422 424 424 425 426 427 427 428 429 430 431

14.2.1 O painel BEHAVIORS 14.2.2 Criar uma behavior 14.2.3 Gerir eventos

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

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

15 Navegação com Spry Widgets 15.1 Spry widgets 15.2 Spry Menu Bar 15.2.1 Criar um menu de navegação 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

15.3 Spry Tabbed Panel 15.3.1 Formatar os painéis

15.4 Spry Accordion Panel 15.4.1 Formatar um Spry Accordion Panel

15.5 Spry Collapsible Panel 15.5.1 Formatar a aparência de um SPRY COLLAPSIBLE PANEL

15.6 Spry Tooltip 15.7 Widget Browser

16 Validação de formulários 16.1 Validação com widgets Spry 16.1.1 Utilizar widgets de validação com tabelas

16.2 Spry Validation Text Field

13

432 436 436 437 438 438 439 440 441 441 442 443

445 445 447 451 452 459 461 461 463 466 469 472 474 476 478

483 483 485 486

14

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

16.2.1 Preview States 16.2.2 Criar padrões personalizados de validação 16.2.3 Alterar a aparência 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 Conclusão

489 489 490 491 494 496 498 501 502 504

Prefácio

Introdução O desenvolvimento de sítios Web, partilhado, entre outros, por informáticos, designers, arquitectos de informação e profissionais de marketing, tem sido uma das actividades que mais alterações tem sofrido ao longo dos seus poucos anos de existência. O desenho de páginas Web está em constante evolução, passando de estáticas para interactivas e depois para dinâmicas. Originalmente criadas em simples editores de texto, com o desenvolvimento das tecnologias que possibilitam a criação de páginas cada vez mais complexas, foram surgindo aplicações para simplificar o trabalho dos web designers e dos web developers. O Adobe Dreamweaver é uma das aplicações que, ao longo de diversas versões, soube acompanhar a evolução dos sítios Web. Aplicação de web design por excelência, disponibiliza inúmeras funcionalidades que facilitam o dia-a-dia do web designer. A integração com outras aplicações da Adobe, como o Adobe Photoshop e o Adobe Fireworks, e com os serviços online que a Adobe disponibiliza, como o BrowserLab, e a integração do WebKit, que permite uma rápida pré-visualização das páginas dentro do próprio Dreamweaver, são pontos fortes desta aplicação. Mas é sobretudo a facilidade de utilização do ambiente de trabalho, o facto de se poderem criar páginas Web sem recorrer ao código, as funcionalidades avançadas de criação, aplicação e interacção com as Cascading Style Sheets, e, mais recentemente, a integração da Spry framework, que tornam o Dreamweaver uma ferramenta de excelência na criação de sítios Web.

Público-alvo e pré-requisitos Este livro é destinado a todos os web designers, existentes ou potenciais, que pretendam desenvolver competências sobre a criação de sítios Web. Não é exigida nenhuma experiência ao nível do desenho de páginas Web, dado que o livro pretende ser acessível a qualquer pessoa que tenha interesse no desenvolvimento de sítios Web.

16

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Características principais do livro Neste livro todos os capítulos tentam ter uma componente prática, mesmo aqueles em que são apresentadas, de forma mais ‘teórica’, as tecnologias que vão ser utilizadas. Existem diversos projectos práticos, do tipo ‘exercício guiado’, em que o leitor pode reproduzir, passo-a-passo, a demonstração ou projecto a desenvolver. Todos os capítulos encontram-se profusamente ilustrados. Este aspecto é considerado fundamental de forma a melhor guiar o leitor na reprodução dos passos a efectuar em cada projecto. Os ficheiros dos exemplos práticos encontram-se disponíveis para os leitores. Veja na página 20 como pode ter acesso a esses ficheiros.

Convenções usadas Este livro utiliza diversas convenções com vista a facilitar a assimilação da informação: ƒ Termos em inglês são apresentados, de uma forma geral, em itálico: « Utilizando as behaviors JavaScript, que são » «... não aparecerá nenhuma lista de drop-down.» ƒ O código encontra-se formatado em Courier New: #conteudo { background-color: #FF0; margin-bottom: 10px; }

ƒ As alterações a serem efectuadas no código são assinaladas a negrito: Caracteres introduzidos:  

ƒ O acesso a opções de menus ou de caixas de diálogo é formatado em letras maiúsculas pequenas. O carácter ‘>’ é utilizado para separar o menu da opção: «... seleccionamos a opção INSERT > FORM > TEXT FIELD» ƒ Combinações de teclas são identificadas através do carácter ‘+’. Por exemplo, CTRL+TAB significa pressionar a tecla ‘Control’ e, mantendo esta tecla premida, de seguida premir a tecla ‘Tab’, soltando depois as duas teclas.

PREFÁCIO

17

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

18

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

ƒ Capítulo 13 – Layout de páginas Web. Enumera todos os métodos que podem ser utilizados para desenhar layouts de páginas Web, nomeadamente, as tabelas, as frames, e as CSS. ƒ Capítulo 14 – Behaviors JavaScript. Explica as behaviors JavaScript que estão disponíveis no Dreamweaver para a criação de páginas interactivas. ƒ Capítulo 15 – Navegação com Spry Widgets. São apresentados os widgets Spry que permitem criar elementos de navegação, nomeadamente navigation bars, jump menus, pop-up menus, painéis e tooltips. ƒ Capítulo 16 – Validação de formulários. Aborda a validação da informação introduzida pelo utilizador em formulários, recorrendo a widgets Spry Validation.

Sobre o Autor

Pedro Remoaldo Pedro Remoaldo é licenciado em Informática, formador e consultor em sistemas e tecnologias de informação com cerca de uma década de experiência como docente no ensino superior. Autor de 17 livros sobre sistemas operativos, software, Internet, segurança e web development, dos quais os 10 títulos mais recentes foram publicados pelo Centro Atlântico. Os seus interesses são bastante abrangentes, mas dedica particular atenção às tecnologias Internet, aos sistemas de gestão de bases de dados e ao Business Intelligence.

Torne a sua leitura mais produtiva, reproduzindo os exemplos do livro no seu computador

OFERTA: Envie um e-mail* para [email protected] para receber os endereços de Internet de onde poderá fazer o download dos ficheiros de apoio deste livro (bem como futuras actualizações e outras informações sobre os nossos livros). Indique por favor o seu nome, bem como a data e local de compra do livro, para poder receber os ficheiros gratuitamente.

* O leitor consente, de forma expressa, a incorporação e o tratamento dos seus dados nos ficheiros automatizados da responsabilidade do Centro Atlântico, para os fins comerciais e operativos do mesmo. O leitor fica igualmente informado sobre a possibilidade de exercer os direitos de acesso, rectificação e cancelamento dos seus dados nos termos estabelecidos na legislação vigente, junto do Centro Atlântico, por qualquer meio escrito.

1

Web Design

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

1.1 Tecnologias client-side Existem diversas tecnologias que são utilizadas na construção de páginas Web (também conhecidas por tecnologias client-side). Dependendo da audiência, a maior parte dos visitantes utilizam os browsers mais recentes que suportam CSS avançadas e JavaScript, mas muitos visitantes podem estar sujeitos a políticas internas do departamento de informática que os força a utilizar browsers mais antigos ou a navegar com algumas funcionalidades (como o JavaScript) desactivadas. As pessoas com problemas de visão navegam muitas vezes utilizando leitores de ecrã (screen readers) ou software de ampliação, e para estes um design bastante sofisticado de uma página pode ser um empecilho.

22

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Alguns utilizadores não visitarão mesmo o seu sítio Web, preferindo ler content feeds, utilizando RSS. Quando se constrói estes feeds, quererá enviar o seu conteúdo HTML sem qualquer código JavaScript ou estilos CSS. A forma de acomodar o maior intervalo possível de visitantes é pensar na criação de páginas Web como utilizando um modelo de três camadas. Este é o modelo aconselhado pelo W3C (World Wide Web Consortium – www.w3c.org), a entidade responsável pela criação das normas que gerem a Internet. As camadas são:

Estrutura

Apresentação

HTML

CSS

XHTML

XSL

XML

XSLT

Comportamento ECMAScript (JavaScript) DOM

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

1. WEB DESIGN

23

recorrendo às CSS. As CSS permitem definir o tipo de letra, cor do texto e alinhamento (entre outras propriedades) dos elementos existentes numa página (texto, imagens, etc.). • Finalmente, podemos utilizar o JavaScript para introduzir uma camada adicional de interactividade e comportamento dinâmico, que tornará a navegação do sítio Web mais agradável quando se utilizem browsers que suportem JavaScript. Um exemplo típico são os links que mudam de cor quando o rato passa por cima. Também é possível disponibilizar alguma interactividade recorrendo às CSS. Este modelo de três camadas torna mais fácil a reutilização de porções do código em projectos futuros, reduz a quantidade de código duplicado e torna mais fácil localizar e resolver problemas umas semanas, meses ou anos mais tarde. Permite também lidar com as diferentes formas como as pessoas acedem às páginas Web (browsers, PDAs, tablets e smartphones, entre outros dispositivos). Se mantivermos o código HTML, CSS e JavaScript separado, será possível que a camada de conteúdo permaneça utilizável em ambientes onde as camadas de apresentação e/ou comportamento não podem operar. Este método é conhecido por progressive enhancement.

1.1.1 HTML A HTML (Hypertext Markup Language) é a linguagem de ‘marcação’ mais utilizada para a criação de páginas Web. Permite a descrição da estrutura da informação existente num documento, quer seja textual (através de cabeçalhos, parágrafos e listas, entre outros), quer sejam formulários interactivos, imagens e outros objectos (como filmes, animações ou áudio). A HTML é escrita na forma de etiquetas (conhecidas por tags), que são colocadas entre os sinais < e >. Um conjunto de etiquetas de início e de fim, bem como o respectivo conteúdo, tem o nome de elemento HTML. A etiqueta de fim é idêntica à etiqueta de início, excepto que o texto na etiqueta de fim é precedido por um símbolo “/”. Por exemplo:

Exemplo de um parágrafo

A estruturação é aplicada ao texto existente entre a etiqueta de início e a etiqueta de fim, que corresponde ao conteúdo do elemento. Exemplo de ‘código’ HTML:

24

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Bem-vindo ao Centro das Artes

Se pretender contactar-nos utilize o seguinte endereço de e-mail:

...

Um programa utilizado pelo visitante (que tem a designação genérica de useragent), e que é normalmente um browser, interpreta os elementos HTML, para determinar como é que o documento deve ser apresentado ao utilizador. Alguns elementos não necessitam de uma etiqueta de fim porque não estruturam ou formatam conteúdo. São os chamados elementos vazios (empty elements). Um exemplo é o que permite a inserção de uma imagem numa página Web. A especificação HTML define o tipo de conteúdo que pode estar contido entre as etiquetas de um elemento, e que pode incluir outros elementos, texto, uma mistura de elementos e texto, ou nem elementos nem texto. A estrutura de um documento HTML é definida numa norma da W3C (World Wide Web Consortium) que pode obter no endereço http://www.w3.org/html. A norma actual é a HTML 4.01, que foi publicada em 24 de Dezembro de 1999. Encontra-se em desenvolvimento uma nova norma, a HTML 5, que já é parcialmente suportada pelos browsers mais recentes. Introduz novos elementos e novas funcionalidades que permitem criar páginas mais parecidas com as produzidas pelo Adobe Flash.

1.1.2 XML A eXtensible Markup Language é uma linguagem de marcação genérica. O principal propósito desta linguagem é facilitar a partilha de dados entre sistemas diferentes, particularmente através da Internet. Algumas das linguagens actualmente utilizadas na Internet são baseadas no XML, como o XHTML, o RSS e o SVG, entre outras. Exemplo do conteúdo de um ficheiro XML: Elsa Bessa Oceano de Ideias ...

Esta tecnologia está normalmente associada às páginas dinâmicas ou ao AJAX, uma tecnologia recente que combina o XML com o JavaScript.

1. WEB DESIGN

25

1.1.3 XHTML A eXtensible HyperText Markup Language é uma linguagem de marcação semelhante ao HTML, mas que obedece às regras mais rígidas do XML. Enquanto a HTML é uma aplicação da SGML, uma linguagem de marcação muito flexível, a XHTML é uma aplicação da XML, um subconjunto mais restritivo da SGML. A XHTML pode ser vista como uma reformulação da HTML utilizando XML. A XHTML 1.0 tornou-se uma recomendação do W3C, em Janeiro de 2000, e a XHTML 1.1 tornou-se uma recomendação do W3C em Maio de 2001. Como parte da especificação HTML5, está a ser desenvolvida a XHTML5.

1.1.4 CSS As Cascading Style Sheets são uma linguagem de folhas de estilo utilizada para descrever a apresentação visual de um documento escrito numa linguagem de marcação como o HTML, o XHTML ou mesmo o XML. As normas associadas às CSS definem vários níveis e ‘perfis’, que podem ser suportados pelos browsers. Cada nível das CSS é construído ‘em cima’ do nível anterior, adicionando novas funcionalidades. Actualmente existem basicamente três níveis: CSS1, CSS2 e CSS3. Os perfis (profiles) são subconjuntos de um ou mais níveis das CSS que foram criados para um determinado equipamento ou interface com o utilizador. Existem perfis para equipamentos móveis, impressoras e televisores. Exemplo de estilos CSS: p { font-family: Arial, serif; } #tabelanotas { margin: 0; } a:hover { text-decoration: none; }

1.1.5 JavaScript A JavaScript é uma linguagem de scripting utilizada em browsers Web, o que significa que é utilizada em conjunto e ‘dentro’ de outras linguagens como o HTML. Não tem nenhuma relação com a linguagem Java, embora a sua sintaxe seja muito parecida. Criada pela Netscape Communications, originalmente o seu nome era LiveScript, e mais tarde deu origem a uma norma, a ECMAScript.

26

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

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

1.2 Ferramentas de Web Design Além das ferramentas de criação e manipulação de imagens (como o Adobe Photoshop, o Adobe Illustrator e o Adobe Fireworks), que estão fora do âmbito deste livro, o web designer utiliza, para o desenvolvimento de páginas Web, uma de três categorias de ferramentas: • Editores ou processadores de texto É possível criar páginas Web recorrendo apenas ao NOTEPAD [BLOCO DE NOTAS] e a um browser. Utiliza-se o NOTEPAD [BLOCO DE NOTAS] (ou outro editor de texto) para escrever código HTML e guardá-lo num ficheiro com a extensão .html ou .htm. Depois, utiliza-se um browser (como o Internet Explorer ou o Mozilla Firefox) para visualizar as páginas criadas. Pode-se também utilizar um editor rudimentar (mas ainda assim 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 utilização de cores para realçar a sintaxe, invocação de aplicações externas e possibilidade de utilização de expressões regulares para localizar e substituir texto.

27

1. WEB DESIGN

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

1.3 Adobe Dreamweaver O Adobe Dreamweaver é também a aplicação mais utilizada a nível profissional no desenho de páginas e sítios Web, sendo líder no mercado com cerca de 70% de quota.

28

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

É 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 lançadas várias versões, e actualmente é lançada uma versão de 18 em 18 meses. Tendo começado por ser um simples editor HTML, o Dreamweaver evoluiu para um editor WYSIWYG, e a partir da versão 4 passou a ser o programa de Web Design mais sofisticado e completo do mercado. O Dreamweaver é primariamente uma ferramenta do tipo WYSIWYG, utilizada para o desenvolvimento de sítios Web, que também pode ser utilizada para a introdução manual de código HTML/XHTML, bem como outras linguagens (PHP, ColdFusion, etc.). Para utilizar o Dreamweaver, um web designer não tem de perceber HTML, CSS ou JavaScript, dado que o programa ‘esconde’ o código produzido quando se utiliza apenas o ambiente ‘gráfico’. Mas em qualquer altura pode mudar para a ‘vista’ de código, onde possui funcionalidades típicas de um editor de texto, nomeadamente a utilização de cores para realçar a sintaxe, auto-completion, invocação de aplicações externas, numeração de linhas e a possibilidade de utilização de expressões 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), também trabalhando com bases de dados (MySQL). Permite uma gestão rápida e eficaz dos ficheiros utilizados na produção de sítios Web, e disponibiliza funcionalidades para o trabalho em equipa. Possui um motor interno de FTP, que pode ser utilizado para transferir ficheiros para o servidor Web de alojamento, mas também suporta outros métodos de transferência de ficheiros. A sua arquitectura extensível permite a utilização de extensões que adicionam mais funcionalidades ao programa.

1.3.1 Versões disponíveis O Dreamweaver CS5 existe como produto independente ou integrado nos seguintes conjuntos de produtos Adobe: • Adobe Creative Suite 5 Design Premium • Adobe Creative Suite 5 Web Premium • Adobe Creative Suite 5 Master Collection

1. WEB DESIGN

29

Existe ainda uma versão de experimentação (trial version) que pode ser descarregada através da Internet acedendo ao sítio http://www.adobe.com/downloads/. Esta versão é válida por um período de 30 dias. Caso possua o Dreamweaver 8, CS3 ou CS4 pode fazer a actualização para a versão CS5. 1.3.1.1 Actualizações Periodicamente a Adobe lança actualizações gratuitas do Dreamweaver que corrigem problemas identificados (bugs) e/ou introduzem novas funcionalidades. Com os problemas que ocorreram com o não suporte do Flash Player no iPhone e no iPad, e com a aposta da Apple nas tecnologias HTML5 e CSS3, a Adobe viu-se forçada a disponibilizar alguma funcionalidade do HTML5 no Dreamweaver CS5. Inicialmente disponível no Dreamweaver CS5 HTML 5 Pack Update, mais tarde foi integrado na actualização 11.0.3.

1.3.2 Requisitos de sistema De forma a se poder utilizar o Dreamweaver de forma funcional, é necessário que o computador possua idealmente determinadas características mínimas, se bem que seja ideal um computador com características mais poderosas. Para o Windows: • Processador Intel Pentium 4 ou AMD Athlon 64; • Microsoft Windows XP com o Service Pack 2 (o Service Pack 3 é recomendado); Windows Vista Home Premium, Business, Ultimate, ou Enterprise com o Service Pack 1; ou o Windows 7; • 1GB de memória; • 1GB de espaço livre em disco. Pode ser necessário espaço adicional durante a instalação; • Monitor com resolução de 1280x800 píxeis e placa gráfica com suporte de 16 bits de cor. Embora possa ser utilizada uma resolução de 1024x768 píxeis. • Unidade de DVD-ROM; • Para a activação do produto é necessário ligação à Internet, preferencialmente, embora a activação também possa ser efectuada através do telefone; • Ligação à Internet de banda larga para usufruir dos serviços online que a Adobe disponibiliza.

30

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Para o Macintosh: • Processador Intel de múltiplos núcleos (por exemplo, Dual Core); • Mac OS X v.10.5.7 ou v10.6; • 1GB de memória; • 1,8GB de espaço livre em disco. Pode ser necessário espaço adicional durante a instalação; • Monitor com resolução de 1280x800 píxeis e placa gráfica com suporte de 16 bits de cor; • Unidade de DVD-ROM; • Para a activação do produto é necessário ligação à Internet, preferencialmente, embora a activação também possa ser efectuada através do telefone; • Ligação à Internet de banda larga para usufruir dos serviços online disponíveis.

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

Agora, para criar um novo sítio Web, só é necessário fornecer o respectivo nome e a localização da pasta onde ele vai ficar ‘alojado’ ou onde ele já exista.

1. WEB DESIGN

31

Sempre que, ao longo do trabalho, o Dreamweaver CS5 necessitar de mais informação para configurar o sítio Web, ele pede-a.

1.4.1 Para os web designers As novas funcionalidades específicas para os web designers centram-se sobretudo na utilização das CSS. 1.4.1.1 Adobe BrowserLab O Dreamweaver CS5 integra-se com o Adobe BrowserLab, que é um serviço online CS Live, que permite testar o sítio numa grande variedade de browsers. Permite a comparação, lado a lado, do aspecto de uma página em dois browsers diferentes.

Este serviço funciona através de cópias de ecrã (screenshots) da página corrente tal como ela aparecerá em diferentes browsers. As imagens produzidas podem ser visualizadas no sítio Web do BrowserLab. O BrowserLab também pode ser utilizado como um serviço próprio sem necessidade de o aceder através do Dreamweaver (ver a página http://browserlab.adobe .com). A vantagem de utilizar o BrowserLab a partir do Dreamweaver é que podemos testar as páginas sem ter de as publicar num servidor remoto.

32

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.4.1.2 CSS Disable/Enable Agora é possível desactivar e reactivar propriedades CSS directamente a partir do painel CSS STYLES:

Ao desactivar uma propriedade CSS, o Dreamweaver transforma-a simplesmente num comentário. 1.4.1.3 CSS Inspection O modo INSPECT permite visualmente mostrar as propriedades do box model das CSS (incluindo padding, border e margin), em detalhe, sem ser necessário aceder ao código. Isto é, ao activarmos este modo, sempre que passarmos com o rato por cima de um elemento da página no Dreamweaver, aparecem as propriedades CSS respectivas no painel CSS STYLES, além de aparecerem os limites do elemento, as respectivas margens e o padding identificados com cores distintas:

Funciona de uma forma parecida com o add-on Firebug do Firefox. 1.4.1.4 CSS Starter Layouts A Adobe incluiu no Dreamweaver CS5 starter pages actualizadas e simplificadas. A simplificação em relação às starter pages do Dreamweaver CS4 tem a ver com o tipo de selectors CSS utilizados. Esta alteração só é perceptível quando se analisa o código HTML e CSS produzido por uma starter page.

1. WEB DESIGN

33

As starter pages permitem aos web designers mais inexperientes terem uma base de trabalho sólida com modelos de páginas bem estruturados.

1.4.2 Para os web developers Quando parecia que a Adobe ia deixar de considerar o Dreamweaver como uma ferramenta de desenvolvimento de páginas dinâmicas, para se concentrar no web design, eis que a versão CS5 nos traz importantes novidades nesta área. 1.4.2.1 Integração com o Business Catalyst O Adobe Business Catalyst (http://businesscatalyst.com/) é uma aplicação alojada num servidor que substitui as ferramentas tradicionais utilizadas para o desenvolvimento de sítios Web, por uma plataforma central. Permite criar sítios sofisticados com recurso a bases de dados, incluindo lojas online:

34

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

A integração com o Business Catalyst tem a forma de uma extensão ao Dreamweaver CS5 (anteriormente chamada Triangle) que preenche o painel BUSINESS CATALYST, e que facilita o acesso às funcionalidades do Business Catalyst a partir do ambiente de trabalho do Dreamweaver:

1.4.2.2 Suporte integrado de CMS PHP A funcionalidade DYNAMICALLY-RELATED FILES permite descobrir todos os ficheiros e scripts externos referenciados por páginas PHP de sistemas de gestão de conteúdos (Content Management Systems), e apresentar o nome desses ficheiros na barra RELATED FILES:

Por omissão, o Dreamweaver CS5 suporta esta funcionalidade para os sistemas de gestão de conteúdos WordPress, Drupal e Joomla! 1.4.2.3 Navegação Live View Agora, quando estamos na LIVE VIEW, em que é utilizado o motor de rendering WebKit para visualizar páginas Web, podemos interagir com a página como se

1. WEB DESIGN

35

estivéssemos a utilizar um browser, mesmo nas aplicações que utilizem dados dinâmicos.

Também é possível introduzir um endereço Web (URL) para inspeccionar páginas enviadas a partir de um servidor web remoto e editar páginas para as quais tenha navegado, caso existam num sítio definido localmente. 1.4.2.4 Code hinting de classes em PHP Esta funcionalidade apresenta a sintaxe de funções, objectos e constantes PHP, permitindo assim código mais correcto:

Funciona também com as funções e classes definidas pelo web developer, bem como as existentes em frameworks PHP, como a Zend framework.

36

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

1.4.2.5 Code hints específicas de sítio Permite a personalização do ambiente de programação quando se trabalha com bibliotecas PHP e frameworks CMS, como o WordPress, Drupal e Joomla!:

Pode-se incluir ou excluir, como fontes de code-hints, theme files para blogs e outros ficheiros e pastas personalizadas PHP. 1.4.2.6 Melhorias no suporte do Subversion O Dreamweaver CS5 melhora o suporte do sistema de controlo de versões Subversion, permitindo mover, copiar e eliminar ficheiros localmente, sincronizando depois as alterações com o repositório remoto SVN. O novo comando REVERT permite corrigir rapidamente conflitos na árvore de versões ou efectuar o rollback para uma versão anterior de um ficheiro. Adicionalmente, uma nova extensão do Dreamweaver permite especificar que versão do Subversion pretende utilizar em cada projecto. 1.4.2.7 Server Behaviors Ausente das novas funcionalidades estão novas server behaviors, embora existam algumas melhorias menores ao nível da segurança e da resolução de bugs, das existentes. Após a decisão, em Abril de 2009, de abandonar o desenvolvimento da Adobe Dreamweaver Developer Toolbox, parece que a Adobe vai deixar que sejam outras empresas e sítios Web, como o WebAssist, o CartWeaver, e a DMXZone, a desenvolverem novas server behaviors para o Dreamweaver.

1. WEB DESIGN

37

1.4.3 Funcionalidades removidas Em cada nova versão do Dreamweaver, a Adobe também remove funcionalidades que já estão obsoletas, eram pouco utilizadas ou já não interessa suportar. Algumas das funcionalidades removidas: • Barras de navegação (navigation bars); • Criação de um album de fotos Web; • Gestão das classes CSS disponíveis através da edição InContext; • Inserção de documentos FlashPaper; • Ligação a um servidor FTP/RDS sem definir um sítio; • Menu SHOW EVENTS no painel BEHAVIORS; • Opção INSERT/REMOVE MARK OF THE W EB; • Relatório de validação de Acessibilidade; • Validação de tags. As seguintes behaviors JavaScript suportadas pelo Dreamweaver até à versão CS4 e que já há muito eram obsoletas, desapareceram: • Check Browser; • Control Shockwave or SWF; • Hide Pop-up Menu; • Play Sound; • Show Pop-up Menu; • Timeline. Relativamente à produção de sítios dinâmicos as seguintes funcionalidades deixaram de existir: • ASP/JavaScript server behaviors; • Integração do Microsoft Visual Sourcesafe; • View Live Data. Isto significa que o Dreamweaver, como ferramenta de desenvolvimento de sítios Web dinâmicos, passou a suportar apenas o Coldfusion e o PHP, além do ASP VBScript. De realçar que no Dreamweaver CS4 a Adobe já tinha abandonado o suporte do ASP.NET e do JSP.

2

Ambiente de trabalho

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

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

40

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Uma das funcionalidades do W ELCOME SCREEN é a possibilidade de abrir os ficheiros com que trabalhou recentemente:

Esta lista estará vazia a primeira vez que abra o Dreamweaver após a instalação. À medida que vai trabalhando em diferentes páginas, a lista vai sendo preenchida. Mas existe sempre uma pasta OPEN que aparece no fim da lista, que permite aceder a qualquer ficheiro que exista em disco. Na coluna do meio do Welcome Screen temos uma lista dos diferentes tipos de documentos que podem ser criados no Dreamweaver:

Ao seleccionar uma destas opções cria um documento desse tipo com as respectivas configurações para esse tipo de ficheiros. Pode depois alterar estas configurações. Nesta lista aparece também a opção DREAMWEAVER SITE que permite a criação de um sítio Web e que é normalmente a primeira acção que se efectua quando se começa a trabalhar num novo projecto. A opção MORE mostra mais opções de criação de tipos de documentos:

2. AMBIENTE DE TRABALHO

41

A coluna da direita do W ELCOME SCREEN lista vídeos que estão disponíveis no sítio da Adobe TV sobre diversas funcionalidades do Dreamweaver, estando em destaque os vídeos sobre as novas funcionalidades da versão CS5:

Na parte inferior esquerda temos 3 links que permitem aceder a documentação online existente no sítio da Adobe:

A opção DREAMWEAVER EXCHANGE permite transferir widgets e recursos para tornar o Dreamweaver mais poderoso com novas funcionalidades ou melhoria das existentes.

42

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Se, por acaso, não pretender que o W ELCOME SCREEN fique visível quando fecha todos os documentos, existe uma opção no canto inferior esquerdo:

e aparecerá uma caixa de diálogo a informar sobre o procedimento que se tem de efectuar para o W ELCOME SCREEN voltar a aparecer:

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

2.2.1 APPLICATION TOOLBAR Na parte superior da interface do Dreamweaver, por cima da barra de menus, aparece a APPLICATION TOOLBAR que permite um acesso rápido a diversas opções:

O primeiro ícone desta barra tem a ver com a interface do Dreamweaver, mais precisamente com a forma como aparece a página na área de documentos:

2. AMBIENTE DE TRABALHO

43

Pode-se ver a página em modo DESIGN, em modo CODE ou dividida em dois (CODE AND DESIGN e SPLIT CODE). O segundo botão dá acesso a um menu com opções que permitem aumentar as funcionalidades do Dreamweaver instalando extensões e widgets, da 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 sítios Web e gerir sítios existentes:

Uma das utilizações mais comuns da APPLICATION TOOLBAR é para mudar entre workspaces, utilizando o menu W ORKSPACE:

Os workspaces permitem rearranjar os painéis e a interface do Dreamweaver mudando de workspace, utilizando o melhor que se adapta à tarefa que temos de efectuar. Na APPLICATION TOOLBAR existe também uma caixa de pesquisa.

Ao escrever aqui o nome de uma funcionalidade do Dreamweaver ou das normas Web, e carregando em RETURN (ou ENTER), acederá à aplicação Adobe

44

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Community Help, que está instalada no seu computador e que permite aceder a artigos sobre diversos assuntos:

Pode acontecer que ao aceder a esta aplicação tenha de fazer a actualização do Adobe Air ou da própria aplicação. E finalmente temos o menu CS LIVE,

que nos permite aceder a diversos serviços online disponibilizados pela Adobe. O mais interessante para o web designer é o Adobe BrowserLab.

2. AMBIENTE DE TRABALHO

45

Dica Para desactivar a APPLICATION BAR aceda à opção W INDOW > APPLICATION BAR. Apenas os três primeiros ícones desaparecem, sendo substituídos pela barra de menus.

2.2.2 DOCUMENT TOOLBAR A DOCUMENT TOOLBAR é uma barra de ferramentas bastante importante, estando associada ao documento em que está a trabalhar, sendo por isso que aparece logo acima de qualquer documento aberto:

Permite aceder a diferentes vistas da página, pré-visualizar a página, transferir ficheiros (upload), atribuir um nome à página, etc. A parte mais utilizada é a parte do lado esquerdo que permite mudar a forma de visualização da página corrente. Pode-se ver a página em modo de ‘desenho’ (DESIGN), em modo de código (CODE) ou uma mistura de ambos (SPLIT):

Quando estamos em modo SPLIT, podemos personalizar a forma como as duas ‘partes’ são apresentadas, recorrendo para isso ao menu VIEW (opções SPLIT VERTICALLY e DESIGN DESIGN VIEW ON TOP/LEFT):

46

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

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

que permite efectuar diversos testes às capacidades dos browsers, utilizando a barra BROWSER COMPATIBILITY,

e perceber os problemas que as páginas que o web designer cria podem ter em determinados browsers, sobretudo ao nível da utilização de estilos CSS. Mas se quisermos ver a nossa página/sítio num browser existe um ícone para o efeito:

2. AMBIENTE DE TRABALHO

47

As ajudas visuais (VISUAL AIDS) são linhas utilizadas pelo Dreamweaver para identificar certo tipo de elementos numa página:

Na DOCUMENT TOOLBAR existe também uma caixa de texto para atribuirmos um título à página:

Este é o texto que aparece no canto superior esquerdo dos browsers quando se acede à página:

Finalmente, o ícone FILE MANAGEMENT tem associado um menu com opções que permitem enviar ou receber ficheiros de um servidor Web remoto:

Por exemplo, o comando PUT permite fazer a transferência (upload) de ficheiros do nosso sítio para o servidor remoto.

48

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

2.2.3 Outras barras de ferramentas Existem mais três barras de ferramentas que normalmente aparecem na área do documento. Estas barras de ferramentas podem ser visualizadas ou escondidas através do menu VIEW > TOOLBARS:

Em alternativa pode colocar o cursor em cima de uma barra de ferramentas visível no Dreamweaver e clicar com o botão direito do rato (CONTROL+CLIQUE no Macintosh) para obter este menu:

A barra STANDARD,

permite efectuar operações comuns da maior parte dos programas do 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 navegação do motor de rendering WebKit que a opção LIVE VIEW activa:

2. AMBIENTE DE TRABALHO

49

Repare que temos disponíveis os botões BACK [RETROCEDER], FORWARD [AVANÇAR], REFRESH [REFRESCAR] e a BARRA DE ENDEREÇOS [ADDRESS BAR], tal como acontece num browser como o Mozilla Firefox. No fim desta barra aparece um menu, chamado LIVE VIEW OPTIONS,

que, como o próprio nome indica, contém opções para configurar a navegação com o browser disponibilizado internamente pelo Dreamweaver. Finalmente, a barra STYLE RENDERING, que será abordada em mais detalhe no capítulo sobre CSS, permite visualizar o design da página em diferentes tipos de média, como: screen, print, handheld, projection, TTY e TV. Contém também um botão que permite activar ou desactivar estilos CSS, além de botões específicos para as pseudo-classes associadas normalmente aos links:

2.3 Painéis Os painéis (em inglês, panels) no Dreamweaver são uma espécie de caixa de diálogo que pode flutuar por cima da interface ou estar encaixada (em inglês, docked) numa parte da interface. Por omissão, os painéis aparecem agrupados no lado direito da interface (no PANEL DOCK), quando se utiliza o ambiente de trabalho DESIGNER. Repare que os painéis estão agrupados em grupos de painéis (em inglês, panel groups), como, por exemplo, os painéis FILES e ASSETS. Quando abrimos o Dreamweaver não vemos todos os painéis que estão disponíveis. Podemos ver os painéis que estão disponíveis, e podemos mostrar ou ocultar painéis, utilizando o menu W INDOW .

50

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Para fechar um grupo de painéis, fechando os respectivos painéis constituintes, clique no ícone:

Depois, seleccione a opção CLOSE TAB GROUP no menu que aparece:

2.3.1 Alterar a disposição dos painéis Vamos ver como podemos dispor os painéis para que possamos organizar o ambiente de trabalho ao nosso gosto.

2. AMBIENTE DE TRABALHO

51

Uma das formas mais fáceis de mudar a disposição dos painéis é utilizar ambientes de trabalho (em inglês, workspaces) pré-definidos:

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

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

Os painéis estão encaixados no panel dock, que se encontra normalmente no lado direito da interface do Dreamweaver. Mas podemos fazer flutuar um painel arrastando-o pelo seu separador identificativo:

52

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Ao largar o botão do rato, o painel aparecerá a flutuar por cima dos outros elementos da interface:

Para flutuar um grupo de painéis, arraste-o pela zona ‘vazia’ que se encontra ao lado direito dos painéis que constituem o grupo:

2.3.3 Colocar grupos de painéis no panel dock A maior parte dos painéis possui uma localização por omissão. Mas podemos criar novos grupos de painéis ou rearranjar os respectivos painéis constituintes. Por exemplo, se quiser mudar um painel para outro grupo de painéis, basta arrastar o painel, pelo respectivo separador, para cima do grupo de painéis destino, e, quando aparecer uma moldura azul, largar o botão do rato:

2. AMBIENTE DE TRABALHO

53

Caso tenha flutuado um painel (ou grupo de painéis) e pretender voltar a encaixá-lo no panel dock, arraste-o pela barra superior,

ou pelo espaço ‘vazio’ ao lado dos painéis,

para uma posição entre dois grupos de painéis:

Pode verificar que está no local certo se apenas aparecer uma fina barra horizontal azul entre dois grupos de painéis, e não aparecer uma moldura azul à volta de nenhum painel.

Dica Também podemos arrastar um grupo de painéis, arrastando um painel individual existente nesse grupo, bastando para isso manter pressionada a tecla OPTION no Macintosh ou ALT no Windows.

54

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

2.3.4 Minimizar painéis Como o panel dock fica muito cheio pelos diversos grupos de painéis activos, para reduzir um grupo de painéis a uma única barra, basta efectuar um duplo clique num dos painéis que constituem esse grupo. É assim possível ter um panel dock com todos os painéis minimizados:

Uma utilização prática desta possibilidade é minimizar todos os painéis excepto aquele que pretendemos utilizar num determinado momento. Para ganhar mais espaço podemos clicar no ícone COLAPSE TO ICONS, identificado por duas setas, que estão no topo direito do panel dock:

O resultado é:

Para voltar a repor os grupos de painéis basta voltar a clicar no ícone COLAPSE TO ICONS.

Para ainda poupar mais espaço, colocamos o cursor entre o panel dock e a janela do documento, até o cursor mudar para,

2. AMBIENTE DE TRABALHO

55

e arrastamos para o lado direito. Ficamos então com uma única coluna de ícones:

Dica Se pretender esconder todos os painéis que aparecem na interface do Dreamweaver basta teclar F4. Aparece uma barra cinzenta vertical no local onde estava o panel dock, e uma barra cinzenta horizontal no local do 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

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

No caso de estarmos a utilizar dois monitores, o Dreamweaver permite que todo o panel dock flutue. Basta arrastá-lo pela barra de topo:

Também nesta barra temos acesso a um menu de contexto (clicando com o botão direito do rato, ou CONTROL+clique no Macintosh) que possui as seguintes opções:

2.3.5 Criar outro panel dock Se possuirmos um monitor de grandes dimensões podemos criar outro panel dock no lado esquerdo do ecrã, arrastando para lá um grupo de painéis (ou um só painel),

e quando aparecer uma barra azul vertical, largar o grupo de painéis (ou o painel):

2.3.6 Painéis horizontais Alguns painéis não funcionam muito bem como painéis verticais como acontece com o painel INSERT:

2. AMBIENTE DE TRABALHO

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 operações de criação de elementos numa página, e está dividido em grupos distintos que são representados por abas/separadores.

58

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

Dependendo do tipo de página em que estiver a trabalhar (por exemplo, uma página dinâmica) aparecerão outros grupos, como PHP, que permitem o acesso rápido a objectos desse tipo. Este painel permite mesmo efectuar operações que não produzem nenhum efeito visual, utilizando o ícone HEAD:

Nesta barra existe um separador FAVORITES, que inicialmente está vazio, e onde podemos colocar os objectos que utilizamos mais frequentemente:

Efectuando um clique com o botão direito do rato na barra (CONTROL+CLIQUE no Macintosh), podemos personalizar este separador:

Na caixa de diálogo que aparece podemos acrescentar objectos/ícones ao separador FAVORITES:

Na lista AVAILABLE OBJECTS os objectos estão separados por grupo. Aparecem aqui alguns objectos que não são visíveis nos menus, como Flash Paper. O botão ADD SEPARATOR permite adicionar um separador vertical.

2. AMBIENTE DE TRABALHO

59

O resultado da nossa configuração é:

Dica Deve ter reparado quando clica com o botão direito do rato na barra (ou CONTROL+CLIQUE no Macintosh), que aparece a opção COLOR ICONS, que permite utilizar, como o próprio nome indica, ícones coloridos na barra INSERT.

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

• O separador CSS permite criar novos estilos e editar estilos existentes relativos ao objecto seleccionado na área de documento:

O PROPERTY INSPECTOR também está dividido em duas partes como pode observar pela linha horizontal separadora. Na parte de cima encontram-se as propriedades mais comuns e utilizadas do elemento seleccionado. Em alguns elementos HTML existem bastantes propriedades na parte de baixo deste painel, como acontece com os elementos imagem e imageplaceholder:

60

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

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 espaço na interface do Dreamweaver.

2.3.9 Painel RESULTS Um grupo de painéis especial é o RESULTS que aparece na parte de baixo do ecrã, e que ocupa bastante espaço:

Para visualizar este painel, seleccione, no menu W INDOW , a opção RESULTS e depois seleccione uma opção no sub-menu que aparece:

Este painel disponibiliza diversa informação e permite efectuar uma série de operações na página. Se for utilizador frequente deste painel, e para evitar que ocupe tanto espaço, pode agregá-lo com o painel PROPERTY INSPECTOR. Pegue no painel PROPERTY INSPECTOR e arraste-o para baixo para cima do painel RESULTS, até ver uma moldura azul:

2. AMBIENTE DE TRABALHO

61

E tem assim o PROPERTY INSPECTOR encaixado (docked) com todos os outros painéis do grupo de painéis RESULTS:

Como o painel PROPERTY INSPECTOR ficou no fim, e como acontece em qualquer grupo de painéis, pode mover os painéis de posição dentro de um grupo de painéis. Basta clicar no título do painel e arrastá-lo para a posição desejada:

2.4 Workspaces Existem diversas tarefas que se podem efectuar no Dreamweaver quando se constroem sítios Web. Num dia podemos estar a trabalhar fortemente em código, noutro em dados dinâmicos, e noutro a construir o layout recorrendo a estilos CSS. Cada uma destas actividades utiliza um layout preferencial de painéis e de barras de ferramentas diferente. Em vez de estar constantemente a abrir e a fechar painéis e a arranjá-los, pode recorrer aos workspaces. O Dreamweaver disponibiliza diversos workspaces pré-definidos, como pode verificar no menu respectivo da APPLICATION TOOLBAR:

62

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

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

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

Temos que atribuir um nome ao workspace:

2. AMBIENTE DE TRABALHO

63

Este novo workspace, aparece agora na lista, como sendo o workspace utilizado por omissão quando se abre o Dreamweaver:

Qualquer workspace personalizado aparece no topo da lista e separado dos workspaces pré-definidos. A opção MANAGE WORKSPACES,

permite alterar o nome ou apagar um workspace personalizado:

64

O GUIA PRÁTICO DO DREAMWEAVER CS5 COM HTML, CSS E JAVASCRIPT

2.4.2 Repor tudo como estava Pode experimentar mover os painéis como quiser que depois pode repor tudo como estava no workspace que estava a utilizar:

2.5 Área de documento A área de documento é a zona do Dreamweaver onde o web designer cria o conteúdo das páginas Web:

Na parte de baixo desta área estão localizadas duas zonas de muito interesse para o web designer na chamada barra de estado (status bar).

2.5.1 TAG SELECTOR No lado esquerdo aparece o TAG SELECTOR,

2. AMBIENTE DE TRABALHO

65

que permite seleccionar, editar ou remover objectos da página. Ao clicar numa etiqueta (tag) que aparece nesta barra, será seleccionado o objecto respectivo na página:

Este é o processo preferido para seleccionar objectos na página. Por exemplo, se pretender seleccionar texto, como um parágrafo, clique no meio do parágrafo e depois clique na última etiqueta (tag) que aparece no TAG SELECTOR:

As etiquetas para a esquerda do objecto corrente correspondem aos seus parentes. Isso significa que, na última imagem, o parágrafo seleccionado se encontra dentro de um elemento