Por Carlos Jos Certificado no Macromedia Authorized Training Program.

Em Dreamweaver MX Fast Track e Developer

Captulo1 Conhecendo o Macromedia Dreamweaver MX 2004 ...............................................................3 Introduo ...............................................................................................................................3 Destaques: ...................................................................................................................................3 Requisitos de Sistema ....................................................................................................................3 Interface do Dreamweaver MX 2004 ............................................................................................4 Painel Insert .............................................................................................................................4 Barra de Ferramenta de Documentos (Toolbars Document) ............................................................5 Barra de Status.........................................................................................................................6 Properties Inspector ..................................................................................................................6 Painis Laterais .........................................................................................................................7 Menu Contextual .......................................................................................................................7 Captulo 2 Configurando seu Site ......................................................................................................8 Captulo 3 Criando um novo documento e formatando texto ............................................................... 13 Criando um novo documento .................................................................................................... 14 Appearance ................................................................................................................................ 15 Links.......................................................................................................................................... 16 Headings .................................................................................................................................... 16 Title / Encoding ........................................................................................................................... 17 Tracing Image............................................................................................................................. 18 Trabalhando com textos ........................................................................................................... 18 Inserindo e formatando um texto .................................................................................................. 18 Captulo 4 Configurando Hiperlinks.................................................................................................. 19 Link relativo ........................................................................................................................... 19 Link Absoluto .......................................................................................................................... 20 Link de email .......................................................................................................................... 20 Link Interno............................................................................................................................ 20 Captulo 5 Criando image Map ........................................................................................................ 22 Inserindo uma imagem no documento ....................................................................................... 22 Captulo 6 Trabalhando com tabelas ................................................................................................ 24 Criando uma tabela simples no standart view ............................................................................. 24 Propriedade de uma tabela, pelo properties inspector. ................................................................. 25 Propriedade de uma clula, pelo properties inspector. .................................................................. 26 Captulo 7 Projetando um layout de um documento........................................................................... 28 Captulo 8 Criando uma library ....................................................................................................... 30 Criando uma library ................................................................................................................. 30 Captulo 9 Criando Templates ou Samples........................................................................................ 32 Definindo as reas editveis ..................................................................................................... 32 Criando uma novo documento a partir de uma template............................................................... 33 Alterando um template ............................................................................................................ 34 Captulo 10 Efeitos de boto........................................................................................................... 35 Boto rollover ......................................................................................................................... 35 Barra de navegao (navigation bar) ......................................................................................... 36 Boto de Flash ........................................................................................................................ 37 Captulo 11- usando frames .............................................................................................................. 38 Criando os frames (molduras)...................................................................................................38 Como criar um conjunto de molduras......................................................................................... 38 Propriedades dos Frames ......................................................................................................... 40 Captulo 12 Formulrios ................................................................................................................. 41 Criando um formulario ............................................................................................................. 41 Captulo 13 Trabalhando com CSS Style .......................................................................................... 44 Criando um novo CSS Style ......................................................................................................45 Alterando um CSS Style criado..................................................................................................46 Anexando um arquivo de CSS Style externo ao nosso documento ................................................. 47 Aplicando um CSS Style em texto.............................................................................................. 47 Captulo 14 Usando Behaviors ........................................................................................................ 48 Captulo 15 Usando Draw Layer ...................................................................................................... 50 Como criar um Layers .............................................................................................................. 50 Para selecionar uma camada, siga um dos procedimentos abaixo:................................................. 50 Convertendo uma tabela em layer ............................................................................................. 51 Convertendo um layer em tabela............................................................................................... 52 O Behavior Show Hide Layer.....................................................................................................52 Captulo 16 Publicando o Site ......................................................................................................... 53 Publicando um site local via FTP ................................................................................................ 53

Captulo1 Conhecendo o Macromedia Dreamweaver MX 2004

Introduo
O Dreamweaver MX 2004 um editor profissional de HTML, que projeta e gerencia sites e aplicativos para a Internet. A atual verso, trs inmeras novidades e novos recursos para facilitar o uso e gerar uma maior produtividade em seus trabalhos. A tecnologia Roundtrip HTML do Dreamweaver, importa documentos HTML feitos em outros aplicativos ou at mesmo feito por um desenvolvedor, sem alterar ou adicionar cdigo extra. Os recursos de edio visual do Dreamweaver MX 2004, so do tipo WYSIWYG(What You See Is What You Get - O que voc v o que voc adquire). Permitindo adicionar rapidamente imagens, textos e funcionalidades aos seus documentos HTML, sem ter que voc escreva uma linha de cdigo ou at mesma saiba programar para HTML. Uma grande novidade desta verso que foi criado um ambiente exclusivo para desenvolvedores, para assim ter uma maior diversidade entre os profissionais como Webdesigners e Webmasters. Destaques: O Dreamweaver MX 2004 permite a insero de cdigos HTML direto no codigo-fonte. A rea de trabalho pode ser totalmente personalizada conforme as suas preferncias. Tem suporte as principais tecnologias utilizadas atualmente na Internet. Como por exemplo: ColdFusion, PHP, ASP JavaScript, ASP VBScript, ASP .NET C#, ASP .NET VB, JSP, JavaScript, XML e CSS. Podemos estender as funcionalidades do Dreamweaver MX 2004, com a instalao de extenses, que so pequenos aplicativos. Requisitos de Sistema Windows Processador Pentium II ou equivalente com 300 Mhz ou superior; Windows 98/Me/NT 4.0 com Server Pack 3 ou superior/2000/XP; Verso 4 ou superior do Internet Explorer ou Netscape; 96 Mb de memria (128 MB recomendado); 275 Mb de espao no HD quanto maior melhor;

Interface do Dreamweaver MX 2004

Esta a nova interface do programa, esta no a primeira tela que mostrada logo da abertura do programa, mas iremos falar da primeira tela mas adiante.

Minimizar e Maximizar painis

Painel Insert

O painel Insert dividido em varias categorias: Common: Possui os elementos comuns a serem utilizados em seus documentos, Hyperlinks, Email Link, Named Anchor, Table, Date e Comment, foram criados novos grupos na categoria , Media , Templates , que Common, que so: Images antes eram categorias. Layout: Define o tipo de visualizao, tambm podemos desenhar tableas, layers e frames nesta nova verso 2004. Forms: Contm todos os elementos de formulrio.

Text: Contm elementos referentes aos tesxtos. HTML: Esta nova categoria traz elementos da linguagem HTML, como Head, Tables, Frames e Script, incorporou o Horizontal Rule, que antes era da categoria Common. Application: Contm elementos utilizados para a criao de aplicaes utilizando acesso a uma base de dados. Flash Elements: Importe um elemento de Flash em uma pgina e personalize as suas propriedades dentro do Dreamweaver MX 2004. Favorites: Nesta nova categoria podemos personalizar com os elementos de varias categorias, ou os elementos mais usados e assim gerar uma produtividade, pois os elementos que queremos j esto todos a mo. Podemos mudar a forma de visualizao do painel Insert deixando igual verso anterior. A ltima opo quando clicamos no boto de categorias, nos possibilita fazer esta mudana. Para voltar a visualizao padro do painel Insert, clique no cone no canto superior direito no final do painel.

Barra de Ferramenta de Documentos (Toolbars Document)

Esta barra configura a visualizao do documento entre outros: Code: Exibe o cdigo-fonte HTML Split: Divide a janela exibindo o cdigo-fonte HTML e ao mesmo tempo o design do documento.

Design: Exibe o design do documento, este mais usado por quem no tem nenhum conhecimento de HTML. Title: Define o titulo do documento, aquele que aparece na parte superior do navegador. No Browser Check Errors: Para checar erros de navegador, podemos informar quais navegadores. File Management: Permite gerenciar os documentos do site, principalmente quando estamos trabalhando com um provedor online ou off-line, para fazer transferncias (put) de arquivos ou baixar (get) arquivos. Preview / Debug in Browser: Permite uma visualizao prvia no navegador antes da publicao. Refresh: Atualiza o documento. View Options: Opes referentes visualizao de vrios elementos no documento inclusive elementos invisveis, tais como: named anchor, layers, image map, rules, grids e etc.

Barra de Status

Nela contm informaes importantes do documento, como o quick tag, window size e tempo de carregamento do documento. No lado esquerdo, uma referencia rpida aos comandos de HTML que esto no documento. No lado direito o tamanho da janela e o tempo de carregamento.

Properties Inspector

Exibe as propriedades de cada elemento usado no documento. Quando selecionamos um texto, ele mostra as propriedades de formatao do mesmo e assim por diante.

Painis Laterais
Os painis laterais auxiliam no desenvolvimento e criao do site. Os painis mais importantes so: Files, Application, Design, Tag Inspector e Frames. Podemos ocultar/exibir o Painel Lateral clicando na setinha que fica na linha divisria. Podemos ainda oculta/exibir o Painel Lateral e o Properties Inspector com (F4).

Menu Contextual
O menu contextual acionado com o clique do boto direito do mouse, sobre um link, um texto ou rea de trabalho. Os itens so variveis de acordo com o local onde o menu acionado.

Captulo 2 Configurando seu Site

Para que serve? Para que voc possa gerenciar todos os seu documentos HTML gerados pelo Dreamweaver MX 2004. Trabalhamos com vrios documentos HTML, j pensou em mudar um link em um documento que esta ligado a outros dez (10). Com este gerenciamento, assim que voc mudar este link o Dreamweaver pergunta se voc quer atualizar tambm os outros dez documentos que esto apontando para este. Vamos l criar o nosso site local. Um site local, a rea de armazenamento de todos os seus documentos HTML, suas imagens, do seu site. Precisamos dar um nome e informar uma pasta no HD para este armazenamento. Precisamos criar um novo site para cada novo projeto. Vamos l, no painel lateral FILES, clique no cone deste painel, e escolha: Site > New Site... de opes

Nesta primeira janela vamos definir o nome do site que iremos trabalhar, lembramos que este nome e apenas para identificar o projeto. Clique em Next >

Nesta janela vamos deixar a primeira opo marcada, pois em nosso curso no vamos trabalhar com script de servidor, esse outro curso que o Ibratec oferece, que Macromedia Dreamweaver com Banco de Dados. Clique em Next >

Nesta janela vamos informar a pasta local em seu HD onde vamos armazenar todo o nosso site. Use a opo acima como exemplo de pasta. Clique em Next >

Nesta janela vamos deixar como mostra, pois no vamos trabalhar com um servidor, como j foi mencionado em outro curso ser abordado. Clique em Next >

Pronto, acabamos de configurar o nosso site, para finalizar clique em Done.

Captulo 3 Criando um novo documento e formatando texto

No Captulo 1, mencionei que iria falar da primeira tela do novo Dreamweaver MX 2004, pois bem vamos a ela. Logo abaixo podemos observar:

Esto minimizados os painis laterais e o properties inspector, para uma melhor visualizao desta nova janela, que sempre ira aparecer como um menu principal de inicio de decumentos. Open a recent item: Para facilitar ele traz um histrico dos documentos que foram abertos mas recente. Create New: Traz todas as opes de tecnologias para a criao de um novo documento, em nosso curso vamos trabalhar com HTML Create from samples: Criar um documento baseado em um modelo.

Criando um novo documento

Para criar um novo documento HTML em branco, proceda assim: em Create New, escolha HTML. Se por acaso voc j esta com um documento aberto, proceda assim: Menu > File > New...

Ao abrir a janela New Document escolha na Category > Basic Page > HTML, clique no boto Create.

Pronto j estamos com o nosso novo documento, agora vamos modificar as suas propriedades. No menu > Modify > Page Properties... Vamos ver cada uma das categorias da janela Page Properties.

Appearance Page Font: define a fonte padro para todo o documento. Size: define o tamanho padro da fonte para todo o documento. Text Color: define a cor do texto do documento. Background Color: define a cor de fundo da pgina. Para escolher nova cor, clique no quadradinho de cor ao lado ou digite o cdigo da cor. Background Image: define a imagem de fundo da pgina se houver. Clique em Browse para selecionar. Se no houver imagem, deixe o campo em branco. Left Margin: define um valor em plxels para a margem esquerda (valor aceito pelo Internet Explorer). Se no quiser margem, digite 0. Top Margin: define um valor em pixels para a margem do alto (valor aceito pelo Internet Explorer). Se no quiser margem, digite 0. Margin Width: especifica um valor em plxels para a largura da margem (valor aceito pelo Netscape). Se no quiser margem, digite 0. Margin Height: especifica um valor em plxels para a altura da margem (valor aceito pelo Netscape). Se no quiser margem, digite 0.

Links Link Font: define a fonte para todos os links. Size: define o tamanho da fonte para todos os links. Link Color: especifica a cor de todos os links. Rollover Links: especifica a cor quando o mouse passar nos links. Visited Links: define a cor dos links para os endereos que j foram visitados pelo usurio. Active Links: especifica a cor dos links ativos no documento. Essa cor mostrada no exato momento em que o usurio clica em um link. Underline Style: especifica como ser o estilo dos links, com underline, sem underline, underline s quando o mouse passar e etc.

Headings Heading Font: define a fonte para todos os titulo e subttulos. Heading 1 at o 6: estes so elementos de HTML para a formatao de ttulos e subttulos, voc escolhe tamanhos e cores diferentes para cada um dos 6 itens.

Title / Encoding Title: define o ttulo da pgina. O ttulo exibido no alto da janela do navegador, que o mesmo mostrado na barra de ferramentas do Dreamweaver MX. Encoding: define a codificao do documento.

Tracing Image Tracing Image:define a imagem a ser usada como um rascunho de fundo de pgina, ela no aparece no navegador. A sua funo e servir como um guia de um layout para posicionar os elementos do documento exatamente onde mostra a imagem de rascunho. Transparency: define a opacidade da imagem de rascunho, quanto menor o valor mais transparente fica.

Trabalhando com textos

A forma de formatao de texto que o Dreamweaver usa semelhante a um editor de texto comum. Inserindo e formatando um texto

Observe que foi inserido o mesmo texto que digitei acima, como um editor de texto comum, eu selecionei o que queria e no properties inspector, formatei todo o texto. Uma grande novidade desta verso, poder formatar todo o texto usando o painel lateral TAG, como mostra a figura. Aproveitando criei uma lista ordenada e uma no ordenada. O interessante de tudo isso que os cones de formatao de texto como: negrito, itlico, alinhamento esquerda, alinhamento direita, centralizado, justificado, marcadores, numeradores, recuo de pargrafo, so exatamente iguais a um editor de texto bem conhecido, facilitando assim o aprendizado.

Captulo 4 Configurando Hiperlinks

Precisamos interligar nossos documentos, para isso o Dreamweaver oferece varias formas de criar os hipelinks para documentos, imagens, arquivo de multimdia. Temos os seguintes tipos de hiperlinks: Link relativo: quando vinculamos documentos que esto na mesma pasta de trabalho. Link absoluto: quando vinculamos a uma URL externa, informando protocolo, nome de servidor com o caminho e o nome do arquivo. Link de email: quando vinculamos um endereo de correio eletrnico para abrir o gerenciador de email instalado na maquina do usurio. Link interno: esse do tipo ancora, aponta para dentro do mesmo documento.

Link relativo
Como mostra a figura abaixo, foi selecionada a imagem sobre editora e no campo Link, foi informado o nome do documento ao qual ser criado o vnculo.

Link Absoluto
Para nosso link absoluto, vamos imaginar que em nosso documento existe um link para o site do Ibratec. Observe a figura abaixo:

Foi selecionado o texto e no campo link digitado todo o caminho absoluto. Em target, foi informado para abrir uma nova janela do navegador, podemos ainda informar:_self (mesma janela).

Link de email
Aproveitando o mesmo documento, selecionei o texto Fale Conosco, e no painel Insert, dei um clique no cone de um envelope .

Abriu a janela Email Link, agora s escrever o texto e informar um email vlido. Vale lembrar que este tipo de link abre um gerenciador de email instalado na maquina do usurio.

Link Interno
Para criar um link interno, isto , vincular uma palavra ou imagem a outro, no mesmo documento. Para isso devemos criar o ponto de localizao do alvo de nosso vinculo, uma ncora que far a ligao entre nosso menu e o local de destino.

No exemplo abaixo observe onde foi criado o Named Anchor e o link aponta para #link_absoluto, (#) o vinculo juntamente com o nome.

No navegador fica assim:

Captulo 5 Criando image Map

Um mapa de imagem uma imagem dividida em regies ou pontos ativos, quando o usurio clicar no ponto ativo ser exibido um novo documento. Vamos utilizar o poperties inspector para criar e configurar os nossos mapas de imagem. Para isso precisamos inserir uma imagem.

Inserindo uma imagem no documento

No painel insert, categoria common, clique em abaixo: , para abrir a janela

Na figura acima observamos trs reas em destaque, primeiro o Map, onde podemos criar mapas de imagem do tipo: retangular, elptica e poligonal. A segunda o Edit, com novas ferramentas para edio de imagens dentro do Dreamweaver. A primeira opo j existia: "Edit". Ao lado, temos a ferramenta "Optimize in Fireworks" . A seguinte "Crop" (corta a imagem). A prxima "Resample" (com esta ferramenta voc pode diminuir uma imagem). Prosseguindo, teremos "Brightness and Contrast" para brilho e contraste e "Sharpen" para tratar a imagem. A terceira, so as opes de alinhamento de uma imagem, clicando no menu suspenso temos todas as opes de alinhamento. Os botes de alinhamento ( esquerda, direita e No centro) tambm podem ser utilizados para colocar os elementos selecionados. Abaixo vamos ver como configurar os pontos ativos de um mapa de imagem:
Ponto ativo

Nome do mapa de imagem Informe o link

s escolher uma das trs opes de mapa e desenhar por cima da imagem e configurar as propriedades.

Captulo 6 Trabalhando com tabelas

As tabelas so uma ferramenta de desenho de muito avanada para organizar os dados e as imagens em uma pgina HTML. As tabelas proporcionam aos Webdesigners os meios de adicionar uma estrutura horizontal e vertical a uma pgina. Elas consistem de trs componentes bsicos: linhas (espaamento horizontal) colunas (espaamento vertical) clulas (o recipiente criado pela interseo de uma linha e uma coluna) Utilize as tabelas para organizar os dados tabulares, desenhar colunas em um documento ou organizar texto e imagens em seus documentos. Aps a criao da tabela, a aparncia e a estrutura podem ser facilmente modificadas. O contedo pode ser includo; adicione, exclua, divida ou mescle as linhas e colunas; modifique as propriedades da tabela, das linhas ou clulas, para adicionar cor e alinhamento, e para copiar e colar clulas. O modo de criao de uma tabela pode variar de acordo com o tipo de visualizao do documento: Standart View ou Layout View.

Criando uma tabela simples no standart view

No painel insert, categoria common, clique no cone table. Na verso 2004 aparece a seguinte janela para nos auxiliar na criao de uma tabela.

Rows: define o nmero total de linhas da tabela. Columns: define o nmero total de colunas da tabela. Cell Padding: indica o espao entre o contedo da clula e a sua parede. Para no deixar espao, digite o valor 0. Ceill Spacing: indica o espao entre cada clula, excluindo a borda. Para no deixar espao, digite 0. Width: especifica a largura da tabela. O valor pode ser em pixeis ou porcentagem. O valor em pixels fixo, j o valor em porcentagem far com que o tamanho da tabela varie conforme a largura do navegador e resoluo de vdeo do usurio. Border thickness: define a largura da borda. Para a borda ficar invisvel, digite o valor 0. Aperte OK, para confirmar as configuraes da tabela.

Propriedade de uma tabela, pelo properties inspector.

Nesta nova verso, contamos com este recurso a mais como mostra no detalhe, menus contextuais para as clulas e para a tabela. Table Id: especifica um nome para a tabela. Rows: exibe ou define o nmero de linha da tabela. Cols: exibe ou define o nmero de colunas da tabela. W: largura que a tabela possui em pixels ou porcentagem. H: altura da tabela. Se nada estiver preenchido, a altura automtica. CellPad: define o espaamento do contedo da clula em relao s suas paredes. Cellspace: define o espaamento entre as clulas.

Align: define o alinhamento da tabela. A opo Default, geralmente, deixa a tabela alinhada esquerda. As outras opes so: esquerda (Left), direita (Right) ou central (Center). Border: especifica a largura da borda da tabela. Bg Color: especifica a cor de fundo da tabela. Clique no quadrado cinza para escolher a cor. Brdr Color: especifica a cor da borda. Bg Image: especifica uma imagem de fundo para toda a tabela. No campo disponvel, voc digita o caminho da imagem ou seleciona a imagem atravs do cone de pasta ao lado do campo. Clear Columns Widths: limpa a largura das colunas. Corresponde ao campo W. Clear Rows Heights: limpa a altura das linhas. O campo H do properties inspector limpo. Convert Table Widths to pixels: converte a largura da tabela para o valor em pixels. til para fazer a converso de porcentagem para pixels. Convert Table Widths to Percents: converte a largura da tabela para o valor em porcentagem. til para fazer a converso de pixels para porcentagem. Convert Tabie Heights to Plixels: converte a altura da tabela para o valor em pixels. il para fazer a converso de porcentagem para pixels. Convert Table HeIghts to Percents: converte a altura da tabela para o valor em porcentagem. til para fazer a converso de pixels para porcentagem.

Propriedade de uma clula, pelo properties inspector.

Quando clicamos dentro de uma clula, temos as seguintes opes no properties inspector:

Horiz: define o alinhamento horizontal do contedo da clula. As opes so: default (esquerda), left (esquerda), center (centro) e right (direita). Vert: define o alinhamento vertical do contedo da clula. As opes so: default (normalmente, no meio), top (alto), middle (meio) bottom (embaixo), baseline (base). No Wrap: se voc deixar marcada essa opo, no ocorrer quebra automtica de linha dependendo do contedo da clula.

Header: formata a clula com essa opo marcada como um head de tabela. Corresponde tag <thead> ou <th>. til para DHTML. Como padro, ao aplicar esse recurso, o texto digitado ficar no centro e em negrito. Embaixo da palavra "cell", h dois cones: enquanto o primeiro no tem funo e inativo, o segundo permite que voc faa um split (diviso) na clula. Com isso, a clula fica dividida ao meio. Voc pode aplicar um split vrias vezes em cada clula. Quando voc aplica o split, abre-se uma janela perguntando se voc quer dividir a clula em colunas (Columns) ou em linhas (Rows) e quantas divises quer fazer. O cone que esta inativo, s fica ativo quando duas ou mais clulas esto selecionadas, serve para mesclar as clulas em uma nica. Voc pode determinar tambm a altura da clula. Basta inserir o valor no campo H. Isso serve, inclusive, para clulas que sofreram split. Com isso, voc pode criar layouts bem interessantes. Obs.: podemos ainda colocar uma tabela dentro de outra, para chegar ao layout que desejamos.

Captulo 7 Projetando um layout de um documento

O layout de uma documento uma parte importante do projeto de um site. O termo layout de documento ou pgina se refere aparncia que o documento ter no navegador, como a posio de um menu ou as imagens, por exemplo. O Dreamweaver proporciona diversas maneiras de criar e controlar o layout do documento. Um mtodo comum de criar o layout de pgina consiste na utilizao de tabelas HTML, como foi visto no Captulo anterior. No entanto, as tabelas podem ser de difcil utilizao, porque elas no foram originalmente criadas para o layout de pgina, mas sim para exibir dados tabulares. O Dreamweaver conta com a visualizao de layout view. Na visualizao de layout view possvel projetar a pgina utilizando tabelas como estrutura subjacente. possvel desenhar clulas (clulas de tabela) na pgina com facilidade e, em seguida mov-las para onde desejar. O layout pode ter uma largura fixa ou se expandir, at ocupar toda a janela do navegador. Ainda possvel dispor as suas pginas utilizando tabelas segundo a maneira tradicional (conforme vimos no captulo anterior), ou utilizando camadas (LAYERS) e depois convertendo-as em tabelas. No entanto, a visualizao de layout do Dreamweaver a forma mais fcil de definir o layout da pgina ou documento. Para utilizar a visualizao de layout, necessrio sair da visualizao padro do Dreamweaver (Standart view). Mude para a categoria Layout como mostra abaixo:

Segue abaixou uma viso geral de como desenhar um layout de documento.

Frames Layout Table Draw layout cell

Clula

Tabela

Captulo 8 Criando uma library

As library (bibliotecas) contm elementos de documentos como, por exemplo, imagens, textos entre outros elementos a serem usado ou atualizados em seu site. A grande vantagem de trabalhar com uma library em seu site, o seguinte, digamos um menu de seu site tem que acrescentar mais um item, mas como este menu uma library, basta alterar a library, pois os documentos que possuem esta library tambm sero atualizados automaticamente. O Dreamweaver MX armazena os itens da library na pasta library, que esta na raiz do site local.

Criando uma library

Por exemplo vamos definir o menu que aparece logo abaixo com uma library. No menu Modify > Library > Add objects to library... Quando a janela library abrir, digite o nome do novo item.

Quando voc cria uma library, o objeto fica amarelo e protegido.

Pronto, agora s aplicar esta library em todos os seus documentos, para alterar qualquer coisa em sua library menu, clique no boto, Detach from original. Uma janela de aviso aparecera pedindo a confirmao e atualizao de todos os documentos que usam esta library.

Confirme clicando em sim.

Captulo 9 Criando Templates ou Samples

Um template (modelo) um documento que pode ser utilizados como base para outros documentos, para que todos tenham a mesma aparncia. Podemos ainda especificar reas fixas (no editveis) e reas que podem sofrer alteraes. Se seu site tem documentos que contm o mesmo menu, o mesmo cabealho, e o mesmo rodap, enfim, a mesma estrutura, mas rpido criar um template. O documento que vemos no exemplo abaixo tem a mesma estrutura, variando o contedo das informaes do lado direito. No painel insert, categoria common, temos o cone make template, clique nele com o documento que voc deseja criar como template. A janela save as template ser aberta.

Definindo as reas editveis

No painel insert, categoria common, clique na setinha preta que esta ao laodo do cone Make template e escolha Editable Region.

Defina um nome para sua rea editvel, e ok. Bom meu documento ficou assim:

Neste caso foi selecionada a tabela interia como rea editvel.

Criando uma novo documento a partir de uma template

No menu > File > New..., quando a janela New Document abrir, selecione a guia Template e escolha o template que acabamos de criar, como mostra abaixo:

Observe que apenas a rea que voc criou esta disponvel para ser editada, isso ai!

Alterando um template
No painel lateral > Files, abra o template que voc criou, ele esta na pasta template. Faa as mudanas que deseja, salve e pronto!

Captulo 10 Efeitos de boto

muito legal poder fazer estes efeitos sem ter que programar uma linha sequer de javascript. Vamos criar um boto rollover, uma barra de navegao e de quebra botes de flash sem ter que ir fazer isso l no flash, ou mesmo saber usar o flash.

Boto rollover
Posicione o cursor no local onde voc deseja inserir o boto rollover, vale lembrar que estamos trabalhando com imagens, que pelo menos tem que ser feito antes. No painel insert, categoria common, clique na setinha preta ao lado do cone images, escolha rollover image. Configure como mostra:

Observe que estamos trabalhando com duas imagens iguais, alterando apenas a cor da seta para a rollover image. Ok!

Barra de navegao (navigation bar)

Esse um pouquinho mais complexo pois precisarem de quatro imagens para cada boto da barra de navegao. No painel insert, categoria common, clique na setinha preta ao lado do cone de Images e escolha Navigation bar. Configure como mostra:

Adiciona/ Retira um boto

Sobe ou desce um boto

Nome do boto normal Mouse por cima Clicado Clicado como mouse por cima

Define um boto clicado

Boto de Flash
No painel insert, categoria common, clique na setinha preta ao lodo do cone Media e escolha Flash Button. Configure como segue:

O arquivo *.swf, ser salvo na raiz do seu site local, e isso!

Captulo 11- usando frames

Os frames (molduras) so compostas de dois elementos principais um conjunto de frames e os frames individuais. Um conjunto de frames um documento HTML que define a estrutura de um conjunto de frames em um documento. A definio do conjunto de frames abrange informaes sobre o nmero de frames exibidos em uma pgina, o tamanho dos frames, a origem da pgina carregada em um frame e outras propriedades que podem ser definidas. Uma pgina HTML com um conjunto de frames no exibida em um navegador, ela apenas armazena as informaes sobre a maneira como os frames em uma pgina sero exibidas. Geralmente, os frames definem uma rea de navegao e uma rea de contedo em uma pgina da Web. Quando um documento do Dreamweaver dividido em frames, so criados documentos HTML separados para o conjunto de frames e para cada novo frame. O conjunto de frames chamado de frame-pai e um frame chamada de frame-filho. O que o usurio percebe como uma nica pgina da Web com dois frames constitui, na verdade, trs arquivos distintos: o arquivo do conjunto de frames e dois arquivos com o contedo que aparece dentro dos frames. A alterao das propriedades dos frames e dos conjuntos de frames permite redimensionar os frames e utilizar os vnculos e os destinos para controlar o contedo de um frame.

Criando os frames (molduras)

Os frames podem ser criadas modificando em um documento existente do Dreamweaver, dividindo-o em reas de documento adicionais. H vrias maneiras de criar um conjunto de frames: voc pode desenh-lo ou selecionar entre vrios conjuntos de frames predefinidos.

Como criar um conjunto de molduras

Antes de criar um conjunto de frames ou trabalhar com frames, torne visveis as bordas do frame na janela do documento. Para exibir as bordas do frame em um documento, escolha View > Visual Aids > Frame Borders. Quando as bordas da moldura forem exibidas, ser adicionado espao em volta da borda do documento, fornecendo-lhe um indicador visual das reas do frame no documento.

No painel Layout, clique na setinha preta ao lado do cone Frames e escolha a opo como mostra abaixo:

Observe abaixo anteriormente.

diviso

dos

frames,

como

foi

explicador

Frame 2

Frame 1 Frame pai

Frame 3

Quando salvarmos as pginas, deveremos escolher a opo File > Save All. Isso far com que sejam salvas os trs frames filhos e tambm o frame pai. Nota: se sua pgina for a inicial do seu site, dever ser salva com o nome index.htm, para que abra-se automaticamente ao ser digitado o endereo do site.

Propriedades dos Frames

Borders: especifica se o frame exibir ou no as bordas. Default: exibe bordas. Yes: exibe bordas. No: no exibe bordas. Border Width: especifica a largura da borda. Se no quiser borda, alm de especificar No Item acima, digite o nmero 0. Border Colro: especifica a cor da borda. Basta digitar o cdigo da cor ou efetuar a seleo da tonalidade no painel de cores. Columns ou Rows: conforme o tipo de frame criado, exibido o tamanho da coluna ou linha. Esse tamanho (largura ou altura) do frame um valor expresso em plxels, porcentagem ou valor relativo. Uma outra maneira de especificar o tamanho do frame arrastar a sua borda com o mouse. No lado esquerdo do Inspetor de Propriedades, temos a definio do frame em nmero de linhas e colunas. No lado direito do Inspector, o layout do frame reproduzido.

Captulo 12 Formulrios
Os formulrios permitem coletar informaes dos usurios. Entre os usos mais comuns dos formulrios, destacam-se as pesquisas, formulrios de pedidos e interfaces de busca. Utilize o Dreamweaver para criar formulrios, adicionar objetos a eles e (atravs da utilizao de comportamentos) para validar as informaes digitadas pelo usurio. Os formulrios do Dreamweaver podem incluir objetos padro, como campos de texto, botes, campos de imagens, caixas de seleo, botes de opo, menus de lista, campos de arquivos e campos ocultos. No painel insert, categoria Forms, para poder aplicar os objetos de formulrios, selecionando o comando Forms na caixa superior. Observe o exemplo abaixo: O primeiro boto do painel forms o que insere o prprio form (recipiente para os elementos que formaro o formulrio). preciso clicar nele para proceder com o preenchimento.

Criando um formulario
Posicione o cursor onde ser inserido o form, primeiro elemento do apainel insert, categoria forms. Ao ser inserido o Dreamweaver marca a rea com uma linha tracejada vermelha. Dentro da linha vermelha nosso form, insira uma tabela para melhor organizar os elementos de formulrio, que vamos inserir.

O nosso formulrio deve ficar assim:

Cada item de nosso formulrio acima, tem que ser configurado, de acordo com suas propriedades no properties inspector. Abaixo segue relao de todos os elementos de formulrio.

Insert Form (Inserir Formulrio) Insert Text Field (Campo texto) Insert Hidden Fields (Arquivos Ocultos) Insert Textarea (Texto de multiplas linhas) Insert Checkbox (Caixa de verificao) Insert Radio Button (Boto de opo) Insert Radio Group (Grupo de boto de opo) Insert List/Menu (Menu de lista) Insert Jump Menu (Menu de links/escolha) Insert Image Field (Campo de Imagem) Insert File Field (Campo de Arquivo) Insert Button (Botes) Insert Label (Etiqueta) Insert Fielset

Form: insere o formulrio propriamente dito, um recipiente dos campos de formulrios que segue logo abaixo. Text Field: alfabtico ou numrico. O texto digitado pode ser exibido como uma linha simples, linhas mltiplas, marcadores ou asteriscos (com a finalidade de proteger as senhas). Hidden Fields: permitem armazenar informaes (como o destinatrio dos dados do formulrio ou o assunto do formulrio) que no forem relevantes ao usurio, mas que sero utilizadas pelo aplicativo que processa o formulrio. TextArea: campo de texto com mltiplas linhas. Checkbox: permitem mltiplas respostas em um nico grupo de opes. Radio Button: representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros. Radio Group: insere um grupo de boto de opo. List/Menu: apresentam um conjunto de valores que os usurios podero escolher. O objeto poder apresentar um menu pop-up, que aparecer apenas quando o usurio clicar no nome do objeto (e aceitar apenas uma opo), ou uma caixa de listagem, que sempre exibir os valores em uma lista de rolagem (e aceitar mais de uma opo). Jump Menu: permite inserir um menu no qual cada opo se vincula a um documento ou arquivo. Image Field: podem ser utilizados no lugar dos botes Enviar. File Field: permitem que o usurio procure os arquivos nos discos rgidos, carregando-os como dados do formulrio. Button: realizam tarefas quando forem clicados, como o envio e redefinio dos formulrios. possvel digitar um identificador personalizado para um boto ou utilizar um dos identificadores predefinidos. Label: insere textos entre as tags <label> e </label> Fieldset: o texto inserido diretamente no cdigo-fonte, semelhante ao label.

Captulo 13 Trabalhando com CSS Style

Um estilo um grupo de atributos de formatao que controla a aparncia de uma faixa de texto de um nico documento. A folha de estilos CSS pode ser utilizada para controlar vrios documentos simultaneamente e inclui todos os estilos de um documento. A vantagem de utilizar as folhas de estilos CSS em relao aos estilos HTML que, alm de estarem vinculadas a vrios documentos, quando um estilo CSS for atualizado ou alterado, a formatao de todos os documentos que utilizam essa folha de estilos especfica ser tambm automaticamente atualizada. Os estilos CSS so identificados pelo nome ou pelo rtulo HTML, o que permite alterar o atributo de um estilo e exibir as modificaes no texto inteiro ao qual esse estilo foi aplicado. Os estilos CSS nos documentos HTML podem controlar a maioria dos atributos tradicionais de formatao de texto, como fonte, tamanho e alinhamento. Eles podem especificar tambm atributos exclusivos de HTML, como posicionamento, efeitos especiais e imagens cambiveis pelo mouse. Nunca houve tanta interao com as folhas de estilo como existe nesta verso do Dreamweaver. Ao abrir as propriedades de pgina, j encontram opes que criam os CSS padres do site com fonte, tamanho, cor, tipo, margem de pgina etc... Na edio do site, as modificaes feitas por voc vo sendo transformadas em novos estilos... por exemplo: Se voc coloca uma cor e negrito numa parte do texto, um novo CSS criado na hora, sempre seguindo a seguinte nomenclatura: style1, style2 ... No painel de propriedades, sempre que voc selecionar um objeto, a caixa "Style" vai aparecer e nela, voc ter todos os estilos criados...

Criando um novo CSS Style

Se o painel lateral no estiver aparecendo o painel Design, habilite ele para que possamos criar nossos CSS. Menu > Window > Design.

Vamos clicar no segundo cone que aparece na parte inferior direito do . Vamos analisa a janela New CSS painel Design, New CSS Style Style.

Name: especifica o nome para o estilo. Observe que o estilo criado ter o nome unnamed. Voc Pode inserir qualquer nome, desde que mantenha o ponto. Exemplo: .titulo1. Selector Type: especifica o tipo de estilo a ser criado: Class (can apply to any tag) cria uma class, que pode ser aplicado a qualquer tag. Tag (redefines the look of a specific tag): cria um novo visual para as tags do HTML.

Advanced (Ids, contextual selectors, etc): para a criao de style de link, os seletores link, hover, visited, etc. Define In: especifica se o estilo ser vinculado ou no. Se escolher o item New Style Sheet File, o estilo ser vinculado, criando um arquivo externo para armazenar o CSS (*.CSS). Se escolher This Document Only, no ser vinculado, gerando to o cdigo CSS junto do HTML. Vamos escolher: Class (can apply to any tag) e em Define In: This Document Only, de uma nome de titulo1 e ok!. Vamos formatar no .titulo1 como segue abaixo:

Aps a sua confirmao, observe que no painel lateral design, j contamos com o nosso primeiro CSS Style criado. Como foi mencionando no properties inspector, tambm consta o nosso CSS Style, de uma forma mais visual facilitando assim a escolha dos estilos.

Alterando um CSS Style criado

No painel lateral Design, o terceiro cone nos possibilita isto o Edit Selecione o estilo que deseja altera e pronto cline no Edit Style... Style.

Anexando um arquivo de CSS Style externo ao nosso documento

No painel lateral Design, o primeiro cone nos possibilita isto o Attach Style Sheet
Com esse procedimento, estamos anexando um arquivo ao documento que esta aberto. Vamos repetir este mesmo procedimento para todos os nossos documento do nosso site.

Aplicando um CSS Style em texto

Selecione o texto que voc deseja aplicar o estilo, igual a um editor de texto, aps a seleo escolha o CSS Style que deseja para este texto. Ao clicar no CSS Style .titulo1, por exemplo ser aplicada a formatao que criamos para esse estilo no texto selecionado.

Captulo 14 Usando Behaviors

Um behavior ou comportamento, uma combinao entre um evento e uma ao. Por exemplo: quando o usurio mover o mouse sobre uma imagem (um evento), esta poder ser realada (uma ao). Uma ao consiste de cdigo previamente escrito em JavaScript, que realiza determinadas tarefas, como a abertura da janela de um navegador. Os eventos so definidos pelos navegadores para cada elemento da pgina; por exemplo: onMouseOver, onMouseOut e onClick so eventos associados a vnculos na maior parte dos navegadores, enquanto que onLoad um evento associado a imagens e ao corpo do documento. Os eventos que podem ser utilizados para disparar uma determinada ao variam de acordo com o navegador utilizado. Ao aplicar um comportamento a um elemento do seu documento, voc estar especificando uma ao e o evento que a disparar. Vamos ao painel lateral Tag, escolha a guia Behaviors, como mostra abaixo: Os rtulos selecionados aparecero no alto do painel. Aes (+) exibe uma lista de aes que podem ocorrer. A escolha de uma ao acarretar o aparecimento da caixa de dilogo Parmetros. Excluir (-) remove uma determinada ao e o evento a ela associada da lista do inspetor de comportamentos. SHOW EVENTS FOR especifica os navegadores nos quais o comportamento dever funcionar. A seleo feita neste menu determinar os eventos que aparecero no menu pop-up Events. Clique no (+) e faa agora esta especificao. Botes de setas acima e abaixo movem a ao selecionada para cima ou para baixo na lista de comportamentos. As aes sero executadas na ordem especificada.

Events exibe todos os eventos que podem disparar a ao. Os eventos que aparecero dependero do objeto selecionado. Se os eventos esperados no aparecerem, certifique-se de que o objeto correto esteja selecionado. Os diversos navegadores reconhecem de maneira diversa os eventos relacionados aos vrios objetos. Escolha os navegadores nos quais o comportamento dever funcionar, no menu pop-up EVENTS For: Apenas os eventos reconhecidos pelos navegadores selecionados aparecero no menu pop-up EVENTS. Vou destacar alguns behavior interessantes: Call Javascript: chama uma funo ou cdigo que deseja executar. Change Property: esse bem legal, ele muda as propriedades de alguns objetos, por exemplo cor de segundo plano de um Layer. Check Browser: verifica o tipo do navegado do usurio. Check Plugin: muito til para verificar por exemplo se o usurio tem o plugin do flash, se no direcione ele para o site da macromedia e fazer o download do mesmo. Drag Layer: dependendo do efeito que deseja, este bem interessante, pois possibilita o usurio arrastar e soltar uma layer (camada). Go to URL: podemos criar um redirecionamento associado ao evento onload, para pginas que mudaram de endereo. Open Browser Window: quem nunca sonhou em criar aquelas adorveis janelas pop-up, quando entramos em um site, abre em mdia umas 200 (risos). Tambm serve para ao clicar em um link abrir uma nova janela do navegador. Set Text: se deseja colocar um texto na barra de status do navegador ou em um frame. Show Pop-Up Menu: muito bom este behavior, para habilitar, ele tem que ser associado a uma imagem. Validate Form: esse behavior garante que os campos de formulrio sejam realmente preenchidos, fazendo assim uma critica antes que os dados sejam enviados, avisando quais campos precisam ainda ser preenchido. Eu no esqueci do behavior Timeline, que nesta verso 2004 ele foi retirado, s mandando um Email-assinado para a macromedia para reclamar. O behavior Show Hide Layers, ser abordado no prximo Captulo.

Captulo 15 Usando Draw Layer

Os layer ou camadas, proporcionam aos Webdesigners um controle preciso, em nvel de pixels, sobre o posicionamento exato dos elementos. A colocao dos elementos da pgina em camadas permite determinar quais objetos aparecem na frente de outros, e quais esto fora de lugar ou ocultos. Ultimamente tenho visto uns efeitos bem legais em alguns sites.

Como criar um Layers

Crie as layers utilizando o Draw Layer , que estas localizado no Painel Insert, categoria Layout, para fazer a insero, s arrastar e soltar como desenhar. Uma vez criada a layer, utilize o painel lateral Design, guia Layers para selecionar, aninh-la dentro de outra layer ou alterar a sua ordem de empilhamento e modificar o nome da mesma. As propriedades padro das layers (Layer ID, visibilidade (Vis), altura (H), largura (W), etc.) so especificadas no properties inspector

Para selecionar uma camada, siga um dos procedimentos abaixo:

Clique no marcador da camada, na janela do documento, que representa o local da layer no cdigo HTML. Se o marcador da layer no estiver visvel, escolha Exibir > Elementos invisveis (View > Visual Aids > Invisibles Elements). Clique na ala de seleo da layer. Se a ala no estiver visvel, clique em qualquer ponto dentro da layer para torn-la visvel.

Clique em uma borda da layer. Se nenhuma layer estiver ativa ou selecionada, mantenha pressionada a tecla Shift enquanto clica dentro de uma layer. Se houver mltiplas layer selecionadas, clique dentro de uma delas enquanto mantm pressionadas as teclas Control e Shift (no Windows). Esse procedimento cancelar a seleo de todas as outras layers. Clique no nome da layer, no painel lateral Design, guia Layers.

Camada inserida (sem seleo)

Camada clicada pode-se escrever ou inserir figuras, etc.

Camada Selecionada, verificar paleta de propriedades

A partir da seleo da layer, poderemos arrast-la ou dimensionla, exatamente como se faz com um objeto qualquer. Todo o contedo da layer ir acompanhar os movimentos ou a sua nova localizao.

Convertendo uma tabela em layer

Acione o menu > Modify > Convert > Tables to Layers.

Convertendo um layer em tabela

Acione o menu > Modify > Convert > Layers to Tables.

O Behavior Show Hide Layer

Ele responsvel pela ao de visibilidade do(s) layer(s) que contm em seu documento. Ao aplicar esta ao, a janela Show Hide Layer aberta, selecione o layer que deseja e clique nos botes: Show (visvel), Hide (oculto) ou Default. Essa ao muito interessante ao se aplicar em botes ou imagens com links, associados aos eventos do tipo: onClick, onMouseOver, etc. Assim, no momento exato que se quer, o layer pode ser exibido ou escondido.

Captulo 16 Publicando o Site

Ao concluir o seu site, precisamos enviar os documento e pastas, ou seja, o site local para o servidor da Web. Quando os arquivos so transferidos de um site local para um servidor, o Dreamweaver MX mantm uma estrutura de pastas exata em ambos os sites. Se uma pasta no existir no servidor, o Dreamweaver criar uma pasta. Esse recurso garante que os links relativos criados no site local continuaro a funcionar no servidor, porque os sites so idnticos.

Publicando um site local via FTP

Como mostra a figura ao lado, vamos clicar no menu suspenso do painel lateral Files e escolher > Remote View. Aparece uma mensagem pedindo para que voc defina o site remoto, clique nesta opo e veja a figura abaixo, pois ela retrata as configuraes que voc tem que fazer. Vale a pena lembrar que o endereo de FTP, login e senha, o provedor do servidor devera lhe informar.
Connects/ Disconnects remote host

Dados fornecidos pelo servidor

Marque esta opo para fazer upload automtico de seu documento, assim que forem salvos, se voc tem banda larga.