o Guia Prático Do Dreamweaver Cs5 Com HTML, Css e Javascript - Centro Atlantico

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

[email protected] 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 regista-da 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 inde-pendente no filiada na Adobe Systems Incorporated.

NDICE

Prefcio 15 Introduo 15 Pblico-alvo e pr-requisitos 15 Caractersticas principais do livro 16 Convenes usadas 16 Viso geral e Organizao 17 Sobre o Autor 19

1 Web Design 21 1.1 Tecnologias client-side 21

1.1.1 HTML 23 1.1.2 XML 24 1.1.3 XHTML 25 1.1.4 CSS 25 1.1.5 JavaScript 25

1.2 Ferramentas de Web Design 26 1.3 Adobe Dreamweaver 27

1.3.1 Verses disponveis 28 1.3.2 Requisitos de sistema 29

1.4 Novidades no Dreamweaver CS5 30 1.4.1 Para os web designers 31 1.4.2 Para os web developers 33 1.4.3 Funcionalidades removidas 37

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

2 Ambiente de trabalho 39 2.1 WELCOME SCREEN 39 2.2 Barras de ferramentas 42

2.2.1 APPLICATION TOOLBAR 42 2.2.2 DOCUMENT TOOLBAR 45 2.2.3 Outras barras de ferramentas 48

2.3 Painis 49 2.3.1 Alterar a disposio dos painis 50 2.3.2 Flutuar um painel 51 2.3.3 Colocar grupos de painis no panel dock 52 2.3.4 Minimizar painis 54 2.3.5 Criar outro panel dock 56 2.3.6 Painis horizontais 56 2.3.7 Painel INSERT 57 2.3.8 PROPERTY INSPECTOR 59 2.3.9 Painel RESULTS 60

2.4 Workspaces 61 2.4.1 Criar um workspace 62 2.4.2 Repor tudo como estava 64

2.5 rea de documento 64 2.5.1 TAG SELECTOR 64 2.5.2 Outros cones e informao 66 2.5.3 Trabalhar com rguas 68 2.5.4 Trabalhar com a grelha 69 2.5.5 Trabalhar com guias 70

3 Stios Web 73 3.1 Definir um stio Web 74 3.2 Gesto de stios Web 78 3.3 Gerir ficheiros 80 3.4 Outra informao sobre o stio Web 83

3.4.1 Servidores Web 83 3.4.2 Trocar ficheiros com o servidor remoto 85

NDICE 7

4 Documentos 87 4.1 Preferncias dos novos documentos 93 4.2 Estrutura de um documento HTML 94

4.2.1 Seco HEAD 95 4.2.2 Seco BODY 97

4.3 Trabalhar com documentos 98 4.4 Visualizar pginas 100

4.4.1 Live View 101 4.4.2 Pr-visualizao das pginas em browsers 102 4.4.3 BrowserLab 104 4.4.4 Multiscreen 112 4.4.5 Device Central 115

5 Trabalhar com texto 117 5.1 Definir a estrutura do documento 117 5.2 Pargrafos 117

5.2.1 Seleccionar texto 118 5.3 Cabealhos 120 5.4 Alinhamentos 122 5.5 Quebras de linha e espaos 123 5.6 Caracteres especiais 125 5.7 Formatao especial 126 5.8 Citar texto 127 5.9 Dar nfase ao texto 128 5.10 Dividir em seces 129 5.11 Listas 130

5.11.1 Listas imbricadas 133 5.11.2 Listas de definies 134

5.12 Importar texto 136 5.13 Integrao com o Microsoft Word 140 5.14 Localizar e substituir 142 5.15 Dicionrio 142


6 Imagens 145 6.1 Formatos de imagens 147

6.1.1 Formato GIF 147 6.1.2 Formato JPEG 148 6.1.3 Formato PNG 148 6.1.4 Formato SVG 149

6.2 Insero de imagens 150 6.2.1 Image placeholders 153 6.2.2 Posicionar imagens 154

6.3 Optimizar e alterar imagens 157 6.3.1 Crop 157 6.3.2 Redimensionar 159 6.3.3 Luminosidade e contraste 160 6.3.4 Melhorar a definio 161 6.3.5 Optimizar imagens 161 6.3.6 Editar imagens num programa externo 163 6.3.7 Integrao com o Photoshop 166

7 Hiperligaes 169 7.1 Tipos de links 169 7.2 Criar links 171

7.2.1 Links para pginas externas ao site 175 7.3 Propriedades dos links 175

7.3.1 Abrir pginas em janelas ou separadores do browser 175 7.3.2 Outras propriedades dos links 176

7.4 Links em imagens 177 7.5 Links para ficheiros PDF e outros 178 7.6 Outro tipo de links 179 7.7 Links internos a uma pgina 181

7.7.1 Criar named anchors 181 7.7.2 Elementos invisveis 182 7.7.3 Criar links para aceder s named anchors 184 7.7.4 Named anchors externas 186

7.8 Image maps 187

NDICE 9

8 Tabelas 191 8.1 Criar uma tabela 192 8.2 Estrutura de uma tabela 194 8.3 Alterar uma tabela 195

8.3.1 Seleccionar uma tabela 196 8.3.2 Largura da tabela e das colunas 196 8.3.3 Seleccionar linhas e colunas 198 8.3.4 Inserir linhas e colunas 199 8.3.5 Alinhamento vertical 201 8.3.6 No wrap 202 8.3.7 Fundir e dividir clulas 204

8.4 Importar dados num formato tabular 206 8.5 Acessibilidade em tabelas 208 8.6 Outros elementos e atributos de uma tabela 210 8.7 Ordenar os dados de uma tabela 212 8.8 Modo expandido 213

9 Formulrios 215 9.1 Criar um formulrio 216

9.1.1 Propriedades do formulrio 218 9.2 Campos de texto 219

9.2.1 Text 220 9.2.2 Atributos de acessibilidade 220 9.2.3 Atributos dos campos de texto 223 9.2.4 Textarea 224 9.2.5 Password 226

9.3 Radio buttons 227 9.4 Checkboxes 232 9.5 Select 235

9.5.1 Jump menu 240 9.6 Botes 241

9.6.1 Botes do tipo imagem 242 9.7 Melhorar a organizao do formulrio 243 9.8 Outros campos 246


10 Contedo multimdia 249 10.1 Contedo Flash em pginas Web 249

10.1.1 Propriedades de uma animao Flash 254 10.1.2 Deteco do Flash Player 258

10.2 Integrao do Flash com o Dreamweaver 259 10.3 Vdeo Flash 261 10.4 Outros contedos multimdia 264

10.4.1 udio 264 10.4.2 Vdeo 266 10.4.3 Filmes Shockwave 266 10.4.4 Applets Java 267 10.4.5 Controlos ActiveX 268

11 CSS (Cascading Style Sheets) 269 11.1 Criar uma identidade para o stio Web 271 11.2 Anatomia de um estilo CSS 272 11.3 Criar estilos CSS 273

11.3.1 Painel CSS STYLES 277 11.3.2 Editar um estilo CSS 279 11.3.3 Eliminar propriedades e estilos CSS 281 11.3.4 Formatar outros elementos 282 11.3.5 Utilizao de cores 283

11.4 Utilizar ids em estilos 286 11.5 Classes CSS 288 11.6 Utilizar ficheiros CSS 292

11.6.1 Exportar estilos para um ficheiro CSS 292 11.6.2 Ligaes a ficheiros CSS 295

11.7 Cascading 297 11.7.1 Propriedades da pgina 298 11.7.2 Estilos inline, internos e externos 300 11.7.3 Precedncia 303

11.8 Selectores descendant 305 11.9 Activar e desactivar propriedades CSS 310 11.10 Informao sobre os estilos CSS de um elemento 311

NDICE 11

11.10.1 CODE NAVIGATOR 313 11.10.2 Modo INSPECT 315

11.11 Preferncias na utilizao de CSS 318 11.11.1 Preferncias para o cdigo 318 11.11.2 Outras preferncias 320

11.12 Barra STYLE RENDERING 322 11.13 Design-Time style sheets 328 11.14 Verificar a compatibilidade do browser 329

12 Formatar texto com CSS 331 12.1 Famlias de tipos de letra 332

12.1.1 Serif e sans-serif 333 12.1.2 Font stacks 333 12.1.3 Tamanho de letra 335

12.2 Aspecto do texto 338 12.2.1 Font-weight 338 12.2.2 Font-style 339 12.2.3 Font-variant 339 12.2.4 Text-transform 340 12.2.5 Text-decoration 340

12.3 Espaamento entre palavras e caracteres 341 12.4 Espaamento entre linhas 342 12.5 Espaamento entre pargrafos 344 12.6 Box Model 349

12.6.1 Padding 349 12.7 Alinhar texto 351

12.7.1 Alinhamento vertical 352 12.8 Listas 353

12.8.1 Listas de definies 360 12.9 Selectores especficos dos links 364


13 Layout de pginas Web 369 13.1 Utilizar tabelas para layout 369 13.2 Frames 374 13.3 Layouts CSS 382

13.3.1 Tracing image 382 13.3.2 Elementos block-level versus elementos inline 384 13.3.3 O elemento div 385 13.3.4 Opes de visualizao dos elementos CSS 387 13.3.5 Utilizao de floats 389 13.3.6 Layouts baseados em floats 390 13.3.7 Starter Pages 400 13.3.8 Posicionamento absoluto de elementos 403 13.3.9 Posicionamento relativo 408

14 Behaviors JavaScript 413 14.1 Behaviors, eventos e aces 413 14.2 Utilizar behaviors 416

14.2.1 O painel BEHAVIORS 416 14.2.2 Criar uma behavior 417 14.2.3 Gerir eventos 418

14.3 Swap Image e Swap Image Restore 419 14.3.1 Swap Image Restore 421 14.3.2 Preload Images 421 14.3.3 Rollover Image 422

14.4 Call JavaScript 424 14.5 Trabalhar com janelas de pop-up 424 14.6 Show-Hide Elements 425 14.7 Set Text 426

14.7.1 Set Text of Container 427 14.7.2 Set Text of Frame 427 14.7.3 Set Text of Status Bar 428 14.7.4 Set Text of Text Field 429

14.8 Check Plugin 430 14.9 Go to URL 431

NDICE 13

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

14.12.1 Appear/Fade 437 14.12.2 Blind 438 14.12.3 Grow/Shrink 438 14.12.4 Highlight 439 14.12.5 Shake 440 14.12.6 Slide 441 14.12.7 Squish 441

14.13 Utilizar outras behaviors 442 14.13.1 Instalar behaviors 443

15 Navegao com Spry Widgets 445 15.1 Spry widgets 445 15.2 Spry Menu Bar 447

15.2.1 Criar um menu de navegao 451 15.2.2 Alterar o aspecto de uma Spry Menu Bar 452 15.2.3 Aplicar estilos ao nosso menu exemplo 459 15.2.4 Remover uma Spry Menu Bar 461

15.3 Spry Tabbed Panel 461 15.3.1 Formatar os painis 463

15.4 Spry Accordion Panel 466 15.4.1 Formatar um Spry Accordion Panel 469

15.5 Spry Collapsible Panel 472 15.5.1 Formatar a aparncia de um SPRY COLLAPSIBLE PANEL 474

15.6 Spry Tooltip 476 15.7 Widget Browser 478

16 Validao de formulrios 483 16.1 Validao com widgets Spry 483

16.1.1 Utilizar widgets de validao com tabelas 485 16.2 Spry Validation Text Field 486


16.2.1 Preview States 489 16.2.2 Criar padres personalizados de validao 489 16.2.3 Alterar a aparncia dos campos e das mensagens de erro 490

16.3 Spry Validation Textarea 491 16.4 Spry Validation Checkbox 494 16.5 Spry Validation Select 496 16.6 Spry Validation Password 498 16.7 Spry Validation Confirm 501 16.8 Spry Validation Radio Group 502 16.9 Concluso 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 pou-cos anos de existncia. O desenho de pginas Web est em constante evolu-o, 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 comple-xas, 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 funcionalida-des que facilitam o dia-a-dia do web designer. A integrao com outras aplica-es da Adobe, como o Adobe Photoshop e o Adobe Fireworks, e com os ser-vios online que a Adobe disponibiliza, como o BrowserLab, e a integrao do WebKit, que permite uma rpida pr-visualizao das pginas dentro do pr-prio 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 Dream-weaver 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.


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: Caracteres introduzidos:

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 traba-lho 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-visualiza-o de pginas nos browsers, a utilizao do servio online Browser-Lab 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 optimi-zao 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 apre-sentao 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 inte-ragir com os visitantes das pginas Web.

Captulo 10 Contedo multimdia. Apresenta a forma como o con-tedo 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 formata-o.


Captulo 13 Layout de pginas Web. Enumera todos os mtodos que podem ser utilizados para desenhar layouts de pginas Web, no-meadamente, 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 inte-ractivas.

Captulo 15 Navegao com Spry Widgets. So apresentados os widgets Spry que permitem criar elementos de navegao, nomeada-mente navigation bars, jump menus, pop-up menus, painis e tooltips.

Captulo 16 Validao de formulrios. Aborda a validao da infor-mao 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 [email protected] 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 da-dos 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.

1 Web Design

O desenvolvimento de projectos Web uma actividade que junta vrios sa-beres 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 pgi-nas 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 pos-svel, 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 visi-tantes podem estar sujeitos a polticas internas do departamento de inform-tica 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.


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 cria-o 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 Apresentao

Comportamento

HTMLHTML

XHTMLXHTML

XMLXML

CSSCSS

XSLXSL

XSLTXSLT

ECMAScriptECMAScript(JavaScript)(JavaScript)

DOMDOM

Estrutura Apresentao

Comportamento

HTMLHTML

XHTMLXHTML

XMLXML

CSSCSS

XSLXSL

XSLTXSLT

ECMAScriptECMAScript(JavaScript)(JavaScript)

DOMDOM

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 utili-zando 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 nu-ma 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 cama-das 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 uti-lizada 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 colo-cadas 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 etique-ta de fim precedido por um smbolo /. Por exemplo:

Exemplo de um pargrafo

A estruturao aplicada ao texto existente entre a etiqueta de incio e a eti-queta de fim, que corresponde ao contedo do elemento. Exemplo de cdigo HTML:

Pgina teste


Bem-vindo ao Centro das Artes Se pretender contactar-nos utilize o seguinte endereo de e-mail: ...

Um programa utilizado pelo visitante (que tem a designao genrica de user-agent), e que normalmente um browser, interpreta os elementos HTML, para determinar como que o documento deve ser apresentado ao utilizador. Alguns elementos no necessitam de uma etiqueta de fim porque no estrutu-ram ou formatam contedo. So os chamados elementos vazios (empty ele-ments). Um exemplo o 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 par-cialmente 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 siste-mas 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:

Elsa Bessa Oceano de Ideias ...

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 restri-tivo 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 lingua-gem 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 basi-camente 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.


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 tor-nar 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 utili-zadas 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 bas-tante mais sofisticado do que o NOTEPAD [BLOCO DE NOTAS]), como o EditPlus ou o TextWrangler, ou mesmo processadores de texto como o Microsoft Word. A maior parte dos editores de texto actuais incluem funcionalidades como a utilizao de cores para realar a sintaxe, invocao de aplica-es externas e possibilidade de utilizao de expresses regulares pa-ra localizar e substituir texto.

1. WEB DESIGN 27

Editores HTML em modo cdigo Os editores HTML (HTML Editors) so editores de texto criados especi-ficamente 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 cru-zamento dos programas Adobe PhotoShop e Microsoft Word. Funcio-nam no modo WYSIWYG (WHAT YOU SEE IS WHAT YOU GET), isto , tudo o que o web designer criar e visualizar num destes programas ser exactamente o que o utilizador visualizar posteriormente num browser. Estes editores so bastante sofisticados, possuindo todas as ferramen-tas 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 profissio-nal no desenho de pginas e stios Web, sendo lder no mercado com cerca de 70% de quota.


um editor do tipo WYSIWYG que foi criado originalmente pela Macromedia, sendo actualmente disponibilizado pela Adobe, dado que esta empresa com-prou a Macromedia. Ao longo do tempo foram 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 fun-cionalidades tpicas de um editor de texto, nomeadamente a utilizao de cores para realar a sintaxe, auto-completion, invocao de aplicaes exter-nas, numerao de linhas e a possibilidade de utilizao de expresses regu-lares para localizar e substituir texto. Suporta uma grande variedade de tecnologias Web client-side (HTML, XHTML, CSS, Javascript e AJAX) e server-side (ASP, ColdFusion e PHP), 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 transfe-rncia 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 des-carregada 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 funcionalida-des. 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 reco-mendado); 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, preferen-cialmente, embora a activao tambm possa ser efectuada atravs do telefone;

Ligao Internet de banda larga para usufruir dos servios online que a Adobe disponibiliza.


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, preferen-cialmente, 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 in-formao 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 so-bretudo 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 brow-sers diferentes.

Este servio funciona atravs de cpias de ecr (screenshots) da pgina cor-rente 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 neces-sidade de o aceder atravs do Dreamweaver (ver a pgina http://browserlab.adobe .com). A vantagem de utilizar o BrowserLab a partir do Dreamweaver que po-demos testar as pginas sem ter de as publicar num servidor remoto.


1.4.1.2 CSS Disable/Enable Agora possvel desactivar e reactivar propriedades CSS directamente a par-tir do painel CSS STYLES:

Ao desactivar uma propriedade CSS, o Dreamweaver transforma-a simples-mente num 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 simplifica-das. 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 desen-volvimento de stios Web, por uma plataforma central. Permite criar stios so-fisticados com recurso a bases de dados, incluindo lojas online:


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


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, sincroni-zando 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 DMX-Zone, 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 funcionali-dades que j esto obsoletas, eram pouco utilizadas ou j no interessa su-portar. 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 WEB;

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.

2 Ambiente de trabalho

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

2.1 WELCOME SCREEN

No centro do ecr aparece o WELCOME SCREEN, que uma 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 WELCOME SCREEN. Mas se fechar todos os fichei-ros abertos no Dreamweaver, o WELCOME SCREEN volta a aparecer.


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

Esta lista estar vazia a primeira vez que abra o Dreamweaver aps a instala-o. 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 res-pectivas configuraes para esse tipo de ficheiros. Pode depois alterar estas configuraes. Nesta lista aparece tambm a opo DREAMWEAVER SITE que permite a cria-o 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 WELCOME 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 documenta-o 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.


Se, por acaso, no pretender que o WELCOME 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 WELCOME 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 tor-nam 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:


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 Ado-be ou de outras empresas:

Estes componentes podem ser gratuitos ou ter um custo associado. O ltimo cone o SITE MANAGEMENT, que permite criar novos stios Web e ge-rir stios existentes:

Uma das utilizaes mais comuns da APPLICATION TOOLBAR para mudar en-tre workspaces, utilizando o menu WORKSPACE:

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 nor-mas Web, e carregando em RETURN (ou ENTER), aceder aplicao Adobe


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

Pode acontecer que ao aceder a esta 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.


Dica Para desactivar a APPLICATION BAR aceda opo WINDOW > 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 dese-nho (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):


Estas opes tambm esto disponveis a partir do menu LAYOUT da APPLICA-TION 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 desactivar-mos 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:


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 fichei-ros do nosso stio para o servidor remoto.


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 escon-didas 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 Win-dows ou do Mac OS, como abrir documentos, criar novos documentos, guar-dar documentos, cortar, copiar, colar, undo e redo. J a barra BROWSER NAVIGATION,

permite controlar a navegao do motor de rendering WebKit que a opo LIVE VIEW activa:


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. Con-tm 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 dis-ponveis. Podemos ver os painis que esto disponveis, e podemos mostrar ou ocultar painis, utilizando o menu WINDOW.


Para fechar um grupo de painis, fechando os respectivos painis constituin-tes, 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.


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 documen-tos 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 pai-nel arrastando-o pelo seu separador identificativo:


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


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 hori-zontal 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 indivi-dual existente nesse grupo, bastando para isso manter pressionada a tecla OPTION no Macintosh ou ALT no Windows.


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 excep-to aquele que pretendemos utilizar num determinado momento. Para ganhar mais espao podemos clicar no cone COLAPSE TO ICONS, identifi-cado 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,


e arrastamos para o lado direito. Ficamos ento com uma nica coluna de co-nes:

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 PRO-PERTY INSPECTOR:

Se passar o rato por cima de uma destas barras e esperar 1 segundo, apare-cer o panel dock ou o PROPERTY INSPECTOR.


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

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 seguin-tes 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 acon-tece com o painel INSERT:


Quando este painel est no estado vertical temos de fazer muitas vezes scroll para acedermos ao objecto pretendido. Este painel funciona muito melhor como painel horizontal. Se pegarmos no painel INSERT e o arrastarmos para a parte de cima da janela do documento, at aparecer uma linha horizontal azul por cima dos nomes dos documentos abertos,

criamos um panel dock horizontal:

2.3.7 Painel INSERT Este painel INSERT permite simplificar as operaes de criao de elementos numa pgina, e est dividido em grupos distintos que so representados por abas/separadores.


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.


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 elemen-tos 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 pai-nel, como acontece com os elementos imagem e imageplaceholder:


Se efectuar um duplo-clique em qualquer parte vazia do PROPERTY INS-PECTOR, a parte de baixo ser escondida ou visualizada, conforme o estado em que se encontre. Esta possibilidade existe para ganhar 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 WINDOW, 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 PROPER-TY INSPECTOR e arraste-o para baixo para cima do painel RESULTS, at ver uma moldura azul:


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

Como o painel PROPERTY INSPECTOR ficou no fim, e como acontece em qual-quer 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:


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:


Este novo workspace, aparece agora na lista, como sendo o workspace utili-zado 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:


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,


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 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 pargrafo seleccionado se encontra dentro de um elemento , que por sua vez est dentro de um elemento . De realar que todos os objectos existentes numa pgina so filhos (ou netos, ou bisnetos, ...) do elemento .

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 ele-mento 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, nomea-damente remover o elemento (REMOVE TAG) ou edit-lo (QUICK TAG EDITOR).


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


No menu de definio da percentagem de ampliao a opo FIT SELECTION permite ampliar apenas o objecto que estiver selec-cionado 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 pre-tendido. As opes s aparecem seleccionveis se a janela do documento no estiver maximizada. Podem-se definir outros tamanhos personalizados utili-zando 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 resolu-o 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 selec-cionada na caixa de dilogo PREFERENCES (EDIT > PREFERENCES > STATUS BAR):


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 verti-cal, 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 defi-nir 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:


Para voltar a repor a origem das medidas no canto superior esquerdo, selec-cione 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 horizon-tais 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:


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 posicio-namento de objectos, sobretudo os objectos posicionados de forma absoluta. Para que os objectos alinhem automaticamente pelas linhas necessrio acti-var 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 vertical-mente. 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:


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.


Para personalizar as guias utiliza-se a opo EDIT 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 con-tedo 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.

3 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 estru-turados os ficheiros e as pastas de acordo com o tamanho e funo do stio Web:

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 utiliza-dos 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 con-tendo 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).

root

_css _imagens livros _scripts index.html

... autores


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 inca-paz 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 simplifi-cado. Agora s necessrio saber duas coisas para criar um stio Web:

Onde est localizado o root folder local, que a pasta no seu computa-dor 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 WELCOME 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:


Pode atribuir o nome que muito bem entender, no existindo nenhuma restri-o. 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 Dreamwea-ver, 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 pgi-nas, 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 mui-tos 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:


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 fichei-ro, 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 seleccio-nar 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:


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 pre-cedido 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 fichei-ros 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 Dreamwea-ver. 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 Dreamwea-ver 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;


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 fichei-ros existentes na pasta a que alterou o nome, o Dreamweaver per-guntar se pretende actualizar esses links:

3. STIOS WEB 83

Dica Repare que neste menu de contexto a penltima opo EXPLORE, que per-mite 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:


Por exemplo, para um servidor de testes local:

A pasta utilizada corresponde pasta de alojamento de stios Web de um ser-vidor 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 (pas-sword: Midt0wn):

Temos agora configurados dois servidores, um de testes local e outro remoto (no nosso exemplo, utilizamos como servidor remoto o servidor de testes da Adobe):

3. 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 confi-gurao de acesso fornecida por essa empresa.

3.4.2 Trocar ficheiros com o servidor remoto Depois de se ter configurado o servidor remoto, temos de estabelecer a liga-o, utilizando para isso o 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:


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:

4 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 WELCOME 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:


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 esco-lher 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 atri-buir 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 WELCOME 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 atri-buir pgina. Isso acontece devido s preferncias definidas no Dreamwea-ver. 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;

o Guia Prático Do Dreamweaver Cs5 Com HTML, Css e Javascript - Centro Atlantico

Documents

Transcript of o Guia Prático Do Dreamweaver Cs5 Com HTML, Css e Javascript - Centro Atlantico