Escolar Documentos
Profissional Documentos
Cultura Documentos
Dreamweaver Reference
Dreamweaver Reference
Ajuda e tutoriais
Junho de 2013
Primeira sincronizao
Para o incio
Quando voc inicia o Dreamweaver na mquina em que ele foi instalado primeiro, a seguinte caixa de dilogo exibida:
Sincronizar nuvem Inclui as configuraes na nuvem. As preferncias do aplicativo na segunda mquina so substitudas pelas configuraes
na nuvem. As configuraes do site na nuvem so adicionadas s configuraes na segunda mquina.
Sincronizar local As alteraes feitas nas preferncias e nas configuraes do site na segunda mquina so mantidas e tambm so enviadas
para a nuvem.
Sempre sincronizar configuraes automaticamente Sincroniza as configuraes automaticamente. Para obter mais informaes, consulte
Sincronizao automtica.
Avanado Abre as opes Sincronizar configuraes na caixa de dilogo Preferncias.
Os seguintes cenrios ajudam voc a entender a diferena entre as opes Sincronizar nuvem e Sincronizar local:
Cenrio 1
Voc altera as Preferncias na primeira mquina e sincroniza essas alteraes com a nuvem. Tambm na segunda mquina, voc altera as
Preferncias. Em seguida, quando voc clica em:
Sincronizar nuvem As alteraes em Preferncias na primeira mquina so sincronizadas com a segunda mquina. As alteraes realizadas na
segunda mquina so descartadas.
Sincronizar local As alteraes nas Preferncias na segunda mquina so mantidas e tambm sincronizadas na nuvem. Quando voc
sincronizar novamente a primeira mquina e escolher Sincronizar nuvem, essas alteraes sero refletidas na primeira mquina.
Cenrio 2
Sincronizar nuvem As alteraes nas configuraes do site na primeira mquina so adicionadas s configuraes na segunda mquina.
Sincronizar local As alteraes na segunda mquina so mantidas e sincronizadas com a nuvem. Quando voc sincronizar novamente a
primeira mquina e escolher Sincronizar nuvem, o novo site ser adicionado s configuraes na primeira mquina.
Sincronizao automtica
Para o incio
Sincronizao manual
Para o incio
na barra
(Em Mac) Dreamweaver > Sincronizar configuraes agora e no Windows, Editar > Sincronizar configuraes agora.
Para o incio
Quando h uma diferena entre as configuraes nas mquinas e na nuvem, o conflito resolvido com base nas configuraes de Soluo de
conflito na caixa de dilogo Preferncias.
Se a Soluo de conflitos estiver definida como Minha preferncia, a caixa de dilogo a seguir exibida quando o conflito surge:
Se voc selecionar Lembrar minhas preferncias, a opo escolhida (Sincronizar local ou Sincronizar nuvem) ser selecionada na caixa de
dilogo Preferncias.
To the top
To avoid losing your personal settings and preferences in Dreamweaver CS6, ensure that you follow the instructions listed below.
To the top
This 12.1 upgrade includes fixes from the earlier Dreamweaver 12.0.1 patch release.
1. Open Dreamweaver.
2. Select Help > Updates.
3. In the Adobe Application Manager, select the Dreamweaver update.
4. Click Update.
To the top
(Mac OS 10.6.x only, FileVault enabled) Point site local root folder outside Users folder
Live search does not work if FileVault is enabled for site local root folder.
The local root folder is inside the user folder (/Users/<user>/). Point the site local root folder outside the Users folder.
Known limitations
To the top
To the top
If your video plays well on your local computer but doesnt play on a live web server, its probably because the remote web server isnt configured
properly for your video format.
For HTML5 video support on your websites, ensure that you correctly configure MIME (Multi-purpose Internet Mail Extensions) types on your
webserver .
For choosing the correct MIME type, check the format of your videos (MP4, OGV, WEBM). Adobe recommends that you have all the formats or at
least MP4 and WEBM for maximum browser compatibility. You set MIME types for each format separately.
For video encoding, you can try HTML5 Video Player. The player can convert your videos into different HTML5 video formats in a batch mode.
If you plan to host your websites on different web server types such as Windows server with IIS, or Linux server with Apache, configure HTML5
MIME types in accordance with the server type.
If you use a web server other than Apache or IIS, consult your servers documentation on how to set the HTML5 video MIME type for specific file
types.
Twitter and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy
Para o incio
Voc pode inserir vdeo HTML5 e udio HTML5 em pginas da Web que usam Dreamweaver. Os elementos de vdeo e udio em HTML5
especificam um modo padro de incorporar e exibir o vdeo e o udio em uma pgina da Web.
Para obter mais detalhes sobre a insero de vdeo de HTML5, consulte Inserir vdeo HTML5.
Para obter mais detalhes sobre a insero de udio HTML5, consulte Inserir udio HTML5.
Para o incio
Selecione Layout no painel Inserir (Janela> Inserir) para obter uma lista de elementos semnticos que voc pode inserir em seu layout da pgina
HTML5. Para editar as propriedades de elementos semnticos inseridos, selecione um elemento e edite suas propriedades no painel
Propriedades.
possvel tambm usar o menu Inserir (Inserir > Layout) para inserir tags semnticas.
As sete novas tags semnticas deste lanamento: Artigo, parte, HGroup, Navegao, Seo, Cabealho e Rodap.
Para um tutorial sobre a utilizao de tags semnticas no layout da pgina, consulte o artigo no blog de Jennifer Marsman intitulado Markup
semntico e layout de pgina.
O tutorial Semntica HTML5 na Dreamweaver CS5.5 fornece uma perspectiva da utilizao dos elementos semnticos HTML5 na Dreamweaver
CS 5.5.
Para o incio
Voc pode importar as composies do Adobe Edge (arquivos OAM) no Dreamweaver. A composio est localizada no local do cursor.
O Dreamweaver insere os contedos extrados do arquivo OAM em uma pasta com o nome edgeanimate_assets por padro. Voc pode alterar o
local padro na caixa de dilogo Configurao do site.
Para obter mais informaes, consulteImportar composies do Edge Animate.
Para o incio
O elemento Tela de desenho HTML5 um continer para grficos gerados dinamicamente. Estes grficos so criados no tempo de execuo
usando uma linguagem de script como JavaScript. Para obter mais informaes, consulte o artigo Tela de desenho HTML5.
O elemento Tela de desenho tem os atributos de ID, altura e espessura.
Para localizar o elemento Tela de desenho, selecione Inserir > Tela de desenho. Como alternativa, abra o painel Inserir (Janela> Inserir) e
selecione Comum no menu.
Para editar as propriedades do elemento Tela de desenho, selecione o elemento e edite suas propriedades no painel Propriedades.
Para o incio
Como parte do suporte ao HTML5, os novos atributos foram adicionados ao painel Propriedades para elementos de formulrio. Alm disso, quatro
novos elementos de formulrio(e-mail, pesquisa, telefone, URL) foram adicionados seo Formulrios do painel Inserir.
Para obter mais informaes, consulteSuporte avanado ao HTML5 para objetos de formulrio.
Para o incio
Use a Pesquisa dinmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado no
painel Arquivos usado para a pesquisa.
A Pesquisa dinmica usa o API do Spotlight em Mac OS. Qualquer personalizao que voc aplicar s preferncias do Spotlight tambm usada
para a Pesquisa dinmica. O Spotlight exibe todos os arquivos no seu computador que correspondem sua consulta de pesquisa. A Pesquisa
dinmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos.
Para obter mais informaes, consultePesquisar arquivos com base no nome ou contedo do arquivo
Melhorias no FTP
Para o incio
Fazer upload de arquivos no servidor automaticamente ao salvar Esta opo permite fazer upload de arquivos no servidor mesmo se um
processo de upload ou de download estiver em andamento durante a operao de salvamento. Alguns problemas com este recurso na verso
anterior foram corrigidos para torn-lo perfeito.
Continue trabalhando com o Dreamweaver ao baixar o site do Business Catalyst A seleo de Arquivos de upload automtico no servidor
ao salvar no interrompe o seu trabalho com Dreamweaver ao baixar o site do Business Catalyst.
Melhorias na caixa de dilogo de senha da ID da Adobe A ID da Adobe que voc selecionou durante a instalao exibida nesta caixa de
dilogo. As opes para salvar sua senha e recuperar senhas esquecidas esto disponveis.
Para o incio
A lista de fontes no menu Fonte foi classificada com base nas fontes do sistema e da Web. As fontes do sistema so listadas primeiro no menu.
A caixa de dilogo Gerenciador de fontes da Web (Modificar > Fontes da Web) foi renomeada para Pacote de fontes da Web. Voc pode
usar a Pacote de fontes da Web para adicionar fontes de Web lista de fontes.
O boto Adicionar fontes foi renomeado para Adicionar fonte local.
Os cones separados ajudam a identificar facilmente as fontes do sistema considerando as fontes da Web.
Para o incio
As opes no painel Inserir e no menu Inserir foram reorganizados. Para obter mais informaes, consulte Alteraes nas opes Inserir |
Creative Cloud.
Para o incio
Agora possvel usar fontes do Adobe Edge nas pginas da Web. Quando uma fonte do Edge utilizada em uma pgina, a tag adicional de
script adicionada para fazer referncia a um arquivo JavaScript. Esse arquivo baixa a fonte do servidor da Creative Cloud diretamente no cache
do navegador.
Para exibir a pgina, as fontes so baixadas do servidor da Creative Cloud mesmo se a fonte estiver disponvel no computador do usurio.
Por exemplo, (na verso 12.2) uma tag de script que usa somente a fonte Abel tem o formato:
<!--A seguinte tag de script baixa uma fonte do servidor Adobe Edge Web Fonts para uso na pgina da Web.
Recomendamos no modificar isso. -->
<script src="http://webfonts.creativecloud.com/abel:n4:default.js" type="text/javascript"></script>
Abel o nome interno que o servidor usa para identificar a fonte. n4 indica que a variao da fonte que est sendo baixada tem estilo normal
e peso 400.
Na Dreamweaver CC, o script que ser adicionado o seguinte:
<!--A seguinte tag de script baixa uma fonte do servidor Adobe Edge Web Fonts para uso na pgina da Web.
Recomendamos no modificar isso. -->
<script>var adobewebfontsappname ="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
1. Selecione Modificar > Gerenciar fontes.
2. A guia Fontes do Adobe Edge exibe todas as fontes do Adobe Edge que podem ser adicionadas lista de fontes.
3. Para localizar e adicionar fontes dessa lista lista de fontes, faa o seguinte:
Clique na fonte que voc deseja adicionar lista de fontes.
Para desmarcar uma fonte, clique na fonte novamente.
Utilize filtros para criar uma pequena lista das fontes preferidas. Por exemplo, para criar uma pequena lista de fontes Serif, clique em
.
Voc pode usar vrios filtros. Por exemplo, para criar uma pequena lista de filtros do tipo Serif que pode ser usado para pargrafos,
e em .
clique em
Para pesquisar uma fonte pelo nome, digite seu nome na caixa de pesquisa.
4. Clique em
5. Clique em Concludo.
6. Abra a lista de fontes de qualquer local. Por exemplo, voc poderia usar a lista de fontes na seo CSS do painel Propriedades.
Na lista de fontes, as pilhas de fontes do Dreamweaver so listadas antes das fontes da Web. Navegue para baixo na lista para localizar as
fontes selecionadas.
Para o incio
Voc pode adicionar fontes da Web de seu computador lista de fontes no Dreamweaver. As fontes adicionadas so refletidas nos menus de
fonte no Dreamweaver. Fontes de tipo EOT, WOFF, TTF e SVG so suportadas.
1. Selecione Modificar > Gerenciar fontes.
Para o incio
Uma pilha de fontes uma lista de fontes em uma declarao font-family da CSS. Usando a guia Pilhas de fontes personalizadas da caixa de
dilogo Gerenciar fontes, voc poder:
Adicionar as novas pilhas de fontes usando o boto +.
Editar pilhas de fontes existentes, selecionando-as na lista de fontes. Usar os botes >> e << para atualizar a lista de Fontes escolhidas.
Excluir as pilhas de fontes existentes usando o boto -.
Reordenar as pilhas usando os botes de seta.
Para o incio
No possvel visualizar fontes da Web e do Edge na visualizao de design. Alterne para a visualizao dinmica ou visualize a pgina em um
navegador para visualiz-las.
Para o incio
Quando voc atualizar a fonte em um arquivo CSS que est vinculado a vrios arquivos HTML, dever atualizar a tag de script nos arquivos
HTML relacionados. Quando voc clica em Atualizar, as tags de script em todos os arquivos HTML afetados so atualizadas.
Para o incio
Selecione Comandos > Limpar tag de script de fontes da Web (pgina atual) para atualizar as fontes na pgina da Web que no esto refletidas
na tag de script.
Para o incio
As opes no painel Inserir e no menu Inserir foram reorganizadas para ajud-lo a encontrar e inserir essas opes. Novos elementos HTML5
foram inseridos nos menus Inserir.
As modificaes nas opes Inserir foram feitas pelos seguintes motivos:
Sincronize a ordem das opes no painel Inserir com o menu Inserir para aumentar a velocidade das descobertas.
Como parte do suporte avanado a HTML5 no Dreamweaver, novos elementos HTML5 foram adicionados s opes Inserir.
As opes Inserir que exigem vrios cliques esto obsoletas. Essas opes podem ser configuradas de maneira rpida e fcil usando o
Inspetor de propriedade ou a Visualizao de cdigo.
Opes obsoletas
Para o incio
As opes Inserir que exigem vrios cliques esto obsoletas. Essas opes ser configuradas usando o Inspetor de propriedades ou na
visualizao Cdigo.
Como consequncia, as seguintes caixas de dilogo esto obsoletas: Editor de tags, Seletor de tags, Tag de Formulrio e Atributos de acesso a
tag input. Ento, as opes correspondentes no esto disponveis no menu de clique com o boto direito.
As seguintes opes em Dados no painel Inserir esto obsoletas: Conjunto de dados, Repetir, Regio e Lista de repetio.
As seguintes opes na categoria Tags de cabealho em HTML esto obsoletas: Atualizar, Base, Link.
A opo para definir cones de cores no painel Inserir esto obsoletos. Agora, os cones de elemento esto disponveis somente em preto e
branco.
Para o incio
O painel Inserir e o menu Inserir foram reorganizados para serem sincronizados um com outro. A ordem das opes no painel Inserir corresponde
com o menu Inserir.
Alm disso, algumas opes novas foram disponibilizadas e algumas opes anteriores foram removidas.
Opes Inserir no Dreamweaver 12 (CS6)
Opo
CS6, CS5.5
Creative Cloud
Div
Vdeo HTML5
No disponvel
Opes
Tela de desenho
No disponvel
Caractere
Cabealho
Meta, palavras-chave,
descrio, porta de exibio
Rgua horizontal
No disponvel
Dados
Tag
No disponvel
Imagem
Imagem, Imagem de
sobreposio, HTML do
Fireworks
Composio do Edge Animate,
Flash SWF, vdeo em Flash,
vdeo HTML5, udio HTML5,
Plug-in
Mdia
Consultas de mdia
Tabela
Objetos da tabela
No disponvel
Layout
Formulrio
Hiperlink
Link de e-mail
Data
O servidor inclui
No disponvel
Comentrio
No disponvel
HTML
No disponvel
Modelo
Snippets recentes
Widget
jQuery Mobile
No contexto
Spry
Objetos de dados
Favoritos
Para o incio
Origem / Origem de Alt 1 / Origem de Alt 2: em Origem, insira o local do arquivo de udio. Como alternativa, clique no cone da pasta
para selecionar um arquivo de udio em seu computador. O suporte para formatos de udio varia em navegadores diferentes. Se o
formato de udio na Origem no for suportado, o formato especificado em Origem de Alt 1 ou Origem de Alt 2 ser usado. O navegador
seleciona o primeiro formato reconhecido para exibir o udio.
Para adicionar vdeos rapidamente aos trs campos, use a seleo mltipla. Quando voc escolhe trs formatos de vdeo para o mesmo
vdeo de uma pasta, o primeiro formato na lista usado para Origem. Os seguintes formatos na lista so usados para preencher Origem
de Alt 1 e Origem de Alt 2 automaticamente.
Navegador
MP3
Wav
Ogg
Internet Explorer 9
SIM
NO
NO
Firefox 4.0
NO
SIM
SIM
Google Chrome 6
SIM
SIM
SIM
Apple Safari 5
SIM
SIM
NO
Opera 10.6
NO
SIM
SIM
Para o incio
Para o incio
Origem / Origem de Alt 1 / Origem de Alt 2: na Origem, insira o local do arquivo de vdeo. Como alternativa, voc pode clicar no cone
da pasta para selecionar um arquivo de vdeo no sistema de arquivos local. O suporte de formato do vdeo varia em navegadores
diferentes. Se o formato do vdeo na Origem no for suportado em um navegador, o formato do vdeo especificado em Origem de Alt 1
ou Origem de Alt 2 ser usado. O navegador seleciona o primeiro formato reconhecido para exibir o vdeo.
Para adicionar vdeos rapidamente aos trs campos, use a seleo mltipla. Quando voc escolhe trs formatos de vdeo para o mesmo
vdeo de uma pasta, o primeiro formato na lista usado para Origem. Os seguintes formatos na lista so usados para preencher Origem
de Alt 1 e Origem de Alt 2 automaticamente.
Consulte a tabela abaixo para obter mais informaes sobre o navegador e formato do vdeo suportado. Para obter as ltimas informaes,
acesse HTML5 - Suporte a Navegador.
Navegador
MP4
WebM
Ogg
Internet Explorer 9
SIM
NO
NO
Firefox 4.0
NO
SIM
SIM
Google Chrome 6
SIM
SIM
SIM
Apple Safari 5
SIM
NO
NO
Opera 10.6
NO
SIM
SIM
Para o incio
Para o incio
Voc pode importar as composies do Adobe Edge Animate (arquivos OAM) no Dreamweaver. A composio inserida no local do cursor.
O Dreamweaver extrai todo o contedo do arquivo OAM importado para uma pasta denominada edgeanimate_assets. Voc pode alterar o local
padro na caixa de dilogo Configurao do site.
Nota: os nomes de arquivos com caracteres de byte duplo no tm suporte.
1. Certifique-se de que o cursor esteja no local onde voc deseja inserir a composio do Edge Animate.
2. Selecione Inserir > Mdia > Composio do Edge Animate.
3. Navegue at o arquivo OAM no computador e abra-o. A animao ser inserida no local especificado.
Por padro, o programa extrai o contedo do arquivo OAM para a pasta edgeanimate_assets. Uma subpasta com o nome do arquivo
criada. O contedo do arquivo OAM inserido na pasta Ativos neste local.
Nota: voc pode inserir composies do Edge Animate em pginas individuais que no faam parte de um site. Os arquivos so extrados
para o local da pgina.
Para o incio
Para o incio
Links relacionados
Para o incio
Auto complete: selecione esta opo para preencher os valores automaticamente quando o usurio inserir informaes em um
navegador.
Auto focus: selecione esta opo se deseja que o foco esteja neste elemento quando o navegador carregar a pgina.
Read only: selecione esta opo para definir o valor do elemento para somente leitura.
Form: especifica um ou vrios formulrios aos quais o elemento <input> pertence.
Name: nome exclusivo usado para fazer referncia ao objeto no cdigo.
Place holder: dica que descreve o valor esperado de um campo de entrada.
Pattern: expresso regular usada para validar o valor do elemento.
Title: informaes adicionais sobre um elemento. Exibido como uma dica de ferramenta.
ndice de tabulao: especifica a posio do elemento atual na ordem de tabulao do documento atual.
Para o incio
Form No Validate: selecione esta opo para desativar a validao do formulrio. Esta seleo substitui o atributo Nenhuma validao
no nvel do formulrio.
Form Enc Type: um tipo de MIME com o qual um agente do usurio deve associar este elemento para envio do formulrio.
Form Target: um nome ou palavra-chave de contexto de navegao que representa o destino do controle.
Accept charset: especifica as codificaes de caracteres usadas no envio do formulrio.
Nota: os links de atributos contm informaes em todos os atributos listados nas especificaes HTML5. Nem todos esses atributos esto
presentes no painel Propriedades. Voc pode usar a visualizao de cdigo para adicionar atributos que no esto presentes no painel.
Elemento do formulrio
Descrio de atributos
Campo de texto
List
http://www.w3.org/TR/htmlmarkup/input.text.html
Boto
http://www.w3.org/wiki/HTML/Elements/but
ton
Caixa de seleo
http://www.w3.org/TR/htmlmarkup/input.checkbox.html
Arquivo
Multiple
http://www.w3.org/TR/htmlmarkup/input.file.html
Formulrio
http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/form.html
Oculto
http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/input.hidden.html
Senha
http://www.w3.org/TR/htmlmarkup/input.password.html
Imagem
http://www.w3.org/TR/htmlmarkup/input.image.html
Redefinir
http://dev.w3.org/html5/markup/button.rese
t.html
Enviar
http://www.w3.org/TR/htmlmarkup/input.submit.html
Boto de opo
http://www.w3.org/TR/htmlmarkup/input.radio.html
rea do texto
http://www.w3.org/TR/htmlmarkup/textarea.html
Selecionar
Tamanho
http://www.w3.org/wiki/HTML/Elements/sel
ect
Para o incio
Disponvel em
Descrio
Descrio de atributos
Cor
12.2
http://www.w3.org/TR/htmlmarkup/input.color.html
Data
12.2
http://www.w3.org/TR/htmlmarkup/input.date.html
Data e hora
12.2
http://www.w3.org/TR/htmlmarkup/input.datetime.html
12.2
http://www.w3.org/TR/htmlmarkup/input.datetimelocal.html
Ms
12.2
http://www.w3.org/TR/htmlmarkup/input.month.html
Nmero
12.2
http://www.w3.org/TR/htmlmarkup/input.number.html
Faixa
12.2
http://www.w3.org/TR/htmlmarkup/input.range.html
Tempo
12.2
http://www.w3.org/TR/htmlmarkup/input.time.html
Semana
12.2
http://www.w3.org/TR/htmlmarkup/input.week.html
12.1
http://www.w3.org/TR/htmlmarkup/input.email.html
Pesquisa
12.1
http://www.w3.org/TR/htmlmarkup/input.search.html
Telefone (Tel.)
12.1
http://www.w3.org/TR/htmlmarkup/input.tel.html
URL
12.1
http://www.w3.org/TR/htmlmarkup/input.url.html
Para o incio
Voc pode adicionar fontes do Adobe Edge e da Web lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte no
Dreamweaver so listadas antes de fontes da Web e do Edge. Para obter mais informaes, consulte Adio de fontes do sistema e do Edge ao
menu Fontes.
Para o incio
Todos os elementos de grade fluida foram movidos para a categoria Estrutura do menu Inserir. Novas opes como Lista ordenada (Ol), Lista no
ordenada (Ul) e Lista (LI) foram inseridas. Quando voc cria uma pgina de grade fluida ou abre uma pgina com modelo de grade fluido, o
painel Inserir exibe a visualizao de estrutura por padro.
Alm disso, as opes da interface de usurio de elementos Div, como ocultar, duplicar, bloquear e alternar, agora so exibidas quando voc
seleciona um elemento.
Agora possvel aninhar elementos fluidos e especificar uma classe ou ID como um seletor fluido ao inserir um elemento.
Para obter uma explicao detalhada desses aprimoramentos, assista ao vdeo aqui.
Para obter mais informaes sobre os Layouts de grade fluidos, consulte Layouts de grade fluidos.
Para o incio
Os tipos de entrada de formulrio HTML5 a seguir esto disponveis na Dreamweaver. Para obter mais informaes sobre esses elementos,
consulte Tipos de entrada de HTML5.
Cor
Data
Data e hora
Data e hora locais
Ms
Nmero
Faixa
Tempo
Semana
Para o incio
Agora os seguintes elementos jQuery esto disponveis na Dreamweaver. A funcionalidade desses elementos semelhante funcionalidade dos
elementos correspondentes em tipos de entrada de formulrio HTML5.
Para obter mais informaes, consulte http://jquerymobile.com/test/docs/forms/textinputs/
Data
Data e hora
Email
Ms
Nmero
Pesquisa
Tempo
URL
Semana
Para o incio
Voc pode visualizar e analisar suas pginas da Web na Dreamweaver em vrios dispositivos mveis simultaneamente usando o Edge Inspect.
Para obter mais informaes, consulte Visualizao de pginas da Web em vrios dispositivos.
Para o incio
Na visualizao de design, o menu contextual foi inserido para arquivos OAM de espao reservado. As opes disponveis no menu so
Navegador de cdigo, Colocar tags ao redor, Remover tag, Recortar, Copiar e Colar.
Agora possvel inserir um arquivo OAM com caracteres de byte duplo no nome.
Para o incio
As alteraes na Dreamweaver servem para obter a compatibilidade com as alteraes no PhoneGap. Esse recurso tambm est disponvel
como parte da atualizao 12.0.3.
Em sistemas operacionais que voc deseja, ser solicitado que voc insira a chave e a senha. As informaes da chave de assinatura so
necessrias apenas para Android, iOS e Blackberry. Se voc no conseguir criar mais de um aplicativo, talvez no tenha assinado o servio
PhoneGap.
Para obter mais informaes, consulte Empacotamento de aplicativos da Web como aplicativos nativos de dispositivos mveis com o PhoneGap
Build.
Para o incio
Novidades
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Novidades na Dreamweaver CC
Este documento contm a lista de novos recursos do Dreamweaver desde a atualizao do Dreamweaver 12.2. Para obter informaes sobre as
novidades das atualizaes anteriores da Creative Cloud do Dreamweaver, consulte Novidades no Dreamweaver 12.1 | Creative Cloud e
Novidades no Dreamweaver 12.2 | Creative Cloud.
Para o incio
Paul Trani, divulgador snior de produtos, Creative Cloud, fornece uma viso geral dos novos recursos na Adobe Dreamweaver CC.
CSS Designer
Para o incio
Ferramenta de edio visual extremamente intuitiva que ajuda voc a gerar o cdigo limpo padro da Web. Usando essa ferramenta, voc pode
visualizar e editar rapidamente os estilos que forem relevantes a um contexto (ou elemento de pgina) especfico. Aplique propriedades como
gradientes e sombras de caixa com apenas alguns cliques.
Painel CSS Styles (antes da Dreamweaver CC)
Tpicos relacionados
Painel CSS Designer
Aplicao de gradientes ao plano de fundo
Para o incio
Armazene os arquivos, as configuraes de aplicativo e as definies de site na Creative Cloud. Faa logon na Creative Cloud e acesse esses
arquivos e configuraes de qualquer computador sempre que precisar.
Voc pode configurar o Dreamweaver para sincronizar automaticamente as configuraes com a nuvem. Se preferir, voc pode fazer uma
sincronizao sob demanda sempre que necessrio usando a notificao toast (clique em
na barra de ferramentas Documento) ou a caixa de
dilogo Preferncias > Sincronizar configuraes.
Preferncias - Sincronizar configuraes
Notificao toast
Tpicos relacionados
Sincronizao de configuraes do Dreamweaver com a Creative Cloud
Para o incio
Widgets do jQuery
Arraste e solte acordees, botes, guias e vrios outros widgets do jQuery nos documentos. Deixe seus sites mais interessantes e atraentes com
os efeitos do jQuery (Janelas > Comportamentos > Efeitos).
Widgets do jQuery
Efeitos do jQuery
Tpicos relacionados
Uso de widgets do jQuery
Uso de efeitos do jQuery
Para o incio
A interface de usurio da Dreamweaver CC foi modernizada com menos caixas de dilogo. A interface aprimorada ajuda a desenvolver sites com
mais eficincia com menus contextuais intuitivos.
Para obter mais informaes sobre o que mudou na interface de usurio, consulte este artigo.
Para o incio
Voc pode adicionar fontes do Adobe Edge e da Web lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte no
Dreamweaver so listadas antes de fontes da Web e do Edge. Para obter mais informaes, consulte Adio de fontes do sistema e do Edge ao
menu Fontes.
Para o incio
Todos os elementos de grade fluida foram movidos para a categoria Estrutura do menu Inserir. Novas opes como Lista ordenada (Ol), Lista no
ordenada (Ul) e Lista (LI) foram inseridas. Quando voc cria uma pgina de grade fluida ou abre uma pgina com modelo de grade fluido, o
painel Inserir exibe a visualizao de estrutura por padro.
Alm disso, as opes da interface de usurio de elementos Div, como ocultar, duplicar, bloquear e alternar, agora so exibidas quando voc
seleciona um elemento.
Agora possvel aninhar elementos fluidos e especificar uma classe ou ID como um seletor fluido ao inserir um elemento.
Para obter uma explicao detalhada desses aprimoramentos, assista ao vdeo aqui.
Para obter mais informaes sobre os Layouts de grade fluidos, consulte Layouts de grade fluidos.
Para o incio
Os tipos de entrada de formulrio HTML5 a seguir esto disponveis na Dreamweaver. Para obter mais informaes sobre esses elementos,
consulte Tipos de entrada de HTML5.
Cor
Data
Data e hora
Data e hora locais
Ms
Nmero
Faixa
Tempo
Semana
Para o incio
Agora os seguintes elementos jQuery esto disponveis na Dreamweaver. A funcionalidade desses elementos semelhante funcionalidade dos
elementos correspondentes em tipos de entrada de formulrio HTML5.
Para obter mais informaes, consulte http://jquerymobile.com/test/docs/forms/textinputs/
Data
Data e hora
Email
Ms
Nmero
Pesquisa
Tempo
URL
Semana
Para o incio
Voc pode visualizar e analisar suas pginas da Web na Dreamweaver em vrios dispositivos mveis simultaneamente usando o Edge Inspect.
Para obter mais informaes, consulte Visualizao de pginas da Web em vrios dispositivos.
Para o incio
Na visualizao de design, o menu contextual foi inserido para arquivos OAM de espao reservado. As opes disponveis no menu so
Navegador de cdigo, Colocar tags ao redor, Remover tag, Recortar, Copiar e Colar.
Agora possvel inserir um arquivo OAM com caracteres de byte duplo no nome.
Para o incio
As alteraes na Dreamweaver servem para obter a compatibilidade com as alteraes no PhoneGap. Esse recurso tambm est disponvel
como parte da atualizao 12.0.3.
Em sistemas operacionais que voc deseja, ser solicitado que voc insira a chave e a senha. As informaes da chave de assinatura so
necessrias apenas para Android, iOS e Blackberry. Se voc no conseguir criar mais de um aplicativo, talvez no tenha assinado o servio
PhoneGap.
Para obter mais informaes, consulte Empacotamento de aplicativos da Web como aplicativos nativos de dispositivos mveis com o PhoneGap
Build.
Para o incio
Para o incio
Voc pode inserir vdeo HTML5 e udio HTML5 em pginas da Web que usam Dreamweaver. Os elementos de vdeo e udio em HTML5
especificam um modo padro de incorporar e exibir o vdeo e o udio em uma pgina da Web.
Para obter mais detalhes sobre a insero de vdeo de HTML5, consulte Inserir vdeo HTML5.
Para obter mais detalhes sobre a insero de udio HTML5, consulte Inserir udio HTML5.
Para o incio
Selecione Layout no painel Inserir (Janela> Inserir) para obter uma lista de elementos semnticos que voc pode inserir em seu layout da pgina
HTML5. Para editar as propriedades de elementos semnticos inseridos, selecione um elemento e edite suas propriedades no painel
Propriedades.
possvel tambm usar o menu Inserir (Inserir > Layout) para inserir tags semnticas.
As sete novas tags semnticas deste lanamento: Artigo, parte, HGroup, Navegao, Seo, Cabealho e Rodap.
Para um tutorial sobre a utilizao de tags semnticas no layout da pgina, consulte o artigo no blog de Jennifer Marsman intitulado Markup
semntico e layout de pgina.
O tutorial Semntica HTML5 na Dreamweaver CS5.5 fornece uma perspectiva da utilizao dos elementos semnticos HTML5 na Dreamweaver
CS 5.5.
Para o incio
Voc pode importar as composies do Adobe Edge (arquivos OAM) no Dreamweaver. A composio est localizada no local do cursor.
O Dreamweaver insere os contedos extrados do arquivo OAM em uma pasta com o nome edgeanimate_assets por padro. Voc pode alterar o
local padro na caixa de dilogo Configurao do site.
Para obter mais informaes, consulteImportar composies do Edge Animate.
Para o incio
O elemento Tela de desenho HTML5 um continer para grficos gerados dinamicamente. Estes grficos so criados no tempo de execuo
usando uma linguagem de script como JavaScript. Para obter mais informaes, consulte o artigo Tela de desenho HTML5.
O elemento Tela de desenho tem os atributos de ID, altura e espessura.
Para localizar o elemento Tela de desenho, selecione Inserir > Tela de desenho. Como alternativa, abra o painel Inserir (Janela> Inserir) e
selecione Comum no menu.
Para editar as propriedades do elemento Tela de desenho, selecione o elemento e edite suas propriedades no painel Propriedades.
Para o incio
Como parte do suporte ao HTML5, os novos atributos foram adicionados ao painel Propriedades para elementos de formulrio. Alm disso, quatro
novos elementos de formulrio(e-mail, pesquisa, telefone, URL) foram adicionados seo Formulrios do painel Inserir.
Para obter mais informaes, consulteSuporte avanado ao HTML5 para objetos de formulrio.
Para o incio
Use a Pesquisa dinmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado no
painel Arquivos usado para a pesquisa.
A Pesquisa dinmica usa o API do Spotlight em Mac OS. Qualquer personalizao que voc aplicar s preferncias do Spotlight tambm usada
para a Pesquisa dinmica. O Spotlight exibe todos os arquivos no seu computador que correspondem sua consulta de pesquisa. A Pesquisa
dinmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos.
Para obter mais informaes, consultePesquisar arquivos com base no nome ou contedo do arquivo
Melhorias no FTP
Para o incio
Fazer upload de arquivos no servidor automaticamente ao salvar Esta opo permite fazer upload de arquivos no servidor mesmo se um
processo de upload ou de download estiver em andamento durante a operao de salvamento. Alguns problemas com este recurso na verso
anterior foram corrigidos para torn-lo perfeito.
Continue trabalhando com o Dreamweaver ao baixar o site do Business Catalyst A seleo de Arquivos de upload automtico no servidor
ao salvar no interrompe o seu trabalho com Dreamweaver ao baixar o site do Business Catalyst.
Melhorias na caixa de dilogo de senha da ID da Adobe A ID da Adobe que voc selecionou durante a instalao exibida nesta caixa de
dilogo. As opes para salvar sua senha e recuperar senhas esquecidas esto disponveis.
Para o incio
A lista de fontes no menu Fonte foi classificada com base nas fontes do sistema e da Web. As fontes do sistema so listadas primeiro no menu.
A caixa de dilogo Gerenciador de fontes da Web (Modificar > Fontes da Web) foi renomeada para Pacote de fontes da Web. Voc pode
usar a Pacote de fontes da Web para adicionar fontes de Web lista de fontes.
O boto Adicionar fontes foi renomeado para Adicionar fonte local.
Os cones separados ajudam a identificar facilmente as fontes do sistema considerando as fontes da Web.
Para o incio
As opes no painel Inserir e no menu Inserir foram reorganizados. Para obter mais informaes, consulte Alteraes nas opes Inserir |
Creative Cloud.
Propriedades Exibe as propriedades que voc pode definir para o selecionador especificado. Para obter mais informaes, consulte Definir
propriedades.
O CSS Designer sensvel ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de pgina selecionado, voc pode exibir
as propriedades e os seletores associados. Caso contrrio, quando voc selecionar um seletor no CSS Designer, as consultas de mdia e origem
associadas sero realadas nos respectivos painis.
Para o incio
Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documento
Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao documento
Definir na pgina: para definir uma CSS no documento
Com base na opo selecionada, as caixas de dilogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente so exibidas.
2. Clique em Procurar para especificar o nome do arquivo CSS e, se voc estiver criando uma CSS, o local para salvar o novo arquivo.
3. Siga um destes procedimentos:
Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS.
Clique em Importar para importar o arquivo CSS no documento.
4. (Opcional) Clique em Uso condicional e especifique a consulta de mdia que deseja associar ao arquivo CSS.
Para o incio
A caixa de dilogo Definir consulta de mdia aparece e relaciona todas as condies de consulta de mdia compatveis com o
Dreamweaver.
3. Selecione as Condies conforme desejar. Para obter informaes detalhadas sobre consultas de mdia, consulte este artigo.
Verifique se voc especificou valores vlidos para todas as condies selecionadas. Caso contrrio, as consultas de mdia correspondentes
no sero criadas com sucesso.
Nota: no momento, somente a operao e est disponvel para vrias condies.
Se voc adicionar as condies de consulta de mdia pelo cdigo, apenas as condies permitidas sero preenchidas na caixa de dilogo Definir
consulta de mdia. A caixa de texto Cdigo na caixa de dilogo, entretanto, mostra o cdigo completo (incluindo condies no permitidas).
Se voc clicar em uma consulta de mdia na visualizao dinmica/de design, a janela de visualizao alterada para corresponder consulta
de mdia selecionada. Para exibir o tamanho total da janela de visualizao, clique em Global no painel @Mdia.
Definir seletores
Para o incio
1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mdia no painel @Mdia.
2. No painel Seletores, clique em . Com base no elemento selecionado no documento, o CSS Designer identifica de forma inteligente e
solicita o seletor relevante. Por padro, o seletor Mais especfico. possvel editar o seletor para deix-lo Menos especfico.
Diferentemente do painel CSS Styles, voc no pode selecionar um Tipo de seletor diretamente no CSS Designer. necessrio digitar o
nome do seletor junto com o identificador do Tipo de seletor. Por exemplo, se voc estiver especificando uma ID, o nome do seletor dever
ter o prefixo #.
Para pesquisar um seletor especfico, use a caixa de pesquisa na parte superior do painel.
Para renomear um seletor, clique no seletor e digite o nome necessrio.
Para reorganizar os seletores, arraste os seletores at a posio desejada.
Para mover um seletor de uma origem para outra, arraste o seletor at a origem necessria no painel Origem.
Para duplicar um seletor na origem selecionada, clique com o boto direito no seletor e clique em Duplicar.
Para duplicar um seletor e adicion-lo a uma consulta de mdia, clique com o boto direito no seletor, passe o mouse sobre Duplicar na
consulta de mdia e escolha a consulta de mdia.
Observao: a opo Duplicar na consulta de mdia est disponvel somente quando a fonte do seletor selecionado contm consultas de
mdia. No possvel duplicar um seletor de uma fonte em uma consulta de mdia de outra fonte.
Propriedades de grupo
Para o incio
As propriedades so agrupadas nas seguintes categorias e representadas por cones diferentes na parte superior do painel Propriedades:
Layout
Texto
Borda
Plano de fundo
Outros (lista de propriedades somente texto e no propriedades com controles visuais)
Marque a caixa de seleo Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que voc pode especificar
para um seletor, desmarque a caixa de seleo Exib. conj..
Todas as propriedades
Para definir uma propriedade, como width ou border-collapse, clique nas opes necessrias exibidas perto da propriedade no painel
Propriedades. Para obter informaes sobre como definir o plano de fundo do gradiente ou controles de caixa como margens, preenchimento e
posio, consulte os links abaixo:
Definir margens, preenchimento e posio
Aplicar gradientes ao plano de fundo
propriedade margin
propriedade padding
propriedade position
Clique nos valores e digite o valor necessrio. Se desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no cone de
vnculo ( ) no centro.
A qualquer momento, voc pode desativar ( ) ou excluir ( ) valores especficos, por exemplo, o valor da margem esquerda, e manter os valores
das margens direita, superior e inferior.
Desativar/excluir propriedade
Para o incio
Voc pode importar as composies do Adobe Edge Animate (arquivos OAM) no Dreamweaver. A composio inserida no local do cursor.
O Dreamweaver extrai todo o contedo do arquivo OAM importado para uma pasta denominada edgeanimate_assets. Voc pode alterar o local
padro na caixa de dilogo Configurao do site.
Nota: os nomes de arquivos com caracteres de byte duplo no tm suporte.
1. Certifique-se de que o cursor esteja no local onde voc deseja inserir a composio do Edge Animate.
2. Selecione Inserir > Mdia > Composio do Edge Animate.
3. Navegue at o arquivo OAM no computador e abra-o. A animao ser inserida no local especificado.
Por padro, o programa extrai o contedo do arquivo OAM para a pasta edgeanimate_assets. Uma subpasta com o nome do arquivo
criada. O contedo do arquivo OAM inserido na pasta Ativos neste local.
Nota: voc pode inserir composies do Edge Animate em pginas individuais que no faam parte de um site. Os arquivos so extrados
para o local da pgina.
Para o incio
Para o incio
Para o incio
Agora possvel usar fontes do Adobe Edge nas pginas da Web. Quando uma fonte do Edge utilizada em uma pgina, a tag adicional de
script adicionada para fazer referncia a um arquivo JavaScript. Esse arquivo baixa a fonte do servidor da Creative Cloud diretamente no cache
do navegador.
Para exibir a pgina, as fontes so baixadas do servidor da Creative Cloud mesmo se a fonte estiver disponvel no computador do usurio.
Por exemplo, (na verso 12.2) uma tag de script que usa somente a fonte Abel tem o formato:
<!--A seguinte tag de script baixa uma fonte do servidor Adobe Edge Web Fonts para uso na pgina da Web.
Recomendamos no modificar isso. -->
<script src="http://webfonts.creativecloud.com/abel:n4:default.js" type="text/javascript"></script>
Abel o nome interno que o servidor usa para identificar a fonte. n4 indica que a variao da fonte que est sendo baixada tem estilo normal
e peso 400.
Na Dreamweaver CC, o script que ser adicionado o seguinte:
<!--A seguinte tag de script baixa uma fonte do servidor Adobe Edge Web Fonts para uso na pgina da Web.
Recomendamos no modificar isso. -->
<script>var adobewebfontsappname ="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
1. Selecione Modificar > Gerenciar fontes.
2. A guia Fontes do Adobe Edge exibe todas as fontes do Adobe Edge que podem ser adicionadas lista de fontes.
3. Para localizar e adicionar fontes dessa lista lista de fontes, faa o seguinte:
Clique na fonte que voc deseja adicionar lista de fontes.
Para desmarcar uma fonte, clique na fonte novamente.
Utilize filtros para criar uma pequena lista das fontes preferidas. Por exemplo, para criar uma pequena lista de fontes Serif, clique em
.
Voc pode usar vrios filtros. Por exemplo, para criar uma pequena lista de filtros do tipo Serif que pode ser usado para pargrafos,
e em .
clique em
Para pesquisar uma fonte pelo nome, digite seu nome na caixa de pesquisa.
4. Clique em
5. Clique em Concludo.
6. Abra a lista de fontes de qualquer local. Por exemplo, voc poderia usar a lista de fontes na seo CSS do painel Propriedades.
Na lista de fontes, as pilhas de fontes do Dreamweaver so listadas antes das fontes da Web. Navegue para baixo na lista para localizar as
fontes selecionadas.
Para o incio
Voc pode adicionar fontes da Web de seu computador lista de fontes no Dreamweaver. As fontes adicionadas so refletidas nos menus de
fonte no Dreamweaver. Fontes de tipo EOT, WOFF, TTF e SVG so suportadas.
1. Selecione Modificar > Gerenciar fontes.
Para o incio
Uma pilha de fontes uma lista de fontes em uma declarao font-family da CSS. Usando a guia Pilhas de fontes personalizadas da caixa de
dilogo Gerenciar fontes, voc poder:
Adicionar as novas pilhas de fontes usando o boto +.
Editar pilhas de fontes existentes, selecionando-as na lista de fontes. Usar os botes >> e << para atualizar a lista de Fontes escolhidas.
Excluir as pilhas de fontes existentes usando o boto -.
Reordenar as pilhas usando os botes de seta.
Para o incio
No possvel visualizar fontes da Web e do Edge na visualizao de design. Alterne para a visualizao dinmica ou visualize a pgina em um
navegador para visualiz-las.
Para o incio
Quando voc atualizar a fonte em um arquivo CSS que est vinculado a vrios arquivos HTML, dever atualizar a tag de script nos arquivos
HTML relacionados. Quando voc clica em Atualizar, as tags de script em todos os arquivos HTML afetados so atualizadas.
Para o incio
Selecione Comandos > Limpar tag de script de fontes da Web (pgina atual) para atualizar as fontes na pgina da Web que no esto refletidas
na tag de script.
Para o incio
1. Na visualizao Design ou Cdigo do documento do Dreamweaver, selecione o elemento ao qual voc deseja aplicar um efeito do jQuery.
2. Selecione Janelas > Comportamentos para abrir o painel Comportamentos.
3. Clique em
Para o incio
Quando voc aplica um efeito do jQuery, ele atribudo ao evento onClick por padro. Voc pode alterar o evento de disparo do efeito usando
o painel Comportamentos.
1. Selecione o elemento de pgina obrigatrio.
2. No painel Janelas > Comportamentos, clique no cone Mostrar eventos de grupo.
3. Clique na linha que corresponde ao efeito que est atualmente aplicado. Observe que a primeira coluna se transforma em uma lista
suspensa que fornece uma lista de eventos a serem escolhidos.
4. Clique no evento obrigatrio.
Para o incio
Para o incio
Origem / Origem de Alt 1 / Origem de Alt 2: em Origem, insira o local do arquivo de udio. Como alternativa, clique no cone da pasta
para selecionar um arquivo de udio em seu computador. O suporte para formatos de udio varia em navegadores diferentes. Se o
formato de udio na Origem no for suportado, o formato especificado em Origem de Alt 1 ou Origem de Alt 2 ser usado. O navegador
seleciona o primeiro formato reconhecido para exibir o udio.
Para adicionar vdeos rapidamente aos trs campos, use a seleo mltipla. Quando voc escolhe trs formatos de vdeo para o mesmo
vdeo de uma pasta, o primeiro formato na lista usado para Origem. Os seguintes formatos na lista so usados para preencher Origem
de Alt 1 e Origem de Alt 2 automaticamente.
Navegador
MP3
Wav
Ogg
Internet Explorer 9
SIM
NO
NO
Firefox 4.0
NO
SIM
SIM
Google Chrome 6
SIM
SIM
SIM
Apple Safari 5
SIM
SIM
NO
Opera 10.6
NO
SIM
SIM
Para o incio
Para o incio
Origem / Origem de Alt 1 / Origem de Alt 2: na Origem, insira o local do arquivo de vdeo. Como alternativa, voc pode clicar no cone
da pasta para selecionar um arquivo de vdeo no sistema de arquivos local. O suporte de formato do vdeo varia em navegadores
diferentes. Se o formato do vdeo na Origem no for suportado em um navegador, o formato do vdeo especificado em Origem de Alt 1
ou Origem de Alt 2 ser usado. O navegador seleciona o primeiro formato reconhecido para exibir o vdeo.
Para adicionar vdeos rapidamente aos trs campos, use a seleo mltipla. Quando voc escolhe trs formatos de vdeo para o mesmo
vdeo de uma pasta, o primeiro formato na lista usado para Origem. Os seguintes formatos na lista so usados para preencher Origem
de Alt 1 e Origem de Alt 2 automaticamente.
Consulte a tabela abaixo para obter mais informaes sobre o navegador e formato do vdeo suportado. Para obter as ltimas informaes,
acesse HTML5 - Suporte a Navegador.
Navegador
MP4
WebM
Ogg
Internet Explorer 9
SIM
NO
NO
Firefox 4.0
NO
SIM
SIM
Google Chrome 6
SIM
SIM
SIM
Apple Safari 5
SIM
NO
NO
Opera 10.6
NO
SIM
SIM
Para o incio
Links relacionados
Para o incio
Auto complete: selecione esta opo para preencher os valores automaticamente quando o usurio inserir informaes em um
navegador.
Auto focus: selecione esta opo se deseja que o foco esteja neste elemento quando o navegador carregar a pgina.
Read only: selecione esta opo para definir o valor do elemento para somente leitura.
Form: especifica um ou vrios formulrios aos quais o elemento <input> pertence.
Name: nome exclusivo usado para fazer referncia ao objeto no cdigo.
Place holder: dica que descreve o valor esperado de um campo de entrada.
Pattern: expresso regular usada para validar o valor do elemento.
Title: informaes adicionais sobre um elemento. Exibido como uma dica de ferramenta.
ndice de tabulao: especifica a posio do elemento atual na ordem de tabulao do documento atual.
Para o incio
Form No Validate: selecione esta opo para desativar a validao do formulrio. Esta seleo substitui o atributo Nenhuma validao
no nvel do formulrio.
Form Enc Type: um tipo de MIME com o qual um agente do usurio deve associar este elemento para envio do formulrio.
Form Target: um nome ou palavra-chave de contexto de navegao que representa o destino do controle.
Accept charset: especifica as codificaes de caracteres usadas no envio do formulrio.
Nota: os links de atributos contm informaes em todos os atributos listados nas especificaes HTML5. Nem todos esses atributos esto
presentes no painel Propriedades. Voc pode usar a visualizao de cdigo para adicionar atributos que no esto presentes no painel.
Elemento do formulrio
Descrio de atributos
Campo de texto
List
http://www.w3.org/TR/htmlmarkup/input.text.html
Boto
http://www.w3.org/wiki/HTML/Elements/but
ton
Caixa de seleo
http://www.w3.org/TR/htmlmarkup/input.checkbox.html
Arquivo
Multiple
http://www.w3.org/TR/htmlmarkup/input.file.html
Formulrio
http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/form.html
Oculto
http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/input.hidden.html
Senha
http://www.w3.org/TR/htmlmarkup/input.password.html
Imagem
http://www.w3.org/TR/htmlmarkup/input.image.html
Redefinir
http://dev.w3.org/html5/markup/button.rese
t.html
Enviar
http://www.w3.org/TR/htmlmarkup/input.submit.html
Boto de opo
http://www.w3.org/TR/htmlmarkup/input.radio.html
rea do texto
http://www.w3.org/TR/htmlmarkup/textarea.html
Selecionar
Tamanho
http://www.w3.org/wiki/HTML/Elements/sel
ect
Para o incio
Disponvel em
Descrio
Descrio de atributos
Cor
12.2
http://www.w3.org/TR/htmlmarkup/input.color.html
Data
12.2
http://www.w3.org/TR/htmlmarkup/input.date.html
Data e hora
12.2
http://www.w3.org/TR/htmlmarkup/input.datetime.html
12.2
http://www.w3.org/TR/htmlmarkup/input.datetimelocal.html
Ms
12.2
http://www.w3.org/TR/htmlmarkup/input.month.html
Nmero
12.2
http://www.w3.org/TR/htmlmarkup/input.number.html
Faixa
12.2
http://www.w3.org/TR/htmlmarkup/input.range.html
Tempo
12.2
http://www.w3.org/TR/htmlmarkup/input.time.html
Semana
12.2
http://www.w3.org/TR/htmlmarkup/input.week.html
12.1
http://www.w3.org/TR/htmlmarkup/input.email.html
Pesquisa
12.1
http://www.w3.org/TR/htmlmarkup/input.search.html
Telefone (Tel.)
12.1
http://www.w3.org/TR/htmlmarkup/input.tel.html
URL
12.1
http://www.w3.org/TR/htmlmarkup/input.url.html
Novidades da CS6
Atualizaes da Creative Cloud posteriores CS6
Tutoriais em vdeo
Insero de contedo de vdeo em HTML5
Novo gerenciador de sites
Layouts fluidos da CSS com base em grade
Transies da CSS3
Seleo de diversas classes CSS
Integrao do PhoneGap Build
Amostras do jQuery Mobile 1.0 e do jQuery Mobile
Integrao do Business Catalyst
Fontes da Web
Otimizao simplificada de PSD
Melhorias transferncia de FTP
Para o incio
Tutoriais em vdeo
Para o incio
Os tutoriais em vdeo dos novos recursos da Dreamweaver CS6 esto disponveis na Adobe TV
(http://www.adobe.com/go/learn_dwcs6_adobetv_br).
Para o incio
A caixa de dilogo Gerenciar sites (Sites > Gerenciar sites) est com uma nova aparncia, mas grande parte da funcionalidade continua a
mesma. A funcionalidade adicional inclui a capacidade de criar ou importar sites do Business Catalyst.
Opes da caixa de dilogo Gerenciar sites
Para o incio
Use o novo layout de grade fluido no Dreamweaver (Novo > Novo layout de grade fluido) para criar layouts da CSS adaptveis que variam de
acordo com o tamanho da tela. Quando uma pgina da Web criada com a grade fluida, o layout e o contedo so ajustados automaticamente
ao dispositivo de visualizao do usurio, seja um computador desktop, tablet ou smartphone.
Adobe TV: Uso de layouts de grade fluidos na Dreamweaver CS6
Adobe TV: Criao de designs adaptativos com layouts de grade fluidos na Dreamweaver CS6
Como usar layouts de grade fluidos na Dreamweaver CS6
WebDesign Tuts: introduo s grades fluidas da Dreamweaver CS6
Transies da CSS3
Para o incio
Use o novo painel Transies da CSS para aplicar modificaes de propriedade suaves a elementos de pgina em resposta ativao de
eventos, como passar o mouse, clicar e focalizar. Um exemplo comum um item da barra de menus que muda de cor gradualmente ao passar o
mouse sobre ele. Agora possvel criar transies da CSS usando o suporte de nvel de cdigo e o novo painel Transies da CSS (Janela >
Transies da CSS).
Introduo s transies da CSS3
Efeitos de transio da CSS3 no Dreamweaver (referncia)
Dreamweaver CS: Criao de alteraes suaves com o painel de transies da CSS (tutorial)
Adobe TV: Uso das transies da CSS3 na Dreamweaver CS6
Para o incio
Agora possvel aplicar vrias classes CSS em um mesmo elemento. Selecione o elemento, abra a caixa de dilogo Seleo de vrias classes e
escolha as suas classes. Depois de aplicar vrias classes, o Dreamweaver criar novas classes a partir das suas selees. Em seguida, as novas
classes estaro disponveis em outros lugares onde voc faz selees da CSS.
Voc pode abrir a caixa de dilogo Seleo de vrias classes de diversos pontos de acesso:
O inspetor de propriedades de HTML (Escolha Aplicar vrias classes no menu)
O menu pop-up Regra-alvo do inspetor de propriedades da CSS
O menu de contexto do seletor de tags na parte inferior da janela Documento (clique com o boto direito do mouse em uma tag e escolha
Definir classe > Aplicar vrias classes)
Adobe TV: Seleo de vrias classes na Dreamweaver CS6
Para o incio
Por meio da integrao direta com o novo servio PhoneGap Build, os clientes da Dreamweaver CS6 podem criar aplicativos nativos para
dispositivos mveis usando seus conhecimentos de HTML, CSS e JavaScript. Depois de se conectar ao PhoneGap Build pelo painel PhoneGap
Build (Site > PhoneGap Build), voc poder criar o aplicativo da Web diretamente no servio e baixar os aplicativos mveis resultantes para o seu
desktop ou dispositivo mvel. O servio PhoneGap Build gerencia o projeto e permite a criao de aplicativos nativos para as plataformas mveis
mais conhecidas, como Android, iOS, Blackberry, Symbian e webOS.
O que o PhoneGap?
Compactao de aplicativos da Web com o PhoneGap Build (referncia)
Adobe TV: Compactao de aplicativos com o PhoneGap Build
Para o incio
Para o incio
Fontes da Web
Para o incio
Agora possvel usar fontes criativas com suporte Web (como as do Google ou do Typekit) no Dreamweaver. Primeiro, use o Web Font
Manager (Modificar > Fontes da Web) para importar uma fonte para o site do Dreamweaver. A fonte fica disponvel para uso nas suas pginas
da Web.
Adobe TV: Trabalho com fontes da Web na Dreamweaver CS6
Para o incio
A caixa de dilogo Visualizao de imagem da Dreamweaver CS5 agora se chama Otimizao de imagem. Para abrir a caixa de dilogo,
selecione uma imagem na janela Documento e clique no boto Editar configuraes da imagem no Inspetor de propriedades. Algumas das
opes encontradas na antiga caixa de dilogo Visualizao de imagem da CS5 aparecem no Inspetor de propriedades.
Uma visualizao instantnea da imagem exibida em Projeto enquanto voc altera configuraes na caixa de dilogo Otimizao de imagem.
Edio de imagens no Dreamweaver (referncia)
Adobe TV: Edio de imagens na Dreamweaver CS6
Para o incio
O Dreamweaver usa a transferncia multicanal para transferir simultaneamente os arquivos selecionados usando vrios canais. O Dreamweaver
tambm permite o uso simultneo das operaes Obter e Colocar para transferir arquivos.
Se houver largura de banda suficiente disponvel, a transferncia assncrona multicanal de FTP acelerar consideravelmente o processo de
transferncia.
Para obter mais informaes, consulte http://blogs.adobe.com/dreamweaver/2012/06/ftp-improvement-in-dreamweaver-cs6.html.
Para o incio
As opes no painel Inserir e no menu Inserir foram reorganizadas para ajud-lo a encontrar e inserir essas opes. Novos elementos HTML5
foram inseridos nos menus Inserir.
As modificaes nas opes Inserir foram feitas pelos seguintes motivos:
Sincronize a ordem das opes no painel Inserir com o menu Inserir para aumentar a velocidade das descobertas.
Como parte do suporte avanado a HTML5 no Dreamweaver, novos elementos HTML5 foram adicionados s opes Inserir.
As opes Inserir que exigem vrios cliques esto obsoletas. Essas opes podem ser configuradas de maneira rpida e fcil usando o
Inspetor de propriedade ou a Visualizao de cdigo.
Opes obsoletas
Para o incio
As opes Inserir que exigem vrios cliques esto obsoletas. Essas opes ser configuradas usando o Inspetor de propriedades ou na
visualizao Cdigo.
Como consequncia, as seguintes caixas de dilogo esto obsoletas: Editor de tags, Seletor de tags, Tag de Formulrio e Atributos de acesso a
tag input. Ento, as opes correspondentes no esto disponveis no menu de clique com o boto direito.
As seguintes opes em Dados no painel Inserir esto obsoletas: Conjunto de dados, Repetir, Regio e Lista de repetio.
As seguintes opes na categoria Tags de cabealho em HTML esto obsoletas: Atualizar, Base, Link.
A opo para definir cones de cores no painel Inserir esto obsoletos. Agora, os cones de elemento esto disponveis somente em preto e
branco.
Para o incio
O painel Inserir e o menu Inserir foram reorganizados para serem sincronizados um com outro. A ordem das opes no painel Inserir corresponde
com o menu Inserir.
Alm disso, algumas opes novas foram disponibilizadas e algumas opes anteriores foram removidas.
Opes Inserir no Dreamweaver 12 (CS6)
Opo
CS6, CS5.5
Creative Cloud
Div
Vdeo HTML5
No disponvel
Opes
Tela de desenho
No disponvel
Caractere
Cabealho
Meta, palavras-chave,
descrio, porta de exibio
Rgua horizontal
No disponvel
Dados
Tag
No disponvel
Imagem
Imagem, Imagem de
sobreposio, HTML do
Fireworks
Composio do Edge Animate,
Flash SWF, vdeo em Flash,
vdeo HTML5, udio HTML5,
Plug-in
Mdia
Consultas de mdia
Tabela
Objetos da tabela
No disponvel
Layout
Formulrio
Hiperlink
Link de e-mail
Data
O servidor inclui
No disponvel
Comentrio
No disponvel
HTML
No disponvel
Modelo
Snippets recentes
Widget
jQuery Mobile
No contexto
Spry
Objetos de dados
Favoritos
To the top
Text in Middle Eastern languages is mostly written from right to left (RTL). However, in general, the most commonly used form is bi-directional
(bidi) text - a mix of left-to-right and right-to-left text. An example of bidi text is a paragraph that includes Arabic and English text. In CS6, you can
use Dreamweaver to type Arabic, Hebrew, or bidi text, in design view and code view.
In Dreamweaver Middle Eastern version, Right-to-left direction attribute can be applied to two notional objects, paragraphs and characters. The
direction attribute can be applied to tags supported in the HTML specification. The direction attribute can take values: ltr (default), rtl, or
inherit.
Tag editor
To the top
You can apply direction and language settings using the Tag Editor.
Tag Editor
To the top
Table properties
To the top
Right-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left side. On tabbing, the
cursor moves in RTL direction..
Specify the table direction using the Properties panel.
Right-to-left table
Div properties
Use Direction to specify the Div direction in the Properties.
Div direction
Twitter and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy
To the top
O que h de novo
O que h de novo (CS5.5)
O que h de novo (CS5)
Recursos obsoletos
Importante: Esta pgina fornece uma lista de novos recursos do Dreamweaver CS5 e do Dreamweaver CS5.5. Esta pgina NO diz que como
usar aqueles recursos. Para obter mais informaes sobre qualquer um dos novos recursos, clique nos links correspondentes fornecidos. Voc
tambm pode assistir uma viso geral de recursos do CS5 ou uma viso geral de recursos do CS5.5 na AdobeTV.
Para o incio
Suporte a FTPS
Transfira dados usando FTPS. O FTPS (FTP sobre SSL) fornece tanto suporte criptografia quanto autenticao em relao ao SFTP que s
oferece suporte criptografia. Para obter mais informaes, consulte Conexes de FTPS (CS5.5).
Para o incio
Adobe BrowserLab
O Dreamweaver CS5 integra com o Adobe BrowserLab, um dos novos servios on-line, o CS Live, que oferece uma soluo rpida e precisa
para teste de compatibilidade de vrios navegadores. Com o BrowserLab possvel visualizar pginas da Web e contedo local usando mltiplas
visualizaes e ferramentas para comparao. Consulte BrowserLab.
O Adobe Business Catalyst um aplicativo de hospedagem que substitui ferramentas tradicionais da rea de trabalho por uma plataforma central
para designers da Web. O aplicativo funciona em conjunto com o Dreamweaver e permite que voc construa tudo, desde sites bsicos
controlados por dados at poderosas lojas on-line. Consulte http://www.adobe.com/go/business_catalyst_get_extension_br.
Aprimoramentos do CSS
Desativar/Ativar CSS
O recurso Ativar/desativar CSS permite que voc desative ou reative as propriedades do CSS diretamente no painel Estilos CSS. A desativao
de uma propriedade CSS faz com que simplesmente no haja comentrios sobre a propriedade especfica sem ter que exclu-la. Consulte
Desativar/Ativar CSS.
Inspeo do CSS
O modo Inspeo permite que voc exiba visualmente as propriedades de modelo de caixa do CSSincluindo preenchimento, borda e margem
com detalhes, sem leitura de cdigo ou necessidade um utilitrio separado de outros fabricantes como o Firebug. Consulte Inspecionar CSS na
visualizao ativa.
Layouts iniciais de CSS
O Dreamweaver CS5 inclui layouts iniciais de CSS simplificados e atuais. Os complexos seletores descendentes dos layouts do CS4 foram
retirados e substitudos por outros mais simples e fceis de entender. Consulte Criao de uma pgina com um layout de CSS.
Recursos obsoletos
Os seguintes recursos se tornaram obsoletos no Dreamweaver CS5:
Relatrio de validao de acessibilidade
Comportamentos de servidor ASP/JavaScript
Para o incio
Introduo e tutoriais
Centro de desenvolvedor do Dreamweaver (19 de julho de 2012)
tutorial
Seja bem-vindo ao Centro de desenvolvedor do Dreamweaver! Atualize-se rapidamente com o Dreamweaver: assista a vdeos para
obter uma viso geral de novos recursos importantes e aprender a us-los ou pule direto para a construo de seu prprio site da Web,
esttico ou dinmico, do zero.
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Voc pode usar vrias abordagens para criar um site. Esta uma delas:
Planejar e configurar seu site
Determine para onde os arquivos so direcionados e examine os requisitos do site, os perfis do pblico-alvo e as metas do site. Alm disso,
avalie os requisitos tcnicos, como acesso do usurio, alm de restries de navegador, plug-in e download. Depois de organizar suas
informaes e determinar uma estrutura, voc pode comear a criar seu site. (Consulte Sobre os sites do Dreamweaver.)
Organize e gerencie os arquivos do seu site
No painel Arquivos, voc pode adicionar, excluir e renomear arquivos e pastas com facilidade para alterar a organizao conforme necessrio. O
painel Arquivos tambm tem muitas ferramentas de gerenciamento de site, transferncia de arquivos de e para um servidor remoto, configurao
de um processo de Check-in/Check-out para impedir a substituio e sincronizao dos arquivos em sites locais e remotos. No painel Ativos, voc
pode organizar facilmente os ativos em um site; possvel arrastar a maioria dos ativos diretamente do painel Ativos para um documento do
Dreamweaver. possvel tambm usar o Dreamweaver para gerenciar os aspectos dos seus sites do Adobe Contribute . (Consulte
Gerenciamento de arquivos e pastas e Gerenciamento de ativos e bibliotecas.)
Layout das pginas da Web
Selecione a tcnica de layout que se ajusta a voc ou use as opes de layout do Dreamweaver em conjunto para criar a aparncia do seu site.
Voc pode usar os elementos AP do Dreamweaver, os estilos de posicionamento CSS ou os layouts predefinidos de CSS para criar seu layout.
As ferramentas de tabela permitem projetar pginas rapidamente, desenhando e reorganizando a estrutura da pgina. Se desejar exibir vrios
elementos ao mesmo tempo em um navegador, voc pode usar quadros para criar o layout de documentos. Finalmente, voc pode criar pginas
novas baseadas no modelo do Dreamweaver e atualizar o layout dessas pginas automaticamente quando o modelo for alterado. (Consulte
Criao de pginas com a CSS e Aplicao de layout s pginas com HTML.)
Adio de contedo a pginas
Adicione ativos e elementos de design como texto, imagens, imagens de sobreposio, mapas de imagem, cores, filmes, sons, links HTML,
menus de salto e muito mais. Para esses elementos, voc pode usar recursos integrados de criao de pgina, como ttulos e planos de fundo,
digitar diretamente na pgina ou importar contedo de outros documentos. O Dreamweaver fornece tambm comportamentos para realizar tarefas
em resposta a eventos especficos, como validao de um formulrio, quando o visitante clica no boto Enviar, ou abertura de uma segunda
janela no navegador quando a pgina principal acabar de carregar. Finalmente, o Dreamweaver fornece ferramentas para maximizar o
desempenho do site e testar pginas para garantir a compatibilidade com diferentes navegadores da Web. (Consulte Adio de contedo s
pginas.)
Criao de pginas com programao manual
A programao manual de pginas da Web outra abordagem de criao de pginas. O Dreamweaver fornece ferramentas de edio visual
fceis de usar, mas tambm oferece um ambiente de programao sofisticado; voc pode usar qualquer uma das abordagens ou as duas para
Para o incio
A rea de trabalho do Dreamweaver permite visualizar documentos e propriedades de objetos. A rea de trabalho tambm coloca muitas
operaes comuns em barras de ferramentas para que voc possa fazer alteraes rapidamente em seus documentos.
rea de trabalho do Dreamweaver (CS6, 12.1, 12.2)
A. Barra de ferramentas de documento B. Barra do aplicativo C. Janela do documento D. Alternador da rea de trabalho E. Grupos de painis F.
Seletor de tags G. Inspetor de propriedades H. Painel Arquivos
Para assistir a um tutorial sobre como trabalhar com diferentes rea de trabalho do Dreamweaver, consulte www.adobe.com/go/lrvid4042_dw_br.
rea de trabalho do Dreamweaver (CC)
A. Barra de ferramentas Documento B. Barra do aplicativo C. Janela do documento D. Alternador da rea de trabalho E. Grupos de painis F.
Painel Arquivos G. Inspetor de propriedades H. Seletor de tags
Para o incio
Barra de ferramentas Codificao (exibida somente na Visualizao de cdigo) Contm botes que permitem executar muitas operaes
padro de codificao.
Barra de ferramentas Processamento do estilo Para exibir a barra de ferramentas Processamento do estilo, selecione Visualizar > Barras de
ferramentas > Processamento do estilo. A barra de ferramentas contm botes que permitem visualizar como seu design apareceria em
diferentes tipos de mdia se voc usasse folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar a
Folhas de estilos em cascata (CSS).
Observao: A barra de ferramentas Processamento de estilo foi removida da Dreamweaver CC e posterior.
Janela do documento Exibe o documento atual medida que criado e editado.
Inspetor de propriedades Permite visualizar e alterar diversas propriedades do objeto ou texto selecionado. Cada objeto tem propriedades
diferentes. O Inspetor de propriedades no expandido por padro no layout da rea de trabalho do Codificador.
Seletor de tags Localizado na barra Status na parte inferior da janela Documento. Mostra a hierarquia de tags em torno da seleo atual. Clique
em qualquer tag da hierarquia para selecionar a tag e todo seu contedo.
Painis Ajuda a monitorar e modificar seu trabalho. Entre os exemplos esto o painel Inserir, o painel CSS Styles e o painel Arquivos. Para
expandir um painel, clique duas vezes na guia correspondente.
Painel Inserir Contm botes para inserir vrios tipos de objetos em um documento, como imagens, tabelas e elementos de mdia. Cada objeto
uma parte do cdigo HTML que permite definir vrios atributos medida que so inseridos. Por exemplo, voc pode inserir uma tabela clicando
no boto Tabela no painel Inserir. Se voc preferir, poder inserir objetos usando o menu Inserir em vez do painel Inserir.
Painel Arquivos Permite gerenciar arquivos e pastas, sejam eles parte de um site do Dreamweaver ou de um servidor remoto. O Painel
Arquivos tambm permite acesso a todos os arquivos no seu disco local.
Para o incio
A janela Documento mostra o documento atual. Para acessar um documento, clique na guia correspondente.
possvel selecionar qualquer uma das seguintes visualizaes.
Visualizao de design Um ambiente de design para o layout visual da pgina, a edio visual e o desenvolvimento rpido do aplicativo. Nessa
visualizao, o Dreamweaver exibe uma representao visual totalmente editvel do documento, semelhante ao que voc veria ao exibir a pgina
no navegador.
Visualizao de cdigo Um ambiente de programao manual para gravao e edio de cdigo HTML, JavaScript, de linguagem de servidor
(como linguagem PHP ou linguagem de markup do ColdFusion [CFML]) e qualquer outro tipo de cdigo.
Visualizao de dividir cdigo Uma verso de diviso da Visualizao de cdigo que permite fazer a navegao para trabalhar em diferentes
sees do documento ao mesmo tempo.
Visualizao de cdigo e de design Permite que voc veja as Visualizaes de cdigo e de design para o mesmo documento em uma nica
janela.
Visualizao dinmica Semelhante Visualizao de design, a Visualizaodinmica exibe uma representao mais realista de como seu
documento aparecer no navegador e permite que voc interaja com o documento exatamente como faria em um navegador. A Visualizao
dinmica no editvel. Entretanto, voc pode editar na Visualizao de cdigo e atualizar a Visualizao dinmica para ver as alteraes.
Visualizao dinmica de cdigo Somente disponvel ao visualizar um documento na Visualizao dinmica. A Visualizao dinmica de
cdigo exibe o cdigo real que o navegador usa para executar a pgina, e pode alterar dinamicamente medida que voc interagir com a pgina
na Visualizao dinmica. A Visualizao dinmica de cdigo no editvel.
Quando a janela Documento maximizada (o padro), as guias aparecem na parte superior da janela Documento mostrando os nomes de
arquivos de todos os documentos abertos. O Dreamweaver mostrar um asterisco aps o nome de arquivo se voc tiver feito alteraes que
ainda no tinham sido salvas.
O Dreamweaver mostrar tambm a barra de ferramentas Arquivos relacionados abaixo da guia do documento (ou abaixo da barra de ttulo do
documento se voc estiver visualizando documentos em janelas separadas). Os documentos relacionados esto associados ao arquivo atual,
como arquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na janela Documento, clique no seu nome de arquivo na barra de
ferramentas Arquivos relacionados.
Para o incio
A barra de ferramentas Documento contm botes que permitem alternar entre diferentes visualizaes do seu documento rapidamente. A barra
de ferramentas tambm contm alguns comandos comuns e opes relacionadas visualizao do documento e sua transferncia entre sites
locais e remotos. A ilustrao abaixo mostra a barra de ferramentas Documento expandida.
Barra de ferramentas Documento (CS6, 12.1, 12.2)
A. Mostrar a Visualizao de cdigo B. Mostrar a Visualizao de cdigo e de design C. Mostrar a Visualizao de design D. Visualizao
dinmica E. Vrias telas F. Visualizar/Depurar no navegador G. Gerenciamento de arquivos H. Validao de W3C I. Verificao de
compatibilidade com navegador J. Auxlios visuais K. Atualizao de Visualizao de design L. Ttulo do documento
Barra de ferramentas Documento (CC)
A. Mostrar visualizao do cdigo B. Mostrar exibio do cdigo e de design C. Mostrar exibio de design D. Exibio dinmica E.
Visualizar/Depurar no navegador F. Ttulo do documento G. Gerenciamento de arquivos .
As opes seguintes aparecem na barra de ferramentas Documento:
Mostrar Visualizao de cdigo Exibe somente a Visualizao de cdigo na janela Documento.
Mostrar visualizaes de cdigo e de design Divide a janela Documento entre as Visualizaes de cdigo e de design. Ao selecionar essa
visualizao combinada, a opo Visualizao de design na parte superior torna-se disponvel no menu Opes de visualizao.
Mostrar Visualizao de design Exibe somente a Visualizao de design na janela Documento.
Nota: se voc estiver trabalhando com XML, JavaScript, CSS ou outros tipos de arquivo baseado em cdigo, no ser possvel visualizar os
arquivos na Visualizao de design e os botes Design e Dividir estaro esmaecidos.
Visualizao dinmica Exibe uma visualizao do documento baseada no navegador, interativa e no editvel.
Vrias telas Permite visualizar a pgina do modo que ela apareceria em telas de diferentes tamanhos.
Visualizao/depurao no navegador Permite visualizar ou depurar o documento em um navegador. Selecione um navegador no menu popup.
Gerenciamento de arquivos Exibe o menu pop-up Gerenciamento de arquivos.
Validao de W3C Permite validar o documento atual ou uma tag selecionada.
Verificao de compatibilidade do navegador Permite verificar se o CSS compatvel com navegadores diferentes.
Auxlios visuais Permite usar diferentes auxlios visuais para projetar as pginas.
Atualizao de Visualizao de design Atualiza a Visualizao de design do documento aps voc ter feito alteraes na Visualizao de
cdigo. As alteraes feitas na Visualizao de cdigo no aparecem automaticamente na visualizao de Design at que voc realize certas
aes, como salvar o arquivo ou clicar neste boto.
Observao: a atualizao tambm renova os recursos de cdigo que so dependentes de DOM (Modelo de Objeto de Documento), como a
capacidade para selecionar tags de abertura ou fechamento de blocos de cdigo.
Ttulo do documento Permite inserir um ttulo para o documento, a ser exibido na barra de ttulo do navegador. Se o documento j tiver um
ttulo, esse ttulo ser exibido nesse campo.
Para o incio
A barra de ferramentas Padro contm botes para operaes comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar,
Salvar tudo, Imprimir cdigo, Cortar, Copiar, Colar, Desfazer e Refazer. Use esses botes do mesmo modo como utilizaria os comandos de menu
equivalentes.
Para o incio
Essa barra de ferramentas funciona somente se os documentos usam folhas de estilo dependentes de mdia. Por exemplo, a folha de estilo pode
especificar uma regra body para uma mdia de impresso e uma regra body diferente para dispositivos handheld. Para obter mais informaes
sobre como criar folhas de estilo dependentes de mdia, acesse o site do World Wide Web Consortium em www.w3.org/TR/CSS21/media.html.
Por padro, o Dreamweaver exibe o projeto para o tipo de mdia de tela (que mostra como uma pgina processada em uma tela de
computador). Voc pode visualizar os seguintes processamentos de tipo de mdia clicando nos respectivos botes na barra de ferramentas
Processamento do estilo.
Processamento de tipo de mdia de tela Mostra como a pgina aparece em uma tela de computador.
Processamento de tipo de mdia impressa Mostra como a pgina aparece em uma folha de papel impresso.
Processamento de tipo de mdia de bolso Mostra como a pgina aparece em um dispositivo de bolso, como um celular ou um dispositivo
BlackBerry.
Processamento de tipo de mdia de projeo Mostra como a pgina aparece em um dispositivo de projeo.
Processamento de tipo de mdia TTY Mostra como a pgina aparece em um dispositivo de teletipo.
Processamento de tipo de mdia TV Mostra como a pgina aparece em uma tela de televiso.
Como alternar exibio de CSS Styles Permite ativar ou desativar CSS Styles. Esse boto funciona independentemente de outros botes de
mdia.
Folhas de estilo em tempo de design Permite especificar uma folha de estilo em tempo de design.
Para assistir a um tutorial sobre como projetar folhas de estilo para dispositivos handheld e de impresso, consulte
www.adobe.com/go/vid0156_br.
Para o incio
A barra de ferramentas Navegao do navegador torna-se ativa na Visualizao dinmica e mostra o endereo da pgina que voc est vendo
na janela Documento. A Visualizao dinmica age como um navegador comum, desta forma, mesmo que voc navegue at um site externo ao
seu site local (por exemplo, http://www.adobe.com), o Dreamweaver carregar a pgina na janela Documento.
Barra de ferramentas de navegao do navegador (CS6. 12.1, 12.2)
Para o incio
A barra de ferramentas Codificao contm botes que permitem realizar operaes de codificao padro, como contrair e expandir selees de
cdigo, realar cdigo invlido, aplicar e remover comentrios, recuar cdigo e inserir snippets de cdigo usados recentemente. A barra de
ferramentas Codificao aparece verticalmente no lado esquerdo da janela Documento e visvel apenas quando a Visualizao de cdigo
exibida.
Barra de ferramentas de codificao (CS6. 12.1, 12.2)
No possvel desencaixar ou mover a barra de ferramentas Codificao, mas voc pode ocult-la (Visualizar > Barras de ferramentas >
Codificao).
Voc tambm pode editar a barra de ferramentas Codificao para exibir mais botes (como Quebra automtica de palavra, Mostrar caracteres
ocultos e Recuar automaticamente), ou ocultar botes que no deseja usar. No entanto, para fazer isso, voc deve editar o arquivo XML que
gera a barra de ferramentas. Para obter mais informaes, consulte Extenso do Dreamweaver.
Para o incio
A barra Status na parte inferior da janela Documento fornece informaes adicionais sobre o documento que voc est criando.
Barra de status (CS6, 12.1, 12.2)
A. Seletor de tags B. Ferramenta Selecionar C. Ferramenta Mo D. Ferramenta Zoom E. Definir ampliao F. Tamanho de celular G. Tamanho
de tablet H. Tamanho de desktop I. Tamanho da janela J. Tamanho de download / Tempo de download K. Formato de codificao
Barra de status (CC)
A. Seletor de tag B. Tamanho de celular C. Tamanho de tablet D. Tamanho de desktop E. Tamanho da janela
Seletor de tags
Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu contedo. Clique
em <body> para selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag no seletor de tags, clique com o
boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto.
Ferramenta Selecionar
Ativa e desativa a ferramenta Mo.
Ferramenta Mo
Permite clicar no documento e arrast-lo na janela Documento.
Ferramenta Zoom e menu pop-up Definir ampliao
Permite definir um nvel de ampliao para o documento.
Menu pop-up Tamanho da janela
(No disponvel na Visualizao de cdigo.) Permite redimensionar a janela Documento para dimenses pr-determinadas ou personalizadas.
Quando voc altera o tamanho da visualizao de uma pgina na visualizao de design ou dinmica, somente as dimenses da visualizao
so modificadas. O tamanho do documento permanece inalterado.
Alm de tamanhos predeterminados e personalizados, o Dreamweaver tambm enumera os tamanhos especificados em uma consulta de mdia.
Quando voc seleciona um tamanho que corresponde a uma consulta de mdia, o Dreamweaver usa a consulta de mdia para exibir a pgina.
Voc tambm pode alterar a orientao de pgina para visualizar a pgina de dispositivos mveis onde o layout da pgina alterado com base
na orientao do dispositivo.
Tamanho do documento e tempo de download
Mostra o tamanho aproximado do documento e o tempo de download estimado da pgina, incluindo todos os arquivos dependentes, como
imagens e outros arquivos de mdia.
Indicador de codificao
Mostra a codificao de texto do documento atual.
Para o incio
O Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento selecionado de pgina atual, como texto ou um
objeto inserido. O contedo do Inspetor de propriedades varia dependendo do elemento selecionado. Por exemplo, se voc selecionar uma
imagem na sua pgina, o Inspetor de propriedades mudar para mostrar as propriedades da imagem (como o caminho do arquivo para a imagem,
a largura e altura da imagem, a borda ao redor da imagem, se houver, etc).
Inspetor de propriedades (CS6, 12.1, 12.2)
O Inspetor de propriedades est na borda inferior da rea de trabalho por padro, mas voc pode desencaix-lo e torn-lo um painel flutuante na
rea de trabalho.
Para o incio
O painel Inserir contm botes para criao e insero de objetos, como tabelas, imagens e links. Os botes so organizados em vrias
categorias, que voc pode alterar selecionando a categoria desejada no menu pop-up Categoria. Categorias adicionais aparecem quando o
documento atual contm o cdigo do servidor, como documentos ASP ou CFML.
Painel Inserir (CS6, 12.1, 12.2)
Algumas categorias tm botes com menus pop-up. Ao selecionar uma opo em um menu pop-up, essa opo se transforma na ao padro
do boto. Por exemplo, se voc selecionar Alocador de espao de imagem no menu pop-up do boto Imagem, na prxima vez em que clicar no
boto Imagem, o Dreamweaver inserir um alocador de espao de imagem. Sempre que voc seleciona uma nova opo no menu pop-up, a
ao padro do boto muda.
Categoria InContext Editing Contm botes para criar pginas do InContext Editing, incluindo botes para Regies editveis, Regies
repetitivas e gerenciamento de classes CSS.
Categoria Texto Permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul.
Categoria Favoritos Permite agrupar e organizar os botes do painel Inserir que voc mais utiliza em um lugar comum.
Categorias do cdigo do servidor Disponvel somente para pginas que usam uma linguagem de servidor especfica, incluindo ASP, CFML
bsico, fluxo de CFML, CFML avanado e PHP. Cada uma dessas categorias fornece objetos de cdigo do servidor que podem ser inseridos na
Visualizao de cdigo.
Diferente dos outros painis no Dreamweaver, voc pode arrastar o painel Inserir para fora da sua posio de encaixe e solt-lo em uma posio
horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um painel para uma barra de ferramentas (embora voc no
possa ocult-lo e exibi-lo assim como faz com as outras barras de ferramentas).
Para o incio
Use o painel Arquivos para visualizar e gerenciar os arquivos no seu site do Dreamweaver.
Ao exibir os sites, os arquivos ou as pastas no painel Arquivos, voc poder alterar o tamanho da rea de visualizao e expandir ou contrair o
painel Arquivos. Quando o painel Arquivos estiver contrado, ele exibir os contedos do site local, site remoto, servidor de teste ou repositrio
SVN como uma lista de arquivos. Quando expandido, ele exibe o site local e o site remoto, o servidor de teste ou o repositrio SVN.
Para os sites do Dreamweaver, possvel tambm personalizar o painel Arquivos alterando a visualizao do site local ou remoto que aparece no
painel contrado, por padro.
(CS5.5) O painel Arquivos interage com o servidor em intervalos regulares para atualizar o contedo. Uma mensagem de erro ser exibida se
voc tentar realizar alguma ao no painel Arquivos quando essas atualizaes automticas estiverem sendo executadas. Para desativar as
atualizaes automticas, abra o menu de opes do painel Arquivos e desmarque Atualizao automtica no menu Visualizar.
Para atualizar os contedos do painel automaticamente, use o boto Atualizar no painel. No entanto, o status de check-out atual dos arquivos s
atualizado quando as atualizaes automticas esto ativadas.
Para o incio
O painel CSS Styles permite que voc controle as regras e propriedades CSS que afetam um elemento de pgina selecionado (modo Atual) ou as
regras e propriedades que afetam um documento inteiro (modo Todos). Um boto de alternncia na parte superior do painel CSS Styles permite
alternar entre esses dois modos. O painel CSS Styles tambm permite modificar as propriedades da CSS no modo Todos e no modo Atual.
Observao: o painel CSS Styles substitudo pelo painel CSS Designer na Dreamweaver CC e posterior. Consulte Painel CSS Designer para
obter mais informaes.
Painel CSS Styles (CS6, 12.1, 12.2)
Para o incio
O Dreamweaver fornece vrios tipos de guias visuais para ajudar voc a projetar documentos e a prever sua aparncia nos navegadores. Voc
pode executar qualquer um dos seguintes procedimentos:
Ajuste imediatamente a janela Documento para um tamanho de janela desejado e veja como os elementos se ajustam na pgina.
Use uma imagem de decalque como fundo da pgina para ajudar a duplicar um projeto criado em um aplicativo de ilustrao ou edio de
imagens, como o Adobe Photoshop ou o Adobe Fireworks.
Use rguas e guias para fornecer uma pista visual do posicionamento preciso e do redimensionamento dos elementos de pgina.
Use a grade para posicionamento e redimensionamento preciso dos elementos absolutamente posicionados (elementos PA).
As marcas de grade na pgina ajudam a alinhar os elementos PA e, quando o encaixe est ativado, os elementos PA se encaixam
automaticamente no ponto de grade mais prximo ao serem movidos ou redimensionados. (Outros objetos, como imagens e pargrafos, no
se encaixam na grade.) O encaixe funciona independentemente da visibilidade da grade.
Usurios do GoLive
Para o incio
Se estiver usando o GoLive e desejar voltar a trabalhar com o Dreamweaver, voc pode encontrar uma apresentao online da rea de trabalho
e do fluxo de trabalho do Dreamweaver, alm de maneiras para migrar seus sites para o Dreamweaver.
Trabalho na janela Documento
Sobre a visualizao dinmica
Informaes gerais sobre a codificao no Dreamweaver
Visualizar pginas na visualizao dinmica
Definio das preferncias de codificao
Exibir e editar contedo do ttulo
Uso de auxlios visuais para layout
Visualizao de pginas no Dreamweaver
Inserir cdigo com a barra de tarefas Codificao
Definir tamanho da janela e velocidade da conexo
Mais zoom e menos zoom
Redimensionar a janela Documento
Definir tempo de download e preferncias de tamanho
Gerenciar janelas e painis
Use o inspetor de propriedades
Uso do painel Inserir
Trabalhar com arquivos no painel de arquivos
Uso de auxlios visuais para layout
Tutorial do Dreamweaver para usurios do GoLive
Recolhimento de cdigo
Sobre o recolhimento de cdigo
Recolhimento e expanso de fragmentos de cdigo
Colagem e movimentao de fragmentos de cdigo recolhidos
Para o incio
Voc pode recolher e expandir fragmentos de cdigo para que possa visualizar diferentes sees do documento sem precisar usar a barra de
rolagem. Por exemplo, para ver todas as regras CSS na tag head que se aplica a uma tag div mais abaixo na pgina, recolha tudo o que estiver
entre as tags head e div, a fim de que voc possa ver as duas sees de cdigo simultaneamente. Embora voc possa selecionar fragmentos de
cdigo fazendo selees na Visualizao de design ou Visualizao de cdigo, recolha o cdigo apenas na Visualizao de cdigo.
Nota: Os arquivos criados nos modelos do Dreamweaver exibem todos os cdigos como totalmente expandidos, mesmo se o arquivo de modelo
(.dwt) contiver fragmentos de cdigo recolhidos.
Para o incio
Quando voc seleciona um cdigo, um conjunto de botes de recolhimento exibido ao lado da seleo (smbolos de menos no Windows,
tringulos verticais no Macintosh). Clique nos botes para recolher e expandir a seleo. Quando o cdigo recolhido, os botes de recolhimento
se transformam em boto de expanso (um boto de mais no Windows; um tringulo horizontal no Macintosh).
s vezes, o fragmento exato do cdigo selecionado no recolhido. O Dreamweaver usa o recolhimento inteligente para recolher a seleo
mais comum e visualmente satisfatria. Por exemplo, se voc selecionou uma tag recuada e, em seguida, selecionou os espaos recuados antes
da tag tambm, o Dreamweaver no recolher os espaos recuados, pois a maioria dos usurios esperar que seus recuos sejam preservados.
Para desativar o recolhimento inteligente e forar o Dreamweaver a recolher exatamente o que voc selecionou, mantenha pressionada a tecla
Control antes de recolher o cdigo.
Alm disso, um cone de aviso nos fragmentos de cdigo recolhidos ser exibido se um fragmento contiver erros ou cdigo incompatvel com
determinados navegadores.
Voc tambm pode recolher o cdigo mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh)
enquanto clica em um dos botes de recolhimento, ou clicando no boto Recolher seleo na Barra de ferramentas de codificao.
1. Selecione algum cdigo.
2. Selecione Editar > Recolhimento de cdigo e selecione qualquer uma das opes.
Windows
Macintosh
Recolher seleo
Control+Shift+C
Command+Shift+C
Control+Alt+C
Command+Alt+C
Expandir seleo
Control+Shift+E
Command+Shift+E
Control+Shift+J
Command+Shift+J
Control+Alt+J
Command+Alt+J
Expandir tudo
Control+Alt+E
Command+Alt+E
Para o incio
Para o incio
possvel criar um espao de trabalho personalizado movendo e manipulando janelas de Documento e painis. Tambm possvel salvar
espaos de trabalho e alternar entre eles. No Fireworks, renomear reas de trabalho personalizadas pode levar a um comportamento inesperado.
Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A rea de trabalho funciona da mesma forma em todos os produtos.
Movimentao de painis
Ao mover painis, voc visualizar zonas para soltar realadas em azul, que so reas nas quais possvel mover o painel. Por exemplo,
possvel mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona para soltar azul estreita, acima ou abaixo de outro
painel. Se for arrastado para uma rea que no uma zona para soltar, o painel flutuar livremente na rea de trabalho.
Nota: A posio do mouse (ao invs da posio do painel), ativa a rea de destino. Se no puder visualizar a rea de destino, tente arrastar o
mouse para o lugar onde ela deveria estar.
A zona para soltar azul estreita indica que o painel Cor ser encaixado acima do grupo de painis Camadas.
A. Barra de ttulo B. Guia C. Zona para soltar
Pressione Ctrl (Windows) ou Command (Mac OS) enquanto estiver movendo um painel para no encaix-lo. Pressione Esc enquanto estiver
movendo o painel para cancelar a operao.
Redimensionamento de painis
Para minimizar ou maximizar um painel, grupo de painis ou pilha de painis, clique duas vezes na guia. Voc tambm pode clicar duas
vezes na rea da guia (no espao vazio prximo s guias).
Para redimensionar um painel, arraste qualquer lado do painel. Alguns painis, como o painel Cor no Photoshop, no podem ser
redimensionados arrastando-os.
Para o incio
Salvando o tamanho e a posio atuais dos painis como uma rea de trabalho nomeado, possvel restaurar essa rea de trabalho, caso voc
mova ou feche um painel. Os nomes dos espaos de trabalho salvos aparecem no alternador de espaos de trabalho na Barra de aplicativos.
(Dreamweaver) Escolha Janela > Layout da rea de Trabalho > Nova rea de Trabalho.
(Flash) Escolha Nova rea de Trabalho no alternador de reas de trabalho na Barra de aplicativos.
(Fireworks) Escolha Salvar atual no alternador de reas de trabalho na Barra de aplicativos.
2. Digite um nome para a rea de trabalho.
3. (Photoshop, InDesign) Em Capturar, selecione uma ou mais opes:
Localizaes do painel Salva as localizaes atuais do painel. (somente no InDesign)
Atalhos de teclado Salva o conjunto atual de atalhos do teclado (somente para Photoshop).
Menus ou Personalizao do menu Salva o conjunto atual de menus.
Para o incio
Voc pode visualizar vrios documentos em uma nica janela usando abas para identificar cada um. Voc tambm pode exibi-los como parte de
uma rea de trabalho flutuante, na qual cada documento aparece em sua prpria janela.
documentos abertos depois da seleo de uma nova preferncia so exibidos de acordo com a preferncia selecionada.
Para o incio
Por padro, o Dreamweaver CS4 e posterior usa cones em preto e branco que se tornam coloridos quando voc passa o mouse sobre eles.
Voc pode deixar os cones coloridos ativados de modo permanente, para que no seja necessrio passar o mouse sobre eles.
Siga um destes procedimentos:
Selecione Exibir > cones coloridos.
Alterne para a rea de trabalho Clssico ou Codificador.
Para desativar novamente os cones coloridos, desmarque cones coloridos no menu Exibir ou alterne para uma rea de trabalho diferente.
Para o incio
A tela de boas-vindas aparece quando voc inicia o Dreamweaver e a qualquer momento quando no h nenhum documento aberto. Voc pode
optar por ocultar a tela de boas-vindas e exibi-la novamente mais tarde. Quando a tela de boas-vindas est oculta e nenhum documento est
aberto, a janela Documento fica em branco.
Para o incio
Voc pode personalizar o Dreamweaver de acordo com suas necessidades, mesmo em um sistema operacional de vrios usurios como o
Windows XP ou o Mac OS X.
O Dreamweaver impede que a configurao personalizada de um usurio afete a configurao personalizada de outro usurio. Para fazer isso, na
primeira vez em que executado em um dos sistemas operacionais de vrios usurios compatveis, o Dreamweaver cria cpias de diversos
arquivos de configurao. Esses arquivos de configurao de usurio so armazenados em uma pasta que pertence a voc.
Por exemplo, no Windows XP, eles so armazenados em C:\Documents and Settings\nome de usurio\Dados de
aplicativo\Adobe\Dreamweaver\pt_BR\Configuration, que est oculta por padro. Para exibir arquivos e pastas ocultos, selecione Ferramentas >
Opes de pasta no Windows Explorer, clique na aba Exibir e selecione a opo Mostrar arquivos e pastas.
No Windows Vista, eles so armazenados em C:\Users\nome de usurio\AppData\Roaming\Adobe\Dreamweaver \pt_BR\Configuration, pasta que
fica oculta por padro. Para exibir arquivos e pastas ocultos, selecione Ferramentas > Opes de pasta no Windows Explorer, clique na aba
Exibir e selecione a opo Mostrar arquivos e pastas.
No Mac OS X, eles so armazenados na pasta Home; especificamente, em Users/nome de usurio/Library/Application
Support/Adobe/Dreamweaver 9/Configuration.
Se o Dreamweaver for reinstalado ou atualizado, o Dreamweaver far cpias de backup automaticamente dos arquivos de configurao de
usurio existente, de modo que se esses arquivos tiverem sido personalizados manualmente, voc ainda ter acesso s alteraes feitas.
Para o incio
JavaScript). O Dreamweaver exibe um boto para cada arquivo relacionado na parte superior do documento e abre o arquivo quando se
clica no boto.
Identificar Arquivos rel. dinamicamente Permite que voc selecione se os Arquivos rel. dinamicamente sero exibidos automaticamente
na barra de ferramentas de Arquivos relacionados ou aps interao manual. Tambm possvel desabilitar a identificao de Arquivos rel.
dinamicamente.
Atualizar links ao mover arquivos Determina o que acontece ao mover, renomear ou excluir um documento do seu site. Defina essa
preferncia para atualizar sempre os links automaticamente, para nunca atualizar os links ou para perguntar antes de atualizar. Consulte
Atualizar links automaticamente.
Mostrar caixa de dilogo ao inserir objetos Determina se o Dreamweaver deve perguntar para incluir informaes adicionais ao inserir
imagens, tabelas, filmes do Shockwave e alguns outros objetos usando o painel ou o menu Inserir. Se essa opo estiver desativada, a
caixa de dilogo no aparecer e voc dever usar o Inspetor de propriedades para especificar o arquivo de origem de imagens, o nmero
de linhas de uma tabela, etc. Para imagens de sobreposio e HTML do Fireworks, uma caixa de dilogo sempre aparece quando voc
insere o objeto, independentemente da configurao dessa opo. Para substituir temporariamente essa configurao, clique com a tecla
Control (Windows) ou a tecla Command (Macintosh) pressionada ao criar e inserir objetos.
Ativar entrada inline de bytes duplos Permite inserir textos de bytes duplos diretamente na janela Documento se estiver usando um
ambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como os caracteres japoneses). Quando essa
opo no est selecionada, uma janela de entrada de texto aparece para a insero e a converso de textos de bytes duplos; o texto
exibido na janela Documento depois de ser aceito.
Alternar para pargrafo simples aps cabealho Especifica que pressionar Enter (Windows) ou Return (Macintosh) no final de um
pargrafo de cabealho na Visualizao de design cria um novo pargrafo com uma tag p no incio e no final. Um pargrafo de cabealho
tem uma tag de cabealho, como h1 ou h2, no incio e no final do pargrafo. Quando essa opo est desativada, pressionar Enter ou
Return no final de um pargrafo de cabealho cria um novo pargrafo com a mesma tag de cabealho (permitindo que voc digite vrios
cabealhos em uma linha e, em seguida, volte para preencher os detalhes).
Permitir vrios espaos consecutivos Especifica que digitar dois ou mais espaos na Visualizao de design cria espaos consecutivos
que aparecem como vrios espaos no navegador. Por exemplo, voc pode digitar dois espaos entre sentenas, como faria em uma
mquina de escrever. Essa opo foi desenvolvida principalmente para pessoas que esto acostumadas a digitar em editores de texto.
Quando essa opo est desativada, vrios espaos so tratados como um nico espao (porque os navegadores tratam vrios espaos
como espaos nicos).
Usar <strong> e <em> em vez de <b> e <i> Especifica que o Dreamweaver aplica a tag strong sempre que voc executa uma ao que
normalmente aplicaria a tag b e aplica a tag em sempre que voc executa uma ao que normalmente aplicaria a tag i. Essas aes
incluem o clique nos botes Negrito ou Itlico no Inspetor de propriedades de texto, no modo HTML, e a seleo de Formatar > Estilo >
Negrito ou Formatar > Estilo > Itlico. Para usar as tags b e i nos documentos, desmarque essa opo.
Nota: O World Wide Web Consortium no recomenda o uso das tags b e i; as tags strong e em fornecem informaes mais semnticas do
que as tags b e i.
Avisar ao incluir regies editveis entre tags <p> ou <h1> - <h6> Especifica se uma mensagem de aviso deve ser exibida sempre que
um modelo do Dreamweaver com uma regio editvel em uma tag de pargrafo ou de cabealho for salvo. A mensagem informa que os
usurios no podero criar mais pargrafos na regio. A opo est ativada por padro.
Centralizao Especifica se voc deseja centralizar elementos usando a tag divalign="center" ou center ao clicar no boto Alinhar ao
centro, no Inspetor de propriedades.
Nota: Esses dois mtodos de centralizao foram oficialmente reprovados na especificao do HTML 4.01; voc deve usar estilos CSS
para centralizar textos. Os dois mtodos ainda so tecnicamente vlidos de acordo com a especificao do XHTML 1.0 Transitional, mas
no so mais vlidos na especificao do XHTML 1.0 Strict.
Nmero mximo de etapas do histrico Determina o nmero de etapas que o painel Histrico preserva e mostra. (O valor padro deve
ser suficiente para a maioria dos usurios.) Se voc ultrapassar o nmero definido de etapas no painel Histrico, as etapas mais antigas
sero descartadas.
Para obter mais informaes, consulte Automao de tarefa.
Dicionrio de ortografia Lista os dicionrios de ortografia disponveis. Se um dicionrio tiver vrios dialetos ou convenes de ortografia
(como ingls americano e ingls britnico), os dialetos sero listados separadamente no menu pop-up Dicionrio.
Para o incio
A codificao de um documento determina sua aparncia no navegador. As preferncias de fonte do Dreamweaver permitem visualizar uma
determinada codificao na fonte e no tamanho que voc preferir. Entretanto, as fontes que voc selecionar na caixa de dilogo Preferncias de
fontes afetam somente a forma que as fontes aparecem no Dreamweaver; elas no afetam a forma que o documento aparece no navegador de
um visitante. Para alterar a forma que as fontes aparecem em um navegador, voc precisa alterar o texto usando o Inspetor de propriedades ou
aplicando uma regra de CSS.
Para obter informaes sobre a configurao de uma codificao padro de novos documentos, consulte Criao e abertura de documentos.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
Para o incio
Use as preferncias de realce para personalizar as cores que identificam regies de modelo, itens de biblioteca, tags de terceiros, elementos de
layout e cdigos no Dreamweaver.
Para o incio
Ligaes
Comportamentos de servidor
Bancos de dados
Componentes
Painel Ligaes
Para o incio
Use o painel Ligaes para definir e editar fontes de contedo dinmico, adicionar contedo dinmico a uma pgina e aplicar formatos de dados
a texto dinmico.
Voc pode realizar as seguintes tarefas com esse painel:
Definio de origens de contedo dinmico
Adio de contedo dinmico a pginas
Alterar ou excluir fontes de contedo
Usar formatos de dados predefinidos
Anexar fontes de dados XML
Exibir dados XML em pginas XSLT
Parmetros de URL
Definir variveis de sesso
Definir variveis de aplicativo para o ASP e o ColdFusion
Definir variveis de servidor
Colocar em cache fontes de contedo
Copiar um conjunto de registros de uma pgina para outra
Tornar os atributos de HTML dinmicos
Para o incio
Use o painel Comportamentos de servidor para adicionar os comportamentos de servidor do Dreamweaver a uma pgina, editar outros e cri-los.
Voc pode realizar as seguintes tarefas com esse painel:
Exibio de registros de banco de dados
Definio de origens de contedo dinmico
Criar pginas mestre e detalhadas em uma operao
Criao de pginas de pesquisa e de resultados
Criao de pginas para insero de registro
Criao de uma pgina de registro de atualizao
Criao de uma pgina de registro de excluso
Criao de uma pgina que apenas usurios autorizados podem acessar
Criao de uma pgina de registro
Criao de uma pgina de logon
Criao de uma pgina que apenas usurios autorizados podem acessar
Adicionar um procedimento armazenado (ColdFusion)
Excluir contedo dinmico
Adio de comportamentos de servidor personalizados
Para o incio
Use o painel Bancos de dados para criar conexes de banco de dados, inspecionar bancos de dados e inserir cdigo relacionado a banco de
dados nas pginas.
Voc pode exibir e se conectar ao banco de dados com esse painel:
Exibir o banco de dados dentro do Dreamweaver
Conexes de banco de dados para desenvolvedores do ColdFusion
Conexes de banco de dados para desenvolvedores do ASP
Conexes de banco de dados para desenvolvedores do PHP
Painel Componentes
Use o painel Componentes para criar e inspecionar componentes, alm de inserir cdigo de componente nas pginas.
Nota: O painel no funciona na Visualizao de design.
Voc pode realizar as seguintes tarefas com esse painel:
Uso de componentes do ColdFusion
Para o incio
Para o incio
Clique no cone "+" correspondente a essas propriedades. Use as opes no painel pop-up para aplicar a propriedade.
Para o incio
Propriedades CSS3 como sombra do texto suportam vrios conjuntos de valores. Por exemplo: sombra do texto: 3px 3px #000,-3px-3px #0f0;
Quando voc especifica vrios conjuntos de valores na visualizao de cdigo e abre o painel pop-up de edio, apenas o primeiro conjunto de
valores exibido. Se voc editar esse conjunto de valores no painel pop-up, apenas o primeiro conjunto de valores no cdigo ser afetado. Os
outros conjuntos de valores no so afetados e so aplicados conforme especificado no cdigo.
Para o incio
Na exibio de Categoria, a sombra do texto listada abaixo da categoria Fonte. A sombra da caixa, o raio da borda e a imagem da borda so
listados abaixo da categoria Borda.
Para o incio
O Dreamweaver CS 5.5 tambm suporta implementaes especficas de navegador (webkit, Mozilla) nas propriedades sombra da caixa, raio da
borda e imagem da borda.
Na exibio de Categoria, use as opes abaixo da respetiva categoria do navegador para verificar a compatibilidade do navegador para essas
propriedades. Por exemplo, para estar de acordo com a implementao do Mozilla da propriedade de imagem da borda, edite -moz-border-image
na categoria do Mozilla.
Para o incio
As alteraes feitas nas propriedades CSS no so exibidas na Visualizao de design. Mude para a Visualizao dinmica para visualizar as
alteraes. Voc tambm pode fazer edies rpidas nas propriedades CSS3 na Visualizao dinmica, e as alteraes refletiro de forma
imediata nessa visualizao.
As seguintes propriedades CSS3 tm suporte na Visualizao dinmica:
sombra do texto
raio da borda
-webkit-box-shadow
-webkit-border-image
Adobe recomenda
Para o incio
Selecione a categoria Dados no menu pop-up Categoria do painel Inserir para exibir um conjunto de botes que permitem adicionar contedo
dinmico e comportamentos de servidor sua pgina.
O nmero e o tipo de botes exibidos variam de acordo com o tipo de documento aberto na janela Documento. Mova o mouse sobre um cone
para exibir uma dica de ferramenta que descreve o que o boto faz.
O painel Inserir inclui botes para adicionar os seguintes itens pgina:
Conjuntos de registros
Texto dinmico ou tabelas
Barras para navegao em registros
Caso voc alterne para a Visualizao de cdigo (Exibir > Cdigo), painis adicionais podero ser exibidos na prpria categoria painel
Inserir, o que permite inserir cdigo na pgina. Por exemplo, caso voc veja uma pgina do ColdFusion na Visualizao de cdigo, um
painel CFML disponibilizado na categoria CFML do painel Inserir.
Vrios painis oferecem forma de criar pginas dinmicas:
Selecione o painel Ligaes (Janela > Ligaes) a fim de definir fontes de contedo dinmico para a pgina e adicionar o contedo
pgina.
Selecione o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para adicionar lgica do servidor a pginas
dinmicas.
Selecione o painel Bancos de dados (Janela >Bancos de dados) para explorar bancos de dados ou criar conexes de banco de dados.
Selecione o painel Componentes (Janela > Componentes) para inspecionar, adicionar ou modificar os cdigos dos componentes do
ColdFusion.
Nota: O painel Componentes s ativado quando se abre uma pgina do ColdFusion.
Um comportamento de servidor o conjunto de instrues inserido em uma pgina dinmica durante o design e executado no servidor
durante o runtime.
Para obter um tutorial sobre a configurao da rea de trabalho de desenvolvimento, consulte www.adobe.com/go/vid0144_br.
Para o incio
Depois de se conectar ao banco de dados, voc pode exibir a estrutura e os dados dentro do Dreamweaver.
1. Abra o painel Bancos de dados (Janela > Bancos de dados).
O painel Bancos de dados exibe todos os bancos de dados para os quais voc criou conexes. Caso voc esteja desenvolvendo um site
do ColdFusion, o painel exibe todos os bancos de dados que tm fontes de dados definidas no Administrador do ColdFusion.
Nota: O Dreamweaver procura o site atual no servidor do ColdFusion que voc definiu.
Caso nenhum banco de dados seja exibido no painel, voc deve criar uma conexo de banco de dados.
2. Para exibir as tabelas, os procedimentos armazenados e as visualizaes no banco de dados, clique no sinal de adio (+) ao lado de uma
conexo na lista.
3. Para exibir as colunas da tabela, clique no nome de uma tabela.
Os cones da coluna refletem o tipo de dados e indicam a chave primria da tabela.
4. Para exibir os dados de uma tabela, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control pressionada
Para o incio
Os desenvolvedores de aplicativo da Web costumam depurar as pginas clicando nelas normalmente em um navegador da Web. Voc pode
exibir rapidamente pginas dinmicas em um navegador sem carreg-las inicialmente em um servidor (pressione F12).
Para visualizar pginas dinmicas, preencha a categoria Servidor de teste da caixa de dilogo Definio de sites.
Voc pode especificar que o Dreamweaver usa arquivos temporrios, e no os arquivos originais. Com essa opo, o Dreamweaver executa uma
cpia temporria da pgina em um servidor Web antes de exibi-la no navegador. (Em seguida, o Dreamweaver exclui o arquivo temporrio do
servidor.) Para definir essa opo, selecione Editar > Preferncias > Visualizar no navegador.
A opo Visualizar no navegador no carrega pginas relacionadas como, por exemplo, uma pgina de resultados ou detalhada, arquivos
dependentes como arquivos de imagem ou incluses do servidor. Para carregar um arquivo no encontrado, selecione Janela > Site para abrir o
painel Site, escolha o arquivo em Pasta local e clique na seta para cima azul na barra de ferramentas a fim de copiar o arquivo para a pasta do
servidor Web.
Para o incio
Usurios avanados de sistemas de bancos de dados grandes como o Oracle devem restringir o nmero de itens de banco de dados
recuperados e exibidos pelo Dreamweaver durante o design. Um banco de dados Oracle pode conter itens que o Dreamweaver no pode
processar durante o design. Voc pode criar um esquema no Oracle e us-lo no Dreamweaver para filtrar itens desnecessrios durante o design.
Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
Outros usurios podem aproveitar a restrio da quantidade de informaes que o Dreamweaver recupera durante o design. Alguns bancos de
dados contm dezenas ou mesmo centenas de tabelas, e talvez voc prefira no listar todas elas enquanto trabalha. Um esquema ou catlogo
pode restringir o nmero de itens de banco de dados recuperados durante o design.
Voc deve criar um esquema ou catlogo no sistema de banco de dados para poder aplic-lo no Dreamweaver. Consulte a documentao do
sistema de banco de dados ou o administrador do sistema.
Nota: Voc no pode aplicar um esquema ou catlogo no Dreamweaver caso esteja desenvolvendo um aplicativo do ColdFusion ou usando o
Microsoft Access.
1. Abra uma pgina dinmica no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).
Caso haja uma conexo de banco de dados, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control
pressionada (Macintosh) na lista e selecione Editar conexo no menu pop-up.
Caso a conexo no exista, clique no boto de adio (+) na parte superior do painel e a crie.
2. Na caixa de dilogo da conexo, clique em Avanado.
3. Especifique o esquema ou o catlogo e clique em OK.
Para o incio
Modifique o procedimento armazenado selecionado. As opes disponveis variam de acordo com a tecnologia do servidor.
Edite todas as opes. Quando voc seleciona uma nova opo no inspetor, o Dreamweaver atualiza a pgina.
Opes de Entrada
Para o incio
O Inspetor de propriedades exibido quando o Dreamweaver encontra um tipo de entrada no reconhecido. Esse erro normalmente ocorre por
conta de uma digitao ou de outro erro na entrada dos dados.
Caso voc altere o tipo de campo no Inspetor de propriedades para um valor que o Dreamweaver reconhece por exemplo, caso voc corrija o
erro ortogrfico , o Inspetor de propriedades atualizado para mostrar as propriedades do tipo reconhecido. Defina qualquer uma das seguintes
opes no Inspetor de propriedades:
Entrada Atribui um nome ao campo. Essa caixa obrigatria, e o nome deve ser exclusivo.
Tipo Define o tipo de entrada do campo. O contedo da caixa reflete o valor do tipo de entrada exibido atualmente no cdigo-fonte HTML.
Valor Define o valor do campo.
Parmetros Abre a caixa de dilogo Parmetros para que voc possa exibir os atributos atuais do campo, bem como adicionar ou remover
atributos.
Mais tpicos da Ajuda
Tutorial da rea de trabalho de desenvolvimento
Configurar um servidor de teste
Para o incio
Voc pode definir as preferncias de codificao como formatao e cores de cdigo, entre outros, para atender s suas necessidades
especficas.
Nota: Para definir preferncias avanadas, use o Editor de bibliotecas de tags (consulte Gerenciamento de bibliotecas de tags).
Para o incio
Voc pode definir a quebra automtica de linha, exibir nmeros de linha para o cdigo, realar o cdigo invlido, definir a cor da sintaxe dos
elementos de cdigo, definir o recuo e exibir caracteres ocultos no menu Exibir > Opes de visualizao de cdigo.
1. Visualize um documento na Visualizao de cdigo ou no Inspetor de cdigo.
2. Siga um destes procedimentos:
Selecione Exibir > Opes de visualizao de cdigo
Clique no boto Opes de visualizao
cdigo.
Para o incio
Voc pode alterar a aparncia do cdigo especificando preferncias de formatao, como recuo, tamanho da linha e uso de
maisculas/minsculas dos nomes de tag e atributo.
Todas as opes de formatao de cdigo, exceto a opo Ignorar maiscula/minscula de, sero aplicadas somente aos novos documentos ou
s adies a documentos criadas subsequentemente.
Para reformatar documentos HTML existentes, abra o documento e selecione Comandos > Aplicar Formatao de Origem.
1. Selecione Editar > Preferncias.
2. Selecione Formato do Cdigo na lista Categoria esquerda.
3. Defina uma das seguintes opes:
Recuo Indica se o cdigo gerado pelo Dreamweaver deve ser recuado (de acordo com as regras de recuo especificadas nessas
preferncias) ou no.
Nota: A maioria das opes de recuo nesta caixa de dilogo se aplica somente ao cdigo gerado pelo Dreamweaver, e no ao cdigo
digitado. Para fazer com que cada nova linha do cdigo digitado recue no mesmo nvel da linha anterior, selecione a opo Exibir > Recuo
automtico das opes de visualizao de cdigo. Para obter mais informaes, consulte Definio da aparncia do cdigo.
Com (Caixa de texto e menu pop-up) Especifica quantos espaos ou tabulaes o Dreamweaver deve usar para recuar o cdigo gerado.
Por exemplo, se voc digitar 3 na caixa e selecionar Tabulaes no menu pop-up, o cdigo gerado pelo Dreamweaver ser recuado por
meio de trs caracteres de tabulao para cada nvel de recuo.
Tamanho da tabulao Determina o tamanho de cada caractere de tabulao na Visualizao de cdigo. Por exemplo, se a opo
Tamanho da tabulao for definida como 4, cada tabulao ser exibida na Visualizao de cdigo como um espao em branco de quatro
caracteres. Se, alm disso, a opo Recuar com for definida como 3 Tabulaes, o cdigo gerado pelo Dreamweaver ser recuado usando
trs caracteres de tabulao para cada nvel de recuo, que aparece na Visualizao de cdigo como um espao em branco de doze
caracteres.
Nota: O Dreamweaver aplica o recuo usando espaos ou tabulaes. Ele no converte uma srie de espaos em uma tabulao ao inserir
cdigo.
Tipo de quebra de linha Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site remoto. A escolha do tipo
corretor de caracteres de quebra de linha garante que o cdigo-fonte HTML aparecer corretamente quando visualizado no servidor
remoto. Essa configurao tambm ser til que voc estiver trabalhando com um editor de texto externo que reconhea determinados
tipos de quebras de linha. Por exemplo, use CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o
SimpleText for o editor externo.
Nota: No caso dos servidores conectados atravs do FTP, esta opo se aplica somente ao modo de transferncia binrio. O modo de
transferncia ASCII do Dreamweaver ignora esta opo. Se voc baixar os arquivos usando o modo ASCII, o Dreamweaver definir as
quebras de linha com base no sistema operacional do seu computador. Se voc carregar os arquivos usando o modo ASCII, as quebras de
linha sero definidas como CR LF.
Padro de maisc./minsc. da tag e Padro de maisc./minsc. do atributo Controla o uso de maisculas/minsculas dos nomes de
tag e atributo. Estas opes se aplicam a tags e atributos inseridos ou editados na Visualizao de design, mas no se aplicam a tags e
atributos digitados diretamente na Visualizao de cdigo ou a tags e atributos j presentes em um documento quando estes so abertos (a
menos que voc tambm selecione uma ou ambas as opes Ignorar maiscula/minscula de:).
Nota: Essas preferncias se aplicam somente a pginas HTML. O Dreamweaver as ignora em pginas XHTML porque as tags e os
atributos em maisculas so XHTML invlidos.
Ignorar maiscula/minscula de: Tags e Atributos Especifica se as opes de maisculas/minsculas especificadas sero sempre
foradas, inclusive quando voc abrir um documento HTML existente. Quando voc selecionar uma dessas opes e clicar em OK para
ignorar a caixa de dilogo, todas as tags ou atributos do documento atual sero imediatamente convertidos no uso de
maisculas/minsculas especificado, assim como todas as tags ou atributos de cada documento que voc abrir desse momento em diante
(at voc desmarcar esta opo novamente). As tags ou os atributos digitados na Visualizao de cdigo e no Quick Tag Editor tambm
so convertidos no uso de maisculas/minsculas, bem como as tags ou os atributos que voc insere usando o painel Inserir. Por exemplo,
se voc deseja que os nomes de tag sejam sempre convertidos em minsculas, especifique minsculas na opo Padro de
maisc./minsc. da tag e selecione a opo Ignorar maiscula/minscula de: Tags. Quando voc abrir um documento que contenha nomes
de tag em maisculas, o Dreamweaver os converter em minsculas.
Nota: As verses antigas do HTML permitiam nomes de tag e atributo em maisculas ou minsculas, mas o XHTML requer minsculas
nos nomes de tag e atributo. A Web est adotando XHTML; portanto, geralmente melhor usar nomes de tag e atributo em minsculas.
Tag TD: No incluir quebra de linha na tag TD Lida com um problema de processamento que ocorre em alguns navegadores antigos
quando h espao em branco ou quebras de linha imediatamente aps uma tag <td> ou imediatamente antes de uma tag </td>. Quando
voc seleciona esta opo, o Dreamweaver no grava quebras de linha depois ou antes da tag <td>, mesmo se a formatao na Biblioteca
de tags indicar que a quebra de linha deve existir.
Formatao avanada Permite definir opes de formatao do cdigo Folhas de estilo em cascata (CSS) e das tags e atributos
individuais no Editor de biblioteca de tags.
Caractere de espao em branco (Apenas verso em japons) Permite selecionar ou espao Zenkaku para cdigo HTML. O espao em
branco selecionado nesta opo ser usado para tags vazias durante a criao de uma tabela e quando a opo Permitir vrios espaos
consecutivos estiver ativada nas pginas de codificao em japons.
Para o incio
Use as preferncias de regravao de cdigo a fim de especificar como e se o Dreamweaver modificar o cdigo enquanto os documentos so
abertos, ao copiar e colar elementos de formulrio, e ao digitar valores de atributo e URLs usando ferramentas como o Inspetor de propriedades.
Essas preferncia no tm efeito quando voc edita HTML ou scripts na Visualizao de cdigo.
Se voc desativar as opes de regravao, os itens de markup invlidos sero exibidos na janela Documento para o HTML que seria regravado.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Regravao de cdigo na lista Categoria esquerda.
3. Defina uma das seguintes opes:
Corrigir tags abertas e aninhadas incorretamente Regrava tags de sobreposio. Por exemplo, <b><i>texto</b></i> regravado como
<b><i>texto</i></b>. Esta opo tambm insere aspas e colchetes de fechamento caso eles estejam ausentes.
Renomear itens de formulrio ao colar Garante que voc no ter nomes duplicados de objetos de formulrio. Esta opo ativada por
padro.
Nota: Diferente das outras opes nesta caixa de dilogo de preferncia, esta opo no se aplica quando voc abre um documento, mas
somente quando voc copia e cola um elemento de formulrio.
Remover tags de finalizao adicionais Exclui tags de finalizao que no possuem uma tag de abertura correspondente.
Avisar ao corrigir ou remover tags Exibe um resumo do HTML tecnicamente invlido que o Dreamweaver tentou corrigir. O resumo
indica o local do problema (usando nmeros de linha e coluna) para que voc possa localizar a correo e garantir que ela est sendo
processado conforme esperado.
Nunca regravar cdigo: Em arquivos com extenses Impede que o Dreamweaver regrave cdigo em arquivos com as extenses
especificadas. Esta opo particularmente til para arquivos que contenham tags de terceiros.
Codificar <, >, & e " em valores de atributo usando & Garante que os valores de atributo digitados ou editados usando ferramentas do
Dreamweaver como o Inspetor de propriedades contero apenas caracteres legais. Esta opo ativada por padro.
Nota: Esta opo e as seguintes no se aplicam s URLs digitadas na Visualizao de cdigo. Alm disso, elas no ocasionam a
alterao do cdigo j existente em um arquivo.
No codificar caracteres especiais Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais. Esta opo
ativada por padro.
Codificar caracteres especiais em URLs utilizando &# Garante que, ao digitar ou editar URLs usando ferramentas do Dreamweaver
como o Inspetor de propriedades, essas URLs contero somente caracteres legais.
Codificar caracteres especiais em URLs utilizando % Opera da mesma maneira que a opo anterior, mas usa um mtodo diferente de
codificao de caracteres especiais. Esse mtodo de codificao (atravs do sinal de porcentagem) pode ser mais compatvel com os
navegadores antigos, mas no funciona bem com os caracteres de alguns idiomas.
Para o incio
Use as preferncias de codificao por cor a fim de especificar cores para as categorias gerais de tags e elementos de cdigo, como tags
relacionadas a formulrio ou identificadores JavaScript. Para definir preferncias de cor para uma tag especfica, edite a definio da tag no
Editor de bibliotecas de tags.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Codificao por cores na lista Categoria esquerda.
3. Selecione um tipo de documento da lista Tipos de documentos. Quaisquer edies que voc fizer s preferncias de codificao por cores
afetar todos os documentos desse tipo.
4. Clique no boto Editar esquema de cores.
5. Na caixa de dilogo Editar esquema de cores, selecione um elemento de cdigo na lista Estilos para e defina a cor do texto, a cor do fundo
e (opcional) o estilo (negrito, itlico ou sublinhado). O cdigo de amostra no painel de visualizao alterado para que corresponda s
novas cores e estilos.
Clique em OK para salvar as alteraes e feche a caixa de dilogo Editar esquema de cores.
6. Faa quaisquer outras selees necessrias nas preferncias de codificao por cores e clique em OK.
Fundo padro define a cor de fundo padro para a Visualizao de cdigo e o Inspetor de cdigo.
Caracteres ocultos define a cor dos caracteres ocultos
Plano de fundo do Cdigo ativo define a cor do fundo para a Visualizao de cdigo ativo. A cor padro amarelo.
Alteraes no Cdigo ativo define a cor de destaque do cdigo que alterado na Visualizao de cdigo ativo. A cor padro rosa.
Plano de fundo de somente leitura define a cor de fundo para o texto somente leitura.
Para o incio
Voc pode especificar um editor externo para a edio de arquivos com extenses especficas. Por exemplo, possvel iniciar um editor de texto
como BBEdit, Bloco de Notas ou TextEdit no Dreamweaver a fim de editar arquivos JavaScript (JS).
Voc pode atribuir editores externos diferentes para extenses diferentes.
Para o incio
Voc pode adaptar o ambiente de codificao no Dreamweaver para que atenda s suas necessidades de trabalho. Por exemplo, voc pode
alterar o modo de exibio do cdigo, configurar atalhos de teclado diferentes ou importar e usar sua biblioteca de tags favorita.
O Dreamweaver vem com vrios layouts de reas de trabalho desenvolvidos para obter a experincia de codificao ideal. No alternador de rea
de trabalho da Barra de aplicativos, voc pode selecionar as reas de trabalho Desenvolvedor de aplicativo, Desenvolvedor de aplicativo Plus,
Codificador e reas de trabalho do Codificador Plus. Todas essas reas de trabalho mostram, por padro, a Visualizao de cdigo (na janela
Documento inteira ou nas visualizaes de cdigo e de design) e tm painis encaixados no lado esquerdo da tela. Todos, menos o
Desenvolvedor de aplicativo Plus, eliminam o Inspetor de propriedades da visualizao padro.
Se nenhuma das reas de trabalho predefinidas oferecer exatamente o que voc precisa, possvel personalizar seu prprio layout de rea de
trabalho, abrindo e encaixando painis no local desejado e, em seguida, salvando a rea de trabalho como rea personalizada.
Visualizao de cdigo
Para o incio
Voc pode visualizar o cdigo-fonte do documento atual de vrias maneiras: exibindo-o na janela Documento atravs da ativao da Visualizao
de cdigo, dividindo a janela Documento para exibir a pgina e seu cdigo associado ou trabalhando no Inspetor de cdigo em uma janela de
codificao separada. O Inspetor de cdigo funciona exatamente como a Visualizao de cdigo. Considere-o uma Visualizao de cdigo do
documento atual que pode ser desanexada.
Para o incio
Voc pode usar seus atalhos de teclado favoritos no Dreamweaver. Se estiver acostumado a usar atalhos de teclado especficos, por exemplo,
Shift+Enter para adicionar uma quebra de linha ou Control+G para ir a uma posio especfica no cdigo, voc poder adicion-los em
Dreamweaver usando o Editor de atalhos de teclado.
Para obter instrues, consulte Personalizar atalhos de teclado.
Para o incio
Quando voc abre um tipo de arquivo que normalmente no contm nenhum HTML (por exemplo, um arquivo JavaScript), o arquivo aberto na
Visualizao de cdigo (ou no Inspetor de cdigo), e no na Visualizao de cdigo. possvel especificar quais tipos de arquivo sero abertos
na Visualizao de cdigo.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Tipos de arquivos/editores na lista Categoria esquerda.
3. Na caixa Abrir na Visualizao de cdigo, adicione a extenso do tipo de arquivo que voc deseja abrir automaticamente na Visualizao
de cdigo.
Digite um espao entre as extenses de nome de arquivo. possvel adicionar quantas extenses desejar.
Mais tpicos da Ajuda
Para o incio
Para o incio
Selecione o nome da categoria no menu pop-up Categoria. Por exemplo, para mostrar botes da categoria Layout, selecione Layout.
Para o incio
Inserir um objeto
1. Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir.
2. Siga um destes procedimentos:
Para o incio
Para o incio
Clique com a tecla Control (Windows) ou Option pressionada (Macintosh) no boto do objeto.
Por exemplo, para inserir um alocador de espao em uma imagem sem especificar um arquivo de imagem, clique com a tecla Control ou Option
pressionada no boto Imagem.
Nota: Este procedimento no ignora todas as caixas de dilogo de insero de objetos. Muitos objetos, incluindo elementos PA e conjuntos de
molduras, no inserem alocadores de espao nem objetos de valor padro.
Para o incio
Para o incio
Para o incio
Selecione a categoria Favoritos, no menu pop-up Categoria, no painel Inserir, e clique no boto de algum objeto favorito que voc tenha
adicionado.
Para o incio
Diferente dos outros painis do Dreamweaver, voc pode arrastar o painel Inserir para fora de sua posio de encaixe padro e solt-lo em uma
posio horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um painel para uma barra de ferramentas (embora voc
no possa ocult-lo e exibi-lo da mesma forma que se faz com as outras barras de ferramentas).
1. Clique na aba do painel Inserir e arraste-a para a parte superior da janela Documento.
2. Quando voc visualizar uma linha azul horizontal na parte superior da janela Documento, solte o painel Inserir na posio.
Nota: A Barra de insero horizontal, por padro, tambm faz parte da rea de trabalho Clssica. Para alternar para a rea de trabalho Clssica,
selecione Clssica, no alternador de rea de trabalho da Barra de aplicativos.
Para o incio
1. Clique na ala da Barra de insero horizontal (na parte esquerda da Barra de insero) e arraste-a para o local onde os seus painis esto
encaixados.
2. Posicione o painel Inserir e solte-o. Uma linha azul indica onde voc pode soltar o painel.
Para o incio
Clique na seta ao lado do nome da categoria, na extremidade esquerda da Barra de insero horizontal, e selecione Mostrar como abas.
Para o incio
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na aba de uma categoria da Barra de
insero horizontal e, em seguida, selecione Mostrar como menus.
Mais tpicos da Ajuda
Viso geral do painel Inserir
Para o incio
Use as barras de ferramentas Documento e Padro para realizar operaes relacionadas a documentos e de edio padro, a barra de
ferramentas de codificao para inserir o cdigo rapidamente e a barra de ferramentas Processamento do estilo para exibir a pgina exatamente
como apareceria em tipos de mdia diferentes. Voc pode exibir ou ocultar as barras de ferramentas conforme necessrio.
Selecione Exibir > Barras de ferramentas e, em seguida, selecione a barra de ferramentas.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer uma das barras de
ferramentas e selecione-a no menu de contexto.
Nota: Para exibir ou ocultar a barra de ferramentas de codificao no Inspetor de cdigo (Janela > Inspetor de cdigo), selecione Barra de
ferramentas de codificao no menu pop-up Opes de visualizao, na parte superior do inspetor.
Para o incio
O Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pgina selecionado atualmente, como texto
ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordo com o(s) elemento(s) selecionado(s).
Para acessar a Ajuda de um Inspetor de propriedades, clique no boto da Ajuda no canto superior direito do Inspetor de propriedades ou
selecione Ajuda no menu Opes de um Inspetor de propriedades.
Nota: Use o Inspetor de tags para visualizar e editar todos os atributos associados s propriedades de uma determinada tag.
Para o incio
Os menus de contexto fornecem acesso fcil maioria dos comandos teis e das propriedades relacionadas ao objeto ou janela com o qual est
trabalhando. Os menus de contexto listam somente os comandos que pertencem seleo atual.
1. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no objeto ou janela.
2. Selecione um comando no menu de contexto.
Para o incio
Voc pode visualizar um documento na janela Documento da Visualizao de cdigo, da Visualizao Dividir cdigo, da Visualizao de design,
das Visualizaes de cdigo e de design (visualizao dividida) ou na Visualizao dinmica. Voc tambm tem a opo de exibir a visualizao
Dividir cdigo ou as visualizaes de cdigo e de design na horizontal ou na vertical. (A exibio horizontal o padro.)
Por padro, a Visualizao de cdigo aparece na parte superior e a Visualizao de design aparece na parte inferior da janela Documento. Para
exibir a Visualizao de design na parte superior, selecione Exibir > Visualizao de design na parte superior.
Se voc estiver nas visualizaes de cdigo e design, tem a opo de exibir a Visualizao de design esquerda (Exibir > Visualizao de
design esquerda).
Para o incio
Se houver muitos documentos abertos ao mesmo tempo, voc pode organiz-los em cascata ou lado a lado.
Para o incio
A barra de status exibe as dimenses atuais da janela Documento (em pixels). Para projetar uma pgina cuja aparncia fica melhor em um
tamanho especfico, voc pode ajustar a janela Documento para qualquer tamanho predefinido, editar esses tamanhos predefinidos ou criar
novos tamanhos.
Quando voc altera o tamanho da visualizao de uma pgina na visualizao de design ou dinmica, somente as dimenses da visualizao
so modificadas. O tamanho do documento permanece inalterado.
Alm de tamanhos predeterminados e personalizados, o Dreamweaver tambm enumera os tamanhos especificados em uma consulta de mdia.
Quando voc seleciona um tamanho que corresponde a uma consulta de mdia, o Dreamweaver usa a consulta de mdia para exibir a pgina.
Voc tambm pode alterar a orientao de pgina para visualizar a pgina de dispositivos mveis onde o layout da pgina alterado com base
em como o dispositivo segurado.
O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem as bordas; o tamanho do monitor ou o dispositivo
mvel listado entre parnteses.
Para um redimensionamento menos preciso, use os mtodos padro de redimensionamento de janelas do seu sistema operacional, como
arrastar o canto inferior direito de uma janela.
Nota: (Apenas Windows) Documentos na janela Documento so, por padro, maximizados, e voc no pode redimensionar um documento
no canto superior direito do documento.
quando ele est maximizado. Para restaurar abaixo o documento, clique no boto Restaurar abaixo
uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada para diversas dimenses de pixel.
Para o incio
Relatrios no Dreamweaver
Para o incio
Voc pode executar relatrios no Dreamweaver para localizar contedos, solucionar problemas ou testar contedos. Voc pode gerar os
seguintes tipos de relatrios:
Pesquisa Permite procurar tags, atributos e textos especficos em tags.
Referncia Permite que voc procure informaes de referncia teis.
Validao Permite verificar erros de cdigo ou de sintaxe.
Compatibilidade de navegador Permite testar o HTML dos documentos para verificar se alguma tag ou atributo no suportado pelos
navegadores de destino.
Verificador de links Permite encontrar e corrigir links rompidos, externos e rfos
Relatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de trabalho incluem Design
Notes verificadas e modificadas recentemente; os relatrios HTML incluem tags de fonte aninhadas que podem ser combinadas, acessibilidade,
textos alternativos ausentes, tags aninhadas redundantes, tags vazias removveis e documentos sem ttulo.
Registro de FTP Permite visualizar toda a atividade de transferncia de arquivos via FTP.
Depurao de servidor Permite visualizar informaes para depurar um aplicativo Adobe ColdFusion.
Mais tpicos da Ajuda
Viso geral da janela Documento
Para o incio
1. Clique na ferramenta Zoom (o cone de lupa) no canto inferior direito da janela Documento.
2. Siga um destes procedimentos:
Clique no ponto da pgina que voc deseja ampliar at obter a ampliao desejada.
Arraste uma caixa sobre a rea da pgina que voc deseja ampliar e libere o boto do mouse.
Selecione um nvel de ampliao predefinido no menu pop-up Zoom.
Digite um nvel de ampliao na caixa de texto Zoom.
Voc tambm pode aplicar mais zoom sem usar a ferramenta Zoom. Para isso, pressione Control+= (Windows) ou Command+=
(Macintosh).
3. Para aplicar menos zoom (reduzir a ampliao), selecione a ferramenta Zoom, pressione Alt (Windows) ou Option (Macintosh) e clique na
pgina.
Voc tambm pode aplicar menos zoom sem usar a ferramenta Zoom. Para isso, pressione Control+- (Windows) ou Command+(Macintosh).
Para o incio
Clique na ferramenta Selecionar (o cone de ponteiro) no canto inferior direito da janela Documento e clique dentro da pgina.
Para o incio
Para o incio
Para o incio
Para o incio
Gerenciamento de site
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Conexes FTP
Use esta configurao se voc se conectar ao servidor Web usando FTP.
1. Selecione Site > Gerenciar sites.
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Para adicionar um servidor, clique no boto Adicionar novo servidor
Selecione um servidor existente e clique no boto Editar servidor existente
A ilustrao a seguir mostra a tela Bsico da categoria Servidor com os campos de texto j preenchidos.
Nota: A porta 21 a porta padro para receber conexes de FTP. possvel trocar o nmero da porta padro editando a caixa de texto
direita. O resultado quando voc salva as configuraes um caractere de dois pontos e o novo nmero de porta anexado ao endereo
FTP (por exemplo, ftp.mindspring.com:29).
7. Nas caixas de texto Nome do usurio e Senha, digite o nome do usurio e a senha que voc usa para conectar-se ao servidor de FTP.
8. Clique em Testar para testar o endereo FTP, nome do usurio e senha.
Nota: Voc deve obter as informaes de endereo FTP, nome do usurio e senha com o administrador do sistema da empresa que
hospeda seu site. Ningum mais tem acesso a essas informaes. Digite as informaes exatamente como forem fornecidas pelo
administrador do sistema.
9. O Dreamweaver salva sua senha por padro. Desmarque a opo Salvar se voc preferir que o Dreamweaver solicite uma senha sempre
que fizer a conexo com o servidor remoto.
10. Na caixa de texto Diretrio raiz, digite o diretrio (pasta) no servidor remoto onde voc armazena documentos visveis ao pblico.
Caso voc no tenha certeza sobre o que inserir como o diretrio raiz, entre em contato com o administrador do servidor ou deixe a caixa
de texto em branco. Em alguns servidores, o diretrio raiz igual ao diretrio ao qual voc primeiro se conectou com FTP. Para saber,
conecte-se ao servidor. Se uma pasta chamada public_html, ou www, ou seu nome de usurio, aparecer na Visualizao arquivo remoto do
painel Arquivos, provvel que este seja o diretrio a ser especificado na caixa de texto Diretrio raiz.
11. Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza o URL da Web para criar
links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para uma explicao mais extensa desta opo, verCategoria Configuraes avanadas.
12. Expandir a seo Mais opes se ainda for necessrio definir mais opes.
13. Selecione Usar FTP passivo se a configurao de firewall exigir o uso de FTP passivo.
O FTP passivo permite que o software local configure a conexo por FTP, em vez de solicitar que o servidor remoto configure. Se no tiver
certeza quanto ao uso de FTP passivo, verifique com o administrador do sistema ou tente marcar e desmarcar a opo Usar FTP passivo.
Para obter mais informaes, consulte o TechNote 15220 no site da Adobe www.adobe.com/go/tn_15220.
14. Selecione Usar modo de transferncia IPv6 caso voc esteja usando um servidor de FTP ativado para IPv6.
Com a implementao da verso 6 do protocolo IP (IPv6), EPRT e EPSV substituram os comandos de FTP PORT e PASV,
respectivamente. Portanto, se voc est tentando conectar-se a um servidor FTP ativado por IPv6, use os comandos passivo estendido
(EPSV) e ativo estendido (EPRT) para a conexo dos dados.
Para obter mais informaes, consulte www.ipv6.org/.
15. Selecione Usar proxy se voc quiser especificar um host ou uma porta do proxy.
Para obter mais informaes, clique no link para ir para a caixa de dilogo Preferncias e, em seguida, clique no boto Ajuda na categoria
Site da caixa de dilogo Preferncias.
16. Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc adicionou ou editou
um servidor remoto, de teste ou os dois.
Para obter ajuda com a soluo de problemas de conectividade do FTP, consulte TechNote kb405912 no site da Adobe em
www.adobe.com/go/kb405912.
Conexes SFTP
Use FTP seguro (SFTP) se a configurao de firewall exigir o uso de um FTP seguro. O SFTP usa criptografia e chaves pblicas para proteger
uma conexo com o servidor de teste.
Nota: preciso que seu servidor esteja executando um servio SFTP para que voc selecione essa opo. Se voc no souber se o servidor
est executando SFTP, consulte o administrador do sistema.
1. Selecione Site > Gerenciar sites.
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Para adicionar um servidor, clique no boto Adicionar novo servidor
Selecione um servidor existente e clique no boto Editar servidor existente
4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha.
5. No menu pop-up Uso da conexo, selecione SFTP.
O restante das opes so as mesmas que as opes para conexes de FTP. Para obter mais informaes, consulte a seo acima.
Nota: A porta 22 a porta padro para receber conexes de SFTP.
O FTPS (FTP sobre SSL) fornece tanto a criptografia como o suporte de autenticao em comparao ao SFTP que oferece s o suporte de
criptografia.
Usando o FTPS para transferncia de dados, voc pode criptografar suas credenciais e, tambm, os dados que so transmitidos ao servidor.
Alm disso, voc pode autenticar conexes e credenciais do servidor. As credenciais de um servidor so validadas de acordo com o conjunto
atual de certificados de autoridade de certificao (CA) confiveis do servidor no banco de dados do Dreamweaver. As Autoridades de
Certificao (CA), que incluem empresas como VeriSign, Thawte, entre outras, emitem certificados de servidor assinados digitalmente.
Nota: O procedimento descreve opes especficas para FTPS. Para obter informaes sobre opes de FTP regular, veja a seo anterior.
1. Selecione Site > Gerenciar sites.
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Clique no boto + (Adicionar novo servidor) para adicionar um servidor novo.
Selecione um servidor existente e clique no boto Editar servidor existente.
4. Em Nome do servidor, especifique um nome para o servidor novo.
5. Em Conectar usando, selecione uma das seguintes opes com base em seus requisitos.
FTP sobre SSL/TLS (Criptografia implcita) O servidor encerrar a conexo se a solicitao de segurana no for recebida.
FTP sobre SSL/TLS (Criptografia explcita) Se o cliente no solicitar segurana, o servidor poder continuar uma transao insegura ou
recusar/limitar a conexo.
6. Na Autenticao, escolha uma das seguintes opes:
Nenhum As credenciais do servidor, assinadas ou autoassinadas, so exibidas. Se voc aceitar as credenciais do servidor, o certificado
ser includo em um repositrio de certificados, trustedSites.db, no Dreamweaver. Quando voc se conectar a um mesmo servidor
pela segunda vez, o Dreamweaver se conectar diretamente a ele.
Nota: se as credenciais de um certificado autoassinado tiverem sido alteradas no servidor, voc ser solicitado a aceitar as novas
credenciais.
Confivel O certificado apresentado validado de acordo com o conjunto atual de certificados de autoridade de certificao (CA)
confiveis do servidor no banco de dados do Dreamweaver. A lista de servidores confiveis fica armazenada no arquivo cacerts.pem.
Nota: uma mensagem de erro ser exibida se voc selecionar Servidor confivel e conectar-se a um servidor com certificado autoassinado.
7. Expanda a seo Mais opes para definir mais opes.
Criptografar somente canal de comando Selecione essa opo se voc quiser criptografar somente os comandos que estiverem sendo
transmitidos. Use essa opo quando os dados transmitidos j estiverem criptografados ou no contiverem informaes sensveis.
Criptografar somente nome de usurio e senha Selecione essa opo se desejar criptografar somente seu nome de usurio e senha.
8. Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc adicionou ou editou
um servidor remoto, de teste ou os dois.
Para obter ajuda com a soluo de problemas de conectividade do FTP, consulte TechNote kb405912 no site da Adobe em
www.adobe.com/go/kb405912.
6. Clique no cone de pasta ao lado da caixa de texto Pasta do servidor para procurar e selecionar a pasta onde os arquivos do site sero
armazenados.
7. Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza o URL da Web para criar
links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para uma explicao mais extensa desta opo, verCategoria Configuraes avanadas.
8. Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc adicionou ou editou
um servidor remoto, de teste ou os dois.
Conexes WebDAV
Use esta configurao se voc se conectar ao servidor Web usando o protocolo Web-based Distributed Authoring and Versioning (WebDav).
Para este mtodo de conexo, voc deve ter um servidor que aceite esse protocolo, como o Microsoft Internet Information Server (IIS) 5.0 ou
uma instalao corretamente configurada do servidor Web Apache.
Nota: se selecionar WebDAV como seu mtodo de conexo e estiver usando o Dreamweaver em um ambiente de multiusurio, voc dever
certificar-se tambm de que todos os usurios selecionem WebDAV como mtodo de conexo. Se alguns usurios selecionarem WebDAV e
outros usurios escolherem outros mtodos de conexo como, por exemplo FTP, o recurso de devoluo/retirada do Dreamweaver no
funcionar como o esperado, pois o WebDAV utiliza seu prprio sistema de bloqueio.
1. Selecione Site > Gerenciar sites.
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Para adicionar um servidor, clique no boto Adicionar novo servidor
Selecione um servidor existente e clique no boto Editar servidor existente
4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha.
5. No menu pop-up Uso da conexo, selecione WebDAV.
6. Para o URL, insira o URL completo at o diretrio no servidor WebDAV com o qual voc deseja se conectar.
Esse URL inclui o protocolo, a porta e o diretrio (se no for o diretrio raiz). Por exemplo, http://webdav.meudomnio.net/meusite.
7. Digite o nome do usurio e a senha.
Essas informaes servem para a autenticao do servidor e no esto relacionadas ao Dreamweaver. Se voc no souber ao certo o
nome de usurio e a senha, consulte o administrador do sistema ou o webmaster.
8. Clique em Testar para testar as configuraes da conexo.
9. Selecione a opo Salvar se deseja que o Dreamweaver lembre sua senha sempre que voc iniciar uma nova sesso.
10. Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza o URL da Web para criar
links relativos raiz do site e verificar links quando voc usa o verificador de links.
Para uma explicao mais extensa desta opo, verCategoria Configuraes avanadas.
11. Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc adicionou ou editou
um servidor remoto, de teste ou os dois.
Conexes RDS
Voc dever usar esta configurao quando se conectar ao servidor Web usando RDS (Remote Development Services). Neste mtodo de
conexo, o servidor remoto deve estar em um computador que execute o Adobe ColdFusion
1. Selecione Site > Gerenciar sites.
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Para adicionar um servidor, clique no boto Adicionar novo servidor
Selecione um servidor existente e clique no boto Editar servidor existente
4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha.
5. No menu pop-up Uso da conexo, selecione RDS.
6. Clique no boto Configuraes e fornea as seguintes informaes na caixa de dilogo Configurar servidor RDS:
Informe o nome do computador host no qual o servidor Web est instalado.
O nome do host provavelmente um endereo IP ou um URL. Caso no tenha certeza, pergunte ao administrador.
Insira o nmero da porta qual voc se conecta.
Insira a pasta raiz remota como o diretrio do host.
Por exemplo, c:\inetpub\wwwroot\myHostDir\.
Para o incio
Para o incio
Voc no precisa se conectar pasta remota, voc est sempre conectado. Clique no boto Atualizar para ver os arquivos remotos.
Para o incio
No painel Arquivos:
Para conectar-se, clique em Estabelece conexo com host remoto na barra de ferramentas.
Para desconectar-se, clique em Desconectar na barra de ferramentas.
Para o incio
Esta lista contm informaes sobre problemas comuns encontrados durante a configurao de pastas remotas e sobre como solucion-los.
Tambm h uma nota tcnica extensa que fornece informaes especficas sobre soluo de problemas de FTP no site da Adobe em
www.adobe.com/go/kb405912.
A implementao de FTP do Dreamweaver talvez no funcione adequadamente com alguns servidores proxy, firewalls de diversos nveis e
outras formas de acesso indireto de servidor. Se ocorrerem problemas com o acesso ao FTP, solicite ajuda ao administrador de sistema
local.
Para a implementao de FTP do Dreamweaver, voc dever conectar-se com a pasta raiz do sistema remoto. Certifique-se de indicar a
pasta raiz do sistema remoto como o diretrio do host. Se voc especificou o diretrio do host usando uma barra nica (/), talvez seja
necessrio especificar um caminho relativo do diretrio ao qual voc est se conectando e a pasta raiz remota. Por exemplo, se a pasta raiz
remota for um diretrio de nvel superior, pode ser necessrio especificar um ../../ para o diretrio do host.
Use sublinhados em vez de espaos e evite caracteres especiais nos nomes de arquivo e de pasta sempre que possvel. Dois-pontos,
barras, pontos e apstrofos nos nomes de arquivos ou pastas podem causar problemas.
Se ocorrerem problemas com nomes de arquivo longos, use nomes menores. No Mac OS, os nomes de arquivo no podem ter mais de 31
caracteres.
Muitos servidores usam links simblicos (UNIX), atalhos (Windows) ou alias (Macintosh) para conectar uma pasta em uma parte do disco do
servidor a outra pasta em outro local. Esses alias em geral no afetam a capacidade de conexo com a pasta ou o diretrio apropriado,
porm, se voc puder se conectar a uma parte do servidor e no a outra, pode ser que haja uma discrepncia do alias.
Se for exibida uma mensagem de erro do tipo "no possvel colocar o arquivo", pode ser que no haja espao na pasta remota. Para
obter informaes mais detalhadas, verifique o registro de FTP.
Nota: em geral, quando ocorrer algum problema com a transferncia de FTP, verifique o registro de FTP selecionando Window >
Resultados (Windows) ou Site > Registro de FTP (Macintosh) e, em seguida, clicando na tag Registro de FTP.
Para o incio
Para o incio
necessrio especificar um URL da Web para que o Dreamweaver possa usar os servios de um servidor de teste para exibir dados e se
conectar a bancos de dados enquanto voc trabalha. O Dreamweaver usa conexo de tempo de design para fornecer informaes teis sobre o
banco de dados, como os nomes das tabelas e das colunas das tabelas do banco de dados.
O URL da Web de um servidor de teste compreende o nome de domnio e os diretrios virtuais ou subdiretrios do diretrio inicial do site.
Nota: A terminologia usada no Microsoft IIS pode variar de servidor para servidor, mas os mesmos conceitos se aplicam maioria dos
servidores Web.
O diretrio inicial A pasta no servidor mapeada para o nome de domnio do site. Suponha que a pasta que voc deseja usar para processar
pginas dinmicas esteja em c:\sites\company\ e que essa pasta seja seu diretrio inicial (ou seja, essa pasta mapeada para o nome de
domnio do seu site; por exemplo, www.mystartup.com). Nesse caso, o prefixo de URL http://www.mystartup.com/.
Se a pasta que voc deseja usar para processar pginas dinmicas uma subpasta do seu diretrio inicial, basta adicionar a subpasta ao URL.
Se seu diretrio inicial c:\sites\company\, o nome de domnio do seu site www.mystartup.com e a pasta usada para processar pginas
dinmicas c:\sites\company\inventory. Digite o seguinte URL da Web:
http://www.mystartup.com/inventory/
Se a pasta que voc deseja usar para processar pginas dinmicas no for seu diretrio inicial ou qualquer um de seus subdiretrios, crie um
diretrio virtual.
Um diretrio virtual Uma pasta que est contida fisicamente no diretrio inicial do servidor, ainda que ela parea estar no URL. Para criar um
diretrio virtual, especifique um alias para o caminho da pasta no URL. Suponha que seu diretrio inicial c:\sites\company, sua pasta de
processamento d:\apps\inventory e voc defina um alias para essa pasta chamado warehouse. Digite o seguinte URL da Web:
http://www.mystartup.com/warehouse/
Host local Refere-se aos diretrios inicias nos seus URLs quando o cliente (geralmente, um navegador, mas, neste caso, o Dreamweaver)
executado no mesmo sistema do servidor da web. Suponha que o Dreamweaver seja executado no mesmo sistema Windows do servidor da web,
seu diretrio inicial seja c:\sites\company e voc tenha definido um diretrio virtual chamado "warehouse" para se referir pasta que deseja usar
para processar pginas dinmicas. Estes so os URLs da Web que devem ser digitados para os servidores Web selecionados:
Servidor da web
URL da Web
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
http://localhost:80/warehouse/
http://localhost:8080/warehouse/
Nota: Por padro, o servidor Web ColdFusion MX 7 executado na porta 8500, o servidor Web Apache executado na porta 80 e o servidor
Web Jakarta Tomcat executado na porta 8080.
Para os usurios de Macintosh que executam o servidor Web Apache, o diretrio inicial pessoal Users/MyUserName/Sites, em que
MyUserName o nome do usurio do Macintosh. Um alias chamado ~MyUserName automaticamente definido para essa pasta quando voc
instala o Mac OS 10.1 ou superior. Portanto, o URL da Web padro do Dreamweaver o seguinte:
http://localhost/~MyUserName/
Se a pasta que voc deseja usar para processar pginas dinmicas for Users:MyUserName:Sites:inventory, o URL da Web ser o seguinte:
http://localhost/~MyUserName/inventory/
Escolha do servidor de aplicativo
Preparao para criao de sites dinmicos
Para o incio
Para o incio
Novo Permite a criao de um novo site. Quando voc clica no boto Novo, a caixa de dilogo Definio do site abre, permitindo que voc
nomeie e especifique o local do seu novo site. Para obter mais informaes, consulteConfigurar uma verso local do seu site.
Editar Permite que voc edite informaes como nome de usurio, senha e informaes do servidor para um site do Dreamweaver
existente. Selecione o site existente na lista de sites esquerda e clique no boto Editar para editar o site existente. Para obter mais
informaes sobre edio das opes de site existente, consulteConexo a um servidor remoto.
Duplicar Cria uma cpia de um site existente. Para duplicar um site, selecione o site na lista de sites esquerda e clique no boto
Duplicar. O site duplicado aparece na lista de sites com a palavra "cpia" anexada ao nome do site. Para alterar o nome do site duplicado,
deixe o site selecionado e clique no boto Editar.
Remover Exclui o site selecionado e todas as suas informaes de configurao de sua lista de sites do Dreamweaver; no exclui os
arquivos do site reais. Se quiser remover os arquivos do site do seu computador, voc precisar fazer isso manualmente. Para excluir um
site do Dreamweaver, selecione o site na lista de sites e clique no boto Remover. Essa ao no pode ser desfeita.
Exportar/importar Permite que voc exporte as configuraes do site selecionado como um arquivo XML (*.ste) ou importe configuraes
de um site. Para obter mais informaes, consulteImportao e exportao de configuraes do site.
Nota: o recurso de inportao importa somente configuraes do site que foram exportadas anteriormente. No importa arquivos do site
para criar um novo site do Dreamweaver. Para obter informaes sobre criao de um novo site no Dreamweaver, consulteConfigurar uma
verso local do seu site.
Sobre os sites do Dreamweaver
Para o incio
Voc pode retirar e devolver arquivos usando o Subversion. Para obter mais informaes , consulte Use o Subversion (SVN) para retirar e
devolver arquivos.
Para o incio
Informaes locais
Pasta padro de imagens A pasta em que voc deseja armazenar imagens para o seu site. Digite o caminho para a pasta ou clique no cone
de pasta para ir at ela. O Dreamweaver usa o caminho para a pasta quando voc adiciona imagens nos documentos.
Links relativos a Especifique o tipo de links que o Dreamweaver cria quando voc criar links para outros recursos ou pginas no site. O
Dreamweaver pode criar dois tipos de links: relativo a documento e relativo a raiz do site. Para obter mais informaes sobre as diferenas entre
os dois tipos, consulte Caminhos absolutos relativo a documento e relativo a raiz do site.
Por padro, o Dreamweaver cria links relativos a documentos. Se alterar a configurao padro e selecionar a opo Raiz do site, voc dever
certificar-se de que o URL da Web para o site foi digitada na caixa de texto URL da Web (consulte abaixo). A alterao dessa configurao no
converte o caminho de links existentes, a configurao ser aplicada somente aos novos links que voc criar visualmente com o Dreamweaver.
Nota: Contedos vinculados por links relativos raiz do site no so exibidos quando voc visualiza documentos em um navegador local, a
menos que voc especifique um servidor de teste ou selecione a opo Visualizar usando arquivo temporrio em Editar > Preferncias >
Visualizar no navegador. Isso ocorre porque os navegadores no reconhecem razes de site, diferente dos servidores.
URL da Web O URL do site. O Dreamweaver utiliza o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o
verificador de links.
Links relativos raiz do site sero teis se voc no tiver certeza do local final na estrutura do diretrio da pgina em que est trabalhando ou se
voc achar que mais tarde precisar deslocar ou reorganizar os arquivos que contm links. Links relativos raiz do site so links cujos caminhos
para outros recursos de site so relativos raiz do site, no ao documento, portanto se voc mover o documento para outro local, o caminho para
os recursos permanecero corretos.
Por exemplo, vamos dizer que voc especificou http://www.mysite.com/mycoolsite (o diretrio raiz do site do servidor remoto) como o URL da
Web e que tambm voc tem uma pasta de imagens no diretrio mycoolsite no servidor remoto (http://www.mysite.com/mycoolsite/images).
Vamos tambm dizer que seu arquivo index.html est no diretrio mycoolsite.
Quando voc criar um link relativo raiz do site no arquivo index.html para uma imagem no diretrio de imagens, o link ter a seguinte aparncia:
<img src="/mycoolsite/images/image1.jpg" />
diferente de um link relativo a documento, que seria simplesmente:
<img src="images/image1.jpg" />
O suplemento de /mycoolsite/ para a origem de imagem liga a imagem relativa raiz do site, no ao documento. Supondo-se que a imagem
permanea no diretrio de imagem, o caminho do arquivo para a imagem (/mycoolsite/images/image1.jpg) estar sempre correta, mesmo que
voc mova o arquivo index.html para outro diretrio.
Para obter mais informaes, consulte Caminhos absolutos relativos raiz do site e documento.
Considerando-se a verificao de link, o URL da Web ser necessrio para determinar se um link interno ou externo ao site. Por exemplo, se o
URL da Web http://www.mysite.com/mycoolsite e o verificador de link encontra um link com o URL http://www.yoursite.com na sua pgina, o
verificador determina que o ltimo link externo e o registra como tal. Similarmente, o verificador de link usa o URL da Web para determinar se
os links so internos para o site e em seguida verifica se eles esto interrompidos.
Verificao de links com distino de maisc./minsc. Verifica se a distino de maisc./minsc. dos links corresponde distino de
maisc./minsc. dos nomes dos arquivos quando o Dreamweaver verifica links. Essa opo til em sistemas UNIX em que os nomes de arquivo
diferenciam maisculas e minsculas.
Ativar o cache Indica se deve ser criado um cache local para agilizar as tarefas de gerenciamento de sites e links. Se voc no selecionar esta
opo, o Dreamweaver perguntar se deseja criar um cache novamente antes de criar o site. recomendvel selecionar esta opo porque o
painel Ativos (no grupo de painis Arquivos) funciona somente se um cache for criado.
Para o incio
(CS6 e
Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada site.
Para selecionar uma faixa de sites, Shift-clique no primeiro e ltimo sites da faixa.
3. Se quiser fazer backup de suas configuraes do site para si mesmo, selecione a primeira opo na caixa de dilogo Exportando site e
clique em OK. O Dreamweaver salva informaes de login de servidor remoto, como o nome de usurio e a senha, alm de informaes do
caminho local.
4. Para compartilhar configuraes com outros usurios, selecione a segunda opo na caixa de dilogo Exportando site e clique em OK. (O
Dreamweaver no salva informaes que no funcionariam para outros usurios, como informaes de login de servidor remoto e caminhos
locais.)
5. Para cada site cujas configuraes voc deseja exportar, navegue at um local onde deseja salvar o arquivo do site e clique em Salvar. (O
Dreamweaver salva as configuraes de cada site como um arquivo XML com uma extenso de arquivo .ste.)
6. Clique em Concludo.
Nota: Salve o arquivo *.ste na pasta raiz local ou na rea de trabalho para facilitar a localizao. Caso voc no se lembre de onde o
colocou, procure os arquivos com extenso *.ste para localiz-lo.
Para o incio
Para o incio
No Dreamweaver, o termo site refere-se a um armazenamento local ou remoto para os documentos que pertencem a um site. Um site do
Dreamweaver facilita a organizao e o gerenciamento de todos os documentos da Web, o carregamento do seu site em um servidor Web, o
rastreamento e a manuteno de links, alm do gerenciamento e o compartilhamento de arquivos. Voc deve definir um site para aproveitar todos
os recursos do Dreamweaver.
Nota: Para definir um site do Dreamweaver, voc s precisa configurar uma pasta local. Para transferir arquivos para um servidor Web ou
desenvolver aplicativos da Web, voc tambm precisa adicionar informaes para um site remoto e um servidor de teste.
Um site do Dreamweaver consiste em at trs partes, ou pastas, dependendo do seu ambiente de desenvolvimento e do tipo de site em
desenvolvimento:
Pasta raiz local Armazena os arquivos nos quais voc est trabalhando. O Dreamweaver refere-se a essa pasta como seu site local. Essa
pasta geralmente se localiza no seu computador local, mas tambm pode estar em um servidor de rede.
Pasta remota Armazena seus arquivos para teste, produo, colaborao e assim por diante. O Dreamweaver refere-se a essa pasta como seu
site remoto no painel Arquivos. Normalmente, a sua pasta remota est no computador em que o servidor Web executado. A pasta remota
contm os arquivos que os usurios acessam na Internet.
Juntas, as pastas local e remota permitem que voc transfira arquivos entre o disco rgido local e o servidor Web, facilitando o gerenciamento de
arquivos em sites do Dreamweaver. Voc trabalha nos arquivos na pasta local e depois os publica na pasta remota, quando deseja que outras
pessoas os vejam.
Pasta do servidor de teste A pasta em que o Dreamweaver processa as pginas dinmicas.
Para obter um tutorial sobre como definir um site Dreamweaver, consulte www.adobe.com/go/learn_dw_comm08_br.
Para o incio
Ao usar o Dreamweaver para conectar-se a uma pasta remota, voc especifica a pasta remota na categoria Servidores da caixa de dilogo
Definio de sites. A pasta remota especificada (tambm conhecida como diretrio do host) deve corresponder pasta raiz local do site do
Dreamweaver. (A pasta raiz local a pasta de nvel superior do site do Dreamweaver.) Pastas remotas, como pastas locais, podem ter qualquer
ttulo, mas normalmente, os provedores de servio da Internet (ISPs) nomeiam as pastas remotas de nvel superior das contas de usurios
individuais como public_html, pub_html ou algo parecido. Se voc responsvel pelo seu prprio servidor remoto e pode nomear a pasta remota
como desejar, aconselhvel que a pasta raiz local e a pasta remota tenham o mesmo nome.
O exemplo a seguir mostra uma pasta raiz local esquerda e uma pasta remota direita. A pasta raiz local na mquina local mapeia diretamente
para a pasta remota no servidor Web, e no para as subpastas da pasta remota nem para as pastas localizadas acima da pasta remota na
estrutura de diretrios.
Nota: O exemplo acima ilustra uma pasta raiz local na mquina local e uma pasta remota de nvel superior no servidor Web remoto. Se,
entretanto, voc mantm diversos sites do Dreamweaver em sua mquina local, ser necessrio um nmero igual de pastas remotas no servidor
remoto. Nesse caso, o exemplo acima no aplicvel, e voc deveria criar, ento, diversas pastas remotas dentro da pasta public_html e, em
seguida, mape-las para as pastas raiz locais correspondentes em sua mquina local.
Quando voc estabelece uma conexo remota pela primeira vez, a pasta remota no servidor Web em geral est vazia. Ento, quando voc usa o
Dreamweaver para carregar todos os arquivos na pasta raiz local, a pasta remota a preenche com todos os arquivos da Web. A estrutura de
diretrios da pasta remota e da pasta raiz local devem ser sempre iguais. (Ou seja, sempre deve haver uma correspondncia de um para um
entre os arquivos e as pastas da pasta raiz local e os arquivos e as pastas da pasta remota.) Se a estrutura da pasta remota no corresponder
estrutura da pasta raiz local, o Dreamweaver carregar os arquivos no local incorreto, onde podem no ficar visveis aos visitantes do site. Alm
disso, os caminhos de imagens e links podem ser facilmente rompidos se as estruturas de pastas e arquivos no estiverem sincronizadas.
A pasta remota j deve existir para que o Dreamweaver possa conectar-se a ela. Se voc no tem uma pasta designada que atue como sua
pasta remota no servidor Web, crie uma ou pea ao administrador do servidor do ISP que crie uma para voc.
Para o incio
Caso voc esteja trabalhando em um ambiente colaborativo, use o sistema de devoluo/retirada para transferir arquivos entre sites locais e
remotos. No entanto, caso voc seja a nica pessoa trabalhando no site remoto, voc pode usar os comandos Obter e Colocar para transferir
arquivos sem devolver ou retir-los.
Ao transferir um documento entre uma pasta local e remota usando o painel Arquivos, voc tem a opo da transferncia dos arquivos
dependentes do documento. Arquivos dependentes so imagens, folhas de estilos externas e outros arquivos referenciados no documento que um
navegador l ao carregar o documento.
Nota: Normalmente, uma boa ideia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais recentes dos arquivos
dependentes j estejam no disco local, no h necessidade de baix-los novamente. Isso tambm acontece no carregamento e na devoluo dos
arquivos: no h necessidade caso cpias atualizadas j estejam no site remoto.
Os itens de biblioteca so tratados como arquivos dependentes.
Alguns servidores informam erros quando colocam itens de biblioteca. No entanto, voc pode encobrir esses arquivos para impedir sua
transferncia.
Para o incio
Voc pode realizar outras atividades, no relacionadas a servidor, enquanto obtm ou coloca arquivos. A transferncia de arquivo em segundo
plano funciona com todos os protocolos de transferncia para os quais o Dreamweaver d suporte: FTP, SFTP, LAN, WebDAV, Subversion e
RDS.
Entre as atividades no relacionadas a servidor esto operaes comuns como digitar, editar folhas de estilos externas, gerar relatrios de todo o
site e criar novos sites.
Entre as atividades relacionadas a servidor que o Dreamweaver no pode realizar durante transferncias de arquivo esto as seguintes:
Colocar/obter/devolver/retirar arquivos
Desfazer retirada
Criar uma conexo de banco de dados
Ligar dados dinmicos
Visualizar dados na Visualizao dinmica
Inserir um servio da Web
Excluir arquivos remotos ou pastas
Visualizar em um navegador em um servidor de teste
Salvar um arquivo em um servidor remoto
Inserir uma imagem de um servidor remoto
Abrir um arquivo em um servidor remoto
Colocar automaticamente arquivos ao salvar
Arrastar arquivos para o site remoto
Recortar, copiar ou colar arquivos no site remoto
Atualizar Visualizao remota
Por padro, a caixa de dilogo Atividade de arquivo em segundo plano aberta durante transferncias de arquivos. Voc pode minimizar a caixa
de dilogo clicando no boto Minimizar do canto superior direito. Fechar a caixa de dilogo durante transferncias de arquivos resulta no
cancelamento da operao.
Para o incio
Use o comando Obter para copiar arquivos do site remoto para o site local. Voc pode usar o painel Arquivos ou a janela Documento para obter
arquivos.
O Dreamweaver cria um registro da atividade de arquivo durante a transferncia que voc pode exibir e salvar.
Nota: Voc no pode desativar a transferncia de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade de
arquivo em segundo plano, voc pode fech-lo para melhorar o desempenho.
O Dreamweaver tambm registra toda a atividade de transferncia de arquivos FTP. Caso ocorra um erro quando voc estiver transferindo um
arquivo usando o FTP, o registro de FTP do site pode ajud-lo a determinar o problema.
Para o incio
Convm colocar a verso atual do arquivo no servidor, mas voc continuar o editando.
Nota: Caso voc coloque um arquivo que no existia anteriormente no site remoto e esteja usando o sistema de devoluo/retirada, o
arquivo copiado para o site remoto e, em seguida, retirado para que voc possa continuar a edio.
Voc pode usar o painel Arquivos ou a janela Documento para colocar arquivos. O Dreamweaver cria um registro da atividade de arquivo
durante a transferncia que voc pode exibir e salvar.
Nota: Voc no pode desativar a transferncia de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade
de arquivo em segundo plano, voc pode fech-lo para melhorar o desempenho.
O Dreamweaver tambm registra toda a atividade de transferncia de arquivos FTP. Caso ocorra um erro quando voc estiver transferindo
um arquivo usando o FTP, o registro de FTP do site pode ajud-lo a determinar o problema.
Para assistir a um tutorial sobre a colocao de arquivos em um servidor remoto, consulte www.adobe.com/go/vid0163_br.
Para assistir a um tutorial sobre a soluo de problemas de envio, consulte www.adobe.com/go/vid0164_br.
Para o incio
Voc pode exibir o status das operaes de transferncia de arquivo, bem como uma lista de arquivos transferidos e seus resultados (xito na
transferncia, ignorado ou falha). Voc tambm pode salvar um registro da atividade do arquivo.
Nota: O Dreamweaver permite a voc realizar outras atividades no relacionadas a servidor enquanto transfere arquivos para ou de um servidor.
Para o incio
O Adobe Contribute CS4 combina um navegador da Web e um editor de pginas da Web. Ele permite que seus colegas de trabalho ou
clientes naveguem at uma pgina em um site que voc tenha criado para edit-la ou atualiz-la, caso eles tenham permisso para faz-lo. Os
usurios do Contribute podem adicionar e atualizar contedo bsico da Web, inclusive texto formatado, imagens, tabelas e links. Os
administradores do site do Contribute podem limitar as aes que os usurios comuns (no administradores) podem executar em um site.
Nota: Este tpico pressupe que voc seja um administrador do Contribute.
Como administrador do site, voc permite que os no administradores editem pginas criando uma chave de conexo e enviando-a a esses
usurios (para informar-se sobre como fazer isso, consulte a Ajuda do Contribute). Voc tambm pode configurar uma conexo com um site do
Contribute usando o Dreamweaver, o que permite que voc ou o criador do site se conecte ao site do Contribute e use todos os recursos de
edio disponveis no Dreamweaver.
O Contribute confere funcionalidade ao site com o CPS (Contribute Publishing Server), um pacote de aplicativos de publicao e ferramentas de
gerenciamento de usurios que permite a integrao do Contribute com o servio de diretrios de usurios da empresa; por exemplo, protocolo
LDAP (Lightweight Directory Access Protocol) ou Active Directory. Quando voc ativa o site do Dreamweaver como um site do Contribute, o
Dreamweaver l as configuraes de administrao do Contribute sempre que voc se conecta ao site remoto. Se o Dreamweaver detecta que o
CPS est ativado, ele herda algumas funes do CPS, como a reverso de arquivos e o registro de eventos.
Voc pode usar o Dreamweaver para conectar-se a um arquivo no site do Contribute e modific-lo. A maioria dos recursos do Dreamweaver
funcionam com um site do Contribute da mesma forma que funcionam com qualquer outro site. Contudo, quando voc usa o Dreamweaver com
um site do Contribute, o Dreamweaver automaticamente realiza certas operaes de gerenciamento de arquivos, como salvar vrias revises de
um documento e registrar certos eventos no console do CPS.
Para obter mais informaes, consulte a Ajuda do Contribute.
Para o incio
Para que os usurios do Contribute possam editar seu site, lembre-se do seguinte ao estrutur-lo:
Simplifique a estrutura do site. No aninhe pastas em muitos nveis. Agrupe itens relacionados em uma pasta.
Configure as permisses apropriadas de leitura e gravao para pastas no servidor.
Adicione pginas de ndice ao criar pastas de forma a estimular os usurios do Contribute a inserir novas pginas nas pastas corretas. Por
exemplo, se os usurios do Contribute fornecem pginas que contm atas de reunio, crie uma pasta na pasta raiz do site denominada
atas_reunio, e crie uma pgina de ndice nessa pasta. Em seguida, crie um link da pgina principal do site para a pgina de ndice das
atas de reunio. O usurio do Contribute poder ento navegar at essa pgina de ndice e criar uma nova pgina de atas para
determinada reunio, com um link a partir dessa pgina.
Na pgina de ndice de cada pasta, coloque uma lista de links para as pginas de contedo e os documentos dessa pasta.
Mantenha os designs de pgina o mais simples possvel, sem formataes rebuscadas.
Use CSS em vez de tags HTML e nomeie seus estilos CSS com clareza. Se os usurios do Contribute usam um conjunto padro de estilos
no Microsoft Word, use os mesmos nomes para os estilos CSS para que o Contribute possa mapear os estilos quando o usurio copiar
informaes de um documento do Word e as colar em uma pgina do Contribute.
Para evitar que um estilo CSS fique disposio dos usurios do Contribute, altere o nome do estilo para que ele comece com mmhide_.
Por exemplo, se voc usa um estilo denominado RightJustified em uma pgina, mas no quer que os usurios do Contribute usem esse
estilo, renomeie o estilo como mmhide_RightJustified.
Nota: Voc tem que adicionar mmhide_ ao nome do estilo na Visualizao de cdigo; no pode faz-lo no painel CSS.
Use poucos estilos CSS para manter a aparncia simples e organizada.
Se voc usar incluses do servidor para elementos de pgina HTML, como cabealhos e rodaps, crie uma pgina HTML desvinculada que
contenha links para os arquivos de incluso. Os usurios do Contribute podero marcar essa pgina e us-la para navegar at os arquivos
de incluso e edit-los.
Para o incio
O Contribute usa um sistema bem parecido com o sistema de devoluo e retirada do Dreamweaver para que somente um usurio por vez possa
editar determinada pgina da Web. Quando voc ativa a compatibilidade do Contribute no Dreamweaver, o sistema de devoluo e retirada do
Dreamweaver automaticamente ativado.
Para transferir arquivos para dentro e fora de um site do Contribute usando o Dreamweaver, sempre use os comandos Retirar e Devolver. Se
voc usar os comandos COLOCAR e OBTER para transferir arquivos, correr o risco de sobregravar as modificaes que algum usurio do
Contribute tenha feito recentemente em um arquivo.
Quando voc retira um arquivo em um site do Contribute, o Dreamweaver faz uma cpia de backup da verso anterior retirada do arquivo na
pasta _baks e adiciona seu nome de usurio e uma data a um arquivo de Design Notes.
Para o incio
O Contribute proporciona um meio de gerenciar permisses de arquivos e pastas para cada funo de usurio que voc definir; contudo, o
Contribute no proporciona uma maneira de gerenciar permisses subjacentes de leitura e gravao atribudas a arquivos e pastas pelo servidor.
No Dreamweaver, possvel gerenciar essas permisses diretamente no servidor.
Se o usurio do Contribute no tiver acesso de leitura a um arquivo dependente no servidor, como uma imagem exibida em uma pgina, o
contedo do arquivo dependente no aparecer na janela do Contribute. Por exemplo, se o usurio no tem acesso de leitura a uma pasta de
imagens, as imagens dessa pgina aparecero como cones de imagem partida no Contribute. Da mesma forma, os modelos do Dreamweaver
so armazenados em uma subpasta da pasta raiz do site para que o usurio do Contribute no tenha acesso de leitura pasta raiz; ele no
poder usar os modelos, a no ser que voc os copie para uma pasta apropriada.
Quando voc configura um site do Dreamweaver, deve conceder aos usurios acesso de leitura pasta /_mm (a subpasta _mm da pasta raiz),
pasta /Templates e a todas as pastas do servidor que contm ativos que eles precisaro usar.
Ainda que, por motivos de segurana, voc no possa conceder acesso de leitura pasta /Templates, poder permitir que os usurios do
Contribute acessem os modelos. Consulte Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz.
Para obter mais informaes sobre permisses do Contribute, consulte Administrao do Contribute na Ajuda do Contribute.
Para o incio
O Contribute usa uma variedade de arquivos especiais que no devem ser visualizados pelos visitantes do site:
O arquivo de configuraes compartilhadas, que tem um nome de arquivo ofuscado com uma extenso CSI, aparece em uma pasta
chamada _mm na pasta raiz do site, e contm informaes que o Contribute utiliza para gerenciar o site.
Verses antigas de arquivos, em pastas denominadas _baks
Verses temporrias de pginas para que os usurios possam visualizar as alteraes
Arquivos de bloqueio temporrios que indicam que determinada pgina est sendo editada ou visualizada
Arquivos de Design Notes que contm metadados sobre pginas do site
Em geral, no recomendvel editar os arquivos especiais do Contribute usando o Dreamweaver; o Dreamweaver os gerencia
automaticamente.
Se voc no quiser que esses arquivos especiais do Contribute apaream no seu servidor acessvel publicamente, configure um servidor de
teste onde os usurios do Contribute trabalhem em pginas. Depois copie periodicamente essas pginas da Web do servidor de teste para
um servidor de produo que esteja na Web. Se voc adotar essa abordagem do servidor de teste, copie somente as pginas da Web para
o servidor de produo, e no os arquivos especiais do Contribute indicados acima. Em especial, no copie as pastas _mm e _baks para o
servidor de produo.
Nota: Para obter informaes sobre como configurar um servidor para que os visitantes no vejam os arquivos nas pastas que comeam
com um sublinhado, consulte "Segurana no site" na Ajuda do Contribute.
Ocasionalmente, convm excluir manualmente arquivos especiais do Contribute. Por exemplo, pode haver circunstncias em que o
Contribute no consegue excluir as pginas de visualizao temporrias depois que o usurio as visualiza. Nesse caso, preciso excluir
essas pginas temporrias manualmente. As pginas de visualizao temporrias tm nomes de arquivo que comeam com TMP.
Da mesma forma, em algumas circunstncias, um arquivo de bloqueio desatualizado pode permanecer acidentalmente no servidor. Se isso
acontecer, voc ter que excluir o arquivo de bloqueio manualmente para que outros usurios possam editar a pgina.
Para o incio
Se voc est preparando um site do Dreamweaver para usurios do Contribute, precisa ativar explicitamente a compatibilidade com o Contribute
para usar recursos a ele relacionados; o Dreamweaver no solicita que voc faa isso; contudo, quando voc se conecta a um site que tenha
sido configurado como um site do Contribute (que tem um administrador), o Dreamweaver solicita que voc ative a compatibilidade do Contribute.
Nem todos os tipos de conexo aceitam a compatibilidade do Contribute. Estas restries aplicam-se aos tipos de conexo:
Se sua conexo com o site remoto usar WebDAV, a compatibilidade do Contribute no poder ser ativada porque os sistemas de controle
de origem no so compatveis com Design Notes e sistemas de retirada e devoluo que o Dreamweaver utiliza para sites do Contribute.
Se voc usa RDS para se conectar ao site remoto, pode ativar a compatibilidade do Contribute mas precisa personalizar a conexo para
compartilh-la com usurios do Contribute.
Se voc no est usando o computador local como servidor Web, configure o site usando uma conexo por FTP ou rede com o computador
(em vez de um caminho de pasta local) para poder compartilhar a conexo com usurios do Contribute.
Quando voc ativa a compatibilidade do Contribute, o Dreamweaver automaticamente ativa as Design Notes (incluindo a opo Carregar Design
Notes para compartilhamento) e o sistema de retirada/devoluo.
Se o servidor CPS (Contribute Publishing Server) estiver ativado no site remoto ao qual voc est se conectando, o Dreamweaver notifica o CPS
toda vez que voc aciona uma operao de rede como retirada, reverso ou publicao de um arquivo. O CPS registrar esses eventos e voc
poder verificar o registro no console de administrao do CPS. (Se voc desativar o CPS, esses eventos no sero registrados.) voc ative o
CPS usando o Contribute. Para obter mais informaes, consulte a Ajuda do Adobe Contribute.
Nota: Voc pode tornar um site do Contribute compatvel sem ter o Contribute em seu computador, mas se quiser iniciar o Contribute
Administrator do Dreamweaver, o Contribute dever estar instalado no mesmo computador que o Dreamweaver e voc dever estar conectado ao
site remoto antes de ativar a compatibilidade do Contribute. Caso contrrio, o Dreamweaver no poder ler as configuraes administrativas do
Contribute para determinar se os recursos CPS e de reverso esto ativados.
Importante: Voc deve certificar-se de que o arquivo de configuraes compartilhado (arquivo CSI) que o Contribute usa para administrar o site
esteja no servidor remoto e no esteja corrompido. O Contribute cria automaticamente esse arquivo (e sobrescreve as verses antigas dele)
sempre que voc administra o Contribute Administrator. Se o arquivo de configuraes compartilhadas no estiver no servidor ou estiver
corrompido, o Dreamweaver retornar o erro "O arquivo necessrio para compatibilidade do Contribute no existe no servidor" sempre que voc
tentar uma operao de rede (como uma insero). Para garantir que o arquivo correto esteja no servidor, desative a conexo com o servidor no
Dreamweaver, inicie o Contribute Administrator, faa uma alterao de administrao e, em seguida, reconecte o servidor no Dreamweaver. Para
obter mais informaes, consulte a Ajuda do Adobe Contribute.
1. Selecione Site > Gerenciar sites.
2. Selecione um site e, em seguida, clique em Editar.
3. Na caixa de dilogo Configurao de site, expanda Configuraes avanadas, selecione a categoria Contribute e, em seguida, selecione
Ativar compatibilidade do Contribute.
4. Se aparecer uma caixa de dilogo informando que voc precisa ativar as Design Notes e retirada/devoluo, clique em OK.
5. Se voc ainda no forneceu as informaes de contato de retirada/devoluo, digite seu nome e endereo de email na caixa de dilogo e
clique em OK. O status de reverso, o status de CPS, a caixa de texto URL raiz do site e o boto Administrar site do Contribute aparecem
na caixa de dilogo Definio de sites.
Se Reverso estiver ativado no Contribute, voc poder voltar s verses anteriores de arquivos que voc alterou no Dreamweaver.
6. Marque o URL na caixa de texto URL raiz do site e corrija-a se necessrio. O Dreamweaver constri um URL raiz do site com base em
outras informaes de definio de site fornecidas, mas s vezes o URL construdo no est totalmente correto.
7. Clique no boto Testar para verificar se voc inseriu o URL correto.
Nota: Se voc est pronto para enviar uma chave de conexo ou realizar tarefas de administrao do site do Contribute, ignore as demais
etapas.
8. Clique no Site do administrador no Contribute se quiser fazer alteraes de administrao. Lembre-se, o Contribute deve estar instalado na
mesma mquina em que deseja abrir o Contribute Administrator a partir do Dreamweaver.
9. Clique em Salvar e, em seguida, clique em Concludo.
Para o incio
Depois de ativar a compatibilidade do Contribute, voc pode usar o Dreamweaver para iniciar o Contribute e realizar tarefas de administrao do
site.
Nota: O Contribute deve estar instalado no mesmo computador do Dreamweaver.
Como administrador de um site do Contribute, voc pode:
Para o incio
A excluso de um arquivo do servidor remoto que hospeda um site do Contribute funciona como a excluso de um arquivo do servidor de
qualquer site do Dreamweaver. Entretanto, quando voc exclui um arquivo de um site do Contribute, o Dreamweaver pergunta se voc deseja
excluir todas as verses anteriores do arquivo. Se voc optar por manter as verses anteriores, o Dreamweaver salva uma cpia da verso atual
na pasta _baks para possibilitar sua posterior restaurao.
Renomear um arquivo remoto ou mov-lo de uma pasta para outra em um site do Contribute funciona como em qualquer site do Dreamweaver.
Em um site do Contribute, o Dreamweaver tambm renomeia ou move as verses anteriores associadas do arquivo que esto salvas na pasta
_baks.
1. Selecione o arquivo no painel Remoto do painel Arquivos (Janela > Arquivos) e pressione Backspace (Windows) ou Delete (Macintosh).
Ser exibida uma caixa de dilogo pedindo que voc confirme se deseja excluir o arquivo.
2. Na caixa de dilogo de confirmao:
Para excluir todas as verses anteriores do arquivo e tambm a verso atual, marque a opo Excluir verses anteriores.
Para manter as verses anteriores no servidor, desmarque a opo Excluir verses anteriores.
3. Clique em Sim para excluir o arquivo.
Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz
Para o incio
Em um site do Contribute, voc gerencia as permisses de arquivos e pastas subjacentes no servidor. Ainda que, por motivos de segurana, voc
no possa conceder acesso de leitura pasta /Templates, poder colocar os modelos disposio dos usurios.
1. Configure o site do Contribute para que sua pasta raiz seja a pasta que os usurios vero como a raiz.
2. Copie manualmente a pasta de modelos da pasta raiz do site principal para a pasta raiz do site do Contribute usando o painel Arquivos.
3. Depois de atualizar os modelos do site principal, recopie os modelos alterados para as subpastas apropriadas conforme o necessrio.
Se voc no optar por esse mtodo, no use links relativos raiz do site nas subpastas. Os links relativos raiz do site referem-se
principal pasta raiz no servidor, e no pasta raiz definida no Dreamweaver. Os usurios do Contribute no podem criar links relativos
raiz do site.
Se os links em uma pgina do Contribute parecerem rompidos, possvel que haja algum problema com as permisses de pasta,
principalmente se os links vinculam a pginas fora da pasta raiz do usurio do Contribute. Verifique as permisses de leitura e gravao
para pastas no servidor.
Para o incio
Se um arquivo remoto em um site do Contribute parecer retirado mas estiver na verdade bloqueado no computador do usurio, voc poder
desbloquear o arquivo para que os usurios possam edit-lo.
Quando voc clica em qualquer boto relacionado administrao do site do Contribute, o Dreamweaver verifica se ele pode se conectar ao site
remoto e se o URL raiz do site fornecido vlido. Se o Dreamweaver no puder se conectar ou se o URL no for vlido, ser exibida uma
mensagem de erro.
Se as ferramentas de administrao no esto funcionando corretamente, pode haver algum problema com a pasta _mm.
Para o incio
Antes de carregar o site em um servidor e declar-lo pronto para visualizao, uma boa ideia test-lo localmente. (Na verdade, uma boa ideia
testar e solucionar os problemas do site sempre em toda sua criao voc pode identificar problemas logo e evitar repeti-los.)
Voc deve verificar se as pginas so exibidas e funcionam conforme esperado nos navegadores que voc deseja, se no h links desfeitos e se
elas no demoram muito para serem baixadas. Voc tambm pode testar e solucionar problemas de todo o site executando um relatrio de site.
As seguintes diretrizes ajudaro voc a criar uma boa experincia para os visitantes do site:
1. Verifique se as pginas funcionam nos navegadores que voc deseja.
As pginas devem ser legveis e funcionais em navegadores que no do suporte a estilos, camadas, plug-ins ou JavaScript. Em pginas que
apresentam falhas em navegadores mais antigos, considere o uso do comportamento Verificar navegador para redirecionar automaticamente os
visitantes para outra pgina.
2. Visualize as pginas em navegadores e plataformas diferentes.
Isso d a voc a oportunidade de ver as diferenas de layout, cor, tamanhos de fonte e tamanho da janela do navegador padro que no podem
ser previstas em uma verificao do navegador de destino.
3. Verifique o site em busca de links desfeitos e os corrija.
Outros sites tambm passam por novos projetos e reorganizaes, e a pgina de link pode ter sido movida ou excluda. Voc pode executar um
relatrio de verificao de link para testar os links.
4. Monitore o tamanho do arquivo das pginas e o tempo de download.
No se esquea de que se uma pgina consistir em uma tabela grande, em alguns navegadores, os visitantes no vero nada at a concluso
do carregamento de toda a tabela. Considere dividir tabelas grandes; caso isso no seja possvel, considere colocar pouco contedo como uma
mensagem de boas-vindas ou um banner publicitrio fora da tabela na parte superior da pgina para que os usurios possam ver esse material
durante o download da tabela.
5. Execute alguns relatrios de site para testar e solucionar problemas de todo o site.
Voc pode verificar todo o site em busca de problemas como, por exemplo, documentos sem ttulo, tags vazias e tags aninhadas redundantes.
6. Valide o cdigo para localizar erros de tag ou de sintaxe.
7. Atualize e mantenha o site aps a publicao.
A publicao do site ou seja, torn-lo dinmico pode ser realizada de vrias formas, sendo um processo contnuo. Uma parte importante do
processo a definio e a implementao de um sistema de controle de verso, com as ferramentas do Dreamweaver ou por meio de um
aplicativo de controle de verso externo.
8. Use os fruns de discusso.
Os fruns de discusso do Dreamweaver podem ser encontrados no site da Adobe em www.adobe.com/go/dreamweaver_newsgroup_br.
Os fruns so um grande recurso para a obteno de informaes sobre diferentes navegadores, plataformas etc. Voc tambm aborda
problemas tcnicos e compartilha dicas teis com outros usurios do Dreamweaver.
Para assistir a um tutorial sobre a soluo de problemas de envio, consulte www.adobe.com/go/vid0164_br.
Para o incio
Voc pode executar relatrios do site em atributos de HTML ou fluxo de trabalho. Voc tambm pode usar o comando Relatrios para verificar os
links no site.
Os relatrios de fluxo de trabalho podem melhorar a colaborao com membros de uma equipe da Web. Voc pode executar relatrios de fluxo
de trabalho que exibem quem retirou um arquivo, quais arquivos esto associados a Design Notes e quais arquivos foram modificados
recentemente. Voc pode refinar ainda mais os relatrios de Design Note especificando parmetros de nome/valor.
Nota: Voc deve ter uma conexo de site remota definida para executar os relatrios de fluxo de trabalho.
Os relatrios em HTML permitem que voc compile e gere relatrios para vrios atributos HTML. Voc pode verificar tags de fonte aninhadas
combinveis, texto alternativo ausente, tags aninhadas redundantes, tags vazias removveis e documentos sem ttulo.
Depois de executar um relatrio, voc pode salv-lo como um arquivo em XML e, em seguida, import-lo para uma ocorrncia de modelo ou
banco de dados e planilha e imprimi-lo, ou exibi-lo em um site.
Nota: Voc tambm pode adicionar tipos de relatrio diferentes ao Dreamweaver usando o site do Adobe Dreamweaver Exchange.
Ao salvar um relatrio, voc pode import-lo para um arquivo de modelo existente. Em seguida, voc pode importar o arquivo para um
banco de dados ou planilha e imprimi-lo, ou use o arquivo para exibir o relatrio em um site.
Depois de executar relatrios em HTML, use o comando Limpar HTML para corrigir todos os erros de HTML listados pelos relatrios.
Mais tpicos da Ajuda
Tutorial sobre a soluo de problemas de publicao
CSS
Planejamento de pginas no Dreamweaver com CSS3
Janine Warner (24 de fevereiro de 2011)
tutorial
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Propriedades Exibe as propriedades que voc pode definir para o selecionador especificado. Para obter mais informaes, consulte Definir
propriedades.
O CSS Designer sensvel ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de pgina selecionado, voc pode exibir
as propriedades e os seletores associados. Caso contrrio, quando voc selecionar um seletor no CSS Designer, as consultas de mdia e origem
associadas sero realadas nos respectivos painis.
Para o incio
Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documento
Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao documento
Definir na pgina: para definir uma CSS no documento
Com base na opo selecionada, as caixas de dilogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente so exibidas.
2. Clique em Procurar para especificar o nome do arquivo CSS e, se voc estiver criando uma CSS, o local para salvar o novo arquivo.
3. Siga um destes procedimentos:
Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS.
Clique em Importar para importar o arquivo CSS no documento.
4. (Opcional) Clique em Uso condicional e especifique a consulta de mdia que deseja associar ao arquivo CSS.
Para o incio
A caixa de dilogo Definir consulta de mdia aparece e relaciona todas as condies de consulta de mdia compatveis com o
Dreamweaver.
3. Selecione as Condies conforme desejar. Para obter informaes detalhadas sobre consultas de mdia, consulte este artigo.
Verifique se voc especificou valores vlidos para todas as condies selecionadas. Caso contrrio, as consultas de mdia correspondentes
no sero criadas com sucesso.
Nota: no momento, somente a operao e est disponvel para vrias condies.
Se voc adicionar as condies de consulta de mdia pelo cdigo, apenas as condies permitidas sero preenchidas na caixa de dilogo Definir
consulta de mdia. A caixa de texto Cdigo na caixa de dilogo, entretanto, mostra o cdigo completo (incluindo condies no permitidas).
Se voc clicar em uma consulta de mdia na visualizao dinmica/de design, a janela de visualizao alterada para corresponder consulta
de mdia selecionada. Para exibir o tamanho total da janela de visualizao, clique em Global no painel @Mdia.
Definir seletores
Para o incio
1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mdia no painel @Mdia.
2. No painel Seletores, clique em . Com base no elemento selecionado no documento, o CSS Designer identifica de forma inteligente e
solicita o seletor relevante. Por padro, o seletor Mais especfico. possvel editar o seletor para deix-lo Menos especfico.
Diferentemente do painel CSS Styles, voc no pode selecionar um Tipo de seletor diretamente no CSS Designer. necessrio digitar o
nome do seletor junto com o identificador do Tipo de seletor. Por exemplo, se voc estiver especificando uma ID, o nome do seletor dever
ter o prefixo #.
Para pesquisar um seletor especfico, use a caixa de pesquisa na parte superior do painel.
Para renomear um seletor, clique no seletor e digite o nome necessrio.
Para reorganizar os seletores, arraste os seletores at a posio desejada.
Para mover um seletor de uma origem para outra, arraste o seletor at a origem necessria no painel Origem.
Para duplicar um seletor na origem selecionada, clique com o boto direito no seletor e clique em Duplicar.
Para duplicar um seletor e adicion-lo a uma consulta de mdia, clique com o boto direito no seletor, passe o mouse sobre Duplicar na
consulta de mdia e escolha a consulta de mdia.
Observao: a opo Duplicar na consulta de mdia est disponvel somente quando a fonte do seletor selecionado contm consultas de
mdia. No possvel duplicar um seletor de uma fonte em uma consulta de mdia de outra fonte.
Propriedades de grupo
Para o incio
As propriedades so agrupadas nas seguintes categorias e representadas por cones diferentes na parte superior do painel Propriedades:
Layout
Texto
Borda
Plano de fundo
Outros (lista de propriedades somente texto e no propriedades com controles visuais)
Marque a caixa de seleo Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que voc pode especificar
para um seletor, desmarque a caixa de seleo Exib. conj..
Todas as propriedades
Para definir uma propriedade, como width ou border-collapse, clique nas opes necessrias exibidas perto da propriedade no painel
Propriedades. Para obter informaes sobre como definir o plano de fundo do gradiente ou controles de caixa como margens, preenchimento e
posio, consulte os links abaixo:
Definir margens, preenchimento e posio
Aplicar gradientes ao plano de fundo
propriedade margin
propriedade padding
propriedade position
Clique nos valores e digite o valor necessrio. Se desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no cone de
vnculo ( ) no centro.
A qualquer momento, voc pode desativar ( ) ou excluir ( ) valores especficos, por exemplo, o valor da margem esquerda, e manter os valores
das margens direita, superior e inferior.
Desativar/excluir propriedade
Definio
Definio
Definio
Definio
Definio
Definio
Definio
Definio
de
de
de
de
de
de
de
de
propriedades
propriedades
propriedades
propriedades
propriedades
propriedades
propriedades
propriedades
do tipo CSS
do fundo de estilo CSS
do bloco de estilo CSS
da caixa de estilo CSS
da borda de estilo CSS
da lista de estilo CSS
do posicionamento de estilo CSS
da extenso de estilo CSS
Voc pode definir as propriedades das regras CSS como fonte do texto, imagem e cor do fundo, propriedades de espaamento e layout, e a
aparncia dos elementos de lista. Primeiro crie uma nova regra e defina qualquer uma das propriedades a seguir.
Para o incio
Use a categoria Tipo na caixa de dilogo Definio de regra CSS para definir as configuraes bsicas de fonte e tipo para um estilo CSS.
1. Abra o painel CSS Styles (Shift + F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Tipo e defina as propriedades de estilo.
Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Font-family Define a famlia de fontes (ou srie de famlias) para o estilo. Os navegadores exibem o texto na primeira fonte da srie
instalada no sistema do usurio. Para fins de compatibilidade com o Internet Explorer 3.0, liste a fonte do Windows primeiro. O atributo de
fonte compatvel com ambos os navegadores.
Font-size Define o tamanho do texto. Voc pode escolher um tamanho especfico selecionando o nmero e a unidade de medida, ou voc
pode escolher um tamanho relativo. Pixels impede que os navegadores distoram o texto. O atributo de tamanho compatvel com ambos
os navegadores.
Font-style Especifica Normal, Italic ou Oblique como estilo de fonte. A configurao padro Normal. O atributo de estilo compatvel
com ambos os navegadores.
Line-height Define a altura da linha em que o texto colocado. Esta configurao tradicionalmente chamada de leading. Selecione
Normal para que a altura da linha do tamanho da fonte seja calculada automaticamente ou digite um valor exato e selecione uma unidade
de medida. O atributo de altura da linha compatvel com ambos os navegadores.
Text-decoration Adiciona uma sublinha, sobrelinha ou tachado ao texto ou torna o texto intermitente. A configurao padro None. A
configurao padro para links Underline. Quando voc define a configurao de link para none, pode remover a sublinha dos links
definindo uma classe especial. O atributo de decorao compatvel com ambos os navegadores.
Font-weight Aplica um valor especfico ou relativo de negrito fonte. Normal equivale a 400; Bold equivale a 700. O atributo de espessura
compatvel com ambos os navegadores.
Font-variant Define a variante de versalete no texto. O Dreamweaver no exibe esse atributo na janela Documento. O atributo de variante
compatvel com o Internet Explorer, mas no com o Navigator.
Text-transform Coloca a primeira letra de cada palavra da seleo em maiscula ou define o texto para todas maisculas ou todas
minsculas. O atributo de maisculas ou minsculas compatvel com ambos os navegadores.
Cor Define a cor do texto. O atributo de cor compatvel com ambos os navegadores.
4. Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades
de estilo ou clique em OK.
Para o incio
Use a categoria Fundo da caixa de dilogo Definio de regra CSS para definir as configuraes de fundo de um estilo CSS. Voc pode aplicar
as propriedades de fundo a qualquer elemento em uma pgina da Web. Por exemplo, crie um estilo que adicione uma cor ou imagem do fundo a
qualquer elemento de pgina, ou seja, atrs do texto, de uma tabela, da pgina etc. Voc tambm pode definir o posicionamento de uma imagem
do fundo.
1. Abra o painel CSS Styles (Shift+F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Fundo e defina as propriedades de estilo.
Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Cor de fundo Define a cor de fundo do elemento. O atributo de cor de fundo compatvel com ambos os navegadores.
Imagem do fundo Define a imagem do fundo do elemento. O atributo de imagem do fundo compatvel com ambos os navegadores.
Repetio de fundo Determina se e como a imagem de fundo ser repetida. O atributo de repetio compatvel com ambos os
navegadores.
No Repeat exibe uma imagem uma vez, no incio do elemento.
Repeat coloca a imagem lado a lado, horizontalmente ou verticalmente atrs do elemento.
Repeat-x e Repeat-y exibem uma faixa horizontal e vertical de imagens, respectivamente. As imagens so recortadas para que no
ultrapassem os limites do elemento.
Nota: use a propriedade de repetio para redefinir a tag de corpo e definir uma imagem do fundo que no se organize lado a lado ou
repita.
Anexo de fundo Determina se a imagem de fundo se manter fixa na sua posio original ou rolar juntamente com o contedo. Observe
que alguns navegadores podem tratar a opo Fixa como Rolar. H suporte para esse atributo no Internet Explorer, mas no no Netscape
Navigator.
Posio de fundo (X) e Posio de fundo (Y) Especifica a posio inicial da imagem de fundo em relao ao elemento. Este recurso
pode ser usado para alinhar uma imagem de fundo ao centro da pgina, verticalmente (Y) e horizontalmente (X). Se a propriedade de
anexo for Fixa, a posio ser relativa janela Documento, e no ao elemento.
4. Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades
de estilo ou clique em OK.
Para o incio
Use a categoria Bloco da caixa de dilogo Definio de regra CSS para definir as configuraes de espaamento e alinhamento das tags e
propriedades.
1. Abra o painel CSS Styles (Shift+F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Bloco e defina qualquer uma das propriedades de estilo a seguir. (Deixe a
propriedade em branco caso ela no seja importante para o estilo.)
Espaamento entre palavras Define o espaamento entre palavras. Para definir um valor especfico no menu pop-up, selecione Value e
digite um valor numrico. No segundo menu pop-up, selecione uma unidade de medida (por exemplo, pixel, points etc.).
Nota: voc pode especificar valores negativos, mas a exibio depende do navegador. O Dreamweaver no exibe esse atributo na janela
Documento.
Espaamento entre letras Aumenta ou diminui o espao entre as letras ou caracteres. Para diminuir o espao entre os caracteres,
especifique um valor negativo, por exemplo (-4). As configuraes de espaamento entre letras substitui as configuraes de texto
justificado. H suporte para o atributo de espaamento entre letras no Internet Explorer 4 e posterior, e no Netscape Navigator 6.
Alinhamento vertical Especifica o alinhamento vertical do elemento ao qual ele aplicado. O Dreamweaver exibe esse atributo na janela
Documento somente quando aplicado tag <img>.
Alinhamento do texto Define como o texto alinhado no elemento. O atributo de alinhamento de texto compatvel com ambos os
navegadores.
Recuo do texto Especifica a distncia em que a primeira linha de texto ser recuada. Um valor negativo pode ser usado para diminuir o
recuo, mas a exibio depender do navegador. O Dreamweaver exibe esse atributo na janela Documento somente quando a tag
aplicada aos elementos de nvel de bloco. O atributo de recuo do texto compatvel com ambos os navegadores.
Espao em branco Determina como o espao em branco ser tratado no elemento. Selecione entre trs opes: Normal diminui o espao
em branco; Pre trata o espao em branco como se o texto estivesse delimitado por tags pre (ou seja, todo o espao em branco
respeitado, incluindo espaos, tabulaes e retornos); Nowrap especifica que s ocorre uma quebra de linha automtica no texto quando
uma tag br encontrada. O Dreamweaver no exibe esse atributo na janela Documento. H suporte para o atributo de espao em branco
no Netscape Navigator e no Internet Explorer 5.5.
Exibio Especifica se um elemento ser exibido e, em caso afirmativo, como ele ser exibido. None desativa a exibio de um elemento
ao qual ele atribudo.
4. Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades
de estilo ou clique em OK.
Para o incio
Use a categoria Caixa da caixa de dilogo Definio de regra CSS para definir as configuraes das tags e propriedades que controlam o
posicionamento dos elementos na pgina.
Voc pode aplicar as configuraes a cada lado de um elemento separadamente quando aplica as configuraes de preenchimento e margem,
ou usar a configurao Igual para tudo a fim de aplicar a mesma configurao a todos os lados de um elemento.
1. Abra o painel CSS Styles (Shift + F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Caixa e defina qualquer uma das propriedades de estilo a seguir. (Deixe a
propriedade em branco caso ela no seja importante para o estilo.)
Largura e Altura Define a largura e altura do elemento.
Flutuao Especifica o lado pelo qual outros elementos circulam ao redor do elemento flutuado. O elemento flutuado est fixo no lado da
flutuao e outros contedos circulam ao seu redor, no lado oposto.
Por exemplo, uma imagem flutuada para a direita fixada direita e o contedo que voc adicionar depois flui para a esquerda da imagem.
Para obter mais informaes, consulte http://css-tricks.com/all-about-floats/
Limpar Especifica os lados de um elemento que no permitem outros elementos flutuantes.
Preenchimento Especifica a quantidade de espao entre o contedo de um elemento e sua borda (ou margem, caso no haja borda).
Desmarque a opo Igual para tudo a fim de definir o preenchimento de cada lado do elemento separadamente.
Igual para tudo Define as mesmas propriedades de preenchimento para os lados superior, direito, inferior e esquerdo do elemento ao qual
elas so aplicadas.
Margem Especifica a quantidade de espao entre a borda de um elemento (ou o preenchimento, caso no haja borda) e outro elemento. O
Dreamweaver exibe esse atributo na janela Documento somente quando aplicado aos elementos de nvel de bloco (pargrafos, ttulos,
listas e etc). Desmarque a opo Igual para tudo a fim de definir a margem de cada lado do elemento separadamente.
Igual para tudo Define as mesmas propriedades de margem para os lados superior, direito, inferior e esquerdo do elemento ao qual elas
so aplicadas.
4. Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades
de estilo ou clique em OK.
Para o incio
Use a categoria Borda da caixa de dilogo Definio de regra CSS a fim de definir configuraes, como largura, cor e estilo, para as bordas em
torno dos elementos.
1. Abra o painel CSS Styles (Shift+F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Borda e defina qualquer uma das propriedades de estilo a seguir. (Deixe a
propriedade em branco caso ela no seja importante para o estilo.)
Tipo Define a aparncia do estilo da borda. A maneira como o estilo aparecer depende do navegador. Desmarque a opo Igual para
tudo a fim de definir o estilo de borda de cada lado do elemento separadamente.
Igual para tudo Define as mesmas propriedades de estilo de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual
elas so aplicadas.
Largura Define a espessura da borda do elemento. O atributo de largura compatvel com ambos os navegadores. Desmarque a opo
Igual para tudo a fim de definir a largura de borda de cada lado do elemento separadamente.
Igual para tudo Define a mesma largura de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual ela aplicada.
Cor Define a cor da borda. Voc pode definir a cor de cada lado de modo independente, mas a exibio depender do navegador.
Desmarque a opo Igual para tudo a fim de definir a cor de borda de cada lado do elemento separadamente.
Igual para tudo Define a mesma cor de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual ela aplicada.
4. Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades
de estilo ou clique em OK.
Para o incio
A categoria Lista da caixa de dilogo Definio de regra CSS define as configuraes de lista, como tamanho e tipo de marcador, para as tags de
lista.
1. Abra o painel CSS Styles (Shift+F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Lista e defina qualquer uma das propriedades de estilo a seguir. (Deixe a
propriedade em branco caso ela no seja importante para o estilo.)
Lista de tipo de estilo Define a aparncia dos marcadores ou nmeros. O tipo compatvel em ambos os navegadores.
Lista de imagem de estilo Permite que voc especifique uma imagem personalizada para os marcadores. Clique em Procurar (Windows)
ou Escolher (Macintosh) para navegar at uma imagem ou digite o caminho da imagem.
Lista posio de estilo Define se haver quebra de linha automtica e recuo do texto do item de linha (externo) ou se o texto ser
deslocado para a margem esquerda (interno).
4. Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades
de estilo ou clique em OK.
Para o incio
As propriedades de estilo de posicionamento determinam como o contedo relacionado ao estilo CSS selecionado est posicionado na pgina.
1. Abra o painel CSS Styles (Shift+F11) caso ele ainda no esteja aberto.
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles.
3. Na caixa de dilogo Definio de regra CSS, selecione Posicionamento e defina as propriedades de estilo desejadas.
Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Posio Determina como o navegador deve posicionar o elemento selecionado:
Absolute coloca o contedo usando as coordenadas digitadas nas caixas Placement, relativo ao predecessor com posio relativa ou
absoluta, ou, se no houver nenhum predecessor com posio relativa ou absoluta, relativo ao canto superior esquerdo da pgina.
Relative coloca o bloco de contedo usando as coordenadas digitadas nas caixas Placement relativas posio do bloco no fluxo de
texto do documento. Por exemplo, atribuir a um elemento uma posio relativa, e as coordenadas superior e esquerda de 20px
deslocar o elemento 20px para a direita e 20px para baixo de sua posio normal no fluxo. Os elementos tambm podem ser
posicionados de forma relativa, com ou sem as coordenadas superior, esquerda, direita ou inferior, a fim de estabelecer um contexto
para os filhos com posio absoluta.
Fixed coloca o contedo usando as coordenadas digitadas nas caixas Placement, relativo ao canto superior esquerdo do navegador. O
contedo permanecer fixo nesta posio quando o usurio rolar a pgina.
Static coloca o contedo em seu local no fluxo de texto. Esta a posio padro de todos os elementos HTML posicionveis.
Visibilidade Determina a condio de exibio inicial do contedo. Se voc no especificar uma propriedade de visibilidade, o contedo
herdar o valor da tag-me, por padro. A visibilidade padro da tag body est visvel. Selecione uma das seguintes opes de visibilidade:
Inherit herda a propriedade de visibilidade do pai do contedo.
Visible exibe o contedo, independentemente do valor do pai.
Hidden oculta o contedo, independentemente do valor do pai.
ndice Z Determina a ordem de empilhamento do contedo. Os elementos com um ndice z superior aparecem acima dos elementos com
um ndice z inferior (ou com nenhum ndice). Os valores podem ser positivos ou negativos. (Se o contedo tiver uma posio absoluta, ser
Para o incio
Para o incio
Para o incio
Para o incio
Opo
Rtulo
Descrio
Alternar Div
Ocultar
Duplicar
Excluir
Bloquear
Alinhar
Os elementos fluidos em uma pgina podem ser atravessados de modo cclico usando as teclas de seta para esquerda e direita.
Selecione o limite de elemento e pressione a tecla de seta.
Elementos de aninhamento
Para o incio
Para aninhar elementos fluidos em outros elementos fluidos, certifique-se de que o foco esteja no elemento pai. Em seguida, insira o elemento
filho obrigatrio.
A duplicao aninhada tambm possvel. A duplicao aninhada duplica o HTML (o elemento selecionado) e gera a CSS fluida relevante. Os
elementos absolutos contidos no elemento selecionado so posicionados corretamente. Os elementos aninhados tambm podem ser duplicados
usando o boto Duplicar.
Quando voc exclui um elemento pai, a CSS correspondente ao elemento, seus filhos e o HTML associado so excludos. Os elementos
aninhados tambm podem ser excludos usando o boto Excluir (atalho de teclado: Ctrl+Delete).
Para o incio
Um layout de pgina CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o
contedo em uma pgina da Web. O bloco de criao bsico do layout CSS a tag div, uma tag HTML que, na maioria dos casos, atua como
um continer de texto, imagens e outros elementos de pgina. Quando voc cria um layout CSS, coloque tags div na pgina, adicione contedo a
elas e posicione-as em vrios lugares. Diferente das clulas de tabela, que so restritas a algum lugar dentro das linhas e colunas de uma tabela,
as tags div podem aparecer em qualquer lugar de uma pgina da Web. possvel posicionar tags div de forma absoluta (especificando
coordenadas x e y) ou relativa (especificando o seu local em relao ao seu local atual). Voc tambm pode posicionar as tags div especificando
flutuaes, preenchimentos e margens, o mtodo preferido pelos padres da Web de hoje.
A criao de layouts CSS do zero pode ser difcil porque h muitas formas de fazer isso. Voc pode criar um layout CSS simples de duas
colunas definindo flutuaes, margens, preenchimentos e outras propriedades CSS em uma quantidade quase infinita de combinaes. Alm
disso, o problema de processamento entre navegadores pode fazer com que determinados layouts CSS sejam exibidos corretamente em alguns
navegadores e incorretamente em outros. O Dreamweaver facilita a construo de pginas com layouts de CSS fornecendo 16 layouts
predefinidos que funcionam em diferenetes navegadores.
O uso dos layouts de CSS predefinidos que acompanham o Dreamweaver o modo mais fcil de criar uma pgina com um layout de CSS, mas
voc pode tambm criar layouts de CSS usando os elementos de posio absoluta do Dreamweaver (elementos AP). Um elemento AP no
Dreamweaver um elemento de pgina em HTML especificamente, uma tag div ou qualquer outra tag que tenha uma posio absoluta
atribuda a ela. Entretanto, h limitao dos elementos AP do Dreamweaver, pois eles esto posicionados de modo absoluto e suas posies
nunca se ajustam na pgina de acordo com o tamanho da janela do navegador.
Se voc um usurio avanado, tambm pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas para criar
layouts de pgina.
Para o incio
Antes de passar para esta seo, voc deve estar familiarizado com os conceitos bsicos da CSS.
O bloco de criao bsico do layout CSS a tag div, uma tag HTML que, na maioria dos casos, atua como um continer de texto, imagens e
outros elementos de pgina. O exemplo a seguir mostra uma pgina HTML que contm trs tags div separadas: uma tag de continer grande e
duas outras tags uma tag de barra lateral e uma tag de contedo principal dentro da tag de continer.
</div>
No exemplo acima, no h nenhum estilo anexado a nenhuma das tags div. Sem as regras CSS definidas, cada tag div e seu respectivo
contedo ficam em uma local padro da pgina. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), voc poder usar
suas IDs para criar regras CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div.
A regra CSS a seguir, que pode residir no cabealho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira tag div,
ou a de continer, na pgina:
#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;
}
A regra #container dita que a tag div de continer deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da
pgina), uma borda slida preta de 1 pixel, e o texto alinhado esquerda. Os resultados da aplicao da regra tag div de continer so os
seguintes:
Para o incio
Ao criar uma nova pgina no Dreamweaver, voc pode criar uma que j contenha um layout de CSS. O Dreamweaver vem acompanhado de 16
layouts de CSS diferentes qua voc pode escolher. Alm disso, possvel criar seus prprios layouts CSS e adicion-los pasta de
configurao, a fim de que eles apaream como opes de layout na caixa de dilogo Novo documento.
Os layouts de CSS do Dreamweaver so processados corretamente nos seguintes navegadores: Firefox (Windows e Macintosh) 1.0, 1.5, 2.0 e
3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 e 8.0; Opera (Windows e Macintosh) 8.0, 9.0 e 10.0; Safari 2.0, 3.0 e 4.0; e Chrome 3.0.
Para obter um artigo informativo que explica como usar os layouts de CSS que acompanham o Dreamweaver, consulte o Dreamweaver
Developer Center.
Tambm h mais layouts de CSS disponveis no Adobe Dreamweaver Exchange.
Adicionar ao cabealho Adiciona CSS do layout ao cabealho da pgina que voc est criando.
Criar novo arquivo Adiciona a CSS do layout nova folha de estilos CSS externa e anexa a nova folha de estilos pgina que voc est
criando.
Vincular ao arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS necessrias ao
layout. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico
arquivo) em vrios documentos.
7. Siga um destes procedimentos:
Se voc selecionou Adicionar a cabealho em CSS de layout no menu pop-up (a opo padro), clique em Criar.
Se voc selecionar Criar novo arquivo no menu pop-up CSS de layout, clique em Criar e especifique um nome para o novo arquivo
externo na caixa de dilogo Salvar arquivo de folha de estilos como.
Se voc selecionou Vincular a arquivo existente em CSS de layout no menu pop-up, adicione o arquivo externo caixa de texto Anexar
arquivo CSS, clicando no cone Adicionar folha de estilos, preenchendo a caixa de dilogo Anexar folha de estilos externa e clicando em
OK. Quando terminar, clique em Criar na caixa de dilogo Novo documento.
Nota: Quando voc selecionar a opo Vincular a arquivo existente, o arquivo especificado j dever ter regras para o arquivo CSS nele
contido.
Quando voc aplicar o CSS de layout em um novo arquivo ou vincular a um arquivo existente, o Dreamweaver automaticamente vincula o
arquivo pgina em HTML que voc est criando.
Nota: Os comentrios condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem
incorporados no cabealho do novo documento de layout CSS, mesmo se voc selecionar Novo arquivo externo ou Arquivo externo
existente como local da CSS do layout.
8. (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao criar a pgina. Para
fazer isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS.
Para obter uma descrio detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos
de David Powers.
Para o incio
As folhas de estilos em cascata (CSS) so um conjunto de regras de formatao que controlam a aparncia do contedo em uma pgina da
Web. O uso de estilos CSS para formatar uma pgina separa o contedo da apresentao. O contedo da pgina o cdigo HTML reside no
arquivo HTML, e as regras CSS que definem a apresentao do cdigo residem em outro arquivo (uma folha de estilos externa) ou em outra parte
do documento HTML (geralmente a seo de cabealho). A separao do contedo da apresentao torna mais fcil a manuteno da aparncia
do site em um local central, pois voc no precisa atualizar cada propriedade em cada pgina sempre que necessrio fazer uma alterao. Isso
tambm torna o cdigo HTML mais simples e limpo, diminuindo o tempo de carregamento do navegador e simplificando a navegao para as
pessoas com problemas de acesso (por exemplo, aquelas que usam leitores de tela).
A CSS oferece excelente flexibilidade e controle sobre a aparncia exata da pgina. Com a CSS, voc pode controlar vrias propriedades de
texto, como fontes e tamanhos de fonte especficos; negrito, itlico, sublinhado e sombras de texto; cor de texto e cor de fundo; cor e sublinhado
de link; e muito mais. Usando a CSS para controlar as fontes, voc tambm pode garantir um tratamento mais consistente do layout e da
aparncia da pgina em vrios navegadores.
Alm da formatao do texto, voc pode usar a CSS para controlar o formato e o posicionamento dos elementos em nvel de bloco em uma
pgina da Web. Um elemento em nvel de bloco uma parte independente do contedo, geralmente separado por uma nova linha no cdigo
HTML e formatado visualmente como um bloco. Por exemplo, as tags h1, p e div produzem elementos em nvel de bloco em uma pgina da
Web. Voc pode definir as margens e bordas de elementos em nvel de bloco, posicion-los em um local especfico, adicionar uma cor de fundo a
eles, flutuar texto em volta deles etc. A manipulao dos elementos em nvel de bloco basicamente a maneira como voc cria o layout das
pginas com a CSS.
Para o incio
A regra de formatao CSS consiste em duas partes: o seletor e a declarao (ou, na maioria dos casos, em um bloco de declaraes). O seletor
um termo (como p, h1, um nome de classe ou uma ID) que identifica o elemento formatado e o bloco de declaraes define o que so as
propriedades de estilo. No exemplo a seguir, h1 o seletor e tudo o que estiver entre chaves ({}) o bloco de declaraes:
h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; }
Uma declarao individual consiste em duas partes: a propriedade (como font-family) e o valor (como Helvetica). Na regra CSS anterior,
um determinado estilo foi criado para as tags h1: o texto de todas as tags h1 vinculadas a esse estilo ter 16 pixels de tamanho, a fonte Helvetica
e ser negrito.
O estilo (que proveniente de uma regra ou de um conjunto de regras) reside em um lugar separado do texto real que ele est formatando,
geralmente em uma folha de estilos externa ou na parte de cabealho de um documento HTML. Desse modo, uma regra para as tags h1 pode se
aplicar a vrias tags simultaneamente (e, no caso das folhas de estilos externas, a regra pode se aplicar a vrias tags simultaneamente em vrias
pginas diferentes). Assim, a CSS oferece recursos de atualizao extremamente fceis. Quando voc atualizar uma regra CSS em um lugar, a
formatao de todos os elementos que usam o estilo definido sero automaticamente atualizados para o novo estilo.
Para o incio
O termo em cascata se refere maneira como um navegador exibe os estilos de elementos especficos em uma pgina da Web. Trs fontes
diferentes so responsveis pelos estilos que voc v em uma pgina da Web: a folha de estilos criada pelo autor da pgina, as selees de
estilo personalizadas do usurio (se houver alguma) e os estilos padro do prprio navegador. Os tpicos anteriores descrevem como criar estilos
para uma pgina da Web como o autor da pgina da Web e da folha de estilos anexada a essa pgina. Mas os navegadores tambm tm suas
prprias folhas de estilos padro que regem o processamento das pginas da Web e, alm disso, os usurios podem personalizar seus
navegadores fazendo selees que ajustam a exibio das pginas. A aparncia final de uma pgina da Web o resultado das regras de todas
essas fontes juntas (ou em cascata) para processar a pgina da Web de uma maneira ideal.
Uma tag comum a tag de pargrafo ou a tag <p> ilustra o conceito. Por padro, os navegadores vm com folhas de estilos que definem a
fonte e o tamanho de fonte do texto do pargrafo (ou seja, o texto que aparece entre as tags <p> no cdigo HTML). No Internet Explorer, por
exemplo, todo o texto do corpo, incluindo o texto do pargrafo, exibido na fonte Times New Roman mdia, por padro.
Como autor de uma pgina da Web, no entanto, voc pode criar uma folha de estilos que substitua o estilo padro de fonte de pargrafo e
tamanho de fonte do navegador. Por exemplo, voc pode criar a seguinte regra na folha de estilos:
p { font-family: Arial; font-size: small; }
Quando um usurio carrega a pgina, as configuraes de fonte de pargrafo e tamanho de fonte definidas por voc como autor substituem as
configuraes padro de texto de pargrafo do navegador.
Os usurios podem fazer selees para personalizar a exibio do navegador de uma forma ideal para seu prprio uso. No Internet Explorer, por
exemplo, o usurio pode selecionar Exibir > Tamanho do texto > O maior para expandir a fonte da pgina para um tamanho mais legvel, caso
ele ache que a fonte est muito pequena. Por fim (pelo menos neste caso), a seleo do usurio substitui os estilos padro de tamanho de fonte
do navegador e os estilos de pargrafo criados pelo autor da pgina da Web.
A herana outra parte importante da cascata. As propriedades da maioria dos elementos de uma pgina da Web so herdadas; por exemplo, as
tags de pargrafo herdam determinadas propriedades das tags de corpo, as tags span herdam determinadas propriedades das tags de pargrafo
e assim por diante. Desse modo, se voc criar a seguinte regra na folha de estilos:
body { font-family: Arial; font-style: italic; }
Todo o texto de pargrafo na pgina da Web (bem como o texto que herda propriedades da tag de pargrafo) ser Arial e itlico, pois a tag de
pargrafo herda essas propriedades da tag de corpo. Voc pode, no entanto, ser mais especfico nas suas regras e criar estilos que substituem a
frmula padro para herana. Por exemplo, se voc criar as seguintes regras na folha de estilos:
body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; }
Todo o texto do corpo ser Arial e itlico, exceto o texto do pargrafo (e seu texto herdado), que ser exibido como Courier normal (no itlico).
Tecnicamente, a tag de pargrafo herda primeiro as propriedades definidas para a tag de corpo, mas depois ela as ignora porque tem as suas
prprias propriedades. Em outras palavras, enquanto os elementos de pgina geralmente herdam as propriedades acima, a aplicao direta de
uma propriedade a uma tag sempre resulta em uma substituio da frmula padro para herana.
A combinao de todos os fatores abordados anteriormente, alm de outros fatores como a especificidade CSS (um sistema que atribui pesos
diferentes a determinados tipos de regras CSS) e a ordem das regras CSS, acaba criando uma cascata complexa na qual os itens com
prioridades mais altas substituem as propriedades com prioridades mais baixas. Para obter mais informaes sobre as regras que regem a
cascata, a herana e a especificidade, acesse www.w3.org/TR/CSS2/cascade.html.
Para o incio
Por padro, o Dreamweaver usa as Folhas de estilo em cascata (CSS) para formatar texto. Os estilos que voc aplica ao texto usando o Inspetor
de propriedades ou os comandos de menu criam regras CSS que esto incorporadas no cabealho do documento atual.
Tambm possvel usar o painel Estilos CSS para criar e editar propriedades e regras CSS. O painel Estilos CSS um editor muito mais robusto
do que o Inspetor de propriedade e exibe todas as regras CSS definidas para o documento atual, quer essas regras estejam incorporadas no
cabealho do documento ou em uma folha de estilos externa. A Adobe recomenda que voc use o painel Estilos CSS (em vez do Inspetor de
propriedades) como a ferramenta principal para a criao e edio da CSS. Como resultado, o cdigo ser mais limpo e fcil de manter.
Alm dos estilos e folhas de estilos criados, voc tambm pode usar as folhas de estilos fornecidas junto com o Dreamweaver para aplicar estilos
aos documentos.
Para obter um tutorial sobre a formatao de texto com CSS, consulte www.adobe.com/go/vid0153.
Para o incio
A especificao CSS permite a criao de estilos atravs de uma sintaxe abreviada conhecida como CSS abreviada. A CSS abreviada permite
que voc especifique os valores de vrias propriedades usando uma nica declarao. Por exemplo, a propriedade font permite que voc defina
as propriedades font-style, font-variant, font-weight, font-size, line-height e font-family em uma nica linha.
Um ponto-chave a ser observado quando se usa a CSS abreviada que os valores omitidos em uma propriedade CSS abreviada so definidos
para seus valores padro. Isso pode fazer com que as pginas sejam exibidas incorretamente quando duas ou mais regras CSS so atribudas
mesma tag.
Por exemplo, a regra h1 mostrada a seguir usa a sintaxe CSS longa. Observe que as propriedades font-variant, font-stretch, fontsize-adjust e font-style foram definidas para seus valores padro.
h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; fontstyle: normal; font-stretch: normal; font-size-adjust: none }
Reescrita como uma nica propriedade abreviada, a mesma regra poder ter a seguinte aparncia:
h1 { font: bold 16pt/18pt Arial }
Quando a propriedade escrita atravs da notao abreviada, os valores omitidos so definidos automaticamente para seus valores padro.
Desse modo, o exemplo abreviado anterior omite as tags font-variant, font-style, font-stretch e font-size-adjust.
Se voc tiver estilos definidos em mais de um local (por exemplo, incorporado em uma pgina HTML e importado de uma folha de estilos
externa) nos formatos abreviado e longo, saiba que as propriedades omitidas em uma regra abreviada podem substituir (ou cascata) as
propriedades que esto explicitamente definidas em outra regra.
Por esse motivo, o Dreamweaver usa o formato longo da notao CSS, por padro. Isso impede os possveis problemas ocasionados pela
substituio de uma regra abreviada por uma longa. Se voc abrir uma pgina da Web codificada com a notao CSS abreviada no
Dreamweaver, saiba que o Dreamweaver criar novas regras CSS usando o formato longo. Voc pode especificar como o Dreamweaver criar e
editar as regras CSS alterando as preferncias de edio CSS na categoria Estilos CSS da caixa de dilogo Preferncias (Editar > Preferncias
no Windows; Dreamweaver > Preferncias no Macintosh).
Nota: O painel Estilos CSS cria regras usando somente a notao longa. Se voc criar uma pgina ou folha de estilos CSS usando o painel
Estilos CSS, saiba que a codificao das regras CSS abreviadas pode fazer com que as propriedades abreviadas sobreponham as criadas em
formato longo. Por isso, use a notao CSS longa ao criar seus estilos.
Introduo ao tutorial de CSS
Aplicar, remover ou renomear estilos de classe
Adicionando e formatando texto
Painel Estilos CSS
Tutorial de formatao de texto com CSS
Para o incio
1. (Opcional) Selecione um elemento (pargrafo, ttulo etc.) para aplicar a transio. Alternativamente, voc pode criar uma transio e aplicla depois em um elemento.
2. Selecione Janela> Transies de CSS.
3. Clicar .
4. Crie uma classe de transio que usa as opes na caixa de dilogo Nova transio.
Regra de destino Insira um nome para o seletor. O seletor pode ser qualquer seletor de CSS como uma tag, uma regra, uma ID ou um
seletor composto. Por exemplo, se voc deseja adicionar efeitos de transio a todas as tags <hr>, insira hr.
Transio ativada Selecione um estado ao qual voc deseja aplicar a transio. Por exemplo, se voc deseja aplicar a transio quando o
mouse se mover sobre o elemento, use a opo passar mouse.
Uso da mesma transio para todas as propriedades Selecione esta opo se voc quiser especificar a mesma Durao, Atraso, e
Funo de Regulao de tempo para todas as propriedades de CSS as quais deseja a transio.
Uso de uma transio diferrente para cada propriedade Selecione esta opo se quiser especificar uma Durao, Atraso e Funo de
Regulao de tempo diferentes para cada uma das propriedades de CSS as quais deseja a transio.
Propriedade Clique em
Durao Insira uma durao em segundos (s) ou milissegundos (ms) para o efeito de transio.
Atraso A hora, em segundos ou milissegundos, antes do incio do efeito de transio.
Para o incio
2. Clique em
3. Use a caixa de dilogo Editar transio para alterar valores de transio que foram inseridos anteriormente.
Para o incio
Para o incio
Para o incio
Para o incio
1. No painel Estilos CSS, clique com o boto direito no estilo de classe CSS que deseja renomear e selecione Renomear classe.
Voc tambm pode renomear uma classe selecionando Renomear classe no menu de opes do painel Estilos CSS.
2. Na caixa de dilogo Renomear classe, verifique se a classe a ser renomeada est selecionada no menu pop-up Renomear classe.
3. Na caixa de texto Novo nome, digite o novo nome da nova classe e clique em OK.
Se a classe que voc est renomeando for interna ao cabealho do documento atual, o Dreamweaver alterar o nome da classe, assim
como todas as ocorrncias do nome de classe do documento atual. Se a classe que voc est renomeando estiver em um arquivo CSS
externo, o Dreamweaver abrir e alterar o nome de classe do arquivo. O Dreamweaver tambm inicia uma caixa de dilogo Localizar e
substituir no nvel do site, a fim de que voc possa procurar todas as ocorrncias do nome de classe antigo no site.
Mais tpicos da Ajuda
[imprimir]Sobre as folhas de estilo em cascata
Para o incio
Para o incio
Para o incio
Selecione Prximo problema ou Problema anterior no menu Verificao de compatibilidade do navegador na barra de ferramentas Documento.
Para o incio
1. No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador.
2. Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Configuraes.
3. Marque a caixa de seleo ao lado de cada navegador a ser verificado.
4. Para cada navegador selecionado, escolha uma verso mnima a ser verificada no menu pop-up correspondente.
Por exemplo, para saber se os bugs de processamento de CSS podem aparecer no Internet Explorer 5.0 e posterior, e Netscape Navigator
7.0 e posterior, marque as caixas de seleo ao lado desses nomes de navegador, e selecione 5.0 no menu pop-up do Internet Explorer e
Para o incio
Para o incio
1. No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador.
2. Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Editar lista de questes ignoradas.
3. No arquivo Exceptions.xml, localize o problema a ser excludo da lista de problemas ignorados e exclua-o.
4. Salve e feche o arquivo Exceptions.xml.
Para o incio
Para o incio
Para o incio
Desativar/Ativar CSS
O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS do painel Estilos CSS, sem ter que fazer alteraes diretamente
no cdigo. Quando voc comenta partes do CSS, pode ver que tipos de efeitos as propriedades e os valores especficos tm na sua pgina.
Quando voc desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentrios de CSS e um rtulo [desativado] propriedade do
CSS que voc desativou. Voc pode, em seguida, reativar ou excluir a propriedade do CSS desativada, de acordo com sua preferncia.
Para obter uma viso geral, em vdeo, da equipe de engenharia do Dreamweaver, sobre como trabalhar com Ativar/desativar CSS, consulte
www.adobe.com/go/dwcs5css_br.
1. No painel Propriedades do painel Estilos CSS (Janela > Estilos CSS), selecione a propriedade que deseja desativar.
2. Clique no cone Desativar/Ativar propriedade de CSS no canto direito inferior do painel Propriedades. O cone tambm aparece se voc
mover o mouse para a esquerda da prpria propriedade.
Depois de clicar no cone Desativar/Ativar propriedade de CSS, um cone Desativado aparecer esquerda da propriedade. Para reativar a
propriedade, clique no cone Desativado ou clique com o boto direito do mouse (Windows) ou Control-clique (SO Macintosh) na
propriedade e selecione Ativar.
3. (Opcional) Para ativar ou excluir todas as propriedades desativadas de uma regra selecionada, clique com o boto direito do mouse
(Windows) ou Control-clique (SO Macintosh) em qualquer regra ou propriedade na qual as propriedades estejam desativadas e selecione
Ativar todas as desativadas em Regra selecionada ou Excluir todas as desativadas em Regra selecionada.
Para o incio
Para o incio
Para o incio
Para o incio
Clique no cone "+" correspondente a essas propriedades. Use as opes no painel pop-up para aplicar a propriedade.
Para o incio
Propriedades CSS3 como sombra do texto suportam vrios conjuntos de valores. Por exemplo: sombra do texto: 3px 3px #000,-3px-3px #0f0;
Quando voc especifica vrios conjuntos de valores na visualizao de cdigo e abre o painel pop-up de edio, apenas o primeiro conjunto de
valores exibido. Se voc editar esse conjunto de valores no painel pop-up, apenas o primeiro conjunto de valores no cdigo ser afetado. Os
outros conjuntos de valores no so afetados e so aplicados conforme especificado no cdigo.
Para o incio
Na exibio de Categoria, a sombra do texto listada abaixo da categoria Fonte. A sombra da caixa, o raio da borda e a imagem da borda so
listados abaixo da categoria Borda.
Para o incio
O Dreamweaver CS 5.5 tambm suporta implementaes especficas de navegador (webkit, Mozilla) nas propriedades sombra da caixa, raio da
borda e imagem da borda.
Na exibio de Categoria, use as opes abaixo da respetiva categoria do navegador para verificar a compatibilidade do navegador para essas
propriedades. Por exemplo, para estar de acordo com a implementao do Mozilla da propriedade de imagem da borda, edite -moz-border-image
na categoria do Mozilla.
Para o incio
As alteraes feitas nas propriedades CSS no so exibidas na Visualizao de design. Mude para a Visualizao dinmica para visualizar as
alteraes. Voc tambm pode fazer edies rpidas nas propriedades CSS3 na Visualizao dinmica, e as alteraes refletiro de forma
imediata nessa visualizao.
As seguintes propriedades CSS3 tm suporte na Visualizao dinmica:
sombra do texto
raio da borda
-webkit-box-shadow
-webkit-border-image
Adobe recomenda
Para o incio
Para o incio
Para o incio
1. Abra uma pgina HTML que contm CSS incorporada no cabealho do documento.
2. Selecione qualquer parte do cdigo CSS.
3. Selecione Comandos > Aplicar formatao de origem seleo.
As opes de formatao definidas nas preferncias de formatao do cdigo CSS so aplicadas a todas as regras CSS apenas no
cabealho do documento.
Nota: Voc pode selecionar Comandos > Aplicar formatao de origem para formatar o documento inteiro de acordo com as preferncias
de formatao de cdigo especificadas.
Mais tpicos da Ajuda
Adobe recomenda
Para o incio
Para o incio
Para o incio
No painel Estilos CSS (modo Tudo), selecione uma regra e arraste-a para o local desejado. Voc pode selecionar e arrastar para reordenar as
regras em uma folha de estilos ou mover uma regra para outra folha de estilos ou cabealho de documento.
possvel mover mais de uma regra por vez, mantendo pressionada a tecla Control (Windows) ou mantendo pressionada a tecla Command
(Macintosh) enquanto clica em vrias regras para selecion-las.
Para o incio
No painel Estilos CSS, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto
clica nas regras a serem selecionadas.
Mais tpicos da Ajuda
Para o incio
No modo Atual, o painel Estilos CSS exibe trs painis: o painel Resumo para seleo que exibe as propriedades CSS da seleo atual no
documento, o painel Regras que exibe o local das propriedades selecionadas (ou uma cascata de regras da tag selecionada, dependendo da sua
seleo) e o painel Propriedades que permite editar as propriedades CSS da regra aplicada seleo.
Voc pode redimensionar qualquer um desses painis arrastando as bordas entre os painis ou pode redimensionar as colunas arrastando os
divisores.
O painel Resumo para seleo exibe um resumo das propriedades CSS e seus respectivos valores referentes ao item atualmente selecionado no
documento ativo. O resumo mostra as propriedades de todas as regras que se aplicam diretamente seleo. Somente as propriedades definidas
so mostradas.
Por exemplo, as regras a seguir criam um estilo de classe um e um estilo de tag (neste caso, de pargrafo):
.foo{
color: green;
font-family: 'Arial';
}
p{
font-family: 'serif';
font-size: 12px;
}
Quando voc seleciona um texto de pargrafo com o estilo de classe .foo na janela Documento, o painel Resumo para seleo exibe as
propriedades das duas regras, pois ambas se aplicam seleo. Nesse caso, o painel Resumo para seleo listar as seguintes propriedades:
font-size: 12px
font-family: 'Arial'
color: green
O painel Resumo para seleo organiza as propriedades em ordem crescente de especificidade. No exemplo acima, o estilo de tag define o
tamanho de fonte, e o estilo de classe define a famlia de fontes e a cor. (A famlia de fontes definida pelo estilo de classe substitui a famlia de
fontes definida pelo estilo de tag porque os seletores de classe tm uma especificidade maior do que os seletores de tag. Para obter mais
informaes sobre a especificidade CSS, consulte www.w3.org/TR/CSS2/cascade.html.)
O painel Regras exibe duas visualizaes diferentes visualizao Sobre ou visualizao Regras dependendo da seleo. Na visualizao
Sobre (a visualizao padro), o painel exibe o nome da regra que define a propriedade CSS selecionada e o nome do arquivo que contm a
regra. Na visualizao Regras, o painel exibe uma cascata ou hierarquia de todas as regras que se aplicam direta ou indiretamente seleo
atual. (A tag qual a regra se aplica diretamente aparece na coluna da direita.) Voc pode alternar entre duas visualizaes clicando nos botes
Mostrar informaes ou Mostrar cascata no canto superior direito do painel Regras.
Quando voc seleciona uma propriedade no painel Resumo para seleo, todas as propriedades da regra de definio aparece no painel
Propriedades. (A regra de definio tambm estar selecionada no painel Regras, caso a visualizao Regras esteja selecionada.) Por exemplo,
se voc tiver uma regra chamada .maintext que define uma famlia de fontes, um tamanho de fonte e a cor, a seleo de qualquer uma dessas
propriedades no painel Resumo para seleo exibir todas as propriedades definidas pela regra .maintext no painel Propriedades, bem como a
regra .maintext selecionada no painel Regras. (Alm disso, a seleo de qualquer regra no painel Regras exibir as propriedades dessa regra no
painel Propriedades.) Em seguida, voc poder usar o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no
documento atual ou vinculada atravs de uma folha de estilos anexada. Por padro, o painel Propriedades mostra apenas as propriedades que j
foram definidas e as organiza em ordem alfabtica.
Voc pode optar por exibir o painel Propriedades em duas outras visualizaes. A visualizao de categoria exibe as propriedades agrupadas em
categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria, exibidas em texto azul. A
visualizao de lista exibe uma lista alfabtica de todas as propriedades disponveis e, da mesma forma, ordena as propriedades definidas na
parte superior, exibindo-as em texto azul. Para alternar entre as visualizaes, clique no boto Mostrar visualizao de categoria, Mostrar
visualizao de lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades.
Em todas as visualizaes, as propriedades definidas so exibidas em azul. As propriedades irrelevantes para uma seleo so exibidas com
uma linha tachada vermelha. Ao manter o cursor do mouse sobre uma regra irrelevante, voc far com que seja exibida uma mensagem
explicando por que a propriedade irrelevante. Geralmente, uma propriedade irrelevante porque ela sobreposta ou no uma propriedade
herdada.
Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize enquanto trabalha.
Para o incio
No modo Tudo, o painel Estilos CSS exibe dois painis: o painel Todas as regras (na parte superior) e o painel Propriedades (na parte inferior). O
painel Todas as regras exibe uma lista de regras definidas no documento atual, bem como as regras definidas nas folhas de estilo anexadas ao
documento atual. O painel Propriedades permite editar propriedades CSS para todas as regras selecionadas no painel Todas as regras.
Voc pode redimensionar o painel arrastando a borda entre os painis e pode redimensionar as colunas Propriedades arrastando seus
respectivos divisores.
Quando voc seleciona uma regra no painel Todas as regras, todas as propriedades definidas nessa regra aparecem no painel Propriedades. Em
seguida, use o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no documento atual ou vinculada em uma
folha de estilos anexada. Por padro, o painel Propriedades mostra apenas as propriedades que j foram definidas e as organiza em ordem
alfabtica.
Voc pode optar por exibir as propriedades em duas outras visualizaes. A visualizao de categoria exibe as propriedades agrupadas em
categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria. A visualizao de lista
exibe uma lista alfabtica de todas as propriedades disponveis e, da mesma forma, ordena as propriedades definidas na parte superior. Para
alternar entre as visualizaes, clique no boto Mostrar visualizao de categoria, Mostrar visualizao de lista ou Mostrar somente propriedades
definidas, localizadas no canto inferior esquerdo do painel Propriedades. Em todas as visualizaes, a propriedades definidas so exibidas em
azul.
Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize enquanto trabalha.
Para o incio
Nos modos Tudo e Atual, o painel Estilos CSS contm trs botes que permitem alterar a visualizao no painel Propriedades (o painel inferior):
A. Anexar folha de estilos B. Nova regra CSS C. Editar estilo D. Desativar/ativar propriedade CSS E. Excluir regra CSS
Anexar folha de estilos Abre a caixa de dilogo Vincular a folha de estilos externa. Selecione uma folha de estilos externa para vincular ou
importe-a para o documento atual.
Nova regra CSS Abre uma caixa de dilogo na qual voc pode selecionar o tipo de estilo que est criando; por exemplo, para criar um estilo de
classe, redefinir uma tag HTML ou definir um seletor CSS.
Editar estilo Abre uma caixa de dilogo na qual voc pode editar os estilos no documento atual ou em uma folha de estilos externa.
Excluir regra CSS Remove a regra ou propriedade selecionada do painel Estilos CSS e remove a formatao de qualquer elemento ao qual ela
foi aplicada. (No entanto, este recurso no remove as propriedades de classe e ID referenciadas por esse estilo.) O boto Excluir regra CSS
tambm pode desanexar (ou desvincular) uma folha de estilos CSS anexada.
Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control (Macintosh) enquanto clica no painel Estilos CSS a
fim de abrir o menu de contexto de opes para trabalhar com os comandos de folha de estilos CSS.
Para o incio
Use o painel Estilos CSS para visualizar, criar, editar e remover estilos CSS, bem como para anexar folhas de estilos externas aos documentos.
Siga um destes procedimentos:
Selecione Janela > Estilos CSS.
Pressione Shift+F11.
Clique no boto CSS no Inspetor de propriedades.
Para o incio
Voc pode criar layouts de pgina inserindo manualmente tags div e aplicando os estilos de posicionamento CSS a elas. Uma tag div uma tag
que define divises lgicas no contedo de uma pgina da Web. Voc pode usar tags div para centralizar blocos de contedo, criar efeitos de
coluna, criar diferentes reas de cor e muito mais.
Se no estiver familiarizado com o uso das tags div e folhas de estilos em cascata (CSS) para criar pginas da Web, voc poder criar um layout
CSS baseado em um dos layouts predefinidos fornecidos com o Dreamweaver. Se no estiver acostumado a trabalhar com a CSS, mas estiver
familiarizado com as tabelas, voc dever tambm tentar utiliz-las.
Nota: O Dreamweaver trata todas as tags div com posio absoluta como elementos PA (elementos com posio absoluta), mesmo que voc
no tenha criado essas tags usando a ferramenta de desenho Div PA.
Para o incio
Para o incio
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!-#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>
Voc pode alterar as propriedades das Divs PA (ou qualquer elemento PA) na pgina, incluindo as coordenadas x e y, o ndice z (tambm
chamado de ordem de empilhamento) e a visibilidade.
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<div id="apDiv4"></div>
</div>
A representao grfica de qualquer conjunto de Divs PA pode ter a seguinte aparncia:
No primeiro conjunto de tags div, uma div est acima da outra na pgina.l No segundo conjunto, a div apDiv4 est, na verdade, dentro da div
apDiv3. (Voc pode alterar a ordem de empilhamento da Div PA no painel Elementos PA.)
O aninhamento geralmente usado para agrupar as Divs PA. Uma Div PA aninhada movida com sua Div PA me e pode ser definida para
herdar a visibilidade da tag-me.
Voc pode ativar a opo Aninhamento para fazer o aninhamento automtico ao desenhar uma Div PA comeando dentro de outra Div PA. Para
desenhar dentro ou sobre outra Div PA, a opo Evitar sobreposies deve estar desmarcada.
Desenho de uma Div PA aninhada
1. Verifique se a opo Evitar sobreposies est desmarcada no painel Elementos PA (Janela > Elementos PA).
2. Na categoria Layout do painel Inserir, clique no boto Desenhar Div PA
3. Na Visualizao de design da janela Documento, arraste para desenhar uma Div PA dentro de uma Div PA existente.
Se a opo Aninhamento estiver desativada nas preferncias de elementos PA, mantenha pressionada a tecla Alt (Windows) ou mantenha
pressionada a tecla Option (Macintosh) enquanto arrasta para aninhar uma Div PA dentro de uma Div PA existente.
A aparncia das Divs PA aninhadas podem variar de um navegador para outro. Ao criar Divs PA aninhadas, verifique frequentemente a
aparncia delas nos vrios navegadores durante o processo de design.
Insero de uma Div PA aninhada
1. Verifique se a opo Evitar sobreposies est desmarcada.
2. Coloque o ponto de insero dentro de uma Div PA existente na Visualizao de design da janela Documento e selecione Inserir > Objetos
de layout > Div PA.
Aninhamento automtico de Divs PA quando voc desenha uma Div PA dentro de outra
Selecione a opo Aninhamento nas Preferncias de elementos PA.
Quando voc seleciona um elemento PA, o Inspetor de propriedades exibe as propriedades desse elemento.
1. Selecione um elemento PA.
2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito, caso ela ainda no esteja
expandida, para ver todas as propriedades.
4. Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.
Seleo de elementos PA
Voc pode selecionar um ou mais elementos PA para manipul-los ou alterar suas propriedades.
Alm disso, o cone de olho no aparece quando no h visibilidade especificada (que aparece no Inspetor de propriedades como
visibilidade padro).
Alterao da visibilidade de todos os elementos PA simultaneamente
No painel Elementos PA (Janela > Elementos PA), clique no cone de olho do cabealho no topo da coluna.
Nota: Esse procedimento pode definir todos os elementos PA para visible ou hidden, mas no para inherit.
Redimensionamento de elementos PA
Voc pode redimensionar um elemento PA de cada vez ou redimensionar vrios elementos PA simultaneamente para que tenham a mesma
largura e altura.
Se a opo Evitar sobreposies estiver ativada, voc no poder redimensionar um elemento PA para que ele seja sobreposto por outro.
Redimensionamento de um elemento PA
1. Na Visualizao de design, selecione um elemento PA.
2. Siga um destes procedimentos para redimensionar um elemento PA:
Para redimensionar arrastando, arraste as alas de redimensionamento de qualquer elemento PA.
Para redimensionar um pixel por vez, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) enquanto pressiona uma
tecla de seta.
As teclas de seta movem as bordas direita e inferior do elemento PA. No possvel fazer o redimensionamento usando as bordas
superior e esquerda com essa tcnica.
Para redimensionar pelo incremento de encaixe de grade, mantenha pressionadas as teclas Shift e Control (Windows) ou mantenha
pressionadas as teclas Shift e Option (Macintosh) enquanto pressiona uma tecla de seta.
No Inspetor de propriedades (Janela > Propriedades), digite valores para largura (L) e altura (A).
O redimensionamento de um elemento PA altera sua largura e altura. Ele no define quanto do contedo do elemento PA estar visvel.
Voc pode definir a regio visvel de um elemento PA nas preferncias.
Redimensionamento de vrios elementos PA simultaneamente
1. Na Visualizao de design, selecione dois ou mais elementos PA.
2. Siga um destes procedimentos:
Selecione Modificar > Organizar > Tornar larguras iguais ou Modificar > Organizar > Tornar alturas iguais.
Os primeiros elementos PA selecionados tero a mesma largura ou altura do ltimo elemento PA selecionado.
No Inspetor de propriedades (Janela > Propriedades), em Vrios elementos CSS-P, digite os valores de largura e altura.
Os valores so aplicados a todos os elementos PA selecionados.
Movimentao de elementos PA
Voc pode mover os elementos PA na Visualizao de design quase da mesma maneira que move os objetos na maioria dos aplicativos grficos
bsicos.
Se a opo Evitar sobreposies estiver ativada, voc no poder mover um elemento PA para que ele sobreponha outro.
1. Na Visualizao de design, selecione um ou vrios elementos PA.
2. Siga um destes procedimentos:
Para mover arrastando, arraste a ala de seleo do ltimo elemento PA selecionado (realado em preto),
Para mover um pixel por vez, use as teclas de seta.
Mantenha pressionada a tecla Shift enquanto pressiona uma tecla de seta para mover o elemento PA pelo incremento atual de encaixe
de grade.
Alinhamento de elementos PA
Use os comandos de alinhamento de elemento PA para alinhar um ou mais elementos PA a uma borda do ltimo elemento PA selecionado.
Quando voc alinha elementos PA, os elementos PA filho no selecionados podem se mover, pois seu elemento PA pai selecionado e movido.
Para impedir que isso acontea, no use elementos PA aninhados.
1. Na Visualizao de design, selecione o elemento PA.
2. Selecione Modificar > Organizar e selecione uma opo de alinhamento.
Por exemplo, se voc selecionar Top, todos os elementos PA se movero para que suas bordas superiores fiquem na mesma posio
vertical da borda superior do ltimo elemento PA selecionado (realado em preto).
inserir um elemento PA usando o menu Inserir, digitar nmeros no Inspetor de propriedades ou reposicionar elementos PA editando o cdigofonte HTML, possivelmente os elementos PA sero sobrepostos ou aninhados enquanto esta opo estiver ativada. Se ocorrerem sobreposies,
arraste os elementos PA sobrepostos na Visualizao de design para separ-los.
No painel Elementos PA (Janela > Elementos PA), selecione a opo Evitar sobreposies.
Na janela Documento, selecione Modificar > Organizar > Impedir sobreposio de elemento AP.
Mais tpicos da Ajuda
Criar uma pgina com um layout CSS
Layout e design
Criao de layout de pgina com a Dreamweaver CS6
Adobe Creative Team (19 de julho de 2012)
tutorial
Neste tutorial, voc aprender as noes bsicas do design de pgina da Web, como criar miniaturas de design e wireframes, inserir e
formatar novos componentes em um layout de CSS predefinido e verificar a compatibilidade do navegador.
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Para o incio
Para o incio
Opo
Rtulo
Descrio
Alternar Div
Ocultar
Duplicar
Excluir
Bloquear
Alinhar
Os elementos fluidos em uma pgina podem ser atravessados de modo cclico usando as teclas de seta para esquerda e direita.
Selecione o limite de elemento e pressione a tecla de seta.
Elementos de aninhamento
Para o incio
Para aninhar elementos fluidos em outros elementos fluidos, certifique-se de que o foco esteja no elemento pai. Em seguida, insira o elemento
filho obrigatrio.
A duplicao aninhada tambm possvel. A duplicao aninhada duplica o HTML (o elemento selecionado) e gera a CSS fluida relevante. Os
elementos absolutos contidos no elemento selecionado so posicionados corretamente. Os elementos aninhados tambm podem ser duplicados
usando o boto Duplicar.
Quando voc exclui um elemento pai, a CSS correspondente ao elemento, seus filhos e o HTML associado so excludos. Os elementos
aninhados tambm podem ser excludos usando o boto Excluir (atalho de teclado: Ctrl+Delete).
Para o incio
Um layout de pgina CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o
contedo em uma pgina da Web. O bloco de criao bsico do layout CSS a tag div, uma tag HTML que, na maioria dos casos, atua como
um continer de texto, imagens e outros elementos de pgina. Quando voc cria um layout CSS, coloque tags div na pgina, adicione contedo a
elas e posicione-as em vrios lugares. Diferente das clulas de tabela, que so restritas a algum lugar dentro das linhas e colunas de uma tabela,
as tags div podem aparecer em qualquer lugar de uma pgina da Web. possvel posicionar tags div de forma absoluta (especificando
coordenadas x e y) ou relativa (especificando o seu local em relao ao seu local atual). Voc tambm pode posicionar as tags div especificando
flutuaes, preenchimentos e margens, o mtodo preferido pelos padres da Web de hoje.
A criao de layouts CSS do zero pode ser difcil porque h muitas formas de fazer isso. Voc pode criar um layout CSS simples de duas
colunas definindo flutuaes, margens, preenchimentos e outras propriedades CSS em uma quantidade quase infinita de combinaes. Alm
disso, o problema de processamento entre navegadores pode fazer com que determinados layouts CSS sejam exibidos corretamente em alguns
navegadores e incorretamente em outros. O Dreamweaver facilita a construo de pginas com layouts de CSS fornecendo 16 layouts
predefinidos que funcionam em diferenetes navegadores.
O uso dos layouts de CSS predefinidos que acompanham o Dreamweaver o modo mais fcil de criar uma pgina com um layout de CSS, mas
voc pode tambm criar layouts de CSS usando os elementos de posio absoluta do Dreamweaver (elementos AP). Um elemento AP no
Dreamweaver um elemento de pgina em HTML especificamente, uma tag div ou qualquer outra tag que tenha uma posio absoluta
atribuda a ela. Entretanto, h limitao dos elementos AP do Dreamweaver, pois eles esto posicionados de modo absoluto e suas posies
nunca se ajustam na pgina de acordo com o tamanho da janela do navegador.
Se voc um usurio avanado, tambm pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas para criar
layouts de pgina.
Para o incio
Antes de passar para esta seo, voc deve estar familiarizado com os conceitos bsicos da CSS.
O bloco de criao bsico do layout CSS a tag div, uma tag HTML que, na maioria dos casos, atua como um continer de texto, imagens e
outros elementos de pgina. O exemplo a seguir mostra uma pgina HTML que contm trs tags div separadas: uma tag de continer grande e
duas outras tags uma tag de barra lateral e uma tag de contedo principal dentro da tag de continer.
</div>
No exemplo acima, no h nenhum estilo anexado a nenhuma das tags div. Sem as regras CSS definidas, cada tag div e seu respectivo
contedo ficam em uma local padro da pgina. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), voc poder usar
suas IDs para criar regras CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div.
A regra CSS a seguir, que pode residir no cabealho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira tag div,
ou a de continer, na pgina:
#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;
}
A regra #container dita que a tag div de continer deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da
pgina), uma borda slida preta de 1 pixel, e o texto alinhado esquerda. Os resultados da aplicao da regra tag div de continer so os
seguintes:
Para o incio
Ao criar uma nova pgina no Dreamweaver, voc pode criar uma que j contenha um layout de CSS. O Dreamweaver vem acompanhado de 16
layouts de CSS diferentes qua voc pode escolher. Alm disso, possvel criar seus prprios layouts CSS e adicion-los pasta de
configurao, a fim de que eles apaream como opes de layout na caixa de dilogo Novo documento.
Os layouts de CSS do Dreamweaver so processados corretamente nos seguintes navegadores: Firefox (Windows e Macintosh) 1.0, 1.5, 2.0 e
3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 e 8.0; Opera (Windows e Macintosh) 8.0, 9.0 e 10.0; Safari 2.0, 3.0 e 4.0; e Chrome 3.0.
Para obter um artigo informativo que explica como usar os layouts de CSS que acompanham o Dreamweaver, consulte o Dreamweaver
Developer Center.
Tambm h mais layouts de CSS disponveis no Adobe Dreamweaver Exchange.
Adicionar ao cabealho Adiciona CSS do layout ao cabealho da pgina que voc est criando.
Criar novo arquivo Adiciona a CSS do layout nova folha de estilos CSS externa e anexa a nova folha de estilos pgina que voc est
criando.
Vincular ao arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS necessrias ao
layout. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico
arquivo) em vrios documentos.
7. Siga um destes procedimentos:
Se voc selecionou Adicionar a cabealho em CSS de layout no menu pop-up (a opo padro), clique em Criar.
Se voc selecionar Criar novo arquivo no menu pop-up CSS de layout, clique em Criar e especifique um nome para o novo arquivo
externo na caixa de dilogo Salvar arquivo de folha de estilos como.
Se voc selecionou Vincular a arquivo existente em CSS de layout no menu pop-up, adicione o arquivo externo caixa de texto Anexar
arquivo CSS, clicando no cone Adicionar folha de estilos, preenchendo a caixa de dilogo Anexar folha de estilos externa e clicando em
OK. Quando terminar, clique em Criar na caixa de dilogo Novo documento.
Nota: Quando voc selecionar a opo Vincular a arquivo existente, o arquivo especificado j dever ter regras para o arquivo CSS nele
contido.
Quando voc aplicar o CSS de layout em um novo arquivo ou vincular a um arquivo existente, o Dreamweaver automaticamente vincula o
arquivo pgina em HTML que voc est criando.
Nota: Os comentrios condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem
incorporados no cabealho do novo documento de layout CSS, mesmo se voc selecionar Novo arquivo externo ou Arquivo externo
existente como local da CSS do layout.
8. (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao criar a pgina. Para
fazer isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS.
Para obter uma descrio detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos
de David Powers.
Para o incio
Efeitos do Spry so aprimoramentos visuais que podem ser aplicados a quase todo elemento de uma pgina HTML com o uso de JavaScript. Os
efeitos so geralmente usados para realar informaes, criar transies animadas ou alterar um elemento de pgina visualmente por
determinado perodo. Voc pode aplicar efeitos aos elementos HTML sem necessidade de tags personalizadas adicionais.
Nota: Para aplicar um efeito a um elemento, ele deve estar selecionado ou ter uma identificao. Se, por exemplo, voc est aplicando um
realce a uma tag div que no est selecionada, o div deve ter um valor vlido de identificao. Se o elemento no existir, voc ter que adicionar
um ao cdigo HTML.
Os efeitos podem alterar a opacidade, a escala, a posio e as propriedades de estilo de um elemento como a cor de fundo. Voc pode criar
efeitos visuais interessantes combinando duas ou mais propriedades.
Como esses efeitos se baseiam no Spry, quando o usurio clica em um elemento com um efeito, somente o elemento atualizado
dinamicamente, sem atualizao da pgina HTML inteira.
O Spry inclui estes efeitos:
Aparecer/Desaparecer Faz um elemento aparecer ou desaparecer.
Realce Altera a cor de fundo de um elemento.
Cego Simula uma veneziana que abre ou fecha para ocultar ou revelar o elemento.
Deslizar Move o elemento para cima ou para baixo.
Aumentar/Diminuir Aumenta ou reduz o tamanho do elemento.
Espalhar D a impresso de que o elemento se espalha da esquerda para a direita.
Apertar Faz o elemento desaparecer no canto superior esquerdo da pgina.
Importante: Quando voc usa um efeito, vrias linhas de cdigo so adicionadas ao arquivo na Visualizao de cdigo. Uma linha identifica o
arquivo SpryEffects.js, que necessrio para incluir os efeitos. No remova essa linha do cdigo ou os efeitos no funcionaro.
Para obter uma viso geral abrangente dos efeitos do Spry disponveis na estrutura do Spry, consulte
www.adobe.com/go/learn_dw_spryeffects_br.
Para o incio
Nota: Voc pode usar este efeito com qualquer elemento HTML, exceto applet, body, iframe, object, tr, tbody ou th.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Aparecer/Desaparecer no
menu.
3. Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
4. Na caixa Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5. Selecione o efeito que deseja aplicar: Desaparecer ou Aparecer.
6. Na caixa Desaparecer de, defina a porcentagem de opacidade para quando o efeito aparecer.
7. Na caixa Desaparecer at, defina a porcentagem de opacidade para at quando o efeito desaparecer.
8. Selecione Alternar efeito se voc quiser que o efeito seja reversvel, passando de desaparecer para aparecer e vice-versa com cliques
sucessivos.
Para o incio
Nota: Use esse efeito somente com estes elementos HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir,
menu oupre.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Veneziana no menu.
3. Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
4. Na caixa Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5. Selecione o efeito que deseja aplicar: Ocultar ou Mostrar.
6. Na caixa Ocultar de/Mostrar de, defina o ponto inicial de rolagem do efeito como uma porcentagem ou um nmero pixel. Esses valores so
calculados a partir da parte superior do elemento.
7. No campo Ocultar at/Mostrar at, defina o ponto final de rolagem do efeito como uma porcentagem ou um nmero pixel. Esses valores
so calculados a partir da parte superior do elemento.
8. Selecione Alternar efeito se voc quiser que o efeito seja reversvel, rolando a tela para cima e para baixo com cliques sucessivos.
Para o incio
Nota: Use esse efeito com estes elementos HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu oupre.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Aumentar/Diminuir no menu
pop-up.
3. Selecione a ID do elemento no menu pop-up do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
4. No campo Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5. Selecione o efeito que deseja aplicar: Aumentar ou Diminuir.
6. Na caixa Aumentar de/Diminuir de, defina o tamanho do elemento quando o efeito comea. Deve ser uma porcentagem do tamanho ou um
valor em pixel.
7. Na caixa Aumentar at/Diminuir at, defina o tamanho do elemento quando o efeito termina. Deve ser uma porcentagem do tamanho ou um
valor em pixel.
8. Se voc optar por pixels para as caixas Aumentar/Diminuir de ou at, o campo de largura e altura ficar visvel. Dependendo da opo
escolhida, o elemento aumentar ou diminuir proporcionalmente.
9. Indique se voc deseja que o elemento aumente ou diminua no canto superior esquerdo da pgina ou no centro da pgina.
10. Selecione Alternar efeito se voc quiser que o efeito seja reversvel, aumentando e diminuindo com cliques sucessivos.
Para o incio
Nota: Voc pode usar este efeito com qualquer elemento HTML, excetoapplet, body, frame, frameset ou noframes.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Realce no menu.
3. Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
4. Na caixa Durao do efeito, defina em milissegundos o tempo de durao do efeito.
5. Selecione a cor para iniciar o realce.
6. Selecione a cor para finalizar o realce. Essa cor dura somente pelo tempo definido em Durao do efeito.
7. Selecione a cor que o elemento ter depois que o realce terminar.
8. Selecione Alternar efeito se voc quiser que o efeito seja reversvel, alternando as cores de realce com cliques sucessivos.
Para o incio
Nota: Use esse efeito com estes elementos HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object,
p, ol, ul, li, applet, dir, hr, menu, pre outable.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Espalhar no menu.
3. Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
Para o incio
Para que o efeito Deslizar funcione adequadamente, uma tag de recipiente com um ID exclusivo deve ser colocada em volta do elemento de
destino. A tag de recipiente que voc coloca em volta do elemento de destino deve ser uma tag blockquote, dd, form, div ou center.
A tag do elemento de destino deve ser uma das seguintes: blockquote, dd,div, form, center, table, span, input, textarea, select ou image.
1. (Opcional) Selecione a tag de recipiente do contedo ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Deslizar no menu.
3. Selecione a ID da tag de recipiente no menu do elemento de destino. Se o recipiente j estiver selecionado, escolha <Seleo atual>.
4. No campo Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito.
5. Selecione o efeito que deseja aplicar: Deslizar para cima ou Deslizar para baixo.
6. Na caixa Deslizar para cima, defina o ponto inicial de deslizamento como uma porcentagem ou um nmero pixel.
7. Na caixa Deslizar para cima at, defina o ponto final de deslizamento como uma porcentagem ou um nmero positivo em pixel.
8. Selecione Alternar efeito se voc quiser que o efeito seja reversvel, deslizando a tela para cima e para baixo com cliques sucessivos.
Para o incio
Nota: Use esse efeito somente com estes elementos HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu oupre.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Apertar no menu.
3. Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
Para o incio
Voc pode associar vrios comportamentos de efeitos com o mesmo elemento para produzir resultados interessantes.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione um efeito no menu Efeitos.
3. Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha <Seleo atual>.
Excluir um efeito
Voc pode remover um ou mais comportamentos de efeitos de um elemento.
1. (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.
2. No painel Comportamentos (Janela > Comportamentos), clique no efeito que voc deseja excluir da lista de comportamentos.
3. Siga um destes procedimentos:
Clique no boto Remover evento na barra de ttulo do subpainel (-).
Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) sobre o comportamento e selecione Excluir
comportamento.
Para o incio
Cores
Cores aceitas pela Web
Usar o seletor de cores
Para o incio
Em HTML, as cores so expressas como valores hexadecimais (por exemplo, #FF0000) ou como nomes de cor (red). Uma cor aceita pela Web
aquela que aparece idntica no SAfari e Microsoft Internet Explorer, nos sistemas Windows e Macintosh, quando a execuo feita no modo de
256 cores. Em geral, sabe-se que h 216 cores comuns e que nenhum valor hexadecimal que combina os pares 00, 33, 66, 99, CC, ou FF
(valores RGB 0, 51, 102, 153, 204 e 255, respectivamente) representa uma cor aceita pela Web.
Os testes, no entanto, revelam que h somente 212 cores aceitas pela Web, em vez de 216, pois o Internet Explorer do Windows no processa
corretamente as cores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0).
Quando os navegadores da Web compuseram inicialmente sua aparncia, a maioria dos computadores exibia somente 265 cores (8 bits por canal
(bpc)). Hoje, a maioria dos computadores exibem milhares ou milhes de cores (16 e 32 bpc). Portanto, a justificativa para o uso da paleta aceita
por navegadores ser consideravelmente reduzida se voc estiver desenvolvendo o site para usurios de sistemas de computador atuais.
Um motivo para o uso da paleta de cores aceitas pela Web o desenvolvimento de dispositivos alternativos da Web, como PDA e visores de
telefone celular. Muitos desses dispositivos oferecem apenas visores em preto-e-branco (1 bpc) ou visores de 256 cores (8 bpc).
As paletas Cubos de cor (padro) Tom contnuo do Dreamweaver usam a paleta de 216 cores aceitas pela Web. A seleo de uma cor nessas
paletas exibe o valor hexadecimal da cor.
Para selecionar uma cor fora do intervalo de cores aceitas pela Web, abra o seletor de cores do sistema clicando no boto Roda de cores no
canto superior direito do seletor de cores do Dreamweaver. O seletor de cores do sistema no se limita s cores aceitas pela Web.
As verses UNIX dos navegadores usam uma paleta de cores diferente da oferecida pelas verses do Windows e Macintosh. Se voc estiver
desenvolvendo dispositivos exclusivamente para navegadores UNIX (ou se seu pblico-alvo for usurios do Windows ou Macintosh com
monitores de 24 bpc e usurios do UNIX com monitores de 8 bpc), recomenda-se o uso de valores hexadecimais que combinam os pares 00, 40,
80, BF, ou FF, que produzem cores aceitas pela Web para SunOS.
Para o incio
No Dreamweaver, vrias das caixas de dilogo, bem como o Inspetor de propriedades de vrios elementos de pgina, contm uma caixa de
cores, que abre um seletor de cores. Use o seletor de cores para selecionar uma cor para um elemento de pgina. Voc tambm pode definir a
cor de texto padro dos elementos de pgina.
1. Clique em uma caixa de cores em qualquer caixa de dilogo ou no Inspetor de propriedades.
O seletor de cores exibido.
2. Siga um destes procedimentos:
Use o conta-gotas para selecionar uma amostra de cores na paleta. Todas as cores das paletas Cubos de cor (padro) ou Tom
contnuo so aceitas pela Web; as outras paletas no.
Use o conta-gotas para selecionar uma cor em qualquer lugar da tela, mesmo que seja fora das janelas do Dreamweaver. Para
selecionar uma cor na rea de trabalho ou em outro aplicativo, mantenha pressionado o boto do mouse. Isso permitir que o contagotas retenha o foco e selecione uma cor fora do Dreamweaver. Se voc clicar na rea de trabalho ou em outro aplicativo, o
Dreamweaver selecionar a cor em que voc clicou. No entanto, se voc alternar para outro aplicativo, talvez seja necessrio clicar em
uma janela do Dreamweaver para continuar trabalhando no Dreamweaver.
Para expandir a seleo de cor, use o menu pop-up no canto superior direito do seletor de cores. Voc pode selecionar Cubos de cor,
Tom contnuo, SO Windows, Mac OS e Tons de cinza.
Nota: As paletas Cubos de cor e Tom contnuo so aceitas pela Web, ao passo que SO Windows, Mac OS e Tons de cinza no.
Para limpar a cor atual sem escolher outra cor, clique no boto Cor padro
Para abrir o seletor de cores do sistema, clique no boto Roda de cores
.
.
Para o incio
No Dreamweaver, voc pode criar um arquivo de consulta de mdia para todo o site ou uma consulta de mdia para um documento especfico.
Arquivo de consulta de mdia para todo o site Especifica configuraes de exibio de todas as pginas em seu site que incluem o arquivo.
O arquivo de consulta de mdia para todo o site age como repositrio central de todas as consultas de mdia em seu site. Depois de criar o
arquivo, vincule-o a pginas em seu site que precisem usar consultas de mdia para a exibio do arquivo.
Consulta de mdia para documento especfico A consulta de mdia inserida diretamente no documento, e a pgina exibida com base na
consulta de mdia inserida.
1. Crie uma pgina da web.
2. Selecione Modificar > Consultas de mdia.
3. Siga um destes procedimentos:
Para criar um arquivo de consulta de mdia para todo o site, selecione Arquivo de consultas de mdia para todo o site.
Para criar uma consulta de mdia especfica de um documento, selecione Este documento.
4. Para fazer uma consulta de mdia para todo o site, faa o seguinte:
a. Clique em Especificar.
b. Selecione Criar novo arquivo.
c. Especifique um nome para o arquivo e clique em OK.
5. possvel que alguns dispositivos no informem a largura real. Para forar dispositivos a informar a largura real, verifique se a opo
Forar dispositivos a informar largura real est ativada.
O seguinte cdigo inserido no arquivo quando voc escolhe essa opo.
<meta name="viewport" content="width=device-width">
6. Siga um destes procedimentos:
Clique em "+" para definir as propriedades do arquivo de consulta de mdia.
Clique em Predefinies Padro se quiser comear com predefinies padro.
7. Selecione linhas na tabela e edite as respectivas propriedades usando as opes em Propriedades.
Descrio A descrio do dispositivo para o qual o arquivo CSS deve ser usado. Por exemplo, telefone, televiso, mesa digitalizadora,
etc.
Largura mnima e mxima O arquivo CSS usado para dispositivos cuja largura informada est dentro dos valores especificados.
Nota: Deixe a Largura mnima ou a Largura mxima em branco se no desejar especificar um intervalo explcito para um dispositivo. Por
exemplo, comum deixar a Largura mnima em branco para telefones, cuja largura de 320px ou menos.
Arquivo CSS Selecione Usar arquivo existente e navegue at o arquivo CSS do dispositivo.
Se deseja especificar um arquivo CSS que ainda ser criado, selecione Criar novo arquivo. Digite o nome do arquivo CSS. O arquivo
criado quando voc pressiona OK.
8. Clique em OK.
9. Um novo arquivo criado para um consulta de mdia para todo o site. Salve-o.
Consulta de mdia para todo o site: Em pginas existentes, verifique se voc incluiu o arquivo de consulta de mdia em todas as pginas na tag
<head>.
Exemplo de um link de consulta de mdia onde mediaquery_adobedotcom.css o arquivo de consulta de mdia para todo o site
www.adobe.com/br de site:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Para o incio
Para o incio
Use este procedimento para alterar o arquivo de consultas de mdia para todo o site que voc definiu na caixa de dilogo Consultas de mdia.
1. Selecione Site > Gerenciar sites.
2. Na caixa de dilogo Gerenciar sites, selecione o seu site.
3. Clique em Editar. A caixa de dilogo Configurao de site exibida.
4. Em Configuraes avanadas no painel esquerdo, selecione Informaes locais.
5. No arquivo de consulta de mdia para todo o site, no painel direito, clique em Procurar para selecionar o arquivo CSS da consulta de mdia.
Nota: A alterao do arquivo de consulta de mdia para todo o site no afeta documentos vinculados a um arquivo de consulta de mdia
para todo o site diferente ou anterior.
6. Clique em Salvar.
Para o incio
As dimenses especificadas em uma consulta de mdia aparecem nas opes de tamanho de boto/janela de vrias telas. Quando voc
seleciona uma dimenso do menu, as seguintes modificaes so vistas:
O tamanho da visualizao muda para refletir as dimenses especificadas. O tamanho do quadro de documento permanece inalterado.
O arquivo CSS especificado na consulta de mdia usado para exibir a pgina.
Para o incio
Siga estas etapas gerais para projetar e criar com xito um site dinmico.
1. Criar a pgina.
Uma das etapas principais da criao de qualquer site seja esttico ou dinmico o design visual da pgina. Durante a adio de
elementos dinmicos a uma pgina da Web, o design da pgina se torna essencial usabilidade. Voc deve pensar bem em como os
usurios iro interagir com as pginas individuais e os sites como um todo.
Um mtodo comum de incorporao de contedo dinmico a uma pgina da Web criar uma tabela para apresentar contedo e importar
contedo dinmico para uma ou mais clulas da tabela. Usando esse mtodo, voc pode apresentar informaes de vrios tipos em um
formato estruturado.
2. Crie uma fonte de contedo dinmico.
Os sites dinmicos precisam de uma fonte de contedo da qual extraem dados para que possam exibi-los em uma pgina da Web. Para
poder usar fontes de contedo em uma pgina da Web, voc deve fazer o seguinte:
Crie uma conexo com a fonte de contedo dinmico (como, por exemplo, um banco de dados) e o servidor de aplicativo que processa
a pgina. Crie a fonte de dados usando o painel Ligaes; em seguida, voc pode selecionar e inserir a fonte de dados na pgina.
Especifique quais informaes no banco de dados voc deseja exibir ou quais variveis deve incluir na pgina criando um conjunto de
registros. Voc tambm pode testar a consulta na caixa de dilogo Conjunto de registros e fazer todos os ajustes necessrios antes de
adicion-los ao painel Ligaes.
Selecione e insira elementos de contedo dinmico na pgina selecionada.
3. Adicione contedo dinmico pgina da Web.
Depois de definir um conjunto de registros ou outra fonte de dados e adicion-lo ao painel Ligaes, voc pode inserir o contedo dinmico
que o conjunto de registros representa na pgina. A interface controlada por menu do Dreamweaver simplifica a adio de elementos de
contedo dinmico tanto quanto a seleo de uma fonte de contedo dinmico no painel Ligaes, alm de sua insero em texto, imagem
ou objeto de formulrio dentro da pgina atual.
Quando voc insere um elemento de contedo dinmico ou outro comportamento em uma pgina, o Dreamweaver insere um script do
servidor no cdigo-fonte da pgina. Esse script instrui o servidor a recuperar dados da fonte definida e process-los dentro da pgina da
Web. Para colocar contedo dinmico em uma pgina da Web, voc pode seguir um dos seguintes procedimentos:
Coloque-o no ponto de insero na Visualizao de cdigo ou de design.
Substitua uma sequncia de caracteres de texto ou outro alocador de espao.
Insira-o em um atributo HTML. Por exemplo, o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um
campo de formulrio.
4. Adicione comportamentos de servidor a uma pgina.
Alm de adicionar contedo dinmico, voc pode incorporar uma lgica de aplicativo complexa a pginas da Web usando comportamentos
de servidor. Comportamentos de servidor so partes predefinidas de cdigo do servidor que adicionam lgica de aplicativo a pginas da
Web, proporcionando maior interao e funcionalidade.
Os comportamentos de servidor do Dreamweaver permitem adicionar lgica de aplicativo a um site sem a necessidade de que voc
escreva o cdigo. Os comportamentos de servidor fornecidos com o Dreamweaver do suporte a tipos de documento do ColdFusion, ASP,
e PHP. Os comportamentos de servidor so escritos e testados para que sejam rpidos, seguros e eficientes. Os comportamentos de
servidor incorporados do suporte a pginas da Web em vrias plataformas para todos os navegadores.
O Dreamweaver fornece uma interface apontar e clicar que torna a aplicao de contedo dinmico e de comportamentos complexos a uma
pgina to fcil quanto a insero de elementos de texto e design. Os seguintes comportamentos de servidor esto disponveis:
Defina um conjunto de registros de um banco de dados existente. Em seguida, o conjunto de registros que voc define armazenado
no painel Ligaes.
Exiba vrios registros em uma nica pgina. Voc seleciona uma tabela inteira ou clulas individuais ou linhas com contedo dinmico
e especifica o nmero de registros a serem exibidos em cada visualizao de pgina.
Crie e insira uma tabela dinmica em uma pgina e associe a tabela a um conjunto de registros. Voc pode modificar posteriormente a
aparncia da tabela e a regio repetitiva usando o Inspetor de propriedades e o comportamento de servidor Regio repetitiva,
respectivamente.
Insira um objeto de texto dinmico em uma pgina. O objeto de texto que voc insere um item de um conjunto de registros
predefinido ao qual possvel aplicar qualquer um dos formatos de dados.
Crie controles de navegao em registros e de status, pginas mestre/detalhadas e formulrios para a atualizao das informaes em
um banco de dados.
Exiba mais de um registro de um banco de dados.
Crie links para navegao no conjunto de registros que permitam aos usurios exibir os registros anterior ou seguinte de um banco de
dados.
Adicione um contador de registros para ajudar os usurios a controlar quantos registros retornaram e onde eles se encontram no
resultado retornado.
Voc tambm pode estender os comportamentos de servidor do Dreamweaver escrevendo comportamentos de servidor prprios ou
instalando de outros fabricantes.
5. Teste e depure a pgina.
Antes de criar uma pgina dinmica ou um site inteiro disponvel na Web, voc deve testar sua funcionalidade. Voc tambm deve
considerar como a funcionalidade do aplicativo pode afetar pessoas com deficincias.
Mais tpicos da Ajuda
Adio e modificao de imagens
Para o incio
Um conjunto de dados do Spry essencialmente um objeto JavaScript que contm uma coleo de dados especificados por voc. Com o
Dreamweaver, voc pode rapidamente criar esse objeto e carregar nele dados de uma fonte de dados (como um arquivo XML ou HTML). O
conjunto de dados resulta em uma matriz de dados na forma de uma tabela padro, contendo linhas e colunas. Enquanto cria um conjunto de
dados do Spry com o Dreamweaver, voc pode tambm especificar como deseja exibir os dados em uma pgina da Web.
Considere um conjunto de dados como um continer virtual com uma estrutura de linhas e colunas. Ele existe como um objeto JavaScript cujas
informaes s ficam visveis quando voc especifica exatamente como exibi-lo na pgina da Web. Voc pode exibir todos os dados nesse
continer ou optar por exibir somente partes selecionadas.
Para obter informaes completas sobre o funcionamento dos conjuntos de dados do Spry, consulte
www.adobe.com/go/learn_dw_sdg_sprydataset_br.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com conjuntos de dados do Spry, consulte
www.adobe.com/go/dw10datasets_br.
Para assistir a um tutorial em vdeo sobre como trabalhar com conjuntos de dados do Spry, consulte www.adobe.com/go/lrvid4047_dw_br.
Para o incio
Nota: XPath (XML Path Language) uma sintaxe para lidar com trechos de um documento XML. Na maioria das vezes, essa sintaxe
usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL usada para bancos de dados de consulta.
Para obter mais informaes sobre o XPath, consulte a especificao da linguagem XPath no site da W3C em www.w3.org/TR/xpath.
Quando terminar de usar a tela Especificar fonte de dados, clique em Concludo para criar o conjunto de dados imediatamente, ou
ento em Avanar para passar tela Definir opes de dados. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no
painel Ligaes (Janela > Ligaes).
4. Na tela Definir opes de dados, faa o seguinte:
(Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de coluna no menu pop-up
Tipo. Por exemplo, se uma coluna no conjunto de dados contm nmeros, selecione-a e escolha number no menu pop-up Tipo. Essa
opo s ser importante se voc quiser que seus usurios possam ordenar os dados por essa coluna.
Voc pode selecionar uma coluna do conjunto de dados clicando em seu cabealho, escolhendo-a no menu pop-up Nome da coluna ou
navegando at ela com as setas para a esquerda e para a direita no canto superior esquerdo da tela.
(Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a ordenao no menu pop-up
Ordenar coluna. Depois de selecionar a coluna, voc poder especificar o uso de ordem crescente ou decrescente.
(Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados.
(Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto de dados. Se quiser
atualizar os dados automaticamente, selecione Atualizar dados automaticamente e especifique um tempo de atualizao em
milissegundos.
Quando terminar de usar a tela Definir opes de dados, clique em Concludo para criar o conjunto de dados imediatamente, ou ento
em Avanar para passar tela Escolher opes de insero. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no
painel Ligaes (Janela > Ligaes).
5. Na tela Escolher opes de insero, siga um destes procedimentos:
Selecione um layout para o novo conjunto de dados e especifique as opes de configurao adequadas. Para obter mais informaes,
consulte Escolher um layout para o conjunto de dados.
Selecione No inserir HTML. Se voc selecionar essa opo, o Dreamweaver criar o conjunto de dados, mas no adicionar HTML
pgina. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados manualmente do
conjunto de dados para a pgina.
6. Clique em Concludo.
O Dreamweaver criar o conjunto de dados e, se voc tiver selecionado uma opo de layout, exibir na sua pgina o layout e os
alocadores de espao para os dados. Se observar a Visualizao de cdigo, voc ver que o Dreamweaver adicionou ao cabealho
referncias aos arquivos xpath.js e SpryData.js. Esses arquivos so ativos importantes do Spry que funcionam em conjunto com a pgina.
No remova esse cdigo da sua pgina, ou ento o conjunto de dados no funcionar. Quando carregar sua pgina em um servidor, voc
precisar carregar tambm esses arquivos como dependentes.
Classe Linha mpar Altera a aparncia das linhas com numerao mpar na tabela dinmica, de acordo com o estilo de classe
selecionado.
Classe Linha par Altera a aparncia das linhas com numerao par na tabela dinmica, de acordo com o estilo de classe selecionado.
Classe Focalizao Altera a aparncia de uma linha da tabela quando voc move o mouse sobre ela, de acordo com o estilo de classe
selecionado.
Classe Seleo Altera a aparncia de uma linha da tabela quando voc clica nela, de acordo com o estilo de classe selecionado.
Nota: A ordem das classes mpar, par, de focalizao e de seleo na sua folha de estilos muito importante. As regras devem estar na
ordem exata indicada acima (mpar, par, focalizao, seleo). Se a regra de focalizao aparecer abaixo da regra de seleo na folha de
estilos, o efeito de focalizao no aparecer at que o usurio mova o mouse sobre outra linha. Se as regras de focalizao e seleo
aparecerem acima das regras par e mpar na folha de estilos, os efeitos de par e mpar no funcionaro. Voc pode arrastar as regras no
painel CSS para orden-las corretamente, ou ento manipular o cdigo CSS diretamente.
4. Se a tabela que voc est criando for se tornar uma tabela mestre dinmica do Spry, selecione Atualizar regies de detalhes quando a linha
estiver selecionada. Para obter mais informaes, consulte Sobre tabelas mestre dinmicas do Spry e atualizao de regies de detalhes.
5. Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver a tabela aparecer com uma linha de cabealhos e uma linha de referncias de dados. As
referncias de dados aparecem realadas e entre chaves ({}).
Layout mestre/detalhado
Selecione essa opo se quiser exibir seus dados usando um layout mestre/detalhado. O layout mestre/detalhado permite aos usurios clicar em
um item na regio mestre ( esquerda) que atualiza as informaes na regio detalhada ( direita). Normalmente, a regio mestre contm uma
longa lista de nomes; por exemplo, uma lista dos produtos disponveis. Quando o usurio clica em um dos nomes de produtos, a regio detalhada
exibe muito mais informaes detalhadas sobre a seleo.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir layout mestre/detalhado e siga estas etapas:
1. No painel Colunas mestre, ajuste o contedo da sua regio mestre da seguinte forma:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da regio mestre. Clique no sinal de adio (+) e
selecione um nome de coluna para adicionar novas colunas regio mestre. Por padro, o Dreamweaver preenche a regio mestre
com dados da primeira coluna do conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para
baixo no painel Colunas mestre define a ordem de aparecimento dos dados na regio mestre da pgina.
2. Repita as etapas acima para o painel Colunas detalhadas. Por padro, o Dreamweaver preenche a regio detalhada com todos os dados
que no aparecem na regio mestre (ou seja, todas as colunas, exceto a primeira do conjunto de dados).
3. (Opcional) Defina diferentes tipos de continer para os dados na regio detalhada. Para fazer isso, selecione o nome de uma coluna
detalhada e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre as tags DIV, P,
SPAN ou H1-H6.
4. Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver que as regies mestre/detalhada aparecero preenchidas com as referncias de dados
selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}).
Layout de contineres empilhados
Selecione essa opo se quiser exibir seus dados usando uma estrutura de contineres repetidos na pgina. Por exemplo, se voc tem quatro
colunas de dados no conjunto de dados, cada continer pode incluir as quatro colunas, e a estrutura de contineres se repetir para cada linha
no conjunto de dados.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir contineres empilhados e siga estas etapas:
1. No painel Colunas, ajuste o contedo dos seus contineres empilhados da seguinte forma:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna dos contineres empilhados. Clique no sinal de
adio (+) e selecione um nome de coluna para adicionar novas colunas aos contineres. Por padro, o Dreamweaver preenche os
contineres empilhados com dados de todas as colunas do conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para
baixo no painel Colunas define a ordem de aparecimento dos dados nos contineres empilhados da pgina.
2. (Opcional) Defina diferentes tipos de continer para os dados nos contineres empilhados. Para fazer isso, selecione o nome de uma
coluna do conjunto de dados e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre
as tags DIV, P, SPAN ou H1-H6.
3. Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver o continer preenchido com as referncias de dados selecionadas por voc. As referncias
Para o incio
A estrutura do Spry usa dois tipos de regies: uma a regio do Spry ao redor de objetos de dados como tabelas e listas de repeties, a outra
uma regio de detalhes do Spry usada com um objeto de tabela mestre para permitir a atualizao dinmica de dados em uma pgina do
Dreamweaver.
Todos os objetos de dados do Spry devem estar em uma regio do Spry. (Se voc tentar adicionar um objeto de dados do Spry antes de
adicionar uma regio do Spry a uma pgina, o Dreamweaver solicitar a incluso de uma regio do Spry.) Por padro, as regies do Spry esto
em contineres div HTML. Voc pode adicion-las antes de adicionar uma tabela, adicion-las automaticamente ao inserir uma tabela ou lista de
repeties ou coloc-las em torno de tabelas ou objetos de lista de repeties existentes.
Ao adicionar uma regio de detalhes, normalmente voc adiciona o objeto de tabela mestre primeiro e seleciona a opo Atualizar regies de
detalhes (consulte Layout de tabela dinmica). O nico valor diferente e especfico para uma regio de detalhes a opo Tipo na caixa de
dilogo Inserir regio do Spry.
1. Selecione Inserir > Spry > Regio do Spry.
Voc tambm pode clicar no boto Regio do Spry, na categoria Spry do painel Inserir.
2. Para o objeto recipiente, selecione a opo <div> ou <span>. O padro usar um recipiente <div>.
3. Escolha uma das seguintes opes:
Para criar uma Regio do Spry, selecione Regio (a padro) como o tipo de regio a inserir.
Para criar uma Regio de detalhes do Spry, selecione a opo Regio de detalhes. Voc s usaria uma regio de detalhes se quisesse
ligar os dados dinmicos que so atualizados como dados em outras alteraes de regio do Spry.
Importante: preciso inserir uma regio de detalhes em um <div> diferente da regio da tabela mestre. Convm usar a Visualizao de
cdigo para posicionar o ponto de insero corretamente.
4. Escolha o conjunto de dados do Spry no menu.
5. Se quiser criar ou alterar a regio definida para um objeto, selecione o objeto e escolha uma destas opes:
Quebra de linha da seleo Coloca uma nova regio em torno de um objeto.
Substituir seleo Substitui uma regio existente de um objeto.
6. Quando voc clica em OK, o Dreamweaver coloca um alocador de espao de regio na pgina com o texto O contedo da regio do Spry
inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto de dados do Spry, como uma tabela ou lista de
repeties, ou por dados dinmicos no painel Ligaes (Janela > Ligaes).
Para o incio
Voc pode adicionar regies repetitivas para exibir os dados. Uma regio repetitiva uma estrutura de dados simples que voc pode formatar
quando necessrio para apresentar seus dados. Por exemplo, voc pode usar uma regio repetida para exibir um conjunto de miniaturas
fotogrficas, uma depois da outra, em um objeto de layout de pgina como um elemento AP div.
1. Selecione Inserir > Spry > Repetio do Spry.
Voc tambm pode clicar no boto Repetio do Spry, na categoria Spry do painel Inserir.
2. Para o recipiente do objeto, selecione a opo <div> ou <span> dependendo do tipo de tag desejado. O padro usar um recipiente <div>.
3. Selecione a opo Repetir (padro) ou Repetir filhos.
Se voc quiser mais flexibilidade, convm usar a opo Repetir filhos que valida os dados de cada linha de uma lista no nvel filho. Por
exemplo, se voc tem uma lista <ul>, os dados so verificados no nvel <li>. Se voc escolher a opo Repetir, os dados sero
verificados no nvel <ul>. A opo Repetir filhos pode ser especialmente til se voc usar expresses condicionais no cdigo.
4. Escolha o conjunto de dados do Spry no menu.
5. Se j h texto ou elementos selecionados, voc pode envolv-los ou substitu-los.
6. Clique em OK para exibir uma regio de repetio na pgina.
Nota: Todos os objetos de dados do Spry precisam estar em regies. Ento, verifique se voc criou uma regio do Spry na sua pgina
antes de inserir uma regio repetitiva.
7. Quando voc clica em OK, o Dreamweaver insere um alocador de espao de regio na pgina com o texto O contedo da regio do Spry
inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto de dados do Spry, como uma tabela ou lista de
repeties, ou por dados dinmicos no painel Ligaes (Janela > Ligaes).
Para o incio
Voc pode adicionar listas de repetio para exibir os dados como uma lista ordenada, uma lista no ordenada (com marcadores), uma lista de
definies ou uma lista suspensa.
1. Selecione Inserir > Spry > Lista de repetio do Spry.
Voc tambm pode clicar no boto Lista de repetio do Spry, na categoria Spry do painel Inserir.
2. Selecione a tag recipiente a ser usada: UL, OL, DL ou SELECT. As outras opes variam de acordo com o recipiente escolhido. Se voc
escolher SELECT, defina os seguintes campos:
Exibir coluna: isto que aparece quando os usurios visualizam a pgina no navegador.
Coluna de valor: este o valor real enviado ao servidor de fundo.
Por exemplo, possvel criar uma lista de estados e mostrar os usurios Alabama e Alaska, mas enviar AL ou AK ao servidor. Voc
tambm pode usar SELECT como uma ferramenta de navegao e mostrar os nomes de produto como Adobe Dreamweaver e Adobe
Acrobat aos usurios, mas enviar URLs como support/products/dreamweaver.html e support/products/acrobat.html ao servidor.
3. Escolha o conjunto de dados do Spry no menu.
4. Escolha as colunas a serem exibidas.
5. Clique em OK para exibir uma regio de lista de repetio na pgina. Na Visualizao de cdigo, voc pode ver que as tags HTML <ul>,
<ol>, <dl> ou as tags de seleo FORM so inseridas no arquivo.
Nota: Se voc tentar inserir uma regio de lista de repetio sem ter criado uma regio, o Dreamweaver solicitar a incluso de uma para que
voc possa inserir a tabela. Todos os objetos de dados do Spry devem estar contidos nas regies.
Para o incio
A exibio de registros do banco de dados envolve a recuperao de informaes armazenadas em um banco de dados ou em outra fonte de
contedo, alm do processamento dessas informaes em uma pgina da Web. O Dreamweaver fornece vrios mtodos de exibio de
contedo dinmico, alm de muitos comportamentos de servidor incorporados que permitem aprimorar a apresentao de contedo dinmico e
possibilitam aos usurios percorrer e navegar nas informaes retornadas de um banco de dados com mais facilidade.
Os bancos de dados e as demais fontes de contedo dinmico oferecem mais eficincia e flexibilidade na pesquisa, na classificao e na
visualizao de grandes armazenamentos de informaes. O uso de um banco de dados para armazenar contedo de sites se justifica quando
voc precisa armazenar grandes quantidades de informaes e, em seguida, recuperar e exibir essas informaes de maneira significativa. O
Dreamweaver oferece vrias ferramentas e comportamentos predefinidos para ajud-lo a recuperar e a exibir as informaes armazenadas em
um banco de dados de maneira eficiente.
Para o incio
O Dreamweaver fornece os seguintes comportamentos de servidor e elementos de formatao para permitir a exibio de dados dinmicos:
Formatos Permitem que voc aplique tipos diferentes de valores numricos, monetrios, de data/hora e porcentagem a textos dinmicos.
Por exemplo, caso o preo de um item em um conjunto de registros seja 10.989, voc pode exibir o preo na pgina como US$ 10.99
selecionando o formato Moeda - 2 casas decimais do Dreamweaver. Esse formato exibe um nmero usando duas casas decimais. Caso o
nmero tenha mais de duas casas decimais, o formato de dados arredonda o nmero para o decimal mais prximo. Caso o nmero no tenha
casas decimais, o formato de dados adiciona uma casa decimal e dois zeros.
Regio repetitiva Comportamentos de servidor permitem exibir vrios itens retornados de uma consulta de banco de dados e especificar o
nmero de registros a ser exibido por pgina.
Navegao do conjunto de registros Comportamentos de servidor permitem inserir elementos de navegao que permitem aos usurios passar
ao grupo de conjuntos de registros anteriores ou posteriores retornados pelo conjunto de registros. Por exemplo, caso opte por exibir 10 registros
por pgina usando o objeto de servidor Regio repetitiva e o conjunto retorne 40 registros, voc pode navegar em 10 registros por vez.
Barra de status Conjunto de registros Comportamentos de servidor permitem incluir um contador que mostra aos usurios onde eles esto
dentro de um conjunto de registros em relao ao nmero total de registros retornados.
Mostrar regio Comportamentos de servidor permitem optar por mostrar ou ocultar itens na pgina com base na relevncia dos registros
exibidos no momento. Por exemplo, caso um usurio tenha navegado at o ltimo registro de um conjunto, voc pode ocultar o link Prximo e
exibir apenas o link Anterior.
Para o incio
Um recurso eficiente do Dreamweaver a possibilidade de apresentar dados dinmicos dentro de uma pgina estruturada e de aplicar
formatao tipogrfica usando HTML e CSS. Para aplicar formatos a dados dinmicos no Dreamweaver, formate as tabelas e os alocadores de
espao para os dados dinmicos usando as ferramentas de formatao do Dreamweaver. Quando so inseridos usando a fonte de dados, os
dados adotam automaticamente a formatao da fonte, do pargrafo e da tabela especificada por voc.
Para o incio
Os links para navegao no conjunto de registros permitem aos usurios mover de um registro para o prximo ou de um conjunto de registros
para o prximo. Por exemplo, depois de criar uma pgina para exibir cinco registros por vez, voc talvez queira adicionar links como, por
exemplo, Prximo ou Anterior que permitem aos usurios exibir os cinco registros prximos ou anteriores.
Voc pode criar quatro tipos de links de navegao para percorrer um conjunto de registros: Primeiro, Anterior, Prximo e ltimo. Uma nica
pgina pode conter qualquer nmero desses links, desde que todos funcionem em um nico conjunto de registros. Voc no pode adicionar links
para percorrer um segundo conjunto de registros na mesma pgina.
Os links para navegao no conjunto de registros exigem os seguintes elementos dinmicos:
Um conjunto de registros para navegao
Contedo dinmico na pgina para exibir o(s) registro(s)
Texto ou imagens na pgina para funcionar como uma barra de navegao clicvel
Um conjunto Mover para registro dos comportamentos de servidor para navegar no conjunto de registros
Voc pode adicionar os dois ltimos elementos usando o objeto de servidor Barras para navegao em registros ou adicion-los
separadamente usando as ferramentas de design e o painel Comportamentos de servidor.
Para o incio
Voc pode criar uma barra de navegao do conjunto de registros em uma nica operao usando o comportamento de servidor Barra de
navegao do conjunto de registros. O objeto de servidor adiciona os seguintes blocos de criao pgina:
Uma tabela em HTML com links de texto ou imagem
Um conjunto de comportamentos de servidor Mover para
Um conjunto de comportamentos de servidor Mostrar regio
A verso em texto de Barra de navegao do conjunto de registros semelhante a:
Antes de colocar a barra de navegao na pgina, verifique se a pgina contm um conjunto de registros para navegao e um layout de
pgina no qual exibir os registros.
Depois de colocar a barra de navegao na pgina, voc pode usar as ferramentas de design para personalizar a barra. Voc tambm pode
editar os comportamentos de servidor Mover para e Mostrar regio clicando duas vezes neles no painel Comportamentos de servidor.
O Dreamweaver cria uma tabela que contm links de texto ou de imagem que permitem ao usurio navegar no conjunto de registros
selecionado quando clicado. Quando o primeiro registro do conjunto exibido, os links Primeiro e Anterior ou as imagens permanecem
ocultos. Quando o ltimo registro do conjunto exibido, os links Prximo e ltimo ou as imagens permanecem ocultos.
Voc pode personalizar o layout da barra de navegao usando as ferramentas de design e o painel Comportamentos de servidor.
1. Na Visualizao de design, coloque o ponto de insero no local da pgina onde voc deseja que a barra de navegao seja exibida.
2. Exiba a caixa de dilogo Barra de navegao do conjunto de registros (Inserir > Objetos de dados > Paginao do conjunto de registros >
Barra de navegao do conjunto de registros).
3. Selecione o conjunto de registros em que voc deseja navegar no menu pop-up Conjunto de registros.
4. Na seo Exibir usando, selecione o formato para exibir os links de navegao na pgina e clique em OK.
Texto Coloca links de texto na pgina.
Imagens Inclui imagens grficas como links. O Dreamweaver usa arquivos de imagem prprios. Voc pode substituir essas imagens por
arquivos de imagem prprios depois de colocar a barra na pgina.
Para o incio
Voc pode criar sua prpria barra de navegao do conjunto de registros que usa layout e estilos de formatao mais complexos do que os da
tabela simples criada pelo objeto de servidor Barra de navegao do conjunto de registros.
Para criar sua prpria barra de navegao do conjunto de registros, voc deve:
Criar links de navegao em texto ou imagens
Colocar os links na pgina usando a Visualizao de design
Para o incio
Ao criar uma barra de navegao personalizada, comece criando sua representao visual usando as ferramentas de design de pgina do
Dreamweaver. Voc no precisa criar um link para a sequncia de caracteres de texto ou a imagem; o Dreamweaver cria um para voc.
A pgina para a qual a barra de navegao foi criada deve conter um conjunto de registros para navegar. Uma barra de navegao do conjunto
de registros simples pode ser semelhante a esta com botes de link criados fora das imagens ou outros elementos de contedo:
Depois de adicionar um conjunto de registros a uma pgina e criar uma barra de navegao, voc deve aplicar comportamentos de servidor a
cada elemento de navegao. Por exemplo, uma barra de navegao do conjunto de registros tpica contm representaes dos seguintes links
correspondentes ao comportamento apropriado:
Link de navegao
Comportamento de servidor
Para o incio
Voc tambm pode especificar que uma regio seja exibida ou ocultada com base no preenchimento do conjunto de registros. Caso um conjunto
de registros esteja vazio (por exemplo, nenhum registro foi encontrado correspondente consulta), voc pode exibir uma mensagem informando
o usurio de que nenhum registro retornou. Isso especialmente til quando se criam pginas de pesquisa que dependam dos termos de
pesquisa de entrada para executar consultas. Da mesma forma, voc pode exibir uma mensagem de erro caso haja um problema na conexo
com um banco de dados ou caso o nome de usurio e a senha de um usurio no correspondam aos reconhecidos pelo servidor.
Os comportamentos de servidor Mostrar regio so:
Mostrar se conjunto de registros estiver vazio
Mostrar se conjunto de registros no estiver vazio
Mostrar se for primeira pgina
Mostrar se no for primeira pgina
Mostrar se for ltima pgina
Para o incio
O comportamento de servidor Regio repetitiva permite exibir vrios registros de um conjunto dentro de uma pgina. Qualquer seleo de dados
dinmicos pode ser transformada em uma regio repetitiva. No entanto, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de
linhas de tabelas.
1. Na Visualizao de design, selecione uma regio que apresente contedo dinmico.
A seleo pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um pargrafo do texto.
Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto esquerdo da janela do documento. Por
exemplo, caso a regio seja uma linha de tabela, clique dentro da linha na pgina e, depois, clique na tag <tr> direita no seletor para
selecionar a linha da tabela.
2. Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de servidor.
3. Clique no boto de adio (+) e selecione Regio repetitiva.
4. Selecione o nome do conjunto de registros a ser usado no menu pop-up.
5. Selecione o nmero de registros a serem exibidos por pgina e clique em OK.
Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetitiva.
Para o incio
O seguinte exemplo ilustra como o comportamento Regio repetitiva aplicado linha de uma tabela e especifica que so exibidos nove
registros por pgina. A prpria linha exibe quatro registros diferentes: cidade, estado, endereo e CEP.
Para criar uma tabela como, por exemplo, a do exemplo anterior, voc deve criar uma tabela que tenha contedo dinmico e aplicar o
comportamento de servidor Regio repetitiva linha da tabela com o contedo dinmico. Quando a pgina processada pelo servidor de
aplicativo, a linha repetida o nmero de vezes especificado no objeto de servidor Regio repetitiva com um registro diferente inserido em cada
linha nova.
1. Escolha uma destas opes para inserir uma tabela dinmica:
Selecione Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica para exibir a caixa de dilogo Tabela dinmica.
Na categoria Dados do painel Inserir, clique no boto Dados dinmicos e selecione o cone Tabela dinmica no menu pop-up.
2. Selecione o conjunto de registros no menu pop-up Conjunto de registros.
3. Selecione o nmero de registros a serem exibidos por pgina.
4. (Opcional) Insira os valores da borda da tabela, do preenchimento da clula e do espaamento da clula.
A caixa de dilogo Tabela dinmica mantm os valores que voc insere para bordas da tabela, preenchimento da clula e espaamento da
clula.
Nota: Caso voc esteja trabalhando em um projeto que exija vrias tabelas dinmicas com a mesma aparncia, insira os valores de layout
da tabela, o que simplifica ainda mais o desenvolvimento da pgina. Voc pode ajustar esses valores depois de inserir a tabela usando o
Inspetor de propriedades da tabela.
5. Clique em OK.
Uma tabela e os alocadores de espao do contedo dinmico definido no conjunto de registros associado so inseridos na pgina.
Nesse exemplo, o conjunto de registros contm quatro colunas: AUTHORID, FIRSTNAME, LASTNAME e BIO. A linha de cabealho da
tabela preenchida com os nomes de cada coluna. Voc pode editar os cabealhos usando qualquer texto descritivo ou substitu-los por
imagens representativas.
Para o incio
Os contadores de registros do aos usurios um ponto de referncia ao navegarem em um conjunto de registros. Normalmente, eles exibem o
nmero total de registros retornados e os registros visualizados no momento. Por exemplo, se um conjunto retornasse 40 registros individuais e 8
fossem exibidos por pgina, o contador de registros na primeira pgina indicaria Exibindo registros 1-8 de 40.
Para criar um contador de registros em uma pgina, voc deve criar um conjunto de registros para a pgina, um layout de pgina apropriado ao
contedo dinmico e, em seguida, uma barra de navegao do conjunto de registros.
Os contadores de registros permitem aos usurios saber onde esto em um determinado conjunto de registros em relao ao nmero total de
registros retornados. Por essa razo, os contadores de registros so um comportamento til capaz de agregar usabilidade de uma pgina da
Web de maneira significativa.
Crie um contador de registros simples usando o objeto de servidor Status de navegao do conjunto de registros. Esse objeto de servidor cria
uma entrada de texto na pgina para exibir o status de registro atual. Voc pode personalizar o contador de registros usando as ferramentas de
design de pgina do Dreamweaver.
1. Coloque o ponto de insero onde voc deseja inserir um contador de registros.
2. Selecione Inserir > Objetos de dados > Exibir contagem de registros > Status de navegao do conjunto de registros e, depois, selecione o
conjunto de registros no menu pop-up Conjunto de registros e, em seguida, clique em OK.
O objeto de servidor Status de navegao do conjunto de registros insere um contador de registros de texto semelhante ao seguinte
exemplo:
Caso a pgina de resultados tenha um link de navegao para se mover para o prximo conjunto de registros, o clique no link atualiza o
contador de registros para que ele exiba o seguinte:
Showing records 9 thru 16 of 40.
Para o incio
O Dreamweaver inclui vrios formatos de dados predefinidos que voc pode aplicar a elementos de dados dinmicos. Entre os estilos de formato
de dados esto data e hora, moeda e formatos numrico e percentuais.
Sobre as tabelas
Para o incio
As tabelas so uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os grficos em uma pgina HTML. Uma tabela consiste
em uma ou mais linhas; cada linha formada por uma ou mais clulas. Embora as colunas no sejam, em geral, especificadas explicitamente no
cdigo HTML, o Dreamweaver permite que voc manipule colunas, bem como linhas e clulas.
O Dreamweaver exibe a largura da tabela e a largura da coluna para cada coluna de tabela quando a tabela selecionada ou quando o ponto de
insero est na tabela. Ao lado das larguras, esto as setas do menu de cabealho de tabela e dos menus de cabealho de coluna. Use os
menus para obter acesso rpido aos comandos comuns relacionados a tabela. Voc pode ativar ou desativar as larguras e os menus.
Se a largura da tabela ou de uma coluna no for exibida, sinal de que a tabela ou coluna no tem uma largura especificada no cdigo HTML.
Se aparecerem dois nmeros, a largura visual conforme exibida na Visualizao de design no corresponde largura especificada no cdigo
HTML. Isso pode acontecer quando voc redimensiona uma tabela arrastando seu canto inferior direito ou quando voc adiciona o contedo a
uma clula maior do que sua largura definida.
Por exemplo, se voc definir a largura de uma coluna para 200 pixels e adicionar um contedo que aumente a largura em 250 pixels, dois
nmeros aparecero para essa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna conforme
processada na tela).
Nota: Voc tambm pode dispor o layout das pginas usando o posicionamento CSS.
Para o incio
Ao formatar tabelas na Visualizao de design, voc pode definir propriedades para a tabela inteira ou para linhas, colunas ou clulas
selecionadas da tabela. Quando uma propriedade, como alinhamento ou cor de fundo, definida como um valor para a tabela inteira e outro
valor para clulas individuais, a formatao da clula tem precedncia sobre a formatao da linha, que, por sua vez, tem precedncia sobre a
formatao da tabela.
A ordem de precedncia da formatao da tabela a seguinte:
1. Clulas
2. Linhas
3. Tabela
Por exemplo, se voc definir a cor de fundo de uma nica clula para azul e, depois, definir a cor de fundo de toda a tabela para amarelo, a
clula azul no ser alterada para amarelo, j que a formatao da clula tem precedncia sobre a formatao da tabela.
Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada clula da coluna.
Para o incio
Voc pode mesclar qualquer nmero de clulas adjacentes, contanto que a seleo inteira seja uma linha ou um retngulo de clulas, a fim de
produzir uma nica clula que abranja vrias colunas ou linhas. possvel dividir uma clula em qualquer nmero de linhas ou colunas,
independentemente de ela ter sido anteriormente mesclada ou no. O Dreamweaver reestrutura automaticamente a tabela (adicionando quaisquer
atributos colspan ou rowspan necessrios) para criar a disposio especificada.
No exemplo a seguir, as clulas do meio das primeiras duas linhas foram mescladas em uma nica clula que abrange duas linhas.
Para o incio
Usar o painel Inserir ou o menu Inserir para criar uma nova tabela. Em seguida, adicione texto e imagens s clulas da tabela da mesma maneira
que adiciona texto e imagens fora de uma tabela.
Nota: O recurso Modo de layout est obsoleto desde o Dreamweaver CS4 e posterior. O Modo de layout criava layouts de pgina usando
tabelas de layout, o que no mais recomendado pela Adobe. Para obter mais informaes sobre o Modo de layout e sobre por que ele se
tornou obsoleto, consulte o Blog da Equipe do Dreamweaver.
1. Na Visualizao de design da janela Documento, coloque o ponto de insero no local em que a tabela deve aparecer.
Nota: Se o documento estiver em branco, voc s poder colocar o ponto de insero no incio do documento.
Selecione Inserir > Tabela.
Na categoria Comum do painel Inserir, clique no boto Tabela.
2. Defina os atributos da caixa de dilogo Tabela e clique em OK para criar a tabela.
Linhas Determina o nmero de linhas de tabela.
Colunas Determina o nmero de colunas de tabela.
Largura da tabela Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador.
Espessura da borda Especifica a largura, em pixels, das bordas da tabela.
Espaamento da clula Determina o nmero de pixels entre as clulas de tabela adjacentes.
Quando voc no atribui explicitamente valores para espessura de tabela ou espaamento e preenchimento de clula, a maioria dos
navegadores exibe a espessura da borda da tabela e o preenchimento da clula definidos como 1 e o espaamento da clula definido
como 2. Para garantir que os navegadores exibiro a tabela sem borda, preenchimento ou espaamento, defina Preenchimento da
clula e Espaamento da clula como 0.
Preenchimento da clula Determina o nmero de pixels entre a borda de uma clula e seu contedo.
Nenhum No ativa cabealhos de coluna ou linha para a tabela.
esquerda Torna a primeira coluna da tabela uma coluna de cabealhos, a fim de que voc possa digitar um cabealho para cada linha
da tabela.
Superior Torna a primeira linha da tabela uma linha de cabealhos, a fim de que voc possa digitar um cabealho para cada coluna da
tabela.
Ambos Permite que voc digite cabealhos de coluna e linha na tabela.
recomendvel usar cabealhos caso algum visitante do seu site use leitor de tela. Os leitores de tela leem os cabealhos da tabela e
ajudam os usurios de leitores de tela a controlar as informaes da tabela.
Legenda Fornece um ttulo de tabela que exibido fora da tabela.
Alinhar legenda Especifica onde a legenda da tabela aparecer em relao tabela.
Resumo Fornece uma descrio de tabela. Os leitores de tela leem o texto do resumo, mas o texto no aparece no navegador do
usurio.
Para o incio
Voc pode importar dados tabulares criados em outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens
separados por tabulaes, vrgulas, dois-pontos ou ponto-e-vrgulas) no Dreamweaver e format-los como uma tabela.
Tambm possvel exportar os dados da tabela do Dreamweaver para um arquivo de texto, com o contedo das clulas adjacentes separado
por um delimitador. Voc pode usar vrgulas, dois-pontos, ponto-e-vrgulas ou espaos como delimitadores. Quando voc exporta uma tabela, a
tabela inteira exportada. No possvel selecionar partes de uma tabela a ser exportada.
Se voc precisa apenas de alguns dados de uma tabela, por exemplo, as primeiras seis linhas ou as primeiras seis colunas, copie as clulas
que contm esses dados, cole as clulas fora da tabela (para criar uma nova tabela) e exporte a nova tabela.
Para o incio
Voc pode selecionar uma tabela, linha ou coluna inteira de uma s vez. Tambm possvel selecionar uma ou mais clulas individuais.
Quando voc mover o ponteiro sobre uma tabela, linha, coluna ou clula, o Dreamweaver realar todas as clulas dessa seleo a fim de que
voc saiba quais clulas sero selecionadas. Isso ser til quando voc tiver tabelas sem bordas, clulas que abranjam vrias colunas ou linhas,
ou tabelas aninhadas. Voc pode alterar a cor do realce nas preferncias.
Se voc posicionar o ponteiro sobre a borda de uma tabela, mantenha pressionada a tecla Control (Windows) ou Command (Macintosh), a
estrutura inteira da tabela, ou seja, todas as clulas da tabela, ser realada. Isso ser til quando voc tiver tabelas aninhadas e precisar ver
a estrutura de uma das tabelas.
quando voc pode selecionar a tabela (a menos que voc clique em uma
Clique em uma clula de tabela e selecione a tag <table> no seletor de tags no canto inferior esquerdo da janela Documento.
Clique em uma clula de tabela e selecione Modificar > Tabela > Selecionar tabela.
Clique em uma clula de tabela, clique no menu de cabealho de tabela e selecione Selecionar tabela. As alas de seleo aparecem nas
bordas inferior e direita da tabela selecionada.
Nota: Essas opes afetam todos os objetos, como elementos com posio absoluta (elementos PA), que so realados
Dreamweaver quando voc move o ponteiro sobre eles.
Para o incio
Para o incio
Voc pode usar o Inspetor de propriedades para editar as clulas e linhas de uma tabela.
1. Selecione a coluna ou linha.
2. No Inspetor de propriedades (Janela > Propriedades), defina as seguintes opes:
Horz Especifica o alinhamento horizontal do contedo de uma clula, linha ou coluna. Voc pode alinhar o contedo esquerda, direita
ou ao centro das clulas, ou pode indicar se o navegador deve usar o alinhamento padro (geralmente esquerda para clulas regulares e
Centralizado para clulas de cabealho).
Vert Especifica o alinhamento vertical do contedo de uma clula, linha ou coluna. Voc pode alinhar o contedo na parte superior, ao
meio, na parte inferior ou na linha de base das clulas, ou indicar se o navegador deve usar o alinhamento padro (geralmente Meio).
L e A A largura e a altura das clulas selecionadas em pixels ou como uma porcentagem da largura ou altura da tabela inteira. Para
especificar uma porcentagem, insira o smbolo de porcentagem (%) aps o valor. Para permitir que o navegador determine a largura ou
altura apropriada com base no contedo da clula, e as larguras e alturas das outras colunas e linhas, deixe o campo em branco (o
padro).
Por padro, um navegador escolhe uma altura de linha ou largura de coluna para acomodar, e a imagem mais larga ou a linha mais longa
em uma coluna. por isso que, s vezes, uma coluna se torna muito mais larga que as outras colunas da tabela quando voc adiciona
contedo a ela.
Nota: possvel especificar uma altura como porcentagem da altura total da tabela, mas a linha pode no ser exibida na altura percentual
especificada nos navegadores.
Fundo A cor do fundo para uma clula, coluna ou linha, escolhida com o seletor de cores.
Mesclar clulas Combina as clulas, linhas ou colunas selecionadas em uma nica clula. Voc pode mesclar as clulas somente se elas
formarem um bloco retangular ou linear.
Dividir clula Divide uma clula, criando duas ou mais clulas. possvel dividir somente uma clula por vez. Este boto ficar desativado
se mais de uma clula for selecionada.
Sem quebra de linha Impede a quebra automtica de linha, mantendo todo o texto de uma clula em uma nica linha. Se a opo Sem
quebra de linha estiver ativada, as clulas aumentaro para acomodar todos os dados enquanto voc os digita ou os cola em uma clula.
(Normalmente, as clulas se expandem horizontalmente para acomodar a palavra mais longa ou a imagem mais larga na clula; em
seguida, elas se expandem verticalmente quando necessrio para acomodar outro contedo.)
Cabealho Formata as clulas selecionadas como clulas de cabealho de tabela. O contedo das clulas de cabealho de tabela estaro
em negrito e centralizados, por padro.
Voc pode especificar as larguras e alturas como pixels ou porcentagens, e pode converter de pixels em porcentagens e vice-versa.
Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada clula da
coluna. No entanto, quando voc definir determinadas propriedades para uma linha, o Dreamweaver alterar os atributos da tag tr, em vez
de alterar os atributos de cada tag td na linha. Quando voc estiver aplicando o mesmo formato a todas as clulas de uma linha, a
aplicao do formato tag tr produzir um cdigo HTML mais limpo e conciso.
3. Pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.
Para o incio
O modo Tabelas expandidas adiciona temporariamente o preenchimento e o espaamento de clula a todas as tabelas de um documento e
aumenta as bordas da tabela para facilitar a edio. Esse modo permite que voc selecione itens nas tabelas ou posicione precisamente o ponto
de insero.
Por exemplo, voc poderia expandir uma tabela para colocar o ponto de insero esquerda ou direita de uma imagem, sem selecionar
inadvertidamente a imagem ou a clula da tabela.
Para o incio
Voc pode alterar a aparncia das tabelas definindo as propriedades da tabela e suas clulas ou aplicando um design predefinido tabela. Antes
de definir as propriedades da tabela e da clula, saiba que a ordem de precedncia para formatao clulas, linhas e tabelas.
Para formatar o texto dentro de uma clula de tabela, use os mesmos procedimentos que voc usaria para formatar o texto fora de uma
tabela.
Para o incio
Redimensionamento de tabelas
Voc pode redimensionar uma tabela inteira ou linhas e colunas individuais. Quando uma tabela inteira redimensionada, todas as clulas da
tabela mudam proporcionalmente de tamanho. Se as clulas de uma tabela tiverem larguras ou alturas explcitas especificadas, o
redimensionamento da tabela alterar o tamanho visual das clulas na janela Documento, mas no alterar as larguras e alturas especificadas
das clulas.
possvel redimensionar uma tabela arrastando uma de suas alas de seleo. O Dreamweaver exibe a largura da tabela, juntamente com um
menu de cabealho de tabela, na parte superior ou inferior da tabela quando esta selecionada ou quando o ponto de insero est na tabela.
s vezes, as larguras de coluna definidas no cdigo HTML no correspondem s suas larguras aparentes na tela. Quando isso acontecer, voc
poder torn-las consistentes. As larguras de tabela e coluna e os menus de cabealho aparecem no Dreamweaver para ajudar voc a dispor o
layout das tabelas. Voc pode ativar ou desativar as larguras e os menus quando necessrio.
Redimensionamento de colunas e linhas
Voc pode alterar a largura de uma coluna ou a altura de uma linha no Inspetor de propriedades ou arrastando as bordas da coluna ou linha. Se
voc tiver problemas com o redimensionamento, limpe as larguras de coluna ou as alturas de linha e comece novamente.
Nota: Tambm possvel alterar as larguras e alturas de clula diretamente no cdigo HTML usando a Visualizao de cdigo.
O Dreamweaver exibe as larguras de coluna, juntamente com os menus de cabealho de coluna, nas partes superiores ou inferiores das colunas
quando a tabela selecionada ou quando o ponto de insero est na tabela. possvel ativar ou desativar os menus de cabealho de coluna
quando necessrio.
Para o incio
Nota: Nas tabelas com larguras baseadas em porcentagem (e no em pixels), se voc arrastar a borda direita da coluna da extrema direita, a
largura da tabela inteira ser alterada e todas as colunas sero aumentadas ou diminudas proporcionalmente.
O Dreamweaver redefine a largura especificada no cdigo para que corresponda largura visual.
Clique no menu de cabealho de tabela e selecione Limpar todas as alturas ou Limpar todas as larguras.
Para o incio
Para adicionar e remover linhas e colunas, use Modificar > Tabela ou menu de cabealho de coluna.
Se voc pressionar Tab na ltima clula de uma tabela, outra linha ser adicionada automaticamente tabela.
Para o incio
Na ilustrao a seguir, a seleo no um retngulo de clulas. Portanto, as clulas no podem ser mescladas.
Nota: Se o boto no for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as
opes.
O contedo das clulas individuais colocado na clula mesclada resultante. As propriedades da primeira clula selecionada so
aplicadas clula mesclada.
Nota: Se o boto no for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as
opes.
2. Na caixa de dilogo Dividir clula, especifique como a clula deve ser dividida:
Dividir clula em: Especifica se a clula ser dividida em linhas ou colunas.
Nmero de linhas/Nmero de colunas Especifica em quantas linhas ou colunas a clula ser dividida.
Para o incio
Voc pode copiar, colar ou excluir uma nica clula de tabela ou vrias clulas de uma s vez, preservando a formatao da clula.
possvel colar clulas no ponto de insero ou no lugar de uma seleo em uma tabela existente. Para colar vrias clulas de tabela, o
contedo da rea de transferncia deve ser compatvel com a estrutura da tabela ou a seleo na tabela em que as clulas sero coladas.
Na ilustrao a seguir, a seleo no um retngulo. Portanto, as clulas no podem ser recortadas ou copiadas.
Aninhamento de tabelas
Para o incio
Uma tabela aninhada uma tabela dentro de uma clula de outra tabela. Voc pode formatar uma tabela aninhada como faria em qualquer outra
tabela. No entanto, sua largura limitada pela largura da clula em que ela aparece.
1. Clique em uma clula da tabela existente.
2. Selecione Inserir > Tabela, defina as opes Inserir tabela e clique em OK.
Ordenao de tabelas
Para o incio
Voc pode ordenar as linhas de um tabela com base no contedo de uma nica coluna. Tambm possvel executar uma ordenao de tabela
mais complexa com base no contedo de duas colunas.
Voc no pode ordenar tabelas que contenham o atributo colspan ou rowspan, ou seja, tabelas que contenham clulas mescladas.
1. Selecione a tabela ou clique em qualquer clula.
2. Selecione Comandos > Ordenar tabela, defina as opes na caixa de dilogo e clique em OK.
Ordenar por Determina quais valores de coluna sero usados para ordenar as linhas da tabela.
Ordem Determina se a coluna ser ordenada alfabtica ou numericamente, e se ela ser ordenada em ordem crescente (de A a Z, dos
nmeros menores para os maiores) ou decrescente.
Quando o contedo de uma coluna for composto por nmeros, selecione Numericamente. Uma ordenao alfabtica aplicada a uma lista
de nmeros de um e dois dgitos resulta na ordenao dos nmeros como se eles fossem palavras (por exemplo, 1, 10, 2, 20, 3, 30), e no
como nmeros realmente (por exemplo, 1, 2, 3, 10, 20, 30).
Depois, por/Ordem Determina a ordem de uma ordenao secundria em uma coluna diferente. Especifica a coluna de ordenao
secundria no menu pop-up Depois, por e a ordem da ordenao secundria nos menus pop-up Ordem.
A ordenao inclui a primeira linha Especifica se a primeira linha da tabela deve ser includa na ordenao. Se a primeira linha for um
cabealho que no deve ser movido, no selecione esta opo.
Ordenar linhas do cabealho Especifica que todas as linhas da seo thead (se houver alguma) da tabela devem ser ordenadas usando
os mesmos critrios das linhas do corpo. (Observe que as linhas thead permanecem na seo thead e ainda aparecero na parte superior
da tabela, at mesmo depois da ordenao.) Para obter informaes sobre a tag thead, consulte o painel Referncia (selecione Ajuda >
Referncia).
Ordenar linhas do rodap Especifica que todas as linhas da seo tfoot (se houver alguma) da tabela devem ser ordenadas usando os
mesmos critrios das linhas do corpo. (Observe que as linhas tfoot permanecem na seo tfoot e ainda aparecero na parte inferior da
tabela, at mesmo depois da ordenao.) Para obter informaes sobre a tag tfoot, consulte o painel Referncia (selecione Ajuda >
Referncia).
Manter todas as cores de linha inalteradas aps a ordenao Especifica que os atributos de linha de tabela (como cor) devem
permanecer associados ao mesmo contedo aps a ordenao. Se as linhas de tabela forem formatadas com duas cores alternativas, no
selecione esta opo para garantir que a tabela classificada ainda ter linhas com cores alternativas. Se os atributos de linha forem
especficos do contedo de cada linha, selecione esta opo para garantir que esses atributos permanecero associados s linhas corretas
na tabela ordenada.
Mais tpicos da Ajuda
[imprimir]Layout das pginas com CSS
Uso de quadros
Como funcionam os quadros e os conjuntos de quadros
Decidir se os quadros devem ou no ser usados
Conjuntos de quadros aninhados
Trabalho com conjuntos de quadros na janela Documento
Criar quadros e conjuntos de quadros
Seleo de quadros e conjuntos de quadros
Abertura de um documento em um quadro
Salvar arquivos de quadro e conjunto de quadros
Exibir e definir propriedades e atributos de quadro
Visualizao e definio das propriedades do conjunto de quadros
Controle do contedo do quadro com links
Fornecimento de contedo para navegadores sem suporte a quadros
Uso de comportamentos JavaScript com quadros
Para o incio
Um quadro uma regio de uma janela do navegador que pode exibir um documento HTML independentemente do que est sendo exibido no
restante da janela do navegador. Os quadros permitem dividir uma janela do navegador em vrias regies, cada uma delas podendo exibir um
documento HTML diferente. Geralmente, um quadro exibe um documento que contm controles de navegao, enquanto outro quadro exibe um
documento com o contedo.
Um conjunto de quadros um arquivo HTML que define o layout e as propriedades de um conjunto de quadros, incluindo o nmero de quadros, o
tamanho e o posicionamento dos quadros, e o URL da pgina que aparece inicialmente em cada quadro. O arquivo de conjunto de quadros
propriamente no possui contedo HTML a ser exibido em um navegador, a no ser a seo noframes. O arquivo de conjunto de quadros
simplesmente fornece informaes para o navegador sobre como deve ser a aparncia de um conjunto de quadros e quais documentos devem
aparecer nele.
Para visualizar um conjunto de quadros em um navegador, digite o URL do arquivo do conjunto de quadros. O navegador abrir os documentos
relevantes a serem exibidos nos quadros. O arquivo do conjunto de quadros de um site geralmente chamado de index.html, a fim de que ele
seja exibido por padro caso um visitante no especifique um nome de arquivo.
O exemplo a seguir mostra um layout de quadro composto por trs quadros: um quadro estreito no lado que contm uma barra de navegao, um
quadro ao longo da parte superior contendo o logotipo e o ttulo do site, e um quadro grande que ocupa o restante da pgina e possui o contedo
principal. Cada um desses quadros exibe um documento HTML separado.
Neste exemplo, o documento exibido no quadro superior nunca alterado quando o visitante navega no site. A barra de navegao de quadro
lateral contm links; se voc clicar em um desses links, o contedo do quadro principal alterado, mas o contedo do quadro lateral permanece
esttico. O quadro de contedo principal direita exibe o documento apropriado para o link que o visitante clica esquerda.
Um quadro no um arquivo. fcil considerar o documento que aparece atualmente em um quadro como parte integrante do quadro, mas, na
verdade, o documento no faz parte do quadro. O quadro um continer que retm o documento.
Nota: Uma pgina se refere a um nico documento HTML ou ao contedo inteiro de uma janela de documento em um dado momento, mesmo
que vrios documentos HTML apaream simultaneamente. A frase uma pgina que usa quadros, por exemplo, geralmente se refere a um
conjunto de quadros e aos documento que aparecem inicialmente nesses quadros.
Um site que aparece em um navegador como uma pgina nica composta de trs quadros consiste, na verdade, de pelo menos quatro
documentos HTML: o arquivo de conjunto de quadros mais os trs documentos que possuem o contedo que aparece inicialmente nos quadros.
Quando voc projeta uma pgina usando conjuntos de quadros no Dreamweaver, deve salvar cada um desses quatro arquivos para que a pgina
funcione corretamente no navegador.
Para obter informaes mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em www.tjkdesign.com/articles/frames/.
Para o incio
A Adobe no recomenda o uso de quadros para layout de pgina da Web. Algumas das desvantagens do uso de quadros incluem:
O alinhamento grfico preciso dos elementos em quadros diferentes podem ser difcil.
O teste da navegao pode ser demorado.
Os URLs das pginas individuais com quadro no aparecem nos navegadores; portanto, pode ser difcil para um visitante indicar uma
pgina especfica (a menos que voc fornea um cdigo de servidor que os permita carregar uma verso com quadro de uma pgina)
Para obter informaes completas com os motivos pelos quais voc no deve usar quadros, consulte a explicao de Gary White em
http://apptools.com/rants/framesevil.php.
Os quadros so mais utilizados para navegao, caso decida us-los. Um conjunto de quadros geralmente inclui um quadro que contm uma
barra de navegao e outro quadro para exibir as pginas de contedo principais. Usar os quadros desse modo tem algumas vantagens:
O navegador de um visitante no precisa recarregar os grficos relacionados a navegao em cada pgina.
Cada quadro tem sua prpria barra de rolagem (se o contedo for muito grande para caber em uma janela), portanto, um visitante pode
rolar os quadros de forma independente. Por exemplo, um visitante que rola para a parte inferior de uma pgina de contedo longa em um
quadro no precisa rolar novamente para a parte superior a fim de usar a barra de navegao, caso ela esteja em outro quadro.
Em muitos casos, possvel criar uma pgina da Web sem quadros que atinja os mesmos objetivos de um conjunto de quadros. Por exemplo, se
voc deseja que uma barra de navegao aparea no lado esquerdo da pgina, substitua a pgina por um conjunto de quadros ou apenas inclua
a barra de navegao em cada pgina do site. (O Dreamweaver ajuda voc a criar vrias pginas que usam o mesmo layout.) O exemplo a
seguir mostra um design de pgina com um layout semelhante ao de um quadro, mas que no usa quadros.
Os sites criados de modo inadequado usam quadros desnecessariamente, com um conjunto de quadros que recarrega o contedo dos quadros
de navegao cada vez que o visitante clica em um boto de navegao. Quando os quadros so bem utilizados (por exemplo, para manter os
controles de navegao estticos em um quadro e, ao mesmo tempo, permitir que o contedo de outro quadro seja alterado), eles podem ser
muito teis para um site.
Nem todos os navegadores oferecem um suporte satisfatrio aos quadros, dificultando o uso dos quadros pelos visitantes com dificuldades de
navegao. Portanto, se voc usar quadros, sempre fornea uma seo noframes no conjunto de quadros para os visitantes que no podem
visualiz-los. Voc tambm poderia fornecer um link explcito para uma verso sem quadros do site.
Para obter informaes mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em www.tjkdesign.com/articles/frames/.
Para o incio
Um conjunto de quadros dentro de outro conjunto de quadros chamado de conjunto de quadros aninhado. Um arquivo de conjunto de quadro
pode conter vrios conjuntos de quadros aninhados. A maioria das pginas da Web que usa quadros est, na verdade, usando quadros
aninhados, e a maioria dos conjuntos de quadros predefinidos no Dreamweaver tambm usa o aninhamento. Qualquer conjunto de quadros em
que haja diferentes nmeros de quadros em diferentes linhas ou colunas requer um conjunto de quadros aninhado.
Por exemplo, o layout de quadro mais comum tem um quadro na linha superior (onde aparece o logotipo da empresa) e dois quadros na linha
inferior (um quadro de navegao e um quadro de contedo). Esse layout requer um conjunto de quadros aninhado: um conjunto de quadros de
duas linhas, com um conjunto de quadros de duas colunas aninhado na segunda linha.
A. Conjunto de quadros principal B. O quadro de menu e o quadro de contedo esto aninhados dentro do conjunto de quadros principal.
O Dreamweaver cuida do aninhamento de conjunto de quadros quando necessrio. Se voc usar as ferramentas de diviso de quadros do
Dreamweaver, no precisar se preocupar com quais quadros esto aninhados e quais no esto.
H duas maneiras de aninhar conjuntos de quadros em HTML: o conjunto de quadros interno pode ser definido no mesmo arquivo que o conjunto
de quadros externo ou em um arquivo separado. Cada conjunto de quadros predefinido do Dreamweaver define todos os seus conjuntos de
quadros no mesmo arquivo.
Os dois tipos de aninhamento produzem os mesmos resultados visuais; no fcil dizer, sem examinar o cdigo, qual tipo de aninhamento est
sendo usado. A situao mais provvel em que um arquivo de conjunto de quadros externo precisar ser usado no Dreamweaver quando voc
utiliza o comando Abrir no quadro para abrir um arquivo de conjunto de quadros dentro de um quadro. Isso possivelmente resultar em problemas
na definio de alvos para links. geralmente mais simples manter todos os conjuntos de quadros definidos em um nico arquivo.
Para o incio
O Dreamweaver permite que voc visualize e edite todos os documentos associados a um conjunto de quadros em uma janela Documento. Com
essa abordagem, ser possvel ver aproximadamente como as pginas com quadros aparecero em um navegador enquanto voc as edita. No
entanto, alguns aspectos dessa abordagem pode ser confusa at que voc se acostume com elas. Em particular, cada quadro exibe um
documento HTML separado. Mesmo se os documentos estiverem vazios, voc dever salv-los para que possa visualiz-los (pois o conjunto de
quadros s poder ser visualizado com preciso se contiver o URL de um documento a ser exibido em cada quadro).
Para garantir que o conjunto de quadros aparecer corretamente nos navegadores, siga estas etapas gerais:
1. Crie o conjunto de quadros e especifique um documento para que ele aparea em cada quadro.
2. Salve cada arquivo que aparecer em um quadro. Lembre-se de que cada quadro exibe um documento HTML separado e que voc deve
salvar cada documento, juntamente com o arquivo de conjunto de quadros.
3. Defina as propriedades de cada quadro e do conjunto de quadros (incluindo a nomeao de cada quadro, a definio das opes de
rolagem e no rolagem).
4. Defina a propriedade Alvo no Inspetor de propriedades para todos os links, a fim de que o contedo vinculado aparea na rea correta.
Para o incio
H duas maneiras de criar um conjunto de quadros no Dreamweaver: voc pode selecionar entre vrios conjuntos de quadros predefinidos ou
Excluso de um quadro
Arraste uma borda de quadro para fora da pgina ou para uma borda do quadro pai.
Se houver algum contedo no salvo de um documento em um quadro que est sendo removido, o Dreamweaver solicitar que voc salve o
documento.
Nota: No possvel remover totalmente um conjunto de quadros arrastando as bordas. Para remover um conjunto de quadros, feche a janela
Documento que o exibe. Se o arquivo de conjunto de quadros tiver sido salvo, exclua o arquivo.
Redimensionamento de um quadro
Para definir tamanhos aproximados de quadros, arraste as bordas de quadro na Visualizao de design da janela Documento.
Para especificar tamanhos exatos e a quantidade de espao que o navegador alocar para uma linha ou coluna de quadros quando o
tamanho da janela do navegador no permitir que os quadros sejam exibidos em tamanho integral, use o Inspetor de propriedades.
Para o incio
Para alterar as propriedades de um quadro ou conjunto de quadros, comece selecionando o quadro ou conjunto de quadros a ser alterado. Voc
pode selecionar um quadro ou conjunto de quadros na janela Documento ou usando o painel Molduras.
O painel Molduras oferece uma representao visual dos quadros em um conjunto de quadros. Ele mostra a hierarquia da estrutura do conjunto
de quadros de uma maneira que pode no ser visvel na janela Documento. No painel Molduras, uma borda muito espessa envolve cada conjunto
de quadros; cada quadro contornado por uma linha cinza fina e identificado por um nome de quadro.
Na Visualizao de design da janela Documento, quando um quadro selecionado, suas bordas so contornadas com uma linha pontilhada.
Quando um conjunto de quadros selecionado, todas as bordas dos quadros do conjunto de quadros so contornadas com uma linha pontilhada
clara.
Nota: O posicionamento do ponto de insero em um documento exibido em um quadro no o mesmo que selecionar um quadro. H vrias
operaes (como definir as propriedades do quadro) nas quais voc deve selecionar um quadro.
Para o incio
Voc pode especificar o contedo inicial de um quadro inserindo o novo contedo em um documento vazio em um quadro ou abrindo um
documento existente em um quadro.
1. Coloque o ponto de insero em um quadro.
2. Selecione Arquivo > Abrir no quadro.
3. Selecione um documento a ser aberto no quadro e clique em OK (Windows) ou Escolher (Macintosh).
4. (Opcional) Para tornar este documento o padro a ser exibido no quadro quando o conjunto de quadros aberto em um navegador, salve o
conjunto de quadros.
Para o incio
Para que voc possa visualizar um conjunto de quadros em um navegador, salve o arquivo de conjunto de quadros e todos os documentos a
serem exibidos nos quadros. Voc pode salvar cada arquivo de conjunto de quadros e um documento com quadro ou salvar o arquivo de conjunto
de quadros e todos os documentos que aparecem nos quadros simultaneamente.
Nota: Quando voc usa as ferramentas visuais do Dreamweaver para criar um conjunto de quadros, cada novo documento exibido em um
quadro recebe um nome de arquivo padro. Por exemplo, o primeiro arquivo de conjunto de quadros nomeado como
ConjuntodequadrosSemTtulo-1, enquanto o primeiro documento de um quadro nomeado como QuadroSemTtulo-1.
Clique no quadro, selecione Arquivo > Salvar quadro ou Arquivo > Salvar quadro como.
Para o incio
Use o Inspetor de propriedades para visualizar e definir a maioria das propriedades de quadro, incluindo bordas, margens e informaes que
especifiquem se as barras de rolagem aparecero nos quadros. Se voc definir uma propriedade de quadro, a configurao dessa propriedade
ser substituda em um conjunto de quadros.
Talvez voc tambm precise definir alguns atributos de quadro, como o atributo de ttulo (que no o mesmo que o atributo de nome), para
melhorar a acessibilidade. Voc pode ativar a opo de criao de acessibilidade para quadros a fim de definir atributos ao criar quadros ou pode
definir atributos aps inserir um quadro. Para editar atributos de acessibilidade para um quadro, use o Inspetor de tags para editar diretamente o
cdigo HTML.
1. No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de insero em um dos quadros.
2. Selecione Modificar > Editar tag <frameset>.
3. Selecione Folha de estilos/acessibilidade na lista de categorias esquerda, digite os valores e clique em OK.
Para o incio
Use o Inspetor de propriedades para visualizar e definir a maioria das propriedades do conjunto de propriedades, incluindo o ttulo do conjunto de
quadros, as bordas e os tamanhos de quadro.
3. Para especificar a quantidade de espao que o navegador alocar para cada quadro, selecione entre as seguintes opes do menu
Unidades:
Pixels Define o tamanho da coluna ou linha selecionada para um valor absoluto. Escolha esta opo para um quadro que deve estar
sempre no mesmo tamanho, como uma barra de navegao. O espao dos quadros com tamanhos especificados em pixels alocado
antes dos quadros com tamanhos especificados como um valor percentual ou relativo. A abordagem mais comum para tamanhos de
quadro definir um quadro esquerdo para uma largura de pixel fixa e definir um quadro direito para um valor relativo, o que possibilitar
que o quadro direito seja alongado de modo a ocupar todo o espao restante aps a largura de pixel ser alocada.
Nota: Se todas as larguras forem especificadas em pixels e um visitante visualizar o conjunto de quadros de um navegador que seja muito
largo ou estreito para a largura especificada, os quadros sero aumentados ou reduzidos proporcionalmente para preencher o espao
disponvel. O mesmo se aplica s alturas especificadas em pixels. Desse modo, geralmente recomendvel especificar pelo menos uma
largura ou altura como relativa.
Percentual Especifica que a coluna ou linha selecionada deve ser uma porcentagem da largura ou altura total do conjunto de quadros. O
espao dos quadros com unidades definidas para Percentual alocado aps os quadros com unidades definidas para Pixels, mas antes
dos quadros com unidades definidas como Relativo.
Relativo Especifica que a coluna ou linha selecionada deve ser alocada no restante do espao disponvel depois que os quadros definidos
como Pixels e Percentual estiverem com seus espaos alocados. Esse espao restante dividido proporcionalmente entre os quadros com
tamanhos definidos para Relativo.
Nota: Quando voc seleciona Relativo no menu Unidades, qualquer nmero digitado no campo Valor desaparecer. Se voc precisar
especificar um nmero, deve digit-lo novamente. No entanto, se houver apenas uma linha ou coluna definida como Relativo, no ser
necessrio digitar um nmero, j que a linha ou coluna recebe todo o espao restante depois que as outras linhas e colunas tem seus
espaos alocados. Para ter a certeza da compatibilidade entre navegadores, digite 1 no campo Valor. Isso o mesmo que no digitar
nenhum valor.
Para o incio
Para usar um link em um quadro para abrir um documento em outro quadro, defina um destino para o link. O atributo target de um link especifica
o quadro ou a janela em que o contedo vinculado aberto.
Por exemplo, se a barra de navegao estiver no quadro esquerdo e o material vinculado tiver que aparecer no quadro de contedo principal
direita, especifique o nome do quadro de contedo principal como destino para cada um dos links da barra de navegao. Quando um visitante
clica em um link de navegao, o contedo especificado aberto no quadro principal.
1. Na Visualizao de design, selecione um texto ou um objeto.
2. Na caixa Link no Inspetor de propriedades (Janela > Propriedades), siga um destes procedimentos:
Clique no cone de pasta e selecione o arquivo ao qual voc deseja se vincular.
Arraste o cone Apontar para arquivo para o painel Arquivos e selecione o arquivo ao qual voc deseja se vincular.
3. No menu Alvo do Inspetor de propriedades, selecione o quadro ou a janela em que o documento vinculado deve aparecer:
_blank abre o documento vinculado em uma nova janela de navegador, deixando a janela atual inalterada.
_parent abre o documento vinculado no conjunto de quadros pai do quadro no qual o link aparece, substituindo o conjunto de quadros
inteiro.
_self abre o link no quadro atual, substituindo o contedo nesse quadro.
_top abre o documento vinculado na janela de navegador atual, substituindo todos os quadros.
Os nomes de quadro tambm aparecem neste menu. Selecione um quadro com nome a fim de abrir o documento vinculado nesse
quadro.
Nota: Os nomes de quadro s aparecem quando voc est editando um documento em um conjunto de quadros. Quando voc edita
um documento em sua prpria janela Documento, os nomes de quadro no aparecem no menu pop-up Alvo. Se voc estiver editando
um documento fora do conjunto de quadros, poder digitar o nome do quadro de destino na caixa de texto Alvo.
Se voc estiver se vinculando a uma pgina fora do site, sempre use target="_top" ou target="_blank" para deixar claro que a pgina
no parte do site.
Para o incio
O Dreamweaver permite que voc especifique que o contedo ser exibido em navegadores baseados em texto e em navegadores grficos mais
antigos que no oferecem suporte a quadros. Esse contedo armazenado no arquivo de conjunto de quadros, delimitado por uma tag noframes.
Quando um navegador que no oferece suporte a quadros carrega o arquivo de conjunto de quadros, o navegador exibe somente o contedo
delimitado pela tag noframes.
Nota: O contedo na rea noframes deve ser mais que uma simples nota informando Voc deve fazer a atualizao para um navegador que
aceite quadros. Alguns visitantes de site usam sistemas que no permitem a visualizao de quadros.
1. Selecione Modificar > Conjunto de quadros > Editar contedo sem quadros.
O Dreamweaver limpa a Visualizao de design e as palavras Contedo sem quadros aparecem na parte superior da Visualizao de
design.
2. Siga um destes procedimentos:
Na janela Documento, digite ou insira o contedo como voc faria em um documento comum.
Selecione Janela > Inspetor de cdigo, coloque o ponto de insero entre as tags body que aparecem nas tags noframes e digite o
cdigo HTML do contedo.
3. Selecione Modificar > Conjunto de quadros > Editar contedo sem quadros novamente para retornar visualizao normal do documento
de conjunto de quadros.
Para o incio
H vrios comportamentos JavaScript e comandos relacionados a navegao que so especificamente apropriados para uso com quadros:
Definir texto do quadro Substitui o contedo e a formatao de um determinado quadro com o contedo especificado. O contedo pode incluir
qualquer cdigo HTML vlido. Execute esta ao para exibir dinamicamente as informaes em um quadro.
Ir para URL Abre uma nova pgina na janela atual ou no quadro especificado. Esta ao especificamente til para alterar o contedo de dois
ou mais quadros com um clique.
Inserir menu de salto Configura uma lista de menus de links que abrem arquivos em uma janela de navegador quando eles so clicados. Voc
tambm pode indicar uma janela ou quadro no qual o documento ser aberto.
Para obter mais informaes, consulte Adio de comportamentos JavaScript
Mais tpicos da Ajuda
Para o incio
Definio de rguas
As rguas ajudam a avaliar, organizar e planejar o layout. Elas podem aparecer nas bordas esquerda e superior da pgina, marcadas em pixels,
polegadas ou centmetros.
Para ativar e desativar as rguas, seleciona Exibir > Rguas > Mostrar.
Para alterar a origem, arraste o cone de origem da rgua
para qualquer lugar da pgina.
Para redefinir a origem para sua posio padro, selecione Exibir > Rguas > Redefinir origem.
Para alterar a unidade de medida, selecione Exibir > Rguas e, em seguida, selecione Pixels, Polegadas ou Centmetros.
Para o incio
As guias so linhas que voc arrasta das rguas para o documento. Elas ajudam a colocar e alinhar os objetos com mais preciso. Voc tambm
pode usar guias para medir o tamanho dos elementos de pgina ou emular as dobras (reas visveis) dos navegadores da Web.
Para alinhar os elementos, encaixe-os nas guias e encaixe-as nos elementos. (Os elementos devem ter posio absoluta para que o recurso de
encaixe funcione.) Voc tambm pode bloquear as guias para impedir que elas sejam movidas acidentalmente por outro usurio.
Para o incio
Quando as guias so adicionadas a um modelo do Dreamweaver, todas as instncias do modelo herdam as guias. No entanto, as guias nas
instncias do modelo so tratadas como regies editveis; portanto, os usurios podem modific-las. As guias modificadas nas instncias do
modelo so restauradas para seu local original sempre que a instncia atualizada com o modelo mestre.
Voc tambm pode adicionar suas prprias guias s instncias de um modelo. As guias adicionadas desta maneira no so sobregravadas
quando a instncia do modelo atualizada com o modelo mestre.
Para o incio
A grade exibe um sistema de linhas horizontal e vertical na janela Documento. Ela til para posicionar os objetos com preciso. Voc pode
fazer com que os elementos de pgina com posio absoluta se encaixem automaticamente na grade enquanto os move, alm de alterar a grade
ou controlar o comportamento de encaixe especificando configuraes da grade. O encaixe funcionar quer a grade esteja ou no visvel.
Para o incio
Voc pode usar uma imagem de decalque como uma guia para recriar um design de pgina criado em um aplicativo grfico como o Adobe
Freehand ou Fireworks.
Uma imagem de decalque uma imagem JPEG, GIF ou PNG colocada no plano de fundo da janela Documento. Voc pode ocultar a imagem,
definir sua opacidade e alterar sua posio.
A imagem de decalque estar visvel somente no Dreamweaver. Voc no poder v-la quando estiver visualizando a pgina em um navegador.
Quando a imagem de decalque estiver visvel, a cor e a imagem de fundo real da pgina no estaro visveis na janela Documento. No entanto,
elas estaro visveis quando a pgina for visualizada em um navegador.
Para o incio
Um widget do Spry um elemento de pgina que enriquece a experincia do usurio por meio de interao. Um widget do Spry consiste no
seguinte:
Estrutura do widget Um bloco de cdigo HTML que define a composio estrutural do widget.
Comportamento do widget JavaScript que controla como o widget responde a eventos iniciados pelo usurio.
Estilo de widget CSS que especifica a aparncia do widget.
A estrutura do Spry utiliza um conjunto de widgets reutilizveis desenvolvidos em HTML, CSS e JavaScript padro. Voc pode inserir facilmente
esses widgets (o cdigo HTML e CSS bem simplificados) e, em seguida, aplicar o estilo. Os comportamentos na estrutura incluem funes que
permitem aos usurios mostrar ou ocultar contedo na pgina, alterar a aparncia (como cor) da pgina, interagir com itens de menu, e muito
mais.
Cada widget na estrutura do Spry est associado a arquivos CSS e JavaScript exclusivos. O arquivo CSS contm tudo o que necessrio para
criar o estilo do widget, e o arquivo JavaScript responsvel pela funcionalidade do widget. Quando voc insere um widget usando a interface do
Dreamweaver, o Dreamweaver vincula automaticamente esses arquivos sua pgina, e o widget ganha funcionalidade e estilo.
Os arquivos CSS e JavaScript associados a determinado widget recebem o nome do widget para que voc possa facilmente correlacionar os
arquivos aos widgets. (Por exemplo, os arquivos associados ao widget Acordeo chamam-se SpryAccordion.css e SpryAccordion.js). Quando
voc insere um widget em uma pgina salva, o Dreamweaver cria um diretrio SpryAssets no site e salva os arquivos JavaScript e CSS
correspondentes nesse local.
Para o incio
Os recursos on-line a seguir fornecem mais informaes sobre como personalizar os dispositivos do Spry.
Amostras de dispositivos do Spry
Personalizao de barras de menu do Spry no Dreamweaver
Dispositivos de validao do Spry (tutorial em vdeo)
Para o incio
Para o incio
1. Mantenha o ponteiro do mouse sobre o widget at aparecer a estrutura azul com abas.
2. Clique na aba no canto superior esquerdo do widget.
Para o incio
Para o incio
Localize o arquivo CSS apropriado para o widget na pasta SpryAssets do site e edite o CSS de acordo com suas preferncias.
Para obter detalhes sobre como criar o estilo de determinados widgets, consulte as sees apropriadas sobre personalizao para cada widget.
Voc tambm pode formatar um widget do Spry editando os estilos no painel CSS, da mesma forma que faria com qualquer outro elemento
com estilo na pgina.
Para o incio
H muito mais widgets da Web disponveis alm dos widgets do Spry instalados com o Dreamweaver. O Adobe Exchange fornece widgets da
Web desenvolvidos por outros profissionais de criao.
Escolha Procurar widgets da Web no menu Estender Dreamweaver
, na Barra de aplicativos.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o funcionamento com widgets da web, consulte
www.adobe.com/go/dw10widgets_br.
Para o incio
Quando voc insere um widget, um conjunto de dados ou um efeito do Spry em uma pgina salva, Dreamweaver cria um diretrio SpryAssets no
site e salva os arquivos JavaScript e CSS correspondentes nesse local. Voc pode alterar o local padro em que o Dreamweaver salva os ativos
do Spry, caso prefira salv-los em outro local.
1. Selecione Arquivos > Gerenciar sites.
2. Selecione o seu site na caixa de dilogo Gerenciar sites e clique em Editar.
3. Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Spry.
4. Informe um caminho para a pasta a ser usada para os ativos do Spry e clique em OK. Voc tambm pode clicar no cone de pasta para
navegar at determinado local.
Mais tpicos da Ajuda
Introduo s folhas de estilos em cascata
Para o incio
Voc pode criar layouts de pgina inserindo manualmente tags div e aplicando os estilos de posicionamento CSS a elas. Uma tag div uma tag
que define divises lgicas no contedo de uma pgina da Web. Voc pode usar tags div para centralizar blocos de contedo, criar efeitos de
coluna, criar diferentes reas de cor e muito mais.
Se no estiver familiarizado com o uso das tags div e folhas de estilos em cascata (CSS) para criar pginas da Web, voc poder criar um layout
CSS baseado em um dos layouts predefinidos fornecidos com o Dreamweaver. Se no estiver acostumado a trabalhar com a CSS, mas estiver
familiarizado com as tabelas, voc dever tambm tentar utiliz-las.
Nota: O Dreamweaver trata todas as tags div com posio absoluta como elementos PA (elementos com posio absoluta), mesmo que voc
no tenha criado essas tags usando a ferramenta de desenho Div PA.
Para o incio
Para o incio
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!-#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>
Voc pode alterar as propriedades das Divs PA (ou qualquer elemento PA) na pgina, incluindo as coordenadas x e y, o ndice z (tambm
chamado de ordem de empilhamento) e a visibilidade.
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<div id="apDiv4"></div>
</div>
A representao grfica de qualquer conjunto de Divs PA pode ter a seguinte aparncia:
No primeiro conjunto de tags div, uma div est acima da outra na pgina.l No segundo conjunto, a div apDiv4 est, na verdade, dentro da div
apDiv3. (Voc pode alterar a ordem de empilhamento da Div PA no painel Elementos PA.)
O aninhamento geralmente usado para agrupar as Divs PA. Uma Div PA aninhada movida com sua Div PA me e pode ser definida para
herdar a visibilidade da tag-me.
Voc pode ativar a opo Aninhamento para fazer o aninhamento automtico ao desenhar uma Div PA comeando dentro de outra Div PA. Para
desenhar dentro ou sobre outra Div PA, a opo Evitar sobreposies deve estar desmarcada.
Desenho de uma Div PA aninhada
1. Verifique se a opo Evitar sobreposies est desmarcada no painel Elementos PA (Janela > Elementos PA).
2. Na categoria Layout do painel Inserir, clique no boto Desenhar Div PA
3. Na Visualizao de design da janela Documento, arraste para desenhar uma Div PA dentro de uma Div PA existente.
Se a opo Aninhamento estiver desativada nas preferncias de elementos PA, mantenha pressionada a tecla Alt (Windows) ou mantenha
pressionada a tecla Option (Macintosh) enquanto arrasta para aninhar uma Div PA dentro de uma Div PA existente.
A aparncia das Divs PA aninhadas podem variar de um navegador para outro. Ao criar Divs PA aninhadas, verifique frequentemente a
aparncia delas nos vrios navegadores durante o processo de design.
Insero de uma Div PA aninhada
1. Verifique se a opo Evitar sobreposies est desmarcada.
2. Coloque o ponto de insero dentro de uma Div PA existente na Visualizao de design da janela Documento e selecione Inserir > Objetos
de layout > Div PA.
Aninhamento automtico de Divs PA quando voc desenha uma Div PA dentro de outra
Selecione a opo Aninhamento nas Preferncias de elementos PA.
Quando voc seleciona um elemento PA, o Inspetor de propriedades exibe as propriedades desse elemento.
1. Selecione um elemento PA.
2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito, caso ela ainda no esteja
expandida, para ver todas as propriedades.
4. Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.
Seleo de elementos PA
Voc pode selecionar um ou mais elementos PA para manipul-los ou alterar suas propriedades.
Alm disso, o cone de olho no aparece quando no h visibilidade especificada (que aparece no Inspetor de propriedades como
visibilidade padro).
Alterao da visibilidade de todos os elementos PA simultaneamente
No painel Elementos PA (Janela > Elementos PA), clique no cone de olho do cabealho no topo da coluna.
Nota: Esse procedimento pode definir todos os elementos PA para visible ou hidden, mas no para inherit.
Redimensionamento de elementos PA
Voc pode redimensionar um elemento PA de cada vez ou redimensionar vrios elementos PA simultaneamente para que tenham a mesma
largura e altura.
Se a opo Evitar sobreposies estiver ativada, voc no poder redimensionar um elemento PA para que ele seja sobreposto por outro.
Redimensionamento de um elemento PA
1. Na Visualizao de design, selecione um elemento PA.
2. Siga um destes procedimentos para redimensionar um elemento PA:
Para redimensionar arrastando, arraste as alas de redimensionamento de qualquer elemento PA.
Para redimensionar um pixel por vez, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) enquanto pressiona uma
tecla de seta.
As teclas de seta movem as bordas direita e inferior do elemento PA. No possvel fazer o redimensionamento usando as bordas
superior e esquerda com essa tcnica.
Para redimensionar pelo incremento de encaixe de grade, mantenha pressionadas as teclas Shift e Control (Windows) ou mantenha
pressionadas as teclas Shift e Option (Macintosh) enquanto pressiona uma tecla de seta.
No Inspetor de propriedades (Janela > Propriedades), digite valores para largura (L) e altura (A).
O redimensionamento de um elemento PA altera sua largura e altura. Ele no define quanto do contedo do elemento PA estar visvel.
Voc pode definir a regio visvel de um elemento PA nas preferncias.
Redimensionamento de vrios elementos PA simultaneamente
1. Na Visualizao de design, selecione dois ou mais elementos PA.
2. Siga um destes procedimentos:
Selecione Modificar > Organizar > Tornar larguras iguais ou Modificar > Organizar > Tornar alturas iguais.
Os primeiros elementos PA selecionados tero a mesma largura ou altura do ltimo elemento PA selecionado.
No Inspetor de propriedades (Janela > Propriedades), em Vrios elementos CSS-P, digite os valores de largura e altura.
Os valores so aplicados a todos os elementos PA selecionados.
Movimentao de elementos PA
Voc pode mover os elementos PA na Visualizao de design quase da mesma maneira que move os objetos na maioria dos aplicativos grficos
bsicos.
Se a opo Evitar sobreposies estiver ativada, voc no poder mover um elemento PA para que ele sobreponha outro.
1. Na Visualizao de design, selecione um ou vrios elementos PA.
2. Siga um destes procedimentos:
Para mover arrastando, arraste a ala de seleo do ltimo elemento PA selecionado (realado em preto),
Para mover um pixel por vez, use as teclas de seta.
Mantenha pressionada a tecla Shift enquanto pressiona uma tecla de seta para mover o elemento PA pelo incremento atual de encaixe
de grade.
Alinhamento de elementos PA
Use os comandos de alinhamento de elemento PA para alinhar um ou mais elementos PA a uma borda do ltimo elemento PA selecionado.
Quando voc alinha elementos PA, os elementos PA filho no selecionados podem se mover, pois seu elemento PA pai selecionado e movido.
Para impedir que isso acontea, no use elementos PA aninhados.
1. Na Visualizao de design, selecione o elemento PA.
2. Selecione Modificar > Organizar e selecione uma opo de alinhamento.
Por exemplo, se voc selecionar Top, todos os elementos PA se movero para que suas bordas superiores fiquem na mesma posio
vertical da borda superior do ltimo elemento PA selecionado (realado em preto).
inserir um elemento PA usando o menu Inserir, digitar nmeros no Inspetor de propriedades ou reposicionar elementos PA editando o cdigofonte HTML, possivelmente os elementos PA sero sobrepostos ou aninhados enquanto esta opo estiver ativada. Se ocorrerem sobreposies,
arraste os elementos PA sobrepostos na Visualizao de design para separ-los.
No painel Elementos PA (Janela > Elementos PA), selecione a opo Evitar sobreposies.
Na janela Documento, selecione Modificar > Organizar > Impedir sobreposio de elemento AP.
Mais tpicos da Ajuda
Criar uma pgina com um layout CSS
Para o incio
Voc pode visualizar os elementos na seo head de um documento usando o menu Exibir, a Visualizao de cdigo da janela Documento ou o
Inspetor de cdigo.
Para o incio
Uma tag meta um elemento head que registra informaes sobre a pgina atual, como codificao de caractere, autor, direitos autorais ou
palavras-chave. Essas tags tambm podem ser usadas para fornecer informaes ao servidor, como data de expirao, intervalo de atualizao e
classificao POWDER da pgina. (O POWDER, Protocol for Web Description Resources, fornece um mtodo para atribuir classificaes, como
classificaes de filmes, a pginas da Web.)
Para o incio
H apenas uma propriedade de ttulo: o ttulo da pgina. O ttulo aparece na barra de ttulo da janela Documento do Dreamweaver, bem com na
barra de ttulo do navegador, quando voc visualiza a pgina na maioria dos navegadores. O ttulo tambm aparece na barra de ferramentas da
janela Documento.
Para o incio
Muitos robs de mecanismo de pesquisa (programas que navegam automaticamente na Web coletando informaes para que os mecanismos de
pesquisa indexem) leem o contedo da tag meta das palavras-chave e usam as informaes para indexar as pginas em seus bancos de dados.
Como alguns mecanismos de pesquisa limitam o nmero de palavras-chave ou caracteres indexados, ou ignoram todas as palavras-chave se
voc ultrapassar o limite, recomendvel usar apenas algumas palavras-chave cuidadosamente escolhidas.
Para o incio
Vrios robs de mecanismo de pesquisa (os programas que navegam automaticamente na Web coletando informaes para que os mecanismos
de pesquisa indexem) leem o contedo da tag meta Description. Alguns usam as informaes para indexar as pginas em seus bancos de
dados; outros tambm exibem as informaes na pgina de resultados da pesquisa (em vez de exibir as primeiras linhas do documento). Alguns
mecanismos de pesquisa limitam o nmero de caracteres indexados, por isso uma boa sugesto limitar sua descrio a poucas palavras (por
exemplo, Buf de churrasco em Albany, Gergia ou Bons preos de design na Web para clientes no mundo todo).
Para o incio
Use o elemento de atualizao para especificar se o navegador deve atualizar automaticamente a pgina recarregando a pgina atual ou
acessando outra aps um determinado perodo. Esse elemento geralmente usado para redirecionar os usurios de um URL para outro,
geralmente aps exibir uma mensagem de texto informando que o URL foi alterado.
Para o incio
Use o elemento Base para definir um URL base qual todos os caminhos relativos de documento da pgina so considerados relativos.
Para o incio
Para o incio
O widget Acordeo um conjunto de painis flexveis que podem armazenar um volume grande de contedo em um espao compacto. Os
visitantes do site clicam na aba do painel para ocultar ou revelar o contedo armazenado no acordeo. Os painis do acordeo se expandem ou
contraem de acordo com a aba em que o visitante clica. Em um acordeo, somente um painel de contedo fica aberto e visvel em determinado
momento. Este exemplo mostra um widget Acordeo com o primeiro painel expandido:
Para o incio
Para o incio
Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Acordeo, ele no aceita tarefas de estilizao
personalizadas. Voc pode alterar as regras de CSS para o dispositivo Acordeo e criar um acordeo com o estilo de sua preferncia.
Para obter uma referncia rpida sobre como alterar as cores no dispositivo Acordeo, consulte o Guia rpido para painis com guias, acordees
e contrair painis de David Powers.
Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_spryaccordion_custom_br.
Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryAccordion.css. O Dreamweaver salva o
arquivo SpryAccordion.css na pasta SpryAssets do seu site sempre que voc cria um widget Acordeo do Spry. Esse arquivo tambm contm
informaes comentadas sobre vrios estilos que se aplicam ao widget, o que poder ser til.
Embora voc possa facilmente editar regras para o widget Acordeo diretamente no arquivo CSS, voc tambm pode usar o painel Estilos
CSS para editar o CSS do acordeo. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget,
especialmente se voc usar o modo Atual do painel.
.Accordion or .AccordionPanel
.AccordionPanelTab
.AccordionPanelContent
.AccordionPanelTab
.AccordionPanelContent
.AccordionPanelOpen
.AccordionPanelTab
.AccordionPanelTabHover
.AccordionPanelOpen
.AccordionPanelTabHover
Para o incio
O widget Painel flexvel um painel que pode armazenar contedo em um espao compacto. Para ocultar ou expor o contedo armazenado no
Painel flexvel, o usurio clica na aba do widget. Este exemplo mostra um widget Painel flexvel, expandido e recolhido:
A. Expandido B. Recolhido
O HTML do widget Painel flexvel compe-se de uma tag div externa que contm a tag div do contedo e a tag div do recipiente da aba. O HTML
do widget Painel flexvel tambm inclui tags de script no cabealho do documento e aps o markup HTML do Painel flexvel.
Para obter uma explicao mais abrangente sobre como o widget Painel flexvel funciona, inclusive uma anatomia completa do cdigo desse
widget, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_br.
Para o incio
Para o incio
Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Painel flexvel, ele no aceita tarefas de estilizao
personalizadas. Voc pode alterar as regras de CSS para o dispositivo Painel flexvel e criar um painel flexvel com o estilo de sua preferncia.
Para obter uma referncia rpida sobre como alterar as cores no dispositivo Contrair painel, consulte o Guia rpido para painis com guias,
acordees e contrair painis de David Powers.
Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_br.
Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryCollapsiblePanel.css. O Dreamweaver
salva o arquivo SpryCollapsiblePanel.css na pasta SpryAssets do site sempre que voc cria um widget Painel flexvel do Spry. Esse arquivo
tambm contm informaes teis comentadas sobre vrios estilos que se aplicam ao widget.
Embora voc possa facilmente editar regras para o widget Painel flexvel diretamente no arquivo CSS relacionado, voc tambm pode usar o
painel Estilos CSS para editar o CSS do painel flexvel. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do
widget, especialmente se voc usar o modo Atual do painel.
.CollapsiblePanel
.CollapsiblePanelTab
.CollapsiblePanelContent
.CollapsiblePanelTab
.CollapsiblePanelContent
.CollapsiblePanelOpen
.CollapsiblePanelTab
.CollapsiblePanelTabHover,
.CollapsiblePanelOpen
.CollapsiblePanelTabHover
Para o incio
O widget Painis com aba um conjunto de painis que podem armazenar contedo em um espao compacto. Os visitantes do site ocultam ou
revelam o contedo armazenado nos Painis com aba clicando na aba do painel que eles desejam acessar. Os painis do widget abrem de
acordo com as abas em que o visitante clica. Em um widget Painis com aba, somente um painel de contedo aberto em determinado
momento. Este exemplo mostra um widget Painis com aba, com o terceiro painel aberto:
Para o incio
Para o incio
Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Painis com aba, ele no aceita tarefas de estilizao
personalizadas. Voc pode alterar as regras de CSS para o dispositivo Painis com aba e criar um dispositivo com o estilo de sua preferncia.
Para obter uma referncia rpida sobre como alterar as cores no dispositivo Painis com guias, consulte o Guia rpido para painis com guias,
acordees e contrair painis de David Powers.
Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_custom_br.
Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryTabbedPanels.css. O Dreamweaver salva o
arquivo SpryTabbedPanels.css na pasta SpryAssets do seu site sempre que voc cria um widget Painis com aba do Spry. Esse arquivo tambm
contm informaes teis comentadas sobre vrios estilos que se aplicam ao widget.
Embora voc possa facilmente editar regras para o widget Painis com aba diretamente no arquivo CSS relacionado, voc tambm pode usar
o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget,
especialmente se voc usar o modo Atual do painel.
.TabbedPanels
.TabbedPanelsTabGroup or
.TabbedPanelsTab
.TabbedPanelsContentGroup or
.TabbedPanelsContent
.TabbedPanelsTabGroup or
.TabbedPanelsTab
.Tabbed PanelsContentGroup or
.TabbedPanelsContent
.TabbedPanelsTabSelected
padro.)
.TabbedPanelsTabHover
Para o incio
O widget Dica de ferramenta do Spry exibe informaes adicionais quando o usurio passa o mouse sobre um elemento especfico em uma
pgina da Web. O contedo adicional desaparece quando o usurio tira o mouse desse local. Tambm possvel configurar as dicas de
ferramenta para permanecerem abertas por perodos maiores para que os usurios possam interagir com o seu contedo.
O widget Dica de ferramenta contm os trs elementos a seguir:
O recipiente da dica de ferramenta. Este elemento contm a mensagem ou o contedo que deve ser exibido assim que o usurio ativa a
dica de ferramenta.
Os elementos da pgina que ativam a dica de ferramenta.
O script do construtor. o JavaScript que informa ao Spry quando deve criar a funcionalidade de dica de ferramenta.
Quando voc inserir um widget Dica de ferramenta, o Dreamweaver cria um recipiente de dica de ferramenta usando as tags div e coloca as tags
span antes e depois do elemento "acionador" (o elemento da pgina que ativa a dica de ferramenta). O Dreamweaver usa essas tags por padro.
No entanto, as tags para a dica de ferramenta e para o elemento acionador podem ser de qualquer tipo, contanto que estejam no corpo da
pgina.
Leve em considerao os seguintes pontos ao trabalhar com o widget Dica de ferramenta:
Uma dica de ferramenta aberta ser fechada antes que a prxima seja aberta.
As dicas de ferramenta so exibidas enquanto o usurio passa o mouse pela rea de acionamento.
No existe nenhuma restrio quanto ao tipo de tag que pode ser usado para os acionadores e para o contedo da dica de ferramenta. No
entanto, os elementos em nvel de bloco so sempre recomendados para evitar possveis problemas de processamento entre navegadores.
Por padro, a dica de ferramenta aparece 20 pixels abaixo e direita do cursor. Para definir um ponto de aparncia personalizada, use as
opes Deslocamento horizontal e vertical do Inspetor de propriedades.
Atualmente, no possvel manter uma dica de ferramenta aberta durante o carregamento da pgina no navegador.
O widget Dica de ferramenta requer muito pouco CSS. O Spry usa o JavaScript para mostrar, ocultar e posicionar a dica de ferramenta. Voc
pode aplicar outros estilos para a dica de ferramenta com as tcnicas de CSS padro, conforme necessrio para sua pgina. A nica regra
contida no arquivo CSS padro uma soluo para problemas do Internet Explorer 6; essa regra faz com que a dica de ferramenta aparea
acima dos elementos de formulrio ou objetos Flash.
Para obter uma explicao mais abrangente sobre como o widget Dica de ferramenta Spry funciona, inclusive uma anatomia completa do
respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytooltip_br.
Para assistir a um tutorial em vdeo sobre como trabalhar com o widget Dica de ferramenta Spry, consulte www.adobe.com/go/lrvid4046_dw_br.
Para o incio
Para o incio
Para o incio
O widget Caixa de seleo de validao uma caixa de seleo ou um grupo de caixas de seleo em formato HTML que exibe estados vlidos
e invlidos quando o usurio marca ou no marca uma caixa de seleo. Por exemplo, voc pode adicionar um widget Caixa de seleo de
validao a um formulrio no qual o usurio precisa fazer trs selees. Se o usurio no fizer as trs selees, o widget retornar uma
mensagem informando que o nmero mnimo de selees no foi cumprido.
Este exemplo mostra um widget Caixa de seleo de validao em vrios estados:
A. Grupo de widgets Caixa de seleo de validao, estado nmero mnimo de selees B. Widget Caixa de seleo de validao, estado
obrigatrio
O widget Caixa de seleo de validao inclui inmeros estados (por exemplo, vlido, invlido, valor obrigatrio e assim por diante). Voc pode
alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validao desejados. Um widget
Caixa de seleo de validao pode validar em vrios pontos; por exemplo, quando o usurio clica fora do widget, quando ele faz selees ou
quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o formulrio.
Estado vlido O estado do widget depois que o usurio faz uma seleo ou corrige inmeras selees, e o formulrio pode ser enviado.
Estado obrigatrio O estado do widget quando o usurio no faz uma seleo obrigatria.
Estado Nmero mnimo de selees O estado do widget quando o usurio marca menos caixas de seleo do que o nmero mnimo
obrigatrio.
Estado Nmero mximo de selees O estado do widget quando o usurio marca mais caixas de seleo do que o nmero mximo
obrigatrio.
Sempre que um widget Caixa de seleo de validao entra em um desses estados por meio de interao do usurio, a lgica da estrutura do
Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um usurio tentar enviar um formulrio mas
no fizer selees, o Spry aplicar uma classe ao widget que provocar a exibio da mensagem de erro Faa uma seleo. As regras que
controlam o estilo e os estados de exibio das mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationCheckbox.css.
O HTML padro do widget Caixa de seleo de validao, em geral dentro de um formulrio, consiste em uma tag <span> de recipiente que fica
em volta da tag <input type="checkbox"> da caixa de seleo. O HTML do widget Caixa de seleo de validao tambm inclui tags de script no
cabealho do documento e aps o markup HTML do widget.
Para obter uma explicao abrangente sobre como o widget Caixa de seleo de validao funciona, inclusive uma anatomia completa do
respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprycheckbox_br.
Para o incio
Para o incio
Por padro, as mensagens de erro do widget Caixa de seleo de validao aparecem em vermelho com uma borda de 1 pixel em torno do texto.
Voc pode alterar o CSS do widget Caixa de seleo de validao para criar um widget que tenha o estilo de sua preferncia. Para obter uma
lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprycheckbox_custom_br.
1. Abra o arquivo SpryValidationCheckbox.css.
O Dreamweaver salva o arquivo SpryValidationCheckbox.css na pasta SpryAssets do seu site sempre que voc cria um widget Caixa de
seleo de validao do Spry. aconselhvel consultar este arquivo, pois ele contm informaes comentadas sobre vrios estilos que se
aplicam ao widget.
2. Use esta tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar seus prprios valores
e propriedades de estilo ao texto:
.checkboxRequiredState
.checkboxRequiredMsg,
.checkboxMinSelectionsState
.checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState
.checkboxMaxSelectionsMsg
Embora voc possa facilmente editar regras para o widget Caixa de seleo de validao diretamente no arquivo CSS relacionado, voc
tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a
diversos trechos do widget, especialmente se voc usar o modo Atual do painel.
Para o incio
O widget Confirmao de validao um campo de texto ou um campo de formulrio de senha que exibe estados vlidos ou invlidos quando o
usurio insere um valor que no corresponde ao valor de um campo similar no mesmo formulrio. Por exemplo, voc pode adicionar um widget
Confirmao de validao a um formulrio que exige que o usurio digite novamente a senha especificada em um campo anterior. Se o usurio
no digitar a senha exatamente conforme especificado antes, o widget retornar uma mensagem de erro informando que os valores no
coincidem.
Voc tambm pode usar o widget Confirmao de validao em conjunto com um widget Campo de texto de validao para validar endereos de
email.
Nota: Familiarize-se com os widgets de validao do Spry antes de trabalhar com o widget Confirmao. Se no estiver familiarizado com eles,
consulte Trabalho com o widget Campo de texto de validao do Spry ou qualquer outra viso geral dos widgets de validao antes de continuar.
Esta viso geral no apresenta todos os conceitos bsicos do widget de validao.
A ilustrao a seguir mostra uma configurao tpica do widget Confirmao:
Para o incio
2. No Inspetor de propriedades (Janela > Propriedades), selecione o campo de texto em relao ao qual deseja fazer a validao,
selecionando um campo de texto no menu pop-up Validar em relao a. Todos os campos de texto com IDs exclusivas atribudas a eles
so exibidos como opes no menu pop-up.
Para o incio
Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Confirmao de validao, ele no aceita tarefas de
estilizao personalizadas. Voc pode alterar o CSS do widget Confirmao de validao para criar um widget que tenha o estilo de sua
preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_spryconfirm_custom_br.
Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationConfirm.css. O Dreamweaver
salva o arquivo SpryValidationConfirm.css na pasta SpryAssets do seu site sempre que voc cria um widget Confirmao de validao do Spry. A
consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget.
Embora voc possa facilmente editar regras para o widget Confirmao de validao diretamente no arquivo CSS relacionado, voc tambm
pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos
do widget, especialmente se voc usar o modo Atual do painel.
Cor a alterar
Cor de fundo do widget em estado vlido
input.confirmRequiredState,
.confirmRequiredState input,
input.confirmInvalidState,
.confirmInvalidState input
.confirmFocusState input,
input.confirmFocusState
To the top
Text in Middle Eastern languages is mostly written from right to left (RTL). However, in general, the most commonly used form is bi-directional
(bidi) text - a mix of left-to-right and right-to-left text. An example of bidi text is a paragraph that includes Arabic and English text. In CS6, you can
use Dreamweaver to type Arabic, Hebrew, or bidi text, in design view and code view.
In Dreamweaver Middle Eastern version, Right-to-left direction attribute can be applied to two notional objects, paragraphs and characters. The
direction attribute can be applied to tags supported in the HTML specification. The direction attribute can take values: ltr (default), rtl, or
inherit.
Tag editor
To the top
You can apply direction and language settings using the Tag Editor.
Tag Editor
To the top
Table properties
To the top
Right-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left side. On tabbing, the
cursor moves in RTL direction..
Specify the table direction using the Properties panel.
Right-to-left table
Div properties
Use Direction to specify the Div direction in the Properties.
Div direction
Twitter and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy
To the top
Para o incio
O widget Barra de menus um conjunto de botes de menu de navegao que exibem submenus quando um visitante do site passa o mouse
sobre um dos botes. As barras de menus permitem que voc exiba um grande volume de informaes sobre navegao em um espao
compacto, alm de dar aos visitantes do site uma ideia do que est disponvel, sem necessidade de navegar excessivamente.
O Dreamweaver permite inserir dois tipos de widget de Barra de menu: vertical e horizontal. Este exemplo mostra um widget Barra de menus
horizontal com o terceiro item de menu expandido:
Para o incio
2. No Inspetor de propriedades, selecione o nome do item de menu principal ao qual voc deseja adicionar o submenu.
3. Clique no boto de adio acima da segunda coluna.
4. (Opcional) Renomeie o novo item de submenu alterando o texto padro na janela Documento ou na caixa de texto do Inspetor de
propriedades.
Para adicionar um submenu a um submenu, selecione o nome do item de submenu ao qual voc deseja adicionar outro item de submenu e clique
no boto de adio acima da terceira coluna no Inspetor de propriedades.
Nota: O Dreamweaver oferece suporte apenas a dois nveis de submenus na Visualizao de design, mas voc pode adicionar quantos menus
desejar na Visualizao de cdigo.
Excluir um item de menu ou submenu principal
1. Selecione um widget Barra de menus na janela Documento.
2. No Inspetor de propriedades, selecione o nome do item de menu ou submenu principal a ser excludo e clique no boto de subtrao.
Desativar estilos
Voc pode desativar o recurso de estilo de um widget Barra de menus para ver melhor a estrutura HTML do widget na Visualizao de design.
Por exemplo, quando voc desativa os estilos, os itens da barra de menus so exibidos em uma lista com marcadores na pgina, e no como
itens com estilo da barra de menus.
1. Selecione um widget Barra de menus na janela Documento.
2. Clique no boto Desativar estilos no Inspetor de propriedades (Janela > Propriedades).
Para o incio
Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Barra de menus, ele no aceita tarefas de estilizao
personalizadas. Voc pode alterar as regras de CSS para o dispositivo Barra de menus e criar uma barra de menus com o estilo de sua
preferncia.
Todas as regras de CSS nos tpicos abaixo se referem s regras padro localizadas no arquivo SpryMenuBarHorizontal.css ou
SpryMenuBarVertical.css (dependendo da sua seleo). O Dreamweaver salva esses arquivos CSS na pasta SpryAssets do seu site sempre que
voc criar um widget Barra de menus do Spry. Esses arquivos tambm contm informaes teis comentadas sobre vrios estilos que se aplicam
ao widget.
Embora voc possa facilmente editar regras para o widget Barra de menus diretamente no arquivo CSS relacionado, voc tambm pode usar
o painel Estilos CSS para editar o CSS da barra de menus. Esse painel til para localizar as classes de CSS atribudas a diversos trechos
do widget, especialmente se voc usar o modo Atual do painel.
Estilo a alterar
Texto padro
Cor do texto quando o ponteiro do
mouse passa por cima
Cor do texto em foco
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
cor: #FFF;
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
cor: #FFF;
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
cor: #FFF;
cor: #FFF;
Cor a alterar
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
Fundo padro
Cor de fundo quando o ponteiro do
mouse passa por cima
Posicionar submenus
A posio dos submenus da Barra de menus do Spry controlada pela propriedade de margem nas tags ul do submenu.
1. Localize a regra ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul.
2. Altere os valores padro margem: -5% 0 0 95%; para os valores desejados.
Tutorial da Barra de menu do Spry
Painel Estilos CSS no modo Atual
Para o incio
A formatao de texto no Dreamweaver semelhante ao uso de um processador de texto padro. Voc pode definir estilos de formatao
padro (Pargrafo, Cabealho 1, Cabealho 2 etc.) para um bloco de texto, alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado
ou aplicar estilos de texto, como negrito, itlico, cdigo (monoespaado) e sublinhado.
O Dreamweaver tem dois Inspetores de propriedades integrados em um: O Inspetor de propriedades CSS e o Inspetor de propriedades HTML. Ao
usar o Inspetor de propriedades CSS, o Dreamweaver formata o texto usando Folhas de estilo em cascata (CSS). A CSS proporciona aos
designers e desenvolvedores da Web maior controle sobre o design de pgina da Web e, ao mesmo tempo, fornece recursos avanados de
acessibilidade e menor tamanho de arquivo. O Inspetor de propriedades CSS permite acessar estilos existentes, bem como criar novos.
O uso da CSS uma maneira de controlar o estilo de uma pgina da Web sem comprometer sua estrutura. Ao separar elementos de design
visual (fontes, cores, margens etc.) da lgica estrutural de uma pgina da Web, a CSS proporciona aos designers da Web controle visual e
tipogrfico sem sacrificar a integridade do contedo. Alm disso, a definio do design tipogrfico e do layout da pgina em um bloco de cdigo
nico e distinto sem precisar recorrer a mapas de imagem, tags font, tabelas e GIFs de espaador permite downloads mais rpidos,
manuteno otimizada de sites e um ponto central a partir do qual os atributos de design sero controlados nas vrias pginas da Web.
No possvel armazenar estilos criados com CSS diretamente no documento ou, para mais eficincia e flexibilidade, voc pode armazenar
estilos em uma folha de estilos externa. Se voc anexar uma folha de estilos externa a vrias pginas da Web, todas as pginas refletiro
automaticamente todas as alteraes feitas na folha de estilos. Para acessar todas as regras CSS de uma pgina, use o painel Estilos CSS
(Janela > Estilos CSS). Para acessar as regras que se aplicam a uma seleo atual, use o painel Estilos CSS (modo Atual) ou o menu pop-up
Regra-alvo no Inspetor de propriedades CSS.
Se preferir, use tags de markup HTML para formatar o texto em suas pginas da Web. Para usar tags HTML em vez de CSS, formate o texto
usando o Inspetor de propriedades HTML.
Nota: possvel combinar a formatao CSS e a formatao HTML 3.2 em uma mesma pgina. A formatao aplicada de forma hierrquica: a
formatao HTML 3.2 substitui a formatao aplicada pelas folhas de estilos CSS externa, enquanto a CSS incorporada no documento substitui a
CSS externa.
Para o incio
1. Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto, e clique no boto CSS.
2. Siga um destes procedimentos:
Coloque o ponto de insero dentro do bloco de texto que foi formatado por uma regra que voc queira editar. A regra exibida no
menu pop-up Regra-alvo.
Selecione uma regra no menu pop-up Regra-alvo.
3. Faa alteraes na regra, usando as vrias opes do Inspetor de propriedades CSS.
Regra-alvo a regra que voc est editando no Inspetor de propriedades CSS. Quando se tem um estilo existente aplicado ao texto, a
regra que afeta o formato do texto exibida quando voc clica dentro do texto na pgina. Voc tambm pode usar o menu pop-up Regraalvo para criar novas regras CSS, novos estilos inline ou aplicar classes existentes ao texto selecionado. Se voc estiver criando uma nova
regra, precisar preencher a caixa de dilogo Nova regra CSS. Para obter mais informaes, consulte os links no final deste tpico.
Edio de regra Abre a caixa de dilogo Definio de regra CSS da regra-alvo. Se voc selecionar Nova regra CSS no menu pop-up
Regra-alvo e clicar no boto Editar regra, o Dreamweaver abrir a caixa de dilogo de definio Nova regra CSS em vez disso.
Painel CSS Abre o painel de estilos CSS e exibe as propriedades da regra-alvo na Exibio atual.
Para o incio
1. Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto, e clique no boto HTML.
2. Selecione o texto que deseja formatar.
3. Defina as opes a serem aplicadas ao texto selecionado:
Formato Define o estilo de pargrafo do texto selecionado. O pargrafo aplica o formato padro de uma tag <p>, Cabealho 1 adiciona
uma tag H1 e assim por diante.
ID Atribui uma ID seleo. O menu pop-up ID (se aplicvel) lista todas as IDs declaradas no utilizadas do documento.
Classe Exibe o estilo de classe atualmente aplicado ao texto selecionado. Se nenhum estilo tiver sido aplicado seleo, o menu pop-up
mostrar Sem estilo CSS. Se vrios estilos tiverem sido aplicados seleo, o menu estar em branco.
Use o menu Estilo para executar qualquer um destes procedimentos:
Selecionar o estilo a ser aplicado seleo.
Selecionar Nenhum para remover o estilo atualmente selecionado.
Selecione Renomear e renomeie o estilo.
Selecione Anexar folha de estilos para abrir uma caixa de dilogo que permita anexar uma folha de estilos externa pgina.
Negrito Aplica <b> ou <strong> ao texto selecionado de acordo com a preferncia de estilo definida na categoria Geral da caixa de
dilogo Preferncias.
Itlico Aplica <i> ou <em> ao texto selecionado de acordo com a preferncia de estilo definida na categoria Geral da caixa de dilogo
Preferncias.
Lista no ordenada Cria uma lista com marcadores do texto selecionado. Se nenhum texto for selecionado, uma nova lista com
marcadores ser iniciada.
Lista ordenada Cria uma lista numerada do texto selecionado. Se nenhum texto for selecionado, uma nova lista numerada ser iniciada.
Citao em bloco e Remover citao em bloco Recua ou remove o recuo do texto selecionado aplicando ou removendo a tag
blockquote. Em uma lista, o recuo cria uma lista aninhada e a remoo do recuo desaninha a lista.
Link Cria um link de hipertexto do texto selecionado. Clique no cone de pasta para acessar um arquivo no site; digite o URL; arraste o
cone Apontar para arquivo para um arquivo no painel Arquivos ou arraste um arquivo do painel Arquivos para a caixa.
Ttulo Especifica a dica de ferramenta de texto para um link de hipertexto.
Alvo Especifica o quadro ou a janela em que o documento vinculado ser carregado:
_blank carrega o arquivo vinculado em uma nova janela de navegador no nomeada.
_parent carrega o arquivo vinculado em um conjunto de quadros pai ou na janela do quadro que contm o link. Se o quadro que
contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Este alvo est implcito; portanto, voc geralmente no precisa
especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
Para o incio
O Dreamweaver exibe todas as classes disponveis para sua pgina no menu Classe do Inspetor de propriedades HTML. Voc pode renomear
estilos nessa lista, selecionando a opo Renomear, no final da lista de estilos de classe.
1. Selecione Renomear no menu pop-up Estilo do Inspetor de propriedades de texto.
2. Selecione o estilo que voc deseja renomear no menu pop-up Renomear estilo.
3. Digite um novo nome no campo de texto Novo nome e clique em OK.
Abertura do painel Estilos CSS
Para o incio
O Dreamweaver oferece um ambiente flexvel para trabalhar com uma variedade de documentos da Web. Alm dos documentos em HTML, voc
pode criar e abrir vrios documentos baseados em texto, inclusive CFML (Linguagem de markup do ColdFusion), ASP, JavaScript, e CSS (Folhas
de estilos em cascata). Tambm h suporte para arquivos de cdigo fonte como, por exemplo, Visual Basic, .NET, C# e Java.
O Dreamweaver fornece diversas opes para criao de um novo documento. Voc pode criar qualquer um dos seguintes:
Um novo documento em branco ou modelo
Um documento baseado em um dos layouts de pgina predefinida que fornecido com o Dreamweaver, incluindo mais de 30 layouts de
pgina baseados em CSS
Um documento baseado em um dos modelos existentes
Voc tambm pode definir as preferncias do documento. Por exemplo, caso normalmente trabalhe com um tipo de documento, voc pode
defini-lo como sendo o tipo de documento padro para novas pginas criadas.
Voc pode definir facilmente propriedades de documento como, por exemplo, marcas meta, ttulos de documento e cores de fundo, alm de
vrias outras propriedades de pgina na Visualizao de design ou na Visualizao de cdigo.
Para o incio
Voc pode trabalhar com diversos tipos de arquivos no Dreamweaver. O tipo de arquivo primrio com o qual voc trabalhar o arquivo HTML.
Os arquivos HTML ou Linguagem de markup de hipertexto contm a linguagem baseada em tags responsvel pela exibio de uma pgina
da Web em um navegador. Voc pode salvar arquivos HTML usando a extenso .html ou .htm. O Dreamweaver salva arquivos usando por
padro a extenso .html.
O Dreamweaver permite que voc crie e edite pginas da Web baseadas em HTML5. Layouts iniciais tambm esto disponveis para a criao
de pginas HTML5 a partir do zero.
A seguir, encontram-se alguns dos outros tipos comuns de arquivos que talvez voc use ao trabalhar com o Dreamweaver:
CSS Os arquivos em folha de estilos em cascata tm uma extenso .css. Eles so usados para formatar contedo em HTML e controlar o
posicionamento de vrios elementos de pgina.
GIF Os arquivos Graphics Interchange Format tm uma extenso .gif. GIF um formato grfico para Web conhecido para desenhos, logotipos,
grficos com reas transparentes e animaes. Os GIFs contm 256 cores no mximo.
JPEG Os arquivos Joint Photographic Experts Group (com o nome da organizao que criou o formato) tm uma extenso .jpg e costumam ser
fotografias ou imagens coloridas de alta resoluo. O formato JPEG mais conhecido por conta de fotografias digitais ou digitalizadas, imagens
que usam texturas, imagens com transies de gradientes de cores e todas as imagens que exijam mais de 256 cores.
XML Os arquivos de Linguagem de markup extensvel tm uma extenso .xml. Eles contm dados em uma forma no processada que pode ser
formatada usando a XSL (Linguagem de folha de estilos extensvel).
XSL Os arquivos de Linguagem de folha de estilos extensvel tm uma extenso .xsl ou .xslt. Eles so usados para aplicar estilo a dados em
XML que voc deseja exibir em uma pgina da Web.
Para o incio
Voc pode criar uma pgina que contenha um layout de CSS previamente elaborado ou criar uma pgina totalmente em branco e, em seguida,
criar um layout prprio.
1. Selecione Arquivo > Novo.
2. Na categoria Pgina em branco da caixa de seleo Novo Documento, selecione o tipo de pgina que voc deseja criar na coluna Tipo de
pgina. Por exemplo, selecione HTML para criar uma pgina HTML simples.
3. Se voc deseja que sua nova pgina contenha um layout de CSS, selecione um layout predefinido de CSS na coluna Layout; caso
contrrio, selecione Nenhum. Com base na seleo, uma visualizao e a descrio do layout selecionado so exibidas no lado direito da
caixa de dilogo.
Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador ou nas
configuraes de texto do visitante do site.
Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o
visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas configuraes de texto do visitante do site.
O Dreamweaver tambm oferece dois layouts HTML5 CSS: fixo de duas e trs colunas.
Nota: na Dreamweaver CC e posterior, somente os layouts CSS HTML5 esto disponveis.
4. Selecione um tipo de documento no menu pop-up Tipo de documento. Na maioria dos casos, voc pode usar a seleo padro, XHTML
1.0 Transitional ou HTML5 (Dreamweaver CC).
A seleo de uma das definies do tipo de documento em XHTML no menu TipoDoc (DTD) torna a pgina compatvel com XHTML. Por
exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no
menu. A XHTML (Linguagem de markup de hipertexto extensvel) uma reformulao do HTML como um aplicativo XML. Em geral, o uso
de XHTML oferece a voc os benefcios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da
Web.
Nota: para obter mais informaes sobre XHTML, consulte o site do World Wide Web Consortium (W3C), que contm a especificao de
XHTML 1.1 - XHTML baseada em mdulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www.w3c.org/TR/xhtml1/), bem como sites
validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).
5. Caso voc tenha selecionado um layout de CSS na coluna Layout, selecione um local para a CSS de layout no menu pop-up CSS de
layout.
Adicionar ao cabealho Adiciona a CSS do layout ao cabealho da pgina que voc est criando.
Criar novo arquivo Adiciona a CSS do layout a um novo arquivo CSS externo e anexa a nova folha de estilos pgina que voc est
criando.
Vincular ao arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras CSS necessrias ao layout.
Para fazer isso, clique no cone Anexar folha de estilo acima do painel de arquivo Anexar CSS e selecione uma folha de estilo CSS
existente. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico
arquivo) em vrios documentos.
6. (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao criar a pgina. Para
fazer isso, clique no cone Anexar folha de estilo acima do painel Anexar arquivo CSS e selecione uma folha de estilo CSS.
Para obter uma descrio detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos
de David Powers.
7. Selecione Ativar InContext Editing se voc deseja criar uma pgina com o InContext Editing ativado assim que voc salv-la.
Uma pgina ativada para InContext Editing dever ter pelo menos uma tag div que pode ser especificada como regio editvel. Por
exemplo, se tiver selecionado o tipo de pgina HTML, voc dever selecionar um dos layouts de CSS para sua nova pgina, j que esses
layouts j contm tags div pr-definidas. A regio editvel pela InContext Editing automaticamente colocada na tag div com a ID
content. Voc poder, posteriormente, adicionar mais regies editveis pgina, se desejar.
Nota: a InContext Editing foi removida na Dreamweaver CC e posterior.
8. Clique em Preferncias se voc deseja configurar as preferncias padro do documento, como um tipo de documento, codificao e uma
extenso de arquivo.
9. Clique em Obter mais contedo se deseja abrir o Dreamweaver Exchange onde voc poder baixar mais contedo de design de pgina.
10. Clique no boto Criar.
11. Salve o novo documento (Arquivo > Salvar).
12. Na caixa de dilogo exibida, v at a pasta em que deseja salvar o arquivo.
uma boa ideia salvar seu arquivo em um site do Dreamweaver.
13. Na caixa Nome do arquivo, digite um nome para o arquivo.
Evite o uso de espaos e de caracteres especiais em nomes de arquivo e pasta e no comece um nome de arquivo com um numeral. Em
particular, no use caracteres especiais (como, por exemplo, , ou ) ou pontuaes (como, por exemplo, dois-pontos, barras ou pontos)
nos nomes de arquivo que voc pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o
carregamento, o que far com que todos os links para o arquivo sejam desfeitos.
Para o incio
Voc pode usar a caixa de dilogo Novo documento para criar os modelos do Dreamweaver. Por padro, os modelos so salvos na pasta
Modelos do seu site.
1. Selecione Arquivo > Novo.
2. Na caixa de dilogo Novo documento, selecione a categoria Modelo em branco.
3. Selecione o tipo de pgina que voc deseja criar na coluna Tipo de modelo. Por exemplo, selecione Modelo de HTML para criar uma
pgina de HTML simples, selecione Modelo de ColdFusion para criar um modelo de ColdFusion e assim por diante.
4. Se voc deseja que sua nova pgina contenha um layout de CSS, selecione um layout predefinido de CSS na coluna Layout; caso
contrrio, selecione Nenhum. Com base na seleo, uma visualizao e a descrio do layout selecionado so exibidas no lado direito da
caixa de dilogo.
Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador ou nas
configuraes de texto do visitante do site.
Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o
visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas configuraes de texto do visitante do site.
5. Selecione um tipo de documento no menu pop-up TipoDoc. Na maioria dos casos, esta seleo padro ficar selecionada, XHTML 1.0
Transitional.
A seleo de uma das definies do tipo de documento em XHTML no menu TipoDoc (DTD) torna a pgina compatvel com XHTML. Por
exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no
menu. A XHTML (Linguagem de markup de hipertexto extensvel) uma reformulao do HTML como um aplicativo XML. Em geral, o uso
de XHTML oferece a voc os benefcios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da
Web.
Nota: para obter mais informaes sobre XHTML, consulte o site do World Wide Web Consortium (W3C), que contm a especificao de
XHTML 1.1 - XHTML baseada em mdulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www.w3c.org/TR/xhtml1/), bem como sites
validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).
6. Caso voc tenha selecionado um layout de CSS na coluna Layout, selecione um local para a CSS de layout no menu pop-up CSS de
layout.
Adicionar ao cabealho Adiciona a CSS do layout ao cabealho da pgina que voc est criando.
Criar novo arquivo Adiciona a CSS do layout a uma nova folha de estilos CSS externa e anexa a nova folha de estilos pgina que voc
est criando.
Vincular ao arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras CSS necessrias ao layout.
painel Anexar arquivo CSS e selecione uma folha de estilo CSS
Para fazer isso, clique no cone Anexar folha de estilo acima do
existente. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico
arquivo) em vrios documentos.
7. (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao criar a pgina. Para
fazer isso, clique no cone Anexar folha de estilo acima do
painel Anexar arquivo CSS e selecione uma folha de estilo CSS.
8. Selecione Ativar InContext Editing se voc deseja criar uma pgina com o InContext Editing ativado assim que voc salv-la.
Uma pgina ativada para InContext Editing dever ter pelo menos uma tag div que pode ser especificada como regio editvel. Por
exemplo, se tiver selecionado o tipo de pgina HTML, voc dever selecionar um dos layouts de CSS para sua nova pgina, j que esses
layouts j contm tags div pr-definidas. A regio editvel pela InContext Editing automaticamente colocada na tag div com a ID
content. Voc poder, posteriormente, adicionar mais regies editveis pgina, se desejar.
9. Clique em Preferncias se voc deseja configurar as preferncias padro do documento, como um tipo de documento, codificao e uma
extenso de arquivo.
10. Clique em Obter mais contedo se deseja abrir o Dreamweaver Exchange onde voc poder baixar mais contedo de design de pgina.
11. Clique no boto Criar.
12. Salve o novo documento (Arquivo > Salvar). Caso voc ainda no tenha adicionado regies editveis ao modelo, uma caixa de dilogo
exibida informando voc de que no h regies editveis no documento. Clique em OK para fechar a caixa de dilogo.
13. Na caixa de dilogo Salvar como, selecione um local para salvar o modelo.
14. Na caixa Nome de arquivo, digite um nome para o novo modelo. Voc no precisa acrescentar uma extenso de arquivo ao nome do
modelo. Ao clicar em Salvar, a extenso .dwt adicionada ao novo modelo, que ser salvo na pasta Modelos do seu site.
Evite o uso de espaos e de caracteres especiais em nomes de arquivo e pasta e no comece um nome de arquivo com um numeral. Em
particular, no use caracteres especiais (como, por exemplo, , ou ) ou pontuaes (como, por exemplo, dois-pontos, barras ou pontos)
nos nomes de arquivo que voc pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o
carregamento, o que far com que todos os links para o arquivo sejam desfeitos.
Para o incio
Voc pode selecionar, visualizar e criar um novo documento usando um modelo existente. Voc pode usar a caixa de dilogo Novo documento
para selecionar um modelo de qualquer um dos seus sites definidos do Dreamweaver ou usar o painel Ativos para criar um novo documento de
um modelo existente.
Caso tenha acabado de criar o modelo que voc deseja aplicar, voc talvez precise clicar no boto Atualizar para v-lo.
3. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no modelo que voc deseja aplicar e, em
seguida, selecione Novo a partir de modelo.
O documento aberto na janela Documento.
4. Salve o documento.
Para o incio
O Dreamweaver acompanhado de vrios arquivos de design CSS profissionalmente desenvolvidos e pginas iniciais para aplicativos mveis.
Voc pode usar esses arquivos de amostra como ponto de partida para o design de pginas nos sites. Quando voc criar um documento
baseado em um arquivo simples, o Dreamweaver criar uma cpia do arquivo.
Voc pode visualizar um arquivo de amostra e ler uma breve descrio dos elementos de design de um documento na caixa de dilogo Novo
documento. No caso das folhas de estilos CSS, voc pode copiar uma folha de estilos previamente criada e aplic-la aos documentos.
1. Selecione Arquivo > Novo.
2. Na caixa de dilogo Novo documento, selecione a categoria Pgina da amostra.
Na Dreamweaver CC, selecione a categoria Modelos iniciais.
3. Na coluna Pasta de modelos, selecione Folha de estilos CSS ou Iniciadores de disp. mveis; em seguida selecione um arquivo de amostra
da lista direita.
Nota: a opo Folha de estilos CSS foi removida na Dreamweaver CC e posterior.
4. Clique no boto Criar.
O novo documento aberto na janela Documento (Visualizaes de cdigo e design). Se voc tiver selecionado Folha de estilo CSS, ela
ser aberta na Visualizao de cdigo.
5. Salve o documento (Arquivo > Salvar).
6. Caso a caixa de dilogo Copiar arquivos dependentes seja exibida, defina as opes e, em seguida, clique em Copiar para copiar os ativos
para a pasta selecionada.
Voc pode selecionar seu prprio local para os arquivos dependentes ou usar o local padro de pasta que o Dreamweaver gera (baseado
no nome da fonte do arquivo modelo).
Consulte tambm
Para o incio
A categoria Outros da caixa de dilogo Novo documento permite criar vrios tipos de pginas que talvez voc deseje usar no Dreamweaver,
incluindo C#, VBScript e pginas apenas com texto.
1. Selecione Arquivo > Novo.
2. Na caixa de dilogo Novo documento, selecione a categoria Outros.
Nota: a categoria Outro foi removida na Dreamweaver CC e posterior.
3. Selecione o tipo de documento que voc deseja criar na coluna Tipo de pgina e clique no boto Criar.
4. Salve o documento (Arquivo > Salvar).
Para o incio
Voc pode salvar um documento usando seu nome e local atual, ou salvar uma cpia de um documento usando outro nome e local.
Ao nomear arquivos, evite usar espaos e caracteres especiais nos nomes de arquivo e pasta. Em particular, no use caracteres especiais (,
ou ) ou pontuao (como dois-pontos, barras ou pontos) nos nomes de arquivos que voc pretende colocar em um servidor remoto. Muitos
servidores alteram esses caracteres durante o carregamento, o que far com que quaisquer links para o arquivo sejam quebrados. Alm disso,
no comece um nome de arquivo com nmeros.
Salvar um documento
1. Siga um destes procedimentos:
Para substituir a verso atual no disco e salvar todas as alteraes feitas, selecione Arquivo > Salvar.
Para salvar o arquivo em uma pasta diferente ou com outro nome, selecione Arquivo > Salvar como.
2. Na caixa de dilogo Salvar como exibida, v at a pasta em que deseja salvar o arquivo.
3. Na caixa de texto Nome do arquivo, digite um nome para o arquivo.
4. Clique em Salvar para salvar o arquivo.
Para o incio
Voc pode definir o tipo de documento usado como documento padro de um site.
Por exemplo, caso a maioria das pginas do site seja de um tipo de arquivo especfico (como, por exemplo, documentos do ColdFusion, HTML ou
ASP), voc pode definir as preferncias de documento que criam automaticamente novos documentos do tipo de arquivo especificado.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
Voc tambm pode clicar no boto Preferncias da caixa de dilogo Novo documento para definir as preferncias de novo documento
quando voc cria um novo documento.
2. Clique em Novo documento na lista de categorias esquerda.
3. Defina ou altere as preferncias conforme necessrio e clique em OK para salv-las.
Documento padro Selecione um tipo de documento a ser usado nas pginas que voc criar.
Extenso padro Especifique a extenso de arquivo que voc prefere (.htm ou .html) para novas pginas em HTML criadas.
Nota: essa opo est desativada para outros tipos de arquivo.
Tipo padro de documento (DDT) Selecione uma das definies do tipo padro de documento (DTD) em XHTML para tornar novas
pginas compatveis com XHTML. Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0
Transitional ou XHTML 1.0 Strict no menu.
Codificao padro Especifique a codificao a ser usada quando uma nova pgina criada, bem como quando um documento aberto
sem especificar nenhuma codificao.
Se voc selecionar Unicode (UTF-8) como a codificao de documento, a codificao da entidade no ser necessria, pois o UTF-8
poder representar com segurana todos os caracteres. Se voc selecionar outra codificao de documento, a codificao de entidade
provavelmente ser necessria para representar determinados caracteres. Para obter mais informaes sobre as entidades de caractere,
consulte www.w3.org/TR/REC-html40/sgml/entities.html.
Se voc selecionar Unicode (UTF-8) como a codificao padro, ser possvel incluir uma marca BOM (marca de ordem de byte) no
Para o incio
A utilizao de Arquivo > Converter para alternar entre HTML5 e um tipo de arquivo mais antigo no remove elementos HTML5 ou atributos.
Somente as modificaes de tipo de arquivo e as barras (para XHTML) so inseridas.
As tags semnticas, como <header> e <article>, e os atributos, como required, placeholder e type="number", no so afetados.
Nota: a opo Converter foi removida na Dreamweaver CC e posterior.
Para o incio
Voc pode definir a extenso padro de arquivos de documentos em HTML criados no Dreamweaver. Por exemplo, voc pode usar uma
extenso .htm ou .html para todos os novos documentos em HTML.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
Voc poder tambm clicar no boto Preferncias na caixa de dilogo Novo documento para configurar as preferncias do novo
documento quando um novo documento for criado.
2. Clique em Novo documento na lista de categorias esquerda.
3. Verifique se HTML est selecionado no menu pop-up Documento padro.
4. Na caixa Extenso padro, especifique a extenso de arquivo que voc deseja para os novos documentos em HTML criados no
Dreamweaver.
No Windows, voc pode especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
No Macintosh, voc pode especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Para o incio
Voc pode abrir uma pgina da Web ou um documento baseado em texto que tenha sido criado ou no no Dreamweaver e edit-lo na
Visualizao de design ou cdigo.
Se o documento aberto for um arquivo do Microsoft Word salvo como um documento em HTML document, voc poder usar o comando Limpar
HTML do Word para remover as tags de markup estranhas que o Word insere nos arquivos HTML.
Para limpar HTML ou XHTML que no foi gerado pelo Microsoft Word, use o comando Limpar HTML.
Voc tambm pode abrir arquivos de texto que no so em HTML como, por exemplo, arquivos do JavaScript, arquivos em XML, folhas de estilos
CSS ou arquivos de texto salvos por processadores ou editores de texto.
Para o incio
O Dreamweaver permite exibir arquivos relacionados ao documento principal, sem perder o foco do documento principal. Por exemplo, se voc
tem arquivos CSS e JavaScript anexados a um documento principal, o Dreamweaver permite exibir e editar esses arquivos relacionados na janela
Documento, ao mesmo tempo que mantm o documento principal visvel.
Nota: Arquivos rel. dinamicamente (tais como arquivos PHP em Sistemas de gerenciamento de contedo) so abordados na prxima seo de
Ajuda.
Por padro, o Dreamweaver mostra os nomes de todos arquivos relacionados a um documento principal na barra de ferramentas Arquivos
relacionados abaixo do ttulo de documento principal. A ordem dos botes na barra de ferramentas segue a ordem dos links de arquivos
relacionados existentes no documento principal.
Nota: se estiver faltando um arquivo relacionado, o Dreamweaver ainda exibir o boto correspondente na barra de ferramentas Arquivos
relacionados. Se voc clicar no boto, no entanto, o Dreamweaver no exibe nada.
O Dreamweaver oferece suporte aos seguintes tipos de arquivos relacionados:
Arquivos de script do cliente
Incluses do servidor
Fontes de conjuntos de dados do Spry (XML e HTML)
Folhas de estilos CSS externas (incluindo folhas de estilos aninhadas)
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com arquivos relacionados, consulte
www.adobe.com/go/dw10relatedfiles_br.
Para assistir a um tutorial em vdeo sobre como trabalhar com Visualizao dinmica, arquivos relacionados e o Navegador de cdigo, consulte
www.adobe.com/go/lrvid4044_dw_br.
Para o incio
O recurso de Arquivos relacionados dinamicamente estende a funcionalidade do recurso de Arquivos relacionados permitindo que voc veja os
arquivos relacionados das pginas dinmicas na barra de ferramentas Arquivos relacionados. Especificamente, o recurso Arquivos relacionados
dinamicamente permite a visualizao das numerosas incluses dinmicas necessrias para gerar o cdigo de tempo de execuo para as
conhecidas estruturas de fonte aberta do Sistema de gerenciamento de contedo PHP, tais como WordPress, Drupal e Joomla!.
Para usar o recurso Arquivos relacionados dinamicamente, necessrio que voc tenha acesso a um servidor de aplicativo PHP remoto ou local
que execute WordPress, Drupal ou Joomla!. Uma abordagem comum para pginas de teste definir um servidor de aplicativo PHP de host local
e testar as pginas localmente.
Antes de testar as pginas, necessrio que voc execute as seguintes etapas:
Defina um site Dreamweaver e certifique-se de ter preenchido a caixa de texto URL da Web na caixa de dilogo Configurao de site.
Configure um servidor de aplicativo PHP.
Nota: o servidor deve estar sendo executado antes de voc tentar trabalhar com os Arquivos relacionados dinamicamente no Dreamweaver.
Instale WordPress, Drupal ou Joomla! no servidor de aplicativo. Para obter mais informaes, consulte:
Instalao do WordPress
Instalao do Drupal
Instalao do Joomla
No Dreamweaver, defina uma pasta local em que voc ir fazer o download e editar os arquivos CMS.
Defina o local de instalao dos arquivos WordPress, Drupal ou Joomla! como sua pasta de teste remota.
Faa o download dos arquivos CMS da pasta remota.
3. Selecione Manualmente ou Automaticamente no menu pop-up Arquivos rel. dinamicamente. Tambm possvel desativar a identificao
inteiramente selecionando Desativado.
Para o incio
Voc pode abrir documentos salvos pelo Microsoft Word como arquivos em HTML e, em seguida, usar o comando Limpar HTML do Word para
remover o cdigo HTML estranho gerado pelo Word. O comando Limpar HTML do Word est disponvel para documentos salvos como arquivos
em HTML pelo Word 97 ou posterior.
O cdigo que o Dreamweaver remove usado principalmente pelo Word para formatar e exibir documentos no Word e no necessrio para
exibir o arquivo em HTML. Mantenha uma cpia do arquivo do Word (.doc) original como backup porque voc talvez no consiga reabrir o
documento em HTML no Word por ter aplicado o recurso Limpar HTML do Word.
Para limpar HTML ou XHTML que no foi gerado pelo Microsoft Word, use o comando Limpar HTML.
1. Salve o documento do Microsoft Word como um arquivo em HTML.
Nota: no Windows, feche o arquivo do Word para evitar uma violao no compartilhamento.
2. Abra o arquivo em HTML no Dreamweaver.
Para exibir o cdigo em HTML gerado pelo Word, alterne para a Visualizao de cdigo (Visualizar > Cdigo).
3. Selecione Comandos > Limpar HTML do Word.
Nota: se no for possvel que o Dreamweaver determine a verso do Word usado para salvar o arquivo, selecione a verso correta no
menu pop-up.
4. Marque (ou desmarque) as opes de limpeza. As preferncias que voc digita so salvas como configuraes de limpeza padro.
O Dreamweaver aplica as configuraes de limpeza ao documento em HTML e um registro de alteraes exibido (a menos que voc
desmarque essa opo na caixa de dilogo).
Remover todos os markups especficos do Word Remove todo o HTML especfico do Microsoft Word, incluindo XML das tags HTML,
metadados personalizados do Word e tags link do cabealho do documento, markups XML do Word, tags condicionais e seu contedo,
alm de pargrafos vazios e margens de estilos. Voc pode selecionar cada uma dessas opes individualmente usando a guia Detalhado.
Limpar CSS Remove todas as CSS especficas do Word, inclusive estilos de CSS inline quando possvel (onde o estilo pai tem as mesmas
propriedades de estilo), atributos de estilo que comeam com mso, declaraes de estilo no CSS, atributos de estilo de CSS de tabelas e
todas as definies de estilo no usadas do cabealho. Voc pode personalizar ainda mais essa opo usando a aba Detalhado.
Limpar tags <font> Remove tags HTML, convertendo o texto do corpo padro em texto HTML tamanho 2.
Corrigir tags aninhadas de forma invlida Remove as tags de markup de fonte inseridas pelo Word fora das tags de pargrafo e
cabealho (nvel do bloco).
Aplicar formatao de origem Aplica as opes de formatao de origem que voc especifica nas preferncias de formato HTML e
SourceFormat.txt ao documento.
Mostrar concluso do logon Exibe uma caixa de alerta com detalhes sobre as alteraes feitas no documento assim que a limpeza
concluda.
5. Clique em OK ou clique na guia Detalhado se voc deseja personalizar ainda mais as opes Remover todo o markup especfico do Word
e Limpar CSS e, em seguida, clique em OK.
Cdigo XHTML
Business Catalyst InContext Editing
Salvar arquivos de estrutura e conjunto de estruturas
Introduo codificao de documentos
Cdigo de limpeza
Iniciar um editor externo para arquivos de mdia
Trabalhar com arquivos no Painel de arquivos
Alternar entre visualizaes na janela Documento
Navegar at o cdigo relacionado
Visualizao de pginas no Dreamweaver
Tutorial de arquivos relacionados
www.adobe.com/go/dwcs5drf_br
Para o incio
Voc pode inserir arquivos de imagem do Photoshop (formato PSD) em pginas da Web no Dreamweaver e permitir que o Dreamweaver otimizeas como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ao, o Dreamweaver insere a imagem como um
Objeto Inteligente e mantm uma conexo ativa com o arquivo PSD original.
Tambm possvel colar toda ou parte de uma imagem do Photoshop de vrias camadas ou fatias em uma pgina da Web no Dreamweaver.
Entretanto, quando voc copia e cola do Photoshop, a conexo ativa com o arquivo original no mantida. Para atualizar a imagem, faa as
alteraes no Photoshop e copie e cole novamente.
Nota: Se esse recurso de integrao for usado com frequncia, voc poder armazenar seus arquivos do Photoshop no site do Dreamweaver
para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposio dos ativos originais, assim como
as transferncias desnecessrias entre o site local e o servidor remoto.
Para obter um tutorial sobre o fluxo de trabalho do Objeto Inteligente no Photoshop e no Dreamweaver, consulte
www.adobe.com/go/lrvid4043_dw_br.
Para o incio
H dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de
trabalho dos Objetos Inteligentes.
Fluxo de trabalho copiar/colar
O fluxo de trabalho copiar/colar permite que voc selecione fatias ou camadas em um arquivo do Photoshop e, em seguida, use o Dreamweaver
para inseri-las como imagens prontas para a Web. Se quiser atualizar o contedo posteriormente, entretanto, voc dever abrir o arquivo
Photoshop original, executar as alteraes, copiar sua fatia ou camada para a rea de Transferncia novamente e, em seguida, colar a fatia ou a
camada atualizada no Dreamweaver. Esse fluxo de trabalho s recomendado quando voc deseja inserir parte de um arquivo do Photoshop
(por exemplo, uma seo de um componente de design) como uma imagem em uma pgina da Web.
Fluxo de trabalho dos Objetos Inteligentes
Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho dos Objetos Inteligentes. Um Objeto Inteligente no
Dreamweaver uma imagem colocada em um pgina da Web que tenha uma conexo instantnea com um arquivo original do Photoshop (PSD).
Na Visualizao de design do Dreamweaver, um Objeto Inteligente indicado por um cone no canto superior esquerdo da imagem.
Objeto Inteligente
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo Photoshop original, o
Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em vermelho. Quando voc
seleciona a imagem da Web na Visualizao de design e clica no boto Atualizar do original no Inspetor de propriedades, a imagem atualizada
automaticamente, refletindo todas as alteraes feitas no arquivo original do Photoshop.
Ao usar o fluxo de trabalho de Objetos Inteligentes, voc no precisa abrir o Photoshop para atualizar uma imagem da Web. Alm disso,
quaisquer atualizaes feitas em um Objeto Inteligente no Dreamweaver so no destrutivas. Ou seja, voc pode alterar a verso da Web da
imagem em sua pgina enquanto mantm a imagem original do Photoshop intacta.
Voc tambm pode atualizar um Objeto Inteligente sem selecionar a imagem da Web na visualizao de Design. O painel Recursos permite que
voc atualize todos os Objetos Inteligentes, incluindo as imagens que podem no ser selecionveis na janela Documento (por exemplo, imagens
de segundo plano CSS).
Configuraes de otimizao de imagens
Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos Inteligentes, voc pode especificar configuraes de
otimizao na caixa de dilogo Otimizao da imagem. Esta caixa de dilogo permite especificar o formato de arquivo e a qualidade da imagem.
Se voc estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto Inteligente pela
primeira vez, o Dreamweaver exibir essa caixa de dilogo de modo que voc possa criar facilmente a imagem da Web.
Se voc copiar e colar uma atualizao em uma determinada fatia ou camada, o Dreamweaver manter as configuraes originais e recriar a
imagem da Web com essas configuraes. Da mesma maneira, ao atualizar um Objeto Inteligente usando o Inspetor de propriedades, o
Dreamweaver usar as mesmas configuraes usadas quando voc inseriu a imagem pela primeira vez. Voc pode alterar as configuraes de
imagem a qualquer momento selecionando a imagem da Web na Visualizao de design e, em seguida, clicar no boto Editar configuraes da
imagem no Inspetor de propriedades.
Armazenamento de arquivos do Photoshop
Se voc tiver inserido uma imagem da Web e no tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o
Dreamweaver reconhecer o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso verdadeiro tanto para o fluxo de
trabalho de copiar/colar quanto para o de Objetos Inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:\Sites\meuSite e
seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver no reconhecer o ativo original como parte do site
chamado meuSite. Isso causar problemas se voc quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o
Dreamweaver reconhecer o arquivo somente como disponvel em um determinado disco rgido local.
Se voc armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definir um caminho entre o site o arquivo. Qualquer usurio
com acesso ao site ser capaz de definir o caminho correto at o arquivo, desde que voc tenha fornecido o arquivo original para download.
Para obter um tutorial em vdeo sobre o fluxo de trabalho dos Objetos Inteligentes no Photoshop e no Dreamweaver, consulte
www.adobe.com/go/lrvid4043_dw_br.
Para o incio
Quando voc insere uma imagem do Photoshop (arquivo PSD) em uma pgina, o Dreamweaver cria um Objeto Inteligente. Um Objeto Inteligente
uma imagem habilitada para a Web que mantm uma conexo ativa com a imagem original do Photoshop. Sempre que voc atualiza a imagem
original no Photoshop, o Dreamweaver oferece a opo de atualizar a imagem no Dreamweaver com o clique de um boto.
1. No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja inserir a imagem.
2. Selecione Inserir > Imagem.
Voc tambm pode arrastar o arquivo PSD para a pgina a partir do painel Arquivos, caso esteja armazenando os arquivos do
Photoshop em seu site. Se essa for a sua opo, ignore a prxima etapa.
3. Localize o arquivo de imagem PSD do Photoshop na caixa de dilogo Selecionar origem da imagem clicando no boto Procurar e
navegando at o arquivo.
4. Ajuste as configuraes de otimizao conforme necessrio na caixa de dilogo Otimizao da imagem e clique em OK.
5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.
O Dreamweaver cria os Objetos Inteligentes com base nas configuraes de otimizao selecionadas e coloca em sua pgina a verso habilitada
para a Web da imagem. O Objeto Inteligente mantm uma conexo ativa com a imagem original e permite que voc saiba quando ambas esto
fora de sincronia.
Nota: Se voc decidir alterar posteriormente as configuraes de otimizao para uma imagem colocada em suas pginas, pode selecionar a
imagem, clicar no boto Editar Configuraes de imagem, no Inspetor de propriedades da imagem, e fazer as alteraes na caixa de dilogo
Otimizao de imagem. As alteraes feitas na caixa de dilogo Otimizao de imagem so aplicadas de forma no destrutiva. O Dreamweaver
nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais.
Para obter um tutorial em vdeo sobre como trabalhar com os Objetos Inteligentes do Photoshop, consulte www.adobe.com/go/lrvid4043_dw_br.
Para o incio
Se voc alterar o arquivo do Photoshop ao qual seu Objeto Inteligente vinculado, o Dreamweaver notifica que a imagem habilitada para a web
est fora de sincronia com o original. No Dreamweaver, os Objetos Inteligentes so indicados por um cone no canto superior esquerdo da
imagem. Quando a imagem habilitada para a Web no Dreamweaver est fora de sincronia com o arquivo original do Photoshop, ambas as setas
do cone ficam verdes. Quando a imagem habilitada para a Web est fora de sincroniza com o arquivo original do Photoshop, uma das setas do
cone fica vermelha.
Para atualizar um objeto inteligente com o contedo atual do arquivo original do Photoshop, selecione Objeto Inteligente na janela
Documento e clique no boto Atualizar do original, no Inspetor de propriedades.
Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.
Para o incio
Voc pode atualizar vrios Objetos Inteligentes de uma s vez usando o painel Ativos. O painel Ativos possibilita visualizar os Objetos Inteligentes
que talvez no possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS).
1. No painel Arquivos, clique na aba Ativos para visualizar os ativos do site.
2. Certifique-se de que a visualizao Imagens foi selecionada. Caso contrrio, clique no boto Imagens.
3. Selecione cada ativo de imagem no painel Ativos. Quando voc seleciona um Objeto Inteligente, possvel ver um cone de Objeto
Inteligente no canto superior esquerdo da imagem. Imagens normais no possuem esse cone.
4. Em cada objeto Inteligente que voc quiser atualizar, clique com o boto direito do mouse sobre o nome do arquivo e selecione Atualizar
do original. Voc tambm pode clicar mantendo a tecla Control pressionada para selecionar vrios nomes de arquivos e atualizar todos de
uma vez.
Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.
Para o incio
Voc pode redimensionar um Objeto Inteligente na janela Documento como faria com qualquer outra imagem.
1. Selecione o Objeto Inteligente na janela Documento e arraste as alas de redimensionamento para redimensionar a imagem. Voc pode
manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta.
2. Clique no boto Atualizar do original no Inspetor de propriedades.
Quando voc atualiza o Objeto Inteligente, a imagem da web reprocessa o novo tamanho de forma no destrutiva com base no contedo
atual do arquivo original e das configuraes originais de otimizao.
Para o incio
Aps criar o Objeto Inteligente na sua pgina do Dreamweaver, voc pode editar o arquivo PSD original no Photoshop. Aps fazer as alteraes
no Photoshop, voc pode atualizar facilmente a imagem da Web no Dreamweaver.
Nota: Certifique-se de configurar o Photoshop como editor principal de imagens externas.
1. Selecione o Objeto Inteligente na janela Documento.
Para o incio
Descrio
Ao recomendada
Imagens sincronizadas
Nenhum
Para o incio
Voc pode copiar todas ou algumas imagens do Photoshop e colar a seleo na pgina do Dreamweaver como uma imagem habilitada para a
Web. possvel copiar uma nica camada ou um conjunto de camadas de uma rea selecionada da imagem ou copiar uma fatia da imagem.
Entretanto, quando se faz isso, o Dreamweaver no cria um Objeto Inteligente.
Nota: Embora a funo Atualizar do original no esteja disponvel para imagens coladas, voc ainda pode abrir e editar o arquivo original do
Photoshop selecionando a imagem colada e clicando no boto Editar do Inspetor de propriedades.
1. No Photoshop, execute um dos procedimentos a seguir:
Copie toda ou parte de uma nica camada usando a ferramenta Moldura para selecionar a parte que deseja copiar e escolha Editar >
Copiar. Somente a camada ativa da rea selecionada copiada na rea de transferncia. Se houver efeitos baseados em camadas,
eles no sero copiados.
Copie e mescle vrias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha Editar > Copiar parte
mesclada. Isso nivela e copia todas as camadas ativas e inferiores da rea selecionada na rea de transferncia. Se houver efeitos
baseados em camadas associados, eles no sero copiados.
Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar. Isso nivela e copia
todas as camadas ativas e inferiores da fatia na rea de transferncia.
Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.
2. No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja inserir a imagem.
3. Selecione Editar > Colar.
4. Na caixa de dilogo Visualizao da imagem, ajuste as configuraes de otimizao como necessrio e clique em OK.
5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.
O Dreamweaver define a imagem de acordo com as configuraes de otimizao e coloca uma verso habilitada para a Web da imagem na sua
pgina. As informaes sobre a imagem, como o local do arquivo PSD original, so salvas em uma Design Note, independentemente de as
Design Notes estarem ativadas para seu site. A Design Note permite que voc volte para editar o arquivo de origem do Photoshop a partir do
Dreamweaver.
Para obter um tutorial sobre como copiar e colar entre diferentes aplicativos, incluindo Dreamweaver e Photoshop, consulte
www.adobe.com/go/vid0193_br.
Para o incio
Aps colar as imagens do Photoshop nas suas pginas do Dreamweaver, voc pode editar o arquivo PSD original no Photoshop. Ao utilizar o
fluxo de trabalho copiar/colar, a Adobe recomenda sempre manter suas edies no arquivo original PSD, e no na imagem habilitada para a web,
e a colar novamente para manter uma nica origem.
Nota: Verifique se o Photoshop est definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar.
1. No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e execute um dos
procedimentos a seguir:
Clique no boto Editar no Inspetor de propriedades da imagem.
Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma imagem, escolha Editar
original com no menu de contexto e, em seguida, escolha Photoshop.
Nota: Esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem
PSD. Voc tambm pode definir o Photoshop como o editor padro para os tipos de arquivo JPEG, GIF e PNG.
2. Editar o arquivo no Photoshop.
3. Retorne ao Dreamweaver e cole a imagem ou seleo atualizada em sua pgina.
Para reotimizar a imagem a qualquer momento, selecione-a e clique no boto Editar configuraes de imagem no Inspetor de propriedades.
Para o incio
Ao criar um Objeto Inteligente ou colar uma seleo do Photoshop, o Dreamweaver exibe a caixa de dilogo Visualizao da imagem . (O
Dreamweaver tambm exibe esta caixa de dilogo para qualquer outro tipo de imagem, se voc selecionar a imagem e clicar no boto Editar
configuraes de imagem no Inspetor de propriedades.) Esta caixa de dilogo possibilita definir e visualizar as configuraes para imagens
habilitadas para a Web usando a combinao correta de cor, compactao e qualidade.
Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparncia, independentemente
do sistema ou do navegador usado pelo visualizador. Em geral, as configuraes afetam a qualidade e o tamanho do arquivo.
Nota: Apenas a verso importada do arquivo de imagem afetada, independentemente das configuraes selecionadas. Os arquivos originais
PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados.
Predefinio Escolha a Predefinio mais adequada aos seus requisitos. O tamanho do arquivo da imagem muda de acordo com a predefinio
escolhida. Uma visualizao instantnea da imagem com a configurao aplicada exibida em segundo plano.
Por exemplo, para as imagens que devem ser exibidas com um alto grau da claridade, escolha PNG24 para fotos (detalhes ntidos). Selecione
GIF para imagens de fundo (padres) se voc estiver inserindo o padro que ser a imagem do fundo da pgina.
Quando uma predefinio selecionada, suas opes configurveis so exibidas. Para personalizar ainda mais suas configuraes de
otimizao, modifique os valores dessas opes.
Para o incio
Sobre imagens
H vrios tipos diferentes de formatos de arquivos grficos, mas trs formatos so geralmente usados nas pginas da Web: GIF, JPEG e PNG. Os formatos de arquivo GIF
e JPEG so os mais aceitos e podem ser exibidos pela maioria dos navegadores.
GIF (Graphic Interchange Format) Os arquivos GIF usam um mximo de 256 cores e so mais adequados para a exibio de imagens em tom
no contnuo ou imagens grandes de cores simples, como barras de navegao, botes, cones, logotipos ou outras imagens com cores e tons
uniformes.
JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG o formato preferido para imagens fotogrficas ou em tom contnuo,
pois os arquivos JPEG podem conter milhes de cores. medida que a qualidade de um arquivo JPEG aumenta, tambm aumentam o tamanho
e o tempo de download do arquivo. Voc geralmente consegue um bom equilbrio entre a qualidade da imagem e o tamanho do arquivo
compactando um arquivo JPEG.
PNG (Portable Network Group) O formato de arquivo PNG um substituto sem patentes para GIFs que inclui suporte a imagens true-color, em
tons de cinza e de cores indexadas, alm de suporte a canal alfa para transparncia. PNG o formato de arquivo nativo do Adobe Fireworks.
Os arquivos PNG retm todas as informaes originais de camada, vetor, cor e efeitos (como sombras) e todos os elementos so completamente
editveis, continuamente. Os arquivos devem ter a extenso .png para serem reconhecidos como arquivos PNG pelo Dreamweaver.
Para o incio
Quando voc insere uma imagem em um documento do Dreamweaver, uma referncia ao arquivo de imagem gerada no cdigo-fonte HTML.
Para garantir que essa referncia est correta, o arquivo de imagem deve estar no site atual. Caso contrrio, o Dreamweaver perguntar se voc
deseja copiar o arquivo para o site.
Voc tambm pode inserir imagens dinamicamente. As imagens dinmicas so aquelas que mudam frequentemente. Por exemplo, os sistemas
de rotao de banners de propaganda precisam selecionar aleatoriamente um banner em uma lista de banners possveis e exibir dinamicamente
a imagem do banner selecionada quando uma pgina solicitada.
Aps inserir uma imagem, voc poder definir os atributos de acessibilidade de tag de imagem que podem ser lidos pelos leitores de tela para
usurios com deficincias visuais. Esses atributos podem ser editados no cdigo HTML.
Para obter um tutorial sobre como inserir imagens, consulte www.adobe.com/go/vid0148_br.
1. Coloque o ponto de insero no local da janela Documento em que a imagem deve aparecer e siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no cone Imagens
Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem. Com o cone Imagem exibido no painel
Inserir, arraste-o para a janela Documento (ou a janela Visualizao de cdigo, caso voc esteja trabalhando no cdigo).
Selecione Inserir > Imagem.
Arraste uma imagem do painel Ativos (Janela > Ativos) para o local desejado na janela Documento e v para a etapa 3.
Arraste uma imagem do painel Arquivos para o local desejado na janela Documento e v para a etapa 3.
Arraste uma imagem da rea de trabalho para o local desejado na janela Documento e v para a etapa 3.
2. Na caixa de dilogo exibida, siga um destes procedimentos:
Selecione Sistema de arquivos para escolher um arquivo de imagem.
1. Selecione Janela > Propriedades para exibir o Inspetor de propriedades de uma imagem selecionada.
2. Na caixa de texto abaixo da imagem em miniatura, digite um nome com o qual voc se referir imagem ao usar um comportamento do
Dreamweaver (como Trocar imagem) ou ao usar uma linguagem de script como JavaScript ou VBScript.
3. Defina qualquer uma das opes de imagem.
L e A A largura e a altura da imagem, em pixels. O Dreamweaver atualiza automaticamente essas caixas de texto com as dimenses
originais da imagem quando voc insere uma imagem em uma pgina.
Se voc definir valores L e A que no correspondam largura e altura reais da imagem, esta pode no ser exibida corretamente em um
navegador. (Para restaurar os valores originais, clique nos rtulos de caixa de texto L e A ou no boto Redefinir tamanho da imagem
exibido direita das caixas de texto L e A quando voc digita um novo valor.)
Nota: Voc pode alterar esses valores para dimensionar o tamanho de exibio desta ocorrncia da imagem, mas isso no reduz o tempo
de download, pois o navegador baixa todos os dados da imagem antes do seu dimensionamento. Para reduzir o tempo de download e
garantir que todas as ocorrncias de uma imagem aparecero do mesmo tamanho, use o aplicativo de edio de imagens para dimensionar
as imagens.
Origem Especifica o arquivo de origem da imagem. Clique no cone de pasta para navegar at o arquivo de origem ou digite o caminho.
Link Especifica um hiperlink para a imagem. Arraste o cone Apontar para arquivo para um arquivo do painel Arquivos, clique no cone de
pasta para ir at um documento no site ou digite manualmente o URL.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram
definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que usam sintetizadores de fala com
navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparece quando o ponteiro est
sobre a imagem.
Ferramentas Nome do mapa e Ponto ativo Permite identificar e criar um mapa de imagens do cliente.
Alvo Especifica o quadro ou a janela em que a pgina vinculada ser carregada. (Esta opo no est disponvel quando a imagem no
est vinculada a outro arquivo.) Os nomes de todos os quadros do conjunto de quadros atuais aparecem na lista Destino. Voc tambm
pode escolher entre os nomes de destino reservados:
_blank carrega o arquivo vinculado em uma nova janela do navegador no nomeada.
_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se o quadro que contm o
link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no necessrio
especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
Editar Inicia o editor de imagens especificado nas preferncias de editores externos e abre a imagem selecionada.
Atualizar do original
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em
vermelho. Quando voc seleciona a imagem da Web na Visualizao de design e clica no boto Atualizar do original no Inspetor de
propriedades, a imagem atualizada automaticamente, refletindo todas as alteraes feitas no arquivo original do Photoshop.
Editar configuraes da imagem
Cortar
Nova amostra
Brilho e contraste
Nitidez
Abre a caixa de dilogo Visualizao de imagem e possibilita que voc otimize a imagem.
Faz uma nova amostra de uma imagem redimensionada, aprimorando sua qualidade no seu novo tamanho e forma.
Ajusta as configuraes de brilho e contraste de uma imagem.
Para o incio
Voc pode redimensionar visualmente elementos como imagens, plug-ins, arquivos Shockwave ou SWF, applets e controles ActiveX no
Dreamweaver.
O redimensionamento visual de uma imagem ajuda voc a ver como a imagem afeta o layout em diferentes dimenses, mas no dimensiona o
arquivo de imagem nas propores especificadas. Se voc redimensionar visualmente uma imagem no Dreamweaver sem usar um aplicativo de
edio de imagens (como o Adobe Fireworks) para dimensionar o arquivo de imagem para o tamanho desejado, o navegador do usurio
dimensionar a imagem quando a pgina for carregada. Isso pode ocasionar um atraso no tempo de download da pgina e a exibio
inadequada da imagem no navegador do usurio. Para reduzir o tempo de download e garantir que todas as ocorrncias de uma imagem
aparecero do mesmo tamanho, use o aplicativo de edio de imagens para dimensionar as imagens.
Ao redimensionar uma imagem no Dreamweaver, voc poder fazer uma nova amostra para acomodar suas novas dimenses. A nova amostra
adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao mximo aparncia da imagem
original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download.
Nota: Voc no pode criar uma nova amostra de alocadores de espao de imagem ou elementos que no sejam imagens de bitmap.
Para o incio
Um alocador de espao de imagem um grfico utilizado at que a arte final esteja pronta para ser adicionada a uma pgina da Web. Voc pode
definir o tamanho e a cor do alocador de espao, bem como fornecer um rtulo de texto a ele.
1. Na janela Documento, coloque o ponto de insero no local em que deseja inserir um grfico de alocador de espao.
2. Selecione Inserir > Objetos de imagem > Alocador de espao de imagem..
3. Em Nome (opcional), digite o texto que deve aparecer como rtulo no alocador de espao de imagem. Deixe a caixa de texto em branco
caso no deseje que o rtulo aparea. O nome deve comear com uma letra e pode conter apenas letras e nmeros. No so permitidos
espaos e caracteres ASCII maisculos.
4. Em Largura e Altura (obrigatrio), digite um nmero para definir o tamanho da imagem em pixels.
5. Em Cor (opcional), siga um destes procedimentos para aplicar uma cor:
Use o seletor de cores para selecionar uma cor.
Digite o valor hexadecimal da cor (por exemplo, #FF0000).
Digite um nome de cor aceita pela Web (por exemplo, vermelho).
6. Em Texto alternativo (opcional), digite um texto que descreva a imagem para os visualizadores que usam um navegador somente texto.
Nota: Uma tag de imagem inserida automaticamente no cdigo HTML que contm um atributo src vazio.
7. Clique em OK.
A cor, os atributos de tamanho e o rtulo do alocador de espao de imagem aparecem da seguinte maneira:
Para o incio
Um alocador de espao de imagem no exibe uma imagem em um navegador. Antes de publicar o site, voc deve substituir qualquer alocador de
espao de imagem adicionado com arquivos de imagem para Web, como GIFs ou JPEGs.
Se voc tiver o Fireworks, poder criar um novo grfico no alocador de espao de imagem do Dreamweaver. A nova imagem definida para o
mesmo tamanho da imagem do alocador de espao. Voc pode editar a imagem e substitu-la no Dreamweaver.
1. Na janela Documento, siga um destes procedimentos:
Clique duas vezes no alocador de espao de imagem.
Clique no alocador de espao de imagem para selecion-lo. Em seguida, no Inspetor de propriedades (Janela > Propriedades), clique
Para o incio
Para definir as propriedades de um alocador de espao de imagem, selecione o alocador de espao na janela Documento. Em seguida, selecione
Janela > Propriedades para exibir o Inspetor de propriedades. Para ver todas as propriedades, clique na seta de expanso no canto inferior
direito.
Use o Inspetor de propriedades para definir um nome, uma largura, uma altura, uma origem de imagem, uma descrio de texto alternativo, um
alinhamento e uma cor para uma imagem de alocador de espao.
No Inspetor de propriedades do alocador de espao, a caixa de texto cinza e a caixa de texto Alinhar esto desativadas. Voc pode definir essas
propriedades no Inspetor de propriedades de imagem ao substituir o alocador de espao por uma imagem.
Defina uma das seguintes opes:
L e A Defina a largura e a altura do alocador de espao de imagem em pixels.
Origem Especifica o arquivo de origem da imagem. Em uma imagem de alocador de espao, esta caixa de texto aparece vazia. Clique no
boto Procurar para selecionar uma imagem substituta para o grfico de alocador de espao.
Link Especifica um hiperlink para o alocador de espao de imagem. Arraste o cone Apontar para arquivo para um arquivo do painel
Arquivos, clique no cone de pasta para ir at um documento no site ou digite manualmente o URL.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram
definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que usam sintetizadores de fala com
navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparece quando o ponteiro est
sobre a imagem.
Criar Inicia o Fireworks para criar uma imagem substituta. O boto Criar estar desativado, a menos que o Fireworks tambm esteja
instalado no seu computador.
Atualizar do original
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em
vermelho. Quando voc seleciona a imagem da Web na Visualizao de design e clica no boto Atualizar do original no Inspetor de
propriedades, a imagem atualizada automaticamente, refletindo todas as alteraes feitas no arquivo original do Photoshop.
Cor Especifica uma cor para o alocador de espao de imagem.
Para o incio
Voc pode fazer uma nova amostra, cortar, otimizar e ajustar a nitidez de imagens no Dreamweaver. Voc tambm pode ajustar o brilho e o
contraste.
uma resoluo mais baixa, sempre ocasiona perda de dados e geralmente uma diminuio da qualidade.
Cortar Edite imagens reduzindo a rea da imagem. Geralmente, voc precisar cortar uma imagem para dar mais nfase ao assunto e
remover aspectos indesejados referentes ao ponto de interesse da imagem.
Brilho e contraste Modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma
imagem. Voc geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.
Nitidez Ajusta o enfoque de uma imagem aumentando o contraste das bordas localizadas na imagem. Quando voc digitaliza uma imagem
ou tira uma foto digital, a ao padro da maioria dos softwares de captura de imagem suavizar as bordas dos objetos na imagem. Isso
impede que os detalhes extremamente finos se percam nos pixels em que as imagens digitais so compostas. No entanto, para ressaltar os
detalhes nos arquivos de imagem digital, geralmente necessrio ajustar a nitidez da imagem, aumentando o contraste da borda e tornando
a imagem mais ntida.
Nota: Os recursos de edio de imagens do Dreamweaver aplicam-se somente a formatos de arquivo de imagem JPEG, GIF e PNG. Os
outros formatos de arquivo de imagem bitmap no podem ser editados atravs desses recursos de edio de imagens.
Brilho/contraste modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem.
Voc geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.
1. Abra a pgina que contm a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos:
Clique no boto
Brilho/contraste no Inspetor de propriedades de imagem.
Selecione Modificar > Imagem > Brilho/contraste.
2. Arraste os controles deslizantes de brilho e contraste para ajustar as configuraes. A faixa de valores varia de -100 a 100.
3. Clique em OK.
Para o incio
Voc pode inserir imagens de sobreposio na pgina. Uma sobreposio uma imagem que, quando visualizada em um navegador, alterada
quando o ponteiro se move sobre ela.
Voc deve ter duas imagens para criar a sobreposio: uma imagem primria (a imagem exibida quando a pgina carregada pela primeira vez)
e uma imagem secundria (a imagem que aparece quando o ponteiro se move sobre a imagem primria). As duas imagens em uma
sobreposio devem ter o mesmo tamanho. Caso contrrio, o Dreamweaver redimensiona a segunda imagem de modo que corresponda s
propriedades da primeira imagem.
As imagens de sobreposio so automaticamente definidas para responder ao evento onMouseOver. Voc pode definir uma imagem para
responder a um evento diferente (por exemplo, um clique de mouse) ou alterar uma imagem de sobreposio.
Para obter um tutorial sobre como criar sobreposies, consulte www.adobe.com/go/vid0159_br.
1. Na janela Documento, coloque o ponto de insero no local em que a sobreposio deve aparecer.
2. Insira a sobreposio usando um destes mtodos:
Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem de sobreposio. Com o cone Imagem de
sobreposio exibido no painel Inserir, voc pode arrastar o cone para a janela Documento.
Selecione Inserir > Objetos de imagem > Imagem de sobreposio.
3. Defina as opes e clique em OK.
Nome da imagem O nome da imagem de sobreposio.
Imagem original A imagem a ser exibida quando a pgina for carregada. Digite o caminho na caixa de texto ou clique em Procurar e
selecione a imagem.
Imagem de sobreposio A imagem a ser exibida quando o ponteiro movido sobre a imagem original. Digite o caminho ou clique em
Procurar para selecionar a imagem.
Pr-carregar imagem de sobreposio Pr-carrega as imagens no cache do navegador para que no ocorra nenhum atraso quando o
usurio mover o ponteiro sobre a imagem.
Texto alternativo (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto.
Ao clicar, Ir para URL O arquivo que voc deseja abrir quando um usurio clica na imagem de sobreposio. Digite o caminho ou clique
em Procurar e selecione o arquivo.
Nota: Se voc no definir um link para a imagem, o Dreamweaver inserir um link nulo (#) no cdigo-fonte HTML ao qual o
comportamento de sobreposio anexado. Se voc remover o link nulo, a imagem de sobreposio no funcionar mais.
4. Selecione Arquivo > Visualizar no navegador ou pressione F12.
5. No navegador, mova o ponteiro sobre a imagem original para ver a imagem de sobreposio.
Nota: No possvel ver o efeito de uma imagem de sobreposio na Visualizao de design.
Para o incio
Enquanto estiver no Dreamweaver, voc poder abrir uma imagem selecionada em um editor externo de imagens. Ao retornar ao Dreamweaver
aps salvar o arquivo de imagens editado, qualquer alterao feita na imagem estar visvel na janela Documento.
Voc pode configurar o Fireworks como seu editor externo principal. Tambm possvel definir quais tipos de arquivo um editor abrir e
selecionar vrios editores de imagem. Por exemplo, voc pode definir preferncias para iniciar o Fireworks quando precisar editar um GIF e iniciar
outro editor de imagens quando precisar editar um JPG ou JPEG.
Para o incio
Voc pode aplicar qualquer comportamento disponvel a uma imagem ou ponto ativo de imagem. Quando voc aplica um comportamento a um
ponto ativo, o Dreamweaver insere o cdigo-fonte HTML na tag area. Os trs comportamentos se aplicam especificamente a imagens: Prcarregar imagens, Trocar imagens e Restaurar imagem trocada.
Pr-carregar imagens Carrega imagens que no aparecem na pgina imediatamente (como aquelas que sero trocadas por comportamentos,
elementos PA ou JavaScript) no cache de navegador. Isso evita atrasos ocasionados por download quando as imagens devem aparecer.
Trocar imagem Troca uma imagem por outra alterando o atributo SRC da tag img. Use esta ao para criar sobreposies de boto e outros
efeitos de imagem (incluindo a troca de mais de uma imagem simultaneamente).
Restaurar imagem trocada Restaura o ltimo conjunto de imagens trocadas para os arquivos de origem anteriores. Esta ao adicionada
automaticamente sempre que voc anexa a ao Trocar imagem a um objeto por padro. Voc nunca precisar selecion-la manualmente.
Voc tambm pode usar comportamentos para criar sistemas de navegao mais sofisticados, como menus de salto.
Para o incio
Use a caixa de dilogo Propriedades da pgina para especificar vrias opes de layout de pgina bsica para as pginas da Web, incluindo
fonte, e cor e imagem do fundo.
1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto.
2. Selecione a categoria Aparncia (CSS) e defina as opes.
Fonte da pgina Especifica a famlia de fontes padro a ser usada nas pginas da Web. O Dreamweaver usa a famlia de fontes
especificada, a menos que outra fonte seja definida para um elemento de texto.
Tamanho Especifica o tamanho de fonte padro a ser usado nas pginas da Web. O Dreamweaver usa o tamanho de fonte especificado,
a menos que outro tamanho de fonte seja definido para um elemento de texto.
Cor do texto Especifica a cor padro em que as fontes sero processadas.
Cor do fundo Define uma cor de fundo para a pgina. Clique na caixa Cor do fundo e selecione uma cor no Seletor de cores.
Imagem do fundo Define uma imagem de fundo. Clique no boto Procurar e navegue at a imagem para selecion-la. Se desejar, digite o
caminho da imagem do fundo na caixa Imagem do fundo.
O Dreamweaver organiza lado a lado (repete) a imagem do fundo se ela no preencher a janela inteira, exatamente como os navegadores
fazem. (para evitar que a imagem seja disposta lado a lado, use as folhas de estilos em cascata para desativar esse recurso).
Repetir Especifica como a imagem do fundo ser exibida na pgina:
Selecione a opo No-repeat para exibir a imagem do fundo apenas uma vez.
Selecione a opo Repeat para repetir ou dispor a imagem lado a lado horizontalmente e verticalmente.
Selecione a opo Repeat-x para dispor a imagem lado a lado horizontalmente.
Selecione a opo Repeat-y para dispor a imagem lado a lado verticalmente.
Margem esquerda e Margem direita Especifica o tamanho das margens esquerda e direita da pgina.
Margem superior e Margem inferior Especifica o tamanho das margens superior e inferior da pgina.
Para o incio
Definir propriedades nesta categoria da caixa de dilogo Propriedades da pgina resulta na formatao HTML, em vez de CSS, de sua pgina.
1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto.
2. Selecione a categoria Aparncia (HTLM) e defina as opes.
Imagem do fundo Define uma imagem de fundo. Clique no boto Procurar e navegue at a imagem para selecion-la. Se desejar, digite o
caminho da imagem do fundo na caixa Imagem do fundo.
O Dreamweaver organiza lado a lado (repete) a imagem do fundo se ela no preencher a janela inteira, exatamente como os navegadores
fazem. (para evitar que a imagem seja disposta lado a lado, use as folhas de estilos em cascata para desativar esse recurso).
Plano de fundo Define uma cor de fundo para a pgina. Clique na caixa Cor do fundo e selecione uma cor no Seletor de cores.
Texto Especifica a cor padro em que as fontes sero processadas.
Link Especifica a cor a ser aplicada ao texto do link.
Links visitados Especifica a cor a ser aplicada aos links visitados.
Links ativos Especifica a cor a ser aplicada quando o mouse clicado em um link.
Margem esquerda e Margem direita Especifica o tamanho das margens esquerda e direita da pgina.
Margem superior e Margem inferior Especifica o tamanho das margens superior e inferior da pgina.
Sobre os ativos
Para o incio
possvel usar o Adobe Dreamweaver para controlar e visualizar os ativos do armazenados no site como, por exemplo, imagens, filmes,
cores, scripts e links. Voc tambm pode arrastar diretamente um ativo para inseri-lo em uma pgina do documento atual.
Voc obtm os ativos de vrias origens. Voc pode, por exemplo, criar ativos em um aplicativo como o Adobe Fireworks ou o Adobe
Flash, receb-los de um colaborador ou copi-los de um CD com clip-arts ou de um site de grficos.
O Dreamweaver tambm oferece acesso a dois tipos especiais de ativos: bibliotecas e ativos. Ambos so ativos vinculados: quando voc edita
um item de biblioteca ou modelo, o Dreamweaver atualiza todos os documentos que usam esses ativos. Os itens de biblioteca geralmente
representam pequenos ativos de design como, por exemplo, o logotipo de um site ou os direitos autorais. Para controlar uma rea de design
maior, use um modelo.
Para o incio
Uma biblioteca um arquivo especial do Dreamweaver que contm um conjunto de ativos individuais ou cpias de ativos que voc pode colocar
nas pginas da Web. Os ativos de uma biblioteca so chamados de itens de biblioteca. Entre os itens que voc pode armazenar em uma
biblioteca esto imagens, tabelas, sons e arquivos criados com o Adobe Flash. Voc pode atualizar automaticamente todas as pginas que usam
um item de biblioteca sempre que voc edit-lo.
Por exemplo, suponhamos que voc esteja criando um grande site para uma empresa que deseja que um slogan aparea em todas as pginas.
Voc pode criar um item de biblioteca de forma que ele contenha o slogan e usar esse item em todas as pginas. Caso o slogan mude, voc
pode alterar o item de biblioteca e atualizar, automaticamente, todas as pginas em que ele usado.
O Dreamweaver armazena os itens de biblioteca em uma pasta Biblioteca dentro da pasta raiz local de cada site. Cada site tem sua prpria
biblioteca.
possvel criar um item de biblioteca usando qualquer elemento da seo body de um documento, inclusive textos, tabelas, formulrios, applets
Java, plug-ins, elementos ActiveX, barras de navegao e imagens.
No caso de itens vinculados como, por exemplo, imagens, a biblioteca armazena apenas uma referncia ao item. Para que o item de biblioteca
funcione corretamente, o arquivo original deve permanecer no local especificado.
Porm, ainda assim, talvez seja til armazenar uma imagem em um item de biblioteca. Por exemplo, voc poderia armazenar uma tag img
completa em um item de biblioteca, o que permitiria alterar facilmente o texto alt da imagem, ou at mesmo seu atributo src, em todo o site.
(Entretanto, no use essa tcnica para alterar os atributos width e height de uma imagem, a menos que voc use um editor de imagens para
alterar o tamanho real da imagem.)
Nota: Caso o item de biblioteca contenha links, eles podem no funcionar no novo site. Alm disso, as imagens em uma biblioteca no so
copiadas para o novo site.
Quando voc usa um item de biblioteca, o Dreamweaver insere um link para ele, e no o prprio item, na pgina da Web. Ou seja, o
Dreamweaver insere uma cpia do cdigo-fonte HTML do item no documento e adiciona um comentrio em HTML contendo uma referncia para
o item original, externo. essa referncia externa que possibilita a atualizao automtica.
Quando voc cria um item de biblioteca que inclui um elemento com um comportamento do Dreamweaver relacionado, o Dreamweaver copia o
elemento e seu identificador de evento (o atributo que especifica o evento que dispara a ao como, por exemplo, onClick, onLoad ou
onMouseOver e a ao a ser chamada quando o evento ocorre) para o arquivo do item de biblioteca. O Dreamweaver no copia as funes
JavaScript associadas para o item de biblioteca. Na verdade, quando voc insere o item de biblioteca em um documento, o Dreamweaver insere
automaticamente as funes JavaScript apropriadas na seo head do documento (caso elas ainda no estejam l).
Nota: Caso codifique manualmente o JavaScript (ou seja, o crie usando os comportamentos do Dreamweaver), voc pode fazer dele parte de
um item de biblioteca se estiver usando o comportamento Chamar JavaScript para executar o cdigo. Caso voc no use um comportamento do
Dreamweaver para executar o cdigo, este no mantido como parte do item de biblioteca.
H requisitos especiais para a edio dos comportamentos em itens de biblioteca. Os itens de biblioteca no podem conter folhas de estilos
porque o cdigo desses elementos faz parte da seo head.
Mais tpicos da Ajuda
Adio de som
Formatos de arquivo de udio
Vinculao a um arquivo de udio
Incorporao de um arquivo de som
Para o incio
Voc pode adicionar som a uma pgina da Web. Existem vrios tipos diferentes do arquivos e formatos de som, incluindo .wav, .midi e .mp3.
Alguns fatores a serem considerados antes de decidir sobre um formato e um mtodo para adicionar som so objetivo, pblico-alvo, tamanho do
arquivo, qualidade do som e diferenas entre navegadores.
Nota: Os arquivos de som so manipulados de formas muito diferentes pelos vrios navegadores. Talvez seja necessrio adicionar um arquivo
de som a um arquivo SWF e incorporar o arquivo SWF para melhorar a consistncia.
A lista a seguir descreve os formatos de arquivo de udio mais comuns juntamente com algumas vantagens e desvantagens de cada um deles
para o design da Web.
.midi ou .mid (Musical Instrument Digital Interface) Este formato para msica instrumental. Os arquivos MIDI so compatveis com vrios
navegadores e no requerem plug-in. Embora sua qualidade de som seja muito boa, ela pode variar dependendo da placa de som de um
visitante. Um arquivo MIDI pequeno pode fornecer um clipe de som longo. Os arquivos MIDI no podem ser registrados e devem ser sintetizados
em um computador com hardware e software especiais.
.wav (Waveform Extension) Estes arquivos tm boa qualidade de som, so compatveis com vrios navegadores e no requerem plug-in. Voc
pode gravar seus prprios arquivos WAV de um CD, uma fita, um microfone etc. No entanto, o tamanho de arquivo grande limita seriamente o
tamanho dos clipes de som que voc pode usar nas pginas da Web.
.aif (Audio Interchange File Format or AIFF) O formato AIFF, como o formato WAV, tem uma boa qualidade de som, pode ser reproduzido pela
maioria dos navegadores e no requer plug-in. Voc tambm pode gravar arquivos AIFF de um CD, uma fita, um microfone etc. No entanto, o
tamanho de arquivo grande limita seriamente o tamanho dos clipes de som que voc pode usar nas pginas da Web.
.mp3 (Motion Picture Experts Group Audio ou MPEG-Audio Layer-3) Um formato compactado que tornar os arquivos de som
consideravelmente menores. A qualidade do som muito boa: se um arquivo mp3 for gravado e compactado corretamente, sua qualidade poder
competir com a qualidade oferecida por um CD. A tecnologia mp3 permite transmitir o arquivo de modo que um visitante no precise esperar o
download do arquivo inteiro para ouvi-lo. No entanto, o tamanho de arquivo maior do que de um arquivo Real Audio. Portanto, uma msica
inteira ainda poder demorar bastante tempo para ser baixada em uma conexo de modem dial-up comum (linha telefnica). Para reproduzir
arquivos mp3, os visitantes devem baixar e instalar um aplicativo de ajuda ou plug-in, como o QuickTime, Windows Media Player ou RealPlayer.
.ra, .ram, .rpm ou Real Audio Este formato tem um alto grau de compactao, com tamanhos de arquivo menores do que mp3. Arquivos de
msica inteiros podem ser baixados em um perodo de tempo razovel. Como os arquivos podem ser transmitidos de um servidor Web normal,
os visitantes podem comear a ouvir o som antes que o arquivo seja completamente baixado. Os visitantes devem baixar e instalar o plug-in ou
aplicativo de ajuda RealPlayer para reproduzir esses arquivos.
.qt, .qtm, .mov ou QuickTime Este formato um formato de udio e vdeo desenvolvido pela Apple Computer. O QuickTime est includo em
sistemas operacionais Apple Macintosh e usado pela maioria dos aplicativos Macintosh que usam udio, vdeo ou animao. Os PCs tambm
podem reproduzir arquivos no formato do QuickTime, mas precisam de um driver especial do QuickTime. O QuickTime oferece suporte a maioria
dos formatos de codificao, incluindo Cinepak, JPEG e MPEG.
Nota: Alm dos formatos mais comuns listados anteriormente, h vrios formatos de arquivo de udio e vdeo diferentes disponveis para uso na
Web. Se voc encontrar um formato de arquivo de mdia com o qual no esteja familiarizado, localize o criador do formato para obter informaes
sobre qual a melhor forma de us-lo e implant-lo.
Para o incio
A vinculao a um arquivo de udio uma maneira simples e eficaz de adicionar som a uma pgina da Web. Este mtodo de incorporao de
arquivos de som permite que os visitantes decidam se desejam ouvir o arquivo e disponibiliza o arquivo para o pblico-alvo mais amplo.
1. Selecione o texto ou a imagem que deseja usar como vnculo para o arquivo de udio.
2. No Inspetor de propriedades, clique no cone de pasta ao lado da caixa de texto Link para navegar at o arquivo de udio ou digite o
caminho e nome do arquivo na caixa de texto Link.
Para o incio
A incorporao do udio insere o som diretamente na pgina, mas o som s ser executado se os visitantes do site tiverem o plug-in apropriado
para o arquivo de som escolhido. Incorpore arquivos se voc deseja usar o som como msica de fundo ou se deseja controlar o volume, a
aparncia do player na pgina, ou os pontos de incio e fim do arquivo de som.
Ao incorporar arquivos de som nas pginas da Web, reflita cuidadosamente sobre o uso apropriado no site e como os visitantes do site usam
esses recursos de mdia. Sempre fornea um controle para ativar ou desativar a reproduo do som, caso esse visitantes no desejem ouvir o
contedo do udio.
1. Na Visualizao de design, coloque o ponto de insero no local onde deseja incorporar o arquivo e siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Plug-in
no menu pop-up.
Para o incio
Alm de poder inserir objetos SWF e FLV, voc pode inserir filmes QuickTime ou Shockwave, applets Java, controles ActiveX ou outros objetos
de udio ou vdeo em um documento do Dreamweaver. Se voc inseriu atributos de acessibilidade com um objeto de mdia, poder definir
atributos de acessibilidade e editar esses valores no cdigo HTML.
1. Coloque o ponto de insero na janela documento em que deseja inserir o objeto.
2. Insira o objeto seguindo um destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone referente ao tipo de objeto a ser inserido.
Selecione o objeto apropriado no submenu Inserir > Mdia.
Se o objeto que voc deseja inserir no for um Shockwave, Applet ou ActiveX, selecione Plug-in no submenu Inserir > Mdia.
Uma caixa de dilogo ser exibida, permitindo que voc selecione um arquivo de origem e especifique determinados parmetros para o
objeto de mdia.
Para evitar que essas caixas de dilogo apaream, selecione Editar > Preferncias > Geral (Windows) ou Dreamweaver >
Preferncias > Geral (Macintosh) e desmarque a opo Mostrar caixa de dilogo ao inserir objetos. Para anular qualquer preferncia
definida para a exibio de caixas de dilogo, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) enquanto
insere o objeto. (Por exemplo, para inserir um alocador de espao de um filme Shockwave sem especificar o arquivo, mantenha
pressionada a tecla Control ou Option e clique no boto Shockwave, no menu pop-up Mdia, do painel Insero Comum, ou
selecione Inserir > Mdia > Shockwave.)
3. Complete a caixa de dilogo Selecionar arquivo e clique em OK.
Nota: A caixa de dilogo Atributos de acessibilidade exibida se voc tiver optado por mostrar atributos ao inserir a mdia na caixa de
dilogo Editar > Preferncias.
4. Defina os atributos de acessibilidade.
Nota: Voc tambm pode editar os atributos do objeto de mdia selecionando o objeto e editando o cdigo HTML na Visualizao de
cdigo, ou clicando com o boto direito do mouse (Windows) ou mantendo a tecla Control pressionada enquanto clica (Macintosh), e
selecionando Editar cdigo de tag.
Ttulo Digite um ttulo para o objeto de mdia.
Chave de acesso Digite um equivalente de teclado (uma letra) na caixa de texto para selecionar o objeto de formulrio no navegador. Isso
permite que um visitante do site use a tecla Control (Windows) com a tecla de acesso para acessar o objeto. Por exemplo, se voc digitar B
como tecla de acesso, use Control+B para selecionar o objeto no navegador.
ndice de abas Digite um nmero para a ordem de abas do objeto de formulrio. A definio de uma ordem de abas til quando h
outros links e objetos de formulrio na pgina e o usurio precisa percorrer esses itens em uma ordem especfica. Se voc definir a ordem
das abas de um objeto, no deixe de definir essa ordem para todos eles.
5. Clique em OK para inserir o objeto de mdia.
Nota: Se voc clicar em Cancelar, um alocador de espao de objeto de mdia aparecer no documento, mas o Dreamweaver no
associar tags ou atributos de acessibilidade a ele.
Para especificar um arquivo de origem ou definir dimenses e outros parmetros e atributos, use o Inspetor de propriedades para cada
objeto. Voc pode editar os atributos de acessibilidade de um objeto.
Para o incio
Voc pode iniciar um editor externo no Dreamweaver para editar a maioria dos arquivos de mdia. Tambm possvel especificar o editor que o
Dreamweaver iniciar para editar o arquivo.
1. Verifique se o tipo de arquivo de mdia est associado a um editor no sistema.
Para descobrir que editor est associado ao tipo de arquivo, selecione Editar > Preferncias no Dreamweaver e selecione Tipos de
arquivos/editores na lista Categoria. Clique na extenso do arquivo na coluna Extenses para visualizar o(s) editor(es) associado(s) na
coluna Editores. Voc pode alterar o editor associado a um tipo de arquivo.
2. Clique duas vezes no arquivo de mdia no painel Arquivos para abri-lo no editor externo.
O editor iniciado quando voc clica duas vezes no arquivo no painel Arquivos chamado editor principal. Se voc clicar duas vezes em um
arquivo de imagem, por exemplo, o Dreamweaver abrir o arquivo no editor externo de imagem principal como Adobe Fireworks.
3. Se voc no deseja usar o editor externo principal para editar o arquivo, poder usar outro editor no sistema para editar o arquivo seguindo
um destes procedimentos.
No painel Arquivos, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) no nome de arquivo e selecione Abrir com no menu de contexto.
Na Visualizao de design, clique o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) no elemento de mdia na pgina atual, e selecione Editar com no menu de contexto.
Para o incio
Voc pode especificar o editor que o Dreamweaver deve usar para editar um tipo de arquivo e adicionar ou excluir tipos de arquivo que o
Dreamweaver reconhea.
Especificao explcita de quais editores externos devem ser iniciados em um determinado tipo de
arquivo
1. Selecione Editar > Preferncias e, em seguida, selecione Tipos de arquivos/editores na lista Categoria.
Extenses de nome de arquivo, como .gif, .wav e .mpg, so listadas esquerda, abaixo de Extenses. Os editores associados de uma
extenso selecionada so listados direita, abaixo de Editores.
2. Selecione a extenso de tipo de arquivo na lista Extenses e siga um destes procedimentos:
Para associar um novo editor ao tipo de arquivo, clique no boto de adio (+) acima da lista Editores e preencha a caixa de dilogo
exibida.
Por exemplo, selecione o cone de aplicativo para que o Acrobat o associe ao tipo de arquivo.
Para tornar um editor o editor principal para um tipo de arquivo (ou seja, o editor que aberto quando voc clica duas vezes no tipo de
arquivo no painel Arquivos), selecione o editor na lista Editores e clique em Tornar primrio.
Para dissociar um editor de um tipo de arquivo, selecione o editor na lista Editores e clique no boto de subtrao (-) acima da lista
Editores.
Para o incio
Assim como com outros objetos do Dreamweaver, voc pode adicionar Design Notes a um objeto de mdia. As Design Notes so notas
associadas a um arquivo especfico que so armazenadas em um arquivo separado. Voc pode usar as Design Notes para controlar as
informaes de arquivo extras associadas aos documentos, como nomes de arquivo de origem de imagem e comentrios sobre status de
arquivos.
1. Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) no objeto na janela
Documento.
Nota: Voc deve definir o site antes de adicionar as Design Notes a qualquer objeto.
2. Selecione Design Notes da pgina no menu de contexto.
3. Digite as informaes desejadas na Design Note.
Voc tambm pode adicionar uma Design Note a um objeto de mdia no painel Arquivos selecionando o arquivo, revelando o menu de
contexto e escolhendo as Design Notes no menu de contexto.
Para o incio
Voc pode usar o Dreamweaver para inserir filmes Shockwave nos documentos. O Adobe Shockwave, um padro para multimdia interativa
na Web, um formato compactado que permite que os arquivos de mdia criados no Adobe Director sejam baixados rapidamente e
reproduzidos pelos navegadores mais populares.
1. No janela Documento, coloque o ponto de insero no local em que deseja inserir um filme Shockwave e siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Shockwave
no menu pop-up.
Para o incio
Voc pode adicionar vdeo pgina da Web de diferentes formas e usando diferentes formatos. O vdeo pode ser baixado para o usurio ou
pode ser transmitido de modo que seja reproduzido durante o download.
1. Coloque o clipe na pasta do site.
Esse clipes esto geralmente no formato de arquivo AVI ou MPEG.
2. Vincule-se ao clipe ou incorpore-o na pgina.
Para vincular o clipe, digite um texto para o link, como Clipe de Download, selecione o texto e clique no cone de pasta no Inspetor de
propriedades. Navegue at o arquivo de vdeo e selecione-o.
Nota: O usurio deve baixar um aplicativo de ajuda (um plug-in) para visualizar formatos comuns de fluxo contnuo, como Real Media,
QuickTime e Windows Media.
Para o incio
Voc pode criar um contedo como um filme QuickTime para um plug-in de um navegador e, em seguida, usar o Dreamweaver para inserir esse
contedo em um documento HTML. Os plug-ins mais comuns so RealPlayer e QuickTime, ao passo que alguns arquivos de contedo incluem
mp3s e filmes QuickTime.
Voc pode visualizar filmes e animaes que se baseiam nos plug-ins de navegador diretamente na Visualizao de design da janela Documento.
possvel reproduzir todos os elementos de plug-in simultaneamente para ver como a pgina aparecer para o usurio ou reproduzir cada um
individualmente para garantir que voc incorporou o elemento de mdia correto.
Nota: Voc no pode visualizar filmes ou animaes que se baseiam em controles ActiveX.
Aps a insero do contedo para um plug-in do , use o Inspetor de propriedades para definir parmetros para esse contedo. Para visualizar as
propriedades a seguir no Inspetor de propriedades, selecione um objeto de plug-in do.
Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expanso no canto inferior direito para ver todas
as propriedades.
no menu.
Origem Especifica o arquivo de dados de origem. Clique no cone de pasta para navegar at um arquivo ou digite um nome de arquivo.
URL do Plg Especifica o URL do atributo pluginspace. Digite o URL completo do site em que os usurios podem baixar o plug-in. Se o
usurio que estiver visualizando a pgina no tiver o plug-in, o navegador tentar baix-lo a partir deste URL.
Alinhar Determina como o objeto alinhado na pgina.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do plug-in.
Borda Especifica a largura da borda em torno do plug-in.
Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao plug-in. Vrios plug-ins
respondem a parmetros especiais.
Voc tambm pode visualizar os atributos atribudos ao plug-in selecionado clicando no boto Atributo. possvel editar, adicionar e excluir
atributos como largura e altura nesta caixa de dilogo.
Para o incio
Se voc seguiu as etapas de reproduo do contedo de plug-in na janela Documento, mas ainda no consegue reproduzir algum contedo,
tente o seguinte:
Verifique se o plug-in associado est instalado no computador e se o contedo compatvel com a verso do plug-in que voc tem.
Abra o arquivo Configuration/Plugins/UnsupportedPlugins.txt em um editor de texto e verifique se o plug-in problemtico est listado. Esse
arquivo controla os plug-ins que ocasionam problemas no Dreamweaver e que, portanto, no recebem suporte. (Se voc est com
problemas em um plug-in especfico, recomendvel adicion-lo a esse arquivo.)
Verifique se h memria suficiente. Alguns plug-ins requerem mais 2 a 5 MB de memria para serem executados.
Para o incio
Voc pode inserir um controle ActiveX na pgina. Os controles ActiveX (conhecidos antigamente como controles OLE) so componentes
reutilizveis, assim como os aplicativos em miniatura, que podem atuar como plug-ins de navegador. Eles so executados no Internet Explorer
com o Windows, mas no podem ser executados em navegadores do Macintosh. O objeto ActiveX no Dreamweaver permite a voc fornecer
atributos e parmetros a um controle ActiveX no navegador do visitante.
Aps a insero de um objeto ActiveX, use o Inspetor de propriedades para definir atributos da tag object e parmetros para o controle ActiveX.
Clique em Parmetros no Inspetor de propriedades para digitar nomes e valores para as propriedades que no aparecem no Inspetor de
propriedades. No h nenhum formato padro amplamente aceito para os parmetros dos controles ActiveX. Para descobrir quais parmetros
devem ser usados, consulte a documentao do controle ActiveX que voc est usando.
No janela Documento, coloque o ponto de insero no local em que deseja inserir o contedo e siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone ActiveX
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone ActiveX . Com o cone ActiveX exibido no painel Inserir,
voc pode arrastar o cone para a janela Documento.
Selecione Inserir > Mdia > ActiveX. Um cone marca o local da pgina em que o controle ActiveX aparecer no Internet Explorer.
Propriedades do ActiveX
Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expanso no canto inferior direito para ver todas
as propriedades.
Nome Especifica um nome para identificar o objeto ActiveX para script. Digite um nome na caixa de texto sem rtulo no lado esquerdo do
Inspetor de propriedades.
L e A Especifica a largura e a altura do objeto, em pixels.
ID da classe Identifica o controle ActiveX para o navegador. Digite um valor ou selecione um no menu pop-up. Quando a pgina carregada, o
navegador usa a ID da classe para localizar o controle ActiveX necessrio ao objeto ActiveX associado pgina. Se o navegador no localizar o
controle ActiveX especificado, ele tentar baix-lo no local especificado em Base.
Incorporar Adiciona uma tag embed tag object do controle ActiveX. Se o controle ActiveX tiver um equivalente do plug-in, a tag embed ativar
o plug-in. O Dreamweaver atribui os valores digitados como propriedades do ActiveX aos equivalentes de plug-in.
Alinhar Determina como o objeto alinhado na pgina.
Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao objeto ActiveX. Vrios controles
ActiveX respondem a parmetros especiais.
Origem Define o arquivo de dados a ser usado para um plug-in do se a opo Incorporar estiver ativada. Se voc no digitar um valor, o
Dreamweaver tentar determinar o valor das propriedades do ActiveX j digitadas.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do objeto.
Base Especifica o URL que contm o controle do ActiveX. O Internet Explorer baixar o controle ActiveX nesse local caso ele ainda no tenha
sido instalado no sistema do visitante. Se voc no especificar um parmetro Base e o visitante ainda no tiver o controle ActiveX relevante
instalado, o navegador no poder exibir o objeto ActiveX.
Alt Img Especifica uma imagem a ser exibida se o navegador no oferecer suporte tag object. Esta opo estar disponvel somente quando a
opo Incorporar estiver desmarcada.
Dados Especifica um arquivo de dados para o controle ActiveX carregar. Vrios controles ActiveX, como Shockwave e RealPlayer, no usam
este parmetro.
Para o incio
Voc pode inserir um applet Java em um documento HTML usando o Dreamweaver. Java uma linguagem de programao que permite o
desenvolvimento de aplicativos leves (applets) que podem ser incorporados nas pginas da Web.
Aps a insero de um applet Java, use o Inspetor de propriedades para definir parmetros. Para visualizar as propriedades a seguir no Inspetor
de propriedades, selecione um applet Java.
1. No janela Documento, coloque o ponto de insero no local em que deseja inserir o applet e siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Applet
Para o incio
Voc pode adicionar comportamentos pgina para iniciar e interromper vrios objetos de mdia.
Controlar Shockwave ou Flash Reproduza, interrompa, retroceda ou v para um quadro em um filme Shockwave ou arquivo SWF.
Tocar som Permite reproduzir um som; por exemplo, voc pode reproduzir um efeito de som sempre que o usurio move o ponteiro do mouse
sobre um link.
Verificar plug-in Permite verificar se os visitantes do site tm o plug-in necessrio instalado e, em seguida, os roteiam a diferentes URLs,
dependendo o plug-in dos visitantes. Isso se aplica somente a plug-ins do , j que o comportamento Verificar plug-in no verifica controles
ActiveX.
Para o incio
Defina parmetros especiais para controlar arquivos Shockwave e SWF, controles ActiveX, plug-ins e applets Java. Os parmetros so usados
com as tags object, embed e applet. Os parmetros definem atributos especficos a diferentes tipos de objetos. Por exemplo, um arquivo SWF
pode usar um parmetro de qualidade <paramname="quality"value="best"> para a tag do objeto. A caixa de dilogo Parmetro est disponvel no
Inspetor de propriedades. Consulte a documentao do objeto que voc est usando para obter informaes sobre os parmetros necessrios.
Nota: No h um padro amplamente aceito para a identificao de arquivos de dados para controles ActiveX. Consulte a documentao do
controle ActiveX que voc est usando para descobrir quais parmetros devem ser utilizados.
Remoo de um parmetro
Selecione um parmetro e pressione o boto de subtrao ().
Reordenao de parmetros
Selecione um parmetro e use os botes de seta para cima e para baixo.
Mais tpicos da Ajuda
Adio de vdeo
Incorporar vdeos em pginas da Web (HTML5)
Insero de arquivos FLV
Para o incio
O HTML5 oferece suporte a tags de vdeo e de udio que permitem que os usurios reproduzam arquivos de vdeo e de udio em um navegador,
sem um plug-in ou player externo. O Dreamweaver oferece suporte a dicas de cdigos para adicionar tags de vdeo e de udio.
A Visualizao dinmica processa o vdeo, fornecendo uma visualizao do vdeo que voc est incorporando na pgina da Web.
Nota: Embora voc possa incorporar qualquer vdeo na sua pgina da Web, a Visualizao dinmica nem sempre processa todos os vdeos. As
tags de udio e de vdeo so compatveis com o Dreamweaver usando o plug-in Apple QuickTime. No Windows, se o plug-in Apple QuickTime
no estiver instalado, a pgina da Web no processar o contedo de mdia.
Para o incio
O Dreamweaver oferece as seguintes opes para enviar vdeo FLV aos visitantes do site:
Vdeo de download progressivo Baixa o arquivo FLV no disco rgido do visitante do site e o reproduz. No entanto, diferente dos mtodos
baixar e reproduzir de envio de vdeo, o download progressivo permite que o arquivo de vdeo comece a reproduo antes que o download seja
concludo.
Vdeo de fluxo contnuo Transmite o contedo do vdeo e o reproduz em uma pgina da Web aps um curto perodo de buffer que garante a
reproduo contnua. Para ativar o vdeo de fluxo contnuo nas pginas da Web, acesse o Adobe Flash Media Server.
Voc deve ter um arquivo FLV codificado para que possa us-lo no Dreamweaver. possvel inserir os arquivos de vdeo criados com dois tipos
de codecs (tecnologias de compactao/descompactao): Sorenson Squeeze e On2.
Como com arquivos SWF normais, quando voc insere um arquivo FLV, o Dreamweaver insere um cdigo que detecta se o usurio possui a
verso correta do Flash Player para visualizar o vdeo. Se o usurio no tiver a verso correta, a pgina exibe o contedo alternativo que informa
o usurio para baixar a verso mais recente do Flash Player.
Nota: Para visualizar arquivos FLV, os usurios devem ter o Flash Player 8 ou posterior instalado em seus computadores. Se um usurio no
tiver a verso requerida do Flash Player, mas tiver o Flash Player 6.0 r65 ou posterior instalado, o navegador exibe um instalador expresso do
Flash Player em vez do contedo alternativo. Se o usurio declinar a instalao expressa, ento a pgina exibe o contedo alternativo.
Para obter mais informaes sobre o trabalho com vdeo, visite o Video Technology Center em www.adobe.com/go/flv_devcenter_br.
Inserir um arquivo FLV
1. Selecione Inserir > Mdia > FLV.
2. Na caixa de dilogo Inserir FLV, selecione Download progressivo ou Vdeo de fluxo contnuo no menu pop-up Tipo de vdeo.
3. Preencha o restante das opes da caixa de dilogo e clique em OK.
Nota: O Microsoft Internet Information Server (IIS) no processa tags de objeto aninhado. Para as pginas ASP, o Dreamweaver usa o objeto
aninhado/cdigo incorporado em vez do cdigo do objeto aninhado ao inserir arquivos SWF ou FLV.
Definio das opes do vdeo de download progressivo
A caixa de dilogo Inserir FLV permite definir opes para o envio de download progressivo de um arquivo FLV inserido em uma pgina da Web.
1. Selecione Inserir > Mdia > FLV (ou clique no cone FLV na categoria Mdia da barra de insero Comum).
2. Na caixa de dilogo Inserir FLV, selecione Vdeo de Download progressivo no menu Tipo de vdeo.
3. Escolha as seguintes opes:
URL Especifica um caminho relativo ou absoluto para o arquivo FLV. Para especificar um caminho relativo (por exemplo,
mypath/myvideo.flv), clique no boto Procurar, navegue at o arquivo FLV e selecione-o. Para especificar um caminho absoluto, digite o
URL (por exemplo, http://www.example.com/myvideo.flv) do arquivo FLV.
Capa Especifica a aparncia do componente de vdeo. Uma visualizao da capa selecionada aparece abaixo do menu pop-up Capa.
Largura Especifica a largura do arquivo FLV, em pixels. Para que o Dreamweaver determine a largura exata do arquivo FLV, clique no
boto Detectar tamanho. Se o Dreamweaver no puder determinar a largura, digite um valor de largura.
Altura Especifica a altura do arquivo FLV, em pixels. Para que o Dreamweaver determine a altura exata do arquivo FLV, clique no boto
Detectar tamanho. Se o Dreamweaver no puder determinar a altura, digite um valor de altura.
Nota: Total com capa a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.
Restringir Mantm a mesma proporo entre a largura e a altura do componente de vdeo. Esta opo selecionada por padro.
Executar automaticamente Especifica se o vdeo ser ou no reproduzido quando a pgina da Web for aberta.
Retroceder automaticamente Especifica se o controle de reproduo retornar posio inicial depois que a reproduo do vdeo
terminar.
4. Clique em OK para fechar a caixa de dilogo e adicionar o arquivo FLV pgina da Web.
O comando Inserir FLV gera um arquivo SWF de video player e um arquivo SWF de capa que so utilizados para exibir o contedo de
vdeo em uma pgina da Web. (Para ver os novos arquivos, talvez seja necessrio clicar no boto Atualizar no painel Arquivos.) Esses
arquivos so armazenados no mesmo diretrio do arquivo HTML ao qual voc est adicionando o contedo do vdeo. Quando voc
carregar a pgina HTML que possui o contedo FLV, o Dreamweaver carregar esses arquivos como arquivos dependentes (contanto que
voc clique em Sim na caixa de dilogo Colocar arquivos dependentes).
Definio das opes de vdeo de fluxo contnuo
A caixa de dilogo Inserir FLV permite definir opes para o envio de download de vdeo de fluxo contnuo de um arquivo FLV inserido em uma
pgina da Web.
1. Selecione Inserir > Mdia > FLV (ou clique no cone FLV na categoria Mdia da barra de insero Comum).
2. Selecione Vdeo de fluxo contnuo no menu pop-up Tipo de vdeo.
URI do servidor Especifica o nome do servidor, o nome do aplicativo e o nome da ocorrncia no formulrio
rtmp://www.example.com/app_name/instance_name.
Nome do fluxo contnuo Especifica o nome do arquivo FLV a ser reproduzido (por exemplo, myvideo.flv). A extenso .flv opcional.
Capa Especifica a aparncia do componente de vdeo. Uma visualizao da capa selecionada aparece abaixo do menu pop-up Capa.
Largura Especifica a largura do arquivo FLV, em pixels. Para que o Dreamweaver determine a largura exata do arquivo FLV, clique no
boto Detectar tamanho. Se o Dreamweaver no puder determinar a largura, digite um valor de largura.
Altura Especifica a altura do arquivo FLV, em pixels. Para que o Dreamweaver determine a altura exata do arquivo FLV, clique no boto
Detectar tamanho. Se o Dreamweaver no puder determinar a altura, digite um valor de altura.
Nota: Total com capa a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.
Restringir Mantm a mesma proporo entre a largura e a altura do componente de vdeo. Esta opo selecionada por padro.
Feed de vdeo ao vivo Especifica se o contedo do vdeo dinmico. Se a opo Feed de vdeo dinmico estiver selecionada, o Flash
Player reproduzir a alimentao de vdeo dinmico com fluxo do Flash Media Server. O nome do feed de vdeo ao vivo o nome
especificado na caixa de texto Nome do fluxo contnuo.
Nota: Quando voc seleciona Feed de vdeo ao vivo, somente o controle de volume aparece na capa do componente, pois no possvel
manipular o vdeo ao vivo. Alm disso, as opes Executar automaticamente e Retroceder automaticamente no tm nenhum efeito.
Executar automaticamente Especifica se o vdeo ser ou no reproduzido quando a pgina da Web for aberta.
Retroceder automaticamente Especifica se o controle de reproduo retornar posio inicial depois que a reproduo do vdeo
terminar.
Tempo de buffer Especifica o tempo, em segundos, necessrio para o armazenamento em buffer antes que o vdeo comece a ser
reproduzido. O tempo de buffer padro definido para 0 a fim de que o vdeo seja reproduzido imediatamente depois que o boto
Reproduzir for executado. (Se a opo Executar automaticamente for selecionada, o vdeo comear a ser reproduzido assim que uma
conexo for estabelecida com o servidor.) Talvez seja necessrio definir um tempo de buffer se voc estiver enviando um vdeo que tenha
uma taxa de bit superior velocidade de conexo do visitante do site ou quando houver a possibilidade de o trfego da Internet ocasionar
problemas de largura de banda ou de conectividade. Por exemplo, se voc deseja enviar 15 segundos de vdeo pgina da Web antes que
ela comece a reproduzir o vdeo, defina o tempo de buffer para 15.
3. Clique em OK para fechar a caixa de dilogo e adicionar o arquivo FLV pgina da Web.
O comando Inserir FLV gera um arquivo SWF de video player e um arquivo SWF de capa que so utilizados para exibir o vdeo em uma
pgina da Web. O comando tambm gera um arquivo main.asc que voc deve carregar no Flash Media Server. (Para ver os novos
arquivos, talvez seja necessrio clicar no boto Atualizar no painel Arquivos.) Esses arquivos so armazenados no mesmo diretrio do
arquivo HTML ao qual voc est adicionando o contedo do vdeo. Ao carregar a pgina HTML que contm o contedo do vdeo Flash,
no se esquea de carregar os arquivos SWF para o servidor Web e o arquivo main.asc para o Flash Media Server.
Nota: Se voc j tiver um arquivo main.asc no servidor, consulte o administrador do servidor antes de carregar o arquivo main.asc gerado
pelo comando Inserir FLV.
Voc pode carregar facilmente todos os arquivos de mdia necessrios selecionando o alocador de espao de componente do vdeo na
janela Documento do Dreamweaver e clicando no boto Carregar mdia no Inspetor de propriedades (Janela > Propriedades). Para ver uma
lista dos arquivos necessrios, clique em Mostrar arquivos necessrios.
Nota: O boto Carregar mdia no carrega o arquivo HTML que contm o contedo do vdeo.
Edio de informaes de download do Flash Player
Quando voc insere um arquivo FLV em uma pgina, o Dreamweaver insere um cdigo que detecta se o usurio possui a verso correta do
Flash Player. Em caso negativo, a pgina exibe um contedo alternativo padro que solicita que o usurio baixe a verso mais recente. Voc
pode alterar este contedo alternativo a qualquer momento.
Este procedimento tambm se aplica a arquivos SWF.
Nota: Se um usurio no tiver a verso requerida, mas tiver o Flash Player 6.0 r65 ou posterior, o navegador exibe um instalador expresso do
Flash Player. Se o usurio declinar a instalao expressa, ento a pgina exibe o contedo alternativo.
1. Na Visualizao de design da janela Documento, selecione o arquivo SWF ou FLV.
2. Clique no cone de olho da aba do arquivo SWF ou FLV.
Voc tambm pode pressionar Control + ] para alternar entre a visualizao alternativa do contedo. Para retornar visualizao de
SWF/FLV, pressione Control + [ at que todo o contedo alternativo seja selecionado. Em seguida, pressione novamente Control + [.
3. Edite o contedo como voc editaria qualquer outro contedo no Dreamweaver.
Nota: Voc no pode adicionar arquivos SWF ou FLV como contedo alternativo.
4. Clique novamente no cone de olho para retornar visualizao do arquivo SWF ou FLV.
Soluo de problemas em arquivos FLV
Esta seo detalha algumas das causas de problemas mais comuns em arquivos FLV.
Problemas de exibio causados pela ausncia de arquivos relacionados
O cdigo gerado pelo Dreamweaver CS4 e posterior conta com quatro arquivos dependentes, diferentemente do arquivo FLV:
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
O arquivo de capa (por exemplo, Clear_Skin_1.swf)
Observe que existem dois arquivos dependentes a mais para o Dreamweaver CS4 e posterior, em comparao com o Dreamweaver CS3.
Os dois primeiros arquivos desse tipo (swfobject_modified.js e expressInstall.swf) so instalados em uma pasta chamada Scripts, que o
Dreamweaver cria na raiz do site se essa pasta no existir.
Os outros dois arquivos (FLVPlayer_Progressive.swf e o arquivo de capa) so instalados na mesma pasta da pgina na qual o FLV foi
incorporado. O arquivo de capa contm os controles do FLV e seu nome depende da capa escolhida nas opes descritas na Ajuda do
Dreamweaver. Por exemplo, se voc escolher Limpar capa, o arquivo ser nomeado Clear_Skin_1.swf.
NECESSRIO carregar todos os quatro arquivos dependentes para que o FLV seja exibido corretamente.
Esquecer de fazer upload desses arquivos a causa mais comum de falhas de execuo de arquivos FLV em pginas da web. Se um desses
arquivos estiver ausente, uma "caixa branca" poder ser exibida na pgina.
Para certificar-se de que voc fez uploaded de todos os arquivos dependentes, use o painel Arquivos do Dreamweaver para carregar a pgina na
qual o FLV aparece. Quando voc faz upload da pgina, o Dreamweaver pergunta se voc deseja carregar os arquivos dependentes (a menos
que voc tenha desativado essa opo). Clique em sim para carregar os arquivos dependentes.
Problemas de exibio quando pginas so visualizadas localmente
Devido s atualizaes de segurana no Dreamweaver CS4, voc no pode usar o comando Visualizao no navegador para testar uma pgina
com um FLV incorporado a menos que voc defina um servidor de teste local para visualizar a pgina.
Geralmente, voc s precisar de um servidor de teste se estiver desenvolvendo pginas com ASP, ColdFusion ou PHP (consulte Configurao
do computador para o desenvolvimento de aplicativo). Se voc estiver criando sites que usam apenas HTML e no tiver definido um servidor de
teste, pressione F12 (Windows) ou Opt+F12 (Macintosh) para criar vrios controles de capa na tela. A alternativa pode ser definir um servidor de
teste e us-lo para carregar arquivos em um servidor remoto e visualiz-los nesse servidor.
Nota: possvel que as configuraes de segurana tambm sejam responsveis pela incapacidade de visualizar o contedo FLV local, mas
isso no pode ser confirmado pela Adobe. Voc pode tentar alterar as configuraes de segurana. Para obter mais informaes sobre como
alterar as configuraes de segurana, consulte Observao tcnica 117502.
Outras possveis causas de problemas com arquivos FLV
Se voc estiver tendo dificuldade para visualizar arquivos localmente, verifique se a opo Visualizar usando arquivo temporrio est
desmarcada em Editar > Preferncias > Visualizar no navegador
Verifique se voc possui o plug-in mais recente do FlashPlayer
Tenha cuidado ao mover arquivos e pastas fora do Dreamweaver. Quando voc move arquivos e pastas fora do Dreamweaver, ele no
garante os caminhos corretos para os arquivos relacionados ao FLV.
possvel substituir temporariamente o arquivo FLV com problemas por um arquivo FLV em boas condies. Se o arquivo FLV de
substituio funcionar, o problema est no arquivo FLV original e no no navegador ou no computador.
Automao de tarefas
Automao de tarefa
Usar o painel Histrico
Repetir etapas
Aplicar etapas do painel Histrico a objetos
Copiar e colar etapas entre documentos
Criar e usar comandos das etapas do histrico
Registrar e salvar comandos
Automao de tarefa
Para o incio
O painel Histrico registra as etapas que voc executa ao concluir uma tarefa. Automatize uma tarefa realizada frequentemente executando
novamente essas etapas no painel Histrico ou criando um novo comando que realiza as etapas automaticamente.
Determinados movimentos do mouse como, por exemplo, de seleo clicando na janela Documento no podem ser reproduzidos ou salvos.
Quando voc faz um movimento desses, uma linha preta exibida no painel Histrico (a linha no fica evidente at que voc realize outra ao).
Para evitar isso, use as teclas de seta em lugar do mouse a fim de mover o ponto de insero dentro da janela Documento
Outras etapas tambm no podem ser repetidas como, por exemplo, arrastar um elemento de pgina para outro lugar da pgina. Quando voc
realiza uma etapa dessas, um cone com um pequeno X vermelho exibido no painel Histrico.
Os comandos salvos so mantidos permanentemente (a menos que voc os exclua), ao passo que os comandos registrados so descartados
quando voc sai do Adobe Dreamweaver, e as sequncias copiadas de etapas so descartadas quando voc copia algo
Para o incio
O painel Histrico (Janela > Histrico) mostra uma lista das etapas que voc realizou no documento ativo desde a criao ou a abertura do
documento (mas no as etapas que voc realizou em outros quadros, em outras janelas Documento ou no painel Site). Use o painel Histrico
para desfazer vrias etapas simultaneamente e para automatizar tarefas.
A. Controle deslizante (miniatura) B. Etapas C. Boto Reexecutar D. Boto Copiar etapas E. Boto do Command Salvar como
O controle deslizante, ou miniatura, do painel Histrico aponta inicialmente para ltima etapa que voc realizou.
Nota: Voc no pode reorganizar a ordem das etapas no painel Histrico. No veja o painel Histrico como um conjunto arbitrrio de comandos,
e sim como uma forma de exibir as etapas que voc realizou na ordem em que as realizou.
Repetir etapas
Para o incio
Use o painel Histrico para repetir a ltima etapa que voc realizou, repetir uma srie de etapas prximas ou repetir uma srie de etapas no
prximas. Execute novamente as etapas diretamente no painel Histrico.
Para o incio
Voc pode aplicar um conjunto de etapas do painel Histrico para qualquer objeto na janela Documento.
Caso voc selecione vrios objetos e, em seguida, aplique as etapas a eles no painel Histrico, os objetos so tratados como uma seleo nica
e o Dreamweaver tenta aplicar as etapas a essa seleo combinada; no entanto, voc pode aplicar um conjunto de etapas a apenas um objeto
por vez.
Para aplicar as etapas a todos os objetos de um conjunto, voc deve fazer com que a ltima etapa da srie selecione o prximo objeto do
conjunto. O segundo procedimento demonstra esse princpio em um cenrio especfico: a definio do espao vertical e horizontal de uma srie
de imagens.
2. Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto.
3. Selecione a primeira imagem.
4. No Inspetor de propriedades, digite os nmeros nas caixas Espao V e Espao H para definir o espaamento da imagem.
5. Clique na imagem novamente para ativar a janela Documento sem mover o ponto de insero.
6. Pressione a tecla Seta esquerda para mover o ponto de insero esquerda da imagem.
7. Pressione a tecla Seta abaixo para mover o ponto de insero abaixo da linha, deixando-o esquerda da segunda imagem da srie.
8. Pressione Shift+Seta direita para selecionar a segunda imagem.
Nota: No selecione a imagem clicando nela, ou voc no poder repetir todas as etapas.
9. No painel Histrico, selecione as etapas que correspondem alterao do espaamento da imagem e seleo da prxima imagem.
Clique em Executar novamente para repetir essas etapas.
10. Continue clicando em Executar novamente at que todas as imagens sejam espaadas corretamente.
Para o incio
Cada documento aberto tem seu prprio histrico de etapas. Voc pode copiar etapas de um documento e col-las em outro.
O fechamento de um documento apaga seu histrico. Caso saiba que voc usar etapas de um documento mais tarde, copie ou salve as etapas
antes de fech-lo.
1. No documento que contm as etapas que voc deseja reutilizar, selecione as etapas no painel Histrico.
2. Clique em Copiar etapas no painel Histrico .
Nota: O boto Copiar etapas do painel Histrico diferente do comando Copiar do menu Editar. Voc no pode usar Editar > Copiar para
copiar etapas, embora use Editar > Colar para col-las.
Tome cuidado ao copiar as etapas que incluam um comando Copiar ou Colar:
No use Copiar etapas caso uma das etapas seja um comando Copiar; talvez voc no consiga col-las da forma que deseja.
Caso as etapas incluam um comando Colar, voc no pode col-las, a menos que elas tambm incluam um comando Copiar antes do
comando Colar.
3. Abra o outro documento.
4. Coloque o ponto de insero onde voc deseja ou selecione um objeto ao qual aplicar as etapas.
Para o incio
Salve um conjunto de etapas do histrico como um comando nomeado, que se torna disponvel no menu Comandos. Crie e salve um novo
comando caso voc possa usar um conjunto de etapas novamente, especialmente na prxima vez em que iniciar o Dreamweaver.
Criar um comando
1. Selecione uma etapa ou um conjunto de etapas no painel Histrico.
2. Clique no boto Comando Salvar como ou selecione Comando Salvar como no menu de contexto do painel Histrico.
3. Digite um nome para o comando e clique em OK.
O comando exibido no menu Comandos.
Nota: O comando salvo como um arquivo JavaScript (ou, s vezes, um arquivo em HTML) na pasta
Dreamweaver/Configurao/Comandos. Caso voc esteja usando o Dreamweaver em um sistema operacional com vrios usurios, o
arquivo salvo na pasta Comandos do usurio especfico.
Para o incio
Registre um comando temporrio para uso a curto prazo ou registre e salve um comando a ser usado posteriormente. O Dreamweaver mantm
apenas um comando registrado por vez; assim que voc inicia a gravao de um novo comando, o comando antigo perdido, a menos que o
salve antes da gravao do novo comando.
Para o incio
A lista completa de todos os ativos reconhecidos pode se tornar um problema em alguns sites grandes. Voc pode adicionar os ativos mais
usados a uma lista Favoritos, agrupar ativos relacionados, dar a eles apelidos que o lembrem de suas funes e localiz-los facilmente no painel
Ativos.
Nota: Os ativos favoritos no so armazenados como arquivos separados no disco. Eles so referncias para os ativos da lista de sites. O
Dreamweaver controla quais ativos da lista de sites devem ser exibidos na lista Favoritos.
A maioria das operaes do painel Ativos a mesma na lista Favoritos e na lista de sites. No entanto, h vrias tarefas que voc s consegue
executar na lista Favoritos.
Para o incio
A adio de uma cor ou um URL lista Favoritos exige uma etapa extra. Voc no pode adicionar novas cores ou URLs lista de sites; a lista
de sites contm apenas os ativos que j esto em uso no site.
Nota: No h nenhuma lista Favoritos para modelos e itens de biblioteca.
Selecione um ou mais ativos na lista de sites do painel Ativos, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla
control pressionada (Macintosh) e selecioneAdicionar a favoritos.
Selecione um ou mais arquivos no painel Arquivos, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control
pressionada (Macintosh) e selecione Adicionar a favoritos. O Dreamweaver ignora os arquivos que no correspondam a uma categoria do
painel Ativos.
Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) em um elemento na
Visualizao de design da janela Documento e selecione o comando do menu de contexto para adicionar o elemento a uma categoria
Favoritos.
O menu de contexto do texto contm Adicionar a cores favoritas ou Adicionar aos URLs favoritos, dependendo da existncia de um link
anexado ao texto. Voc pode adicionar somente elementos que correspondam a uma das categorias no painel Ativos.
Os ativos so removidos da lista Favoritos, e no da lista de sites. Caso voc remova uma pasta Favoritos, ela e todo seu contedo so
removidos.
Para o incio
Voc pode dar apelidos (por exemplo, PageBackgroundColor, e no #999900) somente a ativos na lista Favoritos. A lista de sites mantm os
nomes de arquivo reais (ou valores, no caso de cores e URLs).
1. No painel Ativos (Janela > Ativos), selecione a categoria que contm o ativo.
2. Selecione a opo Favoritos na parte superior do painel.
3. Siga um destes procedimentos:
Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) no nome ou no cone do
ativo no painel Ativos e selecione Editar apelido.
Clique no nome do ativo uma vez, faa uma pausa e clique nele novamente. (No clique duas vezes. Isso abre o item para edio.)
4. Digite o apelido do ativo e pressione Enter (Windows) ou Return (Macintosh).
Para o incio
Para o incio
Um conjunto de dados do Spry essencialmente um objeto JavaScript que contm uma coleo de dados especificados por voc. Com o
Dreamweaver, voc pode rapidamente criar esse objeto e carregar nele dados de uma fonte de dados (como um arquivo XML ou HTML). O
conjunto de dados resulta em uma matriz de dados na forma de uma tabela padro, contendo linhas e colunas. Enquanto cria um conjunto de
dados do Spry com o Dreamweaver, voc pode tambm especificar como deseja exibir os dados em uma pgina da Web.
Considere um conjunto de dados como um continer virtual com uma estrutura de linhas e colunas. Ele existe como um objeto JavaScript cujas
informaes s ficam visveis quando voc especifica exatamente como exibi-lo na pgina da Web. Voc pode exibir todos os dados nesse
continer ou optar por exibir somente partes selecionadas.
Para obter informaes completas sobre o funcionamento dos conjuntos de dados do Spry, consulte
www.adobe.com/go/learn_dw_sdg_sprydataset_br.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com conjuntos de dados do Spry, consulte
www.adobe.com/go/dw10datasets_br.
Para assistir a um tutorial em vdeo sobre como trabalhar com conjuntos de dados do Spry, consulte www.adobe.com/go/lrvid4047_dw_br.
Para o incio
Nota: XPath (XML Path Language) uma sintaxe para lidar com trechos de um documento XML. Na maioria das vezes, essa sintaxe
usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL usada para bancos de dados de consulta.
Para obter mais informaes sobre o XPath, consulte a especificao da linguagem XPath no site da W3C em www.w3.org/TR/xpath.
Quando terminar de usar a tela Especificar fonte de dados, clique em Concludo para criar o conjunto de dados imediatamente, ou
ento em Avanar para passar tela Definir opes de dados. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no
painel Ligaes (Janela > Ligaes).
4. Na tela Definir opes de dados, faa o seguinte:
(Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de coluna no menu pop-up
Tipo. Por exemplo, se uma coluna no conjunto de dados contm nmeros, selecione-a e escolha number no menu pop-up Tipo. Essa
opo s ser importante se voc quiser que seus usurios possam ordenar os dados por essa coluna.
Voc pode selecionar uma coluna do conjunto de dados clicando em seu cabealho, escolhendo-a no menu pop-up Nome da coluna ou
navegando at ela com as setas para a esquerda e para a direita no canto superior esquerdo da tela.
(Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a ordenao no menu pop-up
Ordenar coluna. Depois de selecionar a coluna, voc poder especificar o uso de ordem crescente ou decrescente.
(Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados.
(Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto de dados. Se quiser
atualizar os dados automaticamente, selecione Atualizar dados automaticamente e especifique um tempo de atualizao em
milissegundos.
Quando terminar de usar a tela Definir opes de dados, clique em Concludo para criar o conjunto de dados imediatamente, ou ento
em Avanar para passar tela Escolher opes de insero. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no
painel Ligaes (Janela > Ligaes).
5. Na tela Escolher opes de insero, siga um destes procedimentos:
Selecione um layout para o novo conjunto de dados e especifique as opes de configurao adequadas. Para obter mais informaes,
consulte Escolher um layout para o conjunto de dados.
Selecione No inserir HTML. Se voc selecionar essa opo, o Dreamweaver criar o conjunto de dados, mas no adicionar HTML
pgina. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados manualmente do
conjunto de dados para a pgina.
6. Clique em Concludo.
O Dreamweaver criar o conjunto de dados e, se voc tiver selecionado uma opo de layout, exibir na sua pgina o layout e os
alocadores de espao para os dados. Se observar a Visualizao de cdigo, voc ver que o Dreamweaver adicionou ao cabealho
referncias aos arquivos xpath.js e SpryData.js. Esses arquivos so ativos importantes do Spry que funcionam em conjunto com a pgina.
No remova esse cdigo da sua pgina, ou ento o conjunto de dados no funcionar. Quando carregar sua pgina em um servidor, voc
precisar carregar tambm esses arquivos como dependentes.
Classe Linha mpar Altera a aparncia das linhas com numerao mpar na tabela dinmica, de acordo com o estilo de classe
selecionado.
Classe Linha par Altera a aparncia das linhas com numerao par na tabela dinmica, de acordo com o estilo de classe selecionado.
Classe Focalizao Altera a aparncia de uma linha da tabela quando voc move o mouse sobre ela, de acordo com o estilo de classe
selecionado.
Classe Seleo Altera a aparncia de uma linha da tabela quando voc clica nela, de acordo com o estilo de classe selecionado.
Nota: A ordem das classes mpar, par, de focalizao e de seleo na sua folha de estilos muito importante. As regras devem estar na
ordem exata indicada acima (mpar, par, focalizao, seleo). Se a regra de focalizao aparecer abaixo da regra de seleo na folha de
estilos, o efeito de focalizao no aparecer at que o usurio mova o mouse sobre outra linha. Se as regras de focalizao e seleo
aparecerem acima das regras par e mpar na folha de estilos, os efeitos de par e mpar no funcionaro. Voc pode arrastar as regras no
painel CSS para orden-las corretamente, ou ento manipular o cdigo CSS diretamente.
4. Se a tabela que voc est criando for se tornar uma tabela mestre dinmica do Spry, selecione Atualizar regies de detalhes quando a linha
estiver selecionada. Para obter mais informaes, consulte Sobre tabelas mestre dinmicas do Spry e atualizao de regies de detalhes.
5. Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver a tabela aparecer com uma linha de cabealhos e uma linha de referncias de dados. As
referncias de dados aparecem realadas e entre chaves ({}).
Layout mestre/detalhado
Selecione essa opo se quiser exibir seus dados usando um layout mestre/detalhado. O layout mestre/detalhado permite aos usurios clicar em
um item na regio mestre ( esquerda) que atualiza as informaes na regio detalhada ( direita). Normalmente, a regio mestre contm uma
longa lista de nomes; por exemplo, uma lista dos produtos disponveis. Quando o usurio clica em um dos nomes de produtos, a regio detalhada
exibe muito mais informaes detalhadas sobre a seleo.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir layout mestre/detalhado e siga estas etapas:
1. No painel Colunas mestre, ajuste o contedo da sua regio mestre da seguinte forma:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da regio mestre. Clique no sinal de adio (+) e
selecione um nome de coluna para adicionar novas colunas regio mestre. Por padro, o Dreamweaver preenche a regio mestre
com dados da primeira coluna do conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para
baixo no painel Colunas mestre define a ordem de aparecimento dos dados na regio mestre da pgina.
2. Repita as etapas acima para o painel Colunas detalhadas. Por padro, o Dreamweaver preenche a regio detalhada com todos os dados
que no aparecem na regio mestre (ou seja, todas as colunas, exceto a primeira do conjunto de dados).
3. (Opcional) Defina diferentes tipos de continer para os dados na regio detalhada. Para fazer isso, selecione o nome de uma coluna
detalhada e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre as tags DIV, P,
SPAN ou H1-H6.
4. Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver que as regies mestre/detalhada aparecero preenchidas com as referncias de dados
selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}).
Layout de contineres empilhados
Selecione essa opo se quiser exibir seus dados usando uma estrutura de contineres repetidos na pgina. Por exemplo, se voc tem quatro
colunas de dados no conjunto de dados, cada continer pode incluir as quatro colunas, e a estrutura de contineres se repetir para cada linha
no conjunto de dados.
Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir contineres empilhados e siga estas etapas:
1. No painel Colunas, ajuste o contedo dos seus contineres empilhados da seguinte forma:
Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna dos contineres empilhados. Clique no sinal de
adio (+) e selecione um nome de coluna para adicionar novas colunas aos contineres. Por padro, o Dreamweaver preenche os
contineres empilhados com dados de todas as colunas do conjunto de dados.
Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para
baixo no painel Colunas define a ordem de aparecimento dos dados nos contineres empilhados da pgina.
2. (Opcional) Defina diferentes tipos de continer para os dados nos contineres empilhados. Para fazer isso, selecione o nome de uma
coluna do conjunto de dados e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre
as tags DIV, P, SPAN ou H1-H6.
3. Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.
Se estiver na Visualizao de design, voc ver o continer preenchido com as referncias de dados selecionadas por voc. As referncias
Para o incio
A estrutura do Spry usa dois tipos de regies: uma a regio do Spry ao redor de objetos de dados como tabelas e listas de repeties, a outra
uma regio de detalhes do Spry usada com um objeto de tabela mestre para permitir a atualizao dinmica de dados em uma pgina do
Dreamweaver.
Todos os objetos de dados do Spry devem estar em uma regio do Spry. (Se voc tentar adicionar um objeto de dados do Spry antes de
adicionar uma regio do Spry a uma pgina, o Dreamweaver solicitar a incluso de uma regio do Spry.) Por padro, as regies do Spry esto
em contineres div HTML. Voc pode adicion-las antes de adicionar uma tabela, adicion-las automaticamente ao inserir uma tabela ou lista de
repeties ou coloc-las em torno de tabelas ou objetos de lista de repeties existentes.
Ao adicionar uma regio de detalhes, normalmente voc adiciona o objeto de tabela mestre primeiro e seleciona a opo Atualizar regies de
detalhes (consulte Layout de tabela dinmica). O nico valor diferente e especfico para uma regio de detalhes a opo Tipo na caixa de
dilogo Inserir regio do Spry.
1. Selecione Inserir > Spry > Regio do Spry.
Voc tambm pode clicar no boto Regio do Spry, na categoria Spry do painel Inserir.
2. Para o objeto recipiente, selecione a opo <div> ou <span>. O padro usar um recipiente <div>.
3. Escolha uma das seguintes opes:
Para criar uma Regio do Spry, selecione Regio (a padro) como o tipo de regio a inserir.
Para criar uma Regio de detalhes do Spry, selecione a opo Regio de detalhes. Voc s usaria uma regio de detalhes se quisesse
ligar os dados dinmicos que so atualizados como dados em outras alteraes de regio do Spry.
Importante: preciso inserir uma regio de detalhes em um <div> diferente da regio da tabela mestre. Convm usar a Visualizao de
cdigo para posicionar o ponto de insero corretamente.
4. Escolha o conjunto de dados do Spry no menu.
5. Se quiser criar ou alterar a regio definida para um objeto, selecione o objeto e escolha uma destas opes:
Quebra de linha da seleo Coloca uma nova regio em torno de um objeto.
Substituir seleo Substitui uma regio existente de um objeto.
6. Quando voc clica em OK, o Dreamweaver coloca um alocador de espao de regio na pgina com o texto O contedo da regio do Spry
inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto de dados do Spry, como uma tabela ou lista de
repeties, ou por dados dinmicos no painel Ligaes (Janela > Ligaes).
Para o incio
Voc pode adicionar regies repetitivas para exibir os dados. Uma regio repetitiva uma estrutura de dados simples que voc pode formatar
quando necessrio para apresentar seus dados. Por exemplo, voc pode usar uma regio repetida para exibir um conjunto de miniaturas
fotogrficas, uma depois da outra, em um objeto de layout de pgina como um elemento AP div.
1. Selecione Inserir > Spry > Repetio do Spry.
Voc tambm pode clicar no boto Repetio do Spry, na categoria Spry do painel Inserir.
2. Para o recipiente do objeto, selecione a opo <div> ou <span> dependendo do tipo de tag desejado. O padro usar um recipiente <div>.
3. Selecione a opo Repetir (padro) ou Repetir filhos.
Se voc quiser mais flexibilidade, convm usar a opo Repetir filhos que valida os dados de cada linha de uma lista no nvel filho. Por
exemplo, se voc tem uma lista <ul>, os dados so verificados no nvel <li>. Se voc escolher a opo Repetir, os dados sero
verificados no nvel <ul>. A opo Repetir filhos pode ser especialmente til se voc usar expresses condicionais no cdigo.
4. Escolha o conjunto de dados do Spry no menu.
5. Se j h texto ou elementos selecionados, voc pode envolv-los ou substitu-los.
6. Clique em OK para exibir uma regio de repetio na pgina.
Nota: Todos os objetos de dados do Spry precisam estar em regies. Ento, verifique se voc criou uma regio do Spry na sua pgina
antes de inserir uma regio repetitiva.
7. Quando voc clica em OK, o Dreamweaver insere um alocador de espao de regio na pgina com o texto O contedo da regio do Spry
inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto de dados do Spry, como uma tabela ou lista de
repeties, ou por dados dinmicos no painel Ligaes (Janela > Ligaes).
Para o incio
Voc pode adicionar listas de repetio para exibir os dados como uma lista ordenada, uma lista no ordenada (com marcadores), uma lista de
definies ou uma lista suspensa.
1. Selecione Inserir > Spry > Lista de repetio do Spry.
Voc tambm pode clicar no boto Lista de repetio do Spry, na categoria Spry do painel Inserir.
2. Selecione a tag recipiente a ser usada: UL, OL, DL ou SELECT. As outras opes variam de acordo com o recipiente escolhido. Se voc
escolher SELECT, defina os seguintes campos:
Exibir coluna: isto que aparece quando os usurios visualizam a pgina no navegador.
Coluna de valor: este o valor real enviado ao servidor de fundo.
Por exemplo, possvel criar uma lista de estados e mostrar os usurios Alabama e Alaska, mas enviar AL ou AK ao servidor. Voc
tambm pode usar SELECT como uma ferramenta de navegao e mostrar os nomes de produto como Adobe Dreamweaver e Adobe
Acrobat aos usurios, mas enviar URLs como support/products/dreamweaver.html e support/products/acrobat.html ao servidor.
3. Escolha o conjunto de dados do Spry no menu.
4. Escolha as colunas a serem exibidas.
5. Clique em OK para exibir uma regio de lista de repetio na pgina. Na Visualizao de cdigo, voc pode ver que as tags HTML <ul>,
<ol>, <dl> ou as tags de seleo FORM so inseridas no arquivo.
Nota: Se voc tentar inserir uma regio de lista de repetio sem ter criado uma regio, o Dreamweaver solicitar a incluso de uma para que
voc possa inserir a tabela. Todos os objetos de dados do Spry devem estar contidos nas regies.
Para o incio
Os modelos do Dreamweaver especificam regies que so bloqueadas (no editveis) e outras que so editveis para documentos baseados em
modelos.
Nas pginas baseadas em modelos, os usurios do modelo s podem editar o contedo em regies editveis. Voc pode facilmente identificar e
selecionar regies editveis para editar contedo. Os usurios do modelo no podem editar o contedo das regies bloqueadas.
Nota: Se voc tentar editar uma regio bloqueada em um documento baseado em modelo quando o realce estiver desativado, o ponteiro do
mouse mudar para indicar que no possvel clicar em uma regio bloqueada.
Os usurios do modelo tambm podem modificar propriedades e editar entradas de uma regio repetitiva em documentos baseados em modelos.
Para o incio
Quando os autores do modelo criam parmetros em um modelo, os documentos baseados no modelo herdam automaticamente os parmetros e
suas configuraes de valor iniciais. O usurio do modelo pode atualizar os atributos de tag editveis e outros parmetros de modelo (como
configuraes de regio opcionais).
Para o incio
Use controles de regio repetitiva para adicionar, excluir ou alterar a ordem de entradas em documentos baseados em modelo. Quando voc
adiciona uma entrada de regio repetitiva, uma cpia da regio repetitiva inteira adicionada. Para atualizar o contedo nas regies repetitivas, o
Para o incio
Voc pode importar tags personalizadas para o Dreamweaver a fim de que se tornem parte integrante do ambiente de criao. Por exemplo,
quando voc comea a digitar uma tag personalizada importada na Visualizao de cdigo, um menu de dicas de cdigo exibido, listando os
atributos da tag e permitindo que voc selecione um deles.
Para o incio
Voc pode importar tags de um arquivo XML de definio de tipo de documento (DTD) ou de um esquema.
1. Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags).
2. Clique no boto de adio (+) e selecione Esquema DTD > Importar Arquivo XML DTD ou de esquema.
3. Digite o nome do arquivo ou o URL do arquivo DTD ou de esquema.
4. Digite o prefixo a ser usado com as tags.
Nota: Um prefixo usado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas bibliotecas de tags
no usam prefixos.
5. Clique em OK.
Para o incio
Para o incio
Importe uma biblioteca de tags JSP de vrios tipos de arquivo ou de um servidor JSP para o Dreamweaver.
1. Abra uma pgina JSP no Dreamweaver.
2. Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags).
3. Clique no boto de adio (+) e selecione JSP > Importar do arquivo (*.tld, *.jar, *.zip) ou JSP > Importar do servidor (web.xml.)
4. Clique no boto Procurar ou digite um nome para o arquivo que contm a biblioteca de tags.
5. Digite um URI para identificar a biblioteca de tags.
O URI (Localizador uniforme de recursos) geralmente consiste no URL da organizao que mantm a biblioteca de tags. O URL no
usado para visualizar o site da organizao. Ele usado para identificar exclusivamente a biblioteca de tags.
6. (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar uma tag no cdigo como
parte de uma biblioteca de tags especfica.
7. Clique em OK.
Para o incio
Se voc usar o Adobe JRun, poder importar suas tags JRun no Dreamweaver.
1. Abra uma pgina JSP no Dreamweaver.
2. Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags).
3. Clique no boto de adio (+) para selecionar JSP > Importar tags do servidor JRun Server da pasta.
4. Digite um nome para a pasta que contm as tags JRun.
5. Digite um URI para identificar a biblioteca de tags.
O URI (Localizador uniforme de recursos) geralmente consiste no URL da organizao que mantm a biblioteca de tags. O URL no
usado para visualizar o site da organizao. Ele usado para identificar exclusivamente a biblioteca de tags.
6. (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar uma tag no cdigo como
parte de uma biblioteca de tags especfica.
7. Clique em OK.
Insero de datas
O Dreamweaver oferece um objeto de data conveniente, que insere a data atual no formato de sua preferncia (com ou sem a hora) e permite a
atualizao da data sempre que voc salva o arquivo.
Nota: As datas e horas mostradas na caixa de dilogo Inserir data no so atuais nem refletem as datas/horas que um visitante v quando
exibe o site. Elas so apenas exemplos da maneira como voc deseja exibir essas informaes.
1. Na janela Documento, coloque o ponto de insero no local em que deseja inserir a data.
2. Siga um destes procedimentos:
Selecione Inserir > Data.
Na categoria Comum do painel Inserir, clique no boto Data.
3. Na caixa de dilogo resultante, selecione um formato para o nome do dia da semana, um formato para a data e um formato para a hora.
4. Se voc deseja que a data inserida seja atualizada cada vez que voc salva o documento, selecione Atualizar automaticamente ao salvar.
Se voc deseja que a data fique sem formatao quando for inserida e nunca seja atualizada automaticamente, desmarque essa opo.
5. Clique em OK para inserir a data.
Se voc tiver selecionado Atualizar automaticamente ao salvar, poder editar o formato de data aps ele ter sido inserido no documento,
clicando no texto formatado e selecionando Editar formato de data no Inspetor de propriedades.
Para o incio
Antes de usar o Dreamweaver para inserir contedo criado com o Adobe Flash, voc deve estar familiarizado com os diferentes tipos de imagem
a seguir:
O arquivo FLA (.fla) O arquivo de origem de qualquer projeto e criado na ferramenta de criao Flash. Esse tipo de arquivo s pode ser aberto
no Flash (e no no Dreamweaver ou nos navegadores). Voc pode abrir o arquivo FLA no Flash e, em seguida, export-lo como um arquivo SWF
ou SWT a ser usado nos navegadores.
O arquivo SWF (.swf) Uma verso compilada do arquivo FLA (.fla), otimizada para visualizao na Web. Esse arquivo pode ser reproduzido nos
navegadores e visualizado no Dreamweaver, mas no pode ser editado no Flash.
O arquivo FLV (.flv) Um arquivo de vdeo que contm udio codificado e dados de vdeo para envio atravs do Flash Player. Por exemplo, se
voc tivesse um arquivo de vdeo do QuickTime ou Windows Media, usaria um decodificador (como o Flash Video Encoder ou o Sorensen
Squeeze) para converter o arquivo de vdeo em arquivo FLV. Para obter mais informaes, visite o Video Technology Center em
www.adobe.com/go/flv_devcenter_br.
Para o incio
Use o Dreamweaver para adicionar arquivos SWF s suas pginas e visualiz-los em um documento ou um navegador. Voc tambm pode
definir propriedades para arquivos SWF no Inspetor de propriedades.
Para obter um tutorial sobre a adio de arquivos SWF s pginas da Web, consulte www.adobe.com/go/vid0150_br.
O alocador de espao possui um contorno azul com abas. A aba indica o tipo de ativo (arquivo SWF) e a ID do arquivo SWF. A aba
tambm exibe um cone de olho. Atua para alternar entre o arquivo SWF e as informaes de download que os usurios veem quando no
esto com a verso correta do Flash Player.
3. Salve o arquivo.
O Dreamweaver informa que dois arquivos dependentes, expressInstall.swf e swfobject_modified.js, esto sendo salvos na pasta Scripts do
seu site. No esquea de carregar esses arquivos quando voc carregar o arquivo SWF para o servidor Web. Navegadores no podem
exibir adequadamente os arquivos SWF, a menos que voc tambm carregue esses arquivos dependentes.
Nota: O Microsoft Internet Information Server (IIS) no processa tags de objeto aninhado. Para as pginas ASP, o Dreamweaver usa o
objeto aninhado/cdigo incorporado em vez do cdigo do objeto aninhado ao inserir arquivos SWF ou FLV.
Quando voc insere um arquivo SWF em uma pgina, o Dreamweaver insere um cdigo que detecta se o usurio possui a verso correta do
Flash Player. Em caso negativo, a pgina exibe um contedo alternativo padro que solicita que o usurio baixe a verso mais recente. Voc
pode alterar este contedo alternativo a qualquer momento.
Este procedimento tambm se aplica a arquivos FLV.
Nota: Se um usurio no tiver a verso requerida, mas tiver o Flash Player 6.0 r65 ou posterior, o navegador exibe um instalador expresso do
Flash Player. Se o usurio declinar a instalao expressa, ento a pgina exibe o contedo alternativo.
1. Na Visualizao de design da janela Documento, selecione o arquivo SWF ou FLV.
2. Clique no cone de olho da aba do arquivo SWF ou FLV.
Voc tambm pode pressionar Control + ] para alternar entre a visualizao alternativa do contedo. Para retornar visualizao de
SWF/FLV, pressione Control + [ at que todo o contedo alternativo seja selecionado. Em seguida, pressione novamente Control + [.
3. Edite o contedo como voc editaria qualquer outro contedo no Dreamweaver.
Nota: Voc no pode adicionar arquivos SWF ou FLV como contedo alternativo.
4. Clique novamente no cone de olho para retornar visualizao do arquivo SWF (ou FLV).
Para o incio
Para o incio
Uma biblioteca de tags, no Dreamweaver, um conjunto de tags de um tipo especfico, juntamente com informaes sobre como o Dreamweaver
deve formatar as tags. As bibliotecas de tags fornecem informaes sobre as tags que o Dreamweaver usa para dicas de cdigo, verificaes de
navegador de destino, Seletor de tags e outros recursos de codificao. Com o Editor de bibliotecas de tags, voc pode adicionar e excluir
bibliotecas de tags, tags, atributos e valores de atributo, definir propriedades para uma biblioteca de tags, incluindo o formato (para facilitar a
identificao do cdigo), e editar tags e atributos.
Para o incio
1. Selecione Editar > Bibliotecas de tags para abrir o Editor de bibliotecas de tags.
A caixa de dilogo do Editor de bibliotecas de tags exibida. (As opes desta caixa de dilogo mudam de acordo com a tag selecionada.)
2. Fecha o Editor de bibliotecas de tags da seguinte maneira:
Para salvar as alteraes, clique em OK.
Para fechar o editor sem salvar as alteraes, clique em Cancelar.
Nota: Quando voc clica em Cancelar, todas as alteraes efetuadas no Editor de bibliotecas de tags so descartadas. Se voc
excluiu uma tag ou uma biblioteca de tags, ela ser restaurada.
Para o incio
Voc pode usar o Editor de bibliotecas de tags para adicionar bibliotecas de tags, tags e atributos s bibliotecas de tags no Dreamweaver.
Para o incio
Para o incio
1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags, uma tag ou um atributo na caixa Tags.
2. Clique no boto de subtrao ().
3. Clique em OK para excluir definitivamente o item.
O item removido da caixa Tags.
4. Clique em OK para fechar o Editor de bibliotecas de tags e concluir a excluso.
Mais tpicos da Ajuda
Para o incio
Para o incio
Formatao de pargrafos
Para o incio
Use o menu pop-up Formatar, no Inspetor de propriedades HTML, ou o submenu Formatar > Formato do pargrafo para aplicar as tags padro
de pargrafo e cabealho.
1. Coloque o ponto de insero no pargrafo ou selecione algum texto no pargrafo.
2. Usando o submenu Formatar > Formato do pargrafo ou o menu pop-up Formatar, no Inspetor de propriedades; selecione uma opo:
Selecione um formato de pargrafo (por exemplo, Cabealho 1, Cabealho 2, Texto pr-formatado etc.) A tag HTML associada ao estilo
selecionado (por exemplo, h1 para Cabealho 1, h2 para Cabealho 2, pre para Texto pr-formatado etc.) aplicada ao pargrafo
inteiro.
Selecione Nenhum para remover um formato de pargrafo.
Quando voc aplicar uma tag de cabealho a um pargrafo, o Dreamweaver adicionar automaticamente a prxima linha de texto como
um pargrafo padro. Para alterar essa configurao, selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias
(Macintosh). Em seguida, na categoria Geral, em Opes de edio, certifique-se de que Alternar para pargrafo simples aps
cabealho no est selecionado.
Para o incio
Voc pode alterar a cor padro de todo o texto em uma pgina ou pode alterar a cor do texto selecionado na pgina.
Alinhamento do texto
Para o incio
possvel alinhar o texto com HTML, usando o submenu Formatar > Alinhar. Voc pode centralizar qualquer elemento em uma pgina usando o
comando Formatar > Alinhar > Centralizar.
Recuo do texto
Para o incio
O uso do comando Recuar aplica a tag HTML blockquote a um pargrafo de texto, recuando o texto em ambos os lados da pgina.
1. Coloque o ponto de insero no pargrafo que voc deseja recuar.
2. Selecione Formatar > Recuar ou Diminuir recuo, ou selecione Lista > Recuar ou Diminuir recuo, no menu de contexto.
Nota: Voc pode aplicar vrios recuos a um pargrafo. Cada vez que voc seleciona este comando, o texto recua em ambos os lados do
documento.
Para o incio
Voc pode usar HTML para aplicar formatao de texto a uma nica letra ou a pargrafos e blocos de texto inteiros em um site. Use o menu
Formatar para definir ou alterar caractersticas de fonte do texto selecionado. Voc pode definir o tipo, o estilo (negrito ou itlico, por exemplo) e o
tamanho da fonte.
1. Selecione o texto. Se no houver nenhum texto selecionado, a opo se aplicar ao texto subsequente digitado.
2. Selecione uma das seguintes opes:
Para alterar a fonte, selecione uma combinao de fonte no submenu Formatar > Fonte. Selecione Padro para remover as fontes
aplicadas anteriormente. A opo Padro aplica a fonte padro ao texto selecionado (a fonte padro do navegador ou a fonte atribuda
a essa tag na folha de estilos CSS).
Para alterar o estilo da fonte, selecione um estilo de fonte (negrito, itlico, sublinhado etc.) no submenu Formatar > Estilo.
Mais tpicos da Ajuda
Definio de propriedades de texto no Inspetor de propriedades
Definio de propriedades CSS
Criao de uma nova regra CSS
Para o incio
1. Na janela Documento, coloque o ponto de insero no local em que deseja inserir uma rgua horizontal.
2. Selecione Inserir > HTML > Rgua horizontal.
Para o incio
Para o incio
Para o incio
Selecione o nome da categoria no menu pop-up Categoria. Por exemplo, para mostrar botes da categoria Layout, selecione Layout.
Para o incio
Inserir um objeto
1. Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir.
2. Siga um destes procedimentos:
Para o incio
Para o incio
Clique com a tecla Control (Windows) ou Option pressionada (Macintosh) no boto do objeto.
Por exemplo, para inserir um alocador de espao em uma imagem sem especificar um arquivo de imagem, clique com a tecla Control ou Option
pressionada no boto Imagem.
Nota: Este procedimento no ignora todas as caixas de dilogo de insero de objetos. Muitos objetos, incluindo elementos PA e conjuntos de
molduras, no inserem alocadores de espao nem objetos de valor padro.
Para o incio
Para o incio
Para o incio
Selecione a categoria Favoritos, no menu pop-up Categoria, no painel Inserir, e clique no boto de algum objeto favorito que voc tenha
adicionado.
Para o incio
Diferente dos outros painis do Dreamweaver, voc pode arrastar o painel Inserir para fora de sua posio de encaixe padro e solt-lo em uma
posio horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um painel para uma barra de ferramentas (embora voc
no possa ocult-lo e exibi-lo da mesma forma que se faz com as outras barras de ferramentas).
1. Clique na aba do painel Inserir e arraste-a para a parte superior da janela Documento.
2. Quando voc visualizar uma linha azul horizontal na parte superior da janela Documento, solte o painel Inserir na posio.
Nota: A Barra de insero horizontal, por padro, tambm faz parte da rea de trabalho Clssica. Para alternar para a rea de trabalho Clssica,
selecione Clssica, no alternador de rea de trabalho da Barra de aplicativos.
Para o incio
1. Clique na ala da Barra de insero horizontal (na parte esquerda da Barra de insero) e arraste-a para o local onde os seus painis esto
encaixados.
2. Posicione o painel Inserir e solte-o. Uma linha azul indica onde voc pode soltar o painel.
Para o incio
Clique na seta ao lado do nome da categoria, na extremidade esquerda da Barra de insero horizontal, e selecione Mostrar como abas.
Para o incio
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na aba de uma categoria da Barra de
insero horizontal e, em seguida, selecione Mostrar como menus.
Mais tpicos da Ajuda
Viso geral do painel Inserir
Gerenciamento de arquivos
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Caso esteja trabalhando em um ambiente colaborativo, voc pode devolver e retirar arquivos em servidores locais e remotos. Caso seja a nica
pessoa trabalhando no site remoto, voc pode usar os comandos Colocar e Obter sem devolver ou retir-los.
Nota: Voc pode usar a funcionalidade Obter e Colocar com um servidor de teste, embora no possa usar o sistema de devoluo/retirada sem
um servidor de teste.
A retirada de um arquivo o equivalente a declarar Estou trabalhando neste arquivo agora no toque nele! Quando um arquivo retirado, o
nome da pessoa que o retirou exibido no painel Arquivos com uma marca de seleo em vermelho (caso um membro da equipe tenha retirado
o arquivo) ou em verde (caso voc tenha retirado o arquivo) prximo ao cone do arquivo.
A devoluo disponibiliza o arquivo para outros membros da equipe retirar e editar. Quando voc devolve um arquivo aps a edio, a verso
local se torna somente leitura e um smbolo de bloqueio exibido ao lado da arquivo no painel Arquivos para impedir que voc faa alteraes no
arquivo.
O Dreamweaver no torna arquivos retirados somente leitura no servidor remoto. Caso transfira arquivos com um aplicativo que no seja o
Dreamweaver, voc pode substituir arquivos retirados. No entanto, em aplicativos que no sejam o Dreamweaver, o arquivo LCK permanece
visvel prximo ao arquivo retirado na hierarquia para ajudar a evitar esses acidentes.
Para o incio
Para usar o sistema de devoluo/retirada, voc deve associar o site local a um servidor remoto.
1. Selecione Site > Gerenciar sites.
2. Selecione um site e clique em Editar.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Para adicionar um servidor, clique no boto Adicionar novo servidor
Selecione um servidor existente e clique no boto Editar servidor existente
4. Especifique as Opes bsicas conforme necessrio e clique no boto Avanado.
5. Selecione Ativar retirada de arquivos caso voc esteja trabalhando em um ambiente em equipe (ou trabalhando sozinho, mas em vrias
mquinas diferentes). Desmarque a opo caso voc queira desativar a devoluo e a retirada de arquivo no site.
Essa opo til para permitir aos demais saber que voc retirou um arquivo para edio ou alert-lo de que voc talvez tenha deixado
uma verso mais recente do arquivo em outra mquina.
Caso voc no veja as opes de devoluo/retirada, isso significa que voc no configurou um servidor remoto.
6. Selecione a opo Retirar os arquivos na abertura caso voc queira retirar automaticamente os arquivos quando clicar duas vezes para
abri-los no painel Arquivos.
O uso de Arquivo > Abrir para abrir um arquivo no o retira mesmo quando a opo est selecionada.
7. Defina as opes restantes:
Nome de retirada O nome da retirada exibido no painel Arquivos com todos os arquivos retirados; isso permite aos membros da equipe
se comunicar com a pessoa certa caso um arquivo de que eles precisam seja retirado.
Nota: Caso voc trabalhe sozinho em vrias mquinas diferentes, use um nome de retirada diferente em cada uma delas (por exemplo,
AmyR-HomeMac e AmyR-OfficePC) para que voc saiba onde a verso mais recente do arquivo est caso se esquea de devolv-la.
Endereo de email Caso voc digite um endereo de email, quando retira um arquivo, o nome exibido no painel Arquivos como um link
(em azul e sublinhado) prximo ao arquivo. Caso um membro da equipe clique no link, o programa de email padro abre uma nova
mensagem com o endereo de email do usurio e um assunto correspondente ao arquivo e ao nome do site.
Para o incio
No painel Arquivos (Janela > Arquivos), clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e,
em seguida, selecione Desfazer retirada.
A cpia local do arquivo se torna somente leitura, e todas as alteraes que voc fez nele so perdidas.
Para o incio
O Dreamweaver pode se conectar a um servidor que usa WebDAV (Web-based Distributed Authoring and Versioning), um conjunto de extenses
para o protocolo HTTP que permite aos usurios editar e gerenciar arquivos de maneira colaborativa em servidores da Web remotos. Para obter
mais informaes, consulte www.webdav.org.
1. Caso voc ainda no tenha feito isso, defina um site do Dreamweaver que especifica a pasta local usada para armazenar e proteger
arquivos.
2. Selecione Site > Gerenciar sites e, em seguida, clique duas vezes no seu site na lista.
3. Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes procedimentos:
Para adicionar um servidor, clique no boto Adicionar novo servidor
Selecione um servidor existente e clique no boto Editar servidor existente
4. Na tela Bsico, no menu pop-up Uso da conexo, selecione WebDav e complete o restante das opes da tela, conforme necessrio.
5. Clique no boto Avanado.
6. Selecione a opo Ativar retirada de arquivos e insira as seguintes informaes:
Na caixa Nome de retirada, digite um nome que o identifique aos demais membros da equipe.
Na caixa Endereo de email, digite o seu endereo.
O nome e os endereos de email so usados para identificar a propriedade no servidor WebDAV, sendo exibidos no painel Arquivos
para fins de contato.
7. Clique em Salvar.
O Dreamweaver configura o site para acesso WebDAV. Quando voc usa o comando Devolver ou Retirar em qualquer arquivo do site, o
arquivo transferido usando o WebDAV.
Nota: O WebDAV talvez no consiga retirar corretamente nenhum arquivo com contedo dinmico como tags PHP ou SSIs porque o
HTTP GET os processa como retirados.
Para o incio
O Dreamweaver pode se conectar a um servidor que use o SVN (Subversion), um sistema de controle de verso que permite que usurios
editem e gerenciem de maneira colaborativa os arquivos em servidores remotos da Web. O Dreamweaver no um cliente SVN completo,
porm, ele permite que o usurio obtenha as verses mais recentes de arquivos, faa alteraes e confirme arquivos.
Importante: O Dreamweaver CS5 usa a biblioteca de cliente Subverso 1.6.6 e o Dreamweaver CS5.5 usa a biblioteca de cliente 1.6.9. As
verses posteriores da biblioteca cliente Subversion no so compatveis com verses anteriores. Lembre-se de que, se voc atualizar um
aplicativo cliente de terceiros (por exemplo, o TortoiseSVN) para funcionar com uma verso posterior do Subversion, o aplicativo Subversion
atualizado atualizar os metadados locais do Subversion, e o Dreamweaver no poder mais comunicar-se com o Subversion. Essa questo no
afetada pelas atualizaes do servidor Subversion, pois essas atualizaes so compatveis com verses anteriores. Se fizer a atualizao para
o aplicativo cliente de terceiros que funciona com o Subversion 1.7 ou posterior, voc ter que consultar a Adobe se h atualizaes antes de
usar novamente o Subversion com o Dreamweaver. Para obter mais informaes sobre essa questo, consulte www.adobe.com/go/dw_svn_br.
A Adobe recomenda que voc use uma outra ferramenta de comparao de arquivos quando estiver trabalhando com arquivos controlados por
verso SVN. Ao comparar arquivos para obter as diferenas, voc pode saber exatamente que tipo de alteraes outros usurios fizeram nos
arquivos. Para obter mais informaes sobre ferramentas de comparao, use um mecanismo de busca na Web como o Google para procurar
comparao de arquivos ou ferramentas para diferenciar. O Dreamweaver trabalha com a maioria das ferramentas de outros fabricantes.
Para obter uma viso em geral em vdeo sobre como trabalhar com SVN e Dreamweaver, consulte www.adobe.com/go/lrvid4049_dw_br.
Confirmar arquivos
1. Verifique se voc configurou corretamente uma conexo do SVN.
2. Siga um destes procedimentos:
Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up Exibir. (Se voc
estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.) Depois, selecione o arquivo que
deseja confirmar e clique no boto Devolver.
Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no painel Arquivos, ou ento
clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois, clique com o boto direito do mouse (Windows) ou
com a tecla Control pressionada (Macintosh) no arquivo que deseja confirmar e selecione Devolver.
3. Revise as aes na caixa de dilogo Confirmar, faa as alteraes necessrias e clique em OK.
Voc pode alterar aes selecionando o arquivo cuja ao deseja alterar e clicando nos botes na parte inferior da caixa de dilogo
Confirmar. H duas opes disponveis: confirmar e ignorar.
Nota: Uma marca de seleo verde em um arquivo no painel Arquivos representa um arquivo alterado que ainda no foi confirmado no
repositrio.
direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo relevante e selecione Bloquear ou Desbloquear.
Acessar offline
Talvez seja til para voc evitar o acesso ao repositrio durante outras atividades de transferncia de arquivos usando o acesso offline. O
Dreamweaver se reconectar ao repositrio SVN assim que voc invocar uma atividade que exija uma conexo (Obter verses mais recentes,
Confirmar etc).
1. Verifique se voc configurou corretamente uma conexo do SVN.
2. Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up Exibir. (Se voc estiver
trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.)
3. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer arquivo ou pasta no painel
Arquivos e selecione Controle de verso > Acessar offline.
usurios que faam sincronizaes com o repositrio SVN. Por exemplo, se voc mover um arquivo localmente e no confirmar esse arquivo no
repositrio durante algumas horas, outro usurio poder tentar obter a verso mais recente do arquivo em sua localizao antiga. Por isso, voc
deve sempre confirmar os arquivos no servidor SVN imediatamente aps mov-los localmente.
Arquivos e pastas permanecem no servidor SVN at que voc os exclua manualmente. Ento, mesmo que voc mova um arquivo para outra
pasta local e o confirme, a verso antiga permanecer na localizao anterior no servidor. Para evitar confuso, exclua as cpias antigas de
arquivos e pastas movidos.
Quando voc mover um arquivo localmente e confirm-lo no servidor SVN, o histrico de verses do arquivo ser perdido.
Mais tpicos da Ajuda
Para o incio
O encobrimento de site permite excluir pastas e arquivos de operaes como Obter ou Colocar. Voc tambm pode encobrir todos os arquivos de
um determinado tipo (JPEG, FLV, XML e assim por diante) das operaes do site. O Dreamweaver lembra as configuraes de cada site para
que voc no precise fazer selees sempre que trabalhar nesse site.
Por exemplo, caso esteja trabalhando em um site grande e no queira carregar os arquivos de multimdia diariamente, voc pode usar o
encobrimento de site para encobrir a pasta de multimdia. Assim, o Dreamweaver excluir os arquivos dessa pasta das operaes de site que
voc realizar.
Voc pode encobrir pastas e tipos de arquivo no site remoto ou local. O encobrimento exclui pastas e arquivos encobertos das seguintes
operaes:
Realizao das operaes Colocar, Obter, Devolver e Retirar
Gerao de relatrios
Localizao de arquivos locais e remotos mais novos
Realizao de operaes em todo o site como, por exemplo, verificao e alterao de links
Sincronizao
Trabalho com contedo do painel Ativo
Atualizao de modelos e bibliotecas
Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no painel Arquivos e
realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta substitui o encobrimento.
Nota: O Dreamweaver exclui modelos encobertos e itens de biblioteca apenas das operaes Obter e Colocar. O Dreamweaver no exclui
esses itens das operaes em lote porque isso pode fazer com que elas percam a sincronia com suas ocorrncias.
Para o incio
O encobrimento de site permite excluir pastas, arquivos e tipos de arquivo de todas as operaes do site como, por exemplo, Obter ou Colocar,
sendo ativado por padro. Voc pode desativar o encobrimento permanentemente ou apenas temporariamente para realizar uma operao em
todos os arquivos, inclusive em arquivos encobertos. Quando voc desativa o encobrimento de site, todos os sites encobertos so desencobertos.
Quando voc ativa o encobrimento de site novamente, todos os arquivos encobertos anteriormente so novamente encobertos.
Nota: Voc tambm pode usar a opo Desencobrir tudo para desencobrir todos os arquivos, mas isso no desativa o encobrimento; alm
disso, no h como encobrir novamente todas as pastas e arquivos encobertos anteriormente, exceto para definir o encobrimento novamente
para todas as pastas, arquivos e tipos de arquivos.
1. No painel Arquivos (Janela > Arquivos), selecione um arquivo ou uma pasta.
2. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e siga um dos seguintes procedimentos:
Selecione Encobrimento > (cancele a seleo para desativar).
Selecione Encobrimento > Configuraes para abrir a categoria Encobrimento da caixa de dilogo Configurao de site. Marque ou
desmarque e selecione ou cancele a seleo Encobrir arquivos terminados com para ativar ou desativar o encobrimento de tipos de
arquivo especficos. Voc pode inserir ou excluir sufixos de arquivo na caixa de texto que voc deseja encobrir ou desencobrir.
Para o incio
Voc pode encobrir pastas e arquivos especficos, mas no todos os arquivos e pastas ou um site inteiro. Ao encobrir arquivos e pastas
especficos, voc pode encobrir vrios arquivos e pastas simultaneamente.
1. No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado.
2. Selecione a(s) pasta(s) ou o(s) arquivo(s) que voc deseja encobrir ou desencobrir.
3. Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh) e selecione Encobrindo >
Encobrir ou Encobrimento > Desencobrir no menu de contexto.
Uma linha vermelha no cone da pasta ou do arquivo aparece ou desaparece, indicando que a pasta est encoberta ou desencoberta.
Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no painel Arquivos e
realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta substitui o encobrimento.
Para o incio
Voc pode indicar tipos de arquivo especficos a serem encobertos para que o Dreamweaver encubra todos os arquivos com um padro
especificado. Por exemplo, voc pode encobrir todos os arquivos que terminem com a extenso .txt. Os tipos de arquivo que voc insere no
precisam ser extenses de arquivo; eles podem ter qualquer padro ao final do nome de documento.
Para o incio
Voc pode desencobrir todas as pastas e arquivos de um site simultaneamente. Essa ao no pode ser desfeita; no h como reencobrir todos
os itens que j foram encobertos. Voc tem que reencobrir os itens individualmente.
Caso voc queira desencobrir temporariamente todas as pastas e arquivos, encubra novamente esses itens e desative o encobrimento de site.
1. No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado.
2. Selecione todos os arquivos ou pastas do site.
3. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Encobrindo >
Desencobrir tudo.
Nota: Essa etapa tambm desmarca a opo Encobrir os arquivos terminados com na categoria Encobrimento da caixa de dilogo
Definio do site.
As linhas vermelhas em todos os cones de pasta e arquivo desaparecem indicando que todos os arquivos e pastas do site esto
desencobertos.
Para o incio
O Dreamweaver pode funcionar com ferramentas para comparao de arquivos (tambm conhecidas como ferramentas para diferenciar) a fim
de comparar o cdigo das verses local e remota do mesmo arquivo, dois arquivos remotos diferentes ou dois arquivos locais diferentes. A
comparao das verses local e remota muito til caso voc esteja trabalhando em um arquivo localmente e suspeite de que a cpia do arquivo
no servidor foi modificada por algum. Sem deixar o Dreamweaver, voc pode exibir e mesclar as alteraes remotas verso local antes de
colocar o arquivo no servidor.
A comparao de dois arquivos locais ou de dois arquivos remotos tambm til caso voc mantenha verses anteriores, renomeadas, dos
arquivos. Se voc tiver esquecido as alteraes feitas em um arquivo em relao a uma verso anterior, uma rpida comparao o lembrar
delas.
Antes de comear, voc deve instalar uma ferramenta para comparao de arquivos de outro fabricante no sistema. Para obter mais informaes
sobre ferramentas de comparao, use um mecanismo de busca na Web como o Google para procurar comparao de arquivos ou ferramentas
para diferenciar. O Dreamweaver funciona com a maioria das ferramentas de outros fabricantes.
FileMerge
BBEdit
/usr/bin/bbdiff
TextWrangler
/usr/bin/twdiff
Nota: A pasta usr costuma permanecer oculta no Finder. No entanto, voc pode acess-la usando o boto Browse do Dreamweaver.
Nota: Os resultados reais exibidos dependem da ferramenta para diferenciar que voc est usando. Verifique o manual do usurio da ferramenta
para compreender como interpretar os resultados.
Para o incio
Se voc editar um arquivo localmente e, em seguida, tentar carreg-lo no servidor remoto, o Dreamweaver notificar voc de que o arquivo foi
alterado. Voc tem a opo de comparao dos dois arquivos antes de carregar o arquivo e substituir a verso remota.
Antes de comear, voc deve instalar uma ferramenta para comparar arquivos no sistema e especific-la no Dreamweaver.
1. Depois de editar um arquivo em um site do Dreamweaver, coloque o arquivo (Site > Colocar) no site remoto.
Se a verso remota do arquivo tiver sido modificada, voc receber uma notificao com a opo de visualizao das diferenas.
2. Para exibir as diferenas, clique no boto Comparar.
A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.
Caso no tenha especificado uma ferramenta para comparar arquivos, voc solicitado a especificar uma.
3. Depois de examinar ou mesclar as alteraes na ferramenta, voc pode continuar a operao Colocar ou cancel-la.
Para o incio
Voc pode comparar as verses locais dos arquivos com as verses remotas ao sincronizar os arquivos do site com o Dreamweaver.
Antes de comear, voc deve instalar uma ferramenta para comparar arquivos no sistema e especific-la no Dreamweaver.
1. Clique com o boto direito do mouse em qualquer lugar do painel Arquivos e selecione Sincronizar no menu de contexto.
2. Complete a caixa de dilogo Sincronizar arquivos e clique em Visualizar.
Depois que voc clicar em Visualizar, os arquivos selecionados e as aes a serem realizadas durante a sincronizao sero listados.
3. Na lista, selecione todos os arquivos que voc deseja comparar e clique no boto Comparar (o cone com duas pginas pequenas).
Nota: O arquivo deve ser baseado em texto como, por exemplo, arquivos em HTML ou do ColdFusion.
O Dreamweaver inicia a ferramenta comparativa, que compara as verses local e remota de todos os arquivos que voc selecionou.
Para o incio
Caso voc esteja trabalhando em um ambiente colaborativo, use o sistema de devoluo/retirada para transferir arquivos entre sites locais e
remotos. No entanto, caso voc seja a nica pessoa trabalhando no site remoto, voc pode usar os comandos Obter e Colocar para transferir
arquivos sem devolver ou retir-los.
Ao transferir um documento entre uma pasta local e remota usando o painel Arquivos, voc tem a opo da transferncia dos arquivos
dependentes do documento. Arquivos dependentes so imagens, folhas de estilos externas e outros arquivos referenciados no documento que um
navegador l ao carregar o documento.
Nota: Normalmente, uma boa ideia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais recentes dos arquivos
dependentes j estejam no disco local, no h necessidade de baix-los novamente. Isso tambm acontece no carregamento e na devoluo dos
arquivos: no h necessidade caso cpias atualizadas j estejam no site remoto.
Os itens de biblioteca so tratados como arquivos dependentes.
Alguns servidores informam erros quando colocam itens de biblioteca. No entanto, voc pode encobrir esses arquivos para impedir sua
transferncia.
Para o incio
Voc pode realizar outras atividades, no relacionadas a servidor, enquanto obtm ou coloca arquivos. A transferncia de arquivo em segundo
plano funciona com todos os protocolos de transferncia para os quais o Dreamweaver d suporte: FTP, SFTP, LAN, WebDAV, Subversion e
RDS.
Entre as atividades no relacionadas a servidor esto operaes comuns como digitar, editar folhas de estilos externas, gerar relatrios de todo o
site e criar novos sites.
Entre as atividades relacionadas a servidor que o Dreamweaver no pode realizar durante transferncias de arquivo esto as seguintes:
Colocar/obter/devolver/retirar arquivos
Desfazer retirada
Criar uma conexo de banco de dados
Ligar dados dinmicos
Visualizar dados na Visualizao dinmica
Inserir um servio da Web
Excluir arquivos remotos ou pastas
Visualizar em um navegador em um servidor de teste
Salvar um arquivo em um servidor remoto
Inserir uma imagem de um servidor remoto
Abrir um arquivo em um servidor remoto
Colocar automaticamente arquivos ao salvar
Arrastar arquivos para o site remoto
Recortar, copiar ou colar arquivos no site remoto
Atualizar Visualizao remota
Por padro, a caixa de dilogo Atividade de arquivo em segundo plano aberta durante transferncias de arquivos. Voc pode minimizar a caixa
de dilogo clicando no boto Minimizar do canto superior direito. Fechar a caixa de dilogo durante transferncias de arquivos resulta no
cancelamento da operao.
Para o incio
Use o comando Obter para copiar arquivos do site remoto para o site local. Voc pode usar o painel Arquivos ou a janela Documento para obter
arquivos.
O Dreamweaver cria um registro da atividade de arquivo durante a transferncia que voc pode exibir e salvar.
Nota: Voc no pode desativar a transferncia de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade de
arquivo em segundo plano, voc pode fech-lo para melhorar o desempenho.
O Dreamweaver tambm registra toda a atividade de transferncia de arquivos FTP. Caso ocorra um erro quando voc estiver transferindo um
arquivo usando o FTP, o registro de FTP do site pode ajud-lo a determinar o problema.
Para o incio
Convm colocar a verso atual do arquivo no servidor, mas voc continuar o editando.
Nota: Caso voc coloque um arquivo que no existia anteriormente no site remoto e esteja usando o sistema de devoluo/retirada, o
arquivo copiado para o site remoto e, em seguida, retirado para que voc possa continuar a edio.
Voc pode usar o painel Arquivos ou a janela Documento para colocar arquivos. O Dreamweaver cria um registro da atividade de arquivo
durante a transferncia que voc pode exibir e salvar.
Nota: Voc no pode desativar a transferncia de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade
de arquivo em segundo plano, voc pode fech-lo para melhorar o desempenho.
O Dreamweaver tambm registra toda a atividade de transferncia de arquivos FTP. Caso ocorra um erro quando voc estiver transferindo
um arquivo usando o FTP, o registro de FTP do site pode ajud-lo a determinar o problema.
Para assistir a um tutorial sobre a colocao de arquivos em um servidor remoto, consulte www.adobe.com/go/vid0163_br.
Para assistir a um tutorial sobre a soluo de problemas de envio, consulte www.adobe.com/go/vid0164_br.
Para o incio
Voc pode exibir o status das operaes de transferncia de arquivo, bem como uma lista de arquivos transferidos e seus resultados (xito na
transferncia, ignorado ou falha). Voc tambm pode salvar um registro da atividade do arquivo.
Nota: O Dreamweaver permite a voc realizar outras atividades no relacionadas a servidor enquanto transfere arquivos para ou de um servidor.
Para o incio
O Dreamweaver inclui um painel Arquivos que ajuda a gerenciar e transferir arquivos para e de um servidor remoto. Quando voc transfere
arquivos entre sites locais e remotos, as estruturas de arquivo e pasta em paralelo entre os sites so mantidas. Durante a transferncia de
arquivos entre sites, o Dreamweaver cria pastas correspondentes caso elas ainda no existam em um site. Voc tambm pode sincronizar os
arquivos entre os sites local e remoto; o Dreamweaver copia arquivos em ambas as direes conforme o necessrio e remove arquivos
indesejados quando apropriado.
Para o incio
O painel Arquivos permite exibir arquivos e pastas, independentemente de estarem associados ou no a um site do Dreamweaver e realizar
operaes de manuteno de arquivo padro como, por exemplo, abrir e mover arquivos.
Nota: Nas verses anteriores do Dreamweaver, o painel Arquivos era chamado de painel Site.
Voc pode mover o painel Arquivos conforme o necessrio e definir suas preferncias.
Use esse painel para realizar as seguintes tarefas:
Acessar sites, um servidor e unidades locais
Exibir arquivos e pastas
Gerenciar arquivos e pastas no painel Arquivos
Em sites do Dreamweaver, use as seguintes opes para exibir ou transferir arquivos:
no site remoto para a retirada por parte de outros membros da equipe. Se Ativar devoluo e retirada de arquivos estiver desativado, as cpias
dos arquivos tero privilgios de leitura e gravao.
Nota: Os arquivos que o Dreamweaver copia so os arquivos que voc seleciona no painel ativo do painel Arquivos. Caso o painel Remoto
esteja ativo, os arquivos do servidor de teste ou remotos selecionados so copiados para o site local; caso o painel Local esteja ativo, o
Dreamweaver copia a verso de teste ou remota dos arquivos locais selecionados para o site local.
Colocar arquivos Copia os arquivos selecionados do site local para o site remoto.
Nota: Os arquivos que o Dreamweaver copia so os arquivos que voc seleciona no painel ativo do painel Arquivos. Caso o painel Local esteja
ativo, os arquivos locais selecionados so copiados para o site remoto ou para o servidor de teste; caso o painel Remoto esteja ativo, o
Dreamweaver copia as verses locais dos arquivos de servidor remoto selecionados para o site remoto.
Caso voc esteja colocando um arquivo que ainda no existe no site remoto e Ativar devoluo e retirada de arquivos esteja selecionado, o
arquivo adicionado ao site remoto como retirado. Clique no boto devolver arquivos caso voc queira adicionar um arquivo sem o status
retirado.
Retirar arquivos Transfere uma cpia do arquivo do servidor remoto para o site local (substituindo a cpia local existente do arquivo, caso haja
alguma) e marca o arquivo como retirado do servidor. Essa opo no est disponvel caso Ativar devoluo e retirada de arquivos na caixa de
dilogo Definies de sites esteja desativado para o site atual.
Devolver arquivos Transfere uma cpia do arquivo local para o servidor remoto e disponibiliza o arquivo para edio. O arquivo local se torna
somente leitura. Essa opo no est disponvel caso a opo Ativar devoluo e retirada de arquivos na caixa de dilogo Definies de sites
esteja desativada para o site atual.
Sincronizar Sincroniza os arquivos entre as pastas local e remota.
O boto Expandir/reduzir Expande ou reduz o painel Arquivos para exibir um ou mais painis.
Para o incio
Voc pode exibir arquivos e pastas no painel Arquivos, independentemente de estarem associados ou no a um site do Dreamweaver. Ao exibir
sites, arquivos ou pastas no painel Arquivos, voc pode alterar o tamanho da rea de exibio e, para os sites do Dreamweaver, voc pode
expandir ou reduzir o painel Arquivos.
Nos sites do Dreamweaver, voc tambm pode personalizar o painel Arquivos alterando a visualizao do site local ou remoto exibida por
padro no painel reduzido. Ou voc pode alternar as visualizaes de contedo no painel Arquivos expandido usando a opo Mostrar sempre.
No painel Arquivos expandido (Janela > Arquivos), clique no boto Arquivos do site (para o site remoto), Servidor de teste ou Arquivos do
repositrio.
Para o incio
Voc pode abrir ou renomear arquivos; adicione, mova ou exclua arquivos; ou atualize o painel Arquivos depois de fazer as alteraes.
Nos sites do Dreamweaver, voc tambm determina quais arquivos (no site local ou remoto) foram atualizados desde a ltima vez em que foram
transferidos.
Abrir um arquivo
1. No painel Arquivos (Janela > Arquivos), selecione site, servidor ou unidade no menu pop-up (em que o site, o servidor ou a unidade
exibida).
2. Navegue at o arquivo que voc deseja abrir.
3. Siga um destes procedimentos:
Clique duas vezes no cone do arquivo.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no cone do arquivo e selecione Abrir.
O Dreamweaver abre o arquivo na janela Documento.
Para o incio
O Dreamweaver simplifica a localizao de arquivos selecionados, abertos, retirados ou modificados recentemente no site. Voc tambm pode
localizar arquivos mais novos no site local ou remoto.
Localizar e selecionar arquivos que sejam mais novos no site local do que no site remoto
No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel Arquivos e, em seguida, selecione
Editar > Selecionar um local mais novo.
O Dreamweaver seleciona os arquivos no painel Arquivos.
Localizar e selecionar arquivos que sejam mais novos no site remoto do que no site local
No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel Arquivos e, em seguida, selecione
Editar > Selecionar um remoto mais novo.
O Dreamweaver seleciona os arquivos no painel Arquivos.
Nota: Essa opo s est disponvel para relatrios sobre sites do Contribute.
4. Selecione um boto de opo para indicar onde voc deseja exibir arquivos listados no relatrio, se necessrio:
Mquina local caso o site contenha pginas estticas.
Servidor de teste caso o site contenha pginas dinmicas.
Nota: Essa opo pressupe que voc tenha definido um Servidor de teste na caixa de dilogo Definio de sites (XREF). Caso voc no
tenha definido um Servidor de teste e digitado um prefixo de URL para o servidor ou caso voc esteja executando o relatrio para mais de
um site, a opo no est disponvel.
Outro local caso voc queira digitar um caminho na caixa de texto.
5. Clique em OK para salvar as configuraes.
O Dreamweaver seleciona os arquivos modificados dentro do tempo selecionado no painel Arquivos.
Para o incio
Voc pode identificar e excluir arquivos que no sejam mais usados por outros arquivos do seu site.
1. Selecione Site > Verificar os links no site inteiro.
O Dreamweaver verifica todos os links do site e exibe os desfeitos no painel Resultados.
2. Selecione Arquivos rfos no menu do painel Verificador de links.
O Dreamweaver exibe todos os arquivos sem links externos. Isso significa que nenhum arquivo do site tem link com esses arquivos.
3. Selecione os arquivos deseja excluir e pressione Excluir.
Importante: Embora nenhum outro arquivo do site tenha link com esses arquivos, alguns dos arquivos listados podem ter links com outros
arquivos. Tome cuidado ao excluir os arquivos.
Para o incio
Voc pode acessar, modificar e salvar arquivos e pastas dos sites do Dreamweaver, bem como arquivos e pastas que no fazem parte de um site
do Dreamweaver. Alm dos sites do Dreamweaver, voc pode acessar um servidor, uma unidade local ou a rea de trabalho.
Para acessar um servidor remoto, voc deve configurar o Dreamweaver para trabalhar com esse servidor.
Nota: A melhor forma de gerenciar os arquivos criando um site do Dreamweaver.
Nota: Os nomes so exibidos para servidores para os quais voc configurou o Dreamweaver.
Para o incio
Quando voc exibe um site do Dreamweaver no painel Arquivos expandido, as informaes sobre arquivos e pastas so exibidas em colunas.
Por exemplo, voc pode ver o tipo de arquivo ou a data em que ele foi modificado.
Voc pode personalizar as colunas seguindo um dos seguintes procedimentos (algumas operaes s esto disponveis para colunas que voc
adiciona, e no para colunas padro):
Reorganizar ou realinhar colunas
Adicionar novas colunas (mximo de 10 colunas)
Ocultar colunas (exceto a coluna do nome de arquivo)
Designar colunas para serem compartilhadas com todos os usurios conectados a um site
Excluir colunas (apenas colunas personalizadas)
Renomear colunas (apenas colunas personalizadas)
Associar colunas a uma Design Note (apenas colunas personalizadas)
Para o incio
O Dreamweaver salva automaticamente vrias verses de um documento quando a compatibilidade com o Adobe Contribute est ativada.
Nota: Voc deve ter o Contribute instalado na mesma mquina que o Dreamweaver.
A reverso de arquivo tambm deve estar ativada nas configuraes administrativas do Contribute. Para obter mais informaes, consulte
Administrao do Contribute.
1. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em um arquivo do painel Arquivos.
2. Selecione Reverter pgina.
Caso haja alguma verso anterior da pgina a ser revertida, a caixa de dilogo Reverter exibida.
3. Selecione a verso da pgina para a qual voc deseja reverter e clique em Reverter.
Mais tpicos da Ajuda
Para o incio
As Design Notes so notas que voc cria para um arquivo. As Design Notes so associadas ao arquivo que descrevem, embora sejam
armazenadas em um arquivo separado. Voc pode ver quais arquivos tm Design Notes anexadas no painel expandido Arquivos: um cone de
Design Notes exibido na coluna Notas.
Voc pode usar as Design Notes para controlar as informaes de arquivo adicionais associadas aos documentos como, por exemplo, nomes de
arquivo da fonte de imagem e comentrios sobre o status do arquivo. Por exemplo, caso copie um documento de um site para outro, voc pode
adicionar Design Notes a esse documento com o comentrio de que o documento original est na outra pasta de site.
Voc tambm pode usar as Design Notes para controlar as informaes importantes que no pode colocar em um documento por motivos de
segurana como, por exemplo, notas sobre como um determinado preo ou configurao foi escolhido ou quais fatores de marketing
influenciaram uma deciso de design.
Caso um arquivo esteja aberto no Adobe Fireworks ou em Flash e seja exportado para outro formato, o Fireworks e o Flash salvam
automaticamente o nome do arquivo fonte original em um arquivo de Design Notes. Por exemplo, caso voc abra myhouse.png no Fireworks e o
exporte para myhouse.gif, o Fireworks cria um arquivo de Design Notes chamado myhouse.gif.mno. Esse arquivo de Design Notes contm o
nome do arquivo original, como um arquivo absoluto: URL. Dessa forma, as Design Notes de myhouse.gif podem conter a seguinte linha:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Uma Design Note Flash semelhante pode conter a seguinte linha:
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Nota: Para compartilhar as Design Notes, os usurios devem definir o mesmo caminho de raiz do site, sites/assets/orig).
Quando voc importa o grfico para o Dreamweaver, o arquivo de Design Notes copiado automaticamente para o site com o grfico. Quando
voc seleciona a imagem no Dreamweaver e opta por edit-la usando o Fireworks, este abre o arquivo original para edio.
Para o incio
Design Notes so notas associadas a um arquivo, embora sejam armazenadas em um arquivo separado. Use as Design Notes para controlar as
informaes de arquivo adicionais associadas aos documentos como, por exemplo, nomes de arquivo da fonte de imagem e comentrios sobre o
status do arquivo.
Voc ativa e desativa as Design Notes para um site na categoria Design Notes da caixa de dilogo Definio de sites. Ao ativar Design Notes,
voc pode optar por us-las apenas localmente, se quiser.
1. Selecione Site > Gerenciar sites.
2. Na caixa de dilogo Gerenciar sites, selecione um site e, em seguida, clique em Editar.
3. Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Design Notes.
4. Marque Manter Design Notes para ativar Design Notes (desmarque para desabilit-las).
5. Caso voc queira excluir todos os arquivos de Design Notes do site, clique em Limpar e, depois, clique em Sim. (Se voc desejar excluir os
arquivos remotos de Design Notes, precisar exclu-los manualmente).
Nota: O comando Limpar do Design Note exclui somente arquivos MNO (Design Notes). Ele no exclui a pasta _notes ou o arquivo
dwsync.xml dentro da pasta _notes. O Dreamweaver usa o arquivo dwsync.xml para manter informaes sobre a sincronizao do site.
6. Selecione Ativar carregamento de Design Notes para compartilhamento para carregar Design Notes associadas ao site com os demais
documentos e clique em OK.
Caso selecione essa opo, voc pode compartilhar as Design Notes com o restante da equipe. Quando voc coloca ou obtm um
arquivo, o Dreamweaver coloca ou obtm automaticamente o arquivo de Design Notes associado.
Caso voc no selecione essa opo, o Dreamweaver mantm as Design Notes localmente, mas no as carrega com os arquivos.
Caso voc trabalhe sozinho no site, desmarcar essa opo melhor a o desempenho. As Design Notes no sero transferidas para o site
remoto quando voc devolver ou colocar os arquivos, e voc pode continuar adicionando e modificando as Design Notes do site
localmente.
Para o incio
Voc pode criar um arquivo de Design Notes para cada documento ou modelo no site. Voc tambm pode criar Design Notes para applets,
controles ActiveX, imagens, contedo Flash, objetos Shockwave e campos de imagem nos documentos.
Nota: Caso voc adicione Design Notes a um arquivo de modelo, os documentos que voc cria com o modelo no herdam as Design Notes.
1. Siga um destes procedimentos:
Abra o arquivo na janela Documento e selecione Arquivo > Design Notes.
No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo e
selecione Design Notes.
Nota: Caso o arquivo resida em um site remoto, voc deve primeiramente retirar ou obt-lo e, em seguida, selecion-lo na pasta local.
2. Na aba Informaes bsicas, selecione um status para o documento no menu Status.
3. Clique no cone de data (acima da caixa Notas) para inserir a data local atual das notas.
4. Digite os comentrios na caixa Notas.
5. Selecione Mostrar quando o arquivo for aberto para que o arquivo de Design Notes seja exibido sempre que o arquivo for aberto.
6. Na aba Todas as informaes, clique no boto de adio (+) para adicionar um novo par chave/valor; selecione um par e clique no boto
de subtrao (-) para remov-lo.
Por exemplo, voc pode nomear uma chave como Autor (na caixa Nome) e definir o valor como Heidi (na caixa Valor).
7. Clique em OK para salvar as notas.
O Dreamweaver salva as anotaes em uma pasta chamada _notes, no mesmo local do arquivo atual. O nome de arquivo o nome de
arquivo do documento mais a extenso .mno. Por exemplo, caso o nome de arquivo seja index.html, o arquivo de Design Notes associado
se chama index.html.mno.
Para o incio
Depois de associar uma Design Note a um arquivo, voc pode abri-la, alterar seu status ou exclu-la.
Sincronizao de arquivos
Sincronizar os arquivos nos sites local e remoto
Para o incio
Depois de criar arquivos nos sites locais e remotos, voc pode sincronizar os arquivos entre os dois sites.
Nota: Caso o site remoto seja um servidor FTP (e no um servidor em rede), a sincronizao dos arquivos usa FTP.
Antes de sincronizar os sites, voc pode verificar quais arquivos voc deseja colocar, obter, excluir ou ignorar. O Dreamweaver tambm confirma
quais arquivos foram atualizados depois que voc completa a sincronizao.
Verifique quais arquivos so mais novos no site local ou remoto sem sincronizao
No painel Arquivos, siga um destes procedimentos:
Clique no menu Opes no canto superior direito e, em seguida, selecione Editar > Selecionar um local mais novo ou Editar > Selecionar
um remoto mais novo.
No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,
selecione Selecionar > Local mais novo ou Selecionar > Remoto mais novo.
Sincronizar os arquivos
1. No painel Arquivos (Janela > Arquivos), selecione um site no menu em que o site atual, o servidor ou a unidade exibida.
2. (Opcional) Selecione arquivos ou pastas especficas ou avance prxima etapa para sincronizar todo o site.
3. Clique no menu Opes no canto superior direito do painel Arquivos e selecione Site > Sincronizar.
Voc tambm pode clicar no boto Sincronizar na parte superior do painel Arquivos para sincronizar arquivos.
4. No menu Sincronizar, realize um dos seguintes procedimentos:
Para sincronizar todo o site, selecione Nome do site inteiro.
Para sincronizar apenas os arquivos selecionados, selecione Apenas arquivos locais selecionados (ou Apenas arquivos remotos
selecionados caso a Visualizao remota do painel Arquivos esteja onde voc fez a seleo mais recente).
5. Selecione a direo na qual voc deseja copiar os arquivos:
Colocar arquivos mais recentes no remoto Carrega todos os arquivos locais que no existem no servidor remoto ou que foram alterados
aps o ltimo carregamento.
Obter arquivos mais recentes do remoto Baixa todos os arquivos remotos que no existem localmente ou que foram alterados desde o
ltimo download.
Obter e colocar os arquivos mais novos Coloca as verses mais recentes de todos os arquivos nos sites local e remoto.
6. Selecione se voc deseja excluir os arquivos no site de destino sem equivalentes no site de origem. (Isso no est disponvel caso voc
selecione Obter e Colocar no menu Direo.)
Caso voc selecione Colocar arquivos mais recentes no remoto e a opo Excluir, todos os arquivos no site remoto para os quais no h
nenhum arquivo local correspondente so excludos. Caso voc selecione Obter arquivos mais recentes do remoto, todos os arquivos no
site local para os quais no h arquivos remotos correspondentes so excludos.
7. Clique em Visualizar.
Nota: Para poder sincronizar os arquivos, voc deve visualizar as aes que o Dreamweaver realiza para cumprir essa tarefa.
Caso a verso mais recente de cada arquivo escolhido j esteja em ambos os locais e mais nada precise ser excludo, um alerta exibido
informando que nenhuma sincronizao necessria. Do contrrio, a caixa de dilogo Sincronizar exibida para permitir alterar as aes
Vinculao e navegao
Personalizao da barra de menus do Spry
David Powers (1 de janeiro de 2011)
tutorial
Veja como voc pode transformar uma barra de menus padro em algo muito mais elegante por meio de planejamento cuidadoso e
compreenso razovel da CSS.
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Sobre links
Para o incio
Depois de configurar um site do Dreamweaver para armazenar os documentos do seu site e de criar pginas HTML, voc pode criar links dos
seus documentos para outros documentos.
O Dreamweaver fornece diversas maneiras para criar links com documentos, imagens, arquivos multimdia ou softwares para download. Voc
pode estabelecer links para qualquer texto ou imagem em qualquer lugar de um documento, incluindo texto ou imagens de um cabealho, lista,
tabela, elemento com posio absoluta (elemento PA) ou quadro.
Existem diversas maneiras de criar e gerenciar links. Alguns designers da Web preferem criar links com pginas ou arquivos no existentes ao
trabalharem, enquanto outros preferem criar todos os arquivos e pginas primeiro e depois adicionar os links. Outro modo de gerenciar links
criar pginas de alocador de espao, nas quais voc pode adicionar e testar links antes de concluir todas as pginas do seu site.
Para o incio
Para criar links, essencial conhecer o caminho do arquivo entre os documentos ou ativos de origem e de destino que esto sendo vinculados.
Cada pgina da Web tem um endereo exclusivo, chamado de Localizador uniforme de recursos (URL). No entanto, ao criar um link local (um
link de um documento com outro no mesmo site), normalmente no necessrio especificar o URL inteiro do documento que est sendo
vinculado; em vez disso, especifique um caminho relativo do documento atual ou da pasta raiz do site.
Existem trs tipos de caminhos de link:
Caminhos absolutos (como http://www.adobe.com/support/dreamweaver/contents.html).
Caminhos relativos a documentos (como dreamweaver/contents.html).
Caminhos relativos raiz do site (como /support/dreamweaver/contents.html).
Usando o Dreamweaver, voc pode selecionar com facilidade o tipo de caminho de documento a ser criado para seus links.
Nota: melhor usar o tipo de link que voc prefere e com o qual est mais familiarizado, seja em relao raiz do site ou ao documento.
Navegar pelos links, ao contrrio de digitar os caminhos, assegura que voc sempre acesse o caminho correto.
Caminhos absolutos
Os caminhos absolutos fornecem o URL completo do documento vinculado, incluindo o protocolo a ser usado (normalmente http:// para pginas
da Web), por exemplo, http://www.adobe.com/support/dreamweaver/contents.html. Para um ativo de imagem, o URL completo deve ter a seguinte
aparncia: http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Voc deve usar um caminho absoluto para vincular-se a um documento ou ativo em outro servidor. Voc tambm pode usar caminhos absolutos
para links locais (com documentos no mesmo site), mas essa abordagem no recomendada: se o site for movido para outro domnio, todos os
links locais de caminho absoluto sero corrompidos. Usar caminhos relativos para links locais tambm aumenta a flexibilidade, caso voc tenha
que mover arquivos no seu site.
Nota: Ao inserir imagens (no links), voc pode usar um caminho absoluto para uma imagem em um servidor remoto (isto , uma imagem que
no est disponvel na unidade de disco rgido local).
Para vincular contedo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html.
Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em cada barra (/), voc desce
um nvel na hierarquia de pastas.
Para vincular de contents.html a index.html (na pasta pai, um nvel acima de contents.html), use o caminho relativo ../index.html. Dois pontos
e uma barra (../), move um nvel acima na hierarquia de pastas.
Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo ../products/catalog.html.
Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos.
Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos dessa pasta mantenham os
mesmos caminhos relativos entre si), voc no precisa atualizar os links relativos a documentos entre esses arquivos. No entanto, ao mover
um arquivo individual que contm links relativos a documentos ou um arquivo individual de destino de um link relativo a documentos, voc
precisa atualizar esses links. (Se voc mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizar todos os links
relevantes automaticamente.)
Mapas de imagem
Sobre mapas de imagem
Inserir mapas de imagem do cliente
Modificar pontos ativos do mapa de imagem
Para o incio
Um mapa de imagem uma imagem que foi dividida em regies chamadas pontos ativos; quando o usurio clica em um ponto ativo, ocorre uma
ao (por exemplo, um novo arquivo aberto).
Os mapas de imagem do cliente armazenam as informaes do link de hipertexto no documento HTML, no um arquivo de mapa separado
assim como fazem os mapas de imagem do servidor. Quando um visitante do site clica em um ponto ativo da imagem, o URL associado
enviado diretamente para o servidor. Desse modo, os mapas de imagem do cliente so mais rpidos do que os mapas de imagem do servidor
porque o servidor no precisa interpretar a origem do clique. Os mapas de imagem do cliente so suportados pelo Netscape Navigator 2.0 e
posterior, pelo NCSA Mosaic 2.1 e 3.0 e por todas as verses do Internet Explorer.
O Dreamweaver no altera referncias aos mapas de imagem do servidor nos documentos existentes; voc pode usar mapas de imagem do
cliente e do servidor no mesmo documento. No entanto, os navegadores compatveis com os dois tipos de mapas de imagem do prioridade aos
mapas de imagem do cliente. Para incluir um mapa de imagem do servidor em um documento, voc deve gravar o cdigo HTML adequado.
Para o incio
Ao inserir um mapa de imagem do cliente, crie uma rea de ponto ativo e defina um link que abra quando o usurio clicar na rea do ponto ativo.
Nota: Voc pode criar vrias reas de ponto ativo, mas elas devem fazer parte do mesmo mapa de imagem.
1. Na janela Documento, selecione a imagem.
2. No Inspetor de propriedades, clique na seta de expanso, no canto inferior direito, para exibir todas as propriedades.
3. Na caixa Nome do mapa, insira um nome exclusivo para o mapa de imagem. Se estiver usando vrios mapas de imagem no mesmo
documento, verifique se cada mapa tem um nome exclusivo.
4. Para definir as reas do mapa de imagem, siga um destes procedimentos:
Selecione a ferramenta de crculo
Selecione a ferramenta de retngulo
6. No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome.
Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se voc especificar um quadro que no existe, a
pgina vinculada ser carregada em uma nova janela que tem o nome especificado. Voc tambm pode selecionar um dos seguintes
nomes de destino reservados:
_blank carrega o arquivo vinculado em uma nova janela do navegador no nomeada.
_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se o quadro que contm o
link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no necessrio
especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
Nota: A opo de destino s disponibilizada quando o ponto ativo selecionado contm um link.
7. Na caixa Alt, digite o texto alternativo a ser exibido nos navegadores somente de texto ou nos navegadores que fazem download de
imagens manualmente. Alguns navegadores exibem esse texto como uma dica de ferramenta quando o usurio passa o ponteiro pelo ponto
ativo.
8. Repita as etapas de 4 a 7 para definir pontos ativos adicionais no mapa de imagem.
9. Quando terminar de mapear a imagem, clique em uma rea em branco do documento para alterar o Inspetor de propriedades.
Para o incio
Voc pode editar com facilidade os pontos ativos criados em um mapa de imagem. Voc pode mover uma rea de ponto ativo, redimensionar
pontos ativos ou mover um ponto ativo para frente ou para trs em um elemento absolutamente posicionado (elemento AP).
Voc tambm pode copiar uma imagem com pontos ativos de um documento para outro ou copiar um ou mais pontos ativos de uma imagem e
col-los em outra imagem; os pontos ativos associados imagem tambm so copiados no novo documento.
2. Arraste uma ala do seletor de ponto ativo para alterar o tamanho ou a forma do ponto ativo.
Menus de salto
Sobre menus de salto
Inserir um menu de salto
Editar itens de menu de salto
Soluo de problemas de menus de salto
Para o incio
Um menu de salto um menu pop-up em um documento, visvel aos visitantes do site, que lista os links para documentos ou arquivos. Voc
pode criar links para documentos no seu site, links para documentos em outros sites, links de email, links para grficos ou links para qualquer
tipo de arquivo que possa ser aberto em um navegador.
Cada opo de um menu de salto associada a um URL. Quando escolhem uma opo, os usurios so redirecionados ("saltam") para o URL
associado. Os menus de salto so inseridos no objeto de formulrio Menu de salto.
Um menu de salto pode conter trs componentes:
(Opcional) Uma solicitao de seleo de menu, como uma descrio de categoria para os itens de menu ou instrues como "Escolha
uma".
(Obrigatrio) Uma lista de itens de menu vinculados: um usurio seleciona uma opo e um documento ou arquivo vinculado aberto.
(Opcional) Um boto Ir.
Para o incio
Para o incio
Voc pode alterar a ordem dos itens no menu ou no arquivo vinculado a um item e adicionar, excluir ou renomear um item.
Para alterar o local em que um arquivo vinculado deve ser aberto ou para adicionar ou alterar uma solicitao de seleo de menu, voc deve
aplicar o comportamento Menu de salto do painel Comportamentos.
1. Abra o Inspetor de propriedades (Janela > Propriedades) se ainda no estiver aberto.
2. Na Visualizao de design da janela Documento, clique no objeto de menu de salto para selecion-lo.
3. No Inspetor de propriedades, clique no boto Listar valores.
4. Use a caixa de dilogo Listar valores para fazer alteraes nos itens de menu e clique em OK.
Para o incio
Depois que um usurio seleciona um item do menu de salto, no possvel selecionar esse item novamente se o usurio voltar pgina ou se a
caixa Abrir URLs em especificar um quadro. Existem duas maneiras de solucionar esse problema:
Use uma solicitao de seleo de menu, como uma categoria, ou uma instruo para o usurio, como "Escolha uma". A solicitao de
seleo de menu remarcada automaticamente depois de cada seleo de menu.
Use um boto Ir, que permite ao usurio revisitar o link escolhido atualmente. Ao ser usado com um menu de salto, o boto Ir se transforma
no nico mecanismo que salta para levar o usurio ao URL associado seleo do menu. A seleo de um item de menu no menu de
salto no redireciona mais o usurio automaticamente para outra pgina ou quadro.
Nota: Selecione somente uma dessas opes por menu de salto, na caixa de dilogo Inserir menu de salto, porque elas se aplicam a um
menu de salto inteiro.
Mais tpicos da Ajuda
Barras de navegao
Sobre barras de navegao
Para o incio
Para o incio
Use o recurso Verificar links para procurar links rompidos e arquivos rfos (arquivos que ainda existem no site, mas no esto vinculados a
nenhum outro arquivo do site). Voc pode procurar um arquivo aberto, uma parte de um site local ou um site local inteiro.
O Dreamweaver verifica links somente de documentos do site; o Dreamweaver compila uma lista de links externos nos documentos selecionados,
mas no os verifica.
Voc tambm pode identificar e excluir arquivos que no so mais usados por outros arquivos do seu site.
Para o incio
Depois de executar um relatrio de links, voc pode corrigir links rompidos e referncias de imagem diretamente no painel Verificador de links ou
abrir arquivos da lista e corrigir os links no Inspetor de propriedades.
ao link rompido e navegue at o arquivo correto, ou digite o caminho e o nome de arquivo corretos.
Se estiver atualizando uma referncia de imagem e a nova imagem for exibida no tamanho incorreto, clique nos rtulos W e H no Inspetor
de propriedades ou clique no boto Atualizar para redefinir os valores de altura e largura.
4. Salve o arquivo.
Conforme os links so corrigidos, suas entradas desaparecem da lista Verificador de links. Se uma entrada ainda aparecer na lista depois
de voc inserir um novo caminho ou nome de arquivo no Verificador de links (ou depois de salvar as alteraes no Inspetor de
propriedades), o Dreamweaver no poder encontrar o novo arquivo e ainda considerar o link rompido.
Mais tpicos da Ajuda
Codificao
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Recolhimento de cdigo
Sobre o recolhimento de cdigo
Recolhimento e expanso de fragmentos de cdigo
Colagem e movimentao de fragmentos de cdigo recolhidos
Para o incio
Voc pode recolher e expandir fragmentos de cdigo para que possa visualizar diferentes sees do documento sem precisar usar a barra de
rolagem. Por exemplo, para ver todas as regras CSS na tag head que se aplica a uma tag div mais abaixo na pgina, recolha tudo o que estiver
entre as tags head e div, a fim de que voc possa ver as duas sees de cdigo simultaneamente. Embora voc possa selecionar fragmentos de
cdigo fazendo selees na Visualizao de design ou Visualizao de cdigo, recolha o cdigo apenas na Visualizao de cdigo.
Nota: Os arquivos criados nos modelos do Dreamweaver exibem todos os cdigos como totalmente expandidos, mesmo se o arquivo de modelo
(.dwt) contiver fragmentos de cdigo recolhidos.
Para o incio
Quando voc seleciona um cdigo, um conjunto de botes de recolhimento exibido ao lado da seleo (smbolos de menos no Windows,
tringulos verticais no Macintosh). Clique nos botes para recolher e expandir a seleo. Quando o cdigo recolhido, os botes de recolhimento
se transformam em boto de expanso (um boto de mais no Windows; um tringulo horizontal no Macintosh).
s vezes, o fragmento exato do cdigo selecionado no recolhido. O Dreamweaver usa o recolhimento inteligente para recolher a seleo
mais comum e visualmente satisfatria. Por exemplo, se voc selecionou uma tag recuada e, em seguida, selecionou os espaos recuados antes
da tag tambm, o Dreamweaver no recolher os espaos recuados, pois a maioria dos usurios esperar que seus recuos sejam preservados.
Para desativar o recolhimento inteligente e forar o Dreamweaver a recolher exatamente o que voc selecionou, mantenha pressionada a tecla
Control antes de recolher o cdigo.
Alm disso, um cone de aviso nos fragmentos de cdigo recolhidos ser exibido se um fragmento contiver erros ou cdigo incompatvel com
determinados navegadores.
Voc tambm pode recolher o cdigo mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh)
enquanto clica em um dos botes de recolhimento, ou clicando no boto Recolher seleo na Barra de ferramentas de codificao.
1. Selecione algum cdigo.
2. Selecione Editar > Recolhimento de cdigo e selecione qualquer uma das opes.
Windows
Macintosh
Recolher seleo
Control+Shift+C
Command+Shift+C
Control+Alt+C
Command+Alt+C
Expandir seleo
Control+Shift+E
Command+Shift+E
Control+Shift+J
Command+Shift+J
Control+Alt+J
Command+Alt+J
Expandir tudo
Control+Alt+E
Command+Alt+E
Para o incio
Para o incio
O Dreamweaver permite criar e editar visualmente pginas da Web sem que voc precise se preocupar com o cdigo-fonte subjacente. No
entanto, haver momentos em que provavelmente ser necessrio editar o cdigo para ter maior controle ou para solucionar problemas da
pgina da Web. O Dreamweaver permite que voc edite algum cdigo enquanto est trabalhando na Visualizao de design.
Esta seo foi projetada para pessoas que preferem trabalhar na Visualizao de design, mas que tambm desejam acessar rapidamente o
cdigo.
Para o incio
Se voc selecionar um objeto na Visualizao de design que contm tags-filha, por exemplo, uma tabela HTML, poder selecionar rapidamente a
primeira tag-filha desse objeto clicando em Editar > Selecionar filho.
Nota: Esse comando s estar ativado na Visualizao de design.
Por exemplo, a tag <table> normalmente tem tags-filha <tr>. Se voc selecionar uma tag <table> no seletor de tags, poder selecionar a primeira
linha na tabela clicando em Editar > Selecionar filho. O Dreamweaver selecionar a primeira tag <tr> no seletor de tags. Como a tag <tr> possui
tags-filha, chamadas tags <td>, se voc clicar novamente em Editar > Selecionar filho, a primeira clula da tabela ser selecionada.
Para o incio
Voc pode usar o Inspetor de propriedades para inspecionar e editar os atributos de texto ou de objetos na pgina. As propriedades mostradas
no Inspetor de propriedades geralmente correspondem aos atributos das tags. A alterao de uma propriedade no Inspetor de propriedades
normalmente tem o mesmo efeito que alterar o atributo correspondente na Visualizao de cdigo.
Nota: O Inspetor de tags e o Inspetor de propriedades permitem que voc visualize e edite os atributos de uma tag. O Inspetor de tags permite
que voc visualize e edite cada atributo associado a uma tag especfica. O Inspetor de propriedades mostra somente os atributos mais comuns,
mas fornece um conjunto mais sofisticado de controles para alterar os valores desses atributos, e permite editar determinados objetos (como
colunas de tabela) que no correspondem a tags especficas.
1. Clique no texto ou selecione um objeto na pgina.
O Inspetor de propriedades do texto ou objeto aparece abaixo da janela Documento. Se o Inspetor de propriedades no estiver visvel,
selecione Janela > Propriedades.
2. Faa as alteraes nos atributos no Inspetor de propriedades.
Para o incio
Use o Inspetor de propriedades para inspecionar e modificar o markup do ColdFusion na Visualizao de design.
1. No Inspetor de propriedades, clique no boto Atributos para editar os atributos da tag ou adicionar novos.
2. Se a tag tiver contedo entre suas tags de abertura e finalizao, clique no boto Contedo para editar o contedo.
O boto Contedo aparecer somente se a tag selecionada no for uma tag vazia (ou seja, se ela contiver uma tag de abertura e uma tag
de finalizao).
3. Se a tag contiver uma expresso condicional, faa as alteraes nela na caixa Expresso.
Para o incio
Use o Inspetor de tags para editar ou adicionar atributos e valores de atributos. O Inspetor de tags permite editar tags e objetos usando uma folha
de propriedades similar s encontradas em outros ambientes de desenvolvimento integrado (IDEs).
1. Siga um destes procedimentos na janela Documento:
Na Visualizao de cdigo (ou no Inspetor de cdigo), clique em qualquer lugar no nome de uma tag ou em seu contedo.
Na Visualizao de design, selecione um objeto ou selecione uma tag no Seletor de tags.
2. Abra o Inspetor de tags (Janela > Inspetor de tags) e selecione a aba Atributos.
Os atributos da seleo e seus valores atuais aparecem no Inspetor de tags.
3. Execute um dos seguintes procedimentos no Inspetor de tags:
Para visualizar os atributos organizados pela categoria, clique no boto Mostrar visualizao de categoria
Para visualizar os atributos em uma lista alfabtica, clique no boto Mostrar visualizao de lista
Para o incio
Use o Quick Tag Editor para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualizao de design.
Se voc digitar um HTML invlido no Quick Tag Editor, o Dreamweaver tentar corrigi-lo para voc inserindo aspas de fechamento e colchetes
angulares de fechamento quando necessrio.
Para definir as opes do Quick Tag Editor, abra o editor pressionando Control-T (Windows) ou Command-T (Macintosh).
O Quick Tag Editor possui trs modos:
O modo Inserir HTML usado para inserir um novo cdigo HTML.
O modo Editar tag usado para editar uma tag existente.
O modo Colocar tag ao redor usado para colocar uma nova tag ao redor de uma seleo atual.
Nota: O modo em que o Quick Tag Editor aberto depende da seleo atual na Visualizao de design.
Nos trs modos, o procedimento bsico para uso do Quick Tag Editor o mesmo: abra o editor, digite ou edite tags e atributos, e feche o
editor.
Voc pode percorrer os trs modos pressionando Control+T (Windows) ou Command+T (Macintosh) enquanto o Quick Tag Editor est ativo.
Para o incio
Para o incio
O Quick Tag Editor inclui um menu de dicas de atributos que lista todos os atributos vlidos da tag que voc est editando ou inserindo.
Voc tambm pode desativar o menu de dicas ou ajustar o atraso antes que o menu seja exibido no Quick Tag Editor.
Para ver um menu de dicas que lista os atributos vlidos para uma tag, faa uma pausa rpida enquanto edita um nome de atributo no Quick Tag
Editor. Um menu de dicas exibido, listando todos os atributos vlidos para a tag que voc est editando.
Da mesma forma, para ver um menu de dicas que lista nomes de tag vlidos, faa uma pausa enquanto digita ou edita um nome de tag no Quick
Tag Editor.
Nota: As preferncias de dicas de cdigo do Quick Tag Editor so controladas pelas preferncias normais de dicas de cdigo. Para obter mais
informaes, consulte Definir preferncias de dicas de cdigo.
3. Para fechar o menu de dicas sem inserir um item, pressione Escape ou continue digitando.
Para o incio
Voc pode usar o seletor de tags para selecionar, editar ou remover tags sem sair da Visualizao de design. O seletor de tags est localizado
na barra de status, na parte inferior da janela Documento, e mostra uma srie de tags:
Para o incio
Voc pode trabalhar com JavaScripts e VBScripts do cliente tanto na Visualizao de cdigo quanto na Visualizao de design, da seguinte
maneira:
Grave um script JavaScript ou VBScript para a pgina sem sair da Visualizao de design.
Crie um link no documento para um arquivo de script externo sem sair da Visualizao de design.
Edite um script sem sair da Visualizao de design.
Antes de iniciar, selecione Exibir > Auxlios visuais > Elementos invisveis para garantir que os marcadores de script aparecero na pgina.
Edio de um script
1. Selecione o marcador de script.
2. No Inspetor de propriedades, clique no boto Editar.
O script exibido na caixa de dilogo Propriedades do script.
Se voc estiver vinculado a um arquivo de script externo, o arquivo ser aberto na Visualizao de cdigo, na qual voc poder fazer as
edies.
Nota: Se houver cdigo entre as tags de script, a caixa de dilogo Propriedades do script ser aberta, mesmo se tambm houver um link
para um arquivo de script externo.
3. Na caixa Linguagem, especifique JavaScript ou VBScript como linguagem do script.
4. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor.
5. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente.
Clique no cone de pasta
Para o incio
1. No Inspetor de propriedades, selecione a linguagem de script no menu pop-up Linguagem ou digite um nome de linguagem na caixa
Linguagem.
Nota: Se voc estiver usando JavaScript e no tiver certeza da verso, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2.
2. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor.
3. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. Clique no cone de pasta
arquivo ou digite o caminho.
para selecionar o
Para o incio
Voc pode anexar facilmente comportamentos JavaScript (no lado do cliente) nos elementos de pgina, usando a aba Comportamentos do
Inspetor de tags. Para obter mais informaes, consulte Aplicao de comportamentos internos do JavaScript.
Mais tpicos da Ajuda
Para o incio
Para o incio
Para o incio
1. Abra uma pgina HTML que contm CSS incorporada no cabealho do documento.
2. Selecione qualquer parte do cdigo CSS.
3. Selecione Comandos > Aplicar formatao de origem seleo.
As opes de formatao definidas nas preferncias de formatao do cdigo CSS so aplicadas a todas as regras CSS apenas no
cabealho do documento.
Nota: Voc pode selecionar Comandos > Aplicar formatao de origem para formatar o documento inteiro de acordo com as preferncias
de formatao de cdigo especificadas.
Mais tpicos da Ajuda
Para o incio
Alm dos recursos de edio de texto, o Adobe Dreamweaver oferece vrios recursos, como dicas de cdigo, para ajudar voc a codificar nas
seguintes linguagens:
HTML
XHTML
CSS
JavaScript
Linguagem de markup do ColdFusion (CFML)
VBScript (para ASP)
C# e Visual Basic (para ASP.NET)
JSP
PHP
No h suporte para outras linguagens, como Perl, nos recursos de codificao especficos de linguagem no Dreamweaver; por exemplo, voc
pode criar e editar arquivos Perl, mas as dicas de cdigo no se aplicam a essa linguagem.
Markup invlido
Para o incio
Se o documento contiver um cdigo invlido, o Dreamweaver exibir esse cdigo na Visualizao de design e, opcionalmente, o realar na
Visualizao de cdigo. Se voc selecionar o cdigo na visualizao, o Inspetor de propriedades exibir as informaes sobre por que ele
invlido e como corrigi-lo.
Nota: A opo para realar cdigos invlidos na Visualizao de cdigo fica desativada por padro. Para acion-la, alterne para a Visualizao
de cdigo (Exibir > Cdigo) e depois selecione Visualizao > Opes da visualizao de cdigo > Realar cdigo invlido.
Voc tambm pode especificar preferncias para regravar automaticamente vrios tipos de cdigo invlido ao abrir um documento.
Para o incio
Voc pode definir opes que instruam o Dreamweaver limpar automaticamente o cdigo manuscrito de acordo com os critrios especificados.
No entanto, o cdigo nunca regravado, a menos que as opes de regravao de cdigo sejam ativadas ou que voc execute uma ao que
altere o cdigo. Por exemplo, o Dreamweaver no altera o espao em branco nem altera as maisculas e minsculas dos atributos, a menos que
voc use o comando Aplicar Formatao de Origem.
Algumas dessas opes de regravao de cdigo so ativadas por padro.
Os recursos de Roundtrip HTML do Dreamweaver permitem que voc mova os documentos para frente e para trs entre um editor HTML
baseado em texto e o Dreamweaver com pouco ou nenhum efeito no contedo e na estrutura do cdigo-fonte HTML original do documento.
Esses recursos incluem:
Voc pode usar um editor de texto de terceiros para editar o documento atual.
Por padro, o Dreamweaver no altera o cdigo criado ou editado em outros editores HTML, mesmo se o cdigo for invlido, a menos que
voc ative as opes de regravao de cdigo.
O Dreamweaver no altera tags que no reconhea incluindo as tags XML porque ele no tem critrios que possa usar para julg-las.
Se uma tag no reconhecida sobrepuser outra tag (por exemplo, <MyNewTag><em>text</MyNewTag></em>), o Dreamweaver a marcar
como um erro, mas no regravar o cdigo.
Se desejar, defina o Dreamweaver para realar o cdigo invlido na Visualizao de cdigo (em amarelo). Quando voc selecionar uma
seo realada, o Inspetor de propriedades exibir as informaes sobre como corrigir o erro.
Para o incio
Cdigo XHTML
O Dreamweaver gera o novo cdigo XHTML e limpa o cdigo XHTML existente de uma forma que atenda maioria dos requisitos XHTML. As
ferramentas que voc precisa para atender a alguns requisitos XHTML restantes tambm so fornecidos.
Nota: Alguns requisitos tambm so necessrios em vrias verses HTML.
A tabela a seguir descreve os requisitos XHTML que o Dreamweaver atende automaticamente:
Requisito XHTML
Aes do Dreamweaver
Para o incio
Expresses regulares
As expresses regulares so padres que descrevem combinaes de caracteres em texto. Use-as nas pesquisas de cdigo para descrever
conceitos como linhas que comeam com var e valores de atributo que contm um nmero.
A tabela a seguir lista os caracteres especiais nas expresses regulares, seus significados e exemplos de uso. Para procurar um texto que
contenha um dos caracteres especiais da tabela, aplique o escape ao caractere especial precedendo-o com uma barra invertida. Por exemplo,
para procurar o asterisco real na frase some conditions apply*, o padro de pesquisa pode ter a seguinte aparncia: apply\*. Se voc no aplicar
o escape ao asterisco, encontrar todas as ocorrncias de apply (bem como qualquer ocorrncia de appl, applyy e applyyy), e no apenas
as seguidas por asterisco.
Caractere
Corresponde a
Exemplo
x|y
x ou y
{n}
{n,m}
[abc]
[^abc]
\b
\B
\d
\d corresponde a 3 em C3PO e 2 em
apartment 2G
\D
\D corresponde a S em 900S e Q em
Q45
\f
Feed de formulrio.
\n
Feed de linha.
\r
Retorno de carro.
\s
\S
\t
Uma tabulao.
\w
\W
Use parnteses para executar agrupamentos na expresso regular que ser referenciada posteriormente. Em seguida, use $1, $2, $3 e assim
sucessivamente, no campo Substituir por para se referir ao primeiro, segundo, terceiro e subsequentes agrupamentos entre parnteses.
Nota: Na caixa Procurar por, para se referir a um agrupamento entre parnteses anterior na expresso regular, use \1, \2, \3 e assim por diante,
em vez de $1, $2, $3.
Por exemplo, a procura por (\d+)\/(\d+)\/(\d+) e sua substituio por $2/$1/$3 trocar o dia e o ms em uma data separada por barras,
convertendo entre datas em estilo americana e em estilo europeu.
Para o incio
Quando voc desenvolver uma pgina dinmica e selecionar um comportamento de servidor no painel Comportamentos de servidor, o
Dreamweaver inserir um ou mais blocos de cdigo na pgina para fazer com que o comportamento de servidor funcione.
Se voc alterar manualmente o cdigo em um bloco de cdigos, no poder usar mais painis como Ligaes e Comportamentos de servidor. O
Dreamweaver procura padres especficos no cdigo de pgina para detectar comportamentos de servidor e exibi-los no painel Comportamentos
de servidor. Se voc alterar o cdigo em um bloco de cdigos de qualquer forma, o Dreamweaver no poder mais detectar o comportamento do
servidor e exibi-lo no painel Comportamentos de servidor. No entanto, o comportamento do servidor ainda existir na pgina e voc no poder
edit-lo no ambiente de codificao do Dreamweaver.
Mais tpicos da Ajuda
Para o incio
Uma biblioteca de tags, no Dreamweaver, um conjunto de tags de um tipo especfico, juntamente com informaes sobre como o Dreamweaver
deve formatar as tags. As bibliotecas de tags fornecem informaes sobre as tags que o Dreamweaver usa para dicas de cdigo, verificaes de
navegador de destino, Seletor de tags e outros recursos de codificao. Com o Editor de bibliotecas de tags, voc pode adicionar e excluir
bibliotecas de tags, tags, atributos e valores de atributo, definir propriedades para uma biblioteca de tags, incluindo o formato (para facilitar a
identificao do cdigo), e editar tags e atributos.
Para o incio
1. Selecione Editar > Bibliotecas de tags para abrir o Editor de bibliotecas de tags.
A caixa de dilogo do Editor de bibliotecas de tags exibida. (As opes desta caixa de dilogo mudam de acordo com a tag selecionada.)
2. Fecha o Editor de bibliotecas de tags da seguinte maneira:
Para salvar as alteraes, clique em OK.
Para fechar o editor sem salvar as alteraes, clique em Cancelar.
Nota: Quando voc clica em Cancelar, todas as alteraes efetuadas no Editor de bibliotecas de tags so descartadas. Se voc
excluiu uma tag ou uma biblioteca de tags, ela ser restaurada.
Para o incio
Voc pode usar o Editor de bibliotecas de tags para adicionar bibliotecas de tags, tags e atributos s bibliotecas de tags no Dreamweaver.
Para o incio
Para o incio
1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags, uma tag ou um atributo na caixa Tags.
2. Clique no boto de subtrao ().
3. Clique em OK para excluir definitivamente o item.
O item removido da caixa Tags.
4. Clique em OK para fechar o Editor de bibliotecas de tags e concluir a excluso.
Mais tpicos da Ajuda
Limpar cdigo
Para o incio
Voc pode remover automaticamente tags vazias, combinar tags font aninhadas e tags, e tambm melhorar a confuso ou ilegibilidade do cdigo
HTML ou XHTML.
Para obter informaes sobre como limpar o HTML gerado em um documento do Microsoft Word, consulte Abertura e edio de documentos
existentes .
1. Abra um documento:
Se o documento estiver em HTML, selecione Comandos > Limpar HTML.
Se o documento estiver em XHTML, selecione Comandos > Limpar XHTML.
Em um documento XHTML, o comando Limpar XHTML corrige erros de sintaxe XHTML, define o uso de maisculas/minsculas dos
atributos de tag para minsculas, e adiciona ou reporta os atributos necessrios ausentes de uma tag, alm de executar operaes de
limpeza de HTML.
2. Na caixa de dilogo exibida, selecione qualquer uma das opes e clique em OK.
Nota: Dependendo do tamanho do documento e do nmero de opes selecionadas, pode levar vrias segundos para que a limpeza seja
concluda.
Remover tags de continer vazias Remove quaisquer tags que no tenham contedo entre elas. Por exemplo, <b></b> e <font
color="#FF0000"></font> so tags vazias, mas a tag <b> em <b>algum texto</b> no.
Remover tags aninhadas redundantes Remove todas as ocorrncias redundantes de uma tag. Por exemplo, no cdigo <b>Isto foi
<b>realmente</b> o que eu quis dizer</b>, as tags b que envolvem a palavra realmente so redundantes e seriam removidas.
Remover comentrio HTML no Dreamweaver Remove todos os comentrios que no foram inseridos pelo Dreamweaver. Por exemplo,
<!--begin body text--> seria removido, mas <!--TemplateBeginEditable name="doctitle"--> no seria, porque ele um comentrio do
Dreamweaver que marca o incio de uma regio editvel em um modelo.
Remover markup especial do Dreamweaver Remove os comentrios que o Dreamweaver adiciona ao cdigo para permitir que os
documentos sejam atualizados automaticamente quando os modelos e itens de biblioteca forem atualizados. Se voc selecionar esta opo
ao limpar o cdigo em um documento baseado em modelo, o documento desanexado do modelo. Para obter mais informaes, consulte
Desanexar um documento de um modelo.
Remover tag(s) especfica(s) Remove as tags especificadas na caixa de texto adjacente. Use esta opo para remover tags
personalizadas inseridas por outros editores visuais e outras tags que no devem aparecer no seu site (por exemplo, blink). Separe vrias
tags usando vrgulas (por exemplo, font,blink).
Combinar tags <font> aninhadas quando possvel Consolida duas ou mais tags font quando elas controlam o mesmo intervalo de texto.
Por exemplo, <font size="7"><font color="#FF0000">big red</font></font> seria alterado para <font size="7" color="#FF0000">big
red</font>.
Mostrar concluso do logon Exibe uma caixa de alerta com detalhes sobre as alteraes feitas no documento assim que a limpeza
concluda.
Para o incio
Voc pode verificar se as tags, os parnteses (( )), as chaves ({ }) e os colchetes ([ ]) na pgina esto balanceados. 'Balanceado' significa que
cada tag, parntese, chave ou colchete de abertura tem um sinal de fechamento correspondente e vice-versa.
Para o incio
O recurso Verificao de compatibilidade do navegador (VCN) ajuda a localizar combinaes de HTML e CSS que podem acionar bugs de
processamento do navegador. Esse recurso tambm testa o cdigo nos documentos para verificar se h alguma propriedade ou valor CSS
incompatvel com os navegadores de destino.
Nota: Esse recurso substitui a antiga Verificao do navegador de destino, mas retm a funcionalidade CSS.
Para o incio
Voc pode definir preferncias para o Validador, os problemas especficos que o Validador deve verificar e os tipos de erros que o Validador
deve reportar.
1. Siga um destes procedimentos:
Em um arquivo XML ou XHTML, selecione Arquivo > Validar > Como XML.
A aba Validao do painel Resultados exibe a mensagem Nenhum erro ou aviso ou lista os erros de sintaxe localizados.
2. Clique duas vezes em uma mensagem de erro para realar o erro no documento.
3. Para salvar o relatrio como um arquivo XML, clique no boto Salvar relatrio.
4. Para visualizar o relatrio no navegador principal (que permitir a impresso do relatrio), clique no boto Procurar relatrio.
Para o incio
O Dreamweaver CS5.5 e posterior ajuda na criao de pginas da Web compatveis com os padres com o suporte incorporado do validador de
W3C. O validador de W3C valida os documentos em HTML de acordo com os padres de XHTML ou HTML. Voc pode validar tanto documentos
abertos, como arquivos postados em um servidor dinmico.
Use o relatrio gerado depois da validao para corrigir erros em seu arquivo.
Nota: O recurso validador W3C est disponvel no Dreamweaver CS5.5 e posterior. A verso anterior do recurso, disponvel no Dreamweaver
CS4, ficou obsoleta para o Dreamweaver CS5. Consulte a documentao do Dreamweaver CS4 para obter mais informaes sobre a verso
anterior do recurso.
Para o incio
O recurso Validar tags est obsoleto no Dreamweaver CS5. Entretanto, o Dreamweaver ainda oferece suporte para validadores de cdigo
externos que voc instala como extenses. Quando voc instala uma extenso externa de validador, o Dreamweaver lista suas preferncias na
categoria Validador da caixa de dilogo Preferncias.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Na lista Categoria esquerda, selecione Validador.
3. Selecione as bibliotecas de tags que sero usadas na validao.
Voc no pode selecionar vrias verses da mesma biblioteca de tags ou linguagem; por exemplo, se voc selecionar HTML 4.0, no
poder selecionar tambm HTML 3.2 ou HTML 2.0. Selecione a verso mais antiga que deseja usar na validao; por exemplo, se um
documento contiver um cdigo HTML 2.0 vlido, ele tambm ser vlido para HTML 4.0.
4. Clique em Opes e defina as opes para essas bibliotecas.
5. Selecione as opes de exibio dos tipos de erros e avisos que devero estar includos no relatrio do Validador.
6. Selecione os itens que o Validador deve verificar:
Aspas no texto Indica que o Dreamweaver deve avisar voc sobre cada uso de aspas no texto do documento. Voc deve usar a entidade
" em vez das aspas no texto dos documentos HTML.
Entidades no texto Indica que o Dreamweaver deve recomendar a alterao de determinados caracteres (como E comercial (&), sinal de
menor que (<) e sinal de maior que (>)) para seus equivalentes da entidade HTML.
7. Clique em OK para fechar a caixa de dilogo Opes do validador e, em seguida, clique em OK novamente para definir as preferncias.
Para o incio
Ao criar uma pgina, voc pode torn-la compatvel com XHTML. Tambm possvel tornar um documento HTML compatvel com XHTML.
clique em Criar.
Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no
menu pop-up.
Nota: Nem todos os tipos de documentos podem se tornar compatveis com XHTML.
Para o incio
Se voc for um desenvolvedor do ColdFusion que usa o ColdFusion como servidor de teste do Dreamweaver, poder visualizar as informaes
de depurao desse aplicativo sem sair do Dreamweaver.
Nota: No h suporte para esse recurso no Macintosh. Os desenvolvedores do Macintosh podem usar o recurso Visualizar no navegador (F12)
para abrir uma pgina do ColdFusion em um navegador separado. Se a pgina contiver erros, as informaes sobre as possveis causas dos
erros aparecero na parte inferior da pgina.
Se voc estiver executando o ColdFusion MX 6.1 ou anterior, verifique se as configuraes de depurao esto ativadas no Administrador do
ColdFusion antes de comear a depurao. Se voc estiver executando o ColdFusion MX 7 ou posterior, o Dreamweaver ativar as
configuraes para voc.
Alm disso, verifique se o servidor de teste do Dreamweaver est executando o ColdFusion. Para obter mais informaes, consulte Configurao
de um servidor de teste.
Para garantir que as informaes de depurao sero atualizadas cada vez que uma pgina for exibida no navegador interno, assegure que o
Internet Explorer procurar verses mais recentes do arquivo cada vez que ele for solicitado. No Internet Explorer, selecione Ferramentas >
Opes da Internet, selecione a aba Geral e clique no boto Configuraes na rea Arquivos de Internet Temporrios. Na caixa de dilogo
Configuraes, selecione a opo A cada visita pgina.
1. Abra a pgina do ColdFusion no Dreamweaver.
2. Clique no cone Depurao de servidor
O Dreamweaver solicita a pgina do servidor ColdFusion e a exibe em uma janela interna do navegador Internet Explorer. Se a pgina
contiver erros, as possveis causas dos erros aparecero na parte inferior da pgina.
Ao mesmo tempo, o painel Depurao de servidor ser aberto. O painel fornece um grande volume de informaes teis, como todas as
pginas que o servidor executou para processar a pgina, todas as consultas SQL executadas na pgina e todas as variveis de servidor e
seus respectivos valores, se houver algum. O painel tambm fornece um resumo dos tempos de execuo.
3. Se a categoria Excees aparecer no painel Depurao de servidor, clique no cone de adio (+) para expandir a categoria.
A categoria Excees aparecer se o servidor detectar um ou mais problemas na pgina. Expanda a categoria para obter mais informaes
sobre o problema.
4. Alterne de volta para a Visualizao de cdigo (Visualizao > Cdigo) ou para a Visualizao de design (Visualizao > Design) e corrija o
erro.
5. Salve o arquivo e clique novamente no cone Depurao do servidor.
O Dreamweaver processa a pgina no navegador interno novamente e atualiza o painel Depurao de servidor. Se no houver mais
problemas na pgina, a categoria Excees no reaparecer no painel.
6. Para sair do modo de depurao, alterne para Visualizao de cdigo (Exibir > Cdigo) ou Visualizao de design (Exibir > Design).
Mais tpicos da Ajuda
Para o incio
Voc pode definir as preferncias de codificao como formatao e cores de cdigo, entre outros, para atender s suas necessidades
especficas.
Nota: Para definir preferncias avanadas, use o Editor de bibliotecas de tags (consulte Gerenciamento de bibliotecas de tags).
Para o incio
Voc pode definir a quebra automtica de linha, exibir nmeros de linha para o cdigo, realar o cdigo invlido, definir a cor da sintaxe dos
elementos de cdigo, definir o recuo e exibir caracteres ocultos no menu Exibir > Opes de visualizao de cdigo.
1. Visualize um documento na Visualizao de cdigo ou no Inspetor de cdigo.
2. Siga um destes procedimentos:
Selecione Exibir > Opes de visualizao de cdigo
Clique no boto Opes de visualizao
cdigo.
Para o incio
Voc pode alterar a aparncia do cdigo especificando preferncias de formatao, como recuo, tamanho da linha e uso de
maisculas/minsculas dos nomes de tag e atributo.
Todas as opes de formatao de cdigo, exceto a opo Ignorar maiscula/minscula de, sero aplicadas somente aos novos documentos ou
s adies a documentos criadas subsequentemente.
Para reformatar documentos HTML existentes, abra o documento e selecione Comandos > Aplicar Formatao de Origem.
1. Selecione Editar > Preferncias.
2. Selecione Formato do Cdigo na lista Categoria esquerda.
3. Defina uma das seguintes opes:
Recuo Indica se o cdigo gerado pelo Dreamweaver deve ser recuado (de acordo com as regras de recuo especificadas nessas
preferncias) ou no.
Nota: A maioria das opes de recuo nesta caixa de dilogo se aplica somente ao cdigo gerado pelo Dreamweaver, e no ao cdigo
digitado. Para fazer com que cada nova linha do cdigo digitado recue no mesmo nvel da linha anterior, selecione a opo Exibir > Recuo
automtico das opes de visualizao de cdigo. Para obter mais informaes, consulte Definio da aparncia do cdigo.
Com (Caixa de texto e menu pop-up) Especifica quantos espaos ou tabulaes o Dreamweaver deve usar para recuar o cdigo gerado.
Por exemplo, se voc digitar 3 na caixa e selecionar Tabulaes no menu pop-up, o cdigo gerado pelo Dreamweaver ser recuado por
meio de trs caracteres de tabulao para cada nvel de recuo.
Tamanho da tabulao Determina o tamanho de cada caractere de tabulao na Visualizao de cdigo. Por exemplo, se a opo
Tamanho da tabulao for definida como 4, cada tabulao ser exibida na Visualizao de cdigo como um espao em branco de quatro
caracteres. Se, alm disso, a opo Recuar com for definida como 3 Tabulaes, o cdigo gerado pelo Dreamweaver ser recuado usando
trs caracteres de tabulao para cada nvel de recuo, que aparece na Visualizao de cdigo como um espao em branco de doze
caracteres.
Nota: O Dreamweaver aplica o recuo usando espaos ou tabulaes. Ele no converte uma srie de espaos em uma tabulao ao inserir
cdigo.
Tipo de quebra de linha Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site remoto. A escolha do tipo
corretor de caracteres de quebra de linha garante que o cdigo-fonte HTML aparecer corretamente quando visualizado no servidor
remoto. Essa configurao tambm ser til que voc estiver trabalhando com um editor de texto externo que reconhea determinados
tipos de quebras de linha. Por exemplo, use CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o
SimpleText for o editor externo.
Nota: No caso dos servidores conectados atravs do FTP, esta opo se aplica somente ao modo de transferncia binrio. O modo de
transferncia ASCII do Dreamweaver ignora esta opo. Se voc baixar os arquivos usando o modo ASCII, o Dreamweaver definir as
quebras de linha com base no sistema operacional do seu computador. Se voc carregar os arquivos usando o modo ASCII, as quebras de
linha sero definidas como CR LF.
Padro de maisc./minsc. da tag e Padro de maisc./minsc. do atributo Controla o uso de maisculas/minsculas dos nomes de
tag e atributo. Estas opes se aplicam a tags e atributos inseridos ou editados na Visualizao de design, mas no se aplicam a tags e
atributos digitados diretamente na Visualizao de cdigo ou a tags e atributos j presentes em um documento quando estes so abertos (a
menos que voc tambm selecione uma ou ambas as opes Ignorar maiscula/minscula de:).
Nota: Essas preferncias se aplicam somente a pginas HTML. O Dreamweaver as ignora em pginas XHTML porque as tags e os
atributos em maisculas so XHTML invlidos.
Ignorar maiscula/minscula de: Tags e Atributos Especifica se as opes de maisculas/minsculas especificadas sero sempre
foradas, inclusive quando voc abrir um documento HTML existente. Quando voc selecionar uma dessas opes e clicar em OK para
ignorar a caixa de dilogo, todas as tags ou atributos do documento atual sero imediatamente convertidos no uso de
maisculas/minsculas especificado, assim como todas as tags ou atributos de cada documento que voc abrir desse momento em diante
(at voc desmarcar esta opo novamente). As tags ou os atributos digitados na Visualizao de cdigo e no Quick Tag Editor tambm
so convertidos no uso de maisculas/minsculas, bem como as tags ou os atributos que voc insere usando o painel Inserir. Por exemplo,
se voc deseja que os nomes de tag sejam sempre convertidos em minsculas, especifique minsculas na opo Padro de
maisc./minsc. da tag e selecione a opo Ignorar maiscula/minscula de: Tags. Quando voc abrir um documento que contenha nomes
de tag em maisculas, o Dreamweaver os converter em minsculas.
Nota: As verses antigas do HTML permitiam nomes de tag e atributo em maisculas ou minsculas, mas o XHTML requer minsculas
nos nomes de tag e atributo. A Web est adotando XHTML; portanto, geralmente melhor usar nomes de tag e atributo em minsculas.
Tag TD: No incluir quebra de linha na tag TD Lida com um problema de processamento que ocorre em alguns navegadores antigos
quando h espao em branco ou quebras de linha imediatamente aps uma tag <td> ou imediatamente antes de uma tag </td>. Quando
voc seleciona esta opo, o Dreamweaver no grava quebras de linha depois ou antes da tag <td>, mesmo se a formatao na Biblioteca
de tags indicar que a quebra de linha deve existir.
Formatao avanada Permite definir opes de formatao do cdigo Folhas de estilo em cascata (CSS) e das tags e atributos
individuais no Editor de biblioteca de tags.
Caractere de espao em branco (Apenas verso em japons) Permite selecionar ou espao Zenkaku para cdigo HTML. O espao em
branco selecionado nesta opo ser usado para tags vazias durante a criao de uma tabela e quando a opo Permitir vrios espaos
consecutivos estiver ativada nas pginas de codificao em japons.
Para o incio
Use as preferncias de regravao de cdigo a fim de especificar como e se o Dreamweaver modificar o cdigo enquanto os documentos so
abertos, ao copiar e colar elementos de formulrio, e ao digitar valores de atributo e URLs usando ferramentas como o Inspetor de propriedades.
Essas preferncia no tm efeito quando voc edita HTML ou scripts na Visualizao de cdigo.
Se voc desativar as opes de regravao, os itens de markup invlidos sero exibidos na janela Documento para o HTML que seria regravado.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Regravao de cdigo na lista Categoria esquerda.
3. Defina uma das seguintes opes:
Corrigir tags abertas e aninhadas incorretamente Regrava tags de sobreposio. Por exemplo, <b><i>texto</b></i> regravado como
<b><i>texto</i></b>. Esta opo tambm insere aspas e colchetes de fechamento caso eles estejam ausentes.
Renomear itens de formulrio ao colar Garante que voc no ter nomes duplicados de objetos de formulrio. Esta opo ativada por
padro.
Nota: Diferente das outras opes nesta caixa de dilogo de preferncia, esta opo no se aplica quando voc abre um documento, mas
somente quando voc copia e cola um elemento de formulrio.
Remover tags de finalizao adicionais Exclui tags de finalizao que no possuem uma tag de abertura correspondente.
Avisar ao corrigir ou remover tags Exibe um resumo do HTML tecnicamente invlido que o Dreamweaver tentou corrigir. O resumo
indica o local do problema (usando nmeros de linha e coluna) para que voc possa localizar a correo e garantir que ela est sendo
processado conforme esperado.
Nunca regravar cdigo: Em arquivos com extenses Impede que o Dreamweaver regrave cdigo em arquivos com as extenses
especificadas. Esta opo particularmente til para arquivos que contenham tags de terceiros.
Codificar <, >, & e " em valores de atributo usando & Garante que os valores de atributo digitados ou editados usando ferramentas do
Dreamweaver como o Inspetor de propriedades contero apenas caracteres legais. Esta opo ativada por padro.
Nota: Esta opo e as seguintes no se aplicam s URLs digitadas na Visualizao de cdigo. Alm disso, elas no ocasionam a
alterao do cdigo j existente em um arquivo.
No codificar caracteres especiais Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais. Esta opo
ativada por padro.
Codificar caracteres especiais em URLs utilizando &# Garante que, ao digitar ou editar URLs usando ferramentas do Dreamweaver
como o Inspetor de propriedades, essas URLs contero somente caracteres legais.
Codificar caracteres especiais em URLs utilizando % Opera da mesma maneira que a opo anterior, mas usa um mtodo diferente de
codificao de caracteres especiais. Esse mtodo de codificao (atravs do sinal de porcentagem) pode ser mais compatvel com os
navegadores antigos, mas no funciona bem com os caracteres de alguns idiomas.
Para o incio
Use as preferncias de codificao por cor a fim de especificar cores para as categorias gerais de tags e elementos de cdigo, como tags
relacionadas a formulrio ou identificadores JavaScript. Para definir preferncias de cor para uma tag especfica, edite a definio da tag no
Editor de bibliotecas de tags.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Codificao por cores na lista Categoria esquerda.
3. Selecione um tipo de documento da lista Tipos de documentos. Quaisquer edies que voc fizer s preferncias de codificao por cores
afetar todos os documentos desse tipo.
4. Clique no boto Editar esquema de cores.
5. Na caixa de dilogo Editar esquema de cores, selecione um elemento de cdigo na lista Estilos para e defina a cor do texto, a cor do fundo
e (opcional) o estilo (negrito, itlico ou sublinhado). O cdigo de amostra no painel de visualizao alterado para que corresponda s
novas cores e estilos.
Clique em OK para salvar as alteraes e feche a caixa de dilogo Editar esquema de cores.
6. Faa quaisquer outras selees necessrias nas preferncias de codificao por cores e clique em OK.
Fundo padro define a cor de fundo padro para a Visualizao de cdigo e o Inspetor de cdigo.
Caracteres ocultos define a cor dos caracteres ocultos
Plano de fundo do Cdigo ativo define a cor do fundo para a Visualizao de cdigo ativo. A cor padro amarelo.
Alteraes no Cdigo ativo define a cor de destaque do cdigo que alterado na Visualizao de cdigo ativo. A cor padro rosa.
Plano de fundo de somente leitura define a cor de fundo para o texto somente leitura.
Para o incio
Voc pode especificar um editor externo para a edio de arquivos com extenses especficas. Por exemplo, possvel iniciar um editor de texto
como BBEdit, Bloco de Notas ou TextEdit no Dreamweaver a fim de editar arquivos JavaScript (JS).
Voc pode atribuir editores externos diferentes para extenses diferentes.
Para o incio
Voc pode adaptar o ambiente de codificao no Dreamweaver para que atenda s suas necessidades de trabalho. Por exemplo, voc pode
alterar o modo de exibio do cdigo, configurar atalhos de teclado diferentes ou importar e usar sua biblioteca de tags favorita.
O Dreamweaver vem com vrios layouts de reas de trabalho desenvolvidos para obter a experincia de codificao ideal. No alternador de rea
de trabalho da Barra de aplicativos, voc pode selecionar as reas de trabalho Desenvolvedor de aplicativo, Desenvolvedor de aplicativo Plus,
Codificador e reas de trabalho do Codificador Plus. Todas essas reas de trabalho mostram, por padro, a Visualizao de cdigo (na janela
Documento inteira ou nas visualizaes de cdigo e de design) e tm painis encaixados no lado esquerdo da tela. Todos, menos o
Desenvolvedor de aplicativo Plus, eliminam o Inspetor de propriedades da visualizao padro.
Se nenhuma das reas de trabalho predefinidas oferecer exatamente o que voc precisa, possvel personalizar seu prprio layout de rea de
trabalho, abrindo e encaixando painis no local desejado e, em seguida, salvando a rea de trabalho como rea personalizada.
Visualizao de cdigo
Para o incio
Voc pode visualizar o cdigo-fonte do documento atual de vrias maneiras: exibindo-o na janela Documento atravs da ativao da Visualizao
de cdigo, dividindo a janela Documento para exibir a pgina e seu cdigo associado ou trabalhando no Inspetor de cdigo em uma janela de
codificao separada. O Inspetor de cdigo funciona exatamente como a Visualizao de cdigo. Considere-o uma Visualizao de cdigo do
documento atual que pode ser desanexada.
Para o incio
Voc pode usar seus atalhos de teclado favoritos no Dreamweaver. Se estiver acostumado a usar atalhos de teclado especficos, por exemplo,
Shift+Enter para adicionar uma quebra de linha ou Control+G para ir a uma posio especfica no cdigo, voc poder adicion-los em
Dreamweaver usando o Editor de atalhos de teclado.
Para obter instrues, consulte Personalizar atalhos de teclado.
Para o incio
Quando voc abre um tipo de arquivo que normalmente no contm nenhum HTML (por exemplo, um arquivo JavaScript), o arquivo aberto na
Visualizao de cdigo (ou no Inspetor de cdigo), e no na Visualizao de cdigo. possvel especificar quais tipos de arquivo sero abertos
na Visualizao de cdigo.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Tipos de arquivos/editores na lista Categoria esquerda.
3. Na caixa Abrir na Visualizao de cdigo, adicione a extenso do tipo de arquivo que voc deseja abrir automaticamente na Visualizao
de cdigo.
Digite um espao entre as extenses de nome de arquivo. possvel adicionar quantas extenses desejar.
Mais tpicos da Ajuda
Sintaxe do modelo
Regras gerais de sintaxe
Tags de modelo
Tags de ocorrncia
Verificar sintaxe de modelo
Para o incio
O Dreamweaver usa tags de comentrio HTML para especificar regies em modelos e documentos baseados em modelo, de forma que os
documentos baseados em modelo permanecem arquivos HTML vlidos. Quando voc insere um objeto de modelo, as tags de modelo so
inseridas no cdigo.
Estas so regras gerais de sintaxe:
Voc sempre pode substituir qualquer espao em branco (espaos, abas, quebras de linha) que aparecer. O espao em branco
obrigatrio, exceto no incio ou no fim de um comentrio.
Os atributos podem ser especificados em qualquer ordem. Por exemplo, em um TemplateParam, possvel especificar o tipo antes do
nome.
Os nomes de atributo e comentrio diferenciam maisculas e minsculas.
Todos os atributos devem estar entre aspas. Podem ser usadas aspas simples ou duplas.
Tags de modelo
Para o incio
Tags de ocorrncia
O Dreamweaver usa as seguintes tags de ocorrncia:
<!-<!-<!-<!-<!-<!--
Para o incio
Para o incio
O Dreamweaver verifica a sintaxe quando voc salva o modelo, mas voc pode verificar manualmente a sintaxe do modelo antes de salvar o
modelo. Por exemplo, se voc adicionar uma expresso ou um parmetro de modelo na visualizao de cdigo, poder verificar se o cdigo
segue a sintaxe correta.
1. Abra o documento a ser verificado na janela Documento.
2. Selecione Modificar > Modelos > Verificar sintaxe de modelo.
exibida uma mensagem de erro se a sintaxe estiver mal formulada. A mensagem de erro descreve o erro e refere-se linha especfica do
cdigo em que est o erro.
Mais tpicos da Ajuda
Dicas de cdigo
Para o incio
O recurso de dicas de cdigo ajuda a inserir e editar o cdigo rapidamente e sem erros. Conforme voc digita os caracteres na Visualizao de
cdigo, voc v uma lista de candidatos que completam automaticamente a sua entrada. Por exemplo, ao digitar o primeiro caractere de uma tag,
atributo ou nome de propriedade CSS, voc v uma lista de opes que comeam com esses caracteres. Esse recurso simplifica a insero e
edio de cdigos. Voc tambm pode usar esse recurso para ver os atributos disponveis para uma tag, os parmetros disponveis para uma
funo ou os mtodos disponveis para um objeto.
As dicas de cdigo ficam disponveis para vrios tipos de cdigo. Quando voc digita o caractere inicial de um tipo de cdigo em particular, voc
v uma lista de candidatos apropriados. Por exemplo, para exibir uma lista de dicas de cdigos para nomes de tags HTML, digite um colchete
angular direito (<). De forma similar, para exibir dicas de cdigo JavaScript, digite um ponto (operador ponto) aps um objeto.
Para obter os melhores resultados, especialmente ao usar as dicas de cdigos para funes e objetos, defina a opo Atraso na caixa de
dilogo de preferncias Dicas de cdigo para 0 segundos.
O recurso de dica de cdigo tambm reconhece classes personalizadas de JavaScript que no foram compiladas na linguagem. Voc mesmo
pode gravar essas classes personalizadas e adicion-las atravs das bibliotecas de terceiros, como Prototype.
A lista de dicas de cdigo desaparece quando voc pressiona Backspace (Windows) ou Delete (Macintosh).
Para assistir a um tutorial em vdeo sobre dicas de cdigos, consulte www.adobe.com/go/lrvid4048_dw_br.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no Dreamweaver, consulte
www.adobe.com/go/dw10javascript_br.
Para o incio
O Dreamweaver CS5 permite aos desenvolvedores trabalhar com Joomla, Drupal, Wordpress ou outras estruturas e exibir dicas de cdigo PHP
quando eles gravam na Visualizao de cdigo. Para exibir essas dicas de cdigo, primeiro necessrio criar um arquivo de configurao usando
a caixa de dilogo Dicas de cdigo especficas do site. A configurao informa ao Dreamweaver o local para procurar as dicas de cdigo
especficas ao seu site.
Para assistir a um tutorial em vdeo sobre como trabalhar com dicas de cdigo especficas do site, consulte
www.adobe.com/go/learn_dw_comm13_br.
Clique no boto Extenses para abrir a caixa de dilogo Localizar extenses em que possvel especificar as extenses de arquivo que
voc deseja incluir no rastreamento de um arquivo ou pasta particular.
Para o incio
Para o incio
Para o incio
Use o Seletor de tags para inserir na pgina qualquer tag das bibliotecas de tags do Dreamweaver (que incluem bibliotecas de tags do
ColdFusion e ASP.NET).
1. Posicione o ponto de insero no cdigo, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) e selecione Inserir tag.
O Seletor de tags exibido. O painel esquerdo contm uma lista de bibliotecas de tags com suporte, enquanto o painel direito mostra as
tags armazenadas na pasta da biblioteca de tags selecionada.
2. Selecione uma categoria de tags na biblioteca de tags ou expanda a categoria e selecione uma subcategoria.
3. Selecione uma tag no painel direito.
4. Para visualizar as informaes de sintaxe e uso da tag no Seletor de tags, clique no boto Informaes sobre tag. As informaes sobre a
tag aparecero se estiverem disponveis.
5. Para visualizar as mesmas informaes sobre a tag no painel Referncia, clique no cone <?>. As informaes sobre a tag aparecero se
estiverem disponveis.
6. Para inserir a tag selecionada no cdigo, clique em Inserir.
Se a tag aparecer no painel direito com colchetes angulares (por exemplo, <title></title>), ela no precisar de informaes adicionais e
ser imediatamente inserida no documento no ponto de insero.
Se a tag precisar de informaes adicionais, um editor de tags ser exibido.
7. Se um editor de tags for aberto, digite as informaes adicionais e clique em OK.
8. Clique no boto Fechar.
Para o incio
Um comentrio um texto descritivo que voc insere no cdigo HTML para explicar o cdigo ou fornecer outras informaes. O texto do
comentrio aparece somente na Visualizao de cdigo e no exibido em um navegador.
Para o incio
Para o incio
Para o incio
1. Na Visualizao de cdigo, selecione algum cdigo e clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla
Control enquanto clica (Macintosh).
2. Selecione o submenu Seleo e, em seguida, selecione uma destas opes:
Recolher seleo Recolhe o cdigo selecionado.
Recolher seleo expandida Recolhe todos os cdigos que esto fora do cdigo selecionado.
Expandir seleo Expande o fragmento de cdigo selecionado.
Recolher tag completa Recolhe o contedo entre um conjunto de tags de abertura e finalizao (por exemplo, o contedo entre <table> e
</table>).
Recolher tag completa expandida Recolhe o contedo fora de um conjunto de tags de abertura e finalizao (por exemplo, o contedo
fora de <table> e </table>).
Expandir tudo Restaura todo o cdigo recolhido.
Aplicar comentrio HTML Delimita o cdigo selecionado com <!-- e --> ou abre uma nova tag caso nenhum cdigo tenha sido
selecionado.
Aplicar comentrio /* */ Delimita o cdigo CSS ou JavaScript selecionado com /* e */.
Aplicar comentrio // Insere // no incio de cada linha do cdigo CSS ou JavaScript selecionado, ou insere uma tag // nica caso nenhum
cdigo tenha sido selecionado.
Aplicar comentrio ' Insere uma aspa simples no incio de cada linha de um script do Visual Basic ou insere uma aspa simples no ponto
de insero caso nenhum cdigo tenha sido selecionado.
Aplicar comentrio de servidor Envolve o cdigo selecionado. Quando voc est trabalhando em um arquivo ASP, ASP.NET, JSP, PHP
ou ColdFusion e seleciona a opo Aplicar comentrio de servidor, o Dreamweaver detecta automaticamente a tag de comentrio correta e
a aplica seleo.
Aplicar hack de comentrio de barra invertida Delimita o cdigo CSS selecionado com tags de comentrio que faro com que o Internet
Explorer 5 para Macintosh ignore o cdigo.
Aplicar Caio Hack Delimita o cdigo CSS selecionado com tags de comentrio que faro com que o Netscape Navigator 4 ignore o
cdigo.
Remover comentrio Remove as tags de comentrio do cdigo selecionado. Se uma seleo incluir comentrios aninhados, somente as
tags de comentrio externas sero removidas.
Remover hack de comentrio de barra invertida Remove as tags de comentrio do cdigo CSS selecionado. Se uma seleo incluir
comentrios aninhados, somente as tags de comentrio externas sero removidas.
Remover Caio Hack Remove as tags de comentrio do cdigo CSS selecionado. Se uma seleo incluir comentrios aninhados, somente
as tags de comentrio externas sero removidas.
Converter abas em espaos Converte cada tabulao da seleo em um nmero de espaos igual ao valor de Tamanho da tabulao
definido nas preferncias de formato do cdigo. Para obter mais informaes, consulte Alterao do formato de cdigo.
Converter espaos em abas Converte uma srie de espaos da seleo em tabulaes. Cada srie de espaos com um nmero de
espaos igual ao tamanho da tabulao convertida em uma tabulao.
Recuo Recua a seleo, deslocando-a para a direita. Para obter mais informaes, consulte Recuo dos blocos de cdigo.
Diminuir recuo Desloca a seleo para a esquerda.
Remover todas as tags Remove todas as tags da seleo.
Converter linhas em tabela Delimita a seleo em uma tag table sem atributos.
Adicionar quebras de linha Adiciona uma tag br no final de cada linha da seleo.
Converter em maiscula Converte todas as letras da seleo (incluindo nomes e valores de tag e atributo) em maisculas.
Converter em minscula Converte todas as letras da seleo (incluindo nomes e valores de tag e atributo) em minsculas.
Converter tags em maisculas Converte todos os nomes de tag e atributo e valores de atributo da seleo em maisculas.
Converter tags em minsculas Converte todos os nomes de tag e atributo e valores de atributo da seleo em minsculas.
Para o incio
Edite o cdigo em uma tag de linguagem de servidor (uma tag ASP, por exemplo) sem entrar na Visualizao de cdigo, usando o Inspetor de
propriedades.
1. Na Visualizao de design, selecione o cone visual da tag de linguagem de servidor.
2. No Inspetor de propriedades, clique no boto Editar.
3. Faa as alteraes no cdigo da tag e clique em OK.
Para o incio
Ao gravar e editar cdigo na Visualizao de cdigo ou no Inspetor de cdigo, voc pode alterar o nvel de recuo de um bloco ou linha de cdigo
selecionado, deslocando-o para a direita ou esquerda em uma tabulao.
Para o incio
O Navegador de cdigo exibe uma lista de cdigos fonte relacionados a uma determinada seleo de sua pgina. Use-o para navegar por
cdigos fonte relacionados, como regras de CSS internas e externas, incluses de servidor, arquivos JavaScript externos, arquivos de modelo pai,
arquivos de bibliotecas e arquivos de origem iframe. Quando voc clica em um link do Navegador de cdigo, o Dreamweaver abre o arquivo que
contm a parte relevante do cdigo. O arquivo aparece na rea relacionada a arquivos, se estiver ativada. Se voc no tiver arquivos
relacionados ativados, o Dreamweaver abre o arquivo selecionado como um documento separado na janela Documento.
Se voc clicar em uma regra CSS no Navegador de cdigo, o Dreamweaver lhe leva diretamente para aquela regra. Se a regra for interna de um
arquivo, o Dreamweaver exibe a regra na visualizao Dividida. se a regra estiver em um arquivo CSS externo, o Dreamweaver abre o arquivo e
exibe a regra na rea relacionada a arquivos acima do documento principal.
Voc pode acessar o Navegador de cdigo a partir das visualizaes de design, de cdigo e dividida, assim como pelo Inspetor de cdigos.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o Navegador de cdigos, consulte
www.adobe.com/go/dw10codenav_br.
Para assistir a um tutorial em vdeo sobre como trabalhar com Visualizao dinmica, arquivos relacionados e o Navegador de cdigo, consulte
www.adobe.com/go/lrvid4044_dw_br.
que as regras CSS em trs arquivos externos afetam a seleo em seu documento. Neste caso, o Navegador de cdigo relaciona esses trs
arquivos, assim como as regras CSS relevantes seleo. Para CSS relacionados a uma determinada seleo, o Navegador de cdigo funciona
como um painel de Estilos CSS no modo Atual.
Quando voc focaliza links para regras CSS, o Navegador de cdigo exibe dicas de ferramentas das propriedades na regra. Essas dicas de
ferramentas so teis quando voc quer distinguir entre muitas regras que compartilham o mesmo nome.
Para o incio
Na Visualizao de cdigo e no Inspetor de cdigo, possvel visualizar uma lista de todas as funes JavaScript ou VBScript do cdigo e ir at
qualquer uma delas.
1. Visualize o documento na Visualizao de cdigo (Exibir > Cdigo) ou no Inspetor de cdigo (Janela > Inspetor de cdigo).
2. Siga um destes procedimentos:
Na Visualizao de cdigo, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) em qualquer lugar da Visualizao de cdigo e selecione o submenu Funes no menu de contexto.
O submenu Funes no aparece na Visualizao de design.
Qualquer funo JavaScript ou VBScript do cdigo aparece no submenu.
Para ver as funes em ordem alfabtica, mantenha pressionada a tecla Control enquanto clica com o boto direito do mouse
(Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na Visualizao de cdigo. Em seguida,
selecione o submenu Funes.
No Inspetor de cdigo, clique no boto Navegao de cdigo ({ }) na barra de ferramentas.
3. Selecione um nome de funo para ir at a funo no cdigo.
Extrair JavaScript
Para o incio
O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver, exporta-o para um arquivo
externo e vincula o arquivo externo ao seu documento. O JSE tambm pode remover manipuladores de eventos, como onclick e onmouseover do
seu cdigo e, ento, anexar ao seu documento, de modo no intrusivo, o JavaScript associado a esses manipuladores.
Voc deve estar ciente das seguintes limitaes do Extrator de JavaScript antes de us-lo:
O JSE no extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). H chance de que a externalizao desses
scripts possa causar resultados imprevistos. Por padro, o Dreamweaver lista esses scripts na caixa de dilogo Externalizar JavaScript, mas
no os seleciona para extrao. (Voc pode selecion-los manualmente se desejar).
O JSE no extrai JavaScript de regies editveis de arquivos .dwt (modelo do Dreamweaver), regies no editveis de ocorrncias do
modelo ou itens de biblioteca do Dreamweaver.
Aps extrair JavaScript usando a opo Externalizar JavaScript e Anexar de modo no intrusivo, voc no poder mais editar
comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver no pode inspecionar e preencher o painel Comportamentos
com comportamentos anexados de modo no intrusivo.
Voc no pode desfazer suas alteraes aps ter fechado a pgina. No entanto, voc pode desfazer alteraes, desde que permanea na
mesma seo de edio. Selecione Editar > Desfazer externalizar JavaScript, para desfazer.
Algumas pginas muito complexas podem no funcionar conforme o esperado. Esteja atento ao extrair JavaScript de pginas com
document.write() no corpo e em variveis globais.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no Dreamweaver, consulte
www.adobe.com/go/dw10javascript_br.
Para usar o Extrator de JavaScript:
1. Abra uma pgina que contenha JavaScript (por exemplo, uma pgina do Spry).
2. Selecione Comandos > Externalizar JavaScript.
3. Na caixa de dilogo Externalizar JavaScript, edite as selees padro, se necessrio.
Selecione Externalizar somente JavaScript se voc deseja que o Dreamweaver mova todo JavaScript para um arquivo externo e para
fazer referncia quele arquivo no documento atual. Esta opo deixa os manipuladores de evento como onclick e onload no
documento e deixa os comportamentos visveis no painel Comportamentos.
Selecione Externalizar JavaScript e Anexar de modo no intrusivo se desejar que o Dreamweaver 1) mova JavaScript para um arquivo
externo e faa referncia a esse arquivo no documento atual e 2) remova manipuladores de evento do HTML e insira-os no tempo de
execuo usando JavaScript. Ao selecionar esta opo, voc no poder mais editar comportamentos no painel Comportamentos.
Na coluna Editar, desmarque todas as edies que no deseja realizar ou selecione as edies que o Dreamweaver, por padro, no
selecionou.
Por padro, o Dreamweaver lista mas no seleciona as seguintes edies:
Blocos de script no cabealho do documento que contm chamadas document.write() ou document.writeln().
Blocos de script no cabealho do documento que contm assinaturas de funes relacionadas ao cdigo de manuseio EOLAS,
conhecido por usar document.write().
Blocos de script no corpo do documento, a menos que os blocos contenham apenas widget do Spry ou construtores de conjunto de
dados do Spry.
O Dreamweaver atribui IDs automaticamente a elementos que ainda no tm IDs. Se no gostar dessas IDs, voc poder alter-las,
editando as caixas de texto de ID.
4. Clique em OK.
A caixa de dilogo de resumo oferece um resumo de extraes. Revise as extraes e clique em OK.
5. Salve a pgina.
O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extrado. O Dreamweaver salva o arquivo
SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nvel da pgina da qual voc extraiu o JavaScript. No se
esquea de enviar esses arquivos dependentes para seu servidor Web quando enviar a pgina original.
Para o incio
Os snippets de cdigo permitem armazenar o contedo para reutilizao rpida. Voc pode criar, inserir, editar ou excluir snippets de HTML,
JavaScript, CFML, ASP, PHP e muito mais. Tambm possvel gerenciar e compartilhar snippets de cdigo com membros da equipe. Alguns
snippets predefinidos que voc pode usar como ponto de partida esto disponveis.
Os snippets que contm tags <font> e outros atributos elementos obsoletos esto na pasta Legacy no painel Snippets.
Para o incio
Voc pode procurar tags, atributos e valores de atributo especficos. Por exemplo, possvel procurar todas as tags img que no tm o atributo
alt.
Voc tambm pode procurar sequncias de texto especficas que esto ou no dentro de um conjunto de tags de continer. Por exemplo,
possvel procurar a palavra Sem ttulo contida em uma tag title para localizar todas as pginas sem ttulo do seu site.
1. Abra o documento em que ser realizada a pesquisa ou selecione documentos ou uma pasta no painel Arquivos.
2. Selecione Editar > Localizar e substituir.
3. Especifique em quais arquivos ser realizada a pesquisa e, em seguida, especifique o tipo de pesquisa a ser executado e o texto ou as tags
que sero procurados. Se desejar, especifique o texto de substituio tambm. Depois, clique em um dos botes Localizar ou em um dos
botes Substituir.
4. Clique no boto Fechar.
5. Para realizar a pesquisa novamente sem exibir a caixa de dilogo Localizar e substituir, pressione F3 (Windows) ou Command+G
(Macintosh).
Para o incio
Para o incio
O painel Referncia fornece uma ferramenta de referncia rpida para linguagens de markup, linguagens de programao e estilos CSS. Ele
comunica informaes sobre tags, objetos e estilos especficos com os quais voc est trabalhando na Visualizao de cdigo (ou no Inspetor de
cdigo). O painel Referncia tambm fornece um cdigo de exemplo que voc pode colar nos documentos.
2. Para ajustar o tamanho do texto no painel Referncia, selecione Fonte grande, Fonte mdia ou Fonte pequena no menu de opes (a seta
pequena no lado superior direito do painel).
Impresso do cdigo
Voc pode imprimir o cdigo para edit-lo offline, arquiv-lo ou distribu-lo.
1. Abra uma pgina na Visualizao de cdigo.
2. Selecione Arquivo > Imprimir cdigo.
3. Especifique as opes de impresso e clique em OK (Windows) ou Imprimir (Macintosh).
Mais tpicos da Ajuda
Modelo de objeto do documento W3C
Tutorial de dicas de cdigos
Viso geral da barra de ferramentas de codificao
Abrir Arquivos relacionados
Tutorial do Navegador de cdigo
Para o incio
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
O PhoneGap Build um servio baseado em nuvem que permite compactar os seus aplicativos da Web como aplicativos mveis nativos. A
integrao com o Dreamweaver permite construir e salvar seus aplicativos em um site do Dreamweaver e carreg-los no servio do PhoneGap
Build na nuvem para compactao.
O PhoneGap Build oferece suporte compactao de aplicativos nativos para os seguintes sistemas operacionais de dispositivos mveis:
iOS
Android
BlackBerry
webOS
Symbian
Windows 8
Para obter mais informaes sobre o servio do PhoneGap Build, consulte Site do PhoneGap.
Para obter ajuda para uso do servio do PhoneGap Build, consulte Documentao do PhoneGap Build.
Para o incio
No possvel usar o PhoneGap Build e o Dreamweaver sem uma conta de servio do PhoneGap Build. As contas so gratuitas e fceis de
configurar. Para criar uma conta, visite Site do PhoneGap Build.
Ser necessrio validar a conta por meio de um email de confirmao para que a conta se torne ativa.
Para o incio
Dependendo do tipo de aplicativos que voc deseja compactar e dos dispositivos que deseja testar, h vrias tarefas de configurao a serem
concludas antes de compactar seu aplicativo. possvel configurar algumas, todas ou nenhuma das seguintes opes:
Android SDK Para testar aplicativos Android no seu computador local que usa um emulador Android, voc precisar baixar e instalar o Android
SDK. Para obter instrues, consulte Documentao do Android.
Aps ter instalado o Android SDK, voc precisar iniciar o Android SDK e os Gerenciadores AVD e selecionar as ferramentas do Android com as
quais deseja trabalhar localmente no computador. O Dreamweaver usa as informaes que voc selecionou durante essa configurao inicial
para preencher as configuraes de emulador Android no painel de Servio do PhoneGap Build. Para obter mais informaes sobre a
especificao dessas configuraes, consulte Documentao do Android.
IMPORTANTE: para usar um emulador Android para testar o seu aplicativo localmente, antes de realizar o teste, voc deve obter um emulador
que funcione independentemente do Dreamweaver.
webOS SDK/PDK Para testar aplicativos webOS no seu computador local que usa um emulador webOS, voc precisar baixar e instalar o
webOS SDK/PDK. Para obter instrues, consulte Documentao do webOS.
Leitores de cdigo QR (Quick Response) Para transferir facilmente o aplicativo compactado para o dispositivo, voc precisar de um leitor de
cdigo QR. (Quando compactar um aplicativo que usa o Dreamweaver, voc receber um cdigo QR do aplicativo, que aparecer no painel do
PhoneGap Build, aps o aplicativo ter sido compactado.) Um nmero de leitores de cdigo diferentes esto disponveis gratuitamente em vrios
mercados. Para obter mais informaes, busque em Google leitor de cdigo QR.
Para o incio
1. Verifique se voc criou um site do Dreamweaver com uma pgina index.html (normalmente a pgina de incio do seu aplicativo).
Nota: o PhoneGap Build oferece suporte apenas aos arquivos HTML, CSS e JavaScipt. O seu site no pode conter pginas de servidor
como PHP, CFM, ou outros tipos de pginas baseadas no servidor.
2. Selecione Site > Servio do PhoneGap Build > Servio do PhoneGap Build.
3. Fornea as suas informaes de logon e faa logon no PhoneGap Build. Se no tiver criado uma conta do PhoneGap Build, consulte
Criao de uma conta de servio do PhoneGap Build.
4. Deixe selecionado Criar como um novo projeto e clique em Continuar.
5. (Atualizao do Dreamweaver 6.0.3) Para os sistemas operacionais desejados, digite a chave e a senha conforme necessrio. As
informaes da chave de assinatura so necessrias apenas para Android, iOS e Blackberry.
Se voc no conseguir criar mais de um aplicativo, talvez no tenha assinado o servio PhoneGap.
Nota: se as informaes inseridas estiverem incorretas, ocorrer uma falha com uma mensagem de erro indicando que voc digitou uma
chave ou senha incorreta. Se voc no digitar nenhuma informao, o iOS falhar com o erro Assinatura de chave exigida. Aplicativos
Android e Blackberry so criados usando certificados de depurao.
6. Observe que o Dreamweaver adiciona um arquivo ProjectSettings raiz do seu site. (Talvez seja necessrio atualizar o painel Arquivos
para v-lo). Esse arquivo muito importante, pois o servio do PhoneGap Build o usa para controlar o aplicativo.
O Dreamweaver tambm adiciona um arquivo config.xml raiz do seu site. Clique duas vezes neste arquivo XML simples para abri-lo.
Personalize a identidade do aplicativo editando os contedos desse arquivo. Se no fizer isso, todos os seus aplicativos tero o mesmo
nome de aplicativo padro.
Para obter mais informaes sobre como trabalhar com o arquivo config.xml, consulte a Documentao do PhoneGap Build.
7. Salve o arquivo config.xml editado, feche-o e clique no painel Reconstruir do Servio do PhoneGap. Quando o PhoneGap terminar de
compactar o aplicativo para cada plataforma, voc ver mensagens indicando que a verso est concluda.
Aps as suas verses estarem completas, voc ter vrias opes. Voc poder baixar os arquivos do aplicativo no computador, rastrear o
cdigo QR de uma verso para transferir o aplicativo para o seu dispositivo ou emular o aplicativo usando um emulador (somente Android e
webOS).
Palavras-chave: novidades, dreamweaver, HTML5, CSS, transies, aplicativo da Web, pacote da Web, efeitos, CSS3, layout de grade fluido,
Phonegap, novos recursos, jquery, Business Catalyst, fontes da Web, melhorias de FTP, otimizao de PSD, dreamweaver cs6
Para o incio
Abra uma pgina inicial do jQuery Mobile ou crie uma pgina em HTML5
Use as pginas iniciais do jQuery Mobile no Dreamweaver para criar o aplicativo. Como alternativa, possvel iniciar a criao do aplicativo da
Web em uma nova pgina HTML5.
As pginas iniciais do jQuery Mobile incluem arquivos HTML, CSS, JavaScript e de imagem que ajudam a comear a projetar o aplicativo. Voc
pode usar arquivos CSS e JavaScript hospedados em uma CDN e em seu prprio servidor ou arquivos instalados no Dreamweaver.
Nota: Para identificar a localizao dos arquivos vinculados, consulte as tags <link> e <script src> na Visualizao de cdigo.
Insira componentes jQuery Mobile do Painel Inserir
Insira componentes do jQuery Mobile do painel Inserir na pgina em HTML. Os arquivos CSS e JavaScript do jQuery Mobile definem o estilo e o
comportamento dos componentes.
Para o incio
Para o incio
O componente da Pgina atua como o continer de todos os outros componentes do jQuery Mobile. Adicione o componente da Pgina antes de
inserir outros componentes.
1. Selecione Arquivo > Novo.
2. Selecione Pgina em branco > HTML.
Alguns componentes do jQuery Mobile usam atributos HTML5 especficos. Para assegurar a compatibilidade com HTML5 durante a
validao, selecione HTML5 como seu tipo de documento.
3. No painel Inserir (Window > Inserir), selecione jQuery Mobile do menu. Os componentes do jQuery Mobile so exibidos no painel.
4. No painel Inserir, arraste o componente Pgina para a Visualizao de design.
5. Na caixa de dilogo Arquivos do jQuery Mobile, selecione uma das seguintes opes:
Remoto (CDN) Se deseja conectar-se a um servidor CDN remoto que hospeda os arquivos do jQuery Mobile. Use a opo padro do site
jQuery se voc no tiver configurado um site que contm arquivos do jQuery Mobile. Voc tambm pode escolher usar outros servidores
CDN.
Local Os arquivos disponveis no Dreamweaver so exibidos. Para especificar uma pasta diferente, clique em Procurar e navegue at a
pasta que contm os arquivos do jQuery Mobile.
Os arquivos CSS e Javascript so copiados em um diretrio local temporrio at voc salvar o arquivo HTML em seu computador. Depois
que o arquivo HTML salvo, todos os arquivos associados ao jQuery Mobile e os arquivos de imagem so copiados em uma pasta na raiz
do site.
6. Insira as propriedades do componente Pgina.
7. Na Visualizao de design, posicione o cursor no local onde voc deseja inserir o componente e clique o componente no painel Inserir. Na
caixa de dilogo exibida, personalize os componentes usando as opes.
Visualize a pgina na Visualizao dinmica. Algumas classes de CSS so aplicadas somente na Visualizao dinmica.
Usar arquivos e pastas personalizados
Voc pode criar arquivos CSS e JS personalizados para o seu aplicativo. Nomeie os arquivos como jquery.mobile.js, jquery.mobile.css e jquery.js
Se estiver usando pastas personalizadas, faa o seguinte:
1. Faa download da verso descompactada da biblioteca principal do jQuery 1.5 em
http://docs.jquery.com/Downloading_jQuery#Download_jQuery.
Para o incio
No Dreamweaver, voc pode criar um arquivo de consulta de mdia para todo o site ou uma consulta de mdia para um documento especfico.
Arquivo de consulta de mdia para todo o site Especifica configuraes de exibio de todas as pginas em seu site que incluem o arquivo.
O arquivo de consulta de mdia para todo o site age como repositrio central de todas as consultas de mdia em seu site. Depois de criar o
arquivo, vincule-o a pginas em seu site que precisem usar consultas de mdia para a exibio do arquivo.
Consulta de mdia para documento especfico A consulta de mdia inserida diretamente no documento, e a pgina exibida com base na
consulta de mdia inserida.
1. Crie uma pgina da web.
2. Selecione Modificar > Consultas de mdia.
3. Siga um destes procedimentos:
Para criar um arquivo de consulta de mdia para todo o site, selecione Arquivo de consultas de mdia para todo o site.
Para criar uma consulta de mdia especfica de um documento, selecione Este documento.
4. Para fazer uma consulta de mdia para todo o site, faa o seguinte:
a. Clique em Especificar.
b. Selecione Criar novo arquivo.
c. Especifique um nome para o arquivo e clique em OK.
5. possvel que alguns dispositivos no informem a largura real. Para forar dispositivos a informar a largura real, verifique se a opo
Forar dispositivos a informar largura real est ativada.
O seguinte cdigo inserido no arquivo quando voc escolhe essa opo.
<meta name="viewport" content="width=device-width">
6. Siga um destes procedimentos:
Clique em "+" para definir as propriedades do arquivo de consulta de mdia.
Clique em Predefinies Padro se quiser comear com predefinies padro.
7. Selecione linhas na tabela e edite as respectivas propriedades usando as opes em Propriedades.
Descrio A descrio do dispositivo para o qual o arquivo CSS deve ser usado. Por exemplo, telefone, televiso, mesa digitalizadora,
etc.
Largura mnima e mxima O arquivo CSS usado para dispositivos cuja largura informada est dentro dos valores especificados.
Nota: Deixe a Largura mnima ou a Largura mxima em branco se no desejar especificar um intervalo explcito para um dispositivo. Por
exemplo, comum deixar a Largura mnima em branco para telefones, cuja largura de 320px ou menos.
Arquivo CSS Selecione Usar arquivo existente e navegue at o arquivo CSS do dispositivo.
Se deseja especificar um arquivo CSS que ainda ser criado, selecione Criar novo arquivo. Digite o nome do arquivo CSS. O arquivo
criado quando voc pressiona OK.
8. Clique em OK.
9. Um novo arquivo criado para um consulta de mdia para todo o site. Salve-o.
Consulta de mdia para todo o site: Em pginas existentes, verifique se voc incluiu o arquivo de consulta de mdia em todas as pginas na tag
<head>.
Exemplo de um link de consulta de mdia onde mediaquery_adobedotcom.css o arquivo de consulta de mdia para todo o site
www.adobe.com/br de site:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Para o incio
Para o incio
Use este procedimento para alterar o arquivo de consultas de mdia para todo o site que voc definiu na caixa de dilogo Consultas de mdia.
1. Selecione Site > Gerenciar sites.
2. Na caixa de dilogo Gerenciar sites, selecione o seu site.
3. Clique em Editar. A caixa de dilogo Configurao de site exibida.
4. Em Configuraes avanadas no painel esquerdo, selecione Informaes locais.
5. No arquivo de consulta de mdia para todo o site, no painel direito, clique em Procurar para selecionar o arquivo CSS da consulta de mdia.
Nota: A alterao do arquivo de consulta de mdia para todo o site no afeta documentos vinculados a um arquivo de consulta de mdia
para todo o site diferente ou anterior.
6. Clique em Salvar.
Para o incio
As dimenses especificadas em uma consulta de mdia aparecem nas opes de tamanho de boto/janela de vrias telas. Quando voc
seleciona uma dimenso do menu, as seguintes modificaes so vistas:
O tamanho da visualizao muda para refletir as dimenses especificadas. O tamanho do quadro de documento permanece inalterado.
O arquivo CSS especificado na consulta de mdia usado para exibir a pgina.
Para o incio
A integrao do Dreamweaver com o jQuery Mobile e o PhoneGap ajuda na criao e no empacotamento de aplicativos da Web para
implantao no Android e em dispositivos baseados em iOS. O Dreamweaver usa SDKs do PhoneGap para criar o pacote (arquivo .apk para
Android/.xcodeproj para iPhone/iPad)
Uma vez que empacotou um aplicativo mvel com o Dreamweaver, voc poder exibi-lo em um emulador de dispositivo ou implant-lo em seu
prprio dispositivo.
Importante: O aplicativo mvel que voc empacotou com Dreamweaver um aplicativo somente para fins de depurao. O aplicativo ser
executado no Android e em emuladores de iOS, ou no seu dispositivo mvel pessoal se voc fizer a transferncia, mas no possvel carregar
os aplicativos mveis de depurao nas lojas da Apple e do Android. Para carregar aplicativos para iOS ou Android, voc dever executar a
etapa adicional de assin-los fora do Dreamweaver. Para obter mais informaes sobre o carregamento de aplicativos nas lojas da Apple e do
Android, consulte a documentao do Android ou o Guia do usurio do programa no Portal de fornecimento do Apple iOS. (Antes de poder
acessar o Portal de fornecimento do Apple iOS Fornecimento voc dever se registrar no Programa de Desenvolvedor de Apple [gratuito] e se
inscrever no Programa de Desenvolvedor iOS [taxa anual].)
Adobe recomenda
Empacotamento de aplicativos
da Web como aplicativos
mveis usando o Dreamweaver
CS5.5
Jon Michael Varese
Tutorial passo a passo sobre
empacotamento de seu aplicativo da
Web
Mais tpicos da Ajuda
http://www.phonegap.com/about
http://jquerymobile.com/demos/1.0a2/
http://docs.phonegap.com/
Tutorial de empacotamento de aplicativos da Web
Para o incio
1. Selecione Arquivo > Visualizao de vrias telas para abrir o painel da Visualizao de vrias telas.
2. No painel Visualizao de vrias telas, clique em Tamanhos da janela de viso.
3. Especifique os tamanhos da janela de viso e clique em OK. Por exemplo, especifique 480 como a largura e 272 como a altura para um
dispositivo Sony PSP.
4. (Opcional) Redefina as configuraes para seus valores padro clicando em Redefinir para padres.
Para o incio
Links de navegao
Para o incio
O painel Visualizao de vrias telas no sincronizado automaticamente com a Visualizao de design e a Visualizao dinmica. Se voc
editar uma dessas visualizaes, clique no boto Atualizar no painel Visualizao de vrias telas.
Nota: Se voc navegador para outro local do arquivo original na Visualizao dinmica, o painel Visualizao de vrias telas no exibir o
arquivo para o qual voc navegou, mesmo se voc clicar no boto Atualizar.
Visualizao
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Para o incio
Para o incio
Selecione Prximo problema ou Problema anterior no menu Verificao de compatibilidade do navegador na barra de ferramentas Documento.
Para o incio
1. No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador.
2. Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Configuraes.
3. Marque a caixa de seleo ao lado de cada navegador a ser verificado.
4. Para cada navegador selecionado, escolha uma verso mnima a ser verificada no menu pop-up correspondente.
Por exemplo, para saber se os bugs de processamento de CSS podem aparecer no Internet Explorer 5.0 e posterior, e Netscape Navigator
7.0 e posterior, marque as caixas de seleo ao lado desses nomes de navegador, e selecione 5.0 no menu pop-up do Internet Explorer e
Para o incio
Para o incio
1. No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador.
2. Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Editar lista de questes ignoradas.
3. No arquivo Exceptions.xml, localize o problema a ser excludo da lista de problemas ignorados e exclua-o.
4. Salve e feche o arquivo Exceptions.xml.
Para o incio
Para o incio
Para o incio
Para o incio
1. Selecione Arquivo > Visualizao de vrias telas para abrir o painel da Visualizao de vrias telas.
2. No painel Visualizao de vrias telas, clique em Tamanhos da janela de viso.
3. Especifique os tamanhos da janela de viso e clique em OK. Por exemplo, especifique 480 como a largura e 272 como a altura para um
dispositivo Sony PSP.
4. (Opcional) Redefina as configuraes para seus valores padro clicando em Redefinir para padres.
Para o incio
Links de navegao
Para o incio
O painel Visualizao de vrias telas no sincronizado automaticamente com a Visualizao de design e a Visualizao dinmica. Se voc
editar uma dessas visualizaes, clique no boto Atualizar no painel Visualizao de vrias telas.
Nota: Se voc navegador para outro local do arquivo original na Visualizao dinmica, o painel Visualizao de vrias telas no exibir o
arquivo para o qual voc navegou, mesmo se voc clicar no boto Atualizar.
Visualizao de pginas
Visualizao de pginas no Dreamweaver
Visualizao de pginas em navegadores
Visualizao de pginas em dispositivos mveis
A Visualizao de design d uma ideia de como sua pgina ser exibida na Web, mas no processa as pginas exatamente como os
navegadores fazem. A visualizao dinmica apresenta uma representao mais precisa e permite trabalhar na Visualizao de cdigo para que
voc possa ver as alteraes no design. O recurso Visualizar do navegador permite que voc veja como suas pginas sero exibidas em
navegadores especficos.
Para o incio
3. (Opcional) Faa as alteraes na Visualizao de cdigo, no painel Estilos CSS, em uma folha de estilos CSS externa ou em outro arquivo
relacionado.
Embora voc no possa editar na Visualizao dinmica, suas opes de edies em outras reas (por exemplo, no painel Estilos CSS ou
na Visualizao de cdigo) mudam quando voc clica em Visualizao dinmica.
Voc pode trabalhar com arquivos relacionados (como folhas de estilos CSS) enquanto mantm o foco na Visualizao dinmica,
abrindo o arquivo relacionado na barra de ferramentas Arquivos relacionados, na parte superior do documento.
4. Se voc tiver feito alteraes na Visualizao de cdigo ou em um arquivo relacionado, atualize a Visualizao dinmica clicando no boto
Atualizar da barra de ferramentas Documento ou pressionando F5.
5. Para retornar Visualizao de design editvel, clique no boto Visualizao dinmica novamente.
O Dreamweaver exibe o cdigo ativo que o navegador usa para executar a pgina. O cdigo realado em amarelo e no editvel.
Quando voc interage com os elementos interativos da pgina, o cdigo Ativo destaca as alteraes dinmicas no cdigo.
3. Para desativar o destaque das alteraes na Visualizao de cdigo ativo, escolha Exibir > Opes de visualizao dinmica > Realar
alteraes no Cdigo ativo.
4. Para retornar Visualizao de cdigo editvel, clique no boto Cdigo ativo novamente.
Para alterar as preferncia de Cdigo ativo, escolha Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (SO Macintosh) e selecione
a categoria de codificao por cores.
Congelar JavaScript
Siga um destes procedimentos:
Pressione F6
Selecione Congelar JavaScript no menu pop-up do boto Visualizao dinmica.
Uma barra de informaes na parte superior do documento indicar que o JavaScript est congelado. Para fechar a barra de informaes, clique
no link para fechar.
Para o incio
Visualizar em um navegador
Voc pode visualizar uma pgina em um navegador a qualquer momento; no necessrio carreg-la no servidor da Web primeiro. Ao visualizar
uma pgina, todas as funes relacionadas ao navegador devem funcionar, incluindo os comportamentos do JavaScript, os links absolutos e
relacionados ao documento, os controles ActiveX e os plug-ins Netscape Navigator, contanto que voc tenha instalado os plug-ins ou controles
ActiveX necessrios no seu navegador.
Antes de visualizar um documento, voc precisa salv-lo; caso contrrio, o navegador no exibir as alteraes mais recentes.
1. Escolha uma destas opes para visualizar a pgina:
Selecione Arquivo > Visualizar no navegador e, em seguida, selecione um dos navegadores listados.
Nota: Se nenhum navegador estiver listado, selecione Editar > Preferncias ou Dreamweaver > Preferncias (Macintosh) e, em
seguida, selecione a categoria Visualizar no navegador esquerda para selecionar um navegador.
Pressione F12 (Windows) ou Option + F12 (Macintosh) para exibir o documento atual no navegador primrio.
Pressione Control + F12 (Windows) ou Command + F12 (Macintosh) para exibir o documento atual no navegador secundrio.
2. Clique nos links e teste o contedo da sua pgina.
Nota: O contedo vinculado a um caminho relativo raiz do site no aparece quando voc visualiza documentos em um navegador local,
a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o arquivo temporrio em Editar >
Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no reconhecem razes de site, diferente dos servidores.
Para visualizar o contedo vinculado aos caminhos relativos raiz, coloque o arquivo em um servidor remoto e selecione Arquivo >
Visualizar no navegador.
3. Feche a pgina do navegador quando terminar o teste.
Para o incio
Para visualizar pginas criadas no Dreamweaver em vrios dispositivos mveis, use o Device Central com o recurso Renderizao em Tela
Pequena do Opera incorporado. Dispositivos diferentes tm navegadores distintos instalados, mas a visualizao pode dar uma boa impresso da
aparncia e do comportamento do contedo em um dispositivo selecionado.
1. Inicie o Dreamweaver.
2. Abrir um arquivo.
3. Siga um destes procedimentos:
Selecione Arquivo > Visualizar no Navegador > Device Central.
Na barra de ferramentas da janela do documento, clique no boto do navegador Visualizar/Depurar em
selecione Visualizar no Device Central.
, mantendo-o pressionado, e
O arquivo exibido na aba Device Central Emulator. Para continuar o teste, clique duas vezes no nome de um dispositivo diferente nas
listas Conjuntos de dispositivos ou Dispositivos disponveis.
Mais tpicos da Ajuda
Viso geral da barra de ferramentas de navegao do navegador
Abrir Arquivos relacionados
Tutorial em vdeo da Visualizao dinmica
Seleo de elementos
Para o incio
Para selecionar um elemento visvel na janela Documento, clique no elemento ou arraste o ponteiro do mouse sobre ele.
Para selecionar um elemento invisvel, selecione Exibir > Auxlios visuais > Elementos invisveis (caso este item de menu ainda no esteja
selecionado) e clique no marcador do elemento na janela Documento.
Alguns objetos aparecem em um lugar da pgina diferente do local onde seu cdigo foi inserido. Por exemplo, na Visualizao de design,
um elemento de posicionamento absoluto (elemento AP) pode estar em qualquer lugar da pgina, mas na Visualizao de cdigo, o cdigo
que define o elemento AP estar em um local fixo. Quando os elementos invisveis estiverem visveis, o Dreamweaver exibir os marcadores
na janela Documento para mostrar o local do cdigo desses elementos. A seleo de um marcador selecionar o elemento inteiro; por
exemplo, a seleo do marcador de um elemento AP selecionar o elemento AP inteiro.
Para selecionar uma tag completa (incluindo se contedo, se houver), clique em uma tag no seletor de tags na parte inferior esquerda da
janela Documento. (O seletor de tags exibido nas visualizaes de design e de cdigo.) O seletor de tags sempre mostra as tags que
contm a seleo atual ou o ponto de insero. A tag da extrema esquerda a tag mais externa que contm a seleo atual ou o ponto de
insero. A prxima tag est contida nessa tag mais externa e assim sucessivamente. A tag da extrema direita a tag mais interna que
contm a seleo atual ou o ponto de insero.
No exemplo a seguir, o ponto de insero est em uma tag de pargrafo, <p>. Para selecionar a tabela que contm o pargrafo a ser
selecionado, selecione a tag <table> esquerda da tag <p>.
Para o incio
Para o incio
Para o incio
Use as preferncias de elementos invisveis para especificar quais tipos de elementos estaro visveis quando voc selecionar Exibir > Auxlios
visuais > Elementos invisveis.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e clique em Elementos invisveis.
2. Selecione quais elementos devem ficar visveis e clique em OK.
Nota: Uma marca de seleo ao lado do nome do elemento na caixa de dilogo significa que o elemento estar visvel quando Exibir >
Auxlios visuais > Elementos invisveis for selecionado.
ncoras nomeadas Exibe um cone que marca o local de cada ncora nomeada (um nome = "") no documento.
Scripts Exibe um cone que marca o local do cdigo JavaScript ou VBScript no corpo do documento. Selecione o cone para editar o script
no Inspetor de propriedades ou vincular-se a um arquivo de script externo.
Comentrios Exibe um cone que marca o local dos comentrios HTML. Selecione o cone para ver o comentrio no Inspetor de
propriedades.
Quebras de linha Exibe um cone que marca o local de cada quebra de linha (BR). Por padro, esta opo no selecionada.
Mapas de imagem do cliente Exibe um cone que marca o local de cada mapa de imagens do cliente no documento.
Estilos incorporados Exibe um cone que mostra o local dos estilos CSS incorporados na seo body do documento. Se os estilos CSS
forem colocados na seo head de um documento, eles no aparecero na janela Documento.
Campos ocultos de formulrios Exibe um cone que marca o local dos campos de formulrios que possuem o atributo type definido como
"hidden".
Delimitador de formulrios Exibe uma borda ao redor de um formulrio, para que voc possa ver onde deve inserir os elementos de
formulrio. A borda mostra a extenso da tag form, para que quaisquer elementos de formulrio nessa borda sejam corretamente
delimitados nas tags form.
Pontos de ancoragem de elementos PA Exibe um cone que marca o local do cdigo que define um elemento PA. O elemento PA pode
estar em qualquer lugar da pgina. (Os elementos PA no so elementos invisveis. Somente o cdigo que define o elemento PA estar
invisvel.) Selecione o cone para selecionar o elemento PA. Depois disso, voc poder ver o contedo do elemento PA, mesmo se ele
estiver marcado como oculto.
Pontos de ancoragem de elementos alinhados Exibe um cone que mostra o local do cdigo HTML de elementos que aceitam o atributo
align. Esses elementos incluem imagens, tabelas, objetos ActiveX, plug-ins e applets. Em alguns casos, o cdigo do elemento pode estar
separado do objeto visvel.
Tags de markup do Visual Server Exibe o local das tags de markup de servidores (como tags de Pginas ativas do servidor e tags do
ColdFusion) cujo contedo no pode ser exibido na janela Documento. Essas tags normalmente geram tags HTML quando processadas
por um servidor. Por exemplo, uma tag <CFGRAPH> gera uma tabela HTML quando processada por um servidor ColdFusion. O
Dreamweaver representa a tag com um elemento invisvel do ColdFusion, pois o Dreamweaver no pode determinar a sada dinmica final
da pgina.
Tags no visuais de markup de servidores Exibe o local das tags de markup de servidores (como tags de Pginas ativas do servidor e
tags do ColdFusion) cujo contedo no pode ser exibido na janela Documento. Essas tags so normalmente tags lgicas, de configurao
ou de processamento (por exemplo, <CFSET>, <CFWDDX> e <CFXML>) que no geram tags HTML.
Exibio CSS: Nenhum Exibe um cone que mostra o local do contedo oculto pela propriedade display:none na folha de estilos vinculada
ou incorporada.
Mostrar texto dinmico como Por padro, exibe um texto dinmico na pgina no formato {Recordset:Field}. Se esses valores forem
muito extensos a ponto de distorcer a formatao da pgina, altere a exibio para {}.
Incluses do servidor Exibe o contedo real de cada arquivo de incluso do servidor.
Mais tpicos da Ajuda
Para o incio
1. Abra a caixa de dilogo Configuraes de visualizao dinmica (Exibir > Opes de visualizao dinmica > Configuraes de solicitao
HTTP).
2. Na rea Solicitao de URL, clique no boto de adio (+) e digite um parmetro que a pgina espera.
3. Especifique um nome e um valor de teste para cada parmetro.
4. No menu pop-up Mtodo, selecione o mtodo de formulrio em HTML que a pgina espera: POSTAR ou OBTER.
5. Para salvar as configuraes da pgina atual, selecione Salvar configuraes para este documento e, depois, clique em OK.
Nota: Para salvar as configuraes, voc deve ativar as Design Notes (Arquivo > Design Notes).
Para o incio
Muitos problemas com a visualizao de dados dinmicos em Visualizao dinmica podem estar ligados a valores no encontrados ou
incorretos na caixa de dilogo Definio de sites (Site > Editar sites).
Verifique as configuraes do servidor que voc especificou como o seu servidor de teste. Voc precisa especificar uma pasta capaz de
processar pginas dinmicas quando a caixa de dilogo de Definio de sites solicita uma pasta de servidor ou diretrio raiz. Veja um exemplo de
uma pasta de servidor apropriada se IIS ou PWS estiverem em execuo no disco rgido:
C:\Inetpub\wwwroot\myapp\
Verifique se a caixa do URL especifica um URL que corresponda (mapeia) pasta do servidor. Por exemplo, se PWS ou IIS estiverem em
execuo no computador local, estas pastas remotas tero os seguintes URL:
Pasta remota
URL da Web
C:\Inetpub\wwwroot\
http://localhost/
C:\Inetpub\wwwroot\myapp\
http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes
http://localhost/fs/planes
Modelos
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Um modelo um tipo especial de documento usado para criar um layout de pgina "fixo". Os documentos criados com base no modelo herdam o
seu layout de pgina. Ao criar um modelo, voc especifica o contedo que os usurios podem editar em um documento criado com esse modelo.
Os modelos permitem que seus autores controlem os elementos de pgina que os usurios do modelo (redatores, artistas grficos ou
desenvolvedores da Web) podem editar. H diversos tipos de regies que o autor do modelo pode incluir em um documento.
Nota: Os modelos permitem que voc controle uma grande rea de design e reutilize layouts completos. Se voc quiser reutilizar elementos de
design especficos, como um logotipo ou informaes de copyright de um site, crie itens de biblioteca.
Com o uso de modelos, voc pode atualizar vrias pginas de uma vez. Um documento criado com um modelo permanece conectado a esse
modelo at ser desanexado. possvel modificar um modelo e imediatamente atualizar o design em todos os documentos nele baseados.
Nota: Os modelos do Dreamweaver diferem dos modelos de alguns outros softwares do Adobe Creative Suite, pois as sees de pgina dos
modelos do Dreamweaver so fixas (no podem ser editadas) por padro.
Para o incio
Quando voc salva um documento como modelo, grande parte das regies do documento so bloqueadas. Como autor do modelo, voc
especifica quais regies do documento baseado em modelo sero editveis. Para isso, voc insere regies editveis ou parmetros editveis no
modelo.
Ao criar o modelo, voc pode alterar as regies editveis e as regies bloqueadas. Contudo, em um documento baseado no modelo, o usurio do
modelo s pode efetuar alteraes nas regies editveis; as regies bloqueadas no podem ser modificadas.
Existem quatro tipos de regies de modelo:
Uma regio editvel Uma regio desbloqueada em um documento baseado em modelo: uma seo que o usurio do modelo pode editar. O
autor do modelo pode especificar qualquer rea do modelo como editvel. Para ser eficaz, o modelo deve conter pelo menos uma regio editvel;
caso contrrio, as pginas baseadas no modelo no podero ser editadas.
Uma regio repetitiva Uma seo do layout do documento definida para que o usurio do modelo possa adicionar ou excluir cpias da regio
repetitiva de um documento baseado no modelo quando necessrio. Por exemplo, voc pode definir que uma linha da tabela se repita. As sees
repetitivas so editveis; portanto, o usurio do modelo pode editar o contedo no elemento repetitivo, enquanto o prprio design fica sob o
controle do autor do modelo.
H dois tipos de regies repetitivas que voc pode inserir em um modelo: regio repetitiva e tabela repetitiva.
Uma regio opcional Uma seo de um modelo cujo contedo (como texto ou imagem) que pode aparecer ou no em um documento. Na
pgina baseada em modelo, o usurio do modelo geralmente controla se o contedo exibido.
Um atributo de tag editvel Permite que voc desbloqueie um atributo de tag em um modelo, de forma que o atributo possa ser editado em
uma pgina baseada em modelo. Por exemplo, voc pode "bloquear" a imagem que aparecer no documento, mas permitir que o usurio do
modelo defina o alinhamento esquerda, direita ou ao centro.
Links em modelos
Para o incio
Quando voc cria um arquivo de modelo salvando uma pgina existente como modelo, o novo modelo na pasta Modelos e os links no arquivo
so atualizados para que os caminhos relativos ao documento estejam corretos. Posteriormente, quando voc criar um documento baseado
nesse modelo e o salvar, todos os links relativos ao documento sero atualizados novamente para continuar a apontar para os arquivos corretos.
Ao adicionar um novo link de documento ao arquivo de modelo, voc pode facilmente errar o nome do caminho se o digitar na caixa de texto do
link no Inspetor de propriedades. O caminho correto em um arquivo de modelo o caminho da pasta Modelos para o documento vinculado, e no
o caminho da pasta do documento baseado em modelo para o documento vinculado. Verifique se os caminhos para os links esto corretos
usando o cone de pasta ou o cone Indicar arquivo no Inspetor de propriedades ao criar links em modelos.
Para o incio
Alguns scripts de servidor so inseridos no incio ou no fim do documento (antes da tag <html> ou aps a tag </html>). Esses scripts exigem
tratamento especial em modelos e documentos baseados em modelo. Normalmente, se voc altera o cdigo do script antes da tag <html> ou
aps a tag </html> em um modelo, as alteraes no so copiadas para os documentos que se baseiam nesse modelo. Isso pode gerar erros se
outros scripts de servidor, dentro do corpo principal do modelo, dependerem dos scripts que no forem copiados. Um alerta avisa se voc alterar
scripts antes da tag <html> ou aps a tag </html> em um modelo.
Para evitar esse problema, voc pode inserir o seguinte cdigo na seo head do modelo:
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
Quando esse cdigo est em um modelo, as alteraes em scripts antes da tag <html> ou aps a tag </html> so copiadas para documentos
baseados nesse modelo. Contudo, voc no poder mais editar esses scripts em documentos baseados no modelo. Dessa forma, voc pode
optar por editar esses scripts no modelo ou em documentos baseados no modelo, mas no em ambos.
Parmetros de modelo
Para o incio
Os parmetros de modelo indicam valores para controlar o contedo em documentos baseados em modelo. Use parmetros de modelo para
regies opcionais ou atributos de tags editveis ou para definir os valores que voc deseja passar para um documento anexado. Para cada
parmetro, voc seleciona um nome, um tipo de dados e um valor padro. Cada parmetro deve ter um nome exclusivo que diferencie
maisculas e minsculas. Eles devem ser de um dos cinco tipos de dados permitidos: texto, booliano, cor, URL ou nmero.
Os parmetros de modelo so passados para o documento como parmetros de ocorrncia. Na maioria dos casos, o usurio de um modelo pode
editar o valor padro do parmetro para personalizar o que exibido no documento baseado em modelo. Em outros casos, o autor do modelo
pode determinar o que aparece no documento, de acordo com o valor de uma expresso do modelo.
Expresses de modelo
Para o incio
valor de um parmetro, como @@(Param)@@, ou complexa o suficiente para computar valores que alternam a cor de fundo em uma linha de
tabela, como @@((_index & 1) ? red : blue)@@.
Voc tambm pode definir expresses para condies if e if mltiplo. Quando uma expresso usada em uma instruo condicional, o
Dreamweaver a avalia como verdadeira ou falsa. Se a condio verdadeira, a regio opcional aparece no documento baseado em modelo; se
falsa, ela no aparece.
Voc pode definir expresses na visualizao de cdigo ou na caixa de dilogo Regio opcional ao inserir uma regio opcional.
Na visualizao de cdigo, h duas formas de definir expresses de modelo: use o comentrio <!-- TemplateExpr expr="sua expresso"-->
comment ou @@(sua expresso)@@. Quando voc insere a expresso no cdigo de modelo, um marcador de expresso exibido na
Visualizao de design. Quando voc aplica o modelo, o Dreamweaver avalia a expresso e exibe o valor no documento baseado em modelo.
Para o incio
A linguagem da expresso de modelo um pequeno subconjunto de JavaScript e usa regras precedentes e sintaxe JavaScript. Use os
operadores JavaScript para desenvolver uma expresso como esta:
@@(firstName+lastName)@@
Estes recursos e operadores podem ser usados:
literais numricos, sequncias de caracteres literais (somente sintaxe entre aspas duplas), boolianos literais (verdadeiro ou falso)
referncia de varivel (veja a lista de variveis definidas nesta seo)
referncia de campo (operador "dot")
operadores unrios: +, -, ~, !
operadores binrios: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
operador condicional: ?:
parnteses: ()
Estes so os tipos de dados usados: booliano, ponto flutuante IEEE 64 bpc, sequncia de caracteres e objeto. Os modelos do Dreamweaver
no utilizam os tipos JavaScript nulo ou no definido. Eles tambm no permitem que tipos escalares sejam convertidos implicitamente
em um objeto; portanto, a expresso "abc".length acionaria um erro, em vez de gerar o valor 3.
Os nicos objetos disponveis so os definidos pelo modelo de objeto de expresso. As seguintes variveis so definidas:
_documento Contm os dados do modelo em nvel de documento com um campo para cada parmetro no modelo.
_repeat Definido apenas para expresses que aparecem em uma regio repetitiva. Fornece informaes internas sobre a regio
_ndice O ndice numrico (a partir de 0) da entrada atual
_numRows O nmero total de entradas nesta regio repetitiva
_isFirst Verdadeiro se a entrada atual for a primeira entrada na regio repetitiva
_isLast Verdadeiro se a entrada atual for a ltima entrada na regio repetitiva
_prevRecord O objeto _repeat da entrada anterior. um erro acessar esta propriedade para a primeira entrada na regio.
_nextRecord O objeto _repeat da prxima entrada. um erro acessar esta propriedade para a ltima entrada na regio.
_parent Em uma regio repetitiva aninhada, ele informa o objeto _repeat para a regio repetitiva externa. um erro acessar esta
propriedade fora de uma regio repetitiva aninhada.
Durante a avaliao da expresso, todos os campos dos objetos _document e _repeat esto implicitamente disponveis. Por exemplo, voc
pode inserir title em vez de _document.title para acessar o parmetro de ttulo do documento.
Em casos nos quais h conflito de campo, os campos do objeto _repeat tm prioridade em relao aos campos do objeto _document.
Portanto, no h necessidade de mencionar explicitamente _document ou _repeat, a no ser que _document seja necessrio em uma
regio repetitiva para fazer referncia aos parmetros de documento que so ocultos por parmetros de regio repetitiva.
Quando regies repetitivas aninhadas so usadas, somente os campos das regies repetitivas mais internas esto implicitamente
disponveis. As regies externas devem ser referenciadas explicitamente com _parent.
Para o incio
Voc pode definir expresses de modelo para condies if e if mltiplo. Este exemplo demonstra como definir um parmetro denominado "Dept",
como configurar um valor inicial e como definir uma condio if mltiplo que determina a exibio de determinado logotipo.
Este um exemplo do cdigo a ser inserido na seo head do modelo:
TemplateBeginMultipleIf -->
checks value of Dept and shows appropriate
TemplateBeginIfClause cond="Dept == 1" -->
TemplateBeginIfClause cond="Dept == 2" -->
TemplateBeginIfClause cond="Dept == 3" -->
TemplateBeginIfClause cond="Dept != 3" -->
TemplateEndMultipleIf -->
image-->
<img src=".../sales.gif"> <!-- TemplateEndIfClause -->
<img src=".../support.gif"> <!-- TemplateEndIfClause-->
<img src=".../hr.gif"> <!-- TemplateEndIfClause -->
<img src=".../spacer.gif"> <!-- TemplateEndIfClause -->
Quando voc cria um documento baseado em modelo, os parmetros de modelo so passados para o documento automaticamente. O usurio do
modelo determina qual imagem ser exibida.
Mais tpicos da Ajuda
Para o incio
Quando voc aplica um modelo a um documento que j tem contedo, o Dreamweaver tenta estabelecer uma correspondncia entre o contedo
existente e uma regio no modelo. Se voc estiver aplicando uma verso revisada de um seus modelos, os nomes provavelmente sero
correspondentes.
Se voc aplicar um modelo a um documento que no utilizou um modelo, no haver regies editveis para comparao e no haver
correspondncia. O Dreamweaver rastreia essas falhas de correspondncia para que voc possa selecionar para qual regio ou regies o
contedo da pgina atual ser transferido ou que voc possa excluir o contedo no correspondente.
possvel aplicar um modelo a um documento usando o painel Ativos na janela Documento. Voc pode desfazer a aplicao de um modelo se
necessrio.
Importante: Quando voc aplica um modelo a um documento existente, o modelo substitui o contedo do documento pelo contedo do modelo.
Sempre faa backup do contedo de uma pgina antes de aplicar um modelo a ela.
Para o incio
Para efetuar alteraes nas regies bloqueadas de um documento baseado em modelo, desanexe o documento do modelo. Depois de
desanexado, o documento inteiro ficar editvel.
Nota: No possvel converter um arquivo de modelo (.dwt) em um arquivo normal salvando novamente o arquivo de modelo como um arquivo
HTML (.html). Fazer isso no exclui o cdigo de modelo que aparece em todo o documento. Se voc deseja converter um arquivo de modelo em
um arquivo normal, voc pode salvar o documento como um arquivo HTML normal, mas precisa excluir manualmente todo o cdigo de modelo na
Visualizao de cdigo.
1. Abra o documento baseado em modelo a ser desanexado.
2. Selecione Modificar > Modelos > Desanexar do modelo.
O documento desanexado do modelo e todo o cdigo do modelo removido.
Para o incio
Voc pode criar um modelo a partir de um documento j existente (como um documento HTML, Adobe ColdFusion ou Microsoft Active Server
Pages) ou pode criar um modelo a partir de um documento novo.
Depois de criar um modelo, voc pode inserir regies e definir preferncias para a cor de cdigo e a cor de realce de regio de modelo.
Voc pode armazenar informaes adicionais sobre um modelo (como quem o criou, quando ele foi alterado pela ltima vez ou por que voc
optou por certos layouts) em um arquivo de Design Notes do modelo. Documentos baseados em modelo no herdam as Design Notes do
modelo.
Nota: Os modelos do Adobe Dreamweaver diferem dos modelos de alguns outros softwares do Adobe Creative Suite, pois as sees de pgina
dos modelos do Dreamweaver so fixas (no podem ser editadas) por padro.
Para obter um tutorial sobre a criao de modelos, consulte www.adobe.com/go/vid0157_br.
Para obter um tutorial sobre a utilizao de modelos, consulte www.adobe.com/go/vid0158_br.
Para o incio
Nota: A menos que voc selecione No mostrar esta caixa de dilogo novamente, receber um aviso que informa que o documento
que voc est salvando no tem regies editveis. Clique em OK para salvar o documento como um modelo ou clique em Cancelar
para sair desta caixa de dilogo sem criar um modelo.
3. Selecione um site no qual o modelo ser salvo no menu pop-up Site e insira um nome exclusivo para o modelo na caixa Salvar como.
4. Clique em Salvar. O Dreamweaver salva o arquivo de modelo na pasta Modelos do site, na pasta raiz local do site, com uma extenso .dwt.
Se a pasta Modelos ainda no existir no site, o Dreamweaver a criar automaticamente quando voc salvar o novo modelo.
Nota: No retire os modelos da pasta Modelos, nem coloque arquivos que no so de modelo nessa pasta. Tambm no transfira a pasta
Modelos para fora da pasta raiz local. Esse procedimento poder causar erros nos caminhos dos modelos.
Para o incio
Um modelo novo e sem ttulo ser adicionado lista de modelos no painel Ativos.
3. Com o modelo selecionado, insira um nome para esse modelo e pressione Enter (Windows) ou Return (Macintosh).
O Dreamweaver cria um modelo em branco no painel Ativos e na pasta Modelos.
Para o incio
Usando o Dreamweaver, voc pode criar modelos para ajudar os usurios do Adobe Contribute a criar novas pginas, a garantir uma
aparncia consistente ao respectivo site e a permitir a atualizao simultnea do layout de vrias pginas.
Depois que voc cria um modelo e faz o seu upload no servidor, ele fica disponvel para todos os usurios do Contribute que se conectam ao seu
site, a menos que voc tenha definido restries que limitem o uso do modelo a certas funes do Contribute. Se voc definiu restries para o
uso do modelo, convm adicionar cada modelo novo lista de modelos que o usurio do Contribute pode utilizar (consulte Administrao do
Contribute).
Nota: Certifique-se de que a pasta raiz do site estabelecida na definio de sites de cada usurio do Contribute seja igual pasta raiz do site
estabelecida em sua definio de sites no Dreamweaver. Se a pasta raiz do site de um usurio no corresponder sua, esse usurio no poder
utilizar modelos.
Alm dos modelos do Dreamweaver, voc pode criar modelos que no so do Dreamweaver usando as ferramentas de administrao do
Contribute. Um modelo que no seja do Dreamweaver uma pgina j existente que os usurios do Contribute podem utilizar para criar novas
pginas; ele assemelha-se a um modelo do Dreamweaver, exceto pelo fato de que as pginas que nele se baseiam no so atualizadas quando
voc o altera. Alm disso, os modelos que no so do Dreamweaver no podem conter elementos de modelo do Dreamweaver, como regies
editveis, bloqueadas, repetitivas e opcionais.
Quando um usurio do Contribute cria um novo documento em um site que contm modelos do Dreamweaver, o Contribute lista os modelos
disponveis (modelos do Dreamweaver e modelos que no so do Dreamweaver) na caixa de dilogo Nova pgina.
Para incluir pginas que usam codificaes diferentes de Latin-1 em seu site, pode ser necessrio criar modelos (sejam modelos Dreamweaver
ou noDreamweaver). Os usurios do Contribute podem editar pginas que usam qualquer codificao, mas quando criarem uma nova pgina
em branco, o programa utilizar a codificao Latin-1. Para criar uma pgina que utiliza outra codificao, o usurio do Contribute pode criar uma
cpia de uma pgina existente que utilize outra codificao ou usar um modelo que utilize outra codificao. Contudo, se no houver pginas ou
modelos no site que utilizem outras codificaes, primeiro crie uma pgina ou um modelo no Dreamweaver que utilize essa outra codificao.
Para o incio
Para o incio
Um modelo aninhado um modelo cujo design e regies editveis baseiam-se em outro modelo. Os modelos aninhados so teis para controlar o
contedo em pginas de um site que tenham muitos elementos de design em comum, mas algumas variaes entre as pginas. Por exemplo, um
modelo base pode conter reas de design mais abrangentes a serem usadas por muitos contribuidores de contedo de um site, ao passo que um
modelo aninhado pode definir melhor as regies editveis das pginas de uma seo especfica de um site.
As regies editveis de um modelo base so passadas para o modelo aninhado e permanecem editveis nas pginas criadas a partir de um
modelo aninhado, a no ser que novas regies de modelo sejam inseridas nessas regies.
As alteraes realizadas em um modelo base so automaticamente atualizadas em modelos que utilizam o modelo base e em todos os
documentos baseados em modelos que utilizam os modelos principal e aninhado.
No seguinte exemplo, o modelo trioHome contm trs regies editveis, denominadas Body, NavBar e Footer:
Para criar um modelo aninhado, um novo documento com base no modelo foi criado e, em seguida, salvo como um modelo e denominado
TrioNested. No modelo aninhado, duas regies editveis foram adicionadas regio editvel denominada Body.
Quando voc adiciona uma nova regio editvel a uma regio editvel passada para o modelo aninhado, a cor de realce da regio editvel muda
para laranja. O contedo adicionado fora da regio editvel, como o grfico na editableColumn, no poder mais ser editado em documentos
baseados no modelo aninhado. As reas editveis com realce azul, independentemente de terem sido adicionadas ao modelo aninhado ou de
serem provenientes do modelo base, permanecem editveis em documentos que se baseiam no modelo aninhado. As regies de modelo no
contm uma regio editvel passada para os documentos baseados em modelo como regies editveis.
Para o incio
Os modelos aninhados permitem que voc crie variaes de um modelo base. Voc pode aninhar diversos modelos para definir layouts cada vez
mais especficos.
Por padro, todas as regies editveis do modelo base passam do modelo aninhado para o documento baseado nesse modelo aninhado. Isso
significa que se voc criar uma regio editvel em um modelo base e, em seguida, criar um modelo aninhado, a regio editvel aparecer em
documentos baseados no modelo aninhado (se voc no inseriu novas regies de modelo nessa regio do modelo aninhado).
Nota: possvel inserir markup de modelo dentro de uma regio editvel para que ela no passe como uma regio editvel em documentos
baseados no modelo aninhado. Essas regies tm uma borda laranja em vez de azul.
1. Para criar um documento a partir do modelo no qual voc deseja basear o modelo aninhado, siga um destes procedimentos:
Na categoria Modelos do painel Ativos, clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) no modelo com o
qual voc deseja criar um novo documento e selecione Novo a partir de modelo no menu de contexto.
Selecione Arquivo > Novo. Na caixa de dilogo Novo documento, selecione a categoria Pgina de modelo e selecione o site que contm
o modelo a ser usado. Na lista Modelo, clique duas vezes no modelo para criar um novo documento.
2. Selecione Arquivo > Salvar como modelo para salvar o novo documento como um modelo aninhado:
3. Insira um nome na caixa Salvar como e clique em OK.
Para o incio
Nos modelos aninhados, as regies editveis de passagem tm uma borda azul. possvel inserir markup de modelo dentro de uma regio
editvel para que ela no passe como uma regio editvel em documentos baseados no modelo aninhado. Essas regies tm uma borda laranja
em vez de azul.
1. Na visualizao de cdigo, localize a regio editvel que no deve ser passada.
As regies editveis so definidas por tags de comentrio de modelo.
2. Acrescente o seguinte cdigo ao cdigo da regio editvel:
@@("")@@
Este cdigo de modelo pode ser colocado em qualquer lugar dentro de <!-- InstanceBeginEditable --><!As tags -- InstanceEndEditable -->
que rodeiam a regio editvel. Por exemplo:
Para o incio
As regies editveis do modelo controlam quais reas de uma pgina baseada em modelo o usurio pode editar. Antes de inserir uma regio
editvel, salve o documento no qual voc est trabalhando como um modelo.
Nota: Se voc inserir uma regio editvel em um documento, e no em um arquivo de modelo, receber um alerta de que o documento ser
automaticamente salvo como um modelo.
Voc pode posicionar a regio editvel em qualquer local da pgina, mas considere os seguintes pontos caso esteja criando uma tabela ou um
elemento de posicionamento absoluto (elemento PA) editvel:
Voc pode marcar uma tabela inteira ou uma clula especfica da tabela como editvel, mas no pode marcar vrias clulas da tabela
como uma nica regio editvel. Se uma tag <td> estiver selecionada, a regio editvel incluir a regio ao redor da clula; caso contrrio, a
regio editvel afetar somente o contedo dentro da clula.
Os elementos PA e o contedo dos elementos PA so itens separados. Ao tornar um elemento PA editvel, voc altera a posio do
elemento PA, bem como a de seu contedo. Entretanto, ao tornar o contedo de um elemento PA editvel, voc pode alterar somente o
contedo do elemento PA, e no sua posio.
1. Na janela Documento, proceda de uma das seguintes maneiras para selecionar a regio:
Selecione o texto ou o contedo que voc deseja definir como uma regio editvel.
Posicione o ponto de insero onde voc pretende inserir uma regio editvel.
2. Proceda de uma das seguintes maneiras para inserir uma regio editvel:
Selecione Inserir > Objetos de modelo > Regio editvel.
Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Nova regio editvel.
Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio editvel, no menu pop-up.
3. Na caixa de texto Nome, insira um nome exclusivo para a regio. (No possvel usar o mesmo nome para mais de uma regio editvel
em determinado modelo.)
Nota: No use caracteres especiais na caixa Nome.
4. Clique em OK. A regio editvel fica dentro de um retngulo realado no modelo, cuja cor de realce definida nas preferncias. Uma aba
no canto superior esquerdo indica o nome da regio. Se voc inserir uma regio editvel vazia no documento, o nome da regio tambm
aparecer dentro da regio.
Para o incio
Voc pode facilmente identificar e selecionar regies no documento de modelo e nos documentos baseados em modelo.
Para o incio
Se voc marcou uma regio do arquivo de modelo como editvel e deseja bloque-la (torn-la no editvel em documentos baseados em
Para o incio
Para o incio
Uma regio repetitiva uma seo do modelo que pode ser duplicada inmeras vezes em uma pgina baseada em modelo. Normalmente, as
regies repetitivas so usadas com tabelas mas possvel definir uma regio repetitiva para outros elementos da pgina.
As regies repetitivas permitem que voc controle o layout da pgina por meio da repetio de certos itens, como um item de catlogo e um
layout de descrio, ou uma linha de dados como uma lista de itens.
Voc pode usar dois objetos de modelo de regio repetitiva: regio repetitiva e tabela repetitiva.
Para o incio
As regies repetitivas permitem que os usurios do modelo dupliquem uma regio especfica de um modelo o quanto desejarem. Uma regio
repetitiva no necessariamente uma regio editvel.
Para criar contedo em uma regio repetitiva editvel (por exemplo, permitir que um usurio insira texto em uma clula da tabela do documento
baseado em modelo), preciso inserir uma regio editvel na regio repetitiva.
1. Na janela Documento, siga um destes procedimentos:
Selecione o texto ou o contedo que voc deseja definir como uma regio repetitiva.
Posicione o ponto de insero no documento onde voc deseja inserir a regio repetitiva.
2. Siga um destes procedimentos:
Selecione Inserir > Objetos de modelo > Regio repetitiva.
Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Nova regio repetitiva.
Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio repetitiva no menu pop-up.
3. Na caixa Nome, insira um nome exclusivo para a regio do modelo. (No possvel usar o mesmo nome para mais de uma regio
repetitiva em um modelo.)
Nota: Ao nomear uma regio, no use caracteres especiais.
4. Clique em OK.
Para o incio
Voc pode usar uma tabela repetitiva para criar uma regio editvel (em formato de tabela) com linhas repetitivas. Voc pode definir atributos de
tabela e determinar quais clulas so editveis.
1. Na janela Documento, posicione o ponto de insero onde a tabela repetitiva deve ser includa no documento.
2. Siga um destes procedimentos:
Selecione Inserir > Objetos de modelo > Tabela repetitiva.
Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Tabela repetitiva, no menu pop-up.
3. Especifique as opes a seguir e clique em OK.
Linhas Determina o nmero de linhas da tabela.
Colunas determina o nmero de colunas da tabela.
Preenchimento da clula determina o nmero de pixels entre o contedo e os limites da clula.
Espaamento da clula Determina o nmero de pixels entre as clulas de tabela adjacentes.
Se voc no atribuir valores explicitamente para o preenchimento e o espaamento da clula, a maioria dos navegadores exibir a
tabela como se o preenchimento da clula estivesse definido como 1 e o espaamento como 2. Para garantir que os navegadores
exibiro a tabela sem preenchimento ou espaamento, defina Preenchimento da clula e Espaamento da clula como 0.
Largura Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador.
Borda Especifica a largura, em pixels, das bordas da tabela.
Se voc no atribuir explicitamente um valor de borda, a maioria dos navegadores exibir a tabela como se a borda estivesse definida
como 1. Para que os navegadores exibam a tabela sem bordas, defina Borda como 0. Para visualizar os limites da clula e da tabela
quando a borda estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da tabela.
Repetir linhas da tabela Especifica as linhas da tabela que sero includas na regio repetitiva.
Linha inicial Define o nmero especificado como a primeira linha a ser includa na regio repetitiva.
Linha final Define o nmero especificado como a ltima linha a ser includa na regio repetitiva.
Nome da regio Permite definir um nome exclusivo para a regio repetitiva.
Para o incio
Aps inserir uma tabela repetitiva em um modelo, voc pode personaliz-la alternando a cor de fundo das linhas da tabela.
1. Na janela Documento, selecione uma linha na tabela repetitiva.
2. Clique no boto Mostrar visualizao de cdigo ou Mostrar visualizao de design na barra de ferramentas Documento para acessar o
cdigo da linha de tabela selecionada.
3. Na visualizao de cdigo, edite a tag <tr> para incluir o seguinte cdigo:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
Voc pode substituir os valores hexadecimais #FFFFFF e #CCCCCC por outras opes de cor.
4. Salve o modelo.
Este um exemplo de cdigo de uma tabela que inclui cores de linha de fundo alternadas:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
Mais tpicos da Ajuda
Para o incio
Os modelos do Dreamweaver especificam regies que so bloqueadas (no editveis) e outras que so editveis para documentos baseados em
modelos.
Nas pginas baseadas em modelos, os usurios do modelo s podem editar o contedo em regies editveis. Voc pode facilmente identificar e
selecionar regies editveis para editar contedo. Os usurios do modelo no podem editar o contedo das regies bloqueadas.
Nota: Se voc tentar editar uma regio bloqueada em um documento baseado em modelo quando o realce estiver desativado, o ponteiro do
mouse mudar para indicar que no possvel clicar em uma regio bloqueada.
Os usurios do modelo tambm podem modificar propriedades e editar entradas de uma regio repetitiva em documentos baseados em modelos.
Para o incio
Quando os autores do modelo criam parmetros em um modelo, os documentos baseados no modelo herdam automaticamente os parmetros e
suas configuraes de valor iniciais. O usurio do modelo pode atualizar os atributos de tag editveis e outros parmetros de modelo (como
configuraes de regio opcionais).
Para o incio
Use controles de regio repetitiva para adicionar, excluir ou alterar a ordem de entradas em documentos baseados em modelo. Quando voc
adiciona uma entrada de regio repetitiva, uma cpia da regio repetitiva inteira adicionada. Para atualizar o contedo nas regies repetitivas, o
Para o incio
Quando voc efetua alteraes e salva um modelo, todos os documentos baseados no modelo so atualizados. Voc tambm pode atualizar
manualmente um documento baseado em modelo ou o site inteiro, caso isso seja necessrio.
Nota: Para editar um modelo para um site do Contribute, use o Dreamweaver; no possvel editar modelos no Contribute.
Use a categoria Modelos do painel Ativos para gerenciar modelos existentes, inclusive renomear e excluir arquivos de modelo.
Voc pode executar estas tarefas de gerenciamento de modelo com o painel Ativos:
Criar um modelo
Editar e atualizar modelos
Aplicar ou remover um modelo em um documento
O Dreamweaver verifica a sintaxe do modelo ao salv-lo. No recomendvel verificar manualmente a sintaxe durante a edio do modelo.
Para o incio
Voc pode abrir um arquivo de modelo diretamente para edio ou abrir um documento baseado em modelo e, em seguida, abrir o modelo
anexado para edio.
Quando voc realiza uma alterao em um modelo, o Dreamweaver solicita que voc atualize os documentos baseados no modelo.
Nota: Voc tambm pode atualizar manualmente os documentos para refletir as alteraes do modelo, caso isso seja necessrio.
O painel Ativos lista todos os modelos disponveis para o site e exibe uma visualizao do modelo selecionado.
2. Na lista de modelos disponveis, siga um destes procedimentos:
Clique duas vezes no nome do modelo a ser editado.
Selecione um modelo para edio e clique no boto Editar
Para modificar as propriedades de pgina do modelo, selecione Modificar > Propriedades da pgina. (Os documentos baseados em um
modelo herdam as propriedades de pgina do modelo.)
4. Salve o modelo. O Dreamweaver solicita que voc atualize pginas com base no modelo.
5. Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em No atualizar se no quiser atualizar os
documentos baseados no modelo modificado.
O Dreamweaver exibe um registro que indica os arquivos que foram atualizados.
Para o incio
Renomear um modelo
1. No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel
Para o incio
A descrio do modelo aparece na caixa de dilogo Novo documento quando voc cria uma pgina a partir de um modelo existente.
1. Selecione Modificar > Modelos > Descrio.
2. Na caixa de dilogo Descrio do modelo, edite a descrio e clique em OK.
Para o incio
Quando voc faz uma alterao em um modelo, o Dreamweaver solicita que voc atualize os documentos baseados no modelo. Voc pode
atualizar manualmente o documento atual ou o site inteiro, caso seja necessrio. O processo de atualizao manual dos documentos baseados
em modelo igual ao de reaplicao do modelo.
Para o incio
Os usurios do Contribute no podem alterar um modelo do Dreamweaver. Entretanto, voc pode usar o Dreamweaver para alterar um modelo
de um site do Contribute.
Lembre-se do seguinte ao atualizar modelos em um site do Contribute:
O Contribute somente recupera modelos novos e alterados no site quando o Contribute iniciado e quando um usurio do Contribute altera
as respectivas informaes de conexo. Se voc efetuar alteraes em um modelo enquanto um usurio do Contribute edita um arquivo
baseado nesse modelo, o usurio no ver as alteraes no modelo at reiniciar o Contribute.
Se voc remover uma regio editvel de um modelo, o usurio do Contribute que estiver editando uma pgina baseada nesse modelo pode
ficar confuso sobre o que fazer com o contedo da regio editvel.
Para atualizar um modelo em um site do Contribute, siga as etapas a seguir.
1. Abra o modelo do Contribute no Dreamweaver, edite-o e salve-o. Para obter instrues, consulte Abrir um modelo para edio.
2. Solicite que todos os usurios do Contribute que estiverem trabalhando no site reiniciem o Contribute.
Para o incio
Para o incio
Voc pode considerar um documento baseado em modelo como um documento que contm dados representados por pares de nome e valor.
Cada par consiste no nome de uma regio editvel e o contedo dessa regio.
Voc pode exportar os pares de nome e valor para um arquivo XML para poder trabalhar com os dados fora do Dreamweaver (por exemplo, em
um editor XML ou um editor de texto, ou um aplicativo de banco de dados). Inversamente, se voc tiver um documento XML que esteja
estruturado corretamente, poder importar os dados dele para um documento baseado em um modelo do Dreamweaver.
Para o incio
Para o incio
Para o incio
Voc pode exportar documentos baseados em modelo de um site para outro sem incluir o markup de modelo.
1. Selecione Modificar > Modelos > Exportar sem markup.
2. Na caixa Pasta, insira o caminho at a pasta para a qual o arquivo ser exportado ou clique em Procurar e selecione a pasta.
Nota: Voc deve selecionar uma pasta fora do site atual.
3. Se voc quiser salvar uma verso XML dos documentos baseados em modelo, selecione Manter arquivos de dados de modelo.
4. Se voc quiser atualizar alteraes em arquivos exportados anteriormente, selecione Extrair somente arquivos alterados e clique em OK.
de
de
de
de
Para o incio
Na visualizao de design, as regies editveis aparecem na janela Documento entre contornos retangulares com uma cor de realce predefinida.
Uma pequena aba aparece no canto superior esquerdo de cada regio, indicando o nome da regio.
Para identificar um arquivo de modelo, verifique a barra de ttulo na janela Documento. A barra de ttulo de um arquivo de modelo contm a
palavra <<Modelo>> e a extenso do nome de arquivo .dwt.
Para o incio
Na Visualizao de cdigo, as regies de contedo editvel so marcadas em HTML com os seguintes comentrios:
<!-- TemplateBeginEditable> and <!-- TemplateEndEditable -->
Voc pode usar preferncias de cor de cdigo para definir seu prprio esquema de cores de forma a diferenciar facilmente as regies do
modelo quando exibir um documento na Visualizao de cdigo.
Tudo o que estiver entre esses comentrios ser editvel nos documentos baseados no modelo. O cdigo de origem HTML de uma regio
editvel deve ser assim:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>
Nota: Ao editar o cdigo do modelo na visualizao de cdigo, tenha cuidado para no alterar as tags de comentrio relacionadas ao modelo
que o Dreamweaver utiliza.
Para o incio
Em um documento baseado em modelo, as regies editveis aparecem na Visualizao de design da janela Documento circundadas por
contornos retangulares em uma cor de realce predefinida. Uma pequena aba aparece no canto superior esquerdo de cada regio, indicando o
nome da regio.
Alm dos contornos de regies editveis, a pgina inteira tem um contorno em outra cor, com uma aba no canto superior direito que exibe o
nome do modelo do documento. Esse retngulo realado informa que o documento baseia-se em um modelo e que possvel alterar o contedo
fora das regies editveis.
Para o incio
Na visualizao de cdigo, as regies editveis de um documento derivadas de um modelo aparecem em uma cor diferente da do cdigo nas
regies no editveis. Voc pode efetuar alteraes somente no cdigo nas regies editveis ou nos parmetros editveis, e no pode digitar nas
regies bloqueadas.
O contedo editvel marcado em HTML com os seguintes Dreamweaver comentrios:
<!-- InstanceBeginEditable> and <!-- InstanceEndEditable -->
Tudo o que est entre esses comentrios editvel em um documento baseado em modelo. O cdigo de origem HTML de uma regio editvel
deve ser assim:
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
A cor padro de um texto no editvel cinza. Voc pode selecionar outra cor para as regies editveis e no editveis na caixa de dilogo
Preferncias.
Mais tpicos da Ajuda
Para o incio
As preferncias de cor de cdigo controlam atributos de texto, cor de fundo e estilo do texto exibido na visualizao de cdigo. Voc pode definir
seu prprio esquema de cores para diferenciar facilmente as regies do modelo quando visualizar um documento na Visualizao de cdigo.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Codificao por cores na lista de categorias esquerda.
3. Selecione HTML na lista Tipo de documento e clique no boto Editar esquema de cores.
4. Na lista Estilos de, selecione Tags de modelo.
5. Defina os atributos de cor, cor de fundo e estilo para o texto da visualizao de cdigo da seguinte maneira:
Para alterar a cor do texto, na caixa Cor do texto, digite o valor hexadecimal da cor a ser aplicada ao texto selecionado ou use o seletor
de cores para escolher uma cor para aplicar ao texto. Faa o mesmo no campo Fundo para adicionar ou alterar uma cor de fundo do
texto selecionado.
Para adicionar um atributo de estilo ao cdigo selecionado, clique nos botes N (negrito), I (itlico) ou S (sublinhado) para definir o
formato desejado.
6. Clique em OK.
Nota: Se quiser efetuar alteraes globais, voc poder editar o arquivo de origem que armazena suas preferncias. No Windows XP, ele
est localizado em C:\Documents and Settings\%nome do usurio%\Application Data\Adobe\Dreamweaver
9\Configuration\CodeColoring\Colors.xml. No Windows Vista, ele est localizado em C:\Users\%nome do usurio%\Application
Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
Para o incio
Voc pode usar as preferncias de realce do Dreamweaver para personalizar as cores de realce dos contornos das regies editveis e
bloqueadas de um modelo na Visualizao de design. A cor da regio editvel aparece no modelo, bem como nos documentos baseados no
modelo.
Sintaxe do modelo
Regras gerais de sintaxe
Tags de modelo
Tags de ocorrncia
Verificar sintaxe de modelo
Para o incio
O Dreamweaver usa tags de comentrio HTML para especificar regies em modelos e documentos baseados em modelo, de forma que os
documentos baseados em modelo permanecem arquivos HTML vlidos. Quando voc insere um objeto de modelo, as tags de modelo so
inseridas no cdigo.
Estas so regras gerais de sintaxe:
Voc sempre pode substituir qualquer espao em branco (espaos, abas, quebras de linha) que aparecer. O espao em branco
obrigatrio, exceto no incio ou no fim de um comentrio.
Os atributos podem ser especificados em qualquer ordem. Por exemplo, em um TemplateParam, possvel especificar o tipo antes do
nome.
Os nomes de atributo e comentrio diferenciam maisculas e minsculas.
Todos os atributos devem estar entre aspas. Podem ser usadas aspas simples ou duplas.
Tags de modelo
Para o incio
Tags de ocorrncia
O Dreamweaver usa as seguintes tags de ocorrncia:
<!-<!-<!-<!-<!-<!--
Para o incio
Para o incio
O Dreamweaver verifica a sintaxe quando voc salva o modelo, mas voc pode verificar manualmente a sintaxe do modelo antes de salvar o
modelo. Por exemplo, se voc adicionar uma expresso ou um parmetro de modelo na visualizao de cdigo, poder verificar se o cdigo
segue a sintaxe correta.
1. Abra o documento a ser verificado na janela Documento.
2. Selecione Modificar > Modelos > Verificar sintaxe de modelo.
exibida uma mensagem de erro se a sintaxe estiver mal formulada. A mensagem de erro descreve o erro e refere-se linha especfica do
cdigo em que est o erro.
Mais tpicos da Ajuda
Para o incio
Uma regio opcional uma regio em um modelo que os usurios podem definir para que seja exibida ou oculta em um documento baseado em
modelo. Use uma regio opcional quando quiser definir condies para a exibio de contedo em um documento.
Ao inserir uma regio opcional, voc pode definir valores especficos para um parmetro de modelo ou definir instrues condicionais (instrues
If...else) para regies do modelo. Use operaes verdadeiro/falso simples ou defina expresses e instrues condicionais mais complexas.
Posteriormente, voc poder modificar a regio opcional, caso seja necessrio. De acordo com as condies que voc definir, os usurios do
modelo podem editar os parmetros em documentos baseados em modelo e controlar se a regio opcional exibida.
Voc pode vincular vrias regies opcionais a um determinado parmetro. No documento baseado em modelo, as duas regies sero exibidas ou
ocultas como uma unidade. Por exemplo, voc pode exibir uma imagem "fechada" e uma rea de texto com o preo de venda de um item.
Para o incio
Use uma regio opcional para controlar o contedo que pode ou no ser exibido em um documento baseado em modelo. Existem dois tipos de
regies opcionais:
Regies opcionais no editveis, que permitem aos usurios do modelo mostrar e ocultar regies marcadas sem ativ-las para a edio do
contedo.
A aba do modelo de uma regio opcional precedida da palavra if. Com base na condio definida no modelo, o usurio pode definir se
possvel visualizar a regio nas pginas que ele cria.
Regies opcionais editveis, que permitem aos usurios do modelo definir se a regio ser exibida ou no, e lhes permite editar contedo
na regio.
Por exemplo, se a regio opcional inclui uma imagem ou um texto, o usurio do modelo pode definir se o contedo ser exibido, bem como
editar o contedo se assim desejar. Uma regio editvel controlada por uma instruo condicional.
Para o incio
Voc pode editar as configuraes da regio opcional depois de inserir a regio em um modelo. Por exemplo, voc pode alterar se a configurao
padro para o contedo deve ser exibida ou no, vincular um parmetro a uma regio opcional existente ou modificar uma expresso de modelo.
Crie parmetros de modelo e defina instrues condicionais (instrues If... else) para regies de modelo. Voc pode usar operaes
verdadeiro/falso simples ou definir expresses e instrues condicionais mais complexas.
Na aba Avanado, voc pode vincular vrias regies opcionais a determinado parmetro. No documento baseado em modelo, as duas regies
sero exibidas ou ocultas como uma unidade. Por exemplo, voc pode exibir uma imagem "fechada" e uma rea de texto com o preo de venda
de um item.
Voc tambm pode usar a aba Avanado para gravar uma expresso de modelo que avalie um valor para a regio opcional que a exibir ou
ocultar.
1. Na janela Documento, siga um destes procedimentos:
Na Visualizao de design, clique na aba de modelo da regio opcional que voc deseja modificar.
Na Visualizao de design, posicione o ponto de insero na regio de modelo; em seguida, no seletor de tag, na parte inferior da
janela Documento, selecione a tag de modelo<mmtemplate:if>.
Na visualizao de cdigo, clique na aba de comentrio da regio de modelo que voc deseja modificar.
2. No Inspetor de propriedades (Janela > Propriedades), clique em Editar.
3. Na aba Bsica, insira um nome para o parmetro na caixa Nome.
4. Selecione Mostrar por padro para definir a regio selecionada a ser exibida no documento. Desmarque-a para definir o valor padro como
falso.
Nota: Para definir outro valor para o parmetro, na visualizao de cdigo, localize o parmetro na seo do documento e edite o valor.
5. (Opcional) Clique na aba Avanado e defina as seguintes opes:
Se voc quiser vincular parmetros de regies opcionais, clique na aba Avanado, selecione Usar parmetro e, no menu pop-up,
selecione o parmetro existente que voc deseja vincular ao contedo selecionado.
Para gravar uma expresso de modelo a fim de controlar a exibio de uma regio opcional, clique na aba Avanado, selecione Inserir
expresso e informe a expresso na caixa.
Nota: O Dreamweaver insere marcas de aspas duplas em torno do texto inserido.
6. Clique em OK.
Quando voc usa o objeto de modelo Regio opcional, o Dreamweaver insere comentrios de modelo no cdigo. Um parmetro de modelo
definido na seo head, como no seguinte exemplo:
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
No local em que a regio opcional inserida, um cdigo semelhante a este exibido:
<!-- TemplateBeginIf cond="departmentImage" -->
<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>
<!-- TemplateEndIf -->
Voc pode acessar e editar parmetros de modelo no documento baseado em modelo.
Mais tpicos da Ajuda
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Para o incio
necessrio especificar um URL da Web para que o Dreamweaver possa usar os servios de um servidor de teste para exibir dados e se
conectar a bancos de dados enquanto voc trabalha. O Dreamweaver usa conexo de tempo de design para fornecer informaes teis sobre o
banco de dados, como os nomes das tabelas e das colunas das tabelas do banco de dados.
O URL da Web de um servidor de teste compreende o nome de domnio e os diretrios virtuais ou subdiretrios do diretrio inicial do site.
Nota: A terminologia usada no Microsoft IIS pode variar de servidor para servidor, mas os mesmos conceitos se aplicam maioria dos
servidores Web.
O diretrio inicial A pasta no servidor mapeada para o nome de domnio do site. Suponha que a pasta que voc deseja usar para processar
pginas dinmicas esteja em c:\sites\company\ e que essa pasta seja seu diretrio inicial (ou seja, essa pasta mapeada para o nome de
domnio do seu site; por exemplo, www.mystartup.com). Nesse caso, o prefixo de URL http://www.mystartup.com/.
Se a pasta que voc deseja usar para processar pginas dinmicas uma subpasta do seu diretrio inicial, basta adicionar a subpasta ao URL.
Se seu diretrio inicial c:\sites\company\, o nome de domnio do seu site www.mystartup.com e a pasta usada para processar pginas
dinmicas c:\sites\company\inventory. Digite o seguinte URL da Web:
http://www.mystartup.com/inventory/
Se a pasta que voc deseja usar para processar pginas dinmicas no for seu diretrio inicial ou qualquer um de seus subdiretrios, crie um
diretrio virtual.
Um diretrio virtual Uma pasta que est contida fisicamente no diretrio inicial do servidor, ainda que ela parea estar no URL. Para criar um
diretrio virtual, especifique um alias para o caminho da pasta no URL. Suponha que seu diretrio inicial c:\sites\company, sua pasta de
processamento d:\apps\inventory e voc defina um alias para essa pasta chamado warehouse. Digite o seguinte URL da Web:
http://www.mystartup.com/warehouse/
Host local Refere-se aos diretrios inicias nos seus URLs quando o cliente (geralmente, um navegador, mas, neste caso, o Dreamweaver)
executado no mesmo sistema do servidor da web. Suponha que o Dreamweaver seja executado no mesmo sistema Windows do servidor da web,
seu diretrio inicial seja c:\sites\company e voc tenha definido um diretrio virtual chamado "warehouse" para se referir pasta que deseja usar
para processar pginas dinmicas. Estes so os URLs da Web que devem ser digitados para os servidores Web selecionados:
Servidor da web
URL da Web
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
http://localhost:80/warehouse/
http://localhost:8080/warehouse/
Nota: Por padro, o servidor Web ColdFusion MX 7 executado na porta 8500, o servidor Web Apache executado na porta 80 e o servidor
Web Jakarta Tomcat executado na porta 8080.
Para os usurios de Macintosh que executam o servidor Web Apache, o diretrio inicial pessoal Users/MyUserName/Sites, em que
MyUserName o nome do usurio do Macintosh. Um alias chamado ~MyUserName automaticamente definido para essa pasta quando voc
instala o Mac OS 10.1 ou superior. Portanto, o URL da Web padro do Dreamweaver o seguinte:
http://localhost/~MyUserName/
Se a pasta que voc deseja usar para processar pginas dinmicas for Users:MyUserName:Sites:inventory, o URL da Web ser o seguinte:
http://localhost/~MyUserName/inventory/
Escolha do servidor de aplicativo
Preparao para criao de sites dinmicos
Para o incio
O Dreamweaver acompanha um conjunto de comportamentos de servidor incorporados que permite adicionar recursos dinmicos a um site. Voc
pode estender a funcionalidade do Dreamweaver criando comportamentos de servidor para atender s suas necessidades de desenvolvimento ou
obtendo comportamentos de servidor no site do Dreamweaver Exchange.
Antes de criar comportamentos de servidor prprios, voc deve visitar o site do Dreamweaver Exchange para ver se alguma outra parte j criou
um comportamento de servidor que fornece a funcionalidade que voc gostaria de adicionar ao site. Em geral, um desenvolvedor de outro
fabricante j criou e testou um comportamento de servidor que atender s suas necessidades.
Para o incio
Caso seja um desenvolvedor proficiente em ColdFusion, JavaScript, VBScript ou PHP, voc pode escrever seus prprios comportamentos de
servidor. Entre as etapas para criar um comportamento de servidor esto as seguintes tarefas:
Escreva um ou mais blocos de cdigo que realizem a ao obrigatria.
Especifique onde o bloco de cdigo deve ser inserido no cdigo HTML da pgina.
Caso o comportamento de servidor exija que um valor seja especificado para um parmetro, crie uma caixa de dilogo que solicite ao
desenvolvedor que est aplicando o comportamento fornecer um valor apropriado.
Teste o comportamento de servidor antes de disponibiliz-lo aos demais.
Para o incio
Use o Criador de comportamentos de servidor para adicionar o(s) bloco(s) de cdigo que o comportamento insere em uma pgina.
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Novo
comportamento de servidor.
2. No menu pop-up Tipo de documento, selecione o tipo de documento para o qual voc est desenvolvendo o comportamento de servidor.
Opes avanadas
Depois que voc especifica o cdigo-fonte e insere o local de cada bloco de cdigo, o comportamento de servidor est totalmente definido. Na
maioria dos casos, voc no precisa especificar nenhuma informao adicional.
Caso seja um usurio avanado, voc pode definir uma das seguintes opes:
Identificador Especifica se o bloco de cdigo deve ser tratado como um identificador.
Por padro, todos os blocos de cdigo so identificadores. Caso o Dreamweaver localize um bloco de cdigo identificador em qualquer lugar de
um documento, ele lista o comportamento no painel Comportamentos de servidor. Use a opo Identificador para especificar se o bloco de cdigo
deve ser tratado como um identificador.
Pelo menos um dos blocos de cdigo do comportamento de servidor deve ser identificador. Um bloco de cdigo no deve ser um identificador
caso uma das seguintes condies se aplique: o mesmo bloco de cdigo usado por outro comportamento de servidor, ou o bloco to simples
que pode ocorrer naturalmente na pgina.
Ttulo do comportamento de servidor Especifica o ttulo do comportamento no painel Comportamentos de servidor.
Quando o designer da pgina clicar no boto de adio (+) no painel Comportamentos de servidor, o ttulo do novo comportamento de servidor
ser exibido no menu pop-up. Quando um designer aplica uma ocorrncia de um comportamento de servidor a um documento, o comportamento
exibido na lista de comportamentos aplicados no painel Comportamentos de servidor. Use a caixa Ttulo do comportamento de servidor para
especificar o contedo do menu pop-up de adio (+) e a lista dos comportamentos aplicados.
O valor inicial da caixa o nome que voc forneceu na caixa de dilogo Novo comportamento de servidor. medida que os parmetros so
definidos, o nome atualizado automaticamente para que os parmetros sejam exibidos entre parnteses depois do nome do comportamento de
servidor.
Set Session Variable (@@Name@@, @@Value@@)
Caso o usurio aceite o valor padro, tudo o que estiver antes dos parnteses exibido no menu pop-up de adio (+) (por exemplo, Definir
varivel de sesso). O nome mais os parmetros sero exibidos na lista dos comportamentos aplicados por exemplo, Definir varivel de sesso
("abcd", "5").
Bloco de cdigo a ser selecionado Especifica o bloco de cdigo selecionado quando o usurio seleciona o comportamento no painel
Comportamentos de servidor.
Quando voc aplica um comportamento de servidor, um dos blocos de cdigo do comportamento designado como sendo o bloco de cdigo a
ser selecionado. Caso voc aplique o comportamento de servidor e, em seguida, selecione o comportamento no painel Comportamentos de
servidor, o bloco designado selecionado na janela Documento. Por padro, o Dreamweaver seleciona o primeiro bloco de cdigo que no esteja
acima da tag html. Caso todos os blocos de cdigo estejam acima da tag html, selecionado o primeiro. Os usurios avanados podem
especificar qual o bloco de cdigo selecionado.
Para o incio
Os blocos de cdigo que voc cria no Criador de comportamentos de servidor so integrados em um comportamento de servidor exibido no
painel Comportamentos de servidor. O cdigo pode ser qualquer cdigo de runtime vlido para o modelo de servidor especificado. Por exemplo,
caso voc escolha ColdFusion como o tipo de documento para o comportamento de servidor personalizado, o cdigo que voc escreve deve ser
um cdigo do ColdFusion vlido em execuo em um servidor de aplicativo do ColdFusion.
Voc pode criar os blocos de cdigo diretamente no Criador de comportamentos de servidor ou copiar e colar o cdigo de outras fontes. Cada
bloco de cdigo que voc cria no Criador de comportamentos de servidor deve ser um bloco com tag ou script nico. Caso voc insira vrios
blocos de tag, divida-os em blocos de cdigo separados.
Condies em blocos de cdigo
O Dreamweaver permite que voc desenvolva blocos de cdigo que incorporam instrues de controle executadas periodicamente. O Criador de
comportamentos de servidor usa as instrues if, elseif e else, podendo conter parmetros do comportamento de servidor. Isso permite inserir
blocos de texto alternativos com base nos valores das relaes OR entre os parmetros de comportamento do servidor.
O seguinte exemplo mostra as instrues if, elseif e else. Os colchetes ([ ]) indicam o cdigo opcional e o asterisco (*), zero ou mais instncias.
Para executar uma parte de um bloco de cdigo ou todo o bloco somente se uma ou mais determinadas condies se aplicarem, use a seguinte
sintaxe:
<@ if (expression1) @>
conditional
text1[<@ elseif (expression2) @>
conditional text2]*[<@ else @>
conditional text3]<@ endif @>
As expresses de condio podem ser qualquer expresso JavaScript que possa ser avaliada com o uso da funo eval() do JavaScript,
podendo incluir um parmetro do comportamento de servidor marcado por @@s. (Os @@s diferenciam o parmetro das variveis e palavraschave do JavaScript.)
Uso efetivo de expresses condicionais
Durante o uso das diretivas if, else e elseif dentro da tag XML insertText, o texto participante pr-processado para resolver as diretivas if e
determinar o texto a ser includo no resultado. As diretivas if e elseif usam a expresso como um argumento. A expresso de condio igual s
expresses de condio JavaScript, tambm podendo conter parmetros do comportamento de servidor. Diretivas como essa permitem optar por
blocos de cdigo alternativos baseados nos valores ou nas relaes entre parmetros do comportamento de servidor.
Por exemplo, o seguinte cdigo do JSP acompanha um comportamento de servidor do Dreamweaver que usa um bloco de cdigo convencional:
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();<@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
O bloco de cdigo convencional comea com <@ if (@@callableName@@ != '') @> e termina com <@ endif @>. De acordo com o cdigo, caso
o usurio digite um valor para o parmetro @@callableName@@ na caixa de dilogo Parmetro do comportamento de servidor em outras
palavras, caso o valor de parmetro @@callableName@@ no seja nulo ou (@@callableName@@ != '') , o bloco de cdigo condicional
substitudo pelas seguintes instrues:
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
Do contrrio, o bloco de cdigo substitudo pela seguinte instruo:
@@rsName@@ = Statement@@rsName@@.executeQuery();
Para o incio
Ao criar blocos de cdigo usando o Criador de comportamentos de servidor, voc deve especificar onde inseri-los no cdigo HTML da pgina.
Por exemplo, caso insira um bloco de cdigo acima da tag de abertura <html>, voc deve especificar a posio do bloco em relao s demais
tags, scripts e comportamentos de servidor na seo do cdigo HTML da pgina. Entre os exemplos tpicos esto o posicionamento de um
comportamento antes ou depois de qualquer consulta ao conjunto de registros que tambm possa existir no cdigo da pgina acima da tag de
abertura <html>.
Quando voc seleciona uma opo de posicionamento no menu pop-up Inserir cdigo, as opes disponveis no menu pop-up Posio relativa
mudam para fornecer opes relevantes a essa parte da pgina. Por exemplo, caso voc selecione Acima da tag <html> no menu pop-up Inserir
cdigo, as opes de posicionamento disponveis no menu pop-up Posio relativa refletem opes relevantes parte da pgina.
A seguinte tabela mostra as opes de insero do bloco de cdigo, alm das opes de posicionamento relativo disponveis a cada uma:
Opes de Inserir cdigo
No incio do arquivo
Logo antes dos conjuntos de registros
Logo aps os conjuntos de registros
Logo acima da tag <html>
Posio personalizada
Relativo seleo
Antes da seleo
Aps a seleo
Substituir a seleo
Envolver a seleo
Para especificar uma posio personalizada, voc deve atribuir um peso ao bloco de cdigo. Use a opo Posio personalizada somente
quando voc quiser inserir mais de um bloco de cdigo em uma determinada ordem. Por exemplo, para inserir uma srie ordenada dos trs
blocos de cdigo aps os blocos de cdigo que abrem os conjuntos de registros, voc inseriria um peso 60 para o primeiro bloco, 65 para o
segundo e 70 para o terceiro.
Por padro, o Dreamweaver atribui um peso 50 a todos os blocos de cdigo que abrem o conjunto de registros inseridos acima da tag <html>.
Caso o peso de dois ou mais blocos seja o mesmo, o Dreamweaver define aleatoriamente a ordem entre os blocos.
Posicionar um bloco de cdigo relativo a uma tag selecionada pelo designer da pgina
1. No menu pop-up Inserir cdigo, selecione Relativo seleo.
2. Especifique um local relativo seleo escolhendo uma opo no menu pop-up Posio relativa.
Voc pode inserir o cdigo de bloco logo antes ou logo depois da seleo. Voc tambm pode substituir a seleo pelo bloco de cdigo ou
envolv-lo em torno da seleo.
Para envolver o bloco de cdigo em torno de uma seleo, a seleo deve consistir em tags de abertura e de fechamento sem nada entre
elas como a seguinte:
<CFIF Day="Monday"></CFIF>
Insira a parte da tag de abertura do bloco de cdigo antes da tag de abertura da seleo e a parte da tag de fechamento do bloco de
cdigo depois da tag de fechamento da seleo.
Para o incio
code
Ao criar comportamentos de servidor, voc pode usar construtos de loop para repetir um bloco de cdigo um nmero especificado de vezes.
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>
<@ endloop @>
code block
A diretiva de loop aceita uma lista separada por vrgulas das matrizes de parmetros como argumentos. Nesse caso, os argumentos da matriz de
parmetros permitem ao usurio fornecer vrios valores para um nico parmetro. O texto repetitivo duplicado n vezes, em que n o
comprimento dos argumentos da matriz de parmetros. Caso seja especificado mais de um argumento de matriz de parmetros, todas as
matrizes devem ter o mesmo comprimento. Na ensima avaliao do loop, o ensimo elemento da matriz de parmetros substitui as instncias do
parmetro associado no bloco de cdigos.
Ao criar uma caixa de dilogo para o comportamento de servidor, voc pode adicionar um controle caixa de dilogo que permite ao designer da
pgina criar matrizes de parmetros. O Dreamweaver inclui um controle de matriz simples que voc pode usar para criar caixas de dilogo. Esse
controle, chamado Lista separada por vrgula do campo de texto, est disponvel no Criador de comportamentos de servidor. Para criar elementos
de interface de usurio mais complexos, consulte a documentao da API para criar uma caixa de dilogo com um controle de criao de
matrizes (um controle de grade, por exemplo).
Voc pode aninhar qualquer nmero de condicionais ou diretivas de loop em uma diretiva condicional. Por exemplo, voc pode especificar se
uma expresso verdadeira para executar um loop.
O seguinte exemplo mostra como blocos de cdigo repetitivos podem ser usados para criar comportamentos de servidor (o exemplo um
comportamento do ColdFusion usado para acessar um procedimento armazenado):
<CFSTOREDPROC procedure="AddNewBook"
datasource=#MM_connection_DSN#
username=#MM_connection_USERNAME#
password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Neste exemplo, a tag CFSTOREDPROC pode incluir zero ou mais tags CFPROCPARAM. No entanto, sem o suporte diretiva de loop, no h
como incluir as tags CFPROCPARAM na tag CFSTOREDPROC inserida. Se isso fosse criado como um comportamento de servidor sem o uso
da diretiva de loop, voc precisaria dividir esse exemplo em dois participantes: uma tag principal CFSTOREDPROC e uma tag CFPROCPARAM
cujo tipo de participante mltiplo.
Usando a diretiva de loop, voc pode escrever o mesmo procedimento da seguinte forma:
<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
<CFPROCPARAM type="IN"
dbvarname="@@paramName@@"
value="@@value@@"
cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>
Nota: As novas linhas depois de cada @> so ignoradas.
Caso o usurio tenha inserido os seguintes valores de parmetro na caixa de dilogo Criador de comportamentos de servidor:
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
O comportamento de servidor inseriria o seguinte cdigo de runtime na pgina:
<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Nota: As matrizes de parmetros no podem ser usadas fora de um loop, exceto como parte de uma expresso de diretiva condicional.
Uso das variveis _length e _index da diretiva de loop
A diretiva de loop inclui duas variveis incorporadas que voc pode usar em condies if incorporadas. As variveis so: _length e _index. A
varivel _length avalia o comprimento das matrizes processadas pela diretiva de loop, ao passo que a varivel _index avalia o ndice atual da
diretiva de loop. Para garantir que as variveis s sejam reconhecidas como diretivas, e no como parmetros reais a serem passados para o
loop, no coloque nenhuma das variveis entre @@s.
Um exemplo de uso das variveis incorporadas aplic-las ao atributo import da diretiva de pgina. O atributo import exige a separao dos
pacotes por vrgulas. Caso a diretiva loop se estenda por todo o atributo import, voc obtm apenas o nome de atributo import= na primeira
iterao do loop isso inclui as aspas de fechamento (") e no uma vrgula na ltima iterao do loop. Usando a varivel incorporada, voc
pode expressar isso da seguinte forma:
<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>
Para o incio
Os comportamentos de servidor normalmente exigem que o designer da pgina fornea um valor de parmetro. Esse valor deve ser inserido
antes do cdigo do comportamento de servidor ser inserido na pgina.
Voc cria a caixa de dilogo definindo os parmetros fornecidos pelo designer no cdigo. Em seguida, voc gera uma caixa de dilogo para o
comportamento de servidor, que solicita ao designer da pgina um valor de parmetro.
Nota: Um parmetro adicionado ao bloco de cdigo sem a sua interveno caso voc especifique que o cdigo deve ser inserido relativo a
uma tag especfica escolhida pelo designer da pgina (ou seja, voc escolhe Relativo a determinada tag no menu pop-up Inserir cdigo). O
parmetro adiciona um menu de tag caixa de dilogo do comportamento para permitir ao designer da pgina selecionar uma tag.
Nota: Os nomes de parmetro no cdigo do comportamento de servidor no podem ter espaos. Por isso, os rtulos da caixa de dilogo no
podem ter nenhum espao. Caso queira incluir espaos no rtulo, voc pode editar o arquivo HTML gerado.
Criar uma caixa de dilogo para o comportamento de servidor a fim de solicitar o valor de parmetro
1. No Criador de comportamentos de servidor, clique em Avanar.
2. Para alterar a ordem de exibio dos controles da caixa de dilogo, selecione um parmetro e clique nas setas para cima e para baixo.
3. Para alterar o controle de um parmetro, selecione o parmetro e, depois, selecione outro controle na coluna Exibir como.
4. Clique em OK.
O Dreamweaver gera uma caixa de dilogo com um controle identificado para cada parmetro fornecido por designer que voc define.
Para o incio
Voc pode editar qualquer comportamento de servidor criado com o Criador de comportamentos de servidor, inclusive comportamentos de
servidor que voc baixa no site do Dreamweaver Exchange e de desenvolvedores de outros fabricantes.
Caso voc aplique um comportamento de servidor a uma pgina e, em seguida, edite o comportamento no Dreamweaver, as instncias do
comportamento antigo deixam de ser exibidas no painel Comportamentos de servidor. O painel Comportamentos de servidor pesquisa a pgina
em busca do cdigo correspondente ao cdigo dos comportamentos de servidor conhecidos. Caso o cdigo de um comportamento de servidor
seja alterado, o painel no reconhece as verses anteriores do comportamento na pgina.
A caixa de dilogo Editar comportamentos de servidor exibe todos os comportamentos relacionados tecnologia de servidor atual.
2. Selecione o comportamento de servidor e clique em Editar.
3. Selecione o bloco de cdigo apropriado e modifique o cdigo, as marcas de parmetro ou a posio do bloco de cdigo a ser inserido nas
pginas.
4. Caso o cdigo modificado no contenha nenhum parmetro fornecido pelo designer, clique em OK.
O Dreamweaver gera novamente o comportamento de servidor sem uma caixa de dilogo. O novo comportamento de servidor exibido no
menu pop-up de adio (+) do painel Comportamentos de servidor.
5. Caso o cdigo modificado contenha parmetros fornecidos pelo designer, clique em Avanar.
O Dreamweaver pergunta se voc deseja criar uma nova caixa de dilogo substituindo a anterior. Faa as alteraes e clique em OK.
O Dreamweaver salva todas as alteraes no arquivo EDML do comportamento de servidor.
Diretrizes de codificao
Para o incio
Em geral, o cdigo do comportamento de servidor deve ser compacto e eficiente. Os desenvolvedores de aplicativo da Web so muito sensveis
ao cdigo adicionado s suas pginas. Siga as prticas de codificao geralmente aceitas para linguagens do tipo documento (ColdFusion,
JavaScript, VBScript ou PHP). Ao escrever comentrios, considere os pblicos tcnicos diferentes que talvez precisem compreender o cdigo
como, por exemplo, os designers da Web e de interao ou outros desenvolvedores de aplicativo da Web. Inclua comentrios que descrevam
com preciso o propsito do cdigo e todas as instrues especiais para inclu-lo em uma pgina.
No se esquea das seguintes diretrizes de codificao quando voc criar comportamentos de servidor:
Verificao de erros Um requisito importante. O cdigo do comportamento de servidor deve lidar tranquilamente com casos de erro. Tente
prever todas as possibilidades. Por exemplo, e se uma solicitao de parmetro falha? E se nenhum registro retornar de uma consulta?
Nomes exclusivos Ajude a garantir que o cdigo seja claramente identificvel e evite diferenas de nome em relao ao cdigo existente. Por
exemplo, caso a pgina contenha uma funo chamada hideLayer() e uma varivel global chamada ERROR_STRING e o comportamento de
servidor insira um cdigo que tambm usa esses nomes, o comportamento de servidor pode entrar em conflito com o cdigo existente.
Prefixos de cdigo Eles permitem que voc identifique funes de runtime prprias e variveis globais em uma pgina. Uma conveno usar
as iniciais. Nunca use o prefixo MM_ porque ele est reservado apenas para uso do Dreamweaver. O Dreamweaver precede todas as funes e
variveis globais com o prefixo MM_ para impedir que elas entrem em conflito com qualquer cdigo que voc escreva.
var MM_ERROR_STRING = "...";
function MM_hideLayer() {
Evite blocos de cdigo semelhantes para que o cdigo que voc escreve no seja muito semelhante ao cdigo em outros blocos. Caso um
bloco de cdigo seja muito semelhante a outro bloco de cdigo na pgina, o painel Comportamentos de servidor pode identificar por engano o
primeiro bloco de cdigo como uma ocorrncia do segundo (ou o inverso). Uma soluo simples adicionar um comentrio a um bloco de cdigo
para torn-lo exclusivo.
Para o incio
O Exchange do Dreamweaver recomenda a realizao dos seguintes testes em todos os comportamentos de servidor que voc cria:
Aplique o comportamento do painel Comportamentos de servidor. Caso haja uma caixa de dilogo, insira dados vlidos nos campos e clique
em OK. Verifique se no ocorre nenhum erro quando o comportamento aplicado. Verifique se o cdigo de runtime do comportamento de
servidor exibido no Inspetor de cdigo.
Aplique o comportamento de servidor novamente e digite os dados invlidos em todos os campos da caixa de dilogo. Tente deixar o
campo em branco usando nmeros grandes ou negativos, caracteres invlidos (como, por exemplo, /, ?, :, * etc.) e letras em campos
numricos. Voc pode escrever rotinas de validao de formulrio para lidar com dados invlidos (rotinas de validao envolvem codificao
manual, o que vai alm do escopo deste livro).
Depois de aplicar o comportamento de servidor pgina, verifique o seguinte:
Verifique o painel Comportamentos de servidor para ter certeza de que o nome do comportamento de servidor exibido na lista de
comportamentos adicionados pgina.
Se aplicvel, verifique se os cones de script do servidor aparecem na pgina. Os cones genricos de script do servidor so escudos
dourados. Para ver os cones, ative Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis).
Na Visualizao de cdigo (Exibir > Cdigo), verifique se nenhum cdigo invlido foi gerado.
Alm disso, caso o comportamento de servidor insira cdigo no documento que estabelece uma conexo com um banco de dados, crie um
banco de dados de teste e teste o cdigo inserido no documento. Verifique a conexo definindo as consultas que produzem conjuntos de
dados diferentes e tamanhos de conjuntos de dados diferentes.
Por fim, carregue a pgina no servidor e a abra em um navegador. Veja o cdigo-fonte HTML da pgina e verifique se nenhum HTML
invlido foi gerado pelos scripts do servidor.
Para o incio
Depois de definir uma ou mais fontes de contedo dinmico, voc pode us-las para adicionar contedo dinmico pgina. As fontes de
contedo podem incluir uma coluna de um conjunto de registro, um valor enviado por um formulrio em HTML, o valor contido em um objeto de
servidor ou outros dados.
No Dreamweaver, voc pode colocar contedo dinmico em praticamente qualquer lugar de uma pgina da Web ou cdigo-fonte HTML. Voc
pode colocar contedo dinmico no ponto de insero, substituir uma sequncia de caracteres de texto ou inseri-lo como um atributo HTML. Por
exemplo, o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulrio.
Voc pode adicionar contedo dinmico a uma pgina selecionando uma fonte de contedo no painel Ligaes. O Dreamweaver insere um script
do servidor no cdigo da pgina que instrui o servidor a transferir os dados da fonte de contedo para o cdigo HTML da pgina quando esta
solicitada pelo navegador.
Normalmente, h mais de uma forma de tornar dinmico um elemento de pgina. Por exemplo, para tornar uma imagem dinmica voc pode usar
o painel Ligaes, o Inspetor de propriedades ou o comando Imagem do menu Inserir.
Por padro, uma pgina em HTML pode exibir apenas um registro por vez. Para exibir os demais registros do conjunto de registros, voc pode
adicionar um link para percorr-los individualmente ou pode criar uma regio repetitiva a fim de exibir mais de um registro em uma nica pgina.
Para o incio
O texto dinmico adota qualquer formatao aplicada ao texto existente ou ao ponto de insero. Por exemplo, caso um estilo de folhas de
estilos em cascata (CSS) afete o texto selecionado, o contedo dinmico que o substitui tambm afetado pelo estilo. Voc pode adicionar ou
alterar o formato de texto do contedo dinmico usando qualquer uma das ferramentas de formatao de texto do Dreamweaver.
Voc tambm pode aplicar um formato de dados ao texto dinmico. Por exemplo, caso os dados consistam em dados, voc pode especificar um
determinado formato de data como, por exemplo, 04/17/00 para visitantes norte-americanos ou 17/04/00 para visitantes canadenses.
Para o incio
Voc pode substituir o texto existente pelo texto dinmico ou colocar texto dinmico em um determinado ponto de insero da pgina.
Para o incio
Voc pode tornar dinmicas as imagens na sua pgina. Por exemplo, suponhamos que voc crie uma pgina para exibir itens venda em um
leilo beneficente. Cada pgina incluiria texto descritivo e foto de um item. O layout geral da pgina permaneceria o mesmo para todos os itens,
mas a foto (e o texto descritivo) poderia mudar.
1. Com a pgina aberta na Visualizao de design (Exibir > Design), coloque o ponto de insero onde voc deseja que a imagem seja
exibida na pgina.
2. Selecione Inserir > Imagem.
A caixa de dilogo Selecionar origem da imagem exibida.
3. Clique na opo Fontes de dados (Windows) ou no boto Data Source (Macintosh).
exibida uma lista de fontes de contedo.
4. Selecione uma fonte de contedo na lista e clique em OK.
A fonte de contedo deve ser um conjunto de registros que contm os caminhos dos arquivos de imagem. Dependendo da estrutura de
arquivo do site, os caminhos podem ser absolutos, relativos ao documento ou raiz.
Nota: Atualmente, o Dreamweaver no d suporte a imagens binrias armazenadas em um banco de dados.
Caso nenhum registro seja exibido na lista ou caso os conjuntos de registros disponveis no atendam s suas necessidades, defina um
novo conjunto de registros.
Para o incio
Voc pode alterar dinamicamente a aparncia de uma pgina ligando os atributos de HTML a dados. Por exemplo, voc pode alterar a imagem
do plano de fundo de uma tabela ligando o atributo background da tabela a um campo em um conjunto de registros.
Voc pode ligar atributos HTML usando o painel Ligaes ou o Inspetor de propriedades.
Caso o atributo que voc deseja ligar no esteja listado na visualizao Lista, clique no boto de adio (+) e, em seguida, digite o
nome do atributo ou clique no boto de seta pequeno e selecione o atributo no menu pop-up.
3. Para tornar o valor do atributo dinmico, clique no atributo e, em seguida, clique no cone do raio ou no cone da pasta ao final da linha do
atributo.
Caso voc tenha clicado no cone do raio, uma lista de fontes de dados exibida.
Caso tenha clicado no cone da pasta, uma caixa de dilogo para seleo de arquivo exibida. Selecione a opo Fontes de dados para
exibir uma lista das fontes de contedo.
4. Selecione uma fonte de contedo na lista de fontes de contedo e clique em OK.
A fonte de contedo deve manter dados apropriados ao atributo de HTML que voc deseja ligar. Caso nenhuma fonte de contedo seja
exibida na lista ou caso as fontes de contedo disponveis no atendam s suas necessidades, defina uma nova.
Na prxima vez em que a pgina for executada no servidor de aplicativo, o valor da fonte de dados ser vinculado ao atributo de HTML.
Para o incio
Voc pode tornar os parmetros de applets Java e os plug-ins dinmicos, bem como os parmetros dos objetos de ActiveX, Flash, Shockwave,
Director e Generator.
Antes de comear, verifique se os campos do conjunto de registros mantm dados apropriados aos parmetros de objeto que voc deseja ligar.
1. Na Visualizao de design, selecione um objeto da pgina e abra o Inspetor de propriedades (Janela > Propriedades).
2. Clique no boto Parmetros.
3. Caso o parmetro no seja exibido na lista, clique no boto de adio (+) e digite um nome de parmetro na coluna Parmetro.
4. Clique na coluna Valor do parmetro e, depois, clique no cone do raio para especificar um valor dinmico.
exibida uma lista de fontes de dados.
5. Selecione uma fonte de dados na lista e clique em OK.
A fonte de dados deve manter dados apropriados ao parmetro de objeto que voc deseja ligar. Caso nenhuma fonte de dados seja
exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, defina uma nova.
Mais tpicos da Ajuda
Para o incio
Os formulrios do ColdFusion fornecem vrios mecanismos incorporados para validar os dados de formulrios. Por exemplo, voc pode fazer
uma verificao para garantir que um usurio digitou uma data vlida. Alguns controles de formulrios possuem recursos adicionais. Vrios no
tm correspondentes em HTML e outros suportam diretamente o preenchimento dinmico de controles a partir de fontes de dados.
O Dreamweaver fornece vrios aprimoramentos para os desenvolvedores do ColdFusion que usam o ColdFusion MX 7 ou posterior como servidor
de desenvolvimento. Esses aprimoramentos incluem mais botes do painel Inserir, itens de menu e inspetores de propriedades para que voc
possa criar e definir rapidamente as propriedades de formulrios do ColdFusion. Voc tambm pode gerar um cdigo que valide as informaes
fornecidas pelos visitantes do site. Por exemplo, voc pode verificar se o endereo de email fornecido por um usurio contm o smbolo @ ou se
um campo de texto obrigatrio contm um determinado tipo de valor.
Para o incio
Alguns desses aprimoramentos exigem que voc defina um computador em que o ColdFusion MX 7 ou posterior esteja em execuo como um
servidor de teste para o Dreamweaver. Por exemplo, os inspetores de propriedades para controles de formulrio s permanecem disponveis caso
voc especifique o servidor de teste correto.
Voc define um servidor de teste apenas uma vez. Em seguida, o Dreamweaver detecta automaticamente a verso do servidor de teste e faz os
aprimoramentos disponveis caso ele detecte o ColdFusion.
1. Caso voc ainda no tenha feito isso, defina um site do Dreamweaver para o projeto do ColdFusion.
2. Selecione Site > Gerenciar sites, selecione seu site da lista e clique em Editar.
3. Selecione a categoria Servidores e especifique um computador que esteja executando o ColdFusion MX 7 ou posterior como sendo o
servidor de teste para o site do Dreamweaver. Verifique se voc especificou um URL da Web.
4. Abra um documento qualquer do ColdFusion.
Voc no ver nenhuma alterao visvel feita no espao de trabalho do Dreamweaver at abrir um documento do ColdFusion.
Para o incio
Voc pode usar vrios botes do painel Inserir, itens de menu e inspetores de propriedades para criar rapidamente formulrios do ColdFusion e
definir as propriedades no Dreamweaver.
Nota: Esses aprimoramentos s esto disponveis caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou
posterior.
1. Abra uma pgina do ColdFusion e coloque o ponto de insero onde voc deseja que o formulrio do ColdFusion seja exibido.
2. Selecione Inserir > Objetos do ColdFusion > CFForm > CFForm ou selecione a categoria CFForm do painel Inserir e clique no cone CF
Form.
O Dreamweaver insere um formulrio do ColdFusion vazio. Na visualizao Design, o formulrio indicado por um contorno vermelho
pontilhado. Caso voc no veja esse contorno, verifique se Exibir > Auxlios visuais > Elementos invisveis est selecionado.
3. Verifique se o formulrio ainda est selecionado e, em seguida, use o Inspetor de propriedades para definir qualquer uma das seguintes
propriedades do formulrio.
CFForm Define o nome do formulrio.
Ao Permite que voc especifique o nome da pgina do ColdFusion a ser processada quando o formulrio for enviado.
Mtodo Permite que voc defina o mtodo usado pelo navegador para enviar os dados do formulrio para o servidor:
POSTAR Envia os dados usando o mtodo postar HTTP; esse mtodo envia os dados em uma mensagem separada para o
servidor.
OBTER Envia os dados usando o mtodo obter HTTP e colocando o contedo do campo do formulrio na sequncia de caracteres
de consulta do URL.
Alvo Permite que voc modifique o valor do atributo-alvo da tag cfform.
Tipo de codificao Especifica o mtodo de codificao usado na transmisso dos dados do formulrio.
Nota: Tipo de codificao no se refere codificao de caracteres. Esse atributo especifica o tipo de contedo usado no envio do
formulrio para o servidor (quando o valor do mtodo postar). O valor padro desse atributo application/x-www-form-urlencoded.
Formato Determina o tipo de formulrio criado:
HTML Gera um formulrio em HTML e o envia para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no
formato applet.
Flash Gera um formulrio em Flash e o envia para o cliente. Todos os controles esto no formato Flash.
XML Gera XForms em XML e coloca os resultados em uma varivel com o nome de formulrio do ColdFusion. No envia nada
para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no formato applet.
Estilo Permite que voc especifique um estilo para o formulrio. Para obter mais informaes, consulte a documentao do ColdFusion.
Capa Flash/XML Permite que voc especifique uma cor halo para estilizar a sada. O tema determina a cor usada para elementos
realados e selecionados.
Preservar dados Determina se preciso substituir os valores de controle iniciais pelos valores enviados quando o formulrio postado.
Caso seja Falso, os valores especificados nos atributos da tag de controle so usados.
Caso seja Verdadeiro, so usados os valores enviados.
Origem dos scripts Especifica o URL, relativo raiz da Web, do arquivo JavaScript que contm o cdigo do cliente usado pela tag e pelas
tags filhas. O atributo til caso o arquivo no esteja no local padro. Esse atributo pode ser necessrio em alguns ambientes de
hospedagem e configuraes que bloqueiam o acesso ao diretrio /CFIDE. O local padro definido no Administrador do ColdFusion; por
padro, ele /CFIDE/scripts/cfform.js.
Arquivamento Especifica o URL das classes Java para download dos controles de applet cfgrid, cfslider e cftree. O local padro
/CFIDE/classes/cfapplets.jar.
Altura Especifica a altura do formulrio.
Largura Especifica a largura do formulrio.
Exibir Editor de tags para cfform Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
4. Insira os controles de formulrio do ColdFusion.
Coloque o ponto de insero onde deseja que o controle seja exibido no formulrio do ColdFusion e, em seguida, selecione o controle no
menu Inserir (Inserir > Objetos do ColdFusion > CFForm) ou na categoria CFForm do painel Inserir.
5. Se necessrio, defina as propriedades do controle usando o Inspetor de propriedades.
Verifique se o controle est selecionado na visualizao Design e, em seguida, defina as propriedades no Inspetor de propriedades. Para
obter mais informaes sobre as propriedades, clique no cone Ajuda do Inspetor de propriedades.
6. Ajuste o layout do formulrio do ColdFusion.
Caso esteja criando um formulrio baseado em HTML, voc pode usar quebras de linha, quebras de pargrafo, textos pr-formatados ou
tabelas para formatar os formulrios. Voc no pode inserir um formulrio do ColdFusion em outro formulrio do ColdFusion (ou seja, no
possvel sobrepor tags), mas pode incluir mais de um formulrio do ColdFusion em uma pgina.
Caso voc esteja criando um formulrio baseado em Flash, use os estilos Folhas de estilos em cascatas (CSS) no layout do formulrio. O
ColdFusion ignora qualquer HTML no formulrio.
Lembre-se de identificar os campos do formulrio do ColdFusion com um texto descritivo para que os usurios saibam ao que esto
respondendo. Por exemplo, crie um rtulo Digite o seu nome para solicitar informaes sobre o nome.
Para o incio
Para o incio
Voc pode inserir virtualmente um campo de texto do ColdFusion ou campo de senha no formulrio e, em seguida, definir suas opes.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
Para o incio
Voc pode inserir visualmente um campo oculto do ColdFusion no formulrio e definir suas propriedades. Use campos ocultos para armazenar e
enviar informaes no inseridas pelo usurio. As informaes permanecem ocultas ao usurio.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Na visualizao Design, coloque o ponto de insero dentro do contorno do formulrio.
2. Na categoria CFForm do painel Inserir, clique no cone Campo oculto do CF.
Um marcador exibido no formulrio do ColdFusion. Se voc no vir o marcador, selecione Exibir > Auxlios visuais > Elementos invisveis.
3. Selecione o campo oculto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfhiddenfield Permite que voc especifique o nome exclusivo do campo oculto.
Valor Permite que voc especifique um valor para o campo oculto. Os dados podem ser estticos ou dinmicos.
Para especificar um valor dinmico, clique no cone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na
caixa de dilogo Dados dinmicos. A coluna do conjunto de registros fornece um valor para o campo de texto quando voc exibe o
formulrio em um navegador.
Validar Especifica o tipo de validao do campo atual.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e
direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Obrigatrio Permite que voc especifique se o campo oculto deve ou no conter dados para que o formulrio seja enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para o incio
Voc pode inserir visualmente uma rea de texto do ColdFusion no formulrio e definir suas propriedades. Uma rea de texto um elemento de
entrada que consiste em vrias linhas de texto.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Coloque o ponto de insero dentro do contorno do formulrio.
2. Na categoria CFForm do painel Inserir, clique no cone rea de texto do CF.
Uma rea de texto exibida no formulrio do ColdFusion.
3. Selecione a rea de texto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cftextarea Permite que voc especifique um nome exclusivo para o controle.
Largura do caractere Permite que voc defina o nmero de caracteres por linha.
Nmero de linhas Permite que voc defina o nmero de linhas a serem exibidas na rea de texto.
Quebra automtica de linha Permite que voc especifique como quebrar automaticamente a linha do texto digitado pelos usurios.
Obrigatrio Permite que voc especifique se o usurio deve inserir dados no campo (marcado) ou no (desmarcado).
Valor inicial Permite que voc especifique o texto a ser exibido na rea de texto quando a pgina for inicialmente aberta em um
navegador.
Validar Especifica o tipo de validao do campo.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o controle.
Estilo Permite que voc especifique um estilo para o controle. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
4. Para identificar a rea de texto, clique ao lado dela e digite o texto do rtulo.
Para o incio
Voc pode inserir visualmente um boto do ColdFusion no formulrio e definir suas propriedades. Os botes do ColdFusion controlam as
operaes de formulrio do ColdFusion. Eles podem ser usados no envio dos dados de formulrio do ColdFusion para o servidor ou na
redefinio do formulrio do ColdFusion. Os botes padro do ColdFusion costumam estar identificados com os rtulos Enviar, Redefinir ou
Enviar. Voc tambm pode atribuir outras tarefas de processamento definidas em um script. Por exemplo, o boto pode calcular o custo total dos
itens selecionados com base em valores atribudos.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Coloque o ponto de insero dentro do contorno do formulrio do ColdFusion.
2. Na categoria CFForm do painel Inserir, clique no cone Boto do CF.
Um boto exibido no formulrio do ColdFusion.
3. Selecione o boto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfbutton Permite que voc especifique um nome exclusivo para o controle.
Ao Permite que voc especifique o tipo de boto a ser criado.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
As demais propriedades so ignoradas pelo servidor do ColdFusion durante o runtime.
Para o incio
Voc pode inserir visualmente uma caixa de seleo do ColdFusion no formulrio e definir suas propriedades. Use as caixas de seleo para
permitir que os usurios escolham mais de uma opo em um conjunto de opes.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Coloque o ponto de insero dentro do contorno do formulrio.
2. Na categoria CFForm do painel Inserir, clique no cone Caixa de seleo do CF.
Uma caixa de seleo exibida no formulrio do ColdFusion.
3. Selecione a caixa de seleo na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfcheckbox Permite que voc especifique um nome exclusivo para o controle.
Valor marcado Permite que voc especifique um valor a ser retornado pela caixa de seleo caso o usurio a marque.
Estado inicial Permite que voc especifique se a caixa de seleo permanece marcada quando a pgina aberta pela primeira vez em um
navegador.
Validar Especifica o tipo de validao da caixa de seleo.
Validar em Especifica quando a caixa de seleo validada: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para a caixa de seleo.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e
direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Obrigatrio Permite que voc especifique se a caixa de seleo deve permanecer marcada para que o formulrio seja enviado ao
servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
4. Para identificar a caixa de seleo, clique ao lado dela na pgina e digite o texto do rtulo.
Para o incio
Voc pode inserir visualmente um boto de opo do ColdFusion no formulrio e definir suas propriedades. Use botes de opo quando quiser
que os usurios selecionem apenas uma dentre um conjunto de opes. Os botes de opo costumam ser usados em grupos. Todos os botes
de opo em um grupo devem ter o mesmo nome.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Coloque o ponto de insero dentro do contorno do formulrio.
2. Selecione Inserir > Objetos do ColdFusion > CFForm > CFradiobutton.
Um boto de opo exibido no formulrio do ColdFusion.
3. Selecione o boto de opo na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfradiobutton Permite que voc especifique um nome exclusivo para o controle.
Valor marcado Permite que voc especifique um valor a ser retornado pelo boto de opo caso o usurio a marque.
Estado inicial Permite que voc especifique se o boto de opo permanece selecionado quando a pgina aberta pela primeira vez em
um navegador.
Validar Especifica o tipo de validao do boto de opo.
Validar em Especifica quando o boto de opo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o boto de opo.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e
direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Obrigatrio Permite que voc especifique se o boto de opo deve permanecer selecionado para que o formulrio seja enviado ao
servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
4. Para identificar o boto de opo, clique ao lado dele na pgina e digite o texto do rtulo.
Para o incio
Voc pode inserir visualmente uma caixa de marcao do ColdFusion no formulrio e definir suas propriedades. Uma caixa de marcao permite
que um visitante selecione um ou mais itens de uma lista. As caixas de marcao so teis quando voc tem uma quantidade de espao
limitada, mas precisa exibir muitos itens. Elas tambm so muito teis quando voc deseja controlar os valores retornados ao servidor.
Diferentemente dos campos de texto, nos quais os usurios digitam o que querem, inclusive dados invlidos, com as caixas de marcao, voc
pode definir os valores exatos retornados por um menu.
Voc pode inserir dois tipos de caixas de marcao em um formulrio: um menu que suspenso quando o usurio clica nele ou um menu que
exibe uma lista rolvel de itens que o usurio pode selecionar.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Coloque o ponto de insero dentro do contorno do formulrio.
2. Na categoria CFForm do painel Inserir, clique no cone Marcao do CF.
Uma caixa de marcao exibida no formulrio do ColdFusion.
3. Selecione a caixa de marcao na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfselect Permite que voc especifique um nome exclusivo para o controle.
Tipo Permite que voc escolha um menu pop-up ou uma lista. Caso voc selecione o tipo lista, as opes Listar altura e Permitir vrias
selees de lista so disponibilizadas.
Listar altura Permite que voc especifique o nmero de linhas a serem exibidas no menu da lista. S disponvel caso voc selecione o tipo
lista.
Permitir vrias selees de lista Permite que voc especifique se o usurio pode selecionar mais de uma opo da lista por vez. S
disponvel caso voc selecione o tipo lista.
Editar valores Abre uma caixa de dilogo que lhe permite adicionar, editar ou remover opes da caixa de marcao.
Selecionados inicialmente Permite que voc especifique a opo selecionada por padro. Voc pode selecionar mais de uma opo caso
tenha selecionado a opo Permitir vrias selees de lista.
Conjunto de registros Permite que voc especifique o nome da consulta do ColdFusion que deseja usar para preencher a lista ou o
menu.
Exibir coluna Permite que voc especifique a coluna do conjunto de registros para fornecer o rtulo de exibio de cada elemento da lista.
Usado com a propriedade Conjunto de registros.
Coluna de valor Permite que voc especifique a coluna do conjunto de registros para fornecer o valor de cada elemento da lista. Usado
com a propriedade Conjunto de registros.
Rtulo do Flash Permite que voc especifique um rtulo para a caixa de marcao.
Altura do Flash Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion
durante o runtime.
Largura do Flash Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion
durante o runtime.
Mensagem Especifica a mensagem a ser exibida se a propriedade Obrigatrio for definida como Sim e o usurio deixar de fazer uma
seleo antes de enviar o formulrio.
Obrigatrio Permite que voc especifique se um item de menu deve permanecer selecionado para que o formulrio seja enviado ao
servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para o incio
Voc pode inserir visualmente um campo de imagem do ColdFusion no formulrio e definir suas opes. Use os campos de imagem para criar
botes personalizados.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Na visualizao Design, coloque o ponto de insero dentro do contorno do formulrio.
2. Na categoria CFForm do painel Inserir, clique no cone Campo de imagem do CF. Navegue para selecionar a imagem a ser inserida e
clique em OK. Se desejar, voc pode digitar o caminho do arquivo de imagem na caixa Origem.
Nota: Caso a imagem esteja fora da pasta raiz do site, voc deve copiar a imagem para a pasta raiz. As imagens que esto fora da pasta
raiz talvez no estejam acessveis quando voc publicar o site.
3. Selecione o campo da imagem na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfimagefield Permite que voc especifique um nome exclusivo para o controle.
Origem Permite que voc especifique o URL da imagem inserida.
Alt Permite que voc especifique uma mensagem quando a imagem no puder ser exibida.
Alinhar Permite que voc especifique o alinhamento da figura.
Borda Permite que voc defina a largura da borda da imagem.
Editar imagem Abra a imagem no editor de imagens padro.
Para definir um editor de imagens padro, selecione Editar > Preferncias > Tipos de arquivos / editores. Do contrrio, o boto Editar
imagem no realiza nenhuma ao.
Validar Especifica o tipo de validao do campo de imagem.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o boto de opo.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e
direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels.
Largura Permite que voc especifique a largura do controle, em pixels.
Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Obrigatrio Permite que voc especifique se o controle deve ou no conter dados para que o formulrio seja enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para o incio
Voc pode inserir visualmente um campo de arquivo do ColdFusion no formulrio e definir suas propriedades. Use um campo de arquivo para
permitir que os usurios selecionem um arquivo do computador como, por exemplo, um documento de processamento de textos ou um arquivo
grfico e carreguem-no servidor. Um campo de arquivo do ColdFusion semelhante aos demais arquivos de texto, exceto por tambm conter um
boto Procurar. Os usurios podem digitar manualmente o caminho do arquivo que desejam carregar ou usar o boto Procurar para localizar e
selecionar o arquivo.
Os campos de arquivo exigem que voc use o mtodo POSTAR para transmitir os arquivos do navegador para o servidor. O arquivo postado no
endereo que voc especificou na caixa Ao do formulrio. Entre em contato com o administrador do sistema para confirmar se h permisso
para carregamentos de arquivo annimos antes de usar um campo de arquivo no formulrio.
Os campos de arquivo tambm exigem que a codificao do formulrio seja definida como multipart/form. O Dreamweaver define isso
automaticamente quando voc insere um controle do campo de arquivo.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Na visualizao Design, selecione CFForm para exibir o Inspetor de propriedades.
Para selecionar rapidamente o formulrio, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte inferior da janela
Documento.
2. No Inspetor de propriedades, defina o mtodo do formulrio como POSTAR.
3. No menu pop-up Tipo de codif., selecione multipart/form-data.
4. Posicione o ponto de insero dentro do contorno do formulrio onde voc deseja que o campo de arquivo seja exibido.
5. Selecione Inserir > Objetos do ColdFusion > CFForm > CFfilefield.
Um campo de arquivo exibido no documento.
6. Selecione o campo de arquivo na pgina e defina uma das seguintes propriedades no Inspetor de propriedades:
Cffilefield Permite que voc especifique um nome exclusivo para o controle.
Comprimento mximo Permite que voc especifique o nmero mximo de caracteres que o caminho do arquivo pode ter.
Validar Especifica o tipo de validao do campo.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o campo.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e
direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o
runtime.
Tamanho Permite que voc especifique o tamanho do controle.
Obrigatrio Permite que voc especifique se o campo de arquivo deve ou no conter dados para que o formulrio seja enviado ao
servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para o incio
Embora voc no possa inserir visualmente um campo de data do ColdFusion no Dreamweaver, possvel definir visualmente suas
propriedades. Um campo de data do ColdFusion um tipo de campo de texto especial que permite aos usurios selecionar uma data em um
calendrio pop-up e inseri-la no campo de texto.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Na visualizao Design, selecione CFForm para exibir o Inspetor de propriedades.
Para selecionar rapidamente o formulrio, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte inferior da janela
Documento.
2. No Inspetor de propriedades, defina a propriedade Formato do formulrio como Flash.
O controle do campo de data s pode ser processado em formulrios do ColdFusion baseados em Flash.
3. Alterne para a visualizao Cdigo (Exibir > Cdigo) e insira a seguinte tag em qualquer lugar entre as tags CFForm de abertura e de
finalizao:
<cfinput name="datefield" type="datefield">
4. Alterne para a visualizao Design, selecione o campo de data na pgina e, em seguida, defina uma das seguintes opes no Inspetor de
propriedades:
Cfdatefield Permite que voc especifique um nome exclusivo para o controle.
Valor Permite que voc especifique uma data a ser exibida no campo quando a pgina for aberta pela primeira vez em um navegador. A
data pode ser esttica ou dinmica.
Para especificar um valor dinmico, clique no cone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na
caixa de dilogo Dados dinmicos. A coluna do conjunto de registros fornece um valor para o campo de data quando voc exibe o
formulrio em um navegador.
Validar Especifica o tipo de validao do campo.
Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.
Rtulo Permite que voc especifique um rtulo para o campo.
Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e
direita. Para obter mais informaes, consulte a documentao do ColdFusion.
Altura Permite que voc especifique a altura do controle, em pixels.
Largura Permite que voc especifique a largura do controle, em pixels.
Tamanho Permite que voc especifique o tamanho do controle.
Obrigatrio Permite que voc especifique se o campo de data deve ou no conter um valor para que o formulrio seja enviado ao
servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.
Para o incio
Voc pode alterar visualmente as propriedades dos controles de formulrio do ColdFusion independentemente de estar trabalhando na
visualizao Design ou Cdigo.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Na visualizao Design, selecione o controle de formulrio na pgina; na visualizao Cdigo, clique em qualquer lugar dentro da tag do
controle.
O Inspetor de propriedades exibe as propriedades do controle de formulrio.
2. Altere as propriedades do controle no Inspetor de propriedades.
Para obter mais informaes, clique no cone Ajuda do Inspetor de propriedades.
3. Para definir mais propriedades, clique no boto Exibir editor de tags do Inspetor de propriedades e defina as propriedades no Editor de tags
exibido.
Para o incio
Voc pode criar formulrios do ColdFusion no Dreamweaver que verifiquem o contedo de campos especificados para garantir que o usurio
inseriu o tipo de dados correto.
Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Crie um formulrio do ColdFusion que inclua pelo menos um campo de entrada e um boto Enviar. Verifique se todos os campos do
ColdFusion que voc deseja validar tm um nome exclusivo.
2. Selecione um campo no formulrio que voc deseja validar.
3. No Inspetor de propriedades, especifique como voc deseja validar o campo.
A parte inferior de cada Inspetor de propriedades de entrada contm controles que lhe ajudam a definir a regra de validao especfica. Por
exemplo, talvez voc queira especificar se um campo de texto deve conter um nmero de telefone. Para isso, selecione Telefone no menu
pop-up Valor do Inspetor de propriedades. Voc tambm pode especificar quando validar no menu pop-up Validar em.
Mais tpicos da Ajuda
Configurar um servidor de teste
Para o incio
O aplicativo pode conter um conjunto de pginas que permite aos usurios excluir registros de um banco de dados. As pginas normalmente
consistem em uma pgina de pesquisa, uma pgina de resultados e uma pgina de excluso. Uma pgina de excluso costuma ser uma pgina
detalhada funcionando em conjunto com uma pgina de resultados. As pginas de pesquisa e de resultados permitem ao usurio recuperar o
registro e a pgina de excluso, confirmar e exclu-lo.
Depois de criar as pginas de pesquisa e de resultados, voc adiciona links na pgina de resultados para abrir a pgina de excluso e, em
seguida, criar uma pgina que exiba os registros e um boto Enviar.
Para o incio
Quando querem excluir um registro, os usurios devem inicialmente localiz-lo no banco de dados. Dessa forma, voc precisa de uma pgina de
pesquisa e resultados para usar a pgina de excluso. O usurio insere os critrios na pgina de pesquisa e seleciona o registro na pgina de
resultados. Quando o usurio clica no registro, a pgina de excluso aberta exibindo o registro em um formulrio em HTML.
Para o incio
Depois de criar as pginas de pesquisa e de resultados, voc deve criar links na pgina de resultados para abrir a pgina de excluso. Em
seguida, voc modifica os links para passar as IDs dos registros a serem excludos pelo usurio. A pgina de excluso usa essa ID para localizar
e exibir o registro.
Para o incio
Depois de concluir a pgina que lista os registros, alterne para a pgina de excluso. A pgina de excluso mostra o registro e pergunta ao
usurio se ele tem certeza de que deseja exclu-lo. Quando o usurio confirma a operao clicando no boto de formulrio, o aplicativo da Web
exclui o registro do banco de dados.
Criar essa pgina consiste na criao de um formulrio em HTML, na recuperao do registro a ser exibido no formulrio, na exibio do registro
no formulrio e na adio da lgica para exclu-lo do banco de dados. Recuperar e exibir o registro consiste na definio de um conjunto de
registros para manter um nico registro aquele que o usurio deseja excluir e na ligao das colunas do conjunto ao formulrio.
Nota: A pgina de excluso pode conter apenas um comportamento de servidor para edio do registro por vez. Por exemplo, voc no pode
adicionar um comportamento de servidor Inserir registro ou Atualizar registro pgina de excluso.
No primeiro menu pop-up da rea Filtro, selecione a coluna do conjunto de registros que contm valores correspondentes ao valor do
parmetro do URL passado pela pgina com os links Excluir. Por exemplo, caso o parmetro do URL contenha o nmero de uma ID de
registro, selecione a coluna que contm os nmeros da ID de registro. No exemplo abordado na seo anterior, a coluna do conjunto de
registros chamada CODE contm os valores correspondentes ao valor do parmetro do URL passado pela pgina com os links Excluir.
No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, caso ele ainda no esteja selecionado.
No terceiro menu pop-up, selecione Parmetro do URL. A pgina com os links Excluir usa um parmetro de URL para passar
informaes pgina de excluso.
Na quarta caixa, digite o nome do parmetro do URL passado pela pgina com os links Excluir.
5. Clique em OK.
O conjunto de registros exibido no painel Ligaes.
Para o incio
Depois de exibir o registro selecionado na pgina de excluso, voc deve adicionar lgica pgina que exclui o registro do banco de dados
quando o usurio clica no boto Confirmar excluso. Voc pode adicionar essa lgica de maneira rpida e fcil usando o comportamento de
servidor Excluir registro.
Para o incio
O aplicativo da Web pode conter uma pgina que permite aos usurios registrados fazer logon no site.
Uma pgina de logon formada pelos seguintes blocos de criao:
Uma tabela de usurios registrados do banco de dados
Um formulrio em HTML para permitir aos usurios digitar um nome de usurio e senha
Um comportamento de servidor Fazer logon do usurio para verificar se o nome de usurio e a senha digitados so vlidos
Uma varivel de sesso que consiste no nome de usurio criada para o usurio quando este faz logon com xito.
Para o incio
Voc precisa de uma tabela de usurios registrados no banco de dados para verificar se o nome de usurio e a senha digitados na pgina de
logon so vlidos.
Use o aplicativo de banco de dados e uma pgina de registro para criar a tabela. Para obter as instrues, consulte os tpicos relacionados
abaixo.
A prxima etapa da criao de uma pgina de logon adicionar um formulrio em HTML pgina para permitir aos usurios fazer logon.
Consulte o prximo tpico para obter instrues.
Para o incio
Voc adiciona um formulrio em HTML pgina para permitir aos usurios fazer logon digitando um nome de usurio e senha.
1. Crie uma pgina (Arquivo > Novo > Pgina em branco) e crie o layout da pgina de logon usando as ferramentas de design do
Dreamweaver.
2. Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido e escolhendo Formulrio
no menu Inserir.
criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis)
para ver os limites do formulrio, representados por linhas finas em vermelho.
3. Nomeie o formulrio em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o formulrio, abrindo o
Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio.
Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como enviar os dados do
registro quando o usurio clicar no boto Enviar. O comportamento de servidor Fazer logon do usurio define esses atributos para voc.
4. Adicione um nome de usurio e um campo de texto de senha (Inserir > Formulrio > Campo de texto) ao formulrio.
Adicione rtulos (como textos ou imagens) ao lado de cada campo de arquivo e alinhe os campos de texto os colocando em uma tabela em
HTML e definindo o atributo border da tabela como 0.
5. Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).
Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo
um novo valor na caixa Rtulo.
A prxima etapa da criao de uma pgina de logon adicionar o comportamento de servidor Fazer logon do usurio para verificar se o
nome de usurio e a senha digitados so vlidos.
Para o incio
Voc deve adicionar um comportamento de servidor Fazer logon do usurio para verificar se o nome de usurio e a senha digitados por um
usurio so vlidos.
Quando um usurio clica no boto Enviar da pgina de logon, o comportamento de servidor Fazer logon do usurio compara os valores inseridos
pelo usurio com os valores dos usurios registrados. Caso os valores sejam correspondentes, o comportamento de servidor abre uma pgina
(normalmente, a tela Bem-vindo do site). Caso os valores no sejam correspondentes, o comportamento de servidor abre outra pgina
(normalmente, a pgina que alerta o usurio de falha na tentativa de logon).
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Usar
autenticao > Fazer logon do usurio no menu pop-up.
2. Especifique o formulrio e os objetos de formulrio usados pelos visitantes para digitar nome de usurio e senha.
3. (ColdFusion) Digite o nome do usurio e a senha, se aplicvel.
4. Especifique a tabela do banco de dados e as colunas que contm os nomes de usurio e as senhas de todos os usurios registrados.
O comportamento de servidor compara o nome de usurio e a senha digitados por um visitante na pgina de logon com os valores nessas
colunas.
5. Especifique uma pgina a ser aberta caso haja xito no processo de logon.
A pgina especificada costuma ser a tela Bem-vindo do site.
6. Especifique uma pgina a ser aberta caso haja falha no processo de logon.
A pgina especificada costuma alertar o usurio de que houve falha no processo de logon e permite que ele tente novamente.
7. Caso voc queira que os usurios sejam encaminhados para a pgina de logon depois de acessarem uma pgina restrita e retornarem a
esta pgina aps o logon, selecione a opo Ir para URL anterior.
Caso um usurio tente acessar o site abrindo uma pgina restrita sem antes fazer o logon nela, a pgina restrita pode encaminh-lo para a
pgina de logon. Depois que o usurio consegue fazer o logon, a pgina de logon o redireciona para a pgina restrita que o encaminhou
inicialmente para a pgina de logon.
Quando completar a caixa de dilogo para o comportamento de servidor Restringir acesso pgina nessas pginas, verifique se voc
especificou a pgina de logon em Se o acesso for negado, caixa Ir para.
8. Especifique se voc deve conceder acesso pgina com base exclusivamente no nome de usurio e na senha ou tambm de acordo com
o nvel de autorizao e clique em OK.
Um comportamento de servidor adicionado pgina de logon que verifica se o nome de usurio e a senha digitados por um visitante so
vlidos.
Mais tpicos da Ajuda
Para o incio
O aplicativo da Web pode conter uma pgina protegida que apenas usurios autorizados podem acessar.
Por exemplo, caso um usurio tente ignorar a pgina de logon digitando o URL da pgina protegida em um navegador, o usurio redirecionado
para outra pgina. Da mesma forma, caso voc defina o nvel de autorizao de uma pgina como Administrador, apenas usurios com
privilgios de acesso Administrador podem exibir a pgina. Caso um usurio conectado tente acessar a pgina protegida sem os privilgios de
acesso apropriados, ele redirecionado para outra pgina.
Voc tambm pode usar os nveis de autorizao para revisar usurios recm-registrados concedendo a eles acesso total ao site. Por exemplo,
convm receber o pagamento antes de permitir que um usurio acesse as pginas de membro do site. Para isso, voc pode proteger as pginas
de membro com um nvel de autorizao Membro e conceder a usurios recm-registrados apenas os privilgios de Convidado. Depois de
receber o pagamento do usurio, voc pode atualizar os privilgios de acesso do usurio para Membro (na tabela de usurios registrados do
banco de dados).
Caso no pretenda usar os nveis de autorizao, voc pode proteger qualquer pgina do site simplesmente adicionando um comportamento de
servidor Restringir acesso pgina. O comportamento de servidor redireciona para outra pgina qualquer usurio que no tenha conseguido
fazer o logon.
Caso pretenda usar os nveis de autorizao, voc pode proteger qualquer pgina do site usando os seguintes blocos de criao:
Um comportamento de servidor Restringir acesso pgina para redirecionar usurios no autorizados para outra pgina
Uma coluna extra na tabela de usurios do banco de dados para armazenar os privilgios de acesso de cada usurio
Independentemente do uso ou no dos nveis de autorizao, voc pode adicionar um link pgina protegida que permite ao usurio fazer
logout e limpa todas as variveis de sesso.
Para o incio
Para impedir que usurios no autorizados acessem uma pgina, adicione um comportamento de servidor Restringir acesso pgina a ela. O
comportamento de servidor redireciona o usurio para outra pgina caso o usurio tente ignorar a pgina de logon digitando o URL da pgina
protegida em um navegador ou caso ele esteja conectado, mas tente acessar uma pgina protegida sem os privilgios de acesso apropriados.
Nota: O comportamento de servidor Restringir acesso pgina s pode proteger pginas em HTML. Ele no protege outros recursos do site
como, por exemplo, arquivos de imagem e de udio.
Caso queira dar a muitas pginas do site os mesmos direitos de acesso, voc pode copiar e col-los de uma pgina para outra.
5. Para definir mais de um nvel de autorizao para uma pgina, clique nos nveis com a tecla Control pressionada (Windows) ou Command
(Macintosh) na lista.
Por exemplo, voc pode especificar que qualquer usurio com privilgios de Convidado, Membro ou Administrador pode exibir a pgina.
6. Especifique a pgina a ser aberta caso um usurio no autorizado tente abrir a pgina protegida.
Verifique se a pgina escolhida no est protegida.
7. Clique em OK.
Copiar e colar os direitos de acesso de uma pgina para as demais pginas do site
1. Abra a pgina protegida e selecione o comportamento de servidor Restringir acesso pgina listado no painel Comportamentos de servidor
(e no o no menu pop-up de adio [+]).
2. Clique no boto de seta no canto superior direito do painel e selecione Copiar no menu pop-up.
O comportamento de servidor Restringir acesso pgina copiado para a rea de transferncia do sistema.
3. Abra a outra pgina que voc deseja proteger da mesma forma.
4. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de seta no canto superior direito e
selecione Colar no menu pop-up.
5. Repita as etapas 3 e 4 para todas as pginas que voc deseja proteger.
Para o incio
O bloco de criao s obrigatrio caso voc queira que determinados usurios conectados tenham privilgios de acesso diferentes. Caso
precise apenas que os usurios faam logon, voc no tem que armazenar privilgios de acesso.
1. Para fornecer a determinados usurios conectados privilgios de acesso diferentes, verifique se a tabela de usurios do banco de dados
contm uma coluna especificando os privilgios de acesso de cada usurio (Convidado, Usurio, Administrador etc.). Os privilgios de
acesso de cada usurio devem ser inseridos no banco de dados pelo administrador do site.
Na maioria dos aplicativos de banco de dados, voc pode definir uma coluna como um valor padro sempre que um novo registro criado.
Defina o valor padro como o privilgio de acesso mais comum do site (por exemplo, Convidado) e, em seguida, altere manualmente as
excees (por exemplo, alterando Convidado para Administrador). O usurio agora tem acesso a todas as pginas de administrador.
2. Verifique se cada usurio no banco de dados tem um privilgio de acesso exclusivo como, por exemplo, Convidado ou Administrador, e no
vrios privilgios como Usurio, Administrador. Para definir vrios privilgios de acesso para as pginas (por exemplo, todos os convidados
e administradores podem ver a pgina), os defina no nvel da pgina, e no do banco de dados.
Para o incio
Quando um usurio faz logon com xito, uma varivel de sesso criada consistindo no nome de usurio. Quando o usurio deixa o site, voc
pode usar o comportamento de servidor Fazer logout do usurio para limpar a varivel da sesso e redirecion-lo para outra pgina
(normalmente uma pgina de despedida ou de agradecimento).
Voc pode invocar o comportamento de servidor Fazer logout do usurio quando o usurio clica em um link ou quando uma determinada pgina
carregada.
Para o incio
O aplicativo pode conter uma pgina que permite aos usurios inserir novos registros em um banco de dados.
Uma pgina para insero consiste em dois blocos de criao:
Um formulrio em HTML que permite aos usurios inserir dados
Um comportamento de servidor Inserir registro que atualiza o banco de dados
Quando um usurio clica em Enviar em um formulrio, o comportamento de servidor insere registros em uma tabela do banco de dados.
Voc pode adicionar esses blocos de criao em uma nica operao usando o objeto de dados Registrar formulrio de insero ou pode
adicion-los separadamente usando as ferramentas de formulrio do Dreamweaver e o painel Comportamentos de servidor.
Nota: A pgina para insero pode conter apenas um comportamento de servidor para edio do registro por vez. Por exemplo, voc no
pode adicionar um comportamento de servidor Atualizar registro ou Excluir registro pgina para insero.
Para o incio
Voc tambm pode criar uma pgina para insero usando as ferramentas de formulrio e os comportamentos de servidor.
Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados
(ColdFusion)
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Inserir registro no
menu pop-up.
2. Selecione um formulrio no menu pop-up Enviar valores de.
3. No menu pop-up Fonte de dados, selecione uma conexo com o banco de dados.
4. Digite o nome do usurio e a senha.
5. No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido.
6. Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulrio que ir inserir o registro
no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo boolianos).
Repita o procedimento para todos os objetos no formulrio.
7. Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto Procurar para
procurar o arquivo.
8. Clique em OK.
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma tabela do banco de
dados preenchendo o formulrio em HTML e clicando no boto Enviar.
Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (ASP)
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Inserir registro no
menu pop-up.
2. No menu pop-up Conexo, selecione uma conexo com o banco de dados.
Clique no boto Definir caso voc precise definir uma conexo.
3. No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido.
4. Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique em Procurar para procurar o
arquivo.
5. No menu pop-up Obter valores em, selecione o formulrio em HTML usando na insero dos dados.
O Dreamweaver seleciona automaticamente o primeiro formulrio da pgina.
6. Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulrio que ir inserir o registro
no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo boolianos).
Repita o procedimento para todos os objetos no formulrio.
7. Clique em OK.
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma tabela do banco de
dados preenchendo o formulrio em HTML e clicando no boto Enviar.
Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas
vezes no comportamento Inserir registro.
Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (PHP)
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Inserir registro no
menu pop-up.
2. Selecione um formulrio no menu pop-up Enviar valores de.
3. No menu pop-up Conexo, selecione uma conexo com o banco de dados.
4. No menu pop-up Inserir tabela, selecione a tabela do banco de dados em que o registro deve ser inserido.
5. Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulrio que ir inserir o registro
no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como.
O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo boolianos).
Repita o procedimento para todos os objetos no formulrio.
6. Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto Procurar para
procurar o arquivo.
7. Clique em OK.
O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma tabela do banco de
dados preenchendo o formulrio em HTML e clicando no boto Enviar.
Para o incio
1. Abra a pgina na Visualizao de design e selecione Inserir > Objetos de dados > Inserir registro > Assistente para registrar formulrio de
insero.
2. No menu pop-up Conexo, selecione uma conexo com o banco de dados. Clique em Definir caso voc precise definir uma conexo.
3. No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido.
4. Caso voc use o ColdFusion, digite um nome de usurio e senha.
5. Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto Procurar para
procurar o arquivo.
6. Na rea Campos de formulrio, especifique os objetos de formulrio que voc deseja incluir no formulrio em HTML da pgina para
insero e quais colunas da tabela do banco de dados cada objeto de formulrio deve atualizar.
Por padro, o Dreamweaver cria um objeto de formulrio para cada coluna na tabela do banco de dados. Caso o banco de dados gere
automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulrio correspondente coluna da chave
selecionando-o na lista e clicando no boto de subtrao (-). Isso elimina o risco de que o usurio do formulrio insira um valor de ID j
existente.
Voc tambm pode alterar a ordem dos objetos no formulrio em HTML selecionando um objeto de formulrio na lista e clicando na seta
para cima ou para baixo direita da caixa de dilogo.
7. Especifique como cada campo de entrada de dados deve ser exibido no formulrio em HTML clicando em uma linha na tabela Campos de
formulrio e inserindo as seguintes informaes nas caixas abaixo da tabela:
Na caixa Rtulo, digite um rtulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padro, o Dreamweaver exibe o
nome da coluna da tabela no rtulo.
No menu pop-up Exibir como, selecione um objeto de formulrio para servir como campo de entrada de dados. Voc pode selecionar
Campo de texto, rea de texto, Menu, Caixa de seleo, Grupo de botes de opo e Texto. Para entradas somente leitura, selecione
Texto. Voc tambm pode selecionar Campo de senha, Campo de arquivo e Campo oculto.
Nota: Os campos ocultos so inseridos ao final do formulrio.
No menu pop-up Enviar como, selecione o formato de dados aceito pela tabela do banco de dados. Por exemplo, caso a coluna da
tabela aceite apenas dados numricos, selecione Numrico.
Defina as propriedades do objeto de formulrio. Voc conta com opes diferentes dependendo do objeto de formulrio selecionado por
voc como o campo de entrada de dados. Para campos de texto, reas de texto e texto, voc pode inserir um valor inicial. Para menus
e grupos de botes de opo, voc abre outra caixa de dilogo a fim de definir as propriedades. Para opes, selecione a opo
Marcado ou Desmarcado.
8. Clique em OK.
O Dreamweaver adiciona um formulrio em HTML e um comportamento de servidor Inserir registro pgina. Os objetos de formulrio so
colocados em uma tabela bsica, que voc pode personalizar usando as ferramentas de design de pgina do Dreamweaver. (Verifique se
todos os objetos continuam dentro dos limites do formulrio.)
Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas
vezes no comportamento Inserir registro.
Mais tpicos da Ajuda
Para o incio
O aplicativo da Web pode conter uma pgina que exige o registro dos usurios na primeira vez em que eles visitam o site.
Uma pgina de registro formada pelos seguintes blocos de criao:
Uma tabela do banco de dados para armazenar informaes de logon dos usurios
Um formulrio em HTML que permite aos usurios selecionar um nome de usurio e senha
Voc tambm pode usar o formulrio para obter demais informaes pessoais dos usurios.
Um comportamento de servidor Inserir registro para atualizar a tabela do banco de dados dos usurios do site
Um comportamento de servidor Verificar novo nome de usurio para verificar se o nome digitado pelo usurio no est sendo usado por
outro
Para o incio
Uma pgina de registro exige que uma tabela do banco de dados armazena as informaes de logon inseridas pelos usurios.
Verifique se a tabela do banco de dados contm um nome de usurio e uma coluna de senha. Caso voc queira que os usurios
conectados tenham privilgios de acesso diferentes, inclua uma coluna de privilgio de acesso.
Caso voc queira definir uma senha comum a todos os usurios do site, configure o aplicativo de banco de dados (Microsoft Access,
Microsoft SQL Server, Oracle etc.) para digitar a senha em todos os registros de novo usurio por padro. Na maioria dos aplicativos de
banco de dados, voc pode definir uma coluna como um valor padro sempre que um novo registro criado. Defina o valor padro da
senha.
Voc tambm pode usar a tabela do banco de dados para armazenar outras informaes teis sobre o usurio.
A prxima etapa da criao de uma pgina de registro adicionar um formulrio em HTML a ela para permitir que os usurios escolham um
nome de usurio e senha (se aplicvel).
Para o incio
Voc adiciona um formulrio em HTML pgina de registro para permitir que os usurios selecionem um nome de usurio e senha (se aplicvel).
1. Crie uma pgina (Arquivo > Novo > Pgina em branco) e crie o layout da pgina de registro usando as ferramentas de design do
Dreamweaver.
2. Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido e selecionando Formulrio
no menu Inserir.
criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis)
para ver os limites do formulrio, representados por linhas finas em vermelho.
3. Nomeie o formulrio em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o formulrio, abrindo o
Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio.
Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como enviar os dados do
registro quando o usurio clicar no boto Enviar. O comportamento de servidor Inserir registro define esses atributos para voc.
4. Adicione campos de texto (Inserir > Formulrio > Campo de texto) para permitir que o usurio digite um nome de usurio e senha.
O formulrio tambm pode ter mais objetos de formulrio para registrar outros dados pessoais.
Voc deve adicionar rtulos (como textos ou imagens) ao lado de cada objeto de formulrio para informar suas funes aos usurios. Voc
tambm deve alinhar os objetos de formulrio colocando-os dentro de uma tabela em HTML. Para obter mais informaes sobre objetos de
formulrio, consulte Criao de formulrios da Web.
Para o incio
Voc deve adicionar um comportamento de servidor Inserir registro pgina de registro para atualizar a tabela de usurios no banco de dados.
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Inserir registro no
menu pop-up.
A caixa de dilogo Inserir registro exibida.
2. Complete a caixa de dilogo, no se esquecendo de especificar a tabela de usurios no banco de dados em que os dados dos usurios
sero inseridos. Clique em OK.
A etapa final da criao de uma pgina de registro verificar se o nome no foi usado por outro usurio registrado.
Para o incio
Voc pode adicionar um comportamento de servidor a uma pgina de registro que verifica se o nome de usurio exclusivo antes de adicion-lo
ao banco de dados de usurios registrados.
Quando o usurio clica no boto Enviar na pgina de registro, o comportamento de servidor compara o nome de usurio digitado pelo usurio
com os nomes de usurio armazenados na tabela de usurios registrados de um banco de dados. Caso nenhum nome de usurio
correspondente seja encontrado na tabela do banco de dados, o comportamento de servidor realiza normalmente a operao de insero do
registro. Caso um nome de usurio correspondente seja encontrado, o comportamento de servidor cancela a operao de insero do registro e
abre uma nova pgina (normalmente uma pgina alertando o usurio de que o nome de usurio j est sendo usado).
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Usar
autenticao > Verificar novo nome de usurio no menu pop-up.
2. No menu pop-up Campo de nome de usurio, selecione o campo de texto de formulrio usado pelos visitantes para digitar um nome de
usurio.
3. Em Se j existir, caixa Ir para, especifique uma pgina a ser aberta caso um nome de usurio correspondente seja encontrado na tabela do
banco de dados e clique em OK.
A pgina aberta deve alertar o usurio de que o nome de usurio j est sendo usado e permitir que ele tente novamente.
Mais tpicos da Ajuda
Para o incio
Um objeto de comando do ASP um objeto de servidor que realiza uma determinada operao em um banco de dados. O objeto pode conter
qualquer instruo SQL vlida, inclusive uma que retorna um conjunto de registros ou outra que insere, atualiza ou exclui registros em um banco
de dados. Um objeto de comando pode alterar a estrutura de um banco de dados caso a instruo SQL adicione ou exclua uma coluna em uma
tabela. Voc tambm pode usar um objeto de comando para executar um procedimento armazenado em um banco de dados.
Um objeto de comando pode ser reutilizvel no sentido de que o servidor de aplicativo pode reutilizar uma verso compilada exclusiva do objeto
para executar o comando vrias vezes. Voc torna um comando reutilizvel definindo a propriedade Preparado do objeto Comando como true,
como na seguinte instruo VBScript:
mycommand.Prepared = true
Se voc souber que o comando ser executado mais de uma vez, ter uma verso compilada exclusiva do objeto pode tornar as operaes do
banco de dados mais eficiente.
Nota: Nem todos os fornecedores de bancos de dados do suporte a comandos preparados. Caso o banco de dados no d suporte, ele pode
retornar um erro quando voc define essa propriedade como true. Ele pode at mesmo ignorar a solicitao para preparar o comando e definir a
propriedade Preparado como false.
Um objeto de comando criado por scripts em uma pgina em ASP, mas o Dreamweaver lhe permite criar objetos de comando sem escrever
uma linha de cdigo ASP.
Para o incio
Voc pode usar o Dreamweaver para criar objetos de comando do ASP que inserem, atualizam ou excluem registros em um banco de dados.
Voc fornece o objeto de comando com a instruo SQL ou o procedimento armazenado que realiza a operao no banco de dados.
1. No Dreamweaver, abra a pgina do ASP que executar o comando.
2. Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Comando.
3. Digite um nome para o comando, selecione uma conexo com o banco de dados que contenha os registros que voc deseja editar e
selecione a operao de edio que o comando deve realizar Inserir, Atualizar ou Excluir.
O Dreamweaver inicia a instruo SQL com base no tipo de operao selecionado por voc. Por exemplo, caso voc selecione Inserir, a
caixa de dilogo semelhante seguinte:
parmetros de URL passados para a pgina, conforme a definio na coluna Valor de runtime da rea Variveis.
Para obter o valor Tamanho, use o painel Bancos de dados do Dreamweaver. Localize o banco de dados no painel Banco de dados e o
expanda. Em seguida, localize a tabela na qual voc est trabalhando e a expanda. A tabela lista os tamanhos dos campos. Por exemplo,
ela pode informar ADDRESS (WChar 50). Nesse exemplo, 50 o tamanho. Voc tambm pode localizar o tamanho no aplicativo de banco
de dados.
Nota: Os tipos de dados Numrico, Booliano e Data/hora sempre usam -1 como tamanho.
Para determinar o valor Tipo, consulte a seguinte tabela:
Tipo no Dreamweaver
Tamanho
Duplo
-1
Duplo
-1
DBTimeStamp
-1
LongVarChar
VarWChar
LongVarWChar
1073741823
Para obter mais informaes sobre o tipo e o tamanho das variveis SQL, consulte www.adobe.com/go/4e6b330a_br.
6. Feche a caixa de dilogo.
O Dreamweaver insere o cdigo ASP na pgina que, quando executada no servidor, cria um comando que insere, atualiza ou exclui
registros no banco de dados.
Por padro, o cdigo define a propriedade Preparado do objeto Comando como true, o que faz o servidor de aplicativo reutilizar uma verso
compilada exclusiva do objeto sempre que o comando executado. Para mudar essa configurao, alterne para a Visualizao de cdigo e
altere a propriedade Preparado para false.
7. Crie uma pgina com um formulrio em HTML para que os usurios possam inserir dados de registro. No formulrio em HTML, inclua trs
campos de texto (txtCity, txtAddress e txtPhone) e um boto de envio. O formulrio usa o mtodo OBTER e envia os valores do campo de
texto para a pgina que contm o comando.
Para o incio
Embora seja possvel usar comportamentos de servidor para criar pginas que modificam bancos de dados, voc tambm pode usar objetos de
manipulao de banco de dados como, por exemplo, procedimentos armazenados ou objetos de comando do ASP na criao das pginas.
Um procedimento armazenado um banco de dados reutilizvel que realiza algumas operaes no banco de dados. Um procedimento
armazenado contm um cdigo SQL que pode, dentre outras coisas, inserir, atualizar ou excluir registros. Os procedimentos armazenados
tambm podem alterar a estrutura do banco de dados propriamente dito. Por exemplo, voc pode usar um procedimento armazenado para
adicionar uma coluna de tabela ou at mesmo excluir uma tabela.
Um procedimento armazenado tambm pode chamar outro procedimento armazenado, bem como aceitar parmetros de entrada e retornar vrios
valores para o procedimento de chamada na forma de parmetros de sada.
Um procedimento armazenado reutilizvel no sentido de que voc pode reutilizar uma verso compilada exclusiva do procedimento para
executar uma operao de banco de dados vrias vezes. Se voc souber que uma tarefa de banco de dados ser executada mais de uma vez
ou que a mesma tarefa ser executada por aplicativos diferentes usar um procedimento armazenado na execuo dessa tarefa pode tornar as
operaes do banco de dados mais eficientes.
Nota: Os bancos de dados MySQL e Microsoft Access no do suporte a procedimentos armazenados.
Para o incio
Voc pode usar um procedimento armazenado para modificar um banco de dados. Um procedimento armazenado um banco de dados
reutilizvel que realiza algumas operaes no banco de dados.
Para que voc use um procedimento armazenado e modifique um banco de dados, verifique se o procedimento contm o SQL que modifica o
banco de dados de alguma forma. Para criar e armazenar um no banco de dados, consulte a documentao do banco de dados e um bom
manual de Transact-SQL.
1. No Dreamweaver, abra a pgina que executar o procedimento armazenado.
2. No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Procedimento armazenado.
3. No menu pop-up Fonte de dados, selecione uma conexo com o banco de dados que contm o procedimento armazenado.
4. Digite o nome de usurio e a senha da fonte de dados do ColdFusion.
5. Selecione um procedimento armazenado no menu pop-up Procedimentos.
O Dreamweaver preenche automaticamente todos os parmetros.
6. Selecione um parmetro e clique em Editar caso tenha que fazer alteraes.
A caixa de dilogo Editar varivel do procedimento armazenado exibida. O nome da varivel que voc est editando exibido na caixa
Nome.
Nota: Voc deve inserir valores de teste para todos os procedimentos de entrada do procedimento armazenado.
7. Faa as alteraes conforme necessrio:
Selecione uma Direo no menu pop-up. Um procedimento armazenado pode ter valores de entrada, valores de sada ou ambos.
Selecione um tipo de SQL no menu pop-up. Insira uma varivel de retorno, um valor de runtime e um valor de teste.
8. Caso o procedimento armazenado use um parmetro, clique no boto de adio (+) para adicionar um parmetro de pgina.
Nota: Voc deve inserir parmetros de pgina correspondentes para cada valor de retorno do parmetro de procedimento armazenado.
No adicione parmetros de pgina a menos que haja um valor de retorno correspondente.
Clique novamente no boto de adio (+) para adicionar outro parmetro de pgina, se necessrio.
9. Selecione um parmetro de pgina e clique no boto de subtrao (-) para exclu-lo se necessrio ou clique em Editar para fazer as
alteraes no parmetro.
10. Selecione a opo Retornar conjunto de registros nomeado e, em seguida, digite um nome para o conjunto de registros; caso o
procedimento armazenado retorne um conjunto de registros, clique no boto Testar para ver o conjunto retornado pelo procedimento
armazenado.
O Dreamweaver executa o procedimento armazenado e exibe o conjunto de registros, se necessrio.
Nota: Caso o procedimento armazenado retorne um conjunto de registros e use parmetros, voc deve inserir um valor na coluna Valor
padro da caixa Variveis para testar o procedimento armazenado.
Voc pode usar valores de teste diferentes para gerar conjuntos de registros diferentes. Para alterar os valores de teste, clique no boto
Editar em Parmetro e altere o valor de teste, ou clique no boto Editar em Parmetros de pgina e altere o valor padro.
11. Selecione a opo Retorna cdigo de status nomeado, digite um nome para o cdigo de status, caso o procedimento armazenado retorne
um valor de retorno do cdigo de status. Clique em OK.
Depois que voc fecha a caixa, o Dreamweaver insere o cdigo do ColdFusion na pgina que chama um procedimento armazenado no
banco de dados, quando o cdigo executado no servidor. Por sua vez, o procedimento armazenado realiza uma operao no banco de
dados como, por exemplo, inserir um registro.
Caso o procedimento armazenado use parmetros, voc pode criar uma pgina que coleta os valores de parmetro os envia para a pgina
com o procedimento armazenado. Por exemplo, voc pode criar uma pgina que usa parmetros de URL ou um formulrio em HTML para
coletar valores de parmetro dos usurios.
Para o incio
Com pginas em ASP, voc deve adicionar um objeto de comando a uma pgina para executar um procedimento armazenado. Para obter mais
informaes sobre objetos de comando, consulte Sobre os objetos de comando do ASP.
1. No Dreamweaver, abra a pgina que executar o procedimento armazenado.
2. No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Comando (procedimento armazenado).
A caixa de dilogo Comando exibida.
3. Digite um nome para o comando, selecione uma conexo com o banco de dados que contm o procedimento armazenado e escolha
Procedimento armazenado no menu pop-up Tipo.
4. Selecione o procedimento armazenado expandindo a ramificao Procedimentos armazenados na caixa Itens do banco de dados,
selecionando o procedimento armazenado na lista e clicando no boto Procedimento.
5. Insira todos os parmetros obrigatrios na tabela Variveis.
Voc no precisa inserir parmetros para nenhuma varivel RETURN_VALUE.
6. Clique em OK.
Depois que voc fecha a caixa de dilogo, o cdigo do ASP inserido na pgina. Quando o cdigo executado no servidor, o cdigo cria
um objeto de comando que executa um procedimento armazenado no banco de dados. Por sua vez, o procedimento armazenado realiza
uma operao no banco de dados como, por exemplo, inserir um registro.
Por padro, o cdigo define a propriedade Preparado do objeto Comando como true, o que faz o servidor de aplicativo reutilizar uma verso
compilada exclusiva do objeto sempre que o procedimento armazenado executado. Se voc souber que o comando ser executado mais
de uma vez, ter uma verso compilada exclusiva do objeto pode aumentar a eficincia das operaes do banco de dados. No entanto, se o
comando for executado apenas uma ou duas vezes, us-lo pode, na verdade, retardar o aplicativo da Web porque o sistema tem de parar
para compilar o comando. Para mudar a configurao, alterne para a Visualizao de cdigo e altere a propriedade Preparado para false.
Nota: Nem todos os fornecedores de bancos de dados do suporte a comandos preparados. Caso o banco de dados no d suporte a
ele, voc talvez receba uma mensagem de erro ao executar a pgina. Alterne para a Visualizao de cdigo e altere a propriedade
Preparado para false.
Caso o procedimento armazenado use parmetros, voc pode criar uma pgina que coleta os valores de parmetro os envia para a pgina
com o procedimento armazenado. Por exemplo, voc pode criar uma pgina que usa parmetros de URL ou um formulrio em HTML para
coletar valores de parmetro dos usurios.
Mais tpicos da Ajuda
Para o incio
Voc pode usar o Dreamweaver para criar um conjunto de pginas e permitir que os usurios pesquisem o banco de dados e vejam os
resultados da pesquisa.
Na maior parte dos casos, voc precisa de pelo menos duas pginas para adicionar esse recurso ao aplicativo da Web. A primeira pgina contm
um formulrio em HTML no qual os usurios inserem os parmetros de pesquisa. Embora no realize nenhuma pesquisa efetiva, essa pgina
conhecida como pgina de pesquisa.
A segunda pgina de que voc precisa a de resultados, que realiza grande parte do trabalho. A pgina de resultados realiza as seguintes
tarefas:
L os parmetros de pesquisa enviados pela pgina de pesquisa
Conecta-se ao banco de dados e procura os registros
Cria um conjunto usando os registros encontrados
Exibe o contedo do conjunto de registros
Voc tambm pode adicionar uma pgina detalhada. Uma pgina detalhada d aos usurios mais informaes sobre um determinado
registro da pgina de resultados.
Caso voc tenha apenas um parmetro de pesquisa, o Dreamweaver lhe permite adicionar recursos de pesquisa ao aplicativo da Web sem
usar consultas e variveis SQL. Basta criar as pginas e completar algumas caixas de dilogo. Caso tenha mais de um parmetro de
pesquisa, voc precisa escrever uma instruo SQL e definir muitas variveis para ela.
O Dreamweaver insere a consulta SQL na pgina. Quando a pgina executada no servidor, todos os registros na tabela do banco de
dados so verificados. Caso o campo especificado em um registro atenda s condies da consulta SQL, o registro includo em um
conjunto de registros. A consulta SQL ativa cria um conjunto de registros contendo apenas os resultados da pesquisa.
Por exemplo, a equipe de vendas em campo pode ter informaes sobre clientes de uma determinada rea cujas rendas so superiores a
um determinado nvel. Em um formulrio de uma pgina de pesquisa, o associado de vendas insere uma rea geogrfica e um nvel de
receita mnimo e, em seguida, clica no boto Enviar para enviar os dois valores a um servidor. No servidor, os valores so passados para a
instruo SQL da pgina de resultados, que cria um conjunto de registros contendo apenas os clientes da rea especificada cujas receitas
estejam acima do nvel especificado.
Para o incio
Uma pgina de pesquisa na Web normalmente contm campos de formulrio nos quais o usurio insere os parmetros de pesquisa. A pgina de
pesquisa deve ter, no mnimo, um formulrio em HTML com um boto Enviar.
Para adicionar um formulrio em HTML a uma pgina de pesquisa, conclua o seguinte procedimento.
1. Abra a pgina de pesquisa ou uma nova pgina e selecione Inserir > Formulrio > Formulrio.
criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis)
para ver os limites do formulrio, representados por linhas finas em vermelho.
2. Adicione objetos de formulrio para que os usurios insiram os parmetros de pesquisa selecionando Formulrio no menu Inserir.
Entre os objetos de formulrio esto campos de texto, menus, opes e botes de opo. Voc pode adicionar quantos objetos de
formulrio quiser para ajudar os usurios a refinar suas pesquisas. No entanto, lembre-se de que quanto maior for o nmero de parmetros
na pgina de pesquisa, mais complexa ser a instruo SQL.
3. Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).
4. (Opcional) Altere o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um
6. Na caixa Ao do Inspetor de propriedades do formulrio, digite o nome de arquivo da pgina de resultados que realizar a pesquisa no
banco de dados.
7. No menu pop-up Mtodo, selecione um dos seguintes mtodos para determinar como o formulrio envia os dados para o servidor:
OBTER envia os dados do formulrio anexando-os ao URL como uma sequncia de caracteres de consulta. Como os URLs esto
limitados a 8.192 caracteres, no use o mtodo OBTER com formulrios longos.
POSTAR envia os dados do formulrio no corpo de uma mensagem.
Padro usa o mtodo padro do navegador (normalmente, OBTER).
A pgina de pesquisa est pronta.
Para o incio
Quando o usurio clica no boto Pesquisar do formulrio, os parmetros de pesquisa so enviados para uma pgina de resultados no servidor. A
pgina de resultados no servidor, e no a pgina de pesquisa no navegador, a responsvel por recuperar os registros do banco de dados. Caso
a pgina de pesquisa envie um parmetro de pesquisa nico para o servidor, voc pode criar a pgina de resultados sem consultas e variveis
SQL. Voc cria um conjunto de registros bsico com um filtro que exclui os registros que no atendam ao parmetro de pesquisa enviado pela
pgina de pesquisa.
Nota: Caso tenha mais de uma condio de pesquisa, voc deve usar a caixa de dilogo avanada Conjunto de registros para definir o conjunto
de registros (consulte Criar uma pgina de resultados avanada).
Mas caso seja exibida a caixa de dilogo avanada, alterne para a caixa de dilogo simples clicando no boto Simples.
4. Digite um nome para o conjunto de registros e selecione uma conexo.
A conexo deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
5. No menu pop-up Tabela, selecione a tabela a ser procurada no banco de dados.
Nota: Em uma pesquisa com parmetro nico, voc pode procurar registros em apenas uma tabela. Para pesquisar mais de uma tabela
simultaneamente, voc deve usar a caixa de dilogo avanada Conjunto de registros e definir uma consulta SQL.
6. Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas
clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
Voc deve incluir apenas as colunas que contenham as informaes a serem exibidas na pgina de resultados.
Saia da caixa de dilogo Conjunto de registros por enquanto. Voc a usar para recuperar os parmetros enviados pela pgina de
pesquisa e criar um filtro do conjunto de registros a fim de excluir os registros que no atendam aos parmetros.
5. (Opcional) Clique em Testar, digite um valor de teste e clique em OK para se conectar ao banco de dados e criar uma ocorrncia do
conjunto de registros.
O valor de teste simula o valor que retornaria da pgina de pesquisa. Clique em OK para fechar o conjunto de registros de teste.
6. Caso voc esteja satisfeito com o conjunto de registros, clique em OK.
Um script do servidor inserido na pgina que verifica todos os registros na tabela do banco de dados quando executada no servidor. Caso
o campo especificado em um registro atenda condio de filtragem, o registro includo em um conjunto de registros. O script cria um
conjunto de registros contendo apenas os resultados da pesquisa.
A prxima etapa exibir o conjunto de registros na pgina de resultados. Para obter mais informaes, consulte Exibir os resultados da
pesquisa.
Para o incio
Caso a pgina de pesquisa envie mais de um parmetro de pesquisa ao servidor, voc deve escrever uma consulta SQL para a pgina de
resultados e usar os parmetros de pesquisa em variveis SQL.
Nota: Caso tenha apenas uma condio de pesquisa, voc pode usar a caixa de dilogo simples Conjunto de registros para definir o conjunto
de registros (consulte Criar uma pgina de resultados bsica).
1. Abra a pgina de resultados no Dreamweaver e, em seguida, crie um conjunto de registros abrindo o painel Ligaes (Janela > Ligaes),
clicando no boto de adio (+) e selecionando Conjunto de registros no menu pop-up.
2. Verifique se a caixa de dilogo avanada Conjunto de registros exibida.
A caixa de dilogo avanada tem uma rea de texto para inserir instrues SQL. Mas caso seja exibida a caixa de dilogo simples, alterne
para a caixa de dilogo avanada clicando no boto Avanado.
3. Digite um nome para o conjunto de registros e selecione uma conexo.
A conexo deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
4. Insira uma instruo Select na rea de texto SQL.
Verifique se a instruo inclui uma clusula WHERE com variveis que mantm os parmetros de pesquisa. No seguinte exemplo, as
variveis so chamadas varLastName e varDept:
No ColdFusion, os valores de runtime seriam #LastName# e #Department#. No PHP, os valores de runtime devem ser
$_REQUEST["LastName"] e $_REQUEST["Department"].
6. (Opcional) Clique em Testar para criar uma ocorrncia do conjunto de registros usando os valores de varivel padro.
Os valores padro simulam os valores que retornariam da pgina de pesquisa. Clique em OK para fechar o conjunto de registros de teste.
7. Caso voc esteja satisfeito com o conjunto de registros, clique em OK.
A consulta SQL inserida na pgina.
A prxima etapa exibir o conjunto de registros na pgina de resultados.
Para o incio
Depois de criar um conjunto de registros para manter os resultados da pesquisa, voc deve exibir as informaes na pgina de resultados. Exibir
os registros pode ser uma simples questo de arrastar colunas individuais do painel Ligaes para a pgina de resultados. Voc pode adicionar
links de navegao para avanar e retornar o conjunto de registros, ou criar uma regio repetitiva para exibir mais de um registro na pgina. Voc
tambm pode adicionar links a uma pgina detalhada.
Para obter mais informaes sobre mtodos de exibio do contedo dinmico em uma pgina que no seja o de exibio dos resultados em
uma tabela dinmica, consulte Exibio de registros de banco de dados.
1. Coloque o ponto de insero onde voc deseja que a tabela dinmica seja exibida na pgina de resultados e selecione Inserir > Objetos de
dados > Dados dinmicos > Tabela dinmica.
2. Complete a caixa de dilogo Tabela dinmica, selecionando o conjunto de registros definido por voc para manter os resultados de
pesquisa.
3. Clique em OK. Uma tabela dinmica que exibe resultados de pesquisa inserida na pgina de resultados.
Para o incio
O conjunto de pginas de pesquisa e de resultados pode incluir uma pgina detalhada para exibir mais informaes sobre registros especficos
da pgina de resultados. Nessa situao, a pgina de resultados tambm duplicada como pgina mestre em um conjunto de pginas
mestre/detalhadas.
Para o incio
Voc pode criar um link que abre uma pgina relacionada e passa parmetros existentes para essa pgina. O comportamento do servidor s est
disponvel quando se usa o modelo de servidor ASP.
Antes de adicionar um comportamento de servidor Ir para pgina relacionada a uma pgina, verifique se ela recebe parmetros de formulrio ou
URL de outra pgina. A funo do comportamento de servidor passar esses parmetros para uma terceira pgina. Por exemplo, voc pode
passar os parmetros de pesquisa recebidos por uma pgina de resultados para outra pgina e evitar que o usurio digite novamente esses
parmetros.
Alm disso, voc pode selecionar um texto ou uma imagem da pgina para servir como o link para a pgina relacionada ou posicionar o ponteiro
Para o incio
Voc pode alterar o contedo dinmico da pgina editando o comportamento de servidor que fornece o contedo. Por exemplo, voc pode editar
um comportamento de servidor do conjunto de registros para fornecer mais registros pgina.
O contedo dinmico de uma pgina listado no painel Comportamentos de servidor. Por exemplo, caso voc adicione um conjunto de registros
pgina, o painel Comportamentos de servidor listado da seguinte forma:
Recordset(myRecordset)
Caso voc adicione outro conjunto de registros pgina, o painel Comportamentos de servidor lista ambos os conjuntos de registros da seguinte
forma:
Recordset(mySecondRecordset)Recordset(myRecordset)
Para o incio
Para o incio
Depois de adicionar contedo dinmico a uma pgina, o exclua de uma das seguintes formas:
Selecione o contedo dinmico na pgina e pressione Excluir.
Selecione o contedo dinmico no painel Comportamentos de servidor e clique no boto de subtrao (-).
Nota: Essa operao remove o script do servidor na pgina que recupera o contedo dinmico do banco de dados. Ela no exclui os
dados do banco de dados.
Para o incio
Para o incio
Quando um usurio do Contribute edita uma pgina com contedo dinmico ou elementos invisveis (como, por exemplo, scripts e comentrios), o
Contribute exibe o contedo dinmico e os elementos invisveis como marcadores amarelos. Por padro, os usurios do Contribute no podem
selecionar ou excluir esses marcadores.
Caso queira que os usurios do Contribute possam selecionar e excluir contedo dinmico e outros elementos invisveis de uma pgina, voc
pode alterar as configuraes do grupo de permisso para permitir isso. Normalmente, os usurios do Contribute jamais podem editar contedo
dinmico, mesmo quando voc permite que eles o selecionem.
Nota: Usando algumas tecnologias de servidor, voc pode exibir texto esttico usando uma tag ou uma funo do servidor. Para permitir que os
usurios do Contribute editem o texto esttico em uma pgina dinmica que usa uma dessas tecnologias de servidor, coloque o texto fora das
tags de servidor. Para obter mais informaes, consulte Administrao do Adobe Contribute.
1. Selecione Site > Administrar o site do Contribute.
2. Caso determinadas opes obrigatrias para a compatibilidade com o Contribute no estejam ativadas, uma caixa de dilogo exibida
perguntando se voc deseja ativar essas opes. Clique em OK para ativar essas opes e a compatibilidade com o Contribute.
3. Se solicitado, insira a senha de administrador e clique em OK.
A caixa de dilogo Administrar site exibida.
4. Na categoria Usurios e funes, selecione uma funo e clique no boto Editar configuraes de funo.
5. Selecione a categoria Edio e desmarque a opo para proteger scripts e formulrios.
6. Clique em OK para fechar a caixa de dilogo Editar configuraes.
7. Clique em Fechar para fechar a caixa de dilogo Administrar site.
Para o incio
Use o Inspetor de propriedades para modificar o conjunto de registros selecionado. As opes disponveis variam de acordo com o modelo do
servidor.
1. Abra o Inspetor de propriedades (Janela > Propriedades) e, em seguida, selecione o conjunto de registros no painel Comportamentos de
servidor (Janela > Comportamento de servidor).
2. Edite todas as opes. Quando voc seleciona uma nova opo no inspetor, o Dreamweaver atualiza a pgina.
Mais tpicos da Ajuda
Para o incio
Quando um visitante insere informaes em um formulrio exibido em um navegador da Web e clica no boto de envio, as informaes so
enviadas para um servidor onde so processadas por um script do servidor ou aplicativo. O servidor responde enviando de volta as informaes
solicitadas pelo usurio (ou cliente) ou realizando alguma outra ao com base no contedo do formulrio.
Voc pode criar formulrios que enviem dados para a maior parte dos servidores de aplicativos, incluindo PHP, ASP e ColdFusion. Se voc usar
o ColdFusion, tambm poder adicionar controles de formulrios especficos do ColdFusion nos seus formulrios.
Nota: Voc tambm pode enviar dados de formulrio diretamente para um destinatrio de email.
Objetos de formulrio
Para o incio
No Dreamweaver, os tipos de entrada de formulrio so chamados objetos de formulrio. Os objetos de formulrio so os mecanismos que
permitem aos usurios inserir dados. Voc pode adicionar os seguintes objetos de formulrio a um formulrio:
Campos de texto Aceite todos os tipos de entrada de texto alfanumrico. O texto pode ser exibido como uma linha nica, vrias linhas e um
campo de senha no qual o texto digitado substitudo por asteriscos ou marcadores a fim de ocultar o texto de curiosos.
Nota: As senhas e as demais informaes enviadas para um servidor usando um campo de senha no so criptografadas. Os dados
transferidos podem ser interceptados e lidos como texto alfanumrico. Por essa razo, voc deve sempre fornecer criptografia aos dados que
deseja manter em segurana.
Campos ocultos Armazene informaes inseridas por um usurio como, por exemplo, endereo de email ou preferncia de visualizao e, em
seguida, use esses dados na prxima visita do usurio ao site.
Botes Realize as aes com o clique. Voc pode adicionar um nome ou rtulo personalizado a um boto, ou usar um dos rtulos Enviar ou
Redefinir predefinidos. Use um boto para enviar dados de formulrio ao servidor ou para redefinir o formulrio. Voc tambm pode atribuir
outras tarefas de processamento definidas em um script. Por exemplo, o boto pode calcular o custo total dos itens selecionados com base em
valores atribudos.
Caixas de seleo Permita vrias respostas dentro de um nico grupo de opes. Um usurio pode selecionar quantas opes se aplicarem. O
seguinte exemplo mostra trs itens de caixa de seleo marcados: Surfing, Mountain Biking e Rafting.
Botes de opo Represente opes exclusivas. A seleo de um boto dentro de um grupo de botes de opo desmarca todos os demais
(um grupo consiste em dois ou mais botes que compartilham o nome). No exemplo abaixo, Rafting a opo selecionada no momento. Caso o
usurio clique em Surfing, o boto Rafting desmarcado automaticamente.
Menus de lista Exiba valores de opo em uma lista de rolagem que permite aos usurios selecionar vrias opes. A opo Lista exibe os
valores de opo em um menu que permite aos usurios selecionar apenas um nico item. Use menus quando voc tiver uma quantidade de
espao limitada, mas precisa exibir muitos itens, ou para controlar os valores retornados ao servidor. Diferentemente dos campos de texto nos
quais os usurios digitam o que querem, inclusive dados invlidos, voc define os valores exatos retornados por um menu.
Nota: Um menu pop-up em um formulrio em HTML no igual a um menu pop-up grfico. Para obter informaes sobre como criar, editar,
mostrar e ocultar um menu pop-up grfico, consulte o link ao final desta seo.
Menus de salto Listas de navegao ou menus pop-up que permitem inserir um menu no qual cada opo vinculada a um documento ou
arquivo.
Campos de arquivo Eles permitem aos usurios procurar um arquivo no computador e carreg-lo como dados de formulrio.
Campos de imagem Eles permitem inserir uma imagem em um formulrio. Use campos de imagem para criar botes grficos como, por
exemplo, Enviar ou Redefinir. O uso de uma imagem para realizar tarefas que no sejam o envio de dados exige que um comportamento seja
anexado ao objeto de formulrio.
Para o incio
1. Abra uma pgina e coloque o ponto de insero onde voc deseja que o formulrio seja exibido.
2. Selecione Inserir > Formulrio ou a categoria Formulrios, no painel Inserir, e clique no cone Formulrio.
Na visualizao Design, os formulrios so indicados por um contorno vermelho pontilhado. Se voc no vir esse contorno, selecione
Exibir > Auxlios visuais > Elementos invisveis.
3. Defina as propriedades do formulrio em HTML no Inspetor de propriedades (Janela >Propriedades):
a. Na janela Documento, clique no contorno para selecionar o formulrio.
b. Na caixa Formulrio, digite um nome exclusivo para identificar o formulrio.
A nomeao de um formulrio possibilita referenciar ou controlar o formulrio com uma linguagem de script como, por exemplo,
JavaScript ou VBScript. Caso voc no nomeie o formulrio, o Dreamweaver gera um nome usando a sintaxe formn e incrementa o
valor de n a cada formulrio adicionado pgina.
c. Na caixa Ao, especifique a pgina ou o script que processar os dados do formulrio digitando o caminho ou clicando no cone de
pasta para navegar at a pgina ou o script apropriado. Exemplo: processorder.php.
d. No menu pop-up Mtodo, especifique o mtodo para transmitir os dados de formulrio ao servidor. Defina uma das seguintes opes:
Padro Usa a configurao padro do navegador para enviar os dados do formulrio ao servidor. Normalmente, o valor padro o
mtodo OBTER.
GET Acrescenta o valor URL que est solicitando a pgina.
POST Incorpora os dados de formulrio solicitao HTTP.
No use o mtodo OBTER para enviar formulrios longos. As URLs esto limitadas a 8.192 caracteres. Se a quantidade de dados
enviados for muito grande, eles sero truncados, o que leva a resultados inesperados ou falhas no processamento.
As pginas dinmicas geradas por parmetros passados pelo mtodo OBTER podem ser marcadas porque todos os valores
necessrios para gerar novamente a pgina esto contidos no URL exibido na caixa Endereo do navegador. Por outro lado, as
pginas dinmicas geradas por parmetros passados pelo mtodo POSTAR no podem ser marcadas.
Caso voc colete nomes de usurio e senhas confidenciais, nmeros de carto de crdito ou outras informaes confidenciais, o
mtodo POSTAR pode parecer mais seguro que o mtodo OBTER. No entanto, as informaes enviadas pelo mtodo POSTAR no
so criptografadas e podem ser facilmente recuperadas por um hacker. Para garantir a segurana, use uma conexo protegida em um
servidor seguro.
e. (Opcional) No menu pop-up Tipo de codif., especifique o tipo de codificao MIME dos dados enviados para o servidor para
processamento.
A configurao padro de application/x-www-form-urlencode costuma ser usado com o mtodo POSTAR. Caso voc esteja criando um
campo de carregamento de arquivo, especifique o tipo MIME multipart/form-data.
f. (Opcional) No menu pop-up Destino, especifique a janela na qual exibir os dados retornados pelo programa invocado.
Caso a janela nomeada ainda no esteja aberta, uma nova com esse nome aberta. Defina um dos seguintes valores de destino:
_blank Abre o documento de destino em uma nova janela sem nome.
_parent Abre o documento de destino na janela pai da janela que exibe o documento atual.
_self Abre o documento de destino na mesma janela da janela na qual o formulrio foi enviado.
_top Abra o documento de destino no corpo da janela atual. Esse valor pode ser usado para verificar se o documento de destino usa
toda a janela mesmo que o documento original tenha sido exibido em um quadro.
4. Insira objetos de formulrio na pgina:
a. Coloque o ponto de insero onde o objeto de formulrio deve ser exibido no formulrio.
b. Selecione o objeto no menu Inserir > Formulrio ou na categoria Formulrios do painel Inserir.
c. Complete a caixa de dilogo Atributos de acesso a tag input. Para obter mais informaes, clique no boto Ajuda da caixa de dilogo.
Nota: Se no visualizar a caixa de dilogo Atributos de acesso a tag input, voc ter que ter o Ponto de insero na Visualizao de
cdigo para tentar inserir o objeto de formulrio. Verifique se o Ponto de insero est na Visualizao de projeto e tente novamente.
Para obter mais informaes sobre esse tpico, consulte o artigo de David PowerCriando formulrios HTML no Dreamweaver.
d. Defina as propriedades dos objetos.
e. Digite um nome para o objeto no Inspetor de propriedades.
Todos os campos de texto, campos ocultos, caixas de seleo e objetos de lista/menu devem ter um nome exclusivo que identifique o
objeto no formulrio. Os nomes de objeto de formulrio no podem conter espaos ou caracteres especiais. Voc pode usar qualquer
combinao dos caracteres alfanumricos e um sublinhado (_). O rtulo que voc atribui ao objeto o nome da varivel que armazena
o valor (os dados inseridos) do campo. Esse o valor enviado para o servidor para processamento.
Nota: Todos os botes de opo em um grupo devem ter o mesmo nome.
f. Para identificar o campo de texto, a caixa de seleo ou o objeto de boto de opo na pgina, clique ao lado do objeto e digite o
rtulo.
5. Ajuste o layout do formulrio.
Use quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Voc no pode inserir um
formulrio em outro formulrio (ou seja, no possvel sobrepor tags), mas pode incluir mais de um formulrio em uma pgina.
Ao criar formulrios, no se esquea de identificar os campos de formulrio com texto descritivo para permitir aos usurios saber ao que
eles esto respondendo por exemplo, Digite seu nome para solicitar informaes de nome.
Use tabelas para fornecer estrutura a objetos de formulrio e rtulos de campo. Ao usar tabelas em formulrios, verifique se todas as tags
table esto includas entre as tags form.
Para assistir a um tutorial sobre a criao de formulrios, consulte www.adobe.com/go/vid0160_br.
Para assistir a um tutorial sobre formulrios de estilo com CSS, consulte www.adobe.com/go/vid0161_br.
de caract, que especifica o nmero mximo de caracteres que podem ser digitados no campo. Por exemplo, se a Largura do caractere for
definida como 20 (o valor padro) e um usurio digitar 100 caracteres, apenas 20 deles sero visveis no campo de texto. Embora voc no
possa exibir os caracteres no campo, eles so reconhecidos pelo objeto de campo e enviados para processamento no servidor.
N mx. de caract. Especifica o nmero mximo de caracteres que o usurio pode digitar em campos de texto de linha nica. Use N mx. de
caract. para limitar CEPs a 5 dgitos, limitar senhas a 10 caracteres etc. Caso voc deixe a caixa N mx. de caract. em branco, os usurios
podem digitar qualquer quantidade de texto. Se o texto exceder a largura do caractere do campo, o texto ser rolado. Caso um usurio exceda o
nmero mximo de caracteres, o formulrio produz um som de alerta.
Nmero de linhas (Disponvel quando a opo Vrias linhas est selecionada) Define a altura do campo para campos de texto com vrias
linhas.
Desativado Desativa a rea de texto.
Somente leitura Torna a rea de texto somente leitura.
Tipo Designa o campo como um campo de linha nica, de vrias linhas ou de senha.
Linha nica Resulta em uma tag input com o type atributo definido como text. A configurao Largura do caractere mapeada para o
atributo size e a configurao N mx. de caract., para o atributo maxlength.
Multilinhas Resulta em uma tag textarea. A configurao Largura do caractere mapeada para o atributo cols e a configurao Nmero
de linhas, para o atributo rows.
Senha Resulta em uma tag input com o type atributo definido como password. As configuraes Largura do caractere e N mx. de
caract. so mapeadas para os mesmos atributos como campos de texto de linha nica. Quando um usurio digita um campo de texto de
senha, a entrada exibida como marcadores ou asteriscos para proteg-lo da observao de outras pessoas.
Valor inicial Atribui o valor exibido no campo quando o formulrio carregado pela primeira vez. Por exemplo, voc pode indicar que o usurio
digita informaes no campo incluindo uma observao ou um valor de exemplo.
Classe Permite que voc aplique regras de CSS ao objeto.
Opes de menu
Lista/menu Atribui um nome ao menu. O nome deve ser exclusivo.
Tipo Indica se o menu aberto quando clicado (a opo Menu) ou exibe uma lista rolvel de itens (a opo Lista). Selecione a opo Menu caso
voc queira que apenas uma opo permanea visvel quando o formulrio exibido em um navegador. Para exibir as demais opes, o usurio
clica na seta para baixo.
Selecione a opo Lista para listar uma ou todas as opes quando o formulrio exibido em um navegador a fim de permitir aos usurios
selecionar vrios itens.
Para o incio
Um objeto de formulrio dinmico um objeto de formulrio cujo estado inicial determinado pelo servidor quando a pgina solicitada no
servidor, e no pelo designer do formulrio durante o design. Por exemplo, quando um usurio solicita uma pgina do PHP que contm um
formulrio com um menu, um script do PHP na pgina preenche automaticamente o menu com valores armazenados em um banco de dados.
Em seguida, o servidor envia a pgina completada para o navegador do usurio.
Tornar objetos de formulrio dinmicos pode simplificar a manuteno do site. Por exemplo, muitos sites usam menus para apresentar aos
usurios um conjunto de opes. Caso o menu seja dinmico, voc pode adicionar, remover ou alterar itens de menu em um nico local a
tabela do banco de dados em que os itens so armazenados para atualizar todas as ocorrncias do mesmo menu no site.
Para o incio
Voc pode preencher dinamicamente um menu de formulrio em HTML ou menu de lista com entradas de um banco de dados. Na maioria das
pginas, voc pode usar um objeto de menu em HTML.
Antes de comear, voc deve inserir um formulrio em HTML em uma pgina do ColdFusion, PHP ou ASP e definir um conjunto de registros ou
outra fonte de contedo dinmico para o menu.
1. Insira um objeto de formulrio Lista/menu HTML na pgina:
a. Clique em um formulrio em HTML na pgina (Inserir > Formulrio > Formulrio).
b. Selecione Inserir > Formulrio > Lista/menu para inserir o objeto de formulrio.
2. Siga um destes procedimentos:
Selecione o objeto de formulrio Lista/menu HTML novo ou j existente e, em seguida, clique no boto Dinmico no Inspetor de
propriedades.
Selecione Inserir > Objetos de dados > Dados dinmicos > Lista de seleo dinmica.
3. Complete a caixa de dilogo Lista/menu dinmico e clique em OK.
a. No menu pop-up Opes do conjunto de registros, selecione o conjunto de registros a ser usado como uma fonte de contedo. Voc
tambm usa esse menu para editar itens de lista/menu estticos e dinmicos posteriormente.
b. Na rea Opes estticas, insira um item padro na lista ou no menu. Alm disso, use essa opo para editar entradas estticas em
um objeto de formulrio lista/menu depois de adicionar contedo dinmico.
c. (Opcional) Use os botes de adio (+) e de subtrao (-) para adicionar e remover itens na lista. Os itens esto na mesma ordem da
caixa de dilogo Valores iniciais da lista. O primeiro item da lista o item selecionado quando a pgina carregada em um navegador.
Use os botes de seta para cima e para baixo a fim de reorganizar os itens na lista.
d. No menu pop-up Valores, selecione o campo que contm os valores dos itens de menu.
e. No menu pop-up Rtulos, selecione o campo que contm os rtulos dos itens de menu.
f. (Opcional) Para especificar que um determinado item de menu selecionado quando a pgina aberta em um navegador ou quando
um registro exibido no formulrio, digite um valor igual ao valor do item de menu na caixa Selecionar valor igual a.
Voc pode inserir um valor esttico ou especificar um valor dinmico clicando no cone de raio ao lado da caixa e selecionando um
valor dinmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos valores do
item de menu.
Para o incio
Para o incio
Voc pode exibir contedo dinmico em campos de texto HTML quando o formulrio visualizado em um navegador.
Antes de comear, voc deve criar o formulrio em uma pgina do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de
contedo dinmico para o texto.
1. Selecione o campo de texto no formulrio em HTML na pgina.
2. No Inspetor de propriedades, clique no cone de raio ao lado da caixa Valor inicial para exibir a caixa de dilogo Dados dinmicos.
3. Selecione a coluna do conjunto de registros que fornecer um valor para o campo de texto e, em seguida, clique em OK.
Para o incio
A fonte de dados deve conter informaes textuais. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados
disponveis no atendam s suas necessidades, clique no boto de adio (+) para definir uma nova.
Para o incio
Voc pode permitir ao servidor decidir se deve escolher uma caixa de seleo quando o formulrio exibido em um navegador.
Antes de comear, voc deve criar o formulrio em uma pgina do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de
contedo dinmico para as caixas de seleo. O ideal que a origem de contedo contenha dados boolianos como, por exemplo, Sim/No ou
verdadeiro/falso.
1. Escolha um objeto de formulrio de caixa de seleo na pgina.
2. No Inspetor de propriedades, clique no boto Dinmico.
3. Complete a caixa de dilogo Caixa de seleo dinmica e clique em OK.
Clique no cone de raio ao lado da caixa Marcar se e selecione o arquivo na lista de fontes de dados.
A fonte de dados deve conter dados Boolianos como, por exemplo, Sim e No ou verdadeiro e falso. Caso nenhuma fonte de dados
seja exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, clique no boto de adio (+) para
definir uma nova.
Na caixa Igual a, digite o valor que o campo deve ter para que a caixa de seleo seja exibida marcada.
Por exemplo, para que a caixa de seleo seja exibida marcada quando um determinado campo em um registro apresentar um valor
Sim, digite Sim na caixa Igual a.
Nota: Esse valor tambm retorna para o servidor caso o usurio clique no boto Enviar do formulrio.
Para o incio
Pr-selecione dinamicamente um boto de opo em HTML quando um registro exibido no formulrio em HTML em um navegador.
Antes de comear, voc deve criar o formulrio em uma pgina do ColdFusion, PHP ou ASP e inserir pelo menos um grupo de botes de opo
em HTML (Inserir > Formulrio > Grupo de botes de opo). Voc tambm deve definir um conjunto de registros ou outra origem de contedo
dinmico para os botes de opo. O ideal que a origem de contedo contenha dados boolianos como, por exemplo, Sim/No ou
verdadeiro/falso.
1. Na visualizao Design, selecione um boto de opo no grupo.
2. No Inspetor de propriedades, clique no boto Dinmico.
3. Complete a caixa de dilogo Grupo de botes de opo dinmico e clique em OK.
Para o incio
O Dreamweaver pode adicionar cdigo JavaScript que verifica o contedo dos campos de texto especificados para assegurar que o usurio
inseriu o tipo de dados correto.
Voc pode usar widgets de formulrio do Spry para criar os formulrios e validar o contedo dos elementos de formulrio especificados. Para
obter mais informaes, consulte os tpicos do Spry listados abaixo.
Voc tambm pode criar formulrios do ColdFusion no Dreamweaver que validam o contedo de campos especificados. Para obter mais
informaes, consulte os tpicos do captulo ColdFusion listados abaixo.
1. Crie um formulrio em HTML que inclua pelo menos um campo de texto e um boto Enviar.
Verifique se todos os campos de texto que voc deseja validar tm um nome exclusivo.
2. Selecione o boto Enviar.
3. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione o comportamento Validar formulrio na
lista.
4. Defina as regras de validao para cada campo de texto e clique em OK.
Por exemplo, voc pode especificar que um campo de texto referente idade de uma pessoa aceite apenas nmeros.
Nota: O comportamento Validar formulrio s est disponvel caso um campo de texto tenha sido inserido no documento.
Para o incio
Voc pode anexar comportamentos do JavaScript armazenados no Dreamweaver a objetos de formulrio em HTML como, por exemplo, botes.
1. Selecione o objeto de formulrio em HTML.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione um comportamento na lista.
Para o incio
Alguns formulrios usam JavaScript ou VBScript para realizar o processamento de formulrio ou outra ao no cliente, e no o envio dos dados
do formulrio para processamento no servidor. Voc pode usar o Dreamweaver para configurar um boto de formulrio e executar um
determinado script do cliente quando usurio clica no boto.
1. Selecione um boto Enviar em um formulrio.
2. No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Chamar JavaScript na lista.
3. Na caixa Chamar JavaScript, digite o nome da funo do JavaScript a ser executada quando o usurio clica no boto e clique em OK.
Por exemplo, voc pode digitar o nome de uma funo que ainda no existe como, por exemplo, processMyForm().
4. Caso a funo JavaScript ainda no esteja na seo head do documento, adicione-a agora.
Por exemplo, voc pode definir a seguinte funo JavaScript na seo head do documento para exibir uma mensagem quando o usurio
clica no boto Enviar:
function processMyForm(){
alert('Thanks for your order!');
}
Para o incio
Ao inserir um objeto de formulrio em HTML, voc pode tornar o objeto de formulrio acessvel e alterar os atributos de acessibilidade
posteriormente.
sendo o valor do atributo for caso voc escolha a opo Anexar tag label usando nas opes Estilo.
Dispor ao redor com tag label Envolve o item de formulrio com uma tag label da seguinte forma:
<label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>
Anexar tag label usando Usa o atributo for para envolver o item de formulrio com uma tag label da seguinte forma:
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>
Essa opo faz com que o navegador processe texto associado a uma caixa de seleo e ao boto de opo com um retngulo em foco e
permite ao usurio marcar a caixa de seleo e o boto de opo clicando em qualquer lugar do texto associado, e no a caixa de seleo
ou o controle do boto de opo.
Nota: Essa a opo preferencial para acessibilidade; no entanto, a funcionalidade pode variar de acordo com o navegador.
Nenhuma tag label No usa uma tag label da seguinte forma:
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton3
Chave de acesso Usa um equivalente do teclado (uma letra) e a tecla Alt (Windows) ou a tecla Control (Macintosh) para selecionar o
objeto de formulrio no navegador. Por exemplo, se voc digitasse B como Chave de acesso, os usurios com um navegador Macintosh
poderiam digitar Control+B para selecionar o objeto de formulrio.
ndice de abas Especifica uma ordem de abas para os objetos de formulrio. Caso voc defina a ordem de abas para um objeto, voc
deve definir a ordem para todos os objetos.
A configurao de uma ordem de abas til quando voc tem outros links e objetos de formulrio na pgina e precisa que o usurio
percorra eles em uma ordem especfica.
5. Clique em Sim para inserir uma tag form.
O objeto de formulrio exibido no documento.
Nota: Se voc pressionar Cancelar, o objeto de formulrio aparecer no documento, mas o Dreamweaver no associar tags ou atributos
de acessibilidade a ela.
Para o incio
Um aplicativo do ASP deve se conectar a um banco de dados por meio de um driver ODBC (conectividade com banco de dados aberto) ou um
provedor OLE DB (banco de dados de vinculao e incorporao de objeto). O driver ou o provedor funciona como um intrprete que permite ao
aplicativo da Web se comunicar com o banco de dados. A seguinte tabela mostra alguns drivers que voc pode usar com os bancos de dados
Microsoft Access, Microsoft SQL Server e Oracle:
Banco de dados
Microsoft Access
Oracle
Voc pode usar o DSN (nome de uma fonte de dados) ou a sequncia de caracteres de conexo para se conectar ao banco de dados. Voc
deve usar uma sequncia de caracteres de conexo caso esteja se conectando por meio de um provedor OLE DB ou um driver ODBC no esteja
instalado em um sistema Windows.
Um DSN um identificador com apenas uma palavra como, por exemplo, myConnection, que aponta para o banco de dados e contm todas as
informaes necessrias para se conectar a ele. Voc define um DSN no Windows. Voc pode usar um DSN caso esteja se conectando por meio
de um driver ODBC instalado em um sistema Windows.
Uma sequncia de conexo uma expresso codificada manualmente que identifica o banco de dados e lista as informaes necessrias para
se conectar a ele, como mostrado no seguinte exemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Nota: Voc tambm pode usar uma sequncia de conexo caso esteja se conectando por meio de um driver ODBC instalado em um sistema
Windows, embora o uso de um DSN seja mais fcil.
Para o incio
Voc pode usar um provedor OLE DB para se comunicar com o banco de dados (o OLE DB s est disponvel no Windows NT, 2000 ou XP). A
criao de uma conexo OLE DB direta com banco de dados especfico pode aumentar a velocidade da conexo eliminando a camada ODBC
entre o aplicativo da Web e o banco de dados.
Caso voc no especifique um provedor OLE DB para o banco de dados, o ASP usa o provedor OLE DB padro para drivers ODBC a fim de se
comunicar com um driver ODBC que, por sua vez, se comunica com o banco de dados.
H provedores OLE DB diferentes para bancos de dados diferentes. Voc pode obter provedores OLE DB para o Microsoft Access e o SQL
Server baixando e instalando os pacotes do Microsoft Data Access Components (MDAC) 2.5 e 2.7 no computador com o Windows e o IIS em
execuo. Voc pode baixar os pacotes MDAC gratuitamente no site da Microsoft em http://msdn.microsoft.com/data/mdac/downloads/.
Nota: Verifique se voc instalou o MDAC 2.5 antes da instalao do MDAC 2.7.
Voc pode baixar provedores OLE DB para bancos de dados Oracle no site da Oracle em
Para o incio
Uma sequncia de caracteres de conexo combina todas as informaes de que o aplicativo da Web precisa para se conectar a um banco de
dados. O Dreamweaver insere essa sequncia de caracteres nos scripts do servidor da pgina para serem processados posteriormente pelo
servidor de aplicativo.
Uma sequncia de caracteres de conexo para bancos de dados Microsoft Access e SQL Server consiste em uma combinao dos seguintes
parmetros separados por pontos-e-vrgulas:
Provedor Especifica o provedor OLE DB para o banco de dados. Por exemplo, eis os parmetros de provedores OLE DB comuns para bancos
de dados Access, SQL Server e Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Para o valor do parmetro do provedor OLE DB, consulte a documentao do fornecedor do provedor ou o administrador do sistema.
Caso no inclua um parmetro Provedor, usado o provedor OLE DB padro para ODBC, e voc deve especificar um driver ODBC apropriado
ao banco de dados.
Driver Especifica o driver ODBC a ser usado caso voc no especifique um provedor OLE DB para o banco de dados.
Servidor Especifica o servidor que hospeda o banco de dados SQL Server caso o aplicativo da Web seja executado em um servidor diferente.
Banco de dados O nome de um banco de dados SQL Server.
DBQ O caminho para um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. O caminho est no servidor
que hospeda o arquivo do banco de dados.
UID Especifica o nome do usurio.
PWD Especifica a senha do usurio.
DSN O nome da fonte de dados, caso voc uma. Dependendo de como define o DSN no servidor, voc pode omitir os demais parmetros da
sequncia de caracteres de conexo. Por exemplo, DSN=Results pode ser uma sequncia de caracteres de conexo vlida caso voc defina os
demais parmetros ao criar o DSN.
As sequncias de caracteres de conexo para outros tipos de bancos de dados talvez no usem os parmetros listados acima ou tero nomes ou
usos diferentes quanto aos parmetros. Para obter mais informaes, consulte a documentao do fornecedor do banco de dados ou o
administrador do sistema.
Eis um exemplo de uma sequncia de caracteres de conexo que criar uma conexo ODBC com um banco de dados do Access chamado
trees.mdb:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Eis um exemplo de uma conexo que criar uma conexo OLE DB com um banco de dados do SQL Server chamado Mothra localizado em um
servidor chamado Gojira:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8
Para o incio
Nota: Esta seo pressupe que voc tenha configurado um aplicativo do ASP. Ele tambm considera que h um banco de dados configurado
no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP.
Voc pode usar um DSN para criar uma conexo ODBC entre o aplicativo da Web e o banco de dados. DSN um nome que contm todos os
parmetros necessrios para se conectar a um banco de dados especfico usando um driver ODBC.
Como s pode especificar um driver ODBC em um DSN, voc deve usar uma sequncia de caracteres de conexo caso queira usar um provedor
OLE DB.
Voc pode usar um DSN definido localmente para criar uma conexo de banco de dados no Dreamweaver.
Para o incio
Nota: Esta seo pressupe que voc tenha configurado um aplicativo do ASP. Ele tambm considera que h um banco de dados configurado
no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP.
Nota: O Dreamweaver pode recuperar apenas DSNs de servidor criados com o Administrador de fonte de dados ODBC do Windows.
Voc pode usar um DSN definido em um computador remoto para criar uma conexo de banco de dados no Dreamweaver. Caso voc queira
usar um DSN remoto, o DSN deve ser definido no computador com o Windows e o servidor de aplicativo em execuo (provavelmente, o IIS).
Nota: Como s pode especificar um driver ODBC em um DSN, voc deve usar uma sequncia de caracteres de conexo caso queira usar um
provedor OLE DB.
1. Defina um DSN no sistema remoto em que o servidor de aplicativo est em execuo.
Para obter instrues, consulte os seguintes artigos no site da Microsoft:
Caso o computador remoto esteja executando o Windows 2000, consulte o artigo da Base de Dados de Conhecimento da Microsoft
300596 em http://support.microsoft.com/default.aspx?scid=kb;pt-br;300596
Caso o computador remoto esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento da Microsoft
305599 em http://support.microsoft.com/default.aspx?scid=kb;pt-br;305599
2. Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).
3. Clique no boto de adio (+) no painel e selecione Nome da fonte de dados (DSN) no menu.
4. Digite um nome para a nova conexo sem espaos ou caracteres especiais.
5. Selecione Usando DSN no servidor de teste.
Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam DSNs no servidor de
aplicativo.
6. Digite o DSN ou clique no boto DSN para conect-lo ao servidor e selecione o DSN para o banco de dados que voc deseja e, em
seguida, complete as opes.
7. Complete as caixas Nome do usurio e Senha.
8. Voc pode restringir o nmero de itens de banco de dados que o Dreamweaver recupera durante o design clicando em Avanado e
digitando um nome de esquema ou de catlogo.
Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
9. Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexo, clique duas vezes na
sequncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o Dreamweaver usa para processar pginas
dinmicas.
Para o incio
Voc pode usar uma conexo sem DSN para criar uma conexo ODBC ou OLE DB entre o aplicativo da Web e o banco de dados. Voc usa
uma sequncia de caracteres de conexo para criar esse tipo de conexo.
1. Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).
2. Clique no boto de adio (+) no painel, selecione Personalizar sequncia de caracteres de conexo no menu, complete as opes e clique
em OK.
3. Digite um nome para a nova conexo sem espaos ou caracteres especiais.
4. Digite uma sequncia de caracteres de conexo para o banco de dados. Se voc no especificar um provedor OLE DB na sequncia de
conexo ou seja, se voc no incluir um parmetro Provider o ASP usar automaticamente o provedor OLE DB dos drivers ODBC.
Nesse caso, voc deve especificar um driver ODBC apropriado ao banco de dados.
Caso o site seja hospedado por um ISP e voc no saiba o caminho completo do banco de dados, use o mtodo MapPath do objeto de
servidor do ASP na sequncia de conexo.
5. Caso o driver de banco de dados especificado na sequncia de caracteres de conexo no esteja instalado no mesmo computador do
Dreamweaver, selecione Usando driver no servidor de teste.
Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam o servidor de aplicativo.
6. Voc pode restringir o nmero de itens de banco de dados que o Dreamweaver recupera durante o design clicando em Avanado e
digitando um nome de esquema ou de catlogo.
Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
7. Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexo, clique duas vezes na
sequncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o Dreamweaver usa para processar pginas
dinmicas.
<%Response.Write(stringvariable)%>
3. Use o mtodo MapPath a fim de obter um valor para o argumento stringvariable.
Eis um exemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4. Para exibir a pgina, alterne para Visualizao dinmica (Exibir > Visualizao dinmica).
A pgina exibe o caminho fsico do arquivo no servidor de aplicativo, por exemplo:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Para obter mais informaes sobre o mtodo MapPath, consulte a documentao on-line que acompanha o Microsoft IIS.
Para o incio
Quando voc cria uma conexo de banco de dados, o Dreamweaver armazena as informaes da conexo em um arquivo de incluso na
subpasta Conexes da pasta raiz local do site. Voc pode editar ou excluir as informaes de conexo no arquivo manualmente ou da seguinte
forma.
Para o incio
Ao desenvolver um aplicativo da Web do ColdFusion no Dreamweaver, voc se conecta a um banco de dados selecionando uma fonte de dados
do ColdFusion definida no Dreamweaver ou no Administrador do ColdFusion, o console de gerenciamento do servidor.
Antes de se conectar a um banco de dados, voc deve configurar um aplicativo da Web do ColdFusion. Voc tambm deve configurar um banco
de dados no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP.
Verifique se o Dreamweaver sabe onde localizar as fontes de dados do ColdFusion. Para recuperar as fontes de dados do ColdFusion no
momento da criao, o Dreamweaver coloca os scripts em uma pasta do computador no qual o ColdFusion est em execuo. Voc deve
especificar essa pasta na categoria Servidor de teste da caixa de dilogo Definio de sites.
Em seguida, voc deve criar uma fonte de dados do ColdFusion no Dreamweaver ou no Administrador do ColdFusion (caso ainda no haja
nenhuma). Depois de criar uma fonte de dados do ColdFusion, voc pode us-la no Dreamweaver para se conectar ao banco de dados.
Para o incio
Para poder usar as informaes do banco de dados na pgina, voc deve criar uma fonte de dados do ColdFusion. Caso esteja executando o
ColdFusion MX 7 ou posterior, voc pode criar ou modificar diretamente a fonte de dados no Dreamweaver. Caso esteja executando o ColdFusion
MX, voc deve usar o console de gerenciamento do servidor, o Administrador do ColdFusion MX, para criar ou modificar a fonte de dados. Nesse
caso, voc pode continuar usando o Dreamweaver para abrir o Administrador do ColdFusion MX.
Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 7 ou posterior esteja em
execuo
1. Verifique se um computador com o ColdFusion MX 7 ou posterior em execuo est definido como servidor de teste do site.
2. Abra qualquer pgina do ColdFusion no Dreamweaver.
3. Para criar uma nova fonte de dados, clique no boto de adio (+) do painel Bancos de dados (Janelas > Bancos de dados) e insira os
valores de parmetro especficos do driver de banco de dados.
Nota: O Dreamweaver s exibe o boto de adio (+) caso voc esteja executando o ColdFusion MX 7 ou posterior.
4. Para modificar uma fonte de dados, clique duas vezes na conexo de banco de dados no painel Bancos de dados e faa as alteraes.
Voc pode editar qualquer parmetro, exceto o nome da fonte de dados. Para obter mais informaes, consulte a documentao do
fornecedor do driver ou o administrador do sistema.
Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 6.1 ou 6.0 esteja em
execuo
1. Abra qualquer pgina do ColdFusion no Dreamweaver.
2. No painel Bancos de dados (Janela > Bancos de dados) do Dreamweaver, clique em Modificar fontes de dados na barra de ferramentas do
painel.
3. Faa logon no Administrador do ColdFusion MX e crie ou modifique a fonte de dados.
Para obter instrues, consulte a ajuda do ColdFusion (Ajuda > Ajuda do ColdFusion).
Voc deve fornecer determinados valores de parmetro para criar a fonte de dados do ColdFusion. Em relao aos valores de parmetro
especficos do driver de banco de dados, consulte a documentao do fornecedor do driver ou o administrador do sistema.
Depois de criar uma fonte de dados do ColdFusion, voc pode us-la no Dreamweaver.
Para o incio
Depois de criar uma fonte de dados do ColdFusion, use-a para se conectar ao banco de dados no Dreamweaver.
Abra qualquer pgina do ColdFusion no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). As fontes de dados
do ColdFusion devem ser exibidas no painel.
Caso as fontes de dados no sejam exibidas, complete a lista de verificao no painel. Verifique se o Dreamweaver sabe onde localizar as fontes
de dados do ColdFusion. Na categoria Servidor de teste da caixa de dilogo Definio de sites, especifique a pasta raiz do site no computador no
qual o ColdFusion est em execuo.
Mais tpicos da Ajuda
Configurar um servidor de teste
Para o incio
Tendo em vista o desenvolvimento do PHP, o Dreamweaver s d suporte ao sistema de banco de dados MySQL. No h suporte para outros
sistemas de banco de dados como, por exemplo, Microsoft Access ou Oracle. O MySQL um software de cdigo-fonte aberto que voc pode
baixar gratuitamente na Internet para uso no comercial. Para obter mais informaes, consulte o site do MySQL em
http://dev.mysql.com/downloads/.
Esta seo pressupe que voc tenha configurado um aplicativo do PHP. Ele tambm considera que h um banco de dados MySQL configurado
no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP.
Para fins de desenvolvimento, baixe e instale a verso Windows Essentials do servidor de banco de dados MySQL.
Para o incio
Para se conectar a um banco de dados durante o desenvolvimento de um aplicativo do PHP no Dreamweaver, voc deve ter um ou mais bancos
de dados MySQL e o servidor MySQL deve ser inicializado.
1. Abra uma pgina do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).
2. Clique no boto de adio (+) no painel, selecione Conexo MySQL no menu e complete a caixa de dilogo.
Digite um nome para a nova conexo sem espaos ou caracteres especiais.
Na caixa Servidor MySQL, digite um endereo IP ou o nome de um servidor para o computador de hospedagem do MySQL. Caso o
MySQL esteja em execuo no mesmo computador do PHP, voc pode digitar localhost.
Digite o nome do usurio e a senha do MySQL.
Na caixa Banco de dados, digite o nome do banco de dados ou clique em Selecionar e selecione o banco de dados na lista de bancos
de dados MySQL e clique em Testar.
O Dreamweaver tenta se conectar ao banco de dados. Caso haja falha na conexo, confirme o nome de servidor, o nome de usurio e a
senha. Caso a falha na conexo persista, verifique as configuraes da pasta de teste que o Dreamweaver usa para processar as pginas
dinmicas.
O Dreamweaver escolhe a melhor alternativa para preencher automaticamente o valor do prefixo do URL na categoria Servidor de teste da
caixa de dilogo Definio de site, mas algumas vezes ser necessrio que voc ajuste o prefixo do URL para que sua conexo funcione.
Certifique-se de que o prefixo do URL seja o URL que os usurios digitam em seus navegadores para abrir o aplicativo da Web, menos o
nome do arquivo (ou pgina de incio) do aplicativo.
3. Clique em OK.
Nota: Caso voc receba a mensagem de erro Client does not support authentication protocol requested. Consider upgrading MySQL
client ao testar a conexo de banco de dados PHP com o MySQL 4.1, consulte Soluo de problemas de mensagens de erro MySQL.
Para o incio
Quando voc cria uma conexo de banco de dados, o Dreamweaver armazena as informaes da conexo em um arquivo de incluso na
subpasta Conexes da pasta raiz local do site. Voc pode editar ou excluir as informaes de conexo no arquivo manualmente ou da seguinte
forma.
Para o incio
Voc pode criar um conjunto de registros sem inserir manualmente instrues SQL.
1. Na janela Documento, abra a pgina que usar o conjunto de registros.
2. Selecione Janelas > Ligaes para exibir o painel Ligaes.
3. No painel Ligaes, clique no boto de adio (+) e selecione Conjunto de registros (consulta) no menu pop-up.
A caixa de dilogo simples Conjunto de registros exibida. Caso voc esteja desenvolvendo um site em ColdFusion, a caixa de dilogo
Conjunto de registros muda um pouco. (Caso a caixa de dilogo avanada Conjunto de registros seja exibida em seu lugar, clique no boto
Simples a fim de alternar para a caixa de dilogo Conjunto de registros simples.)
4. Complete a caixa de dilogo Conjunto de registros referente ao tipo de documento.
Para obter instrues, consulte os tpicos abaixo.
5. Clique no boto Testar para executar a consulta e verificar se ela recupera as informaes que voc deseja.
Caso voc tenha definido um filtro que usa parmetros inseridos por usurios, insira um valor na caixa Valor de teste e clique em OK. Caso
uma ocorrncia do conjunto de registros seja criada com xito, uma tabela exibida com os dados extrados do conjunto.
6. Clique em OK para adicionar o conjunto de registros lista de fontes de contedo disponveis no painel Ligaes.
Para o incio
Escreva instrues SQL prprias usando a caixa de dilogo avanada Conjunto de registros ou crie uma instruo SQL usando a rvore grfica
Itens do banco de dados.
Modelo do servidor
ASP
Request.QueryString(formFieldName)
PHP
$_GET['formFieldName']
Modelo do servidor
ASP
Request.Form(formFieldName)
PHP
$_POST['formFieldName']
5. Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.
Caso a instruo SQL contenha variveis, verifique se a coluna Valor padro da caixa Variveis contm valores de teste vlidos antes de
clicar em Testar.
Caso haja xito, uma tabela exibida com os dados do conjunto de registros. Cada linha contm um registro e cada coluna representa um
campo nesse registro. Clique em OK para limpar o conjunto de registros.
6. Caso esteja satisfeito com o trabalho, clique em OK.
Nome
Valores padro
FormFieldName
0001
O valor de runtime costuma ser um parmetro de URL ou de formulrio inserido por um usurio em um campo de formulrio em HTML.
6. Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.
Caso a instruo SQL contenha referncias de runtime, verifique se a coluna Valor padro do campo Parmetros de pgina contm valores
de teste vlidos antes de clicar em Testar.
Caso haja xito, uma tabela exibida com os dados do conjunto de registros. Cada linha contm um registro e cada coluna representa um
campo nesse registro. Clique em OK para limpar o conjunto de registros.
7. Caso esteja satisfeito com o trabalho, clique em OK.
Para o incio
Em vez de digitar manualmente as instrues SQL na caixa SQL, voc pode usar a interface apontar e clicar de Itens do banco de dados para
criar consultas SQL complexas. A rvore Itens do banco de dados permite selecionar objetos de banco de dados e vincul-los usando clusulas
SQL SELECT, WHERE e ORDER BY. Depois de criar uma consulta SQL, voc pode definir qualquer varivel usando a rea Variveis da caixa
de dilogo.
Os prximos dois exemplos descrevem duas instrues SQL e as etapas para cri-las usando a rvore Itens do banco de dados da caixa de
dilogo avanada Conjunto de registros.
Para o incio
Os parmetros de URL armazenam informaes recuperadas de entradas dos usurios. Antes de comear, verifique se voc passou um
parmetro de formulrio ou de URL ao servidor. Depois de definir a varivel de URL, voc pode usar seu valor na pgina selecionada no
momento.
1. Na janela Documento, abra a pgina que usar a varivel.
2. Selecione Janelas > Ligaes para exibir o painel Ligaes.
3. No painel Ligaes, clique no boto de adio (+) e selecione uma das seguintes opes no menu pop-up:
Tipos de documento
ASP
ColdFusion
Varivel de URL
PHP
Varivel de URL
4. Na caixa de dilogo Varivel de URL, digite o nome da varivel de URL na caixa e clique em OK.
O nome da varivel de URL costuma ser o nome do campo de formulrio em HTML ou do objeto usado para obter o valor.
5. A varivel de URL exibida no painel Ligaes.
Para o incio
Os parmetros de formulrio armazenam informaes recuperadas includas na solicitao HTTP de uma pgina da Web. Caso voc crie um
formulrio que usa o mtodo POSTAR, os dados enviados pelo formulrio so passados para o servidor. Antes de comear, verifique se voc
passou um parmetro de formulrio ao servidor. Depois de definir o parmetro de formulrio como fonte de contedo, voc pode usar o valor na
pgina.
1. Na janela Documento, abra a pgina que usar a varivel.
2. Selecione Janelas > Ligaes para exibir o painel Ligaes.
3. No painel Ligaes, clique no boto de adio (+) e selecione uma das seguintes opes no menu pop-up:
Tipos de documento
ASP
ColdFusion
Varivel de formulrio
PHP
Varivel de formulrio
4. Na caixa de dilogo Varivel de formulrio, digite o nome da varivel de formulrio e clique em OK. O nome do parmetro de formulrio
costuma ser o nome do campo de formulrio em HTML ou do objeto usado para obter o valor.
O parmetro de formulrio exibido no painel Ligaes.
Para o incio
Voc pode usar variveis de sesso para armazenar e exibir informaes mantidas durante a visita de um usurio (ou sesso). O servidor cria um
objeto de sesso diferente para cada usurio e o mantm durante um perodo estabelecido ou at que o objeto seja encerrado explicitamente.
Antes de definir variveis de sesso para uma pgina, voc deve cri-las no cdigo-fonte. Depois de criar uma varivel de sesso no cdigofonte do aplicativo da Web, voc pode usar o Dreamweaver para recuperar seu valor e us-lo em uma pgina da Web.
1. Crie uma varivel de sesso no cdigo-fonte e atribua um valor a ela.
Por exemplo, esse modelo do ColdFusion instancia uma sesso chamada username e atribui a ela o valor Cornelius:
<CFSET session.username = Cornelius>
2. Selecione Janela > Ligaes para exibir o painel Ligaes.
3. Clique no boto de adio (+) e selecione Varivel de sesso no menu pop-up.
4. Digite o nome da varivel que voc definiu no cdigo-fonte do aplicativo e clique em OK.
Para o incio
No ASP e no ColdFusion, voc pode usar variveis de aplicativo para armazenar e exibir informaes mantidas durante a vida til do aplicativo e
que se mantm de usurio para usurio. Depois de definir a varivel de aplicativo, voc pode usar o valor em uma pgina.
Nota: No h objetos de varivel de aplicativo em PHP.
1. Abra um tipo de documento dinmico na janela Documento.
2. Selecione Janela > Ligaes para exibir o painel Ligaes.
3. Clique no boto de adio (+) e selecione Varivel de aplicativo no menu pop-up.
4. Digite o nome da varivel como voc o definiu no cdigo-fonte do aplicativo e clique em OK.
A varivel de aplicativo exibida no painel Ligaes, no cone Aplicativo.
Usar uma varivel como fonte de dados para um conjunto de registros do ColdFusion
Para o incio
Quando voc define um conjunto de registros no painel Ligaes, o Dreamweaver informa o nome da fonte de dados do ColdFusion na tag
cfquery da pgina. Para obter mais flexibilidade, voc pode armazenar um nome de fonte de dados em uma varivel e usar a varivel na tag
cfquery. O Dreamweaver fornece um mtodo visual de especificao dessa varivel nos conjuntos de registros.
1. Verifique se uma pgina do ColdFusion est ativa na janela Documento.
2. No painel Ligaes, clique no boto de adio (+) e selecione Varivel de nome da fonte de dados no menu pop-up.
A caixa de dilogo Varivel de nome da fonte de dados exibida.
3. Defina uma varivel e clique em OK.
4. Ao definir o conjunto de registros, selecione a varivel como fonte de dados do conjunto de registros.
Na caixa de dilogo Conjunto de registros, a varivel exibida no menu pop-up Fonte de dados com as fontes de dados do ColdFusion no
servidor.
5. Complete a caixa de dilogo Conjunto de registros e clique em OK.
6. Inicialize a varivel.
O Dreamweaver no inicializa a varivel para que voc possa inicializ-la como e onde desejar. Voc pode inicializar a varivel no cdigo
da pgina (antes da tag cfquery), em um arquivo de incluso ou em algum outro arquivo como uma varivel de sesso ou de aplicativo.
Para o incio
Voc define variveis de servidor como fontes de contedo dinmico a serem usadas dentro de um aplicativo da Web. As variveis de servidor
variam de acordo com o tipo de documento e entre elas esto variveis de formulrio, de URL, de sesso e de aplicativo.
As variveis de servidor podem ser acessadas por todos os clientes que acessam o servidor e por qualquer aplicativo em execuo no servidor.
As variveis persistem at a parada do servidor.
Descrio
Server.ColdFusion.ProductName
Server.ColdFusion.ProductVersion
Server.ColdFusion.ProductLevel
Server.ColdFusion.SerialNumber
Server.OS.Name
Server.OS.AdditionalInformation
Server.OS.Version
Server.OS.BuildNumber
Descrio
Client.CFID
Client.CFTOKEN
Client.URLToken
Client.LastVisit
Client.HitCount
Client.TimeCreated
Descrio
SERVER_SOFTWARE
SERVER_NAME
GATEWAY_INTERFACE
SERVER_PROTOCOL
SERVER_PORT
REQUEST_METHOD
PATH_INFO
PATH_TRANSLATED
SCRIPT_NAME
QUERY_STRING
REMOTE_HOST
REMOTE_ADDR
AUTH_TYPE
REMOTE_USER AUTH_USER
REMOTE_IDENT
CONTENT_TYPE
CONTENT_LENGTH
A seguinte tabela lista as variveis CGI mais comuns criadas pelo navegador e passadas para o servidor:
Varivel
Descrio
HTTP_REFERER
HTTP_USER_AGENT
HTTP_IF_MODIFIED_SINCE
Para o incio
Voc pode colocar em cache ou armazenar fontes de contedo dinmico em uma Design Note. Isso permite trabalhar em um site mesmo que
voc no tenha acesso ao banco de dados ou ao servidor de aplicativo que armazena as fontes de contedo dinmico. A colocao em cache
tambm pode agilizar o desenvolvimento com a eliminao de acessos repetidos em uma rede ao banco de dados e ao servidor de aplicativo.
Clique no boto de seta no canto superior direito do painel Ligaes e escolha Colocar em cache no menu pop-up.
Caso faa alteraes em uma das fontes de contedo, voc pode atualizar o cache clicando no boto Atualizar (o cone de seta circular) no canto
superior direito do painel Ligaes. (Expanda o painel caso voc no veja o boto.)
Para o incio
Voc pode alterar ou excluir qualquer fonte de contedo dinmico existente ou seja, qualquer fonte de contedo listada no painel Ligaes.
A alterao ou a excluso de uma fonte de contedo no painel Ligaes no altera ou exclui nenhuma ocorrncia do contedo na pgina. Isso
apenas o altera ou exclui como uma possvel fonte de contedo da pgina.
Para o incio
Voc pode copiar um conjunto de registros de uma pgina para outra dentro de um site definido.
1. Selecione o conjunto de registros no painel Ligaes ou no painel Comportamentos de servidor.
2. Clique com o boto direito do mouse no conjunto de registros e selecione Copiar no menu pop-up.
3. Abra a pgina para a qual voc deseja copiar o conjunto de registros.
4. Clique com o boto direito do mouse no painel Ligaes ou na barra de ferramentas Comportamentos de servidor e selecione Colar no
menu pop-up.
Mais tpicos da Ajuda
SQL primer
Para o incio
Siga estas etapas gerais para projetar e criar com xito um site dinmico.
1. Criar a pgina.
Uma das etapas principais da criao de qualquer site seja esttico ou dinmico o design visual da pgina. Durante a adio de
elementos dinmicos a uma pgina da Web, o design da pgina se torna essencial usabilidade. Voc deve pensar bem em como os
usurios iro interagir com as pginas individuais e os sites como um todo.
Um mtodo comum de incorporao de contedo dinmico a uma pgina da Web criar uma tabela para apresentar contedo e importar
contedo dinmico para uma ou mais clulas da tabela. Usando esse mtodo, voc pode apresentar informaes de vrios tipos em um
formato estruturado.
2. Crie uma fonte de contedo dinmico.
Os sites dinmicos precisam de uma fonte de contedo da qual extraem dados para que possam exibi-los em uma pgina da Web. Para
poder usar fontes de contedo em uma pgina da Web, voc deve fazer o seguinte:
Crie uma conexo com a fonte de contedo dinmico (como, por exemplo, um banco de dados) e o servidor de aplicativo que processa
a pgina. Crie a fonte de dados usando o painel Ligaes; em seguida, voc pode selecionar e inserir a fonte de dados na pgina.
Especifique quais informaes no banco de dados voc deseja exibir ou quais variveis deve incluir na pgina criando um conjunto de
registros. Voc tambm pode testar a consulta na caixa de dilogo Conjunto de registros e fazer todos os ajustes necessrios antes de
adicion-los ao painel Ligaes.
Selecione e insira elementos de contedo dinmico na pgina selecionada.
3. Adicione contedo dinmico pgina da Web.
Depois de definir um conjunto de registros ou outra fonte de dados e adicion-lo ao painel Ligaes, voc pode inserir o contedo dinmico
que o conjunto de registros representa na pgina. A interface controlada por menu do Dreamweaver simplifica a adio de elementos de
contedo dinmico tanto quanto a seleo de uma fonte de contedo dinmico no painel Ligaes, alm de sua insero em texto, imagem
ou objeto de formulrio dentro da pgina atual.
Quando voc insere um elemento de contedo dinmico ou outro comportamento em uma pgina, o Dreamweaver insere um script do
servidor no cdigo-fonte da pgina. Esse script instrui o servidor a recuperar dados da fonte definida e process-los dentro da pgina da
Web. Para colocar contedo dinmico em uma pgina da Web, voc pode seguir um dos seguintes procedimentos:
Coloque-o no ponto de insero na Visualizao de cdigo ou de design.
Substitua uma sequncia de caracteres de texto ou outro alocador de espao.
Insira-o em um atributo HTML. Por exemplo, o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um
campo de formulrio.
4. Adicione comportamentos de servidor a uma pgina.
Alm de adicionar contedo dinmico, voc pode incorporar uma lgica de aplicativo complexa a pginas da Web usando comportamentos
de servidor. Comportamentos de servidor so partes predefinidas de cdigo do servidor que adicionam lgica de aplicativo a pginas da
Web, proporcionando maior interao e funcionalidade.
Os comportamentos de servidor do Dreamweaver permitem adicionar lgica de aplicativo a um site sem a necessidade de que voc
escreva o cdigo. Os comportamentos de servidor fornecidos com o Dreamweaver do suporte a tipos de documento do ColdFusion, ASP,
e PHP. Os comportamentos de servidor so escritos e testados para que sejam rpidos, seguros e eficientes. Os comportamentos de
servidor incorporados do suporte a pginas da Web em vrias plataformas para todos os navegadores.
O Dreamweaver fornece uma interface apontar e clicar que torna a aplicao de contedo dinmico e de comportamentos complexos a uma
pgina to fcil quanto a insero de elementos de texto e design. Os seguintes comportamentos de servidor esto disponveis:
Defina um conjunto de registros de um banco de dados existente. Em seguida, o conjunto de registros que voc define armazenado
no painel Ligaes.
Exiba vrios registros em uma nica pgina. Voc seleciona uma tabela inteira ou clulas individuais ou linhas com contedo dinmico
e especifica o nmero de registros a serem exibidos em cada visualizao de pgina.
Crie e insira uma tabela dinmica em uma pgina e associe a tabela a um conjunto de registros. Voc pode modificar posteriormente a
aparncia da tabela e a regio repetitiva usando o Inspetor de propriedades e o comportamento de servidor Regio repetitiva,
respectivamente.
Insira um objeto de texto dinmico em uma pgina. O objeto de texto que voc insere um item de um conjunto de registros
predefinido ao qual possvel aplicar qualquer um dos formatos de dados.
Crie controles de navegao em registros e de status, pginas mestre/detalhadas e formulrios para a atualizao das informaes em
um banco de dados.
Exiba mais de um registro de um banco de dados.
Crie links para navegao no conjunto de registros que permitam aos usurios exibir os registros anterior ou seguinte de um banco de
dados.
Adicione um contador de registros para ajudar os usurios a controlar quantos registros retornaram e onde eles se encontram no
resultado retornado.
Voc tambm pode estender os comportamentos de servidor do Dreamweaver escrevendo comportamentos de servidor prprios ou
instalando de outros fabricantes.
5. Teste e depure a pgina.
Antes de criar uma pgina dinmica ou um site inteiro disponvel na Web, voc deve testar sua funcionalidade. Voc tambm deve
considerar como a funcionalidade do aplicativo pode afetar pessoas com deficincias.
Mais tpicos da Ajuda
Adio e modificao de imagens
Para o incio
A exibio de registros do banco de dados envolve a recuperao de informaes armazenadas em um banco de dados ou em outra fonte de
contedo, alm do processamento dessas informaes em uma pgina da Web. O Dreamweaver fornece vrios mtodos de exibio de
contedo dinmico, alm de muitos comportamentos de servidor incorporados que permitem aprimorar a apresentao de contedo dinmico e
possibilitam aos usurios percorrer e navegar nas informaes retornadas de um banco de dados com mais facilidade.
Os bancos de dados e as demais fontes de contedo dinmico oferecem mais eficincia e flexibilidade na pesquisa, na classificao e na
visualizao de grandes armazenamentos de informaes. O uso de um banco de dados para armazenar contedo de sites se justifica quando
voc precisa armazenar grandes quantidades de informaes e, em seguida, recuperar e exibir essas informaes de maneira significativa. O
Dreamweaver oferece vrias ferramentas e comportamentos predefinidos para ajud-lo a recuperar e a exibir as informaes armazenadas em
um banco de dados de maneira eficiente.
Para o incio
O Dreamweaver fornece os seguintes comportamentos de servidor e elementos de formatao para permitir a exibio de dados dinmicos:
Formatos Permitem que voc aplique tipos diferentes de valores numricos, monetrios, de data/hora e porcentagem a textos dinmicos.
Por exemplo, caso o preo de um item em um conjunto de registros seja 10.989, voc pode exibir o preo na pgina como US$ 10.99
selecionando o formato Moeda - 2 casas decimais do Dreamweaver. Esse formato exibe um nmero usando duas casas decimais. Caso o
nmero tenha mais de duas casas decimais, o formato de dados arredonda o nmero para o decimal mais prximo. Caso o nmero no tenha
casas decimais, o formato de dados adiciona uma casa decimal e dois zeros.
Regio repetitiva Comportamentos de servidor permitem exibir vrios itens retornados de uma consulta de banco de dados e especificar o
nmero de registros a ser exibido por pgina.
Navegao do conjunto de registros Comportamentos de servidor permitem inserir elementos de navegao que permitem aos usurios passar
ao grupo de conjuntos de registros anteriores ou posteriores retornados pelo conjunto de registros. Por exemplo, caso opte por exibir 10 registros
por pgina usando o objeto de servidor Regio repetitiva e o conjunto retorne 40 registros, voc pode navegar em 10 registros por vez.
Barra de status Conjunto de registros Comportamentos de servidor permitem incluir um contador que mostra aos usurios onde eles esto
dentro de um conjunto de registros em relao ao nmero total de registros retornados.
Mostrar regio Comportamentos de servidor permitem optar por mostrar ou ocultar itens na pgina com base na relevncia dos registros
exibidos no momento. Por exemplo, caso um usurio tenha navegado at o ltimo registro de um conjunto, voc pode ocultar o link Prximo e
exibir apenas o link Anterior.
Para o incio
Um recurso eficiente do Dreamweaver a possibilidade de apresentar dados dinmicos dentro de uma pgina estruturada e de aplicar
formatao tipogrfica usando HTML e CSS. Para aplicar formatos a dados dinmicos no Dreamweaver, formate as tabelas e os alocadores de
espao para os dados dinmicos usando as ferramentas de formatao do Dreamweaver. Quando so inseridos usando a fonte de dados, os
dados adotam automaticamente a formatao da fonte, do pargrafo e da tabela especificada por voc.
Para o incio
Os links para navegao no conjunto de registros permitem aos usurios mover de um registro para o prximo ou de um conjunto de registros
para o prximo. Por exemplo, depois de criar uma pgina para exibir cinco registros por vez, voc talvez queira adicionar links como, por
exemplo, Prximo ou Anterior que permitem aos usurios exibir os cinco registros prximos ou anteriores.
Voc pode criar quatro tipos de links de navegao para percorrer um conjunto de registros: Primeiro, Anterior, Prximo e ltimo. Uma nica
pgina pode conter qualquer nmero desses links, desde que todos funcionem em um nico conjunto de registros. Voc no pode adicionar links
para percorrer um segundo conjunto de registros na mesma pgina.
Os links para navegao no conjunto de registros exigem os seguintes elementos dinmicos:
Um conjunto de registros para navegao
Contedo dinmico na pgina para exibir o(s) registro(s)
Texto ou imagens na pgina para funcionar como uma barra de navegao clicvel
Um conjunto Mover para registro dos comportamentos de servidor para navegar no conjunto de registros
Voc pode adicionar os dois ltimos elementos usando o objeto de servidor Barras para navegao em registros ou adicion-los
separadamente usando as ferramentas de design e o painel Comportamentos de servidor.
Para o incio
Voc pode criar uma barra de navegao do conjunto de registros em uma nica operao usando o comportamento de servidor Barra de
navegao do conjunto de registros. O objeto de servidor adiciona os seguintes blocos de criao pgina:
Uma tabela em HTML com links de texto ou imagem
Um conjunto de comportamentos de servidor Mover para
Um conjunto de comportamentos de servidor Mostrar regio
A verso em texto de Barra de navegao do conjunto de registros semelhante a:
Antes de colocar a barra de navegao na pgina, verifique se a pgina contm um conjunto de registros para navegao e um layout de
pgina no qual exibir os registros.
Depois de colocar a barra de navegao na pgina, voc pode usar as ferramentas de design para personalizar a barra. Voc tambm pode
editar os comportamentos de servidor Mover para e Mostrar regio clicando duas vezes neles no painel Comportamentos de servidor.
O Dreamweaver cria uma tabela que contm links de texto ou de imagem que permitem ao usurio navegar no conjunto de registros
selecionado quando clicado. Quando o primeiro registro do conjunto exibido, os links Primeiro e Anterior ou as imagens permanecem
ocultos. Quando o ltimo registro do conjunto exibido, os links Prximo e ltimo ou as imagens permanecem ocultos.
Voc pode personalizar o layout da barra de navegao usando as ferramentas de design e o painel Comportamentos de servidor.
1. Na Visualizao de design, coloque o ponto de insero no local da pgina onde voc deseja que a barra de navegao seja exibida.
2. Exiba a caixa de dilogo Barra de navegao do conjunto de registros (Inserir > Objetos de dados > Paginao do conjunto de registros >
Barra de navegao do conjunto de registros).
3. Selecione o conjunto de registros em que voc deseja navegar no menu pop-up Conjunto de registros.
4. Na seo Exibir usando, selecione o formato para exibir os links de navegao na pgina e clique em OK.
Texto Coloca links de texto na pgina.
Imagens Inclui imagens grficas como links. O Dreamweaver usa arquivos de imagem prprios. Voc pode substituir essas imagens por
arquivos de imagem prprios depois de colocar a barra na pgina.
Para o incio
Voc pode criar sua prpria barra de navegao do conjunto de registros que usa layout e estilos de formatao mais complexos do que os da
tabela simples criada pelo objeto de servidor Barra de navegao do conjunto de registros.
Para criar sua prpria barra de navegao do conjunto de registros, voc deve:
Criar links de navegao em texto ou imagens
Colocar os links na pgina usando a Visualizao de design
Para o incio
Ao criar uma barra de navegao personalizada, comece criando sua representao visual usando as ferramentas de design de pgina do
Dreamweaver. Voc no precisa criar um link para a sequncia de caracteres de texto ou a imagem; o Dreamweaver cria um para voc.
A pgina para a qual a barra de navegao foi criada deve conter um conjunto de registros para navegar. Uma barra de navegao do conjunto
de registros simples pode ser semelhante a esta com botes de link criados fora das imagens ou outros elementos de contedo:
Depois de adicionar um conjunto de registros a uma pgina e criar uma barra de navegao, voc deve aplicar comportamentos de servidor a
cada elemento de navegao. Por exemplo, uma barra de navegao do conjunto de registros tpica contm representaes dos seguintes links
correspondentes ao comportamento apropriado:
Link de navegao
Comportamento de servidor
Para o incio
Voc tambm pode especificar que uma regio seja exibida ou ocultada com base no preenchimento do conjunto de registros. Caso um conjunto
de registros esteja vazio (por exemplo, nenhum registro foi encontrado correspondente consulta), voc pode exibir uma mensagem informando
o usurio de que nenhum registro retornou. Isso especialmente til quando se criam pginas de pesquisa que dependam dos termos de
pesquisa de entrada para executar consultas. Da mesma forma, voc pode exibir uma mensagem de erro caso haja um problema na conexo
com um banco de dados ou caso o nome de usurio e a senha de um usurio no correspondam aos reconhecidos pelo servidor.
Os comportamentos de servidor Mostrar regio so:
Mostrar se conjunto de registros estiver vazio
Mostrar se conjunto de registros no estiver vazio
Mostrar se for primeira pgina
Mostrar se no for primeira pgina
Mostrar se for ltima pgina
Para o incio
O comportamento de servidor Regio repetitiva permite exibir vrios registros de um conjunto dentro de uma pgina. Qualquer seleo de dados
dinmicos pode ser transformada em uma regio repetitiva. No entanto, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de
linhas de tabelas.
1. Na Visualizao de design, selecione uma regio que apresente contedo dinmico.
A seleo pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um pargrafo do texto.
Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto esquerdo da janela do documento. Por
exemplo, caso a regio seja uma linha de tabela, clique dentro da linha na pgina e, depois, clique na tag <tr> direita no seletor para
selecionar a linha da tabela.
2. Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de servidor.
3. Clique no boto de adio (+) e selecione Regio repetitiva.
4. Selecione o nome do conjunto de registros a ser usado no menu pop-up.
5. Selecione o nmero de registros a serem exibidos por pgina e clique em OK.
Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetitiva.
Para o incio
O seguinte exemplo ilustra como o comportamento Regio repetitiva aplicado linha de uma tabela e especifica que so exibidos nove
registros por pgina. A prpria linha exibe quatro registros diferentes: cidade, estado, endereo e CEP.
Para criar uma tabela como, por exemplo, a do exemplo anterior, voc deve criar uma tabela que tenha contedo dinmico e aplicar o
comportamento de servidor Regio repetitiva linha da tabela com o contedo dinmico. Quando a pgina processada pelo servidor de
aplicativo, a linha repetida o nmero de vezes especificado no objeto de servidor Regio repetitiva com um registro diferente inserido em cada
linha nova.
1. Escolha uma destas opes para inserir uma tabela dinmica:
Selecione Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica para exibir a caixa de dilogo Tabela dinmica.
Na categoria Dados do painel Inserir, clique no boto Dados dinmicos e selecione o cone Tabela dinmica no menu pop-up.
2. Selecione o conjunto de registros no menu pop-up Conjunto de registros.
3. Selecione o nmero de registros a serem exibidos por pgina.
4. (Opcional) Insira os valores da borda da tabela, do preenchimento da clula e do espaamento da clula.
A caixa de dilogo Tabela dinmica mantm os valores que voc insere para bordas da tabela, preenchimento da clula e espaamento da
clula.
Nota: Caso voc esteja trabalhando em um projeto que exija vrias tabelas dinmicas com a mesma aparncia, insira os valores de layout
da tabela, o que simplifica ainda mais o desenvolvimento da pgina. Voc pode ajustar esses valores depois de inserir a tabela usando o
Inspetor de propriedades da tabela.
5. Clique em OK.
Uma tabela e os alocadores de espao do contedo dinmico definido no conjunto de registros associado so inseridos na pgina.
Nesse exemplo, o conjunto de registros contm quatro colunas: AUTHORID, FIRSTNAME, LASTNAME e BIO. A linha de cabealho da
tabela preenchida com os nomes de cada coluna. Voc pode editar os cabealhos usando qualquer texto descritivo ou substitu-los por
imagens representativas.
Para o incio
Os contadores de registros do aos usurios um ponto de referncia ao navegarem em um conjunto de registros. Normalmente, eles exibem o
nmero total de registros retornados e os registros visualizados no momento. Por exemplo, se um conjunto retornasse 40 registros individuais e 8
fossem exibidos por pgina, o contador de registros na primeira pgina indicaria Exibindo registros 1-8 de 40.
Para criar um contador de registros em uma pgina, voc deve criar um conjunto de registros para a pgina, um layout de pgina apropriado ao
contedo dinmico e, em seguida, uma barra de navegao do conjunto de registros.
Os contadores de registros permitem aos usurios saber onde esto em um determinado conjunto de registros em relao ao nmero total de
registros retornados. Por essa razo, os contadores de registros so um comportamento til capaz de agregar usabilidade de uma pgina da
Web de maneira significativa.
Crie um contador de registros simples usando o objeto de servidor Status de navegao do conjunto de registros. Esse objeto de servidor cria
uma entrada de texto na pgina para exibir o status de registro atual. Voc pode personalizar o contador de registros usando as ferramentas de
design de pgina do Dreamweaver.
1. Coloque o ponto de insero onde voc deseja inserir um contador de registros.
2. Selecione Inserir > Objetos de dados > Exibir contagem de registros > Status de navegao do conjunto de registros e, depois, selecione o
conjunto de registros no menu pop-up Conjunto de registros e, em seguida, clique em OK.
O objeto de servidor Status de navegao do conjunto de registros insere um contador de registros de texto semelhante ao seguinte
exemplo:
Caso a pgina de resultados tenha um link de navegao para se mover para o prximo conjunto de registros, o clique no link atualiza o
contador de registros para que ele exiba o seguinte:
Showing records 9 thru 16 of 40.
Para o incio
O Dreamweaver inclui vrios formatos de dados predefinidos que voc pode aplicar a elementos de dados dinmicos. Entre os estilos de formato
de dados esto data e hora, moeda e formatos numrico e percentuais.
Ligaes
Comportamentos de servidor
Bancos de dados
Componentes
Painel Ligaes
Para o incio
Use o painel Ligaes para definir e editar fontes de contedo dinmico, adicionar contedo dinmico a uma pgina e aplicar formatos de dados
a texto dinmico.
Voc pode realizar as seguintes tarefas com esse painel:
Definio de origens de contedo dinmico
Adio de contedo dinmico a pginas
Alterar ou excluir fontes de contedo
Usar formatos de dados predefinidos
Anexar fontes de dados XML
Exibir dados XML em pginas XSLT
Parmetros de URL
Definir variveis de sesso
Definir variveis de aplicativo para o ASP e o ColdFusion
Definir variveis de servidor
Colocar em cache fontes de contedo
Copiar um conjunto de registros de uma pgina para outra
Tornar os atributos de HTML dinmicos
Para o incio
Use o painel Comportamentos de servidor para adicionar os comportamentos de servidor do Dreamweaver a uma pgina, editar outros e cri-los.
Voc pode realizar as seguintes tarefas com esse painel:
Exibio de registros de banco de dados
Definio de origens de contedo dinmico
Criar pginas mestre e detalhadas em uma operao
Criao de pginas de pesquisa e de resultados
Criao de pginas para insero de registro
Criao de uma pgina de registro de atualizao
Criao de uma pgina de registro de excluso
Criao de uma pgina que apenas usurios autorizados podem acessar
Criao de uma pgina de registro
Criao de uma pgina de logon
Criao de uma pgina que apenas usurios autorizados podem acessar
Adicionar um procedimento armazenado (ColdFusion)
Excluir contedo dinmico
Adio de comportamentos de servidor personalizados
Para o incio
Use o painel Bancos de dados para criar conexes de banco de dados, inspecionar bancos de dados e inserir cdigo relacionado a banco de
dados nas pginas.
Voc pode exibir e se conectar ao banco de dados com esse painel:
Exibir o banco de dados dentro do Dreamweaver
Conexes de banco de dados para desenvolvedores do ColdFusion
Conexes de banco de dados para desenvolvedores do ASP
Conexes de banco de dados para desenvolvedores do PHP
Painel Componentes
Use o painel Componentes para criar e inspecionar componentes, alm de inserir cdigo de componente nas pginas.
Nota: O painel no funciona na Visualizao de design.
Voc pode realizar as seguintes tarefas com esse painel:
Uso de componentes do ColdFusion
Para o incio
Para o incio
Uma fonte de contedo dinmico um armazenamento das informaes das quais voc pode recuperar e exibir contedo dinmico a ser usado
em uma pgina da Web. Entre as fontes de contedo dinmico esto no apenas as informaes armazenadas em um banco de dados, mas os
valores enviados por formulrios em HTML, valores contidos em objetos de servidor e outras fontes de contedo.
O Dreamweaver permite que voc se conecte a um banco de dados e crie um conjunto de registros do qual extrair contedo dinmico. Um
conjunto de registros o resultado de uma consulta de banco de dados. Ele extrai as informaes especficas que voc solicita e permite exibir
essas informaes dentro de uma pgina especificada. Voc define o conjunto de registros com base nas informaes contidas no banco de
dados e no contedo que deseja exibir.
Fornecedores de tecnologia diferentes podem usar terminologias distintas quanto a um conjunto de registros. No ASP e no ColdFusion, um
conjunto de registros definido como uma consulta. Caso voc esteja usando outras fontes de dados como, por exemplo, entrada do usurio ou
variveis de servidor, o nome da fonte de dados definido no Dreamweaver o mesmo nome da fonte de dados.
Os sites dinmicos exigem uma fonte de dados da qual possam recuperar e exibir contedo dinmico. O Dreamweaver permite que voc use
bancos de dados, variveis de solicitao, variveis de URL, variveis de servidor, variveis de formulrio, procedimentos armazenados e outras
fontes de contedo dinmico. Dependendo da fonte de dados, voc pode recuperar o novo contedo para atender a uma solicitao ou modificar
a pgina para atender s necessidades dos usurios.
Qualquer fonte de contedo que voc define no Dreamweaver adicionada lista das fontes de contedo do painel Ligaes. Em seguida, voc
pode inserir a fonte de contedo na pgina selecionada atualmente.
Para o incio
As pginas da Web no podem acessar diretamente os dados armazenados em um banco de dados. Na verdade, elas interagem com um
conjunto de registros. Um conjunto de registros um subconjunto das informaes (registros), extradas do banco de dados usando uma consulta
do banco de dados. Uma consulta uma instruo de pesquisa projetada para localizar e extrair informaes especficas em um banco de
dados.
Ao usar um banco de dados como uma fonte de contedo para uma pgina da Web dinmica, voc deve criar inicialmente um conjunto de
registros no qual armazena os dados recuperados. Os conjuntos de registros funcionam como um intermedirio entre o banco de dados que
armazena o contedo e o servidor de aplicativo que gera a pgina. Conjuntos de registros so armazenados temporariamente na memria do
servidor do aplicativo para recuperao de dados mais rpida. O servidor descarta o conjunto de registros quando no for mais necessrio.
Uma consulta pode produzir um conjunto de registros que inclui apenas determinadas colunas, certos registros ou combinaes de ambos. Um
conjunto de registros tambm pode incluir todos os registros e colunas de uma tabela de banco de dados. No entanto, como os aplicativos
raramente precisam usar todos os dados de um banco de dados, voc deve procurar criar conjuntos de registros com o menor tamanho possvel.
Como o servidor Web mantm temporariamente o conjunto de registros na memria, o uso de um conjunto de registros menor requer menos
memria e pode melhorar o desempenho do servidor.
As consultas de banco de dados so escritas em SQL (linguagem de consulta estruturada), uma linguagem simples que permite recuperar,
adicionar e excluir dados em um banco de dados. O construtor SQL includo no Dreamweaver permite criar consultas simples sem que voc
precise compreender SQL. Entretanto, se voc quiser criar consultas complexas em SQL, um conhecimento bsico dessa linguagem permite criar
consultas mais avanadas, alm de proporcionar mais flexibilidade na criao de pginas dinmicas.
Antes de definir um conjunto de registros com o Dreamweaver, voc deve criar uma conexo com um banco de dados e caso no haja nenhum
dado inserir dados no banco de dados. Caso voc ainda no tenha definido uma conexo de banco de dados para o site, consulte o captulo
sobre a conexo de banco de dados referente tecnologia de servidor para a qual est desenvolvendo e siga as instrues sobre a criao de
uma conexo de banco de dados.
Para o incio
Os parmetros de URL armazenam informaes recuperadas de entradas dos usurios. Para definir um parmetro de URL voc cria um
formulrio ou link de hipertexto que usa o mtodo OBTER para enviar dados. As informaes so acrescentadas ao URL da pgina solicitada e
comunicadas ao servidor. Durante o uso de variveis de URL, a sequncia de caracteres de consulta contm um ou mais pares nome/valor
associados aos campos de formulrio. Esses pares nome/valor so acrescentados ao URL.
Os parmetros de formulrio armazenam informaes recuperadas includas na solicitao HTTP de uma pgina da Web. Caso voc crie um
formulrio que usa o mtodo POSTAR, os dados enviados pelo formulrio so passados para o servidor. Antes de comear, verifique se voc
passou um parmetro de formulrio ao servidor.
Para o incio
As variveis de sesso permitem armazenar e exibir informaes mantidas durante a visita de um usurio (ou sesso). O servidor cria um objeto
de sesso diferente para cada usurio e o mantm durante um perodo estabelecido ou at que o objeto seja encerrado explicitamente.
Como as variveis de sesso duram em toda a sesso do usurio e se mantm quando o usurio deixa uma pgina para outra dentro do site,
elas so ideais para o armazenamento de referncias do usurio. As variveis de sesso tambm podem ser usadas na insero de um valor no
cdigo HTML da pgina, na atribuio de um valor a uma varivel local ou no fornecimento de um valor para avaliar uma expresso condicional.
Antes de definir variveis de sesso para uma pgina, voc deve cri-las no cdigo-fonte. Depois de criar uma varivel de sesso no cdigofonte do aplicativo da Web, voc pode usar o Dreamweaver para recuperar seu valor e us-lo em uma pgina da Web.
ASP
<% Session("variable_name") = value %>
A expresso value costuma ser uma expresso de servidor como, por exemplo, Request.Form("lastname"). Por exemplo, caso voc use um
parmetro de URL chamado product (ou um formulrio em HTML com o mtodo OBTER e um campo de texto chamado product) para coletar
informaes, as seguintes instrues armazenam as informaes em uma varivel de sesso chamada prodID:
ColdFusion
<CFSET session.prodID = url.product>
ASP
<% Session("prodID") = Request.QueryString("product") %>
Caso voc use um formulrio em HTML com o mtodo postar e um campo de texto chamado txtProduct para coletar as informaes, as
seguintes instrues armazenam as informaes na varivel de sesso:
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP
<% Session("prodID") = Request.Form("txtProduct") %>
Todos os links tm um parmetro de URL chamado fontsize que envia a preferncia de texto do usurio para o servidor, como mostra o seguinte
exemplo do Adobe ColdFusion:
<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>
Armazene a preferncia de texto do usurio em uma varivel de sesso e use-a para definir o tamanho da fonte em todas as pginas que o
usurio solicita.
Prxima parte superior da pgina de destino, digite o seguinte cdigo para criar uma sesso chamada font_pref que armazena a preferncia de
tamanho da fonte do usurio.
ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>
Quando o usurio clica no link de hipertexto, a pgina envia a preferncia de texto do usurio em um parmetro de URL para a pgina de
destino. O cdigo na pgina de destino armazena o parmetro de URL na varivel de sesso font_pref. Durante a sesso do usurio, todas as
pginas do aplicativo recuperam esse valor e exibem o tamanho de fonte selecionado.
Para o incio
No ASP e no ColdFusion, voc pode usar variveis de aplicativo para armazenar e exibir informaes mantidas durante a vida til do aplicativo e
que se mantm de usurio para usurio. A vida til do aplicativo se estende do tempo em que o usurio inicialmente solicita uma pgina no
aplicativo at o momento em que o servidor Web parado. (Um aplicativo definido como se todos os arquivos estivessem em um diretrio
virtual e em seus subdiretrios.)
Como as variveis de aplicativo se estendem pela vida til do aplicativo e permanecem de usurio para usurio, elas so ideais para o
armazenamento das informaes que devem existir para todos os usurios como, por exemplo, a hora e a data atuais. O valor da varivel de
aplicativo definido no cdigo do aplicativo.
Para o incio
Voc pode definir as seguintes variveis de servidor do ASP como fontes de contedo dinmico: Request.Cookie, Request.QueryString,
Request.Form, Request.ServerVariables e Request.ClientCertificates.
Para o incio
Para o incio
Selecione a categoria Dados no menu pop-up Categoria do painel Inserir para exibir um conjunto de botes que permitem adicionar contedo
dinmico e comportamentos de servidor sua pgina.
O nmero e o tipo de botes exibidos variam de acordo com o tipo de documento aberto na janela Documento. Mova o mouse sobre um cone
para exibir uma dica de ferramenta que descreve o que o boto faz.
O painel Inserir inclui botes para adicionar os seguintes itens pgina:
Conjuntos de registros
Texto dinmico ou tabelas
Barras para navegao em registros
Caso voc alterne para a Visualizao de cdigo (Exibir > Cdigo), painis adicionais podero ser exibidos na prpria categoria painel
Inserir, o que permite inserir cdigo na pgina. Por exemplo, caso voc veja uma pgina do ColdFusion na Visualizao de cdigo, um
painel CFML disponibilizado na categoria CFML do painel Inserir.
Vrios painis oferecem forma de criar pginas dinmicas:
Selecione o painel Ligaes (Janela > Ligaes) a fim de definir fontes de contedo dinmico para a pgina e adicionar o contedo
pgina.
Selecione o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para adicionar lgica do servidor a pginas
dinmicas.
Selecione o painel Bancos de dados (Janela >Bancos de dados) para explorar bancos de dados ou criar conexes de banco de dados.
Selecione o painel Componentes (Janela > Componentes) para inspecionar, adicionar ou modificar os cdigos dos componentes do
ColdFusion.
Nota: O painel Componentes s ativado quando se abre uma pgina do ColdFusion.
Um comportamento de servidor o conjunto de instrues inserido em uma pgina dinmica durante o design e executado no servidor
durante o runtime.
Para obter um tutorial sobre a configurao da rea de trabalho de desenvolvimento, consulte www.adobe.com/go/vid0144_br.
Para o incio
Depois de se conectar ao banco de dados, voc pode exibir a estrutura e os dados dentro do Dreamweaver.
1. Abra o painel Bancos de dados (Janela > Bancos de dados).
O painel Bancos de dados exibe todos os bancos de dados para os quais voc criou conexes. Caso voc esteja desenvolvendo um site
do ColdFusion, o painel exibe todos os bancos de dados que tm fontes de dados definidas no Administrador do ColdFusion.
Nota: O Dreamweaver procura o site atual no servidor do ColdFusion que voc definiu.
Caso nenhum banco de dados seja exibido no painel, voc deve criar uma conexo de banco de dados.
2. Para exibir as tabelas, os procedimentos armazenados e as visualizaes no banco de dados, clique no sinal de adio (+) ao lado de uma
conexo na lista.
3. Para exibir as colunas da tabela, clique no nome de uma tabela.
Os cones da coluna refletem o tipo de dados e indicam a chave primria da tabela.
4. Para exibir os dados de uma tabela, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control pressionada
Para o incio
Os desenvolvedores de aplicativo da Web costumam depurar as pginas clicando nelas normalmente em um navegador da Web. Voc pode
exibir rapidamente pginas dinmicas em um navegador sem carreg-las inicialmente em um servidor (pressione F12).
Para visualizar pginas dinmicas, preencha a categoria Servidor de teste da caixa de dilogo Definio de sites.
Voc pode especificar que o Dreamweaver usa arquivos temporrios, e no os arquivos originais. Com essa opo, o Dreamweaver executa uma
cpia temporria da pgina em um servidor Web antes de exibi-la no navegador. (Em seguida, o Dreamweaver exclui o arquivo temporrio do
servidor.) Para definir essa opo, selecione Editar > Preferncias > Visualizar no navegador.
A opo Visualizar no navegador no carrega pginas relacionadas como, por exemplo, uma pgina de resultados ou detalhada, arquivos
dependentes como arquivos de imagem ou incluses do servidor. Para carregar um arquivo no encontrado, selecione Janela > Site para abrir o
painel Site, escolha o arquivo em Pasta local e clique na seta para cima azul na barra de ferramentas a fim de copiar o arquivo para a pasta do
servidor Web.
Para o incio
Usurios avanados de sistemas de bancos de dados grandes como o Oracle devem restringir o nmero de itens de banco de dados
recuperados e exibidos pelo Dreamweaver durante o design. Um banco de dados Oracle pode conter itens que o Dreamweaver no pode
processar durante o design. Voc pode criar um esquema no Oracle e us-lo no Dreamweaver para filtrar itens desnecessrios durante o design.
Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
Outros usurios podem aproveitar a restrio da quantidade de informaes que o Dreamweaver recupera durante o design. Alguns bancos de
dados contm dezenas ou mesmo centenas de tabelas, e talvez voc prefira no listar todas elas enquanto trabalha. Um esquema ou catlogo
pode restringir o nmero de itens de banco de dados recuperados durante o design.
Voc deve criar um esquema ou catlogo no sistema de banco de dados para poder aplic-lo no Dreamweaver. Consulte a documentao do
sistema de banco de dados ou o administrador do sistema.
Nota: Voc no pode aplicar um esquema ou catlogo no Dreamweaver caso esteja desenvolvendo um aplicativo do ColdFusion ou usando o
Microsoft Access.
1. Abra uma pgina dinmica no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).
Caso haja uma conexo de banco de dados, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control
pressionada (Macintosh) na lista e selecione Editar conexo no menu pop-up.
Caso a conexo no exista, clique no boto de adio (+) na parte superior do painel e a crie.
2. Na caixa de dilogo da conexo, clique em Avanado.
3. Especifique o esquema ou o catlogo e clique em OK.
Para o incio
Modifique o procedimento armazenado selecionado. As opes disponveis variam de acordo com a tecnologia do servidor.
Edite todas as opes. Quando voc seleciona uma nova opo no inspetor, o Dreamweaver atualiza a pgina.
Opes de Entrada
Para o incio
O Inspetor de propriedades exibido quando o Dreamweaver encontra um tipo de entrada no reconhecido. Esse erro normalmente ocorre por
conta de uma digitao ou de outro erro na entrada dos dados.
Caso voc altere o tipo de campo no Inspetor de propriedades para um valor que o Dreamweaver reconhece por exemplo, caso voc corrija o
erro ortogrfico , o Inspetor de propriedades atualizado para mostrar as propriedades do tipo reconhecido. Defina qualquer uma das seguintes
opes no Inspetor de propriedades:
Entrada Atribui um nome ao campo. Essa caixa obrigatria, e o nome deve ser exclusivo.
Tipo Define o tipo de entrada do campo. O contedo da caixa reflete o valor do tipo de entrada exibido atualmente no cdigo-fonte HTML.
Valor Define o valor do campo.
Parmetros Abre a caixa de dilogo Parmetros para que voc possa exibir os atributos atuais do campo, bem como adicionar ou remover
atributos.
Mais tpicos da Ajuda
Tutorial da rea de trabalho de desenvolvimento
Configurar um servidor de teste
Para o incio
A integrao do Dreamweaver com o jQuery Mobile e o PhoneGap ajuda na criao e no empacotamento de aplicativos da Web para
implantao no Android e em dispositivos baseados em iOS. O Dreamweaver usa SDKs do PhoneGap para criar o pacote (arquivo .apk para
Android/.xcodeproj para iPhone/iPad)
Uma vez que empacotou um aplicativo mvel com o Dreamweaver, voc poder exibi-lo em um emulador de dispositivo ou implant-lo em seu
prprio dispositivo.
Importante: O aplicativo mvel que voc empacotou com Dreamweaver um aplicativo somente para fins de depurao. O aplicativo ser
executado no Android e em emuladores de iOS, ou no seu dispositivo mvel pessoal se voc fizer a transferncia, mas no possvel carregar
os aplicativos mveis de depurao nas lojas da Apple e do Android. Para carregar aplicativos para iOS ou Android, voc dever executar a
etapa adicional de assin-los fora do Dreamweaver. Para obter mais informaes sobre o carregamento de aplicativos nas lojas da Apple e do
Android, consulte a documentao do Android ou o Guia do usurio do programa no Portal de fornecimento do Apple iOS. (Antes de poder
acessar o Portal de fornecimento do Apple iOS Fornecimento voc dever se registrar no Programa de Desenvolvedor de Apple [gratuito] e se
inscrever no Programa de Desenvolvedor iOS [taxa anual].)
Adobe recomenda
Empacotamento de aplicativos
da Web como aplicativos
mveis usando o Dreamweaver
CS5.5
Jon Michael Varese
Tutorial passo a passo sobre
empacotamento de seu aplicativo da
Web
Mais tpicos da Ajuda
http://www.phonegap.com/about
http://jquerymobile.com/demos/1.0a2/
http://docs.phonegap.com/
Tutorial de empacotamento de aplicativos da Web
Para o incio
Voc pode usar o comando Remover scripts de conexo para remover scripts que o Dreamweaver coloca em uma pasta remota para acessar
bancos de dados. Esses scripts s so necessrios na criao durante o design no Dreamweaver.
Quando voc seleciona a opo Usando driver no servidor de teste ou Usando o DSN no servidor de teste na caixa de dilogo Conexes do
banco de dados, o Dreamweaver carrega um arquivo de script MMHTTPDB no servidor de teste. Isso permite que o Dreamweaver manipule o
driver de banco de dados remoto com o protocolo HTTP, o que, por sua vez, permite ao Dreamweaver obter as informaes de banco de dados
de que ele precisa para ajudar a criar o site. No entanto, esse arquivo permite ver os DSNs definidos no sistema. Caso os DSNs e os bancos de
dados no sejam protegidos por senha, o script tambm permite quem um invasor emita comandos SQL para o banco de dados.
Os arquivos de script MMHTTPDB esto localizados na pasta _mmServerScripts, que est localizada na raiz do site.
Nota: O navegador de arquivos do Dreamweaver (o painel Arquivos) oculta a pasta _mmServerScripts. Voc pode ver a pasta
_mmServerScripts caso use um cliente FTP de outro fabricante ou navegador de arquivos.
Em algumas configuraes, esses scripts no so to necessrios. Como no esto envolvidos quando voc apresenta pginas da Web aos
visitantes do site, os scripts no devem ser colocados em um servidor de produo.
Caso tenha carregado o arquivo de scripts MMHTTPDB em um servidor de produo, voc deve exclu-lo. O comando Remover scripts de
conexo remove automaticamente os arquivos de script para voc.
Para o incio
Voc pode usar o Dreamweaver para proteger uma pasta especfica por senha no aplicativo do ColdFusion, inclusiva a pasta raiz do aplicativo.
Quando um visitante do site solicita qualquer pgina na pasta especificada, o ColdFusion pede ao visitante um nome de usurio e senha. O
ColdFusion armazena o nome de usurio e a senha em variveis de sesso para que o visitante no precise digit-los novamente durante a
sesso.
Nota: Esse recurso s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1. Com um documento do ColdFusion aberto no Dreamweaver, selecione Comandos > Assistente de logon do ColdFusion.
2. Conclua o Assistente de logon do ColdFusion.
a. Especifique o caminho completo at a pasta que voc deseja proteger e clique em Avanar.
b. Na tela seguinte, selecione um destes tipos de autenticao:
Autenticao simples Protege o aplicativo com um nome de usurio e senha exclusivos para todos os usurios.
Autenticao do Windows NT Protege o aplicativo usando nomes de usurio e senhas do NT.
Autenticao LDAP Protege o aplicativo com nomes de usurio e senhas armazenados em um servidor LDAP.
c. Especifique se voc deseja que os usurios faam logon usando uma pgina de logon do ColdFusion ou um menu pop-up.
d. Na prxima tela, especifique as seguintes configuraes:
Caso voc tenha selecionado a autenticao simples, especifique o nome de usurio e a senha que cada visitante deve digitar.
Caso voc tenha selecionado a autenticao do Windows NT, especifique o domnio do NT de validao.
Caso voc tenha selecionado a autenticao LDAP, especifique o servidor LDAP de validao.
3. Carregue os novos arquivos no site remoto. Os arquivos esto localizados na pasta do site local.
Mais tpicos da Ajuda
Para o incio
Para criar aplicativos da Web no Adobe Dreamweaver, voc precisa do seguinte software:
Um servidor Web
Um servidor de aplicativo que funcione com o servidor Web
Nota: No contexto dos aplicativos da Web, os termos servidor Web e servidor de aplicativo se referem a software, e no a hardware.
Caso queira usar um banco de dados com o aplicativo, voc precisa do seguinte software adicional:
Um sistema de banco de dados
Um driver que d suporte ao banco de dados
Vrias empresas de hospedagem na Web oferecem planos que permitem usar o software para testar e implantar aplicativos da Web. Em
alguns casos, voc pode instalar o software obrigatrio no mesmo computador do Dreamweaver para fins de desenvolvimento. Voc
tambm pode instalar o software em um computador de rede (normalmente, um computador com Windows 2000 ou XP) para que outros
desenvolvedores da equipe possam trabalhar em um projeto.
Caso queira usar um banco de dados com o aplicativo da Web, voc deve inicialmente se conectar a ele.
Para o incio
Para desenvolver e testar pginas da Web dinmicas, voc precisa de um servidor Web em funcionamento. Um servidor Web o software que
apresenta pginas da Web em resposta a solicitaes de navegadores da Web. s vezes, um servidor Web chamado de servidor HTTP. Voc
pode instalar e usar um servidor Web no computador local.
Caso seja um usurio do Macintosh, voc pode usar o servidor Web Apache j instalado no Macintosh.
Nota: A Adobe no d suporte tcnico a softwares de outros fabricantes como, por exemplo, o Microsoft Internet Information Server. Caso voc
precise de ajuda com um produto Microsoft, entre em contato com o suporte tcnico da Microsoft.
Caso voc use o IIS (Internet Information Server) para desenvolver aplicativos da Web, o nome padro do servidor Web o nome do
computador. Voc pode alterar o nome do servidor alterando o nome do computador. Caso o computador no tenha nenhum nome, o servidor
usa a palavra localhost.
O nome do servidor corresponde pasta raiz do servidor, que (em um computador com Windows) deve ser C:\Inetpub\wwwroot. Voc pode abrir
qualquer pgina da Web armazenada na pasta raiz digitando o seguinte URL em um navegador em execuo no computador:
http://nome_do_servidor/nome_do_arquivo
Por exemplo, caso o nome do servidor seja mer_noire e uma pgina da Web chamada soleil.html seja armazenada em C:\Inetpub\wwwroot\, voc
pode abrir a pgina digitando o seguinte URL em um navegador em execuo no computador local:
http://mer_noire/soleil.html
Nota: No se esquea de usar barras, e no barras invertidas, nos URLs.
Voc tambm pode abrir qualquer pgina da Web armazenada em qualquer subpasta da pasta raiz especificando a subpasta no URL. Por
exemplo, suponhamos que o arquivo soleil.html esteja armazenado em uma subpasta chamada gamelan da seguinte forma:
C:\Inetpub\wwwroot\gamelan\soleil.html
Voc pode abrir essa pgina digitando o seguinte URL em um navegador em execuo no computador:
http://mer_noire/gamelan/soleil.html
Quando o servidor Web est em execuo no computador, voc pode substituir o nome do servidor por localhost. Por exemplo, os seguintes
URLs abrem a mesma pgina em um navegador:
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Nota: Outra expresso que voc pode usar em lugar do nome do servidor ou de localhost 127.0.0.1 (por exemplo,
http://127.0.0.1/gamelan/soleil.html).
Para o incio
Para desenvolver e testar aplicativos da Web, voc pode escolher um dentre vrios servidores Web, inclusive o Microsoft Internet Information
Server (IIS) e o Apache HTTP Server.
Caso no esteja usando um servio de hospedagem na Web, escolha um servidor Web e o instale no computador local com o propsito de
desenvolvimento. Usurios do Windows e do Macintosh que desejam desenvolver aplicativos da Web do ColdFusion podem usar o servidor Web
includo na edio de desenvolvedor do servidor de aplicativo ColdFusion 8, cuja instalao e uso so gratuitos.
Outros usurios do Windows podem executar um servidor Web no computador local instalando o IIS. O servidor Web talvez j esteja instalado no
sistema. Verifique a estrutura da pasta para ver se ela contm uma pasta C:\Inetpub ou D:\Inetpub. O IIS cria essa pasta durante a instalao.
Usurios do sistema operacional Mac podem usar o servidor Web Apache instalado com o sistema operacional.
Para obter informaes sobre a instalao e a configurao de outros servidores Web, consulte a documentao do fornecedor do servidor ou o
administrador do sistema.
Para o incio
Servidor de aplicativo um software que ajuda um servidor Web a processar pginas dinmicas. Ao escolher um servidor de aplicativo, voc
deve considerar vrios fatores, inclusive o oramento, a tecnologia de servidor que deseja usar (ColdFusion, ASP, ou PHP), alm do tipo de
servidor Web.
Oramento Alguns fornecedores vendem servidores de aplicativo sofisticados cujos preos de aquisio e administrao so altos. Outros
fornecedores oferecem solues mais simples e mais econmicas (um exemplo o ColdFusion). Alguns servidores de aplicativo so incorporados
a servidores Web (como o Microsoft IIS), enquanto outros podem ser baixados gratuitamente na Internet (como o PHP).
Tecnologia de servidor Servidores de aplicativo usam tecnologias diferentes. O Dreamweaver d suporte a trs tecnologias de servidor:
ColdFusion, ASP e PHP. A tabela a seguir mostra servidores de aplicativo comuns disponveis para as tecnologias de servidor que recebem
suporte do Dreamweaver:
Tecnologia de servidor
Servidor de aplicativo
ColdFusion
Adobe ColdFusion 8
ASP
Microsoft IIS
PHP
Servidor PHP
Para obter mais informaes sobre o ColdFusion, selecione Ajuda do ColdFusion no menu Ajuda.
Para obter mais informaes sobre o ASP, visite o site da Microsoft em http://msdn.microsoft.com/library/default.asp?
url=/library/pt_br/dnanchor/html/activeservpages.asp.
Para obter mais informaes sobre o PHP, visite o site do PHP em www.php.net/.
Para o incio
Os bancos de dados se apresentam em muitos formulrios de acordo com a quantidade e a complexidade dos dados que devem armazenar. Ao
escolher um banco de dados, voc deve considerar vrios fatores, incluindo o oramento e a previso do nmero de usurios que deve acessar o
banco de dados.
Oramento Alguns fornecedores produzem servidores de sofisticados aplicativos de banco de dados, cujos preos de aquisio e administrao
so altos. Outros fornecedores fornecem solues mais baratas e de custo efetivo maior, como o Microsoft Access ou o banco de dados de
cdigo-fonte aberto MySQL.
Usurios Caso voc preveja o acesso de uma grande comunidade de usurios ao site, selecione um banco de dados projetado para dar suporte
base de usurios desejada do site. Para sites que exijam maior flexibilidade na modelagem de dados, alm da possibilidade de suporte a
grandes comunidades de usurios simultneos, deve-se considerar bancos de dados relacionais baseados em servidor (normalmente conhecidos
como RDBMS), como o Microsoft SQL Server e o Oracle.
Para o incio
Para obter instrues detalhadas sobre a configurao de um ambiente de desenvolvimento do ColdFusion para Dreamweaver em computador
com Windows ou Mac, consulte o site da Adobe em www.adobe.com/devnet/dreamweaver/articles/setup_cf.html.
Os usurios do Windows e do Macintosh podem baixar e instalar uma edio de desenvolvedor gratuita totalmente funcional do servidor de
aplicativo do ColdFusion no site da Adobe, em www.adobe.com/go/coldfusion_br.
Nota: A Developer Edition se destina ao uso no comercial para o desenvolvimento e o teste dos aplicativos da Web. Ela no est licenciada
para desenvolvimento. Ela d suporte a solicitaes do host local e a dois endereos IP remotos. Voc pode us-la para desenvolver e testar os
aplicativos da Web sempre que desejar; o software no expira. Para obter mais informaes, consulte a ajuda do ColdFusion (Ajuda > Ajuda do
ColdFusion).
Durante a instalao, voc pode configurar o ColdFusion para usar o servidor Web incorporado ao ColdFusion ou outro servidor Web instalado no
sistema. Normalmente, melhor que o ambiente de desenvolvimento corresponda ao ambiente de produo. Por isso, caso haja um servidor Web
existente como, por exemplo, o Microsoft IIS no computador de desenvolvimento, voc talvez queira us-lo em lugar do servidor Web do
ColdFusion incorporado.
Para o incio
Para obter instrues detalhadas sobre a configurao de um ambiente de desenvolvimento PHP para Dreamweaver em computador com
Windows ou Mac, consulte o site da Adobe em www.adobe.com/devnet/dreamweaver/articles/setup_php.html.
H edies do servidor de aplicativo para os sistemas Windows, Linux, UNIX, HP-UX, Solaris e Mac OS X. Para obter mais informaes sobre o
servidor de aplicativo, consulte a documentao do PHP, que voc tambm pode baixar no site do PHP em www.php.net/download-docs.php.
Para o incio
Para obter instrues detalhadas sobre a configurao de um ambiente de desenvolvimento ASP para Dreamweaver em computador com
Windows ou Mac, consulte o site da Adobe em www.adobe.com/devnet/dreamweaver/articles/setup_asp.html.
Para executar as pginas do ASP, voc precisa de um servidor de aplicativo que d suporte ao Microsoft Active Server Pages 2.0. como, por
exemplo, o Microsoft IIS (Internet Information Services), que acompanha o Windows 2000 e o Windows XP Professional. Os usurios do Windows
XP Professional podem instalar e executar o IIS no computador local. Os usurios do Macintosh podem usar um servio de hospedagem na Web
com um plano ASP ou instalar o IIS em um computador remoto.
Para o incio
Depois da inscrio em uma empresa de hospedagem na Web ou da configurao do software de servidor propriamente dito, crie uma pasta raiz
para o aplicativo da Web no computador em que o servidor Web est execuo. A pasta raiz pode ser local ou remota, dependendo do local em
que o servidor Web est em execuo.
O servidor Web pode fornecer qualquer arquivo que esteja nessa pasta ou em qualquer uma de suas subpastas em resposta a uma solicitao
HTTP de um navegador da Web. Por exemplo, em um computador com o ColdFusion 8 em execuo, possvel fornecer a um navegador da
Web qualquer arquivo na pasta \ColdFusion8\wwwroot ou em uma de suas subpastas.
Estas so as pastas raiz padro dos servidores Web selecionados:
Servidor Web
ColdFusion 8
\ColdFusion8\wwwroot
IIS
\Inetpub\wwwroot
Apache (Windows)
\apache\htdocs
Apache (Macintosh)
Users:MyUserName:Sites
Para testar o servidor Web, coloque uma pgina em HTML de teste na pasta raiz padro e tente abri-la digitando o URL da pgina em um
navegador. O URL formado pelo nome de domnio e pelo nome de arquivo da pgina em HTML da seguinte forma:
www.exemplo.com/pgina_de_teste.htm.
Caso o servidor Web esteja em execuo no computador local, voc pode usar localhost em lugar de um nome de domnio. Digite um das
seguintes URLs localhost de acordo com o servidor Web:
Servidor Web
URL localhost
ColdFusion 8
http://localhost:8500/testpage.htm
IIS
http://localhost/testpage.htm
Apache (Windows)
http://localhost:80/testpage.htm
Apache (Macintosh)
Nota: Por padro, o servidor Web ColdFusion executado na porta 8500 e o servidor Apache para Windows, na porta 80.
Caso a pgina no seja aberta como esperado, procure os seguintes erros:
O servidor Web no foi iniciado. Consulte a documentao do servidor Web para obter as instrues iniciais.
O arquivo no tem uma extenso .htm ou .html.
Voc digitou o caminho de arquivo da pgina (por exemplo, c:\ColdFusion8\wwwroot\testpage.htm) e no o URL (por exemplo,
http://localhost:8500/testpage.htm) na caixa de texto de endereo do navegador.
O URL digitado est incorreto. Verifique se h erros e se o nome de arquivo no seguido por uma barra como, por exemplo,
http://localhost:8080/testpage.htm/.
Aps a criao de uma pasta raiz para o aplicativo, defina um site do Dreamweaver para gerenciar os arquivos.
Para o incio
Depois da configurao do sistema para desenvolver aplicativos da Web, defina um site do Dreamweaver para gerenciar os arquivos.
Antes de iniciar, verifique se voc atende aos seguintes requisitos:
Voc tem acesso a um servidor Web. O servidor Web pode estar em execuo no computador local, em um computador remoto como, por
exemplo, um servidor de desenvolvimento ou um servidor mantido pela empresa de hospedagem na Web.
Um servidor de aplicativo est instalado e em execuo no sistema em execuo no servidor Web.
Voc criou uma pasta raiz para o aplicativo da Web no sistema em que o servidor Web est em execuo.
A definio de um site do Dreamweaver para o aplicativo da Web consiste em trs etapas:
1. Definir uma pasta local
A pasta local a pasta que voc usa para armazenar cpias funcionais dos arquivos do site no disco rgido. Voc pode definir uma pasta local
para cada novo aplicativo da Web criado. A definio de uma pasta local tambm d a possibilidade de gerenciar os arquivos e de transferi-los de
e para o servidor Web com facilidade.
2. Definir uma pasta remota
Defina uma pasta localizada no computador no qual o servidor Web est em execuo como uma pasta remota do Dreamweaver. A pasta remota
a pasta que voc criou para o aplicativo da Web no servidor Web.
3. Definir uma pasta de teste
O Dreamweaver usa a pasta para gerar e exibir o contedo dinmico, alm de se conectar a bancos de dados enquanto voc trabalha. O servidor
de teste pode ser o computador local, um servidor de desenvolvimento, um servidor de teste ou um servidor de produo. Desde que ele consiga
processar esse tipo de pgina dinmica que voc pretende desenvolver, a opo no importa.
Depois que o site do Dreamweaver estiver definido, voc poder comear a criar o aplicativo da Web.
Mais tpicos da Ajuda
Para o incio
Uma dos problemas mais comuns a insuficincia de permisses de arquivo ou de pasta. Caso o banco de dados esteja localizado em um
computador com o Windows 2000 ou o Windows XP e voc receba uma mensagem de erro ao tentar exibir uma pgina dinmica em um
navegador da Web ou na Visualizao dinmica, o erro talvez seja por conta de um problema de permisso.
A conta do Windows que tenta acessar o banco de dados no tem permisses suficientes. A conta pode ser a conta do Windows annima (por
padro, IUSR_computername) ou uma conta de usurio especfica, caso a pgina tenha sido protegida para acesso autenticado.
Voc deve alterar as permisses para dar conta IUSR_computername as permisses corretas de forma que o servidor Web possa acessar o
arquivo de banco de dados. Alm disso, a pasta que contm o arquivo de banco de dados tambm deve ter determinadas permisses definidas
para que seja possvel gravar nesse banco de dados.
Caso a pgina deva ser acessada anonimamente, d conta IUSR_computername controle total pasta e ao arquivo de banco de dados, como
descrito no procedimento abaixo.
Alm disso, caso o caminho do banco de dados seja referenciado usando UNC (\\Servidor\Compartilhamento), verifique se Permisses de
compartilhamento do conta IUSR_computername acesso total. Essa etapa se aplica mesmo que o compartilhamento esteja no servidor Web
local.
Caso voc copie o banco de dados de outro local, talvez ele no herde as permisses da pasta de destino e voc tenha que alterar as
permisses para o banco de dados.
Para obter mais segurana, as permisses podem ser definidas de forma que a permisso de Leitura permanea desativada para a pasta
da Web que contm o banco de dados. A navegao na pasta no ser permitida, embora as pginas da Web continuem podendo acessar
o banco de dados.
Para obter mais informaes sobre a conta IUSR e as permisses do servidor Web, consulte as seguintes TechNotes no Centro de Suporte
da Adobe:
Understanding anonymous authentication and the IUSR account at www.adobe.com/go/authentication_br
Setting IIS Web server permissions at www.adobe.com/go/server_permissions_br
Para o incio
Essas mensagens de erro Microsoft podem ocorrer quando voc solicita uma pgina dinmica do servidor caso use o Internet Information Server
(IIS) com um sistema de banco de dados Microsoft como, por exemplo, o Access ou o SQL Server.
Nota: A Adobe no d suporte tcnico a softwares de outros fabricantes como, por exemplo, o Microsoft Windows e o IIS. Caso essas
informaes no corrijam o problema, entre em contato com o suporte tcnico da Microsoft ou visite o site de suporte Microsoft em
http://support.microsoft.com/.
Para obter mais informaes sobre erros 80004005, consulte INFO: Troubleshooting Guide for 80004005 Errors in Active Server Pages and
Microsoft Data Access Components (Q306518), no site da Microsoft em http://support.microsoft.com/default.aspx?scid=kb;pt-br;Q306518.
[Reference]80004005Falha no logon()
Esse erro ocorre quando voc usa o Microsoft SQL Server e tenta exibir uma pgina dinmica em um navegador da Web ou na Visualizao
dinmica.
Esse erro gerado pelo SQL Server caso voc no aceite ou reconhea a conta do logon ou a senha enviada (caso voc esteja usando a
segurana padro), ou caso uma conta do Windows no esteja mapeada para uma conta SQL (caso voc esteja usando a segurana integrada).
Eis as solues possveis:
Caso voc use a segurana padro, o nome da conta e a senha talvez estejam incorretos. Tente usar a conta Admin do sistema e a senha
(UID= sa e sem senha), que devem ser definidas na linha da sequncia de caracteres de conexo. (Os DSNs no armazenam nomes de
usurio e senhas.)
Caso voc use segurana integrada, verifique a conta do Windows chamando a pgina e localize a conta SQL mapeada (caso haja alguma).
O SQL Server no permite sublinhados em nomes de conta SQL. Se algum mapear manualmente a conta do Windows
IUSR_machinename para uma conta SQL com o mesmo nome, haver uma falha. Mapeie uma conta que usa um sublinhado para um
nome de conta no SQL que no usa um sublinhado.
[Reference]80040e10Poucos parmetros
Esse erro ocorre quando uma coluna especificada na consulta SQL no existe na tabela do banco de dados. Compare os nomes da coluna na
tabela do banco de dados com a consulta SQL. A causa desse erro costuma ser um erro tipogrfico.
Para o incio
Uma mensagem de erro que voc recebe normalmente ao testar uma conexo de banco de dados do PHP com o MySQL 4.1 Client does not
support authentication protocol requested. Consider upgrading MySQL client.
Voc talvez tenha que reverter para uma verso anterior do MySQL ou instalar o PHP 5 e copiar algumas DLLs (bibliotecas de links dinmicos).
Para obter instrues detalhadas, consulte Configurao de um ambiente de desenvolvimento PHP.
Para o incio
Um aplicativo da Web um site que contm pginas de contedo parcial ou inteiramente no determinado. O contedo final de uma pgina s
determinado quando o visitante solicita uma pgina do servidor Web. Como o contedo final da pgina varia de solicitao para solicitao com
base nas aes do visitante, esse tipo chamado de pgina dinmica.
Os aplicativos da Web so criados para superar vrios desafios e problemas. Esta seo descreve usos comuns para os aplicativos da Web e
apresenta um exemplo simples.
Para o incio
Os aplicativos da Web tm muitos usos tanto para os visitantes quanto para os desenvolvedores do site, inclusive os seguintes:
Permitem aos visitantes localizar informaes de maneira rpida e fcil em um site rico em contedo.
Esse tipo de aplicativo da Web oferece aos visitantes a possibilidade de pesquisar, organizar e navegar em contedo na medida em que
acharem cabvel. Entre os exemplos esto intranets de empresas, o Microsoft MSDN (www.msdn.microsoft.com) e a Amazon.com
(www.amazon.com).
Colete, salve e analise dados fornecidos por visitantes do site.
Antigamente, os dados inseridos em formulrios em HTML eram enviados como mensagens de email a funcionrios ou aplicativos CGI para
processamento. Um aplicativo da Web pode salvar os dados do formulrio diretamente em um banco de dados, alm de extrair os dados e
criar relatrios baseados na Web para anlise. Entre os exemplos esto pginas de bancos on-line, pginas de retirada de lojas, pesquisas
e formulrios com comentrios feitos pelo usurio.
Atualize sites cujo contedo mude constantemente.
Um aplicativo da Web evita que o designer fique atualizando continuamente o HTML do site. Provedores de contedo como, por exemplo,
editores de notcias fornecem contedo ao aplicativo da Web, e este atualiza o site automaticamente. Entre os exemplos esto a Economist
(www.economist.com) e a CNN (www.cnn.com).
Para o incio
Janet designer profissional e, h muito tempo, a usuria do Dreamweaver responsvel pela manuteno da intranet e do site de uma empresa
de mdio porte com 1.000 funcionrios. Certo dia, Chris, dos Recursos Humanos, chega at ela com um problema. O RH administra um
programa de condicionamento fsico que d aos funcionrios pontos para cada quilmetro percorrido andando, de bicicleta ou correndo. Cada
funcionrio deve informar seu total mensal de quilmetros em um email enviado para Chris. Ao final do ms, Chris rene todas as mensagens de
email e d aos funcionrios pequenos prmios em dinheiro de acordo com sua pontuao total.
O problema de Chris que o programa de condicionamento fsico cresceu muito. Assim, muitos funcionrios esto participando, e Chris
sobrecarregado com emails ao final de cada ms. Chris pergunta a Janet se h uma soluo baseada na Web.
Janet prope um aplicativo da Web baseado na intranet que realiza as seguintes tarefas:
Permite aos funcionrios inserir a quilometragem em uma pgina da Web usando um formulrio em HTML simples
Armazena a quilometragem do funcionrio em um banco de dados
Calcula os pontos de condicionamento fsico de acordo com os dados da quilometragem
Permite aos funcionrios controlar o andamento mensal
Para o incio
Um aplicativo de Web um conjunto de pginas de Web estticas e dinmicas. Uma pgina da Web esttica aquela que no se altera quando
um visitante a solicita: o servidor Web envia a pgina para o navegador da Web solicitante sem modific-la. J uma pgina da Web dinmica
modificada pelo servidor antes de ser enviada para o navegador solicitante. A natureza mutvel da pgina justifica ela ser chamada de dinmica.
Por exemplo, voc poderia projetar uma pgina para exibir os resultados do condicionamento fsico, ao mesmo tempo em que deixaria que
determinadas informaes (como, por exemplo, o nome do funcionrio e os resultados) fossem determinadas quando a pgina fosse solicitada
por um determinado funcionrio.
As prximas sees descrevem mais detalhadamente como funcionam os aplicativos da Web.
Para o incio
Um site esttico formado por um conjunto de pginas em HTML relacionadas e arquivos hospedados em um computador com um servidor Web
em execuo.
Um servidor Web o software que apresenta pginas da Web em resposta a solicitaes de navegadores da Web. Uma solicitao de pgina
gerada quando um visitante clica em um link em uma pgina da Web, seleciona um marcador em um navegador ou digita um URL na caixa de
texto de endereo do navegador.
O contedo final de uma pgina da Web esttica determinado pelo designer da pgina e no alterado quando ela solicitada. Eis um
exemplo:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>
Todas as linhas do cdigo em HTML da pgina so escritas pelo designer antes da pgina ser colocada no servidor. Como o HTML, uma vez no
servidor, no alterado, esse tipo de pgina chamado de pgina esttica.
Nota: Mais especificamente, uma pgina esttica pode no ser to esttica assim. Por exemplo, uma imagem de sobreposio ou um
contedo Flash (um arquivo SWF) pode dar vida a uma pgina esttica. No entanto, essa documentao se refere a uma pgina como sendo
esttica caso ela seja enviada para o navegador sem modificaes.
Quando recebe uma solicitao de uma pgina esttica, o servidor Web l a solicitao, localiza a pgina e a envia para o navegador solicitante,
como mostra o seguinte exemplo:
1. Navegador da Web solicita a pgina esttica. 2. Servidor Web localiza a pgina. 3. Servidor Web envia a pgina para o navegador
solicitante.
No caso dos aplicativos da Web, certas linhas de cdigo no so determinadas quando o visitante solicita a pgina. Para que a pgina seja
enviada ao navegador, essas linhas devem ser determinadas por um mecanismo. O mecanismo abordado na seguinte seo.
Para o incio
Ao receber uma solicitao de uma pgina da Web esttica, um servidor Web envia a pgina diretamente para o navegador solicitante. Porm,
ao receber uma solicitao de uma pgina dinmica, o servidor Web reage de maneira diferente: ele passa a pgina para uma parte especial do
software responsvel pela concluso da pgina. Esse software especial chamado de servidor de aplicativo.
O servidor de aplicativo l o cdigo na pgina, conclui a pgina de acordo com as instrues do cdigo e, em seguida, remove o cdigo da
pgina. O resultado uma pgina esttica que o servidor de aplicativo passa para o servidor Web que, em seguida, envia a pgina para o
navegador solicitante. Todo o obtido pelo navegador quando a pgina chega HTML puro. Eis uma visualizao do processo:
1. Navegador da Web solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo. 3. Servidor de
aplicativo rastreia a pgina em busca de instrues e conclui a pgina. 4. Servidor de aplicativo passa novamente a pgina concluda para o
servidor Web. 5. Servidor Web envia a pgina concluda para o navegador solicitante
Para o incio
Um servidor de aplicativo permite trabalhar com recursos do servidor como, por exemplo, bancos de dados. Por exemplo, uma pgina dinmica
pode instruir o servidor de aplicativo para extrair dados de um banco de dados e inseri-los no HTML da pgina. Para obter mais informaes,
consulte www.adobe.com/go/learn_dw_dbguide_br.
O uso de um banco de dados para armazenar o contedo permite separar o design do site do contedo que voc deseja exibir para os usurios
do site. Em vez de escrever arquivos em HTML individuais para cada pgina, voc s precisa escrever uma pgina ou modelo para os
diferentes tipos de informaes que deseja apresentar. Em seguida, voc pode carregar o contedo em um banco de dados e, em seguida, fazer
com que o site recupere esse contedo em resposta a uma solicitao do usurio. Voc tambm pode atualizar as informaes em uma nica
fonte e, em seguida, preencher essa alterao em todo o site sem ter que editar manualmente todas as pginas. Voc pode usar o
Adobe Dreamweaver para projetar formulrios da Web a fim de inserir, atualizar ou excluir dados do banco de dados.
A instruo para extrair dados de um banco de dados chamada de consulta ao banco de dados. Uma consulta consiste em critrios de
pesquisa expressados em uma linguagem de banco de dados chamada SQL (Linguagem de consulta estruturada). A consulta SQL escrita em
scripts ou tags do servidor da pgina.
Um servidor de aplicativo no pode se comunicar diretamente com um banco de dados porque o formato prprio do banco de dados processa os
dados indecifrveis de maneira muito semelhante a um documento do Microsoft Word aberto no Bloco de Notas ou BBEdit talvez seja
indecifrvel. O servidor de aplicativo pode se comunicar com o banco de dados apenas por meio de um driver de banco de dados: software que
funciona como um intrprete entre o servidor de aplicativo e o banco de dados.
Depois que o driver estabelece a comunicao, a consulta executada no banco de dados e um conjunto de registros criado. Um conjunto de
registros um conjunto de dados extrados de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de
aplicativo, que usa os dados para completar a pgina.
Eis uma consulta ao banco de dados simples escrita em SQL:
1. Navegador da Web solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo. 3. Servidor de
aplicativo rastreia a pgina em busca de instrues. 4. Servidor de aplicativo envia consulta ao driver de banco de dados. 5. Driver executa a
consulta no banco de dados. 6. Conjunto de registros devolvido ao driver. 7. Driver passa o conjunto de registros para o servidor de
aplicativo 8. Servidor de aplicativo insere dados na pgina e, em seguida, passa a pgina para o servidor Web 9. Servidor Web envia a pgina
concluda para o navegador solicitante.
Voc pode usar praticamente qualquer banco de dados com o aplicativo da Web, desde que o driver de banco de dados apropriado esteja
instalado no servidor.
Caso pretenda criar pequenos aplicativos de baixo custo, voc pode usar um banco de dados baseado em arquivo como, por exemplo, um criado
no Microsoft Access. Caso pretenda criar aplicativos robustos, fundamentais empresa, voc pode usar um banco de dados baseado em
servidor como, por exemplo, um criado no Microsoft SQL Server, no Oracle 9i ou no MySQL.
Caso o banco de dados esteja localizado em um sistema que no seja o servidor Web, verifique se h uma conexo rpida entre os dois
sistemas para que o aplicativo da Web possa operar com rapidez e eficincia.
Para o incio
A criao de uma pgina dinmica consiste em escrever primeiramente o HTML e, em seguida, adicionar os scripts ou as tags do servidor ao
HTML para tornar a pgina dinmica. Quando voc exibe o cdigo resultante, a linguagem aparece incorporada ao HTML da pgina. Dessa
forma, essas linguagens so conhecidas como linguagens de programao com HTML incorporado. O seguinte exemplo bsico usa a Linguagem
de markup do ColdFusion (CFML):
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>
As instrues incorporadas pgina realizam as seguintes aes:
1. Crie uma varivel chamada department e atribua a sequncia de caracteres "Sales" a ela.
2. Insira o valor da varivel, "Sales", ao cdigo em HTML.
O servidor de aplicativo retorna a seguinte pgina ao servidor Web:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<p>Be sure to visit our Sales page.</p>
</body>
</html>
O servidor Web envia a pgina para o navegador solicitante, que a exibe da seguinte forma:
Sobre a Trio Motors
A Trio Motors uma grande montadora de automveis.
No deixe de visitar a nossa pgina de vendas.
Voc escolhe uma linguagem de script ou baseada em tag a ser usada de acordo com a tecnologia disponvel no servidor. Estas so as
linguagens mais conhecidas para as tecnologias de servidor que recebem suporte doDreamweaver:
Tecnologia de servidor
Linguagem
ColdFusion
VBScript
JavaScript
PHP
PHP
O Dreamweaver pode criar os scripts ou as tags do servidor necessrias ao funcionamento das pginas, ou voc pode escrev-los manualmente
no ambiente de codificao do Dreamweaver.
Para o incio
Esta seo define os termos mais usados em relao aos aplicativos da Web.
Um servidor de aplicativo Software que ajuda um servidor Web a processar pginas da Web que contenham scripts ou tags do servidor.
Quando uma pgina dessas solicitada no servidor, o servidor Web a entrega ao servidor de aplicativo para que ele a processe antes do envio
da pgina para o navegador. Para obter mais informaes, consulte Como funciona um aplicativo de Web.
Servidores de aplicativo comuns incluem ColdFusion e PHP.
Um banco de dados Um conjunto de dados armazenados em tabelas. Cada uma das linhas de uma tabela constitui um registro e cada coluna,
um campo no registro, como mostrado no seguinte exemplo:
Um driver de banco de dados Software que funciona como intrprete entre um aplicativo da Web e um banco de dados. Os dados em um
banco de dados so armazenados em um formato prprio. Um driver de banco de dados permite ao aplicativo da Web ler e manipular dados que
outrora seriam indecifrveis.
Um sistema de gerenciamento do banco de dados (DBMS ou sistema de banco de dados) Software usado para criar e manipular bancos de
dados. Entre os sistemas de banco de dados mais comuns esto Microsoft Access, Oracle 9i e MySQL.
Uma consulta ao banco de dados A operao que extrai um conjunto de registros de um banco de dados. Uma consulta consiste em critrios
de pesquisa expressados em uma linguagem de banco de dados chamada SQL. Por exemplo, a consulta pode especificar que apenas
determinadas colunas ou certos registros sejam includos no conjunto.
Uma pgina dinmica Uma pgina da Web personalizada por um servidor de aplicativo para que a pgina seja enviada a um navegador.
Um conjunto de registros Um conjunto de dados extrados de uma ou mais tabelas em um banco de dados, como mostrado no
seguinte exemplo:
Um banco de dados relacional Um banco de dados que contm mais de uma tabela, com as tabelas compartilhando os dados. O seguinte
banco de dados relacional porque duas tabelas compartilham a mesma coluna DepartmentID.
Uma tecnologia de servidor A tecnologia que o servidor de aplicativo usa para modificar pginas dinmicas durante o runtime.
O ambiente de desenvolvimento do Dreamweaver d suporte s seguintes tecnologias de servidor:
Adobe ColdFusion
Microsoft ASP (Pginas ativas do servidor)
PHP: PHP (Pr-processador de hipertexto)
Voc tambm pode usar o ambiente de codificao do Dreamweaver a fim de desenvolver pginas para qualquer outra tecnologia de
servidor no listada.
Uma pgina esttica Uma pgina da Web no modificada por um servidor de aplicativo para que a pgina seja enviada a um navegador. Para
obter mais informaes, consulte Processamento de pginas da Web estticas.
Um aplicativo da Web Um site que contm pginas de contedo parcial ou inteiramente no determinado. O contedo final dessas pginas s
determinado quando um visitante solicita uma pgina do servidor Web. Como o contedo final da pgina varia de solicitao para solicitao com
base nas aes do visitante, esse tipo chamado de pgina dinmica.
Um servidor Web Software que envia pginas da Web em resposta a solicitaes de navegadores da Web. Uma solicitao de pgina gerada
quando um visitante clica em um link em uma pgina da Web no navegador, seleciona um marcador no navegador ou digita um URL na caixa de
texto de endereo do navegador.
Servidores Web populares incluem o Microsoft Internet Information Server (IIS) e o Apache HTTP Server.
Mais tpicos da Ajuda
Guia introdutrio aos bancos de dados
Para o incio
Os arquivos CFC (componente do ColdFusion) lhe permitem integrar as lgicas de aplicativo e de negcios em unidades reutilizveis, inteiras. Os
CFCs tambm proporcionam uma forma rpida e fcil de criar servios da Web.
Um CFC uma unidade de software reutilizvel escrita em CFML (linguagem de markup do ColdFusion), que facilita a reutilizao e a
manuteno do cdigo.
Voc pode usar o Dreamweaver para trabalhar com CFCs. Para obter informaes sobre as tags e a sintaxe CFC, consulte a documentao do
ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion).
Nota: Voc s pode usar CFCs com o ColdFusion MX ou posterior. No h suporte para CFCs no ColdFusion 5.
Os CFCs devem fornecer uma forma simples, mas eficiente, para que desenvolvedores integrem elementos dos sites. Normalmente, voc deve
usar componentes na lgica de aplicativo ou de negcios. Use tags personalizadas em elementos de apresentao como, por exemplo,
saudaes personalizadas, menus dinmicos etc.
Assim como acontece com muitos outros tipos de construo, os sites dinmicos normalmente podem aproveitar partes intercambiveis. Por
exemplo, um site dinmico pode executar a mesma consulta repetidamente ou calcular o preo total das pginas do carro de compras e
recalcul-lo sempre que um item adicionado. Essas tarefas podem ser tratadas por componentes. Voc pode corrigir, melhorar, estender e at
mesmo substituir um componente com impacto mnimo sobre o resto do aplicativo.
Suponhamos que uma loja online calcule o frete com base no preo dos pedidos. Para pedidos abaixo de US$ 20, o frete de US$ 4; para
pedidos entre US$ 20 e US$ 40, ele de US$ 6 e assim por diante. Voc poderia inserir a lgica de clculo do frete tanto na pgina do carro de
compras quanto na pgina de retirada, mas isso misturaria o cdigo de apresentao em HTML e o cdigo da lgica em CFML, alm de
normalmente dificultar a manuteno e a reutilizao.
Voc decide criar um CFC chamado Preo que tem, dentre outras coisas, uma funo chamada ShippingCharge. A funo usa um preo como
argumento e retorna um frete. Por exemplo, caso o valor do argumento seja 32,80, a funo retorna 6.
Tanto na pgina do carro de compras quanto na pgina de retirada, voc insere uma tag especial para invocar a funo ShippingCharge. Quando
a pgina solicitada, a funo invocada e um frete retorna para a pgina.
Mais tarde, a loja anuncia uma promoo especial: frete gratuito para todos os pedidos acima de US$ 100. Voc faz a alterao nos fretes em
um s local a funo ShippingCharge do componente Preo e todas as pginas que usam a funo obtm automaticamente fretes precisos.
Para o incio
Use o painel Componentes (Janela > Componentes) para exibir e editar os componentes do ColdFusion e adicione um cdigo pgina que
invoca a funo quando a pgina em CFM solicitada.
Nota: O painel Componentes s est disponvel durante a exibio de uma pgina do ColdFusion no Dreamweaver.
Para o incio
Voc pode usar o Dreamweaver para definir visualmente um CFC e suas funes. O Dreamweaver cria um arquivo .cfc e insere as tags de CFML
necessrias para voc.
Nota: Dependendo do componente, voc talvez tenha que completar alguns cdigos manualmente.
1. Abra uma pgina do ColdFusion no Dreamweaver.
2. No painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up.
3. Clique no boto de adio (+), complete a caixa de dilogo Criar componente e clique em OK.
a. Na seo Componentes, informe os detalhes do componente. Aqui est uma lista parcial:
Nome Especifica o nome de arquivo do componente. O nome deve conter apenas caracteres alfanumricos e sublinhados (_). No
especifique a extenso de arquivo .cfc ao digitar o nome.
Diretrio do componente Especifica onde o componente salvo. Selecione a pasta raiz do aplicativo da Web (como, por exemplo,
\Inetpub\wwwroot\myapp\) ou qualquer uma das subpastas.
b. Para definir uma ou mais funes para o componente, selecione Funes na lista Seo, clique no boto de adio (+) e insira os
detalhes da nova funo.
Verifique se voc especificou o tipo do valor retornado pela funo na opo Tipo de retorno.
Caso voc selecione remoto no menu Acesso, a funo disponibilizada como um servio da Web.
c. Para definir um ou mais argumentos de uma funo, selecione Argumentos na lista Seo, selecione a funo no menu pop-up, clique
no boto de adio (+) e insira os detalhes do novo argumento direita.
4. Caso voc use um servidor de desenvolvimento remoto, carregue o arquivo CFC e todos os arquivos dependentes (como, por exemplo, os
usados para implementar uma funo ou para incluir arquivos) no servidor remoto.
O carregamentos dos arquivos garante que recursos do Dreamweaver como, por exemplo, a visualizao Live e Visualizar o navegador
funcionem corretamente.
O Dreamweaver escreve um arquivo CFC e o salva na pasta que voc especificar. O novo componente tambm exibido no painel
Componentes (depois do clique em Atualizar).
5. Para remover um componente, voc deve excluir manualmente o arquivo CFC do servidor.
Para o incio
O Dreamweaver fornece uma forma de examinar visualmente os componentes de ColdFusion (CFCs) localizados na pasta do site ou em todo o
servidor. O Dreamweaver l os arquivos CFC e exibe informaes sobre eles em uma visualizao hierrquica de fcil navegao no painel
Componentes.
O Dreamweaver procura os componentes no servidor de teste (consulte Conexo com o banco de dados no Dreamweaver). Caso voc crie CFCs
ou faa alteraes nos CFCs existentes, no se esquea de carregar os arquivos CFC no servidor de teste para que eles sejam refletidos com
preciso no painel Componentes.
Para exibir os componentes localizados em outro servidor, altere as configuraes do servidor de teste.
Voc pode exibir qualquer uma das seguintes informaes sobre os componentes do CF:
Listar todos os componentes do ColdFusion definidos no servidor.
Caso voc esteja executando o ColdFusion MX 7 ou posterior, filtre a lista para mostrar apenas os CFCs localizados na pasta do site.
Explorar as funes e os argumentos de cada componente.
Inspecionar as propriedades das funes que funcionam como servios da Web.
Para usar o Dreamweaver a fim de inspecionar os CFCs que residem na raiz do servidor enquanto tambm gerencia os arquivos do site em
uma raiz diferente, voc pode definir dois sites do Dreamweaver. Defina o primeiro site de forma a apontar para a raiz do servidor e o
segundo, para a raiz do site. Use o menu pop-up do site no painel Arquivos para alternar rapidamente entre os dois sites.
Para exibir os CFCs no Dreamweaver, siga estas etapas:
1. Abra qualquer pgina do ColdFusion no Dreamweaver.
2. No painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up.
3. Clique no boto Atualizar no painel para recuperar os componentes.
O pacote de componentes exibido no servidor. Pacote de componentes uma pasta que contm arquivos CFC.
Caso os pacotes de componentes existentes no sejam exibidos, clique no boto Atualizar da barra de ferramentas do painel.
4. Para exibir apenas os CFCs localizados na pasta do site, clique no boto Mostrar apenas os CFCs do site atual da barra de ferramentas do
painel Componentes.
Nota: O recurso s est disponvel caso voc tenha definido um computador com o ColdFusion MX 6 ou posterior em execuo como
servidor de teste do Dreamweaver.
Nota: Caso o site atual esteja listado em uma pasta virtual do servidor remoto, a filtragem no funciona.
5. Clique no boto de adio (+) ao lado do nome do pacote para exibir os componentes armazenados no pacote.
Para listar as funes de um componente, clique no boto de adio (+) ao lado do nome do componente.
Para ver os argumentos que uma funo usa, bem como o tipo de argumento e se eles so obrigatrios ou opcionais, abra a
ramificao da funo na visualizao hierrquica.
As funes que no usam argumentos no apresentam nenhum boto de adio (+) abaixo delas.
Para exibir rapidamente os detalhes de um argumento, de uma funo, de um componente ou de um pacote, selecione o item na
visualizao hierrquica e clique no boto Obter detalhes na barra de ferramentas do painel.
Voc tambm pode clicar com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no item e
selecionar Obter detalhes no menu pop-up.
Os detalhes do item so exibidos em uma caixa de mensagem.
Para o incio
O Dreamweaver fornece uma forma aprimorada de edio do cdigo dos componentes do ColdFusion definidos para o site. Por exemplo, voc
pode adicionar, alterar ou excluir qualquer funo de componente sem o Dreamweaver.
Para usar o recurso, o ambiente de desenvolvimento deve ser definido da seguinte forma:
O ColdFusion deve estar em execuo localmente.
Na caixa de dilogo avanada Definio de sites do Dreamweaver, o Tipo de acesso especificado na categoria Servidor de teste deve ser
Local/rede.
Na caixa de dilogo avanada Definio de sites, o caminho da pasta raiz local deve ser igual ao caminho da pasta do servidor de teste (por
exemplo, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Voc pode examinar e alterar esses caminhos selecionando Site > Editar os sites.
O componente deve ser armazenado na pasta do site local ou em qualquer uma das subpastas do disco rgido.
Abra qualquer pgina do ColdFusion no Dreamweaver e veja os componentes no painel Componentes. Para exibir os componentes, abra o painel
Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do painel e clique no boto Atualizar do painel.
Como o ColdFusion est em execuo localmente, o Dreamweaver exibe os pacotes de componentes no disco rgido.
Use o seguinte procedimento para editar um componente.
1. Abra qualquer pgina do ColdFusion no Dreamweaver e veja os componentes no painel Componentes (Janela > Componentes).
2. Selecione Componentes CF no menu pop-up do painel e clique no boto Atualizar do painel.
Como o ColdFusion est em execuo localmente, o Dreamweaver exibe os pacotes de componentes no disco rgido.
Nota: Para editar visualmente o conjunto de registros CFC, clique duas vezes nele no painel Ligaes.
3. Para editar um arquivo de componente em termos gerais, abra o pacote e clique duas vezes no nome do componente na visualizao
hierrquica.
O arquivo do componente aberto na Visualizao de cdigo.
4. Para editar uma funo especfica, argumento ou propriedade, clique duas vezes no item na visualizao hierrquica.
5. Faa manualmente as alteraes na Visualizao de cdigo.
6. Salve o arquivo (Arquivo > Salvar).
7. Para ver uma nova funo no painel Componentes, atualize a visualizao clicando no boto Atualizar na barra de ferramentas do painel.
Para o incio
Uma forma de usar a funo de um componente nas pginas da Web escrever cdigo na pgina que invoca a funo quando a pgina
solicitada. Voc pode usar o Dreamweaver para ajudar voc a escrever o cdigo.
Nota: Para obter outras formas de usar componentes, consulte a documentao do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion).
1. No Dreamweaver, abra a pgina do ColdFusion que usar a funo de componente.
2. Passe para a Visualizao de cdigo (Exibir > Cdigo).
3. Abra o painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do painel.
4. Localize o componente desejado e o insira usando uma das seguintes tcnicas:
Arraste uma funo da visualizao hierrquica para a pgina. O cdigo inserido na pgina para invocar a funo.
Selecione a funo no painel e clique no boto Inserir na barra de ferramentas do painel (o segundo boto direita). O Dreamweaver
insere o cdigo na pgina, no ponto de insero.
5. Caso voc insira uma funo com argumentos, complete manualmente o cdigo do argumento.
Para obter mais informaes, consulte a documentao do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion).
6. Salve a pgina (Arquivo > Salvar).
Para o incio
O Dreamweaver pode ajudar voc a definir um conjunto de registros (tambm conhecido como consulta do ColdFusion) em um CFC. Definindo
um conjunto de registros em um CFC, voc no precisa definir o conjunto de registros em todas as pginas em que ele usado. Voc define o
conjunto de registros uma vez no CFC e usa o CFC em pginas diferentes.
Nota: Esse recurso s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. Para
obter mais informaes, consulte Ativar os aprimoramentos feitos no ColdFusion.
1. Crie ou abra um arquivo CFC existente no Dreamweaver.
2. No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta) no menu pop-up.
A caixa de dilogo Conjunto de registros exibida. Voc pode trabalhar nas caixas de dilogo Conjunto de registros simples ou avanada.
3. Para usar uma funo existente no CFC, selecione a funo no menu pop-up Funo e passe etapa 5.
O conjunto de registros definido na funo.
4. Para definir uma nova funo no CFC, clique no boto Nova funo, digite um nome para a funo na caixa de dilogo exibida e, em
seguida, clique em OK.
O nome deve conter apenas caracteres alfanumricos e sublinhados (_).
5. Para definir um conjunto de registros para a funo, complete as opes da caixa de dilogo Conjunto de registros.
A nova funo inserida no CFC que define o conjunto de registros.
Para o incio
Voc pode usar um componente de ColdFusion (CFC) como fonte de contedo dinmico para as pginas caso o componente contenha uma
funo que define um conjunto de registros.
Nota: Esse recurso s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. Para
obter mais informaes, consulte Ativar os aprimoramentos feitos no ColdFusion.
1. Abra uma pgina do ColdFusion no Dreamweaver.
2. No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta) no menu pop-up.
A caixa de dilogo Conjunto de registros exibida. Voc pode trabalhar nas caixas de dilogo Conjunto de registros simples ou avanada.
3. Clique no boto Consulta do CFC.
4. Complete a caixa de dilogo Consulta do CFC, clique em OK e em OK novamente para adicionar o conjunto de registros CFC lista das
fontes de contedo disponveis no painel Ligaes.
5. Use o painel Ligaes para ligar o conjunto de registros a vrios elementos de pgina.
Para obter mais informaes, consulte Adio de contedo dinmico a pginas.
Para o incio
Voc pode definir um conjunto de registros como uma fonte de contedo dinmico no Dreamweaver usando um CFC que contm uma definio
do conjunto de registros.
1. Na caixa Nome, digite um nome para o conjunto de registros CFC.
Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes de objeto no cdigo,
por exemplo: rsPressRelease.
Os nomes dos conjuntos de registros devem conter apenas caracteres alfanumricos e sublinhados (_). Voc no pode usar caracteres
especiais ou espaos.
2. Selecione um pacote de um dos j definidos no servidor.
Caso o pacote no seja exibido no menu pop-up, voc pode atualizar a lista de pacotes clicando no boto Atualizar prximo do menu popup.
Primeiramente, verifique se voc carregou os CFCs no servidor de teste. S so exibidos CFCs no servidor de teste.
3. Selecione um componente dentre os definidos no pacote selecionado atualmente.
Caso o menu pop-up Componente no contenha nenhum componente, ou caso nenhum dos componentes criados anteriormente seja
exibido no menu, voc deve carregar os arquivos CFC no servidor de teste.
4. (Opcional) Para criar um componente, clique no boto Criar novo componente.
a. Na caixa Nome, digite o nome para o novo CFC. O nome deve conter apenas caracteres alfanumricos e sublinhados (_).
b. Na caixa Diretrio do componente, insira o local do CFC ou localize a pasta.
Nota: A pasta deve ser o caminho relativo da pasta raiz do site.
5. No menu pop-up Funo, selecione a funo que contm a definio do conjunto de registros.
O menu pop-up Funo contm apenas as funes definidas no componente selecionado no momento. Caso nenhuma funo seja exibida
no menu pop-up ou caso as alteraes mais recentes no sejam refletidas nas funes listadas atualmente, verifique se as alteraes
Produto vetorial
Criao e edio do site do Business Catalyst com a Dreamweaver CS6
Adobe TV (19 de julho de 2012)
tutorial em vdeo
Fornece uma viso geral dos recursos do Business Catalyst incorporados na CS6, o trabalho com modelos de mdulos nessa interface,
e exibe alguns recursos novos, como preenchimento de cdigo e arquivos relacionados.
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Tutorial de vdeo
Para o incio
Para o incio
Para o incio
Para obter informaes sobre migrao de sites criados anteriormente usando a extenso do Business Catalyst, consulte Migrao de sites do
Business Catalyst para a Dreamweaver CS6.
1. Selecione Site > Gerenciar sites.
2. Clique em Importar site do Business Catalyst. A lista de sites do Business Catalyst criada com a ID da Adobe ser exibida.
3. Selecione o site e clique em Importar site.
4. Especifique um local no seu computador para o site que est tentando importar.
5. Insira a senha relacionada sua ID da Adobe.
6. Quando a atividade do arquivo estiver concluda, clique em Concludo.
Gerenciar arquivos
Para o incio
Como o Business Catalyst tambm um servio de hospedagem de sites, possvel usar o Dreamweaver para gerenciar arquivos de sites locais
e remotos. Para obter mais informaes, consulte os seguintes tpicos:
Gerenciamento de arquivos e pastas
Como obter e colocar arquivos no servidor
Devoluo e retirada de arquivos
Para o incio
1. Selecione Janela > Business Catalyst para abrir o painel do Business Catalyst.
2. Siga um destes procedimentos:
Para inserir um mdulo do Business Catalyst, selecione a guia Mdulos.
Para inserir tags, selecione a guia Dados. As tags sero exibidas se voc estiver editando arquivos que oferecem suporte s tags como
a pgina affiliate.html na pasta Layouts/Affiliate/.
3. Expanda o mdulo e clique no mdulo que deseja adicionar ao arquivo.
4. Fornea as informaes obrigatrias e clique em Inserir.
5. Se o seu site atual usar o novo mecanismo de renderizao, a guia Snippets ser exibida. Usando as opes na guia Snippet, voc poder
adicionar snippets de cdigo, como repetio e regies condicionais, sees de comentrio e Include (funciona de modo semelhante ao
Server-Side Include).
6. Clique em Dinmico para visualizar a pgina como apareceria em um navegador da Web.
Para o incio
De modo semelhante edio de outros objetos em uma pgina da Web, voc pode usar o Inspetor de propriedades para editar propriedades de
objetos em mdulos do Business Catalyst.
Se no visualizar as opes para editar propriedades, verifique se voc tem permisses para editar o arquivo. possvel tambm, para alguns
mdulos, editar a pgina somente no site de Administrao on-line.
Para o incio
Voc pode inserir arquivos de imagem do Photoshop (formato PSD) em pginas da Web no Dreamweaver e permitir que o Dreamweaver otimizeas como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ao, o Dreamweaver insere a imagem como um
Objeto Inteligente e mantm uma conexo ativa com o arquivo PSD original.
Tambm possvel colar toda ou parte de uma imagem do Photoshop de vrias camadas ou fatias em uma pgina da Web no Dreamweaver.
Entretanto, quando voc copia e cola do Photoshop, a conexo ativa com o arquivo original no mantida. Para atualizar a imagem, faa as
alteraes no Photoshop e copie e cole novamente.
Nota: Se esse recurso de integrao for usado com frequncia, voc poder armazenar seus arquivos do Photoshop no site do Dreamweaver
para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposio dos ativos originais, assim como
as transferncias desnecessrias entre o site local e o servidor remoto.
Para obter um tutorial sobre o fluxo de trabalho do Objeto Inteligente no Photoshop e no Dreamweaver, consulte
www.adobe.com/go/lrvid4043_dw_br.
Para o incio
H dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de
trabalho dos Objetos Inteligentes.
Fluxo de trabalho copiar/colar
O fluxo de trabalho copiar/colar permite que voc selecione fatias ou camadas em um arquivo do Photoshop e, em seguida, use o Dreamweaver
para inseri-las como imagens prontas para a Web. Se quiser atualizar o contedo posteriormente, entretanto, voc dever abrir o arquivo
Photoshop original, executar as alteraes, copiar sua fatia ou camada para a rea de Transferncia novamente e, em seguida, colar a fatia ou a
camada atualizada no Dreamweaver. Esse fluxo de trabalho s recomendado quando voc deseja inserir parte de um arquivo do Photoshop
(por exemplo, uma seo de um componente de design) como uma imagem em uma pgina da Web.
Fluxo de trabalho dos Objetos Inteligentes
Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho dos Objetos Inteligentes. Um Objeto Inteligente no
Dreamweaver uma imagem colocada em um pgina da Web que tenha uma conexo instantnea com um arquivo original do Photoshop (PSD).
Na Visualizao de design do Dreamweaver, um Objeto Inteligente indicado por um cone no canto superior esquerdo da imagem.
Objeto Inteligente
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo Photoshop original, o
Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em vermelho. Quando voc
seleciona a imagem da Web na Visualizao de design e clica no boto Atualizar do original no Inspetor de propriedades, a imagem atualizada
automaticamente, refletindo todas as alteraes feitas no arquivo original do Photoshop.
Ao usar o fluxo de trabalho de Objetos Inteligentes, voc no precisa abrir o Photoshop para atualizar uma imagem da Web. Alm disso,
quaisquer atualizaes feitas em um Objeto Inteligente no Dreamweaver so no destrutivas. Ou seja, voc pode alterar a verso da Web da
imagem em sua pgina enquanto mantm a imagem original do Photoshop intacta.
Voc tambm pode atualizar um Objeto Inteligente sem selecionar a imagem da Web na visualizao de Design. O painel Recursos permite que
voc atualize todos os Objetos Inteligentes, incluindo as imagens que podem no ser selecionveis na janela Documento (por exemplo, imagens
de segundo plano CSS).
Configuraes de otimizao de imagens
Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos Inteligentes, voc pode especificar configuraes de
otimizao na caixa de dilogo Otimizao da imagem. Esta caixa de dilogo permite especificar o formato de arquivo e a qualidade da imagem.
Se voc estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto Inteligente pela
primeira vez, o Dreamweaver exibir essa caixa de dilogo de modo que voc possa criar facilmente a imagem da Web.
Se voc copiar e colar uma atualizao em uma determinada fatia ou camada, o Dreamweaver manter as configuraes originais e recriar a
imagem da Web com essas configuraes. Da mesma maneira, ao atualizar um Objeto Inteligente usando o Inspetor de propriedades, o
Dreamweaver usar as mesmas configuraes usadas quando voc inseriu a imagem pela primeira vez. Voc pode alterar as configuraes de
imagem a qualquer momento selecionando a imagem da Web na Visualizao de design e, em seguida, clicar no boto Editar configuraes da
imagem no Inspetor de propriedades.
Armazenamento de arquivos do Photoshop
Se voc tiver inserido uma imagem da Web e no tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o
Dreamweaver reconhecer o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso verdadeiro tanto para o fluxo de
trabalho de copiar/colar quanto para o de Objetos Inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:\Sites\meuSite e
seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver no reconhecer o ativo original como parte do site
chamado meuSite. Isso causar problemas se voc quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o
Dreamweaver reconhecer o arquivo somente como disponvel em um determinado disco rgido local.
Se voc armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definir um caminho entre o site o arquivo. Qualquer usurio
com acesso ao site ser capaz de definir o caminho correto at o arquivo, desde que voc tenha fornecido o arquivo original para download.
Para obter um tutorial em vdeo sobre o fluxo de trabalho dos Objetos Inteligentes no Photoshop e no Dreamweaver, consulte
www.adobe.com/go/lrvid4043_dw_br.
Para o incio
Quando voc insere uma imagem do Photoshop (arquivo PSD) em uma pgina, o Dreamweaver cria um Objeto Inteligente. Um Objeto Inteligente
uma imagem habilitada para a Web que mantm uma conexo ativa com a imagem original do Photoshop. Sempre que voc atualiza a imagem
original no Photoshop, o Dreamweaver oferece a opo de atualizar a imagem no Dreamweaver com o clique de um boto.
1. No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja inserir a imagem.
2. Selecione Inserir > Imagem.
Voc tambm pode arrastar o arquivo PSD para a pgina a partir do painel Arquivos, caso esteja armazenando os arquivos do
Photoshop em seu site. Se essa for a sua opo, ignore a prxima etapa.
3. Localize o arquivo de imagem PSD do Photoshop na caixa de dilogo Selecionar origem da imagem clicando no boto Procurar e
navegando at o arquivo.
4. Ajuste as configuraes de otimizao conforme necessrio na caixa de dilogo Otimizao da imagem e clique em OK.
5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.
O Dreamweaver cria os Objetos Inteligentes com base nas configuraes de otimizao selecionadas e coloca em sua pgina a verso habilitada
para a Web da imagem. O Objeto Inteligente mantm uma conexo ativa com a imagem original e permite que voc saiba quando ambas esto
fora de sincronia.
Nota: Se voc decidir alterar posteriormente as configuraes de otimizao para uma imagem colocada em suas pginas, pode selecionar a
imagem, clicar no boto Editar Configuraes de imagem, no Inspetor de propriedades da imagem, e fazer as alteraes na caixa de dilogo
Otimizao de imagem. As alteraes feitas na caixa de dilogo Otimizao de imagem so aplicadas de forma no destrutiva. O Dreamweaver
nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais.
Para obter um tutorial em vdeo sobre como trabalhar com os Objetos Inteligentes do Photoshop, consulte www.adobe.com/go/lrvid4043_dw_br.
Para o incio
Se voc alterar o arquivo do Photoshop ao qual seu Objeto Inteligente vinculado, o Dreamweaver notifica que a imagem habilitada para a web
est fora de sincronia com o original. No Dreamweaver, os Objetos Inteligentes so indicados por um cone no canto superior esquerdo da
imagem. Quando a imagem habilitada para a Web no Dreamweaver est fora de sincronia com o arquivo original do Photoshop, ambas as setas
do cone ficam verdes. Quando a imagem habilitada para a Web est fora de sincroniza com o arquivo original do Photoshop, uma das setas do
cone fica vermelha.
Para atualizar um objeto inteligente com o contedo atual do arquivo original do Photoshop, selecione Objeto Inteligente na janela
Documento e clique no boto Atualizar do original, no Inspetor de propriedades.
Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.
Para o incio
Voc pode atualizar vrios Objetos Inteligentes de uma s vez usando o painel Ativos. O painel Ativos possibilita visualizar os Objetos Inteligentes
que talvez no possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS).
1. No painel Arquivos, clique na aba Ativos para visualizar os ativos do site.
2. Certifique-se de que a visualizao Imagens foi selecionada. Caso contrrio, clique no boto Imagens.
3. Selecione cada ativo de imagem no painel Ativos. Quando voc seleciona um Objeto Inteligente, possvel ver um cone de Objeto
Inteligente no canto superior esquerdo da imagem. Imagens normais no possuem esse cone.
4. Em cada objeto Inteligente que voc quiser atualizar, clique com o boto direito do mouse sobre o nome do arquivo e selecione Atualizar
do original. Voc tambm pode clicar mantendo a tecla Control pressionada para selecionar vrios nomes de arquivos e atualizar todos de
uma vez.
Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.
Para o incio
Voc pode redimensionar um Objeto Inteligente na janela Documento como faria com qualquer outra imagem.
1. Selecione o Objeto Inteligente na janela Documento e arraste as alas de redimensionamento para redimensionar a imagem. Voc pode
manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta.
2. Clique no boto Atualizar do original no Inspetor de propriedades.
Quando voc atualiza o Objeto Inteligente, a imagem da web reprocessa o novo tamanho de forma no destrutiva com base no contedo
atual do arquivo original e das configuraes originais de otimizao.
Para o incio
Aps criar o Objeto Inteligente na sua pgina do Dreamweaver, voc pode editar o arquivo PSD original no Photoshop. Aps fazer as alteraes
no Photoshop, voc pode atualizar facilmente a imagem da Web no Dreamweaver.
Nota: Certifique-se de configurar o Photoshop como editor principal de imagens externas.
1. Selecione o Objeto Inteligente na janela Documento.
Para o incio
Descrio
Ao recomendada
Imagens sincronizadas
Nenhum
Para o incio
Voc pode copiar todas ou algumas imagens do Photoshop e colar a seleo na pgina do Dreamweaver como uma imagem habilitada para a
Web. possvel copiar uma nica camada ou um conjunto de camadas de uma rea selecionada da imagem ou copiar uma fatia da imagem.
Entretanto, quando se faz isso, o Dreamweaver no cria um Objeto Inteligente.
Nota: Embora a funo Atualizar do original no esteja disponvel para imagens coladas, voc ainda pode abrir e editar o arquivo original do
Photoshop selecionando a imagem colada e clicando no boto Editar do Inspetor de propriedades.
1. No Photoshop, execute um dos procedimentos a seguir:
Copie toda ou parte de uma nica camada usando a ferramenta Moldura para selecionar a parte que deseja copiar e escolha Editar >
Copiar. Somente a camada ativa da rea selecionada copiada na rea de transferncia. Se houver efeitos baseados em camadas,
eles no sero copiados.
Copie e mescle vrias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha Editar > Copiar parte
mesclada. Isso nivela e copia todas as camadas ativas e inferiores da rea selecionada na rea de transferncia. Se houver efeitos
baseados em camadas associados, eles no sero copiados.
Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar. Isso nivela e copia
todas as camadas ativas e inferiores da fatia na rea de transferncia.
Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.
2. No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja inserir a imagem.
3. Selecione Editar > Colar.
4. Na caixa de dilogo Visualizao da imagem, ajuste as configuraes de otimizao como necessrio e clique em OK.
5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.
O Dreamweaver define a imagem de acordo com as configuraes de otimizao e coloca uma verso habilitada para a Web da imagem na sua
pgina. As informaes sobre a imagem, como o local do arquivo PSD original, so salvas em uma Design Note, independentemente de as
Design Notes estarem ativadas para seu site. A Design Note permite que voc volte para editar o arquivo de origem do Photoshop a partir do
Dreamweaver.
Para obter um tutorial sobre como copiar e colar entre diferentes aplicativos, incluindo Dreamweaver e Photoshop, consulte
www.adobe.com/go/vid0193_br.
Para o incio
Aps colar as imagens do Photoshop nas suas pginas do Dreamweaver, voc pode editar o arquivo PSD original no Photoshop. Ao utilizar o
fluxo de trabalho copiar/colar, a Adobe recomenda sempre manter suas edies no arquivo original PSD, e no na imagem habilitada para a web,
e a colar novamente para manter uma nica origem.
Nota: Verifique se o Photoshop est definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar.
1. No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e execute um dos
procedimentos a seguir:
Clique no boto Editar no Inspetor de propriedades da imagem.
Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma imagem, escolha Editar
original com no menu de contexto e, em seguida, escolha Photoshop.
Nota: Esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem
PSD. Voc tambm pode definir o Photoshop como o editor padro para os tipos de arquivo JPEG, GIF e PNG.
2. Editar o arquivo no Photoshop.
3. Retorne ao Dreamweaver e cole a imagem ou seleo atualizada em sua pgina.
Para reotimizar a imagem a qualquer momento, selecione-a e clique no boto Editar configuraes de imagem no Inspetor de propriedades.
Para o incio
Ao criar um Objeto Inteligente ou colar uma seleo do Photoshop, o Dreamweaver exibe a caixa de dilogo Visualizao da imagem . (O
Dreamweaver tambm exibe esta caixa de dilogo para qualquer outro tipo de imagem, se voc selecionar a imagem e clicar no boto Editar
configuraes de imagem no Inspetor de propriedades.) Esta caixa de dilogo possibilita definir e visualizar as configuraes para imagens
habilitadas para a Web usando a combinao correta de cor, compactao e qualidade.
Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparncia, independentemente
do sistema ou do navegador usado pelo visualizador. Em geral, as configuraes afetam a qualidade e o tamanho do arquivo.
Nota: Apenas a verso importada do arquivo de imagem afetada, independentemente das configuraes selecionadas. Os arquivos originais
PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados.
Predefinio Escolha a Predefinio mais adequada aos seus requisitos. O tamanho do arquivo da imagem muda de acordo com a predefinio
escolhida. Uma visualizao instantnea da imagem com a configurao aplicada exibida em segundo plano.
Por exemplo, para as imagens que devem ser exibidas com um alto grau da claridade, escolha PNG24 para fotos (detalhes ntidos). Selecione
GIF para imagens de fundo (padres) se voc estiver inserindo o padro que ser a imagem do fundo da pgina.
Quando uma predefinio selecionada, suas opes configurveis so exibidas. Para personalizar ainda mais suas configuraes de
otimizao, modifique os valores dessas opes.
Para o incio
Sobre imagens
H vrios tipos diferentes de formatos de arquivos grficos, mas trs formatos so geralmente usados nas pginas da Web: GIF, JPEG e PNG. Os formatos de arquivo GIF
e JPEG so os mais aceitos e podem ser exibidos pela maioria dos navegadores.
GIF (Graphic Interchange Format) Os arquivos GIF usam um mximo de 256 cores e so mais adequados para a exibio de imagens em tom
no contnuo ou imagens grandes de cores simples, como barras de navegao, botes, cones, logotipos ou outras imagens com cores e tons
uniformes.
JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG o formato preferido para imagens fotogrficas ou em tom contnuo,
pois os arquivos JPEG podem conter milhes de cores. medida que a qualidade de um arquivo JPEG aumenta, tambm aumentam o tamanho
e o tempo de download do arquivo. Voc geralmente consegue um bom equilbrio entre a qualidade da imagem e o tamanho do arquivo
compactando um arquivo JPEG.
PNG (Portable Network Group) O formato de arquivo PNG um substituto sem patentes para GIFs que inclui suporte a imagens true-color, em
tons de cinza e de cores indexadas, alm de suporte a canal alfa para transparncia. PNG o formato de arquivo nativo do Adobe Fireworks.
Os arquivos PNG retm todas as informaes originais de camada, vetor, cor e efeitos (como sombras) e todos os elementos so completamente
editveis, continuamente. Os arquivos devem ter a extenso .png para serem reconhecidos como arquivos PNG pelo Dreamweaver.
Para o incio
Quando voc insere uma imagem em um documento do Dreamweaver, uma referncia ao arquivo de imagem gerada no cdigo-fonte HTML.
Para garantir que essa referncia est correta, o arquivo de imagem deve estar no site atual. Caso contrrio, o Dreamweaver perguntar se voc
deseja copiar o arquivo para o site.
Voc tambm pode inserir imagens dinamicamente. As imagens dinmicas so aquelas que mudam frequentemente. Por exemplo, os sistemas
de rotao de banners de propaganda precisam selecionar aleatoriamente um banner em uma lista de banners possveis e exibir dinamicamente
a imagem do banner selecionada quando uma pgina solicitada.
Aps inserir uma imagem, voc poder definir os atributos de acessibilidade de tag de imagem que podem ser lidos pelos leitores de tela para
usurios com deficincias visuais. Esses atributos podem ser editados no cdigo HTML.
Para obter um tutorial sobre como inserir imagens, consulte www.adobe.com/go/vid0148_br.
1. Coloque o ponto de insero no local da janela Documento em que a imagem deve aparecer e siga um destes procedimentos:
Na categoria Comum do painel Inserir, clique no cone Imagens
Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem. Com o cone Imagem exibido no painel
Inserir, arraste-o para a janela Documento (ou a janela Visualizao de cdigo, caso voc esteja trabalhando no cdigo).
Selecione Inserir > Imagem.
Arraste uma imagem do painel Ativos (Janela > Ativos) para o local desejado na janela Documento e v para a etapa 3.
Arraste uma imagem do painel Arquivos para o local desejado na janela Documento e v para a etapa 3.
Arraste uma imagem da rea de trabalho para o local desejado na janela Documento e v para a etapa 3.
2. Na caixa de dilogo exibida, siga um destes procedimentos:
Selecione Sistema de arquivos para escolher um arquivo de imagem.
1. Selecione Janela > Propriedades para exibir o Inspetor de propriedades de uma imagem selecionada.
2. Na caixa de texto abaixo da imagem em miniatura, digite um nome com o qual voc se referir imagem ao usar um comportamento do
Dreamweaver (como Trocar imagem) ou ao usar uma linguagem de script como JavaScript ou VBScript.
3. Defina qualquer uma das opes de imagem.
L e A A largura e a altura da imagem, em pixels. O Dreamweaver atualiza automaticamente essas caixas de texto com as dimenses
originais da imagem quando voc insere uma imagem em uma pgina.
Se voc definir valores L e A que no correspondam largura e altura reais da imagem, esta pode no ser exibida corretamente em um
navegador. (Para restaurar os valores originais, clique nos rtulos de caixa de texto L e A ou no boto Redefinir tamanho da imagem
exibido direita das caixas de texto L e A quando voc digita um novo valor.)
Nota: Voc pode alterar esses valores para dimensionar o tamanho de exibio desta ocorrncia da imagem, mas isso no reduz o tempo
de download, pois o navegador baixa todos os dados da imagem antes do seu dimensionamento. Para reduzir o tempo de download e
garantir que todas as ocorrncias de uma imagem aparecero do mesmo tamanho, use o aplicativo de edio de imagens para dimensionar
as imagens.
Origem Especifica o arquivo de origem da imagem. Clique no cone de pasta para navegar at o arquivo de origem ou digite o caminho.
Link Especifica um hiperlink para a imagem. Arraste o cone Apontar para arquivo para um arquivo do painel Arquivos, clique no cone de
pasta para ir at um documento no site ou digite manualmente o URL.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram
definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que usam sintetizadores de fala com
navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparece quando o ponteiro est
sobre a imagem.
Ferramentas Nome do mapa e Ponto ativo Permite identificar e criar um mapa de imagens do cliente.
Alvo Especifica o quadro ou a janela em que a pgina vinculada ser carregada. (Esta opo no est disponvel quando a imagem no
est vinculada a outro arquivo.) Os nomes de todos os quadros do conjunto de quadros atuais aparecem na lista Destino. Voc tambm
pode escolher entre os nomes de destino reservados:
_blank carrega o arquivo vinculado em uma nova janela do navegador no nomeada.
_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se o quadro que contm o
link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral.
_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no necessrio
especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
Editar Inicia o editor de imagens especificado nas preferncias de editores externos e abre a imagem selecionada.
Atualizar do original
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em
vermelho. Quando voc seleciona a imagem da Web na Visualizao de design e clica no boto Atualizar do original no Inspetor de
propriedades, a imagem atualizada automaticamente, refletindo todas as alteraes feitas no arquivo original do Photoshop.
Editar configuraes da imagem
Cortar
Nova amostra
Brilho e contraste
Nitidez
Abre a caixa de dilogo Visualizao de imagem e possibilita que voc otimize a imagem.
Faz uma nova amostra de uma imagem redimensionada, aprimorando sua qualidade no seu novo tamanho e forma.
Ajusta as configuraes de brilho e contraste de uma imagem.
Para o incio
Voc pode redimensionar visualmente elementos como imagens, plug-ins, arquivos Shockwave ou SWF, applets e controles ActiveX no
Dreamweaver.
O redimensionamento visual de uma imagem ajuda voc a ver como a imagem afeta o layout em diferentes dimenses, mas no dimensiona o
arquivo de imagem nas propores especificadas. Se voc redimensionar visualmente uma imagem no Dreamweaver sem usar um aplicativo de
edio de imagens (como o Adobe Fireworks) para dimensionar o arquivo de imagem para o tamanho desejado, o navegador do usurio
dimensionar a imagem quando a pgina for carregada. Isso pode ocasionar um atraso no tempo de download da pgina e a exibio
inadequada da imagem no navegador do usurio. Para reduzir o tempo de download e garantir que todas as ocorrncias de uma imagem
aparecero do mesmo tamanho, use o aplicativo de edio de imagens para dimensionar as imagens.
Ao redimensionar uma imagem no Dreamweaver, voc poder fazer uma nova amostra para acomodar suas novas dimenses. A nova amostra
adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao mximo aparncia da imagem
original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download.
Nota: Voc no pode criar uma nova amostra de alocadores de espao de imagem ou elementos que no sejam imagens de bitmap.
Para o incio
Um alocador de espao de imagem um grfico utilizado at que a arte final esteja pronta para ser adicionada a uma pgina da Web. Voc pode
definir o tamanho e a cor do alocador de espao, bem como fornecer um rtulo de texto a ele.
1. Na janela Documento, coloque o ponto de insero no local em que deseja inserir um grfico de alocador de espao.
2. Selecione Inserir > Objetos de imagem > Alocador de espao de imagem..
3. Em Nome (opcional), digite o texto que deve aparecer como rtulo no alocador de espao de imagem. Deixe a caixa de texto em branco
caso no deseje que o rtulo aparea. O nome deve comear com uma letra e pode conter apenas letras e nmeros. No so permitidos
espaos e caracteres ASCII maisculos.
4. Em Largura e Altura (obrigatrio), digite um nmero para definir o tamanho da imagem em pixels.
5. Em Cor (opcional), siga um destes procedimentos para aplicar uma cor:
Use o seletor de cores para selecionar uma cor.
Digite o valor hexadecimal da cor (por exemplo, #FF0000).
Digite um nome de cor aceita pela Web (por exemplo, vermelho).
6. Em Texto alternativo (opcional), digite um texto que descreva a imagem para os visualizadores que usam um navegador somente texto.
Nota: Uma tag de imagem inserida automaticamente no cdigo HTML que contm um atributo src vazio.
7. Clique em OK.
A cor, os atributos de tamanho e o rtulo do alocador de espao de imagem aparecem da seguinte maneira:
Para o incio
Um alocador de espao de imagem no exibe uma imagem em um navegador. Antes de publicar o site, voc deve substituir qualquer alocador de
espao de imagem adicionado com arquivos de imagem para Web, como GIFs ou JPEGs.
Se voc tiver o Fireworks, poder criar um novo grfico no alocador de espao de imagem do Dreamweaver. A nova imagem definida para o
mesmo tamanho da imagem do alocador de espao. Voc pode editar a imagem e substitu-la no Dreamweaver.
1. Na janela Documento, siga um destes procedimentos:
Clique duas vezes no alocador de espao de imagem.
Clique no alocador de espao de imagem para selecion-lo. Em seguida, no Inspetor de propriedades (Janela > Propriedades), clique
Para o incio
Para definir as propriedades de um alocador de espao de imagem, selecione o alocador de espao na janela Documento. Em seguida, selecione
Janela > Propriedades para exibir o Inspetor de propriedades. Para ver todas as propriedades, clique na seta de expanso no canto inferior
direito.
Use o Inspetor de propriedades para definir um nome, uma largura, uma altura, uma origem de imagem, uma descrio de texto alternativo, um
alinhamento e uma cor para uma imagem de alocador de espao.
No Inspetor de propriedades do alocador de espao, a caixa de texto cinza e a caixa de texto Alinhar esto desativadas. Voc pode definir essas
propriedades no Inspetor de propriedades de imagem ao substituir o alocador de espao por uma imagem.
Defina uma das seguintes opes:
L e A Defina a largura e a altura do alocador de espao de imagem em pixels.
Origem Especifica o arquivo de origem da imagem. Em uma imagem de alocador de espao, esta caixa de texto aparece vazia. Clique no
boto Procurar para selecionar uma imagem substituta para o grfico de alocador de espao.
Link Especifica um hiperlink para o alocador de espao de imagem. Arraste o cone Apontar para arquivo para um arquivo do painel
Arquivos, clique no cone de pasta para ir at um documento no site ou digite manualmente o URL.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram
definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que usam sintetizadores de fala com
navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparece quando o ponteiro est
sobre a imagem.
Criar Inicia o Fireworks para criar uma imagem substituta. O boto Criar estar desativado, a menos que o Fireworks tambm esteja
instalado no seu computador.
Atualizar do original
Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em
vermelho. Quando voc seleciona a imagem da Web na Visualizao de design e clica no boto Atualizar do original no Inspetor de
propriedades, a imagem atualizada automaticamente, refletindo todas as alteraes feitas no arquivo original do Photoshop.
Cor Especifica uma cor para o alocador de espao de imagem.
Para o incio
Voc pode fazer uma nova amostra, cortar, otimizar e ajustar a nitidez de imagens no Dreamweaver. Voc tambm pode ajustar o brilho e o
contraste.
uma resoluo mais baixa, sempre ocasiona perda de dados e geralmente uma diminuio da qualidade.
Cortar Edite imagens reduzindo a rea da imagem. Geralmente, voc precisar cortar uma imagem para dar mais nfase ao assunto e
remover aspectos indesejados referentes ao ponto de interesse da imagem.
Brilho e contraste Modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma
imagem. Voc geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.
Nitidez Ajusta o enfoque de uma imagem aumentando o contraste das bordas localizadas na imagem. Quando voc digitaliza uma imagem
ou tira uma foto digital, a ao padro da maioria dos softwares de captura de imagem suavizar as bordas dos objetos na imagem. Isso
impede que os detalhes extremamente finos se percam nos pixels em que as imagens digitais so compostas. No entanto, para ressaltar os
detalhes nos arquivos de imagem digital, geralmente necessrio ajustar a nitidez da imagem, aumentando o contraste da borda e tornando
a imagem mais ntida.
Nota: Os recursos de edio de imagens do Dreamweaver aplicam-se somente a formatos de arquivo de imagem JPEG, GIF e PNG. Os
outros formatos de arquivo de imagem bitmap no podem ser editados atravs desses recursos de edio de imagens.
Brilho/contraste modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem.
Voc geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.
1. Abra a pgina que contm a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos:
Clique no boto
Brilho/contraste no Inspetor de propriedades de imagem.
Selecione Modificar > Imagem > Brilho/contraste.
2. Arraste os controles deslizantes de brilho e contraste para ajustar as configuraes. A faixa de valores varia de -100 a 100.
3. Clique em OK.
Para o incio
Voc pode inserir imagens de sobreposio na pgina. Uma sobreposio uma imagem que, quando visualizada em um navegador, alterada
quando o ponteiro se move sobre ela.
Voc deve ter duas imagens para criar a sobreposio: uma imagem primria (a imagem exibida quando a pgina carregada pela primeira vez)
e uma imagem secundria (a imagem que aparece quando o ponteiro se move sobre a imagem primria). As duas imagens em uma
sobreposio devem ter o mesmo tamanho. Caso contrrio, o Dreamweaver redimensiona a segunda imagem de modo que corresponda s
propriedades da primeira imagem.
As imagens de sobreposio so automaticamente definidas para responder ao evento onMouseOver. Voc pode definir uma imagem para
responder a um evento diferente (por exemplo, um clique de mouse) ou alterar uma imagem de sobreposio.
Para obter um tutorial sobre como criar sobreposies, consulte www.adobe.com/go/vid0159_br.
1. Na janela Documento, coloque o ponto de insero no local em que a sobreposio deve aparecer.
2. Insira a sobreposio usando um destes mtodos:
Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem de sobreposio. Com o cone Imagem de
sobreposio exibido no painel Inserir, voc pode arrastar o cone para a janela Documento.
Selecione Inserir > Objetos de imagem > Imagem de sobreposio.
3. Defina as opes e clique em OK.
Nome da imagem O nome da imagem de sobreposio.
Imagem original A imagem a ser exibida quando a pgina for carregada. Digite o caminho na caixa de texto ou clique em Procurar e
selecione a imagem.
Imagem de sobreposio A imagem a ser exibida quando o ponteiro movido sobre a imagem original. Digite o caminho ou clique em
Procurar para selecionar a imagem.
Pr-carregar imagem de sobreposio Pr-carrega as imagens no cache do navegador para que no ocorra nenhum atraso quando o
usurio mover o ponteiro sobre a imagem.
Texto alternativo (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto.
Ao clicar, Ir para URL O arquivo que voc deseja abrir quando um usurio clica na imagem de sobreposio. Digite o caminho ou clique
em Procurar e selecione o arquivo.
Nota: Se voc no definir um link para a imagem, o Dreamweaver inserir um link nulo (#) no cdigo-fonte HTML ao qual o
comportamento de sobreposio anexado. Se voc remover o link nulo, a imagem de sobreposio no funcionar mais.
4. Selecione Arquivo > Visualizar no navegador ou pressione F12.
5. No navegador, mova o ponteiro sobre a imagem original para ver a imagem de sobreposio.
Nota: No possvel ver o efeito de uma imagem de sobreposio na Visualizao de design.
Para o incio
Enquanto estiver no Dreamweaver, voc poder abrir uma imagem selecionada em um editor externo de imagens. Ao retornar ao Dreamweaver
aps salvar o arquivo de imagens editado, qualquer alterao feita na imagem estar visvel na janela Documento.
Voc pode configurar o Fireworks como seu editor externo principal. Tambm possvel definir quais tipos de arquivo um editor abrir e
selecionar vrios editores de imagem. Por exemplo, voc pode definir preferncias para iniciar o Fireworks quando precisar editar um GIF e iniciar
outro editor de imagens quando precisar editar um JPG ou JPEG.
Para o incio
Voc pode aplicar qualquer comportamento disponvel a uma imagem ou ponto ativo de imagem. Quando voc aplica um comportamento a um
ponto ativo, o Dreamweaver insere o cdigo-fonte HTML na tag area. Os trs comportamentos se aplicam especificamente a imagens: Prcarregar imagens, Trocar imagens e Restaurar imagem trocada.
Pr-carregar imagens Carrega imagens que no aparecem na pgina imediatamente (como aquelas que sero trocadas por comportamentos,
elementos PA ou JavaScript) no cache de navegador. Isso evita atrasos ocasionados por download quando as imagens devem aparecer.
Trocar imagem Troca uma imagem por outra alterando o atributo SRC da tag img. Use esta ao para criar sobreposies de boto e outros
efeitos de imagem (incluindo a troca de mais de uma imagem simultaneamente).
Restaurar imagem trocada Restaura o ltimo conjunto de imagens trocadas para os arquivos de origem anteriores. Esta ao adicionada
automaticamente sempre que voc anexa a ao Trocar imagem a um objeto por padro. Voc nunca precisar selecion-la manualmente.
Voc tambm pode usar comportamentos para criar sistemas de navegao mais sofisticados, como menus de salto.
Para o incio
O AIR Extension para Dreamweaver o ajuda a criar aplicativos ricos da Internet para o desktop. Por exemplo, voc pode ter um conjunto de
pginas da Web que interagem uma com a outra para exibir dados XML. Voc pode usar o Adobe AIR Extension para Dreamweaver para
compactar esse conjunto de pginas em um pequeno aplicativo que pode ser instalado no computador de um usurio. Quando o usurio executar
o aplicativo a partir do desktop, o aplicativo ser carregado e exibir o prottipo na sua prpria janela, independentemente de um navegador. O
usurio pode ento procurar o site localmente no seu computador, sem uma conexo com a Internet.
Pginas dinmicas, como pginas do Adobe ColdFusion e pginas PHP no so executadas em Adobe AIR. O tempo de execuo funciona
apenas com HTML e JavaScript. No entanto, voc pode usar JavaScript em suas pginas para chamar qualquer servio da Web exposto na
Internet, incluindo os servios ColdFusion ou gerados por PHP, com mtodos Ajax, como XMLHTTPRequest ou APIs especficas do Adobe AIR.
Requisitos do sistema
Para usar o Adobe AIR Extension para Dreamweaver, o software a seguir dever ser instalado e adequadamente configurado:
Dreamweaver CS3 ou posterior
Adobe Extension Manager CS3 ou posterior
Java JRE 1.4 ou posterior (necessrio para criao do arquivo Adobe AIR). O Java JRE est disponvel em http://java.sun.com/.
Os requisitos precedentes existem apenas para criao e visualizao de aplicativos Adobe AIR no Dreamweaver. Para instalar e executar
um aplicativo Adobe AIR no desktop, necessrio tambm instalar o Adobe AIR no computador. Para baixar o tempo de execuo, consulte
www.adobe.com/go/air_br.
Para o incio
Para criar um aplicativo AIR baseado em HTML no Dreamweaver, voc seleciona um site existente para compactar como um aplicativo AIR.
1. Certifique-se de que as pginas da Web que deseja compactar em um aplicativo estejam contidas em um site definido do Dreamweaver.
2. No Dreamweaver, abra a pgina inicial do conjunto de pginas que deseja compactar.
3. Selecione Site > Configuraes do aplicativo AIR.
4. Conclua a caixa de dilogo Configuraes do aplicativo AIR e do instalador e clique em Criar arquivo AIR.
Para obter mais informaes, consulte as opes da caixa de dilogo listadas a seguir.
Na primeira vez que voc cria um arquivo Adobe AIR, o Dreamweaver cria um arquivo aplicativo.xml na pasta raiz do site. Esse arquivo
serve como um manifesto, definindo vrias propriedades do aplicativo.
A seguir, h uma descrio das opes na caixa de dilogo Configuraes do aplicativo AIR e do instalador:
Nome do arquivo do aplicativo o nome usado para o arquivo executvel do aplicativo. Por padro, a extenso usa o nome do site do
Dreamweaver para nomear o arquivo. Voc pode alterar o nome, se preferir. No entanto, no nome deve conter apenas caracteres vlidos
para nomes de arquivos ou de pastas. (Ou seja, pode conter apenas caracteres ASCII e no pode terminar com um ponto.) Essa
configurao obrigatria.
Nome do aplicativo o nome que exibido nas telas de instalao quando os usurios instalam o aplicativo. Novamente, a extenso
especifica o nome do site do Dreamweaver por padro. Essa configurao no tem restries de caractere e no obrigatria.
ID do aplicativo identifica o aplicativo com uma ID exclusiva. Voc pode alterar a ID padro se preferir. No use espaos ou caracteres
especiais no ID. Os nicos caracteres vlidos so 0-9, a-z, A-Z, . (ponto) e - (trao). Essa configurao obrigatria.
Verso especifica o nmero da verso do aplicativo. Essa configurao obrigatria.
Contedo inicial especifica a pgina inicial do aplicativo. Clique no boto Navegar para navegar para a pgina inicial e selecion-la. O
arquivo escolhido deve residir dentro da pasta raiz do site. Essa configurao obrigatria.
Descrio permite especificar uma descrio do aplicativo a ser exibida quando o usurio instalar o aplicativo.
Copyright permite especificar um copyright que exibido nas informaes em Sobre para aplicativos Adobe AIR instalados no Macintosh.
Essas informaes no so usadas para aplicativos instalados no Windows.
Estilo da janela especifica o estilo da janela (ou cromo) que ser utilizado na interface de usurio quando o usurio executar o aplicativo
no computador. O Cromo do sistema rodeia o aplicativo com o controle de janelas padro do sistema operacional. O Cromo personalizado
(opaco) elimina o cromo padro do sistema e permite criar um cromo do seu prprio aplicativo. (Voc cria o cromo personalizado
diretamente na pgina HTML compactada.) O cromo personalizado (transparente) como o cromo personalizado (opaco), mas adiciona
recursos transparentes s bordas da pgina, permitindo janelas de aplicativo no retangulares.
Tamanho da janela especifica as dimenses da janela do aplicativo quando ela aberta.
cone permite selecionar imagens personalizadas para os cones de aplicativos. (As imagens padro so imagens Adobe AIR que vm com
a extenso.) Para usar imagens personalizadas, clique no boto Selecionar imagens de cones. Na caixa de dilogo Imagens de cones que
exibida, clique na pasta para cada tamanho de cone e selecione o arquivo de imagem que utilizar. o AIR oferece suporte a arquivos
PNG de imagens de cones de aplicativos.
Nota: As imagens personalizadas selecionadas devem residir no site do aplicativo e seus caminhos devem ser relativos raiz do site.
Tipos de arquivos associados permite associar tipos de arquivos ao seu aplicativo. Para obter mais informaes, consulte a seo a
seguir.
Atualizaes de aplicativos determina se o instalador de aplicativo do Adobe AIR ou o prprio aplicativo executa atualizaes para novas
verses dos aplicativos Adobe AIR. A caixa de seleo marcada por padro, o que faz com que o instalador de aplicativo do Adobe AIR
execute atualizaes. Se quiser que seu aplicativo execute suas prprias atualizaes, desmarque a caixa de seleo. Tenha em mente
que se desmarcar a caixa de seleo, voc precisar escrever um aplicativo que execute atualizaes.
Arquivos includos especifica quais arquivos ou pastas sero includos no aplicativo. Voc pode adicionar arquivos HTML e CSS, arquivos
de imagem e arquivos de bibliotecas JavaScript. Clique no boto de adio (+) para adicionar arquivos e no cone de pasta para adicionar
pastas. No inclua certos arquivos como as_mmServerScripts, _notes, e assim por diante. Para excluir um arquivo ou uma pasta da lista,
selecione o arquivo ou a pasta e clique no boto de subtrao (-).
Assinatura digital Clique em Definir para assinar o aplicativo com uma assinatura digital. Essa configurao obrigatria. Para obter mais
informaes, consulte a seo a seguir.
Pasta de menu do programa especifica um subdiretrio no menu Iniciar do Windows em que voc deseja que o atalho do aplicativo seja
criado. (No aplicvel no Macintosh.)
Destino especifica onde salvar o novo instalador de aplicativos (arquivo .air). O local padro a raiz do site. Clique no boto Procurar para
selecionar um local diferente. O nome de arquivo padro se baseia no nome do site, com uma extenso .air adicionada. Essa configurao
obrigatria.
A seguir h um exemplo da caixa de dilogo com algumas opes bsicas definidas:
Para o incio
Uma assinatura digital fornece a garantia de que o cdigo de um aplicativo no foi alterado ou corrompido desde a sua criao pelo autor do
software. Todos os aplicativos Adobe AIR exigem uma assinatura digital e no podem ser instalados sem ela. Voc pode assinar o aplicativo com
um certificado digital comprado, criar seu prprio certificado ou preparar um arquivo Adobe AIRI (um arquivo intermedirio Adobe AIR) que voc
assinar posteriormente.
1. Na caixa de dilogo Configuraes do aplicativo e do instalador AIR, clique no boto Definir, ao lado da opo Assinatura digital.
2. Na caixa de dilogo Assinatura digital, siga um destes procedimentos:
Para assinar um aplicativo com um certificado digital pr-adquirido, clique no boto Procurar, selecione o certificado, insira a senha
correspondente e clique em OK.
Para criar o seu prprio certificado digital autoassinado, clique no boto Criar e preencha a caixa de dilogo. A opo de tipo de
certificado refere-se ao nvel de segurana: 1024-RSA usa uma chave de 1024 bits (menos segura) e 2048-RSA usa uma chave de
2048 bits (mais segura). Quando terminar, clique em OK. Em seguida, insira a senha correspondente na caixa de dilogo Assinatura
digital e clique em OK.
Selecione Preparar um pacote AIRI que ser assinado posteriormente e clique em OK. Essa opo permite criar um aplicativo AIR
intermedirio (AIRI) sem uma assinatura digital. Um usurio no consegue instalar o aplicativo, no entanto, at voc adicionar uma
assinatura digital.
Por padro, o Adobe AIR Extension para Dreamweaver obtm um carimbo de data e hora ao criar um aplicativo Adobe AIR. Voc pode, no
entanto, desativar o carimbo de data e hora desfazendo a seleo da opo Carimbo de data e hora na caixa de dilogo Assinatura digital.
(Recomendamos fazer isso, por exemplo, se um servio de carimbo de data e hora no estiver disponvel.) A Adobe recomenda que todos os
arquivos AIR publicamente distribudos incluam um carimbo de data e hora.
A autoridade de carimbo de data e hora padro usada pelas ferramentas de compactao do AIR o Geotrust. Para obter mais informaes
sobre o carimbo de data/hora e os certificados digitais, consulte Assinatura digital do arquivo AIR.
Para o incio
Voc pode associar diferentes tipos de arquivos com o aplicativo Adobe AIR. Por exemplo, se quiser tipos de arquivos com uma extenso .avf
para abrir no Adobe AIR quando um usurio clicar duas vezes neles, voc poder adicionar a extenso .avf lista de tipos de arquivos
associados.
1. Na caixa de dilogo Configuraes do aplicativo e do instalador AIR, clique no boto Editar lista, ao lado da opo Tipos de arquivos
associados.
2. Na caixa de dilogo Tipos de arquivos associados, siga um destes procedimentos:
Selecione um tipo de arquivo e clique no boto menos (-) para excluir o tipo de arquivo.
Clique no boto mais (+) para adicionar um tipo de arquivo.
Se clicar no boto mais para adicionar um tipo de arquivo, a caixa de dilogo Configuraes de tipo de arquivo ser exibida. Conclua a
caixa de dilogo e clique em OK para fech-la.
A seguir est uma lista de opes:
Nome especifica o nome do tipo de arquivo que aparece na lista Tipos de arquivos. Essa opo obrigatrio e pode incluir apenas
caracteres ASCII alfanumricos (a-z, A-Z, 0-9) e pontos (por exemplo, adobe.VideoFile). O nome deve ser iniciado com uma letra. O
tamanho mximo de 38 caracteres.
Extenso especifica a extenso do tipo de arquivo. No inclui um ponto antes da extenso. Essa opo obrigatria e pode incluir
apenas caracteres ASCII alfanumricos (a-z, A-Z, 0-9). O tamanho mximo de 38 caracteres.
Descrio permite especificar uma descrio opcional para o tipo de arquivo.
Tipo de contedo especifica o tipo MIME ou tipo de mdia para o arquivo (por exemplo texto/html, imagem/gif, e assim por diante).
Locais de arquivos de cones permite selecionar imagens personalizadas para os tipos de arquivos associados. (As imagens padro
so imagens Adobe AIR que vm com a extenso).
Para o incio
Para o incio
Voc pode visualizar uma pgina HTML no Dreamweaver da maneira que ela apareceria em um aplicativo Adobe AIR. A visualizao til
quando voc quer ver como uma pgina da Web ser no aplicativo sem ter que criar todo o aplicativo.
Na barra de ferramentas do documento, clique no boto Visualizar/depurar no navegador e selecione Visualizar em AIR.
Voc tambm pode pressionar Ctrl+Shift+F12 (Windows) ou Cmd+Shift+F12 (Macintosh).
Para o incio
O Adobe AIR Extension para Dreamweaver tambm adiciona dicas de cdigo e a codificao por cores para os elementos de linguagem do
Adobe AIR na Visualizao de cdigo no Dreamweaver.
Abra um arquivo HTML ou JavaScript na Visualizao de cdigo e insira o cdigo do Adobe AIR.
Nota: O mecanismo de dicas de cdigo funciona apenas entre tags <script> ou em arquivos .js.
Para obter mais informaes sobre os elementos de linguagem do Adobe AIR, consulte a documentao do desenvolvedor no resto deste guia.
Para o incio
O Adobe AIR Extension adiciona um item ao menu de ajuda do Dreamweaver que permite acessar aplicativos AIR em desenvolvimento com
HTML e Ajax.
Para o incio
Photoshop, Fireworks e Flash so ferramentas avanadas de desenvolvimento da Web para criao e gerenciamento de arquivos grficos e SWF.
Voc pode integrar o Dreamweaver nessas ferramentas para simplificar seu fluxo de trabalho de design da Web.
Nota: H tambm um integrao limitada com alguns outros aplicativos. Por exemplo, possvel exportar um arquivo do InDesign como XHTML
e continuar trabalhando com ele no Dreamweaver. Para assistir a um tutorial sobre esse fluxo de trabalho, consulte
www.adobe.com/go/vid0202_br.
Voc pode inserir facilmente imagens e contedo criados com o Adobe Flash (arquivos SWF e FLV) em um documento do Dreamweaver. Voc
tambm pode editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um documento do Dreamweaver.
Nota: Para usar o Dreamweaver junto com esses aplicativos da Adobe, necessrio instalar esses aplicativos no seu computador.
Para Fireworks e Flash, a integrao entre produtos obtida atravs de edio completa. A edio Roundtrip assegura que as atualizaes de
cdigo sejam transferidas corretamente entre o Dreamweaver e esses outros aplicativos (por exemplo, para preservar os comportamentos de
sobreposio ou os links para outros arquivos).
O Dreamweaver tambm se baseia nas Design Notes para integrao entre produtos. Design Notes so pequenos arquivos que permitem que o
Dreamweaver localize o documento de origem de uma imagem ou de um arquivo SWF exportados. Ao exportar arquivos do Fireworks, do Flash
ou do Photoshop diretamente para um site definido do Dreamweaver, as Design Notes que contm referncias ao arquivo de criao PSD, PNG
ou do Flash (FLA) original so exportadas automaticamente para o site junto com o arquivo habilitado para a Web (GIF, JPEG, PNG ou SWF).
Alm das informaes sobre o local, as Design Notes contm outras informaes pertinentes sobre os arquivos exportados. Por exemplo, ao
exportar uma tabela do Fireworks, o Fireworks grava uma Design Note para cada arquivo de imagem exportado da tabela. Se o arquivo
exportado tiver pontos ativos ou sobreposies, as Design Notes incluiro informaes sobre seus scripts.
Como parte da operao de exportao, o Dreamweaver cria a pasta named _notes na mesma pasta do ativo exportado. Essa pasta contm as
Design Notes que o Dreamweaver precisa para ser integrado no Photoshop, no Flash ou no Fireworks.
Nota: Para usar as Design Notes, verifique se elas no esto desativadas para o site do Dreamweaver. Elas esto ativadas por padro. No
entanto, mesmo se estiverem desativadas, quando um arquivo de imagem do Photoshop for inserido, o Dreamweaver criar uma Design Note
para armazenar o local do arquivo PSD de origem.
Para assistir a um tutorial sobre a integrao do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0188_br.
Para assistir a um tutorial sobre a integrao do Dreamweaver e do Photoshop, consulte www.adobe.com/go/lrvid4043_dw_br.
Mais tpicos da Ajuda
Tutorial do Dreamweaver e do InDesign
Extenses
Adicionar e gerenciar extenses no Dreamweaver
Para o incio
As extenses so novos recursos que podem ser adicionados facilmente ao Dreamweaver. Voc pode usar muitos tipos de extenses; por
exemplo, existem extenses que permitem reformatar tabelas, conectar-se com bancos de dados back-end ou ajudar a gravar scripts para
navegadores.
Nota: Para instalar extenses s quais todos os usurios tenham acesso em um sistema operacional de vrios usurios, voc deve estar
conectado como Administrador (Windows) ou root (Mac OS X).
Para encontrar as extenses mais recentes para o Dreamweaver, acesse o site do Adobe Exchange em
www.adobe.com/go/dreamweaver_exchange_br. No site, voc poder acessar e baixar extenses (muitas so gratuitas), participar de grupos de
discusso, visualizar classificaes e comentrios de usurios e instalar e usar o Extension Manager. necessrio instalar o Extension Manager
antes de instalar as extenses.
O Extension Manager um aplicativo separado que permite instalar e gerenciar extenses nos aplicativos da Adobe. Inicie o Extension Manager
a partir do Dreamweaver escolhendo Comandos > Gerenciar extenses.
1. No site do Adobe Exchange, clique no link de download de uma extenso.
O navegador talvez pergunte se voc deseja abrir e instalar o aplicativo diretamente do site ou salv-lo no disco.
Se voc optar por abrir a extenso diretamente do site, o Extension Manager far a instalao automaticamente.
Se voc optar por salvar a extenso no disco, um bom local para salvar o arquivo do pacote de extenso (.mxp) a pasta Downloaded
Extensions na pasta do aplicativo Dreamweaver no seu computador.
2. Clique duas vezes no arquivo do pacote de extenso ou abra o Extension Manager e selecione Arquivo > Instalar extenso. Algumas
extenses s podero ser acessadas quando o aplicativo for reiniciado.
Nota: Use o Extension Manager para remover extenses ou obter mais informaes sobre uma extenso.
Mais tpicos da Ajuda
Para o incio
O Adobe Contribute CS4 combina um navegador da Web e um editor de pginas da Web. Ele permite que seus colegas de trabalho ou
clientes naveguem at uma pgina em um site que voc tenha criado para edit-la ou atualiz-la, caso eles tenham permisso para faz-lo. Os
usurios do Contribute podem adicionar e atualizar contedo bsico da Web, inclusive texto formatado, imagens, tabelas e links. Os
administradores do site do Contribute podem limitar as aes que os usurios comuns (no administradores) podem executar em um site.
Nota: Este tpico pressupe que voc seja um administrador do Contribute.
Como administrador do site, voc permite que os no administradores editem pginas criando uma chave de conexo e enviando-a a esses
usurios (para informar-se sobre como fazer isso, consulte a Ajuda do Contribute). Voc tambm pode configurar uma conexo com um site do
Contribute usando o Dreamweaver, o que permite que voc ou o criador do site se conecte ao site do Contribute e use todos os recursos de
edio disponveis no Dreamweaver.
O Contribute confere funcionalidade ao site com o CPS (Contribute Publishing Server), um pacote de aplicativos de publicao e ferramentas de
gerenciamento de usurios que permite a integrao do Contribute com o servio de diretrios de usurios da empresa; por exemplo, protocolo
LDAP (Lightweight Directory Access Protocol) ou Active Directory. Quando voc ativa o site do Dreamweaver como um site do Contribute, o
Dreamweaver l as configuraes de administrao do Contribute sempre que voc se conecta ao site remoto. Se o Dreamweaver detecta que o
CPS est ativado, ele herda algumas funes do CPS, como a reverso de arquivos e o registro de eventos.
Voc pode usar o Dreamweaver para conectar-se a um arquivo no site do Contribute e modific-lo. A maioria dos recursos do Dreamweaver
funcionam com um site do Contribute da mesma forma que funcionam com qualquer outro site. Contudo, quando voc usa o Dreamweaver com
um site do Contribute, o Dreamweaver automaticamente realiza certas operaes de gerenciamento de arquivos, como salvar vrias revises de
um documento e registrar certos eventos no console do CPS.
Para obter mais informaes, consulte a Ajuda do Contribute.
Para o incio
Para que os usurios do Contribute possam editar seu site, lembre-se do seguinte ao estrutur-lo:
Simplifique a estrutura do site. No aninhe pastas em muitos nveis. Agrupe itens relacionados em uma pasta.
Configure as permisses apropriadas de leitura e gravao para pastas no servidor.
Adicione pginas de ndice ao criar pastas de forma a estimular os usurios do Contribute a inserir novas pginas nas pastas corretas. Por
exemplo, se os usurios do Contribute fornecem pginas que contm atas de reunio, crie uma pasta na pasta raiz do site denominada
atas_reunio, e crie uma pgina de ndice nessa pasta. Em seguida, crie um link da pgina principal do site para a pgina de ndice das
atas de reunio. O usurio do Contribute poder ento navegar at essa pgina de ndice e criar uma nova pgina de atas para
determinada reunio, com um link a partir dessa pgina.
Na pgina de ndice de cada pasta, coloque uma lista de links para as pginas de contedo e os documentos dessa pasta.
Mantenha os designs de pgina o mais simples possvel, sem formataes rebuscadas.
Use CSS em vez de tags HTML e nomeie seus estilos CSS com clareza. Se os usurios do Contribute usam um conjunto padro de estilos
no Microsoft Word, use os mesmos nomes para os estilos CSS para que o Contribute possa mapear os estilos quando o usurio copiar
informaes de um documento do Word e as colar em uma pgina do Contribute.
Para evitar que um estilo CSS fique disposio dos usurios do Contribute, altere o nome do estilo para que ele comece com mmhide_.
Por exemplo, se voc usa um estilo denominado RightJustified em uma pgina, mas no quer que os usurios do Contribute usem esse
estilo, renomeie o estilo como mmhide_RightJustified.
Nota: Voc tem que adicionar mmhide_ ao nome do estilo na Visualizao de cdigo; no pode faz-lo no painel CSS.
Use poucos estilos CSS para manter a aparncia simples e organizada.
Se voc usar incluses do servidor para elementos de pgina HTML, como cabealhos e rodaps, crie uma pgina HTML desvinculada que
contenha links para os arquivos de incluso. Os usurios do Contribute podero marcar essa pgina e us-la para navegar at os arquivos
de incluso e edit-los.
Para o incio
O Contribute usa um sistema bem parecido com o sistema de devoluo e retirada do Dreamweaver para que somente um usurio por vez possa
editar determinada pgina da Web. Quando voc ativa a compatibilidade do Contribute no Dreamweaver, o sistema de devoluo e retirada do
Dreamweaver automaticamente ativado.
Para transferir arquivos para dentro e fora de um site do Contribute usando o Dreamweaver, sempre use os comandos Retirar e Devolver. Se
voc usar os comandos COLOCAR e OBTER para transferir arquivos, correr o risco de sobregravar as modificaes que algum usurio do
Contribute tenha feito recentemente em um arquivo.
Quando voc retira um arquivo em um site do Contribute, o Dreamweaver faz uma cpia de backup da verso anterior retirada do arquivo na
pasta _baks e adiciona seu nome de usurio e uma data a um arquivo de Design Notes.
Para o incio
O Contribute proporciona um meio de gerenciar permisses de arquivos e pastas para cada funo de usurio que voc definir; contudo, o
Contribute no proporciona uma maneira de gerenciar permisses subjacentes de leitura e gravao atribudas a arquivos e pastas pelo servidor.
No Dreamweaver, possvel gerenciar essas permisses diretamente no servidor.
Se o usurio do Contribute no tiver acesso de leitura a um arquivo dependente no servidor, como uma imagem exibida em uma pgina, o
contedo do arquivo dependente no aparecer na janela do Contribute. Por exemplo, se o usurio no tem acesso de leitura a uma pasta de
imagens, as imagens dessa pgina aparecero como cones de imagem partida no Contribute. Da mesma forma, os modelos do Dreamweaver
so armazenados em uma subpasta da pasta raiz do site para que o usurio do Contribute no tenha acesso de leitura pasta raiz; ele no
poder usar os modelos, a no ser que voc os copie para uma pasta apropriada.
Quando voc configura um site do Dreamweaver, deve conceder aos usurios acesso de leitura pasta /_mm (a subpasta _mm da pasta raiz),
pasta /Templates e a todas as pastas do servidor que contm ativos que eles precisaro usar.
Ainda que, por motivos de segurana, voc no possa conceder acesso de leitura pasta /Templates, poder permitir que os usurios do
Contribute acessem os modelos. Consulte Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz.
Para obter mais informaes sobre permisses do Contribute, consulte Administrao do Contribute na Ajuda do Contribute.
Para o incio
O Contribute usa uma variedade de arquivos especiais que no devem ser visualizados pelos visitantes do site:
O arquivo de configuraes compartilhadas, que tem um nome de arquivo ofuscado com uma extenso CSI, aparece em uma pasta
chamada _mm na pasta raiz do site, e contm informaes que o Contribute utiliza para gerenciar o site.
Verses antigas de arquivos, em pastas denominadas _baks
Verses temporrias de pginas para que os usurios possam visualizar as alteraes
Arquivos de bloqueio temporrios que indicam que determinada pgina est sendo editada ou visualizada
Arquivos de Design Notes que contm metadados sobre pginas do site
Em geral, no recomendvel editar os arquivos especiais do Contribute usando o Dreamweaver; o Dreamweaver os gerencia
automaticamente.
Se voc no quiser que esses arquivos especiais do Contribute apaream no seu servidor acessvel publicamente, configure um servidor de
teste onde os usurios do Contribute trabalhem em pginas. Depois copie periodicamente essas pginas da Web do servidor de teste para
um servidor de produo que esteja na Web. Se voc adotar essa abordagem do servidor de teste, copie somente as pginas da Web para
o servidor de produo, e no os arquivos especiais do Contribute indicados acima. Em especial, no copie as pastas _mm e _baks para o
servidor de produo.
Nota: Para obter informaes sobre como configurar um servidor para que os visitantes no vejam os arquivos nas pastas que comeam
com um sublinhado, consulte "Segurana no site" na Ajuda do Contribute.
Ocasionalmente, convm excluir manualmente arquivos especiais do Contribute. Por exemplo, pode haver circunstncias em que o
Contribute no consegue excluir as pginas de visualizao temporrias depois que o usurio as visualiza. Nesse caso, preciso excluir
essas pginas temporrias manualmente. As pginas de visualizao temporrias tm nomes de arquivo que comeam com TMP.
Da mesma forma, em algumas circunstncias, um arquivo de bloqueio desatualizado pode permanecer acidentalmente no servidor. Se isso
acontecer, voc ter que excluir o arquivo de bloqueio manualmente para que outros usurios possam editar a pgina.
Para o incio
Se voc est preparando um site do Dreamweaver para usurios do Contribute, precisa ativar explicitamente a compatibilidade com o Contribute
para usar recursos a ele relacionados; o Dreamweaver no solicita que voc faa isso; contudo, quando voc se conecta a um site que tenha
sido configurado como um site do Contribute (que tem um administrador), o Dreamweaver solicita que voc ative a compatibilidade do Contribute.
Nem todos os tipos de conexo aceitam a compatibilidade do Contribute. Estas restries aplicam-se aos tipos de conexo:
Se sua conexo com o site remoto usar WebDAV, a compatibilidade do Contribute no poder ser ativada porque os sistemas de controle
de origem no so compatveis com Design Notes e sistemas de retirada e devoluo que o Dreamweaver utiliza para sites do Contribute.
Se voc usa RDS para se conectar ao site remoto, pode ativar a compatibilidade do Contribute mas precisa personalizar a conexo para
compartilh-la com usurios do Contribute.
Se voc no est usando o computador local como servidor Web, configure o site usando uma conexo por FTP ou rede com o computador
(em vez de um caminho de pasta local) para poder compartilhar a conexo com usurios do Contribute.
Quando voc ativa a compatibilidade do Contribute, o Dreamweaver automaticamente ativa as Design Notes (incluindo a opo Carregar Design
Notes para compartilhamento) e o sistema de retirada/devoluo.
Se o servidor CPS (Contribute Publishing Server) estiver ativado no site remoto ao qual voc est se conectando, o Dreamweaver notifica o CPS
toda vez que voc aciona uma operao de rede como retirada, reverso ou publicao de um arquivo. O CPS registrar esses eventos e voc
poder verificar o registro no console de administrao do CPS. (Se voc desativar o CPS, esses eventos no sero registrados.) voc ative o
CPS usando o Contribute. Para obter mais informaes, consulte a Ajuda do Adobe Contribute.
Nota: Voc pode tornar um site do Contribute compatvel sem ter o Contribute em seu computador, mas se quiser iniciar o Contribute
Administrator do Dreamweaver, o Contribute dever estar instalado no mesmo computador que o Dreamweaver e voc dever estar conectado ao
site remoto antes de ativar a compatibilidade do Contribute. Caso contrrio, o Dreamweaver no poder ler as configuraes administrativas do
Contribute para determinar se os recursos CPS e de reverso esto ativados.
Importante: Voc deve certificar-se de que o arquivo de configuraes compartilhado (arquivo CSI) que o Contribute usa para administrar o site
esteja no servidor remoto e no esteja corrompido. O Contribute cria automaticamente esse arquivo (e sobrescreve as verses antigas dele)
sempre que voc administra o Contribute Administrator. Se o arquivo de configuraes compartilhadas no estiver no servidor ou estiver
corrompido, o Dreamweaver retornar o erro "O arquivo necessrio para compatibilidade do Contribute no existe no servidor" sempre que voc
tentar uma operao de rede (como uma insero). Para garantir que o arquivo correto esteja no servidor, desative a conexo com o servidor no
Dreamweaver, inicie o Contribute Administrator, faa uma alterao de administrao e, em seguida, reconecte o servidor no Dreamweaver. Para
obter mais informaes, consulte a Ajuda do Adobe Contribute.
1. Selecione Site > Gerenciar sites.
2. Selecione um site e, em seguida, clique em Editar.
3. Na caixa de dilogo Configurao de site, expanda Configuraes avanadas, selecione a categoria Contribute e, em seguida, selecione
Ativar compatibilidade do Contribute.
4. Se aparecer uma caixa de dilogo informando que voc precisa ativar as Design Notes e retirada/devoluo, clique em OK.
5. Se voc ainda no forneceu as informaes de contato de retirada/devoluo, digite seu nome e endereo de email na caixa de dilogo e
clique em OK. O status de reverso, o status de CPS, a caixa de texto URL raiz do site e o boto Administrar site do Contribute aparecem
na caixa de dilogo Definio de sites.
Se Reverso estiver ativado no Contribute, voc poder voltar s verses anteriores de arquivos que voc alterou no Dreamweaver.
6. Marque o URL na caixa de texto URL raiz do site e corrija-a se necessrio. O Dreamweaver constri um URL raiz do site com base em
outras informaes de definio de site fornecidas, mas s vezes o URL construdo no est totalmente correto.
7. Clique no boto Testar para verificar se voc inseriu o URL correto.
Nota: Se voc est pronto para enviar uma chave de conexo ou realizar tarefas de administrao do site do Contribute, ignore as demais
etapas.
8. Clique no Site do administrador no Contribute se quiser fazer alteraes de administrao. Lembre-se, o Contribute deve estar instalado na
mesma mquina em que deseja abrir o Contribute Administrator a partir do Dreamweaver.
9. Clique em Salvar e, em seguida, clique em Concludo.
Para o incio
Depois de ativar a compatibilidade do Contribute, voc pode usar o Dreamweaver para iniciar o Contribute e realizar tarefas de administrao do
site.
Nota: O Contribute deve estar instalado no mesmo computador do Dreamweaver.
Como administrador de um site do Contribute, voc pode:
Para o incio
A excluso de um arquivo do servidor remoto que hospeda um site do Contribute funciona como a excluso de um arquivo do servidor de
qualquer site do Dreamweaver. Entretanto, quando voc exclui um arquivo de um site do Contribute, o Dreamweaver pergunta se voc deseja
excluir todas as verses anteriores do arquivo. Se voc optar por manter as verses anteriores, o Dreamweaver salva uma cpia da verso atual
na pasta _baks para possibilitar sua posterior restaurao.
Renomear um arquivo remoto ou mov-lo de uma pasta para outra em um site do Contribute funciona como em qualquer site do Dreamweaver.
Em um site do Contribute, o Dreamweaver tambm renomeia ou move as verses anteriores associadas do arquivo que esto salvas na pasta
_baks.
1. Selecione o arquivo no painel Remoto do painel Arquivos (Janela > Arquivos) e pressione Backspace (Windows) ou Delete (Macintosh).
Ser exibida uma caixa de dilogo pedindo que voc confirme se deseja excluir o arquivo.
2. Na caixa de dilogo de confirmao:
Para excluir todas as verses anteriores do arquivo e tambm a verso atual, marque a opo Excluir verses anteriores.
Para manter as verses anteriores no servidor, desmarque a opo Excluir verses anteriores.
3. Clique em Sim para excluir o arquivo.
Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz
Para o incio
Em um site do Contribute, voc gerencia as permisses de arquivos e pastas subjacentes no servidor. Ainda que, por motivos de segurana, voc
no possa conceder acesso de leitura pasta /Templates, poder colocar os modelos disposio dos usurios.
1. Configure o site do Contribute para que sua pasta raiz seja a pasta que os usurios vero como a raiz.
2. Copie manualmente a pasta de modelos da pasta raiz do site principal para a pasta raiz do site do Contribute usando o painel Arquivos.
3. Depois de atualizar os modelos do site principal, recopie os modelos alterados para as subpastas apropriadas conforme o necessrio.
Se voc no optar por esse mtodo, no use links relativos raiz do site nas subpastas. Os links relativos raiz do site referem-se
principal pasta raiz no servidor, e no pasta raiz definida no Dreamweaver. Os usurios do Contribute no podem criar links relativos
raiz do site.
Se os links em uma pgina do Contribute parecerem rompidos, possvel que haja algum problema com as permisses de pasta,
principalmente se os links vinculam a pginas fora da pasta raiz do usurio do Contribute. Verifique as permisses de leitura e gravao
para pastas no servidor.
Para o incio
Se um arquivo remoto em um site do Contribute parecer retirado mas estiver na verdade bloqueado no computador do usurio, voc poder
desbloquear o arquivo para que os usurios possam edit-lo.
Quando voc clica em qualquer boto relacionado administrao do site do Contribute, o Dreamweaver verifica se ele pode se conectar ao site
remoto e se o URL raiz do site fornecido vlido. Se o Dreamweaver no puder se conectar ou se o URL no for vlido, ser exibida uma
mensagem de erro.
Se as ferramentas de administrao no esto funcionando corretamente, pode haver algum problema com a pasta _mm.
BrowserLab
Para o incio
O Adobe BrowserLab permite que voc visualize o contedo da Web local no Dreamweaver, sem que seja necessrio post-lo primeiro em um
servidor de acesso pblico. possvel visualizar arquivos a partir do seu site local Dreamweaver ou de um servidor remoto ou de teste.
Para obter informaes sobre como usar o servio on-line BrowserLab, incluindo informaes sobre como usar o BrowserLab com o
Dreamweaver, consulte www.adobe.com/go/lr_abl_br.
Para o incio
As regies repetitivas, como so vistas em uma janela de navegador editvel do InContext Editing. A regio inferior selecionada e pode ser
duplicada novamente, excluda ou movida para cima e para baixo.
Alm de adicionar regies repetitivas com base na regio original, voc tambm pode oferecer ao usurio a opo de excluir regies, adicionar
regies completamente novas (no baseadas no contedo da regio original) e mover as regies para cima ou para baixo.
Quando voc cria uma regio repetitiva, o Dreamweaver a delimita em outro continer, chamado de grupo de regies repetitivas. Esse continer
uma tag div com o atributo ice:repeatinggroup adicionado tag de abertura atua como continer de todas as regies repetitivas editveis
que um usurio pode adicionar ao grupo. Voc no pode mover as regies repetitivas para fora de seus contineres de grupos de regies
repetitivas. Alm disso, voc no deve adicionar manualmente tags de grupos de regies repetitivas sua pgina. O Dreamweaver as adiciona
automaticamente quando necessrio.
Nota: Ao criar uma regio repetitiva a partir de uma linha da tabela (tag tr), o Dreamweaver aplica o atributo de grupo de regies repetitivas
tag-me (por exemplo, a tag table) e no insere uma tag div.
Se voc estiver trabalhando em uma pgina que contm um grupo de regies repetitivas e tentar adicionar uma regio repetitiva imediatamente
depois de um grupo existente, o Dreamweaver detectar que o grupo de regies repetitivas precede a regio que voc est tentando adicionar e
apresenta a opo de adicionar a nova regio ao grupo existente. Voc pode optar por adicionar a nova regio repetitiva ao grupo existente ou
criar um grupo de regies repetitivas totalmente novo.
Nota: Se voc estiver adicionando uma regio repetitiva do InContext Editing a uma pgina baseada em um modelo do Dreamweaver, essa
nova regio repetitiva deve existir dentro de uma regio que j editvel.
Para criar uma regio repetitiva no Dreamweaver, siga estas etapas.
1. Siga um destes procedimentos:
Selecione uma tag que voc deseja transformar em uma regio repetitiva. A lista de tags possveis extensa: a, abbr, acronym,
address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu,
ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var.
Nota: Somente as tags div podem conter atributos de regio editvel e repetitiva simultaneamente.
Posicione o ponto de insero onde voc pretende inserir uma nova regio repetitiva na pgina.
Selecione exatamente uma regio repetitiva em um modelo do Dreamweaver (arquivo DWT).
Selecione outro contedo na pgina que voc deseje tornar repetvel (por exemplo, um cabealho e um bloco de texto).
2. Escolha Inserir > InContext Editing > Criar regio repetitiva.
3. As opes variam dependendo de sua seleo.
Se voc tiver selecionado uma tag transformvel, o Dreamweaver a transformar em uma regio repetitiva sem a necessidade de outras
etapas.
Se estiver inserindo uma nova regio repetitiva em branco, siga um destes procedimentos:
Selecione Inserir nova regio repetitiva no ponto de insero atual e clique em OK.
Selecione Transformar a tag-me em uma regio repetitiva se quiser que o Dreamweaver transforme a tag-me da seleo no
elemento de continer da regio. Somente algumas tags HTML podem ser transformadas: a, abbr, acronym, address, b, big,
blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q,
s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var.
Nota: Esta segunda opo est disponvel somente quando o n pai atende aos critrios exatos para transformao. Por exemplo,
ele deve ser uma das tags transformveis listadas e no deve estar sujeito a nenhum dos erros listados em Mensagens de erro do
InContext Editing.
Se voc selecionou uma regio repetitiva de modelo do Dreamweaver, clique em OK na caixa de dilogo Criar regio repetitiva. O
Dreamweaver coloca a regio repetitiva de modelo entre as tags div que atuam como um continer para a nova regio repetitiva do
InContext Editing.
Se voc tiver selecionado outro contedo que deseje tornar repetvel, siga um destes procedimentos:
Selecione Delimitar a seleo atual com uma tag DIV e transform-la se quiser delimitar sua seleo com uma tag div e transformla em uma regio repetitiva. A tag div com a qual o Dreamweaver delimita o contedo atua como continer da regio repetitiva.
Selecione Transformar a tag-me em uma regio repetitiva se quiser que o Dreamweaver transforme a tag-me da seleo no
elemento de continer da regio repetitiva. Somente algumas tags HTML podem ser transformadas: a, abbr, acronym, address, b,
big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p,
pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var.
4. Na Visualizao de design, clique na aba azul da regio repetitiva para selecion-la, se ainda no estiver selecionada. Observe que o
Dreamweaver obriga voc a selecionar a aba do grupo de regies repetitivas. Isso ocorre porque todas as regies repetitivas existem em
um grupo de regies repetitivas, e voc precisa definir opes para essas regies configurando as opes do grupo inteiro.
5. Selecione ou cancele a seleo de opes no Inspetor de propriedades do grupo de regies repetitivas. H duas opes disponveis:
Reordenar e Adicionar/remover. Quando voc seleciona Reordenar, os usurios podem mover as regies repetitivas para cima ou para
baixo durante a edio em um navegador. Quando voc seleciona Adicionar/remover, os usurios podem adicionar ou remover regies
repetitivas durante a edio em um navegador. Ambas as opes so selecionadas por padro, e voc sempre deve selecionar pelo menos
uma delas.
6. Salve a pgina.
Se for a primeira vez que voc adiciona funes do InContext Editing a uma pgina, o Dreamweaver informar sobre o acrscimo dos
arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifique-se de carregar esses arquivos no servidor
quando carregar sua pgina. Caso contrrio, os recursos do InContext Editing no funcionaro em um navegador.
As regies editveis do InContext Editing no podem conter nenhum outro recurso do InContext Editing. Se voc tentar adicionar uma regio
repetitiva ou um grupo de regies repetitivas a uma regio editvel, o Dreamweaver no permitir que voc realize a transformao.
Regies repetitivas no devem conter Regies editveis nem Grupos de regies repetitivas.
As regies editveis do InContext Editing no podem conter nenhum outro recurso do InContext Editing. Se voc tentar adicionar uma regio
repetitiva ou um grupo de regies repetitivas a uma regio editvel, o Dreamweaver no permitir que voc realize a transformao. Alm disso, o
Dreamweaver no transformar um elemento em uma regio editvel ou repetitiva se ele j contiver um grupo de regies repetitivas.
A seleo atual j contm ou est dentro de uma Regio repetitiva. Regies repetitivas aninhadas no so permitidas.
Se a sua seleo estiver dentro de uma regio repetitiva ou se houver uma regio repetitiva dentro da seleo, o Dreamweaver no permitir que
voc realize a transformao. O InContext Editing no oferece suporte a regies repetitivas aninhadas.
A seleo deve conter exatamente uma regio editvel/repetitiva de modelo do Dreamweaver ou estar em qualquer
regio editvel de modelo do Dreamweaver.
Ao trabalhar com arquivos de modelo do Dreamweaver (arquivos .dwt), voc precisa seguir algumas regras. Para transformar uma regio
editvel/repetitiva de modelo do Dreamweaver em uma regio editvel/repetitiva do InContext Editing, voc precisa selecionar exatamente uma
regio editvel/repetitiva de modelo do Dreamweaver na pgina e transform-la. Para transformar outra seleo na pgina (por exemplo, um bloco
de texto), a seleo precisa estar dentro de uma regio editvel de modelo do Dreamweaver.
Somente tags DIV podem ter os recursos Regio editvel e Regio repetitiva aplicados ao mesmo tempo.
Se a sua seleo no for uma tag div e j tiver um atributo de regio repetitiva aplicado a ela, o Dreamweaver no permitir que voc aplique
tambm o atributo de regio editvel tag. Somente as tags div podem ter atributos de regio editvel e repetitiva aplicados simultaneamente.
O Dreamweaver detectou que a tag Grupo de regies repetitivas precede a Regio repetitiva
Todas as regies repetitivas do InContext Editing precisam existir dentro de um grupo de regies repetitivas. Quando voc adiciona uma nova
regio repetitiva a uma pgina, o Dreamweaver detecta se j existe um grupo de regies repetitivas imediatamente anterior. Se existir, o
Dreamweaver oferecer a voc a opo de adicionar a nova regio repetitiva ao grupo de regies repetitivas j existente, ou ento criar um novo
grupo de regies repetitivas para conter a nova regio repetitiva.
Para o incio
O Dreamweaver fornece integrao contnua com o Adobe Bridge, o navegador de arquivos de vrias plataformas includo nos componentes do
Adobe Creative Suite 5. O Adobe Bridge o ajuda a localizar, organizar e procurar os ativos necessrios para voc criar contedo de impresso,
da Web, de vdeo e mvel. Voc pode iniciar o Adobe Bridge em qualquer componente do Creative Suite (exceto o Acrobat 9) e us-lo para
acessar tipos de ativos que sejam ou no da Adobe.
No Adobe Bridge, possvel:
Visualizar, pesquisar, classificar e processar arquivos sem abrir aplicativos individuais do Creative Suite. Voc pode tambm editar os
metadados de arquivos e usar o Adobe Bridge para inserir os arquivos em seus documentos, projetos ou composies.
Importar e editar fotos de um carto de cmera digital, agrupe as fotos relacionadas em pilhas e abra e edite arquivos Raw da cmera, sem
iniciar o Photoshop.
Realizar tarefas automatizadas, como comandos de lote.
Sincronizar configuraes de cor entre componentes do Creative Suite gerenciados com cores.
Para o incio
Voc pode iniciar o Adobe Bridge a partir do Dreamweaver para visualizar arquivos antes de coloc-los ou arrast-los no layout da pgina.
Voc pode iniciar o Adobe Bridge de diversas maneiras diferentes:
Selecione Arquivo > Navegar no Bridge.
Clique no boto Navegar no Bridge na barra de ferramentas Padro.
Pressione o atalho de Navegar no Bridge no teclado: Control + Alt + O (Windows) ou Command + Option + O (Macintosh).
O Adobe Bridge aberto no modo Procurar arquivo, mostrando o contedo da pasta aberta pela ltima vez no Dreamweaver. Se o Adobe Bridge
j estava aberto, ele se tornar a janela ativa.
Nota: O Adobe Bridge apenas instalado com o Dreamweaver CS5 quando voc instala o Creative Suite CS5; ele no est includo na verso
independente do Dreamweaver CS5. Entretanto, o Adobe Bridge estar includo se voc tiver instalado previamente o Dreamweaver CS3 ou
CS4. Assim, se voc ainda tiver o Adobe Bridge instalado nessas verses, o Dreamweaver CS5 poder acess-lo e us-lo.
Para o incio
Voc pode inserir arquivos nas pginas do Dreamweaver inserindo-os ou arrastando-os a partir do Adobe Bridge para sua pgina. O documento
do Dreamweaver no qual deseja inserir o arquivo deve estar aberto e na Visualizao de design para usar esse recurso.
possvel inserir a maioria dos tipos de arquivo nas pginas, mas o Dreamweaver trata cada um deles de modo diferente:
Se for inserida uma imagem habilitada para a Web (JPEG, GIF ou PNG), o Dreamweaver inserir os arquivos de imagem diretamente na
sua pgina e colocar uma cpia na pasta de imagens padro do site.
Se voc inserir um arquivo PSD do Photoshop, ser necessrio definir as configuraes de otimizao para que o Dreamweaver possa
colocar o arquivo na sua pgina.
Se for inserido um arquivo que no seja de imagem, como mp3, PDF ou um tipo de arquivo desconhecido, o Dreamweaver inserir um link
para o arquivo de origem.
Se for inserido um arquivo HTML, o Dreamweaver inserir um link para o arquivo de origem.
(Somente Windows) Se o Microsoft Office estiver instalado e voc estiver inserido um arquivo do Microsoft Word ou Excel, especifique se
deseja inserir o arquivo propriamente dito ou um link para o arquivo de origem. Se desejar inserir o arquivo, especifique at que ponto a
Para o incio
1. No Dreamweaver (Visualizao de design), coloque o ponto de insero na pgina onde voc deseja inserir o arquivo.
2. No Adobe Bridge, selecione o arquivo e escolha Arquivo > Inserir em Dreamweaver.
3. Se o arquivo no estiver na pasta raiz do site, copie-o para essa pasta.
4. Se voc tiver definido Editar > Preferncias > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de dilogo Atributos de
acesso a tag de imagem ser exibida quando imagens habilitadas para a Web, como JPEG e GIF, forem inseridas.
Nota: Se o ponto de insero estiver na Visualizao de cdigo, o Adobe Bridge ser iniciado normalmente, mas no poder colocar o arquivo.
Os arquivos s podem ser colocados na Visualizao de design.
Para o incio
1. No Dreamweaver (Visualizao de design), coloque o ponto de insero na pgina onde voc deseja inserir a imagem.
2. Inicie o Adobe Bridge se ainda no estiver aberto.
3. No Adobe Bridge, selecione um ou mais arquivos e arraste-os para a pgina do Dreamweaver.
4. Se o arquivo no estiver na pasta raiz do site, copie-o nessa pasta.
5. Se voc tiver definido Editar > Preferncias > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de dilogo Atributos de
acesso a tag de imagem ser exibida quando imagens aceitas pela Web, como JPEG e GIF, forem inseridas.
Nota: Se o ponto de insero estiver na Visualizao de cdigo, o Adobe Bridge ser iniciado normalmente, mas no poder colocar o arquivo.
Os arquivos s podem ser colocados na Visualizao de design.
Para o incio
Para o incio
O Adobe ConnectNow fornece uma sala de reunies online segura e pessoal onde voc pode encontrar e colaborar com outras pessoas via
Web em tempo real. Com o ConnectNow, possvel compartilhar e fazer comentrios na tela do computador, enviar mensagens de bate-papo e
comunicar-se usando udio integrado. Voc tambm pode transmitir vdeos ao vivo, compartilhar arquivos, obter comentrios de reunies e
controlar o computador de um participante.
possvel acessar o ConnectNow diretamente na interface do aplicativo.
1. Escolha Arquivo > Compartilhar minha tela.
2. Na caixa de dilogo Conectar-se ao Adobe CS Live, digite seu endereo de email e senha e clique em Entrar. Caso no tenha uma ID da
Adobe, clique no boto Criar ID da Adobe.
3. Para compartilhar sua tela, clique no boto Compartilhar tela do meu computador na parte central da janela do aplicativo ConnectNow.
Para obter instrues completas sobre como usar o ConnectNow, consulte a Ajuda do Adobe ConnectNow.
Para assistir a um tutorial em vdeo sobre como usar o ConnectNow, consulte Uso do ConnectNow para compartilhar a tela (7:12). (Essa
demonstrao fica localizada no Dreamweaver.)
Para o incio
O Device Central habilita os designers e desenvolvedores da Web do Dreamweaver a visualizarem a aparncia dos arquivos do Dreamweaver em
uma ampla variedade de dispositivos mveis. O Device Central usa a Renderizao em Tela Pequena do Opera para proporcionar aos
designers e desenvolvedores uma impresso da aparncia da pgina da Web em uma tela pequena. Ela tambm habilita os designers e
desenvolvedores a testarem se o CSS comporta-se corretamente.
Por exemplo, um desenvolvedor da Web pode ter um cliente que deseja tornar o site da Web disponvel para celulares. O desenvolvedor da Web
pode usar o Dreamweaver para criar pginas preliminares e usar o Device Central para testar a aparncia das pginas em dispositivos
diferentes.
Para o incio
Para visualizar pginas criadas no Dreamweaver em vrios dispositivos mveis, use o Device Central com o recurso Renderizao em Tela
Pequena do Opera incorporado. Dispositivos diferentes tm navegadores distintos instalados, mas a visualizao pode dar uma boa impresso da
aparncia e do comportamento do contedo em um dispositivo selecionado.
1. Inicie o Dreamweaver.
2. Abrir um arquivo.
3. Siga um destes procedimentos:
Selecione Arquivo > Visualizar no Navegador > Device Central.
Na barra de ferramentas da janela do documento, clique no boto do navegador Visualizar/Depurar em
selecione Visualizar no Device Central.
, mantendo-o pressionado, e
O arquivo exibido na aba Device Central Emulator. Para continuar o teste, clique duas vezes no nome de um dispositivo diferente nas
listas Conjuntos de dispositivos ou Dispositivos disponveis.
Dicas para criao de contedo da Web para dispositivos mveis usando o Dreamweaver
Para o incio
O Device Central visualiza pginas da Web criadas no Dreamweaver usando a Renderizao em Tela Pequena do Opera. Essa visualizao
pode proporcionar uma boa ideia da aparncia de uma pgina da Web em um dispositivo mvel.
Nota: a Renderizao em Tela Pequena do Opera pode ou no estar pr-instalado em qualquer dispositivo emulador individual. O Device
Central simplesmente proporciona uma visualizao da aparncia do contedo, caso a Renderizao em Tela Pequena do Opera estivesse
instalado.
Use as seguintes dicas para garantir que as pginas da Web criadas no Dreamweaver sejam exibidas corretamente em dispositivos mveis:
Se voc usar estrutura do Adobe Spry para desenvolver contedo, adicione a seguinte linha de HTML s pginas para que elas possam
renderizar CSS e executar JavaScript corretamente no Device Central:
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
A Renderizao em Tela Pequena do Opera no oferece suporte a quadros, pop-ups, sublinhados, tachados, linhas sobrepostas,
intermitncias e letreiros. Tente evitar esses elementos de projeto.
Mantenha as pginas da Web simples para dispositivos mveis. Em especial, use um nmero mnimo de fontes, tamanhos de fontes e
cores.
A reduo de tamanhos de imagem e a reduo do nmero de cores necessrias aumentam as chances de que as imagens sejam exibidas
como planejado. Use CSS ou HTML para especificar uma altura e uma largura exatas para cada imagem usada. Fornea texto alternativo
para todas as imagens.
Nota: o site da Web do software Opera uma boa fonte de informaes sobre a otimizao de pginas da Web para dispositivos mveis.
Para obter mais dicas e tcnicas sobre como criar contedo para celulares e outros dispositivos mveis, consulte
www.adobe.com/go/learn_cs_mobilewiki_br.
Mais tpicos da Ajuda
Ajuda do Adobe Device Central
Para o incio
O Dreamweaver e o Fireworks reconhecem e compartilham muitos dos mesmos procedimentos de edio de arquivos, incluindo alteraes em
links, mapas de imagem, fatias de tabela e muito mais. Juntos, esses dois aplicativos fornecem um fluxo de trabalho dinamizado para edio,
otimizao e colocao de arquivos grficos em pginas HTML da Web.
Voc pode colocar um grfico exportado do Fireworks diretamente em um documento do Dreamweaver usando o comando Inserir imagem ou
criar um novo grfico do Fireworks a partir de um alocador de espao de imagem do Dreamweaver.
1. No documento do Dreamweaver, coloque o ponto de insero onde deseja que a imagem seja exibida e siga um destes procedimentos:
Selecione Inserir > Imagem.
Na categoria Comum do painel Inserir, clique no boto Imagem ou arraste-o at o documento.
2. Navegue at o arquivo exportado desejado do Fireworks e clique em OK (Windows) ou em Abrir (Macintosh).
Nota: Se o arquivo do Fireworks no estiver no site atual do Dreamweaver, uma mensagem ser exibida perguntando se voc deseja
copiar o arquivo na pasta raiz. Clique em Sim.
Para o incio
Ao abrir e editar uma imagem ou uma fatia da imagem que faz parte de uma tabela do Fireworks, o Dreamweaver inicia o Fireworks, que abre o
arquivo PNG a partir do qual a imagem ou a tabela foi exportada.
Nota: Esse processo presume que o Fireworks tenha sido definido como o principal editor de imagens externas para arquivos PNG.
Normalmente, o Fireworks tambm definido como o editor padro de arquivos JPEG e GIF, embora o Photoshop possa ser definido como o
editor padro desses tipos de arquivo.
Quando a imagem faz parte de uma tabela do Fireworks, voc pode abrir a tabela inteira do Fireworks para edio contanto que o comentrio <!-fw table--> exista no cdigo HTML. Se o arquivo PNG de origem tiver sido exportado a partir do Fireworks para um site do Dreamweaver com a
configurao Estilo HTML e imagens do Dreamweaver, o comentrio da tabela do Fireworks ser automaticamente inserido no cdigo HTML.
1. No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades) se ainda no estiver aberto.
2. Clique na imagem ou na fatia da imagem para selecion-la.
Ao selecionar uma imagem que foi exportada a partir do Fireworks, o Inspetor de propriedades identifica a seleo como uma imagem ou
tabela do Fireworks e exibe o nome do arquivo PNG de origem.
3. Para iniciar o Fireworks para edio, siga um destes procedimentos:
No Inspetor de propriedades, clique em Editar.
Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes na imagem selecionada.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na imagem selecionada e escolha
Editar com Fireworks no menu de contexto.
Nota: Se o Fireworks no conseguir localizar o arquivo de origem, voc dever localizar o arquivo PNG de origem. Ao trabalhar com o
arquivo de origem do Fireworks, as alteraes so salvas tanto no arquivo de origem quanto no arquivo exportado; caso contrrio,
somente o arquivo exportado ser atualizado.
4. No Fireworks, edite o arquivo PNG de origem e clique em Concludo.
O Fireworks salva as alteraes no arquivo PNG, exporta a imagem atualizada (ou o HTML e as imagens) e volta ao Dreamweaver. No
Dreamweaver, a imagem ou tabela atualizada exibida.
Para assistir a um tutorial sobre a integrao do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0188_br.
Para o incio
Voc pode usar o Dreamweaver para fazer rpidas alteraes nas imagens e animaes do Fireworks. No Dreamweaver, voc pode alterar
configuraes de otimizao, configuraes de animao e o tamanho e a rea da imagem exportada.
1. No Dreamweaver, selecione a imagem desejada e siga um destes procedimentos:
Selecione Comando > Otimizar imagem
Clique no boto Editar configuraes de imagem no Inspetor de propriedades.
2. Faa suas edies na caixa de dilogo Visualizao da imagem:
Para editar as configuraes de otimizao, clique na aba Opes.
Para editar o tamanho e a rea da imagem exportada, clique na aba Arquivo.
3. Ao terminar, clique em OK.
Para o incio
Voc pode criar um alocador de espao de imagem em um documento do Dreamweaver e, em seguida, iniciar o Fireworks para projetar uma
imagem grfica ou uma tabela do Fireworks para substitu-lo.
Para criar uma nova imagem de um alocador de espao, necessrio instalar o Dreamweaver e o Fireworks no seu sistema.
1. Verifique se o Fireworks j est definido como o editor de imagens para arquivos PNG.
2. Na janela Documento, clique no alocador de espao de imagem para selecion-lo.
3. Inicie o Fireworks no modo Edio a partir do Dreamweaver seguindo um destes procedimentos:
No Inspetor de propriedades, clique em Criar.
Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no alocador de espao de imagem.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no alocador de espao de imagem e,
em seguida, selecione Criar imagem no Fireworks.
4. Use as opes do Fireworks para criar a imagem.
O Fireworks reconhece as seguintes configuraes de alocador de espao de imagem, que podem ser definidas enquanto voc trabalha
com o alocador no Dreamweaver: tamanho da imagem (relacionado ao tamanho de tela de desenho do Fireworks), ID da imagem (usada
pelo Fireworks como o nome de documento padro para o arquivo de origem e o arquivo de exportao criados) e o alinhamento do texto.
O Fireworks tambm reconhece links e algumas sobreposies (como imagem trocada, menu pop-up e texto) que voc anexou ao alocador
de espao de imagem ao trabalhar no Dreamweaver.
Nota: Embora o Fireworks no mostre os links adicionados a um alocador de espao de imagem, eles so preservados. Se voc desenhar
um ponto ativo e adicionar um link no Fireworks, o link adicionado ao alocador de imagem no Dreamweaver no ser excludo; no entanto,
se uma fatia da nova imagem for cortada no Fireworks, o link no documento do Dreamweaver ser excludo quando o alocador de espao
de imagem for substitudo.
O Fireworks no reconhece as seguintes configuraes de alocador de espao de imagem: alinhamento da imagem, cor, Vspace e Hspace
e mapas. Essas configuraes esto desativadas no Inspetor de propriedades do alocador de espao de imagem.
5. Quando terminar, clique em Concludo para exibir a solicitao para salvar.
6. Na caixa de texto Salvar em, selecione a pasta definida como a pasta do site local do Dreamweaver.
Se o alocador de espao de imagem tiver sido nomeado quando foi inserido no documento do Dreamweaver, o Fireworks preencher a
caixa Nome do arquivo com esse nome. Voc pode alterar o nome.
7. Clique em Salvar para salvar o arquivo PNG.
A caixa de dilogo Exportar exibida. Use essa caixa de dilogo para exportar a imagem como um arquivo GIF ou JPEG ou, no caso de
imagens segmentadas, como HTML e imagens.
8. Em Salvar em, selecione a pasta do site local do Dreamweaver.
A caixa Nome exibida automaticamente com o nome usado para o arquivo PNG. Voc pode alterar o nome.
9. Em Salvar como tipo, selecione o tipo do arquivo que deseja exportar; por exemplo, Apenas imagens ou HTML e imagens.
10. Clique em Salvar para salvar o arquivo exportado.
O arquivo salvo e o foco volta para o Dreamweaver. No documento do Dreamweaver, o arquivo exportado ou a tabela do Fireworks
substitui o alocador de espao de imagem.
Para o incio
O Fireworks permite criar de modo rpido e fcil menus pop-up baseados em CSS.
Alm de serem extensveis e rpidos de baixar, os menus pop-up criados com o Fireworks oferecem as seguintes vantagens:
Os itens de menu podem ser indexados por mecanismos de pesquisa.
Os itens de menu podem ser lidos por leitores de tela, deixando as pginas mais acessveis.
O cdigo gerado pelo Fireworks est em conformidade com os padres e pode ser validado.
Voc pode editar os menus pop-up do Fireworks com o Dreamweaver ou o Fireworks, mas no com ambos. As alteraes feitas no
Dreamweaver no so preservadas no Fireworks.
Para o incio
Voc pode criar um menu pop-up no Fireworks 8 ou posterior e, em seguida, edit-lo com o Dreamweaver ou o Fireworks (usando a edio
completa), mas no com ambos. Se voc editar os menus no Dreamweaver e, em seguida, edit-los no Fireworks, todas as edies anteriores,
exceto a do contedo do texto, sero perdidas.
Se preferir editar os menus com o Dreamweaver, use o Fireworks para criar o menu pop-up e use o Dreamweaver exclusivamente para editar e
personalizar o menu.
Se preferir editar os menus no Fireworks, use o recurso de edio completa no Dreamweaver, mas no edite os menus diretamente no
Dreamweaver.
1. No Dreamweaver, selecione a tabela do Fireworks que contm o menu pop-up e, em seguida, clique em Editar no Inspetor de
propriedades.
O arquivo PNG de origem aberto no Fireworks.
2. No Fireworks, edite o menu com o Editor de menu pop-up e clique em Concludo na barra de ferramentas do Fireworks.
O Fireworks envia o menu pop-up editado novamente para o Dreamweaver.
Se voc tiver criado um menu pop-up no Fireworks MX 2004 ou anterior, poder edit-lo no Dreamweaver usando a caixa de dilogo
Mostrar menu pop-up, disponvel no painel Comportamentos.
Para o incio
Para o incio
Ao usar o Fireworks para editar imagens, as imagens de suas pginas da Web normalmente so exportadas pelo Fireworks a partir de um
arquivo PNG de origem. Ao abrir um arquivo de imagem no Dreamweaver para edit-lo, o Fireworks abre automaticamente o arquivo PNG de
origem, solicitando sua localizao caso no o encontre. Se preferir, voc pode definir preferncias no Fireworks para que o Dreamweaver abra a
imagem inserida, que o Fireworks permita o uso do arquivo de imagem inserido ou o arquivo de origem do Fireworks sempre que uma imagem for
aberta no Dreamweaver.
Nota: O Dreamweaver reconhece as preferncias de incio e edio do Fireworks somente em alguns casos. Especificamente, voc deve abrir e
otimizar uma imagem que no faa parte de uma tabela do Fireworks e contenha um caminho correto de Design Notes at um arquivo PNG de
origem.
1. No Fireworks, selecione Editar > Preferncias (Windows) ou Fireworks > Preferncias (Macintosh) e clique na aba Iniciar e editar (Windows)
ou selecione Iniciar e editar no menu pop-up (Macintosh).
2. Especifique as opes de preferncia a serem usadas ao editar ou otimizar as imagens do Fireworks colocadas em um aplicativo externo:
Sempre usar o PNG de origem Abra automaticamente o arquivo PNG do Fireworks definido na Design Note como a origem da imagem
colocada. As atualizaes so feitas no arquivo PNG de origem e na imagem colocada correspondente.
Nunca usar o PNG de origem Abra automaticamente a imagem colocada do Fireworks, independentemente da existncia de um arquivo
PNG de origem. As atualizaes so feitas somente na imagem colocada.
Perguntar ao iniciar Uma mensagem exibida perguntando se o arquivo PNG de origem deve ser aberto. Voc tambm pode especificar
preferncias globais de incio e edio nessa mensagem.
Para o incio
No Fireworks, voc pode usar o comando Exportar para exportar e salvar arquivos otimizados de imagem e HTML em um local dentro de uma
pasta do site do Dreamweaver. Voc pode inserir o arquivo no Dreamweaver. O Dreamweaver permite inserir o cdigo HTML gerado pelo
Fireworks, completo com as imagens associadas, as fatias e JavaScript, em um documento.
1. No documento do Dreamweaver, coloque o ponto de insero onde voc deseja inserir o cdigo HTML do Fireworks.
2. Siga um destes procedimentos:
Selecione Inserir > Objetos de imagem > HTML do Fireworks.
Na categoria Comum do painel Inserir, clique no boto Imagens e escolha Inserir HTML do Fireworks no menu pop-up.
3. Clique em Procurar para selecionar um arquivo HTML do Fireworks.
4. Se no for necessrio usar mais o arquivo, selecione Excluir arquivo aps insero. A seleo dessa opo no afeta o arquivo PNG de
origem associado ao arquivo HTML.
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele ser excludo permanentemente, no ser movido para a Lixeira.
5. Clique em OK para inserir o cdigo HTML, junto com as imagens associadas, as fatias e JavaScript, no documento do Dreamweaver.
Para o incio
Uma maneira rpida de colocar as imagens e as tabelas geradas pelo Fireworks no Dreamweaver copiar e colar o cdigo HTML do Fireworks
diretamente em um documento do Dreamweaver.
Para o incio
No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa tcnica de incio e edio de atualizao dos arquivos do Fireworks
colocados no Dreamweaver. Com o recurso Atualizar HTML, possvel editar uma imagem PNG de origem no Fireworks e atualizar
automaticamente o cdigo HTML exportado e os arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite
atualizar os arquivos do Dreamweaver mesmo quando o Dreamweaver no est em execuo.
1. No Fireworks, abra o arquivo PNG de origem e faa suas edies.
2. Selecione Arquivo > Salvar.
3. No Fireworks, selecione Arquivo > Atualizar HTML.
4. Navegue at o arquivo do Dreamweaver que contm o HTML que deseja atualizar e clique em Abrir.
5. Navegue at a pasta de destino onde deseja colocar os arquivos de imagem atualizados e clique em Selecionar (Windows) ou Escolher
(Macintosh).
O Fireworks atualiza o cdigo HTML e JavaScript no documento do Dreamweaver. O Fireworks tambm exporta as imagens atualizadas
associadas ao HTML e coloca essas imagens na pasta de destino especificada.
Se o Fireworks no conseguir encontrar o cdigo HTML correspondente a ser atualizado, voc poder inserir o novo cdigo HTML no
documento do Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no comeo do documento e coloca a tabela ou link
HTML da imagem no final.
Para o incio
Para o incio
Se voc tem o Flash e o Dreamweaver instalados, pode selecionar um arquivo SWF em um documento do Dreamweaver e usar o Flash para
edit-lo. O Flash no edita diretamente o arquivo SWF; edita o documento de origem (arquivo FLA) e reexporta o arquivo SWF.
1. No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades).
2. No documento do Dreamweaver, siga um destes procedimentos:
Clique no espao reservado para o arquivo SWF para selecion-lo; ento, no Inspetor de propriedades, clique em Editar.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no espao reservado para o arquivo
SWF, e ento selecione Editar com Flash no menu de contexto.
O Dreamweaver muda o foco para o Flash e o Flash tenta localizar o arquivo de criao do Flash (FLA) para o arquivo SWF
selecionado. Se o Flash no conseguir localizar o arquivo de criao do Flash, ser solicitado que voc o localize.
Nota: se o arquivo FLA ou o arquivo SWF estiver bloqueado, verifique o arquivo no Dreamweaver.
3. No Flash, edite o arquivo FLA. A janela Documento do Flash indica que voc est modificando o arquivo a partir do Dreamweaver.
4. Quando terminar a edio, clique em Concludo.
O Flash atualiza o arquivo FLA, reexporta-o como um arquivo SWF e encerrado. Ento, o foco retorna ao documento do Dreamweaver.
Nota: para atualizar o arquivo SWF e manter o Flash aberto, no Flash, selecione Arquivo > Atualizar para Dreamweaver.
5. Para exibir o arquivo atualizado no documento, clique em Reproduzir no Inspetor de propriedades do Dreamweaver ou pressione F12 para
visualizar a pgina em uma janela do navegador.
JavaScript
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
Os comportamentos includos no Dreamweaver foram gravados para funcionar nos navegadores modernos. Os comportamentos no funcionam
em navegadores mais antigos.
Nota: As aes do Dreamweaver foram gravadas com cuidado para funcionar no mximo de navegadores possvel. Se voc remover o cdigo
de uma ao do Dreamweaver manualmente ou substitu-lo por seu prprio cdigo, a compatibilidade com vrios navegadores pode ser afetada.
Embora as aes do Dreamweaver tenham sido gravadas para maximizar a compatibilidade com vrios navegadores, alguns navegadores no
suportam JavaScript e muitas pessoas que navegam na Internet mantm o JavaScript desativado em seus navegadores. Para obter os melhores
resultados em vrias plataformas, fornea interfaces alternativas com a tag <noscript> no incio e no final para que os usurios sem JavaScript
possam usar seu site.
Para o incio
O comportamento Chamar JavaScript executa uma funo ou linha personalizada do cdigo JavaScript quando ocorre um evento. (Voc pode
gravar seu prprio script ou usar o cdigo fornecido livremente pelas diversas bibliotecas JavaScript disponveis na Web.)
1. Selecione um objeto e escolha Chamar JavaScript no menu Adicionar comportamento do painel Comportamentos.
2. Digite o JavaScript exato a ser executado ou digite o nome de uma funo.
Por exemplo, para criar um boto Voltar, voc pode digitar if (history.length > 0){history.back()}. Se voc tiver includo o cdigo em uma
funo, digite somente o nome da funo (por exemplo, hGoBack()).
3. Clique em OK e verifique se o evento padro est correto.
Para o incio
Use o comportamento Alterar propriedade para alterar o valor de uma propriedade de um objeto (por exemplo, a cor de fundo de um div ou a
ao de um formulrio).
Nota: Use esse comportamento somente se voc estiver familiarizado com HTML e JavaScript.
1. Selecione um objeto e escolha Alterar propriedade no menu Adicionar comportamento do painel Comportamentos.
2. No menu Tipo de elemento, selecione um tipo de elemento para exibir todos os elementos identificados do tipo em questo.
3. Selecione um elemento no menu ID do elemento.
4. Selecione uma propriedade no menu Propriedade ou insira o nome da propriedade na caixa.
5. Insira o novo valor da nova propriedade no campo Novo valor.
6. Clique em OK e verifique se o evento padro est correto.
Para o incio
Para o incio
Use o comportamento Verificar plug-in para enviar os visitantes para pginas diferentes, dependendo da instalao do plug-in especificado. Por
exemplo, voc pode direcionar os visitantes para uma pgina caso eles tenham o Shockwave e para outra pgina caso no tenham.
Nota: Voc no pode detectar plug-ins especficos no Internet Explorer usando o JavaScript. No entanto, selecione Flash ou Director para
adicionar o cdigo VBScript adequado sua pgina a fim de detectar esses plug-ins no Internet Explorer no Windows. A deteco de plug-ins
no pode ser feita no Internet Explorer no Mac OS.
1. Selecione um objeto e escolha Verificar plug-in no menu Adicionar comportamento do painel Comportamentos.
2. Selecione um plug-in no menu Plug-in ou clique em Inserir e digite o nome exato do plug-in na caixa adjacente.
Voc deve usar o nome exato do plug-in conforme especificado em negrito na pgina Sobre plug-ins no Netscape Navigator. (No Windows,
selecione o comando Ajuda > Sobre plug-ins do Navigator; no Mac OS, selecione Sobre plug-ins no menu Apple.)
3. Na caixa Se localizado, v para URL, especifique uma URL para os visitantes que tm o plug-in.
Se for um URL remoto, inclua o prefixo http:// no endereo. Se o campo ficar em branco, os visitantes permanecero na mesma pgina.
4. Na caixa Do contrrio, v para URL, especifique um URL alternativo para os visitantes que no tm o plug-in. Se o campo ficar em branco,
os visitantes permanecero na mesma pgina.
5. Especifique o que deve ser feito caso no seja possvel fazer a deteco de plug-ins. Por padro, quando a deteco no permitida, o
visitante enviado para o URL listado na caixa Do contrrio. Para enviar o visitante para o primeiro URL (Se localizado), selecione a opo
Sempre ir para o primeiro URL se a deteco no for possvel. Quando selecionada, essa opo supe que o visitante tem o plug-in, a no
ser que o navegador indique explicitamente que o plug-in no est presente. Em geral, selecione essa opo se o contedo do plug-in
fizer parte de sua pgina; caso contrrio, deixe-a desmarcada.
Nota: Essa opo aplica-se somente ao Internet Explorer; o Netscape Navigator sempre pode detectar plug-ins.
6. Clique em OK e verifique se o evento padro est correto.
Para o incio
Para o incio
O comportamento Arrastar elemento AP permite que o visitante arraste um elemento absolutamente posicionado (AP). Use esse comportamento
para criar quebra-cabeas, controles deslizantes e outros elementos de interface mveis.
Voc pode especificar a direo em que o visitante pode arrastar o elemento AP (na horizontal, na vertical ou em qualquer direo), um destino
para onde o visitante deve arrastar o elemento AP, se necessrio encaixar o elemento AP no destino caso esteja a um determinado nmero de
pixels do destino, o que deve ser feito quando o elemento AP toca no destino e muito mais.
Como o comportamento Arrastar elemento AP deve ser chamado antes de o visitante poder arrastar o elemento AP, anexe esse comportamento
ao objeto body (com o evento onLoad).
1. Selecione Inserir > Objetos de layout > PA Div ou clique no boto Desenhar PA Div no painel Inserir e desenhe um PA Div na Visualizao
de design da janela Documento.
2. Clique em <body> no seletor de tags no canto inferior esquerdo da janela Documento.
3. Selecione Arrastar elemento PA no menu Adicionar comportamento do painel Comportamentos.
Se a opo Arrastar elemento AP no estiver disponvel, voc provavelmente tem um elemento AP selecionado.
4. No menu pop-up Elemento AP, selecione o elemento AP.
Para o incio
Quando voc anexa o comportamento Arrastar elemento AP a um objeto, o Dreamweaver insere a funo MM_dragLayer() na seo head do
documento. (A funo preserva a conveno de nomenclatura antiga dos elementos PA [isto , Camada], de modo que as camadas criadas nas
verses anteriores do Dreamweaver ainda podero ser editadas.) Alm de registrar o elemento AP como arrastvel, essa funo define trs
propriedades para cada elemento AP arrastvel (MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED), que podem ser usadas em suas prprias
funes JavaScript para determinar a posio horizontal relativa do elemento AP, a posio vertical relativa do elemento AP e se o elemento AP
chegou ao destino de liberao.
Nota: As informaes fornecidas aqui destinam-se somente a programadores experientes de JavaScript.
Por exemplo, a seguinte funo exibe o valor da propriedade MM_UPDOWN (a posio vertical atual do elemento AP) em um campo de
formulrio chamado curPosField. (Os campos de formulrio so teis para exibir informaes atualizadas continuamente porque so dinmicos,
isto , voc pode alterar seu contedo depois do carregamento da pgina.)
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Em vez de exibir os valores de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulrio, voc pode usar esses valores de diversas
outras maneiras. Por exemplo, possvel gravar uma funo que exibe uma mensagem no campo de formulrio dependendo da proximidade do
valor com relao zona de liberao ou chamar outra funo para mostrar ou ocultar um elemento AP dependendo do valor.
especialmente til para ler a propriedade MM_SNAPPED quando existem vrios elementos PA na pgina e todos devem atingir seus destinos
antes que o visitante possa passar para a prxima pgina ou tarefa. Por exemplo, voc pode gravar uma funo para contar quantos elementos
PA tm um valor MM_SNAPPED igual a true e cham-la sempre que um elemento PA for solto. Quando a contagem de encaixes atingir o
nmero desejado, voc pode direcionar o visitante para a prxima pgina ou exibir uma mensagem de xito.
Para o incio
O comportamento Ir para URL abre uma nova pgina na janela atual ou no quadro especificado. Esse comportamento til para alterar o
contedo de dois ou mais quadros com um clique.
1. Selecione um objeto e escolha Ir para URL no menu Adicionar comportamento do painel Comportamentos.
2. Selecione um destino para o URL na lista Abrir em.
A lista Abrir em relaciona automaticamente os nomes de todos os quadros do conjunto de molduras atual, bem como da janela principal. Se
no houver nenhum quadro, a janela principal ser a nica opo.
Nota: Esse comportamento pode produzir resultados inesperados se algum quadro for superior, estiver em branco, for gerado
automaticamente ou pai. s vezes, os navegadores trocam incorretamente esses nomes por nomes de destino reservados.
3. Clique em Procurar para selecionar um documento a ser aberto ou insira o caminho e o nome de arquivo do documento na caixa URL.
4. Repita as etapas 2 e 3 para abrir documentos adicionais em outros quadros.
5. Clique em OK e verifique se o evento padro est correto.
Para o incio
Quando voc cria um menu de salto usando o comando Inserir > Formulrio > Menu de salto, o Dreamweaver cria um objeto de menu e anexa o
comportamento Menu de salto (ou Menu de salto Ir) a esse objeto. Normalmente, no necessrio anexar o comportamento Menu de salto a um
objeto de forma manual.
Voc pode editar um menu de salto existente de duas maneiras:
Voc pode editar e reorganizar itens de menu, alterar os arquivos a serem ignorados e alterar a janela em que esses arquivos devem ser
abertos clicando duas vezes em um comportamento Menu de salto existente no painel Comportamentos.
Voc pode editar os itens no menu, assim como faria em qualquer outro menu, selecionando o menu e usando o boto Listar valores do
Inspetor de propriedades.
1. Crie um objeto de menu de salto se ainda no houver um no documento.
2. Selecione o objeto e escolha Menu de salto no menu Adicionar comportamento do painel Comportamentos.
3. Faa as alteraes desejadas na caixa de dilogo Menu de salto e clique em OK.
Para o incio
O comportamento Menu de salto Ir tem uma relao prxima com o comportamento Menu de salto; nesse caso, um boto Ir associado a um
menu de salto. (Antes de usar esse comportamento, um menu de salto j deve existir no documento.) Clique no boto Ir para abrir o link que est
selecionado no menu de salto. Um menu de salto normalmente no precisa de um boto Ir; a seleo de um item em um menu de salto, em
geral, carrega um URL sem exigir mais nenhuma ao do usurio. No entanto, se o visitante selecionar o mesmo item que j est escolhido no
menu de salto, o salto no ocorrer. Em geral, isso no importa, mas se o menu de salto aparecer em um quadro e seus itens estiverem
vinculados a pginas de outros quadros, um boto Ir ser til para permitir que os visitantes selecionem novamente um item que j est
selecionado no menu de salto.
Nota: Ao ser usado com um menu de salto, o boto Ir se transforma no nico mecanismo que salta para levar o usurio ao URL associado
seleo do menu. A seleo de um item de menu no menu de salto no redireciona mais o usurio automaticamente para outra pgina ou
quadro.
1. Selecione um objeto a ser usado como boto Ir (geralmente, uma imagem de boto) e escolha Menu de salto Ir no menu Adicionar
comportamento do painel Comportamentos.
2. No menu Escolher menu de salto, selecione um menu para o boto Ir a ser ativado e clique em OK.
Para o incio
Use o comportamento Abrir janela do navegador para abrir uma pgina em uma nova janela. Voc pode especificar as propriedades da nova
janela, incluindo o tamanho, seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.) e o nome. Por exemplo, voc pode
usar esse comportamento para abrir uma imagem maior em uma janela separada quando o visitante clicar em uma imagem em miniatura; com
esse comportamento, a nova janela pode ficar com o tamanho exato da imagem.
Se nenhum atributo for especificado, a janela ser aberta no tamanho e com os atributos da janela que acionou sua abertura. A especificao de
qualquer atributo para a janela desativa automaticamente todos os outros atributos que no esto explicitamente ativados. Por exemplo, se voc
no definir nenhum atributo, a janela pode abrir na resoluo de 1024 x 768 pixels e ter uma barra de navegao (mostrando os botes Voltar,
Encaminhar, Incio e Recarregar), a barra de ferramentas do local (mostrando o URL), a barra de status (mostrando mensagens de status na parte
inferior) e a barra de menus (mostrando Arquivo, Editar, Exibir e outros menus). Se voc definir explicitamente a largura como 640 e a altura
como 480, e no definir nenhum outro atributo, a janela abrir na resoluo de 640 x 480 pixels, sem barras de ferramentas.
1. Selecione um objeto e escolha Abrir janela do navegador no menu Adicionar comportamento do painel Comportamentos.
2. Clique em Procurar para selecionar um arquivo ou insira o URL que deseja exibir.
3. Defina as opes para a largura e a altura da janela (em pixels) e para a incorporao de vrias barras de ferramentas, barras de rolagem,
alas de redimensionamento e o aspecto. Nomeie a janela (no use nenhum espao ou caractere especial) se desejar que ela seja o
destino dos links ou se desejar control-la com JavaScript.
4. Clique em OK e verifique se o evento padro est correto.
Para o incio
Para o incio
O comportamento Mensagem pop-up exibe um alerta JavaScript com a mensagem especificada. Como os alertas JavaScript tm somente um
boto (OK), use esse comportamento para fornecer informaes ao usurio em vez de apresentar opes de escolha.
Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar
uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
Nota: O navegador controla a aparncia do alerta. Se desejar ter mais controle sobre a aparncia, avalie a possibilidade de usar o
comportamento Abrir janela do navegador.
1. Selecione um objeto e escolha Mensagem pop-up no menu Adicionar comportamento do painel Comportamentos.
2. Insira sua mensagem na caixa Mensagem.
3. Clique em OK e verifique se o evento padro est correto.
Para o incio
O comportamento Pr-carregar imagens diminui o tempo de exibio armazenando em cache as imagens que no so mostradas quando a
primeira pgina aparece (por exemplo, imagens que sero trocadas com comportamentos ou scripts).
Nota: O comportamento Trocar imagem pr-carrega automaticamente todas as imagens realadas quando voc seleciona a opo Pr-carregar
imagens na caixa de dilogo Trocar imagem; desse modo, no necessrio adicionar o comportamento Pr-carregar imagens manualmente ao
usar a opo Trocar imagem.
1. Selecione um objeto e escolha Pr-carregar imagens no menu Adicionar comportamento do painel Comportamentos.
2. Clique em Procurar para selecionar um arquivo de imagem ou insira o caminho e o nome de arquivo de uma imagem na caixa Arquivo de
origem de imagem.
3. Clique no boto de adio (+), na parte superior da caixa de dilogo, para adicionar a imagem lista Pr-carregar imagens.
4. Repita as etapas 2 e 3 para todas as imagens restantes que deseja pr-carregar na pgina atual.
5. Para remover uma imagem da lista Pr-carregar imagens, selecione-a e clique no boto de subtrao (-).
6. Clique em OK e verifique se o evento padro est correto.
Para o incio
Para o incio
O comportamento Definir texto do quadro permite definir dinamicamente o texto de um quadro, substituindo o contedo e a formatao de um
quadro pelo contedo especificado. O contedo pode incluir qualquer cdigo HTML vlido. Use esse comportamento para exibir informaes
dinamicamente.
Embora o comportamento Definir texto do quadro substitua a formatao de um quadro, voc pode selecionar Preservar cor de fundo para
preservar os atributos de cor de fundo da pgina e do texto.
Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar
uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
1. Selecione um objeto e escolha Definir texto > Definir texto do quadro no menu Adicionar comportamento do painel Comportamentos.
2. Na caixa de dilogo Definir texto do quadro, selecione o quadro de destino no menu Quadro.
3. Clique no boto Obter HTML atual para copiar o contedo atual da seo body do quadro de destino.
4. Insira uma mensagem na caixa Novo HTML.
5. Clique em OK e verifique se o evento padro est correto.
Para o incio
O comportamento Definir texto do recipiente substitui o contedo e a formatao de um recipiente existente (isto , qualquer elemento que possa
conter texto ou outros elementos) em uma pgina pelo contedo especificado. O contedo pode incluir qualquer cdigo-fonte HTML vlido.
Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar
uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
1. Selecione um objeto e, em seguida, Definir texto > Definir texto do continer no menu Adicionar comportamento do painel Comportamentos.
2. Na caixa de dilogo Definir texto do recipiente, use o menu Recipiente para selecionar o elemento de destino.
3. Insira o novo texto ou HTML na caixa Novo HTML.
4. Clique em OK e verifique se o evento padro est correto.
Para o incio
O comportamento Definir texto da barra de status mostra uma mensagem na barra de status no canto inferior esquerdo da janela do navegador.
Por exemplo, voc pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL associado.
Os visitantes geralmente ignoram ou desconsideram as mensagens da barra de status (nem todos os navegadores do suporte completo
definio do texto da barra de status); se sua mensagem for importante, avalie a possibilidade de exibi-la como uma mensagem pop-up ou como
o texto de um elemento AP.
Nota: Se voc usar o comportamento Definir texto da barra de status no Dreamweaver, o texto da barra de status do navegador no ser
alterado necessariamente porque alguns navegadores precisam de ajustes especiais ao alterar o texto da barra de status. O Firefox, por exemplo,
requer a alterao de uma opo avanada que permite ao JavaScript alterar o texto da barra de status. Para obter mais informaes, consulte a
documentao do navegador.
Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar
uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
1. Selecione um objeto e escolha Definir texto > Definir texto da barra de status no menu Adicionar comportamento do painel
Comportamentos.
2. Na caixa de dilogo Definir texto da barra de status, digite sua mensagem na caixa Mensagem.
Seja objetivo. O navegador trunca a mensagem se ela no cabe na barra de status.
3. Clique em OK e verifique se o evento padro est correto.
Para o incio
O comportamento Definir texto do campo de texto substitui o contedo do campo de texto de um formulrio pelo contedo especificado.
Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar
uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
Para o incio
O comportamento Mostrar/ocultar elementos mostra, oculta ou restaura a visibilidade padro de um ou mais elementos de pgina. Esse
comportamento til para exibir informaes medida que o usurio interage com a pgina. Por exemplo, conforme o usurio move o ponteiro
pela imagem de uma planta, voc pode mostrar um elemento de pgina fornecendo detalhes sobre a poca de crescimento e a regio da planta,
a quantidade de sol necessria, quanto a planta crescer e assim por diante. O comportamento mostra ou oculta somente o elemento relevante;
na verdade, ele no remove o elemento do fluxo da pgina quando est oculto.
1. Selecione um objeto e selecione Mostrar/ocultar elementos no menu Adicionar comportamento do painel Comportamentos.
Se a opo Mostrar/ocultar elementos no estiver disponvel, voc provavelmente tem um elemento PA selecionado. Como os elementos
PA no aceitam eventos nos navegadores 4.0, selecione um objeto diferente, como a tag <body> ou uma tag link (<a>).
2. Na lista Elementos, selecione o elemento que deseja mostrar ou ocultar e clique em Mostrar, Ocultar ou Restaurar (para restaurar a
visibilidade padro).
3. Repita a etapa 2 para todos os demais elementos cuja visibilidade deseja alterar. (Voc pode alterar a visibilidade de vrios elementos com
um nico comportamento.)
4. Clique em OK e verifique se o evento padro est correto.
Para o incio
Para o incio
Para o incio
Para o incio
Para o incio
Para o incio
O comportamento Trocar imagem troca uma imagem por outra alterando o atributo src da tag <img>. Use esse comportamento para criar
sobreposies de boto ou outros efeitos de imagem (incluindo a troca de mais de uma imagem ao mesmo tempo). A insero de uma imagem
de sobreposio adiciona automaticamente o comportamento Trocar imagem sua pgina.
Nota: Como somente o atributo src afetado por esse comportamento, voc deve trocar uma imagem que tenha as mesmas dimenses (altura
e largura) da original. Caso contrrio, a imagem trocada reduzida ou ampliada para ficar com as dimenses da imagem original.
Existe tambm o comportamento Restaurar imagem trocada, que restaura o ltimo conjunto de imagens trocadas para os arquivos de origem
anteriores. Esse comportamento adicionado automaticamente sempre que o comportamento Trocar imagem anexado a um objeto; se a opo
Restaurar ficar selecionada durante a adio de Trocar imagem, nunca selecione o comportamento Restaurar imagem trocada manualmente.
1. Selecione Inserir > Imagem ou clique no boto Imagem, no painel Inserir, para inserir uma imagem.
2. No Inspetor de propriedades, insira um nome para a imagem na caixa de texto esquerda.
No necessrio nomear imagens; elas so nomeadas automaticamente quando voc anexa o comportamento a um objeto. No entanto,
mais fcil diferenciar imagens na caixa de dilogo Trocar imagem nomeando todas as imagens com antecedncia.
3. Repita as etapas 1 e 2 para inserir imagens adicionais.
4. Selecione um objeto (geralmente, a imagem que ser trocada) e escolha Trocar imagem no menu Adicionar comportamento do painel
Comportamentos.
5. Na lista Imagens, selecione a imagem cuja origem deseja alterar.
6. Clique em Procurar para selecionar o novo arquivo de imagem ou insira o caminho e o nome de arquivo da nova imagem na caixa Definir
origem como.
7. Repita as etapas 5 e 6 para qualquer imagem adicional que deseja alterar. Use a mesma ao Trocar imagem para todas as imagens que
deseja alterar de uma vez; caso contrrio, a ao Restaurar imagem trocada correspondente no restaurar todas as imagens.
8. Selecione a opo Pr-carregar imagens para armazenar em cache as novas imagens quando a pgina for carregada.
Isso evita atrasos de download quando as imagens precisarem aparecer.
9. Clique em OK e verifique se o evento padro est correto.
Para o incio
O comportamento Validar formulrio verifica o contedo dos campos de texto especificados para assegurar que o usurio inseriu o tipo de dados
correto. Anexe esse comportamento a campos de texto individuais com o evento onBlur para validar os campos medida que o usurio preenche
o formulrio ou anexe-o ao formulrio com o evento onSubmit para avaliar vrios campos de texto ao mesmo tempo quando o usurio clicar no
boto Enviar. Anexar esse comportamento a um formulrio impede o envio de formulrios com dados invlidos.
1. Selecione Inserir > Formulrio ou clique no boto Formulrio, no painel Inserir, para inserir um formulrio.
2. Selecione Inserir > Formulrio > Campo de texto ou clique no boto Campo de texto no painel Inserir para inserir um campo de texto.
Repita essa etapa para inserir campos de texto adicionais.
3. Escolha um mtodo de validao:
Para validar campos individuais medida que o usurio preenche o formulrio, selecione um campo de texto e selecione Janela >
Comportamentos.
Para validar vrios campos quando o usurio envia o formulrio, clique na tag <form> no seletor de tags, no canto inferior esquerdo da
janela Documento, e escolha Janela > Comportamentos.
4. Selecione Validar formulrio no menu Adicionar comportamento.
5. Siga um destes procedimentos:
Se estiver validando campos individuais, selecione o mesmo campo selecionado na janela Documento na lista Campos.
Se estiver validando vrios campos, selecione um campo de texto na lista Campos.
6. Selecione a opo Obrigatrio caso seja necessrio inserir alguns dados no campo.
7. Selecione uma das seguintes opes de Aceitar:
Usar Tudo Verifica se um campo obrigatrio contm dados; os dados podem ser de qualquer tipo.
Usar Endereo de e-mail Verifica se o campo contm um smbolo @.
Usar Nmero Verifica se o campo contm somente nmeros.
Usar Nmero de Verifica se o campo contm um nmero de um intervalo especfico.
8. Se voc tiver optado por validar vrios campos, repita as etapas 6 e 7 para todos os campos adicionais que desejar validar.
9. Clique em OK.
Se voc estiver validando vrios campos quando o usurio enviar o relatrio, o evento onSubmit aparecer automaticamente no menu
Eventos.
10. Se voc estiver validando campos individuais, verifique se o evento padro onBlur ou onChange. Caso contrrio, selecione um desses
eventos.
Os dois eventos acionam o comportamento Validar formulrio quando o usurio sai do campo. A diferena que onBlur ocorre
independentemente de o usurio ter inserido algum dado no campo e onChange ocorre somente se o usurio tiver alterado o contedo do
campo. O evento onBlur recomendado para campos obrigatrios.
Para o incio
Os comportamentos do Adobe Dreamweaver colocam o cdigo JavaScript nos documentos de modo que os visitantes podem alterar uma
pgina da Web de vrias maneiras ou iniciar algumas tarefas. Um comportamento uma combinao de um evento e uma ao acionada por
esse evento. No painel Comportamentos, adicione um comportamento a uma pgina especificando uma ao e, em seguida, especificando o
evento que aciona essa ao.
Nota: O cdigo Comportamento um cdigo JavaScript do cliente, isto , um cdigo executado nos navegadores, no nos servidores.
Eventos so mensagens geradas com eficincia pelos navegadores que indicam que um visitante da pgina realizou alguma ao. Por exemplo,
quando um visitante move o ponteiro sobre um link, o navegador gera um evento onMouseOver para esse link; em seguida, o navegador verifica
se necessrio chamar algum cdigo JavaScript (especificado na pgina que est sendo visualizada) em resposta. Eventos diferentes so
definidos para diferentes elementos de pgina; por exemplo, na maioria dos navegadores, os eventos onMouseOver e onClick so associados a
links, enquanto onLoad um evento associado a imagens e seo body do documento.
Uma ao um cdigo JavaScript gravado anteriormente para executar uma tarefa, como abrir a janela de um navegador, mostrar ou ocultar um
elemento da API, reproduzir um som ou parar um filme do Adobe Shockwave. As aes fornecidas com o Dreamweaver so compatveis com
vrios navegadores.
Depois de ser anexado a um elemento da pgina, o comportamento chama a ao (cdigo JavaScript) associada a um evento sempre que esse
evento ocorre para o elemento em questo. (Os eventos que podem ser usados para acionar uma determinada ao variam de acordo com o
navegador.) Por exemplo, se voc anexar a ao Mensagem pop-up a um link e especificar que essa ao ser acionada pelo evento
onMouseOver, sua mensagem aparecer sempre que algum usurio colocar um ponteiro nesse link.
Um nico evento pode acionar diversas aes diferentes e voc pode especificar a ordem de ocorrncia dessas aes.
O Dreamweaver fornece aproximadamente 24 aes; aes adicionais podem ser encontradas no site do Exchange em
www.adobe.com/go/dreamweaver_exchange_br, bem como em sites de desenvolvedores de terceiros. Voc pode gravar suas prprias aes se
tiver experincia em JavaScript.
Nota: Os termos comportamento e ao so termos do Dreamweaver, no termos HTML. Do ponto de vista do navegador, uma ao como
qualquer outra parte do cdigo JavaScript.
Para o incio
Voc pode usar o painel Comportamentos (Janela > Comportamentos) para anexar comportamentos aos elementos da pgina (mais
especificamente s tags) e para modificar parmetros de comportamentos anexados anteriormente.
Os comportamentos que j foram anexados ao elemento da pgina selecionado atualmente aparecem na lista de comportamentos (rea principal
do painel), relacionados em ordem alfabtica por evento. Se diversas aes estiverem listadas para o mesmo evento, elas sero executadas na
ordem em que aparecem na lista. Se nenhum comportamento aparecer na lista, isso indica que nenhum comportamento foi anexado ao elemento
selecionado atualmente.
O painel Comportamentos tem as seguintes opes:
Mostrar eventos definidos Exibe somente os eventos que foram anexados ao documento atual. Os eventos so organizados em categorias do
cliente e do servidor. Os eventos de cada categoria esto em uma lista que pode ser expandida. Mostrar eventos definidos a visualizao
padro.
Mostrar todos os eventos Exibe uma lista em ordem alfabtica de todos os eventos de uma determinada categoria.
Adicionar comportamento (+) Exibe um menu de aes que podem ser anexadas ao elemento selecionado atualmente. Quando uma ao
selecionada nessa lista, uma caixa de dilogo aparece na qual possvel especificar parmetros para a ao. Se todas as aes estiverem
esmaecidas, nenhum evento poder ser gerado pelo elemento selecionado.
Remover evento () Remove o evento e a ao selecionados da lista de comportamentos.
Botes de seta para cima e para baixo Mova a ao selecionada para cima ou para baixo na lista de comportamentos para um evento
especfico. Voc pode alterar a ordem das aes somente para um evento especfico; por exemplo, possvel alterar a ordem em que vrias
aes ocorrem para o evento onLoad, mas todas as aes de onLoad permanecem juntas na lista de comportamentos. Os botes de seta esto
desativados para aes que no podem ser movidas para cima ou para baixo na lista.
Eventos Exibe um menu pop-up, exibido somente quando um evento selecionado, de todos os eventos que podem acionar a ao (esse menu
aparece quando voc clica no boto de seta ao lado do nome do evento selecionado). Eventos diferentes podem aparecer dependendo do objeto
selecionado. Se os eventos esperados no aparecerem, verifique se o elemento de pgina ou tag correto est selecionado. (Para selecionar uma
tag especfica, use o seletor de tags no canto inferior esquerdo da janela Documento.)
Nota: Os nomes de evento entre parnteses esto disponveis somente para links; a seleo de um desses nomes de evento adiciona
automaticamente um link nulo ao elemento de pgina selecionado e anexa o comportamento a esse link e no ao elemento propriamente dito. O
link nulo especificado como href="javascript:;" no cdigo HTML.
Sobre eventos
Para o incio
Cada navegador fornece um conjunto de eventos que podem ser associados s aes listadas no menu Aes (+) do painel Comportamento.
Quando um visitante de sua pgina da Web interage com a pgina (por exemplo, clicando em uma imagem), o navegador gera eventos; esses
eventos podem ser usados para chamar funes JavaScript que executam uma ao. O Dreamweaver fornece muitas aes comuns que podem
ser acionadas por esses eventos.
Para obter os nomes e as descries dos eventos fornecidos por cada navegador, acesse o Centro de suporte do Dreamweaver em
www.adobe.com/go/dreamweaver_support_br.
Eventos diferentes podem aparecer no menu Eventos dependendo do objeto selecionado. Para saber quais eventos so suportados por um
determinado navegador para um determinado elemento de pgina, insira o elemento de pgina no seu documento e anexe um comportamento a
ele; em seguida, observe o menu Eventos no painel Comportamentos. (Por padro, os eventos so da lista de eventos do HTML 4.01 e so
suportados pela maioria dos navegadores modernos.) Os eventos podem ser desativados se os objetos relevantes ainda no existirem na pgina
ou se o objeto selecionado no puder receber eventos. Se os eventos esperados no aparecerem, voc dever verificar se o objeto correto est
selecionado.
Se voc estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecero entre parnteses. Esses eventos
esto disponveis somente para links. Quando um deles selecionado, o Dreamweaver coloca uma tag <a> antes e depois da imagem para
definir um link nulo. O link nulo representado por javascript:; na caixa Link do Inspetor de propriedades. Voc pode alterar o valor do link se
desejar transform-lo em um link real para outra pgina, mas se o link do JavaScript for excludo sem ser substitudo por outro link, o
comportamento ser removido.
Para ver quais tags podem ser usadas com um determinado evento em um determinado navegador, procure o evento em um dos arquivos da
pasta Dreamweaver/Configurao/Comportamentos/Eventos.
Aplicar um comportamento
Para o incio
Voc pode anexar comportamentos ao documento inteiro (isto , tag <body>) ou a links, imagens, elementos de formulrio e diversos outros
elementos HTML.
O navegador de destino selecionado determina quais eventos so suportados para um determinado elemento.
possvel especificar mais de uma ao para cada evento. As aes ocorrem na ordem em que esto listadas na coluna Aes do painel
Comportamentos, mas essa ordem pode ser alterada.
1. Selecione um elemento na pgina, como uma imagem ou um link.
Para anexar um comportamento pgina inteira, clique na tag <body> no seletor de tags, no canto inferior esquerdo da janela Documento.
2. Escolha Janela > Comportamentos.
3. Clique no boto de adio (+) e selecione uma ao no menu Adicionar comportamento.
As aes que esto desativadas no menu no podem ser escolhidas. Elas podem estar desativadas porque um objeto necessrio no
existe no documento atual. Por exemplo, a ao Controlar Shockwave ou SWF estar desativada se o documento no contiver nenhum
arquivo SWF ou Shockwave.
Quando uma ao selecionada, uma caixa de dilogo aparece exibindo parmetros e instrues para a ao.
4. Insira os parmetros da ao e clique em OK.
Todas as aes fornecidas no Dreamweaver funcionam em navegadores modernos. Algumas aes no funcionam em navegadores mais
antigos, mas no provocaro erros.
Nota: Os elementos de destino requerem uma ID exclusiva. Por exemplo, se desejar aplicar o comportamento Trocar imagem em uma
imagem, ser necessrio fornecer uma ID. Se voc no especificar uma ID para o elemento, o Dreamweaver especificar uma
automaticamente.
5. O evento padro que acionar a ao aparece na coluna Eventos. Se no for o evento desejado, selecione outro no menu pop-up Eventos.
(Para abrir o menu Eventos, selecione um evento ou uma ao no painel Comportamentos e clique na seta para baixo preta que aparece
entre o nome do evento e o nome da ao.)
Para o incio
Depois de anexar um comportamento, voc pode alterar o evento que aciona a ao, adicionar ou remover aes e alterar parmetros de aes.
1. Selecione um objeto com um comportamento anexado.
2. Escolha Janela > Comportamentos.
3. Faa as alteraes:
Para editar os parmetros de uma ao, clique duas vezes no nome da ao ou selecione-a e pressione Enter (Windows) ou Return
(Macintosh); em seguida, altere os parmetros na caixa de dilogo e clique em OK.
Para alterar a ordem das aes de um determinado evento, selecione uma ao e clique na seta para cima ou para baixo. Se preferir,
selecione a ao e corte e cole-a no local desejado entre as outras aes.
Para excluir um comportamento, selecione-o e clique no boto de subtrao () ou pressione Excluir.
Atualizar um comportamento
Para o incio
Para o incio
Acessibilidade
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Dreamweaver e acessibilidade
Sobre contedo acessvel
Uso de leitores de tela com o Dreamweaver
Suporte a recursos de acessibilidade do sistema operacional
Otimizar o espao de trabalho tendo em vista um design de pgina acessvel
Recurso do relatrio de validao da acessibilidade do Dreamweaver
Navegar no Dreamweaver usando o teclado
Para o incio
Acessibilidade se refere criao de sites e produtos da Web utilizveis por pessoas com deficincias visual, auditiva, motora entre outras. Entre
os exemplos de recursos de acessibilidade para softwares e sites esto o suporte ao leitor de tela, equivalentes em texto para grficos, atalhos de
teclado, mudana das cores de exibio para alto contraste etc. O Dreamweaver fornece ferramentas que o tornam acessvel e ferramentas que
ajudam a criar contedo acessvel.
Para os desenvolvedores do Dreamweaver que precisam usar recursos de acessibilidade, o aplicativo oferece suporte ao leitor de tela,
navegao por teclado e acessibilidade do sistema operacional.
Para designers que precisam criar contedo acessvel, o Dreamweaver ajuda voc na criao de pginas acessveis que apresentam contedo
til para leitores de tela e que so compatveis com as diretrizes do governo federal. Por exemplo, as caixas de dilogo solicitam a voc aplicar
atributos de acessibilidade como, por exemplo, equivalentes em texto de uma imagem ao inserir elementos de pgina. Dessa forma, quando a
imagem exibida em uma pgina para um usurio com deficincia visual, o leitor de tela l a descrio.
Nota: Para obter mais informaes sobre duas iniciativas de acessibilidade significativas, consulte a Web Accessibility Initiative do World Wide
Web Consortium (www.w3.org/wai) e a seo 508 do U.S. Federal Rehabilitation Act (www.section508.gov).
Nenhuma ferramenta de criao pode automatizar o processo de desenvolvimento. A criao de sites acessveis exige que voc compreenda os
requisitos de acessibilidade e tome decises contnuas sobre como os usurios com deficincia interagem com as pginas da Web. A melhor
forma de verificar se um site acessvel se d pelo planejamento deliberado, pelo desenvolvimento, pelo teste e pela avaliao.
Para o incio
Um leitor de tela dita o texto exibido na tela do computador. Ele tambm l informaes no textuais como, por exemplo, rtulos de boto ou
descries de imagem do aplicativo, fornecidas em tags de acessibilidade ou atributos durante a criao.
Como designer do Dreamweaver, voc pode usar um leitor de tela para ajudar na criao das pginas da Web. O leitor de tela comea a leitura
no canto superior esquerdo da janela Documento.
O Dreamweaver d suporte aos leitores de tela JAWS para Windows, da Freedom Scientific (www.freedomscientific.com) e Window-Eyes, da GW
Micro (www.gwmicro.com).
Para o incio
O Dreamweaver d suporte a recursos de acessibilidade dos sistemas operacionais Windows e Macintosh. Por exemplo, no Macintosh, voc
define as preferncias visuais na caixa de dilogo Universal Access Preferences (Apple > System Preferences). As configuraes so refletidas
no espao de trabalho do Dreamweaver.
Tambm h suporte configurao de alto contraste do sistema operacional Windows. Voc ativa essa opo por meio do Painel de Controle do
Windows e isso afeta o Dreamweaver da seguinte forma:
Caixas de dilogo e painis usam as configuraes da cor do sistema. Por exemplo, caso voc defina a cor como Branco e Preto, todas as
caixas de dilogo e painis do Dreamweaver so exibidos com uma cor de primeiro plano branca e a cor do plano de fundo preta.
A Visualizao de cdigo usa a cor de texto do sistema e da janela. Por exemplo, caso voc defina a cor do sistema como Branco e Preto
e, em seguida, altere as cores do texto em Editar > Preferncias > Codificao por cores, o Dreamweaver ignora essas configuraes de
cor e exibe o texto do cdigo com a cor de primeiro plano branca e a cor do plano de fundo preta.
A Visualizao de design usa as cores de plano de fundo e de texto que voc definiu em Modificar > Propriedades da pgina para que as
pginas que voc projetou processem cores de acordo com o navegador.
Para o incio
Ao criar pginas acessveis, voc precisa associar informaes como, por exemplo, rtulos e descries a objetos de pgina para que o
contedo seja acessvel a todos os usurios.
Para fazer isso, ative a caixa de dilogo Acessibilidade de cada objeto para que o Dreamweaver solicite informaes de acessibilidade quando
voc inserir objetos. Voc pode ativar uma caixa de dilogo para qualquer um dos objetos na categoria Acessibilidade em Preferncias.
1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).
2. Selecione Acessibilidade na lista Categoria esquerda, selecione um objeto, defina uma das seguintes opes e clique em OK.
Mostrar os atributos na insero Selecione os objetos para os quais voc deseja ativar as caixas de dilogo de acessibilidade. Por
exemplo, objetos de formulrio, quadros, mdia e imagens.
Manter foco no painel Mantm foco no painel, o que o torna acessvel ao leitor de tela. (Caso voc no selecione essa opo, o foco
permanece na Visualizao de design ou de cdigo quando um usurio abre um painel.)
Processamento fora da tela Selecione essa opo ao usar um leitor de tela.
Nota: Os atributos de acessibilidade so exibidos na caixa de dilogo Inserir tabela quando voc insere uma nova tabela.
Para o incio
Para o incio
Voc pode usar o teclado para navegar em painis, inspetores, caixas de dilogo, quadros e tabelas sem usar um mouse.
Nota: S h suporte navegao em abas e ao uso de teclas de seta no Windows.
Navegar em painis
1. Na janela Documento, pressione Control+F6 para mudar o foco para um painel.
Uma linha pontilhada em torno do ttulo do painel indica que o foco est no painel. O leitor de tela l a barra de ttulo do painel que est em
foco.
2. Pressione Control+F6 novamente para alternar o foco at que ele esteja no painel que voc deseja trabalhar. (Pressione Control+Shift+F6
para alternar o foco para o painel anterior.)
3. Caso o painel no qual voc deseja trabalhar no esteja aberto, use os atalhos de teclado no menu do Windows para exibir o painel
apropriado e, em seguida, pressione Control+F6.
Caso o painel no qual voc deseja trabalhar esteja aberto, mas no expandido, coloque o foco na barra de ttulo do painel e, em seguida,
pressione a Barra de espao. Pressione a Barra de espao novamente para recolher o painel.
4. Pressione a tecla Tab para percorrer as opes do painel.
5. Use as teclas de seta quando apropriado:
Caso uma opo tenha escolhas, use as teclas de seta para percorr-las e, em seguida, pressione a Barra de espao para fazer uma
seleo.
Caso haja abas no grupo de painis para abrir outros painis, coloque o foco na aba de abertura e, em seguida, use as teclas de seta
para esquerda ou para direita para abrir as outras abas. Depois de abrir uma nova aba, pressione a tecla Tab para percorrer as opes
do painel.
Navegar em quadros
Caso o documento contenha quadros, voc pode usar as teclas de seta a fim de alternar o foco para um quadro.
Selecionar um quadro
1. Pressione Alt+seta para baixo a fim de colocar o ponto de insero na janela Documento.
2. Pressione Alt+seta para cima a fim de selecionar o quadro com o foco atualmente.
3. Continue pressionando Alt+seta para cima a fim de alternar o foco para o conjunto de molduras e, em seguida, para os conjuntos de
molduras pai, caso haja algum aninhado.
4. Pressione Alt+seta para baixo a fim de alternar o foco para um conjunto de molduras filho ou um nico quadro dentro do conjunto de
molduras.
5. Com o foco em um nico quadro, pressione Alt+seta para esquerda ou para direita a fim de se mover entre os quadros.
Atalhos do teclado
Criar uma folha de referncia para o conjunto de atalhos atual
Personalizar atalhos de teclado
Sobre atalhos de teclado e teclados que no so do alfabeto ingls (EUA)
Para o incio
Uma folha de referncia um registro do conjunto de atalhos atual. As informaes so armazenadas em uma tabela HTML. Voc pode
visualizar a folha de referncia em um navegador da Web ou imprimi-la.
1. Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).
2. Clique no boto Exportar conjunto como HTML, que o terceiro boto na parte superior da caixa de dilogo.
3. Na caixa de dilogo Salvar exibida, insira o nome da folha de referncia e selecione o local adequado para salvar o arquivo.
Para o incio
Use o Editor de atalho de teclado para criar suas prprias teclas de atalho, incluindo atalhos para snippets de cdigo. Voc tambm pode
remover atalhos, editar atalhos existentes e selecionar um conjunto predefinido de atalhos no Editor de atalho de teclado.
Para o incio
Os atalhos de teclado padro do Dreamweaver funcionam principalmente em teclados padro do alfabeto ingls (EUA). Os teclados de outros
pases (incluindo os produzidos no Reino Unido) talvez no forneam a funcionalidade necessria para utilizar esses atalhos. Se seu teclado no
der suporte a alguns atalhos ativados pelo Dreamweaver, sua funcionalidade ser desativada.
Para personalizar atalhos do teclado que funcionam com teclados que no so padro do alfabeto ingls (EUA), consulte Alterao dos
mapeamentos de atalho de teclado em Extenso do Dreamweaver.
Mais tpicos da Ajuda
XML
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.
Para o incio
A linguagem de markup extensvel (XML) uma linguagem que permite estruturar informaes. Como o HTML, o XML permite estruturar
informaes com tags, mas as tags XML no so predefinidas como as tags HTML. Em vez disso, o XML permite criar tags que definem melhor
sua estrutura de dados (esquema). As tags so aninhadas em outras para criar um esquema de tags pai e filho. Como a maioria das tags HTML,
todas as tags de um esquema XML tm uma tag de abertura e uma de fechamento.
O exemplo a seguir mostra a estrutura bsica de um arquivo XML:
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Adobe Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
Nesse exemplo, cada tag <book> pai contm trs tags filho: <pubdate>, <title> e <author>. No entanto, cada tag <book> tambm uma tag filho
da tag <mybooks>, que a tag no maior nvel do esquema. Voc pode nomear e estruturar as tags XML de qualquer maneira, contanto que as
tags sejam aninhadas corretamente em outras e que cada tag de abertura seja atribuda a uma tag de fechamento correspondente.
Os documentos XML no contm nenhuma formatao: so apenas recipientes de informaes estruturadas. Depois de criar um esquema XML,
voc pode usar a linguagem de folha de estilos extensvel (XSL) para exibir as informaes. Assim como as folhas de estilos em cascata (CSS)
permitem formatar o HTML, o XSL permite formatar dados XML. Voc pode definir estilos, elementos de pgina, layout e outros itens em um
arquivo XSL e anex-lo a um arquivo XML para que, quando um usurio visualize os dados XML em um navegador, os dados sejam formatados
de acordo com o que foi definido no arquivo XSL. O contedo (os dados XML) e a apresentao (definida pelo arquivo XSL) so totalmente
separados, fornecendo a voc maior controle sobre a exibio das informaes em uma pgina da Web. Em sntese, XSL uma tecnologia de
apresentao do XML, onde a sada principal uma pgina HTML.
As transformaes de linguagem de folha de estilos extensvel (XSLT) uma linguagem de subconjunto de XSL que, na realidade, permite exibir
dados XML em uma pgina da Web e "transform-los", junto com estilos XSL, em informaes legveis e com estilo em forma de HTML. Voc
pode usar o Dreamweaver para criar pginas XSLT que permitem executar transformaes XSL usando um servidor de aplicativo em um
navegador. Em uma transformao XSL do servidor, o servidor transforma o XML e o XSL e os exibe na pgina. Em uma transformao do
cliente, um navegador (como o Internet Explorer) faz esse trabalho.
A abordagem adotada (transformaes do servidor ou do cliente) depende do que voc est tentando atingir como resultado final, das tecnologias
disponveis no seu caso, do nvel de acesso a arquivos de origem XML e de outros fatores. As duas abordagens tm suas vantagens e
desvantagens. Por exemplo, as transformaes do servidor funcionam em todos os navegadores, enquanto as transformaes do cliente esto
restritas somente a navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). As transformaes do servidor permitem
exibir dados XML dinamicamente a partir do seu prprio servidor ou de qualquer outro lugar da Web, enquanto as transformaes do cliente
devem usar dados XML que esto hospedados localmente no seu prprio servidor da Web. Finalmente, as transformaes do servidor exigem a
implantao das pginas em um servidor de aplicativo configurado, enquanto as transformaes do cliente precisam somente do acesso a um
servidor da Web.
Para assistir a um tutorial e saber mais sobre XML, consulte www.adobe.com/go/vid0165_br.
Para o incio
O Dreamweaver fornece mtodos de criao de pginas XSLT que permitem executar transformaes XSL do servidor. Quando um servidor de
aplicativo executa a transformao XSL, o arquivo que contm os dados XML pode residir no seu prprio servidor ou em qualquer outro lugar da
Web. Alm disso, qualquer navegador pode exibir os dados transformados. No entanto, a implantao de pginas para transformaes do
servidor um pouco complexa e requer o acesso a um servidor de aplicativo.
Ao trabalhar com transformaes XSL do servidor, voc pode usar o Dreamweaver para criar pginas XSLT que geram documentos HTML
completos (pginas XSLT inteiras) ou fragmentos XSLT que geram uma parte de um documento HTML. Uma pgina XSLT inteira similar a uma
pgina HTML normal. Ela contm uma tag <body> e uma tag <head> e permite exibir uma combinao de dados HTML e XML na pgina. Um
fragmento XSLT uma parte do cdigo, usado por um documento separado, que exibe dados XML formatados. Diferente de uma pgina XSLT
inteira, esse fragmento um arquivo independente que no contm nenhuma tag <body> ou <head>. Se desejar exibir dados XML em uma
pgina sua, crie uma pgina XSLT inteira e associe seus dados XML a essa pgina. Se, por outro lado, voc desejar exibir dados XML em uma
seo especfica de uma pgina dinmica existente (por exemplo, uma pgina inicial dinmica para uma loja de artigos de esporte, com placares
de um feed RSS exibidos em uma lateral da pgina), crie um fragmento XSLT e insira uma referncia a ele na pgina dinmica. A criao de
fragmentos XSLT e seu uso em conjunto com outras pginas dinmicas para exibir dados XML o cenrio mais comum.
A primeira etapa da criao desses tipos de pginas criar o fragmento XSLT. O fragmento um arquivo separado que contm o layout, a
formatao e outras informaes dos dados XML que voc eventualmente pode exibir na pgina dinmica. Depois de criar o fragmento XSLT,
insira uma referncia a ele em sua pgina dinmica (por exemplo, uma pgina PHP ou ColdFusion). A referncia inserida ao fragmento funciona
de modo semelhante a uma incluso do servidor (SSI) os dados XML formatados (o fragmento) residem em um arquivo separado, enquanto a
Visualizao de design exibe um alocador de espao para o fragmento na pgina dinmica propriamente dita. Quando um navegador solicita a
pgina dinmica que contm a referncia ao fragmento, o servidor processa a instruo includa e criam um novo documento no qual o contedo
formatado do documento (e no o alocador de espao) exibido.
1. Navegador solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo 3. Servidor de aplicativo
rastreia a pgina em busca de instrues e obtm fragmento do XSLT. 4. Servidor de aplicativo executa transformao (l o fragmento do XSLT,
obtm e formata os dados xml). 5. Servidor de aplicativo insere o fragmento transformado na pgina e a passa de volta para o servidor
Web. 6. Servidor Web envia a pgina concluda para o navegador.
Use o comportamento Transformao XSL do servidor para inserir a referncia a um fragmento XSLT em uma pgina dinmica. Quando a
referncia inserida, o Dreamweaver gera uma pasta incluses/MM_XSLTransform/ na pasta raiz do site que contm um arquivo de biblioteca de
runtime. O servidor de aplicativo usa as funes definidas nesse arquivo ao transformar os dados XML especificados. O arquivo responsvel por
procurar os dados XML e os fragmentos XSLT, executar a transformao XSL e exibir os resultados na pgina da Web.
O arquivo que contm o fragmento XSLT, o arquivo XML que contm seus dados e o arquivo de biblioteca gerado em runtime devem estar no
servidor da sua pgina para serem exibidos corretamente. (Se voc selecionar um arquivo XML remoto como fonte de dados, de um feed RSS,
por exemplo, esse arquivo obviamente deve residir em qualquer outro lugar da Internet.)
Voc tambm pode usar o Dreamweaver para criar pginas XSLT inteiras para serem usadas com transformaes do servidor. Uma pgina
XSLT inteira funciona exatamente como um fragmento XSLT; somente ao inserir a referncia pgina XSLT inteira usando o comportamento
Transformao XSL do servidor voc est inserindo o contedo completo de uma pgina HTML. Desse modo, todo o HTML da pgina dinmica
(a pgina .cfm, .php ou .asp que age como a pgina de recipiente) deve ser removido antes de inserir a referncia.
O Dreamweaver suporta transformaes XSL para pginas ColdFusion, ASP e PHP.
Nota: Seu servidor deve ser configurado corretamente para executar transformaes do servidor. Para obter mais informaes, entre em contato
com o administrador do servidor.
Para o incio
Voc pode executar transformaes XSL no cliente sem usar um servidor de aplicativo. Voc pode usar o Dreamweaver para criar uma pgina
XSLT inteira que far isso; no entanto, as transformaes do cliente requerem a manipulao do arquivo XML que contm os dados que deseja
exibir. Alm disso, as transformaes do cliente funcionam somente em navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e
Firefox 1.0.2). Para obter mais informaes sobre os navegadores que suportam ou no as transformaes XSL, consulte
www.w3schools.com/xsl/xsl_browsers.asp_br.
Primeiro, crie uma pgina XSLT inteira e anexe uma fonte de dados XML. (O Dreamweaver solicita que a fonte de dados seja anexada quando a
nova pgina criada.) Voc pode criar uma pgina XSLT totalmente nova ou converter uma pgina HTML existente em uma pgina XSLT. Ao
converter uma pgina HTML existente em uma pgina XSLT, voc deve anexar uma fonte de dados XML usando o painel Ligaes (Janela >
Ligaes).
Depois de criar a pgina XSLT, voc deve vincul-la ao arquivo XML que contm os dados XML inserindo uma referncia pgina XSLT no
prprio arquivo XML (assim como voc insere uma referncia a uma folha de estilos CSS externa na seo <head> de uma pgina HTML). Os
visitantes do seu site devem visualizar o arquivo XML (no a pgina XSLT) em um navegador. Quando os visitantes acessam a pgina, o
navegador executa a transformao XSL e exibe os dados XML formatados pela pgina XSLT vinculada.
A relao entre as pginas XML e XSLT vinculadas conceitualmente similar, embora seja diferente do modelo CSS externo/pgina HTML.
Quando houver uma pgina HTML que contm o contedo (como texto), use uma folha de estilos externa para formatar esse contedo. A pgina
HTML determina o contedo e o cdigo CSS externo, que o usurio nunca v, determina a apresentao. Com XSLT e XML, a situao
inversa. O arquivo XML (que o usurio nunca v na forma bruta) determina o contedo, enquanto a pgina XSLT determina a apresentao. A
pgina XSLT contm as tabelas, o layout, os grficos e outros itens que o HTML normalmente contm. Quando um usurio visualiza o arquivo
XML em um navegador, a pgina XSLT formata o contedo.
1. Navegador solicita arquivo XML. 2. Servidor responde enviando arquivo XML ao navegador. 3. Navegador l a diretiva XML e chama o
arquivo XSLT. 4. Servidor envia arquivo XSLT ao navegador. 5. Navegador transforma e exibe os dados XML no navegador.
Quando voc usa o Dreamweaver para vincular uma pgina XSLT a uma pgina XML, o Dreamweaver insere o cdigo apropriado na parte
superior da pgina XML. Se voc possuir a pgina XML que est sendo vinculada (isto , se o arquivo XML residir exclusivamente no seu
servidor da Web), basta usar o Dreamweaver para inserir o cdigo apropriado que vincula as duas pginas. Quando voc possui o arquivo XML,
as transformaes XSL executadas pelo cliente so totalmente dinmicas. Desse modo, sempre que voc atualiza os dados no arquivo XML,
qualquer sada HTML que usa a pgina XSLT vinculada ser atualizada automaticamente com as novas informaes.
Nota: Os arquivos XML e XSL usados para as transformaes do cliente devem residir no mesmo diretrio. Caso contrrio, o navegador ler o
arquivo XML e encontrar a pgina XSLT da transformao, mas no encontrar os ativos (folhas de estilos, imagens, etc.) definidos pelos links
relativos na pgina XSLT.
Se voc no possuir a pgina XML que est sendo vinculada (por exemplo, se desejar usar os dados XML de um feed RSS de algum outro lugar
da Web), o fluxo de trabalho ser um pouco mais complicado. Para executar transformaes do cliente usando dados XML de uma fonte externa,
primeiro faa download do arquivo de origem XML no mesmo diretrio onde reside a pgina XSLT. Quando a pgina XML estiver no seu site
local, voc poder usar o Dreamweaver para adicionar o cdigo apropriado que vincula a pgina XML pgina XSLT e postar as duas pginas (o
arquivo XML baixado e a pgina XSLT vinculada) no seu servidor da Web. Quando o usurio visualiza a pgina XML em um navegador, a pgina
XSLT formata o contedo, assim como no exemplo anterior.
A desvantagem de executar transformaes XSL do cliente nos dados XML provenientes de uma fonte externa o fato de os dados XML serem
apenas parcialmente dinmicos. O arquivo XML baixado e alterado simplesmente um instantneo do arquivo que reside em algum outro
lugar da Web. Se o arquivo XML original for alterado na Web, voc deve fazer download do arquivo novamente, vincul-lo pgina XSLT e
postar o arquivo XML novamente no seu servidor da Web. O navegador processa somente os dados recebidos do arquivo XML no servidor da
Web, no os dados contidos no arquivo XML de origem.
Para o incio
O objeto XSLT de regio repetitiva permite exibir elementos repetidos de um arquivo XML em uma pgina. Qualquer regio que contm um
alocador de espao de dados XML pode ser transformada em uma regio repetitiva. No entanto, as regies mais comuns so tabelas, linhas de
tabelas ou uma srie de linhas de tabelas.
O exemplo a seguir mostra como o objeto XSLT de regio repetitiva aplicado em uma linha da tabela que exibe informaes sobre o cardpio
de um restaurante. A linha inicial exibe trs elementos diferentes do esquema XML: item, descrio e preo. Quando o objeto XSLT de regio
repetitiva aplicado na linha da tabela e a pgina processada por um servidor de aplicativo ou por um navegador, a tabela repetida com
dados exclusivos inseridos em cada nova linha da tabela.
Quando um objeto XSLT de regio repetitiva aplicado em um elemento na janela Documento, um fino contorno cinza com abas exibido ao
redor da regio repetida. Ao visualizar seu trabalho em um navegador (Arquivo > Visualizar no navegador), o contorno cinza desaparece e a
seleo expandida para exibir os elementos repetitivos especificados no arquivo XML, assim como na ilustrao anterior.
Ao adicionar o objeto XSLT de regio repetitiva pgina, o comprimento do alocador de espao de dados XML truncado na janela Documento.
Isso acontece porque o Dreamweaver atualiza a expresso XPath (Linguagem de caminho XML) do alocador de espao de dados XML de modo
que haja relao com o caminho do elemento repetitivo.
Por exemplo, o cdigo a seguir referente a uma tabela que contm dois alocadores de espao dinmicos, sem um objeto XSLT de regio
repetitiva aplicado:
<table width="500" border="1">
<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
O cdigo a seguir referente mesma tabela com o objeto XSLT de regio repetitiva aplicado:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
No exemplo anterior, o Dreamweaver atualizou o XPath dos itens que esto na Regio repetitiva (ttulo e descrio) para relacion-los com o
XPath das tags <xsl:for-each> delimitadoras e no ao documento completo.
O Dreamweaver gera expresses XPath relativas ao contexto em outros casos tambm. Por exemplo, se voc arrastar um alocador de espao de
dados XML para uma tabela que j tem um objeto XSLT de regio repetitiva aplicado, o Dreamweaver exibir automaticamente o XPath relativo
ao XPath existente nas tags <xsl:for-each> delimitadoras.
Para o incio
Ao usar a opo Visualizar no navegador (Arquivo > Visualizar no navegador) para visualizar os dados XML inseridos em um fragmento XSLT ou
em uma pgina XSLT inteira, o mecanismo que executa a transformao XSL varia de acordo com a situao. Para pginas dinmicas que
contm fragmentos XSLT, o servidor de aplicativo sempre executa a transformao. Em outras situaes, o Dreamweaver ou o navegador pode
executar a transformao.
A tabela a seguir resume as situaes em que a opo Visualizar no navegador usada e os mecanismos que executam as respectivas
transformaes:
Tipo de pgina visualizada no navegador
Servidor de aplicativo
Dreamweaver
Navegador
Os tpicos a seguir fornecem diretrizes para ajudar voc a determinar os mtodos de visualizao adequados, de acordo com suas necessidades.
Visualizao de pginas para transformaes do servidor
No caso das transformaes do servidor, o contedo que o visitante do site v transformado pelo servidor de aplicativo. Ao criar pginas XSLT
e pginas dinmicas para serem usadas com transformaes do servidor, recomendado visualizar sempre a pgina dinmica que contm o
fragmento XSLT em vez do prprio fragmento. No primeiro cenrio, use o servidor de aplicativo, que garante a consistncia da sua visualizao
com o que os visitantes do site vero ao acessarem sua pgina. No ltimo cenrio, o Dreamweaver executa a transformao e pode fornecer
resultados ligeiramente inconsistentes. Voc pode usar o Dreamweaver para visualizar o fragmento XSLT durante o processo de criao, mas
ver os resultados mais precisos do processamentos dos dados se usar o servidor de aplicativo para visualizar a pgina dinmica depois de
inserir o fragmento XSLT.
Visualizao de pginas para transformaes do cliente
No caso das transformaes do cliente, o contedo que o visitante do site v transformado por um navegador. Para tal, adicione um link do
arquivo XML pgina XSLT. Se voc abrir o arquivo XML no Dreamweaver e visualiz-lo em um navegador, forar o navegador a carregar o
arquivo XML e executar a transformao. Desse modo, voc tem a mesma experincia do visitante do site.
No entanto, essa abordagem dificulta a depurao da pgina porque o navegador transforma o XML e gera o HTML internamente. Se selecionar
a opo Exibir fonte do navegador para depurar o HTML gerado, voc ver somente o XML original recebido pelo navegador, no o HTML
completo (tags, estilos, etc.) responsvel pelo processamento da pgina. Para ver o HTML completo ao visualizar o cdigo-fonte, voc deve
visualizar a pgina XSLT em um navegador.
Visualizao de pginas XSLT inteiras e de fragmentos XSLT
Ao criar pginas XSLT inteiras e fragmentos XSLT, visualize seu trabalho para verificar se os dados esto sendo exibidos corretamente. Se a
opo Visualizar no navegador for usada para exibir uma pgina XSLT inteira ou um fragmento XSLT, o Dreamweaver executar a
transformao usando um mecanismo interno. Esse mtodo gera resultados rpidos e facilita a criao e a depurao incremental da pgina. Ele
tambm permite visualizar o HTML completo (tags, estilos, etc.) por meio da seleo da opo Exibir fonte no navegador.
Nota: Esse mtodo de visualizao normalmente usado quando voc comea a criar pginas XSLT, independentemente do uso do cliente ou
do servidor para transformar os dados.
Mais tpicos da Ajuda
Tutorial de XML
Para o incio
Em XSLT, alguns caracteres no so permitidos em determinados contextos. Por exemplo, voc no pode usar o sinal de menor que (<) e o E
comercial (&) no texto entre tags ou em um valor de atributo. O mecanismo de transformao XSLT gerar um erro se esses caracteres forem
usados de modo incorreto. Para solucionar o problema, voc pode especificar entidades de caractere para substituir os caracteres especiais.
Uma entidade de caractere uma sequncia de caracteres que representa outros caracteres. As entidades de caractere so nomeadas ou
numeradas. Uma entidade nomeada comea com um E comercial (&) seguido pelo nome ou por caracteres, e termina com ponto-e-vrgula (;).
Por exemplo, < representa o sinal menor que (<). As entidades numeradas tambm comeam e terminam da mesma maneira, exceto pela
presena de uma cerquilha (#) e de um nmero que especifica o caractere.
O XSLT tem as cinco entidades predefinidas a seguir:
Caractere
Cdigo da entidade
<
& (E comercial)
&
>
" (aspas)
"
(apstrofe)
'
Se voc usar outras entidades de caractere em um arquivo XSL, precisar defini-las na seo DTD do arquivo XSL. O Dreamweaver fornece
vrias definies de entidade padro que podem ser observadas na parte superior de um arquivo XSL criado no Dreamweaver. Essas entidades
padro abrangem uma ampla seleo dos caracteres usados com mais frequncia.
Ao visualizar o arquivo XSL em um navegador, o Dreamweaver verifica o arquivo XSL para observar se h entidades no definidas e notifica
caso alguma for encontrada.
Se voc visualizar um arquivo XML anexado a um arquivo XSLT ou visualizar uma pgina do servidor com uma transformao XSLT, o servidor
ou o navegador (em vez do Dreamweaver) enviar uma notificao sobre uma entidade no definida. O exemplo a seguir mostra uma mensagem
que pode ser exibida no Internet Explorer quando voc solicita um arquivo XML transformado por um arquivo XSL com uma definio de entidade
ausente:
Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line
28, Position 20
<p class=''test''>ä</p>
-------------------^
Para corrigir o erro da pgina, adicione a definio de entidade manualmente pgina.
Adicionar definies de entidade aos arquivos XSL criados pelo Dreamweaver por padro
1. Localize o seguinte arquivo de configurao na pasta do aplicativo Dreamweaver e abra-o em qualquer editor de texto:
Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml
2. Localize a declarao mm_xslt_1:
<documenttypedeclaration id="mm_xslt_1">
3. Insira as novas tags de entidade na lista de tags de entidade da seguinte maneira:
<!ENTITY entityname "entitycode;">
4. Salve o arquivo e reinicie o Dreamweaver.
Para o incio
Voc pode executar transformaes XSL do cliente. Saiba mais sobre as transformaes XSL do servidor e do cliente e sobre como usar XML e
XSL com pginas da Web antes de criar pginas que exibem dados XML.
O fluxo de trabalho geral para executar transformaes XSL do cliente descrito a seguir (cada etapa descrita em outros tpicos):
1. Configure um site do Dreamweaver.
2. Crie uma pgina XSLT ou converta uma pgina HTML em XSLT.
No site do Dreamweaver, crie uma pgina XSLT inteira.
Converta uma pgina HTML existente em uma pgina XSLT inteira.
3. Anexe uma fonte de dados XML pgina (se ainda no tiver feito isso).
O arquivo XML anexado deve residir no mesmo diretrio da pgina XSLT.
4. Associe os dados XML pgina XSLT.
5. Exiba os dados XML ligando os dados pgina XSLT inteira.
6. Se for apropriado, adicione um objeto XSLT de regio repetitiva tabela ou linha de tabela que contenha os
alocadores de espao de dados XML.
7. Anexe a pgina XSLT pgina XML.
8. Poste a pgina XML e a pgina XSLT vinculada no seu servidor da Web.
9. Visualize a pgina XML em um navegador.
Ao fazer isso, o navegador transforma os dados XML, formata esses dados com a pgina XSLT e exibe a pgina com estilo no navegador.
Para o incio
Voc deve usar uma pgina XSLT inteira para transformaes do cliente. (Os fragmentos XSLT no funcionam nesse tipo de transformao.)
Siga essas etapas gerais para criar, ligar dados XML e formatar pginas XSLT para transformaes do cliente:
1. Crie a pgina XSLT.
2. Exiba dados na pgina XSLT.
3. Exiba elementos repetitivos na pgina XSLT.
Para o incio
Depois de criar uma pgina XSLT inteira com alocadores de espao de contedo dinmico para os dados XML, voc deve inserir uma referncia
pgina XSLT na pgina XML.
Nota: Os arquivos XML e XSL usados para as transformaes do cliente devem residir no mesmo diretrio. Caso contrrio, o navegador ler o
arquivo XML e encontrar a pgina XSLT da transformao, mas no encontrar os ativos (folhas de estilos, imagens, etc.) definidos pelos links
relativos na pgina XSLT.
1. Abra o arquivo XML que deseja vincular com a pgina XSLT.
2. Selecione Comandos > Anexar uma folha de estilos XSLT.
3. Na caixa de dilogo, clique no boto Procurar, navegue at a pgina XSLT que deseja vincular, selecione-a e clique em OK.
4. Clique em OK para fechar a caixa de dilogo e inserir a referncia pgina XSLT na parte superior do documento XML.
Mais tpicos da Ajuda
Para o incio
Voc pode executar transformaes XSL do servidor no servidor. Saiba mais sobre as transformaes XSL do servidor e do cliente e sobre como
usar XML e XSL com pginas da Web antes de criar pginas que exibem dados XML.
Nota: Seu servidor deve ser configurado corretamente para executar transformaes do servidor. Para obter mais informaes, entre em contato
com o administrador do servidor.
O fluxo de trabalho geral para executar transformaes XSL do servidor descrito a seguir (cada etapa descrita em outros tpicos):
1. Configure um site do Dreamweaver.
2. Escolha uma tecnologia de servidor e configure um servidor de aplicativo.
3. Teste o servidor de aplicativo.
Por exemplo, crie uma pgina que requer processamento e verifique se o servidor de aplicativo processa a pgina.
4. Crie um fragmento ou uma pgina XSLT ou converta uma pgina HTML em uma pgina XSLT.
No site do Dreamweaver, crie um fragmento XSLT ou uma pgina XSLT inteira.
Converta uma pgina HTML existente em uma pgina XSLT inteira.
5. Anexe uma fonte de dados XML pgina.
6. Exiba os dados XML ligando os dados ao fragmento XSLT ou pgina XSLT inteira.
7. Se for apropriado, adicione um objeto XSLT de regio repetitiva tabela ou linha de tabela que contenha os
alocadores de espao de dados XML.
8. Insira referncias.
Para inserir uma referncia ao fragmento XSLT em sua pgina dinmica, use o comportamento Transformao XSL do servidor.
Para inserir uma referncia pgina XSLT inteira na pgina dinmica, exclua todo o cdigo HTML da pgina dinmica e, em seguida, use o
comportamento Transformao XSL do servidor.
9. Poste a pgina e o fragmento.
Poste a pgina dinmica e o fragmento XSLT (ou a pgina XSLT inteira) no seu servidor de aplicativo. Se estiver usando um arquivo XML local,
tambm dever post-lo.
10. Visualize a pgina dinmica em um navegador.
Ao fazer isso, o servidor de aplicativo transforma os dados XML, insere esses dados na pgina dinmica e os exibe no navegador.
Para o incio
A tabela a seguir fornece uma explicao dos diversos elementos do esquema que podem aparecer:
Elemento
Representa
Detalhes
<>
<>+
<>+
N do elemento em negrito
Atributo XML
4. Salve sua nova pgina (Arquivo > Salvar) com a extenso .xsl ou .xslt (.xsl o padro).
Para o incio
Voc tambm pode converter pginas HTML existentes em pginas XSLT. Por exemplo, se houver uma pgina esttica pr-projetada qual
deseja adicionar dados XML, voc pode converter a pgina em uma pgina XSLT, em vez de criar uma pgina XSLT e reprojet-la a partir do
zero.
1. Abra a pgina HTML que deseja converter.
2. Selecione Arquivo > Converter > XSLT 1.0.
Uma cpia da pgina aberta na janela Documento. A nova pgina uma folha de estilos XSL, salva com a extenso .xsl.
Para o incio
Se estiver comeando a partir de uma pgina XSLT existente, ou se no anexar uma fonte de dados XML ao criar uma nova pgina XSLT com o
Dreamweaver, anexe uma fonte de dados XML usando o painel Ligaes.
1. No painel Ligaes (Janela > Ligaes), clique no link XML.
Nota: Voc tambm pode clicar no link Origem, no canto superior direito do painel Ligaes, para adicionar uma fonte de dados XML.
2. Siga um destes procedimentos:
Selecione Anexar arquivo local, clique no boto Procurar, navegue at um arquivo XML local no seu computador e clique em OK.
Selecione Anexar arquivo remoto e insira o URL de um arquivo XML na Internet (como o endereo de um RSS feed, por exemplo).
3. Clique em OK para fechar a caixa de dilogo Localizar origem XML.
O painel Ligaes preenchido com o esquema da fonte de dados XML.
Para o incio
Depois de criar uma pgina XSLT e anexar uma fonte de dados XML, voc pode associar dados pgina. Para fazer isso, adicione um alocador
de espao de dados XML pgina e use o Construtor de expresses XPath ou o Inspetor de propriedades para formatar os dados selecionados
que sero exibidos na pgina.
1. Abra uma pgina XSLT com uma fonte de dados XML anexada.
2. (Opcional) Selecione Inserir > Tabela para adicionar uma tabela pgina. A tabela ajuda a organizar os dados XML.
Nota: Na maioria dos casos, use o objeto XSLT de regio repetitiva para exibir elementos XML repetitivos em uma pgina. Nesse caso,
crie uma tabela com uma nica linha e uma ou mais colunas ou uma tabela de duas linhas se desejar incluir um cabealho.
3. No painel Ligaes, selecione um elemento XML e arraste-o at o local da pgina onde deseja inserir os dados.
Um alocador de espao de dados XML exibido na pgina. O alocador de espao realado e fica entre chaves. usada a sintaxe XPath
(Linguagem de caminho XML) para descrever a estrutura hierrquica do esquema XML. Por exemplo, se voc arrastar o elemento filho title
at a pgina e esse elemento tiver os elementos pai rss, channel e item, a sintaxe do alocador de espao de contedo dinmico ser
{rss/channel/item/title}.
Clique duas vezes no alocador de espao de dados XML na pgina para abrir o Construtor de expresses XPath. O Construtor de
expresses XPath permite formatar os dados selecionados ou selecione outros itens no esquema XML.
4. (Opcional) Aplique estilos aos dados XML selecionando um alocador de espao de dados XML e aplicando estilos a ele como faria em
qualquer outra parte do contedo usando o Inspetor de propriedades ou o painel Estilos CSS. Se preferir, voc pode usar as Folhas de
estilo em tempo de design para aplicar estilos aos fragmentos XSLT. Cada um desses mtodos tem vantagens e desvantagens.
5. Visualize seu trabalho em um navegador (Arquivo > Visualizar no navegador).
Nota: Quando voc visualiza seu trabalho usando a opo Visualizar no navegador, o Dreamweaver executa uma transformao XSL
interno sem usar um servidor de aplicativo.
Para o incio
O objeto XSLT de regio repetitiva permite exibir elementos repetitivos de uma fonte de dados XML em uma pgina da Web. Por exemplo, se
voc estiver exibindo ttulos de artigos e descries de um feed de notcias e esse feed tiver entre 10 e 20 artigos, cada ttulo e descrio do
arquivo XML provavelmente seria um elemento filho de um elemento repetitivo.
Qualquer regio da Visualizao de design que contm um alocador de espao de dados XML pode ser transformada em uma regio repetitiva.
No entanto, as regies mais comuns so uma tabela, uma linha de tabela ou uma srie de linhas de tabela.
1. Na Visualizao de design, selecione uma regio que contm alocadores de espao de dados XML.
A seleo pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um pargrafo do texto.
Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto inferior esquerdo da janela Documento.
Por exemplo, se a regio for uma tabela, clique dentro da tabela na pgina e, em seguida, clique na tag no seletor de tags.
2. Siga um destes procedimentos
Selecione Inserir > Objetos XSLT > Regio repetitiva.
Na categoria XLST do painel Inserir, clique no boto Regio repetitiva.
3. No Construtor de expresses XPath, selecione o elemento repetitivo, indicado por um pequeno sinal de adio.
4. Clique em OK.
Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetida. Ao visualizar seu trabalho em um navegador
(Arquivo > Visualizar no navegador), o contorno cinza desaparece e a seleo expandida para exibir os elementos repetitivos
especificados no arquivo XML.
Ao adicionar o objeto XSLT de regio repetitiva pgina, o alocador de espao de dados XML truncado na janela Documento. Isso
acontece porque o Dreamweaver trunca o XPath para o alocador de espao de dados XML de modo que haja relao com o caminho do
elemento repetitivo.
Para o incio
Depois de criar um fragmento XSLT, voc pode inseri-lo em uma pgina da Web dinmica usando o comportamento Transformao XSL do
servidor. Ao adicionar o comportamento do servidor sua pgina e visualizar a pgina em um navegador, um servidor de aplicativo executa uma
transformao que exibe os dados XML do fragmento XSLT selecionado. O Dreamweaver suporta transformaes XSL para pginas ColdFusion,
ASP ou PHP.
Nota: Se desejar inserir o contedo de uma pgina XSLT inteira em uma pgina dinmica, o procedimento ser exatamente o mesmo. Antes de
usar o comportamento Transformao XSL do servidor para inserir a pgina XSLT inteira, exclua todo o cdigo HTML da pgina dinmica.
1. Abra uma pgina ColdFusion, ASP ou PHP existente.
2. Na Visualizao de design, coloque o ponto de insero no local onde voc deseja inserir o fragmento XSLT.
Nota: Ao inserir fragmentos XSLT, voc sempre deve clicar no boto Mostrar visualizaes de cdigo e de design depois de colocar o
ponto de insero na pgina para garantir que o ponto seja colocado no local correto. Caso o local no seja correto, clique em algum outro
lugar da Visualizao de cdigo para colocar o ponto de insero onde deseja.
3. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e selecione Transformao
XSL.
4. Na caixa de dilogo Transformao XSL, clique no boto Procurar e navegue at um fragmento XSLT ou uma pgina XSLT inteira.
O Dreamweaver preenche o prximo campo de texto com o caminho do arquivo ou o URL do arquivo XML que est anexado ao fragmento
Para o incio
Voc pode remover um fragmento XSLT de uma pgina excluindo o comportamento Transformao XSL do servidor usado para inserir o
fragmento. A excluso do comportamento do servidor exclui somente o fragmento XSLT (os arquivos XML, XSLT ou de biblioteca de runtime
associados no so excludos).
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), selecione o comportamento Transformao XSL do
servidor que deseja excluir.
2. Clique no boto de subtrao (-).
Nota: Nesta verso, voc sempre deve remover os comportamentos de servidor. A excluso manual do cdigo gerado remove apenas
parcialmente o comportamento de servidor, mesmo que o comportamento desaparea do painel Comportamentos de servidor.
Para o incio
Depois de adicionar um fragmento XSLT a uma pgina da Web dinmica, voc pode editar o comportamento Transformao XSL do servidor a
qualquer momento.
1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique duas vezes no comportamento Transformao XSL
do servidor que deseja editar.
2. Faa as alteraes e clique em OK.
Para o incio
Voc pode criar um link dinmico na sua pgina XSLT vinculado a um URL especfico quando o usurio clica em uma palavra ou grupo de
palavras especificado nos dados XML. Para obter instrues completas, consulte a errata do Dreamweaver em
www.adobe.com/go/dw_documentation_br.
Para o incio
Ao criar uma pgina XSLT inteira (isto , uma pgina XSLT que contm as tags <body> e <head>), voc pode exibir os dados XML na pgina e
formatar os dados como qualquer outra parte do contedo usando o Inspetor de propriedades ou o painel Estilos CSS. No entanto, ao criar um
fragmento XSLT a ser inserido em uma pgina dinmica (por exemplo, um fragmento a ser inserido em uma pgina ASP, PHP ou Cold Fusion), o
processamento de estilos no fragmento e na pgina dinmica fica mais complicado. Embora voc trabalhe em um fragmento XSLT
separadamente da pgina dinmica, importante lembrar que o fragmento deve ser usado na pgina dinmica e que a sada do fragmento XSLT
reside em algum lugar entre as tags <body> da pgina dinmica. Neste fluxo de trabalho, importante no incluir elementos <head> (como
definies de estilo ou links para folhas de estilo externas) nos fragmentos XSLT. Desse modo, o servidor de aplicativo coloca esses elementos
na tag <body> da pgina dinmica, gerando um markup invlido.
Por exemplo, voc pode criar um fragmento XSLT para insero em uma pgina dinmica e formatar o fragmento usando a mesma folha de
estilo externa da pgina dinmica. Se voc anexar a mesma folha de estilo ao fragmento, a pgina HTML resultante conter um link duplicado
para a folha de estilo (um na seo <head> da pgina dinmica e outro na seo <body> da pgina, onde o contedo do fragmento XSLT
exibido). Em vez dessa abordagem, voc deve usar as Folhas de estilo em tempo de design para fazer referncia folha de estilo externa.
Ao formatar o contedo dos fragmentos XSLT, use o seguinte fluxo de trabalho:
Primeiro, anexe uma folha de estilo externa pgina dinmica. Esta a melhor maneira de aplicar estilos no contedo de qualquer pgina
da Web.
Em seguida, anexe a mesma folha de estilo externa ao fragmento XSLT como uma folha de estilo em tempo de design. Como o nome
indica, as folhas de estilo em tempo de design funcionam somente na Visualizao de design do Dreamweaver.
Depois de realizar as duas etapas anteriores, voc pode criar novos estilos no seu fragmento XSLT usando a mesma folha de estilo
anexada sua pgina dinmica. A sada HTML ser mais limpa (porque a referncia folha de estilo vlida somente no Dreamweaver) e
o fragmento ainda exibir os estilos apropriados na Visualizao de design. Alm disso, todos os estilos sero aplicados tanto no fragmento
quanto na pgina dinmica quando a pgina dinmica for visualizada no modo Design ou em um navegador.
Nota: Se voc visualizar o fragmento XSLT em um navegador, os estilos no sero exibidos pelo navegador. Em vez disso, voc deve
visualizar a pgina dinmica no navegador para ver o fragmento XSLT no contexto da pgina dinmica.
Para o incio
Voc pode definir parmetros para a transformao XSL ao adicionar o comportamento Transformao XSL do servidor a uma pgina da Web.
Um parmetro controla como os dados XML so processados e exibidos. Por exemplo, voc pode usar um parmetro para identificar e listar um
artigo especfico de um feed de notcias. Quando a pgina carregada em um navegador, somente o artigo especificado com o parmetro
exibido.
3. Na caixa de dilogo Adicionar parmetro, insira um nome para o parmetro na caixa Nome. O nome pode conter somente caracteres
alfanumricos. Os espaos no so permitidos.
4. Siga um destes procedimentos:
Se desejar usar um valor esttico, insira-o na caixa Valor.
Se desejar usar um valor dinmico, clique no cone de dinmico ao lado da caixa Valor, preencha a caixa de dilogo Dados dinmicos e
clique em OK. Para obter mais informaes, clique no boto Ajuda na caixa de dilogo Dados dinmicos.
5. Na caixa Valor padro, insira o valor a ser usado pelo parmetro se a pgina no receber nenhum valor de runtime e clique em OK.
Para o incio
Voc pode criar uma ou vrias regies condicionais em uma pgina XSLT. Selecione um elemento na Visualizao de design e aplique uma
regio condicional na seleo ou insira uma regio condicional no ponto de insero do documento.
Por exemplo, se desejar exibir a expresso No disponvel ao lado do preo de um item que no est disponvel, digite o texto No disponvel
na pgina, selecione-o e aplique uma regio condicional no texto selecionado. O Dreamweaver coloca a tag <xsl:if> antes e depois da seleo e
exibe a expresso No disponvel na pgina somente quando os dados corresponderem s condies da expresso condicional.
3. Clique em OK.
O seguinte cdigo inserido na pgina XSLT:
<xsl:if test="@available='true'">
Content goes here
</xsl:if>
Nota: Os valores de sequncia de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas (') para
que sejam inseridas como XHTML vlido.
Alm de testar os ns com relao aos valores, voc pode usar qualquer funo XSLT suportada em qualquer instruo condicional. A
condio testada no n atual do arquivo XML. No exemplo a seguir, teste a expresso no ltimo n do conjunto de resultados:
Para obter mais informaes e exemplos sobre expresses condicionais de gravao, consulte a seo <xsl:if> no painel Referncia (Ajuda
> Referncia).
3. Clique em OK.
No exemplo, o seguinte cdigo inserido na pgina XSLT:
<xsl:choose>
<xsl:when test="price<5">
Content goes here
</xsl:when>
<xsl:otherwise>
Content goes here
</xsl:otherwise>
</xsl:choose>
4. Para inserir outra condio, coloque o ponto de insero na Visualizao de cdigo entre os pares de tag <xsl:when> ou antes da tag
<xsl:otherwise> e insira uma regio condicional (Inserir > Objetos XSLT > Regio condicional).
Depois de especificar a condio e clicar em OK, outra tag <xsl:when> ser inserida no bloco <xsl:choose>.
Para obter mais informaes e exemplos sobre expresses condicionais de gravao, consulte as sees <xsl:choose> no painel
Referncia (Ajuda > Referncia).
Para o incio
Voc pode adicionar tags de comentrio XSL a um documento ou envolver uma seleo em tags de comentrio XSL.
Usar o Construtor de expresses XPath para adicionar expresses para dados XML
Para o incio
O XPath (Linguagem de caminho XML) uma sintaxe no XML que controla partes de um documento XML. Na maioria das vezes, essa sintaxe
usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL usada para bancos de dados de consulta. Para obter
mais informaes sobre o XPath, consulte a especificao da linguagem XPath no site da W3C em www.w3.org/TR/xpath.
O Construtor de expresses XPath um recurso do Dreamweaver que permite criar expresses XPath simples para identificar ns de dados
especficos e para regies repetitivas. Em vez de arrastar valores da rvore de esquema XML, esse mtodo permite formatar o valor exibido. O
contexto atual identificado com base na posio do ponto de insero no arquivo XSL quando a caixa de dilogo Construtor de expresses
XPath est aberta. O contexto atual est em negrito na rvore de esquema XML. medida que voc faz selees nessa caixa de dilogo, as
instrues XPath corretas so geradas, em relao ao contexto atual. Isso simplifica o processo de gravao de expresses XPath corretas para
iniciantes e usurios avanados.
Nota: Esse recurso foi projetado para ajudar a criar expresses XPath simples para identificar um n especfico ou para regies repetitivas. O
recurso no permite editar as expresses manualmente. Se for necessrio criar expresses complexas, use o Construtor de expresses XPath
para comear e personalizar expresses na Visualizao de cdigo ou com o Inspetor de propriedades.