Você está na página 1de 778

ADOBE DREAMWEAVER

Ajuda e tutoriais

Alguns links levam a contedo em ingls.

Junho de 2013

Dreamweaver Creative Cloud


Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Sincronizao de configuraes do Dreamweaver com a Creative Cloud


A conta de associao Adobe Creative Cloud permite ativar o Dreamweaver em duas mquinas. O recurso de sincronizao em nuvem ajuda a manter as seguintes configuraes do Dreamweaver sincronizadas em duas mquinas: Preferncias do aplicativo: Geral: todas as preferncias exceto Ativar arquivos relacionados e Identificar arquivos relacionados de forma dinmica. Cores dos cdigos: Plano de fundo padro, Plano de fundo do cdigo ativo, Plano de fundo de somente leitura, Caracteres ocultos, Alteraes no cdigo ativo. Formato do cdigo: todas as preferncias exceto bibliotecas de tags. Dicas de cdigo: todas as preferncias exceto as alteraes feitas usando o link Editor de bibliotecas de tag. Regravao de cdigo: todas as preferncias. Copiar/colar: todas as preferncias. Estilos CSS: todas as preferncias exceto prefixos do fornecedor. Tipos de arquivos/Editores: Recarregar apenas arquivos modificados e Salvar ao iniciar. Fontes: todas as preferncias. Realce: todas as preferncias. Novo documento: todas as preferncias. Visualizar no navegador: Navegador principal, Navegador secundrio e Visualizar usando arquivo temporrio. Site: todas as preferncias exceto Mostrar sempre <opes> <Direita/Esquerda>. Validador W3C: todas as Preferncias exceto Gerenciar. Tamanhos de janela: todas as preferncias exceto velocidade da conexo. Configuraes do site: todas as configuraes exceto nome do usurio e senha. Nota: uma conta de associao basicamente a conta da ID da Adobe usada ao comprar a associao. A sincronizao com a nuvem est vinculada a sua conta da associao.

Primeira sincronizao
Quando voc inicia o Dreamweaver na mquina em que ele foi instalado primeiro, a seguinte caixa de dilogo exibida:

Para o incio

Sincronizar configuraes agora Sincroniza as configuraes com a nuvem imediatamente. Sempre sincronizar configuraes automaticamente Sincroniza as configuraes automaticamente. Para obter mais informaes, consulte Sincronizao automtica. Desativar Sincronizar configuraes Desativa a sincronizao. Nota: voc pode ativar a sincronizao a qualquer momento usando a caixa de dilogo Preferncias. Avanado Abre as opes Sincronizar configuraes na caixa de dilogo Preferncias. Na segunda mquina, a seguinte caixa de dilogo exibida quando voc inicia o Dreamweaver:

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.
Para o incio

Sincronizao automtica
Voc pode ativar a sincronizao automtica de uma das seguintes formas: Selecione Sempre sincronizar configuraes automaticamente na caixa de dilogo Sincronizar configuraes.

Nota: as caixas de dilogo Sincronizar configuraes so exibidas somente quando voc acessa o Dreamweaver pela primeira vez depois de ). instal-lo em suas mquinas. Para sincronizaes subsequentes, use a caixa de dilogo Preferncias ou a notificao do sistema ( Selecione Editar > Preferncias (Win) e Dreamweaver > Preferncias (Mac) e selecione Sincronizar configuraes > Ativar sincronizao automtica. Quando voc ativa a sincronizao automtica, o Dreamweaver sincroniza as configuraes automaticamente sempre que uma preferncia ou uma configurao local editada e salva.

Sincronizao manual
Clique em Sincronizar configuraes agora na caixa de dilogo Sincronizar configuraes. Clique em Sincronizar configuraes agora na notificao do sistema. Para abrir a caixa de dilogo de notificao, clique em de ferramentas do documento.

Para o incio

na barra

(Em Mac) Dreamweaver > Sincronizar configuraes agora e no Windows, Editar > Sincronizar configuraes agora.

Resolver conflitos durante a sincronizao

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.

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Release Notes | Dreamweaver 12.1 | Creative Cloud


This release is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe Creative Cloud.

Before you upgrade Upgrade to Dreamweaver Creative Cloud After you upgrade Known limitations HTML5 videos do not play as intended on website Version: 12.1 Release Date : 24 September 2012 This document lists the known issues, limitations, and workarounds in the Dreamweaver release for Creative Cloud. Ensure that you read this document before you upgrade.

Before you upgrade


To avoid losing your personal settings and preferences in Dreamweaver CS6, ensure that you follow the instructions listed below.

To the top

Export keyboard shortcuts


Before upgrading to Creative Cloud, do the following: 1. Select Edit > Keyboard Shortcuts 2. Click "Export Set As HTML" button. After you upgrade, refer to the exported file to set the shortcuts again.

Note down items in the Favorites section of the Insert panel


Items in the Favorites section of the Insert panel are removed after upgrade. Note down the items so that you can manually add them after upgrade.

Upgrade to Dreamweaver Creative Cloud


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

After you upgrade


Enable previously installed extensions
If you upgrade from Dreamweaver CS6 to Creative Cloud, your previously installed extensions do not appear in Dreamweaver menus. To display previously installed extensions, open Adobe Extension Manager, select all extensions, and re-enable them.

To the top

Insert items into the Favorites section of the Insert panel


The items you inserted into the Favorites section of the Insert panel in Dreamweaver CS6 are removed after upgrade. Manually reinsert items into the Favorites panel.

(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.

HTML labels in Property Inspector


HTML keywords are no longer localized in the Property Inspector. They appear in English only.

Known limitations
Edge Animate Compositions

To the top

Previewing Edge Animate compositions in the Live View slows down Dreamweaver considerably. Adobe suggests that you use browser preview for Edge Animate Compositions. Only OAM files can be inserted into Dreamweaver. OAM files with double-byte, high-ASCII, or special characters in the filename cannot be inserted.

HTML5 Video/Audio does not play in Live View


Preview HTML5 audio/video in a browser.

HTML5 videos do not play as intended on website

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.

Set HTML5 video MIME type on Apache


AddType video/ogg.ogv AddType video/mp4.mp4 AddType video/webm.webm Add the following code to your httpd.conf file or to a .htaccess file in the directory containing your video file. The first line is for videos in an Ogg container. The second line is for videos in an MPEG-4 container. The third is for WebM.

Set HTML5 video MIME type on IIS


To set up HTML5 video MIME types on IIS servers, open IIS Manager on the Windows server. Navigate to the MIME Types settings. There are some differences between the IIS versions. Consult your servers documentation or your hosting company on how to set the HTML5 video MIME type for specific file types on Windows servers. If you use IIS Express and dont have a full instance of IIS running, use the Web.config file. This method works on any IIS7 web server, and is ignored on all non-IIS7 web servers. So, it is safe regardless of the type of application or content. Add the following code to your configuration file: <configuration> <system.webserver> <staticContent> <mimeMap FileExtension=":mp4" mimeType="video/mp4" /> <mimeMap FileExtension=".ogv" mimeType="video/ogg" /> <mimeMap FileExtension=".webmv" mimeType="video/webmv" /> </staticContent> </system.webServer> </configuration>

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

Novidades | Creative Cloud


Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para fazer parte da Adobe Creative Cloud, acesse o site da Adobe Creative Cloud.

Inserir vdeo e udio HTML5 Inserir elementos semnticos HTML5 no painel Inserir Importar composies do Adobe Edge Animate Suporte para tela de desenho HTML5 Melhorias de suporte ao HTML5 para elementos de formulrio Pesquisa dinmica (Mac OS) Melhorias no FTP Melhorias na manipulao de fontes Menu Inserir reorganizado

Inserir udio e vdeo HTML5

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.

Inserir elementos semnticos HTML5 do painel Inserir

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.

Importar composies do Adobe Edge Animate

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.

Suporte para tela de desenho HTML5

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.

Melhorias de suporte ao HTML5 para elementos de formulrio

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.

Pesquisa dinmica (Mac OS)

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.

Melhorias na manipulao de fontes

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.

Caixa de dilogo Pacote de fontes da Web

cones separados de fontes do sistema e fontes da Web

Menu Inserir reorganizado

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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Visualizao e anlise de pginas da Web em vrios dispositivos


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. A integrao do Dreamweaver no Edge Inspect permite que voc visualize e inspecione suas pginas da Web em vrios dispositivos conectados usando o Google Chrome. O Edge Inspect um aplicativo da Adobe que pode ser baixado da Adobe Creative Cloud e das lojas de aplicativos Apple e Android OS. Para obter mais informaes sobre o Edge Inspect, consulte Perguntas frequentes do Adobe Edge Inspect. Na verso gratuita do Edge Inspect, voc pode visualizar seus projetos em apenas um dispositivo de cada vez. 1. Instale o Adobe Edge Inspect em dispositivos como descrito no Guia de instalao do Adobe Edge Inspect. 2. No Dreamweaver, crie um site em um servidor de teste. Adicione pginas ao site para visualizao em vrios dispositivos. 3. Abra a pgina que voc deseja visualizar no Dreamweaver. 4. Selecione Arquivo > Visualizar no navegador > Visualizar no Edge Inspect. O Google Chrome aberto e nele voc pode visualizar suas pginas da Web. 5. Nos dispositivos nos quais voc deseja visualizar a pgina, faa o seguinte: a. Certifique-se de que todos os dispositivos estejam conectados a uma rede comum. b. No Google Chrome, clique no plug-in do cone do Adobe Inspect. c. Abra o Edge Inspect em cada um dos dispositivos e clique em +. d. Digite o endereo IP do computador em que voc abriu a pgina de visualizao. e. Clique em Entrar. Quando voc emparelhar com sucesso os dispositivos, poder visualizar a pgina aberta no Google Chrome tambm nos dispositivos conectados. Quando voc visualiza o site no Google Chrome, as alteraes so refletidas nos dispositivos conectados.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Adicionar fontes da Web e do Edge lista de fontes


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. 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.

Adio de fontes do Adobe Edge lista de fontes

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 para filtrar as fontes selecionadas.

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.

Adio de fontes locais da Web lista de fontes

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.

2. Na caixa de dilogo exibida, clique na guia Fontes locais da Web. 3. Clique no boto Procurar que corresponda ao tipo de fonte que deseja adicionar. Por exemplo, se a fonte estiver no formato EOT, clique no boto Procurar correspondente Fonte EOT. 4. Navegue at o local no computador que contm a fonte. Selecione o arquivo e abra-o. Se outros formatos para a fonte existirem nesse local, eles sero adicionados automaticamente caixa de dilogo. O campo Nome da fonte tambm escolhido automaticamente a partir do nome da fonte. 5. Selecione a opo que solicita a confirmao de que voc licenciou a fonte para ser usada no site. 6. Clique em Concludo. A lista de fontes exibida na Lista atual de fontes locais. Para remover uma fonte da Web da lista de fontes, selecione a fonte na Lista atual de fontes locais e clique em Remover.

Criao de pilhas de fontes personalizadas

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.

Visualizao de fontes inseridas

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.

Atualizao de tag de script de fonte da Web nos arquivos

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.

Atualizao de tag de script de fonte da Web em uma pgina

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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Alteraes nas opes Inserir


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Acesso rpido para opes Inserir e suporte avanado a elementos HTML5 Opes obsoletas Opes reorganizadas no painel Inserir e no menu Inserir

Acesso rpido para opes Inserir e suporte avanado a elementos HTML5

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.

Opes reorganizadas no painel Inserir e no menu Inserir

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)

Opes Inserir no Dreamweaver 12.1

Alteraes nas opes Mdia e Formulrio

Opo Div Vdeo HTML5

CS6, CS5.5 Inserir > Objetos de layout > Tag div No disponvel

Creative Cloud Inserir > Div Inserir > Vdeo HTML5

Opes

Tela de desenho

No disponvel

Inserir > Tela de desenho Quebra de linha, espao no separvel, direitos autorais, marca registrada, marca comercial, libra, iene, euro, aspa esquerda, aspa direita, travesso, trao, outro Meta, palavras-chave, descrio, porta de exibio

Caractere

Inserir > HTML > Caracteres especiais

Inserir > Caractere

Cabealho Rgua horizontal

Inserir > HTML > Tags de cabealho No disponvel

Inserir > Cabealho Inserir > Regra horizontal

Dados

Inserir > Objetos de dados

Inserir > Dados

Conjunto de registros, Procedimento armazenado, Dados dinmicos, Regio repetitiva, Mostrar regio, Paginao do conjunto de registros, Ir para, Exibir contagem de registros, Conjunto de pginas mestre/detalhadas, Inserir registro, Atualizar registro, Excluir registro, Autenticao do usurio, Transformao XSLT

Tag Imagem

Inserir > Tag Inserir > Imagem

No disponvel Inserir > Imagem Imagem, Imagem de sobreposio, HTML do Fireworks Composio do Edge Animate, Flash SWF, vdeo em Flash, vdeo HTML5, udio HTML5, Plug-in

Mdia

Inserir > Mdia

Inserir > Mdia

Consultas de mdia Tabela Objetos da tabela

Inserir > Consultas de Mdia Inserir > Tabela Inserir > Objetos da tabela

Inserir > Consultas de Mdia Inserir > Tabela No disponvel Div, Div de layout da grade fluida, Desenhar posio absoluta, Cabealho, HGroup, Navegao, parte, Artigo, Seo, Rodap, Molduras Formulrio, Texto, E-mail, Senha, URL, Telefone, Pesquisar rea do texto, Boto, Enviar, Redefinir, Arquivo, Boto de imagem, Oculto, Selecionar, Boto de opo, Grupo de botes de opo, Caixa de seleo, Grupo de caixas de seleo, Conjuntos de campos, Rtulo

Layout

Inserir > Layout

Inserir > Layout

Formulrio

Inserir > Formulrio

Inserir > Formulrio

Hiperlink Link de e-mail ncora com nome Data O servidor inclui Comentrio HTML

Inserir > Hiperlink Inserir> Link de e-mail Inserir> ncora com nome Inserir > Data Inserir > O servidor inclui Inserir > Comentrio Inserir > HTML

Inserir > Hiperlink Inserir> Link de e-mail Inserir> ncora com nome Inserir > Data No disponvel No disponvel No disponvel Criar modelo, Criar modelo aninhado, Regio editvel, Regio opcional, Regio repetida, Regio opcional editvel, Tabela repetitiva

Modelo

Inserir > Modelo

Inserir > Modelo

Snippets recentes

Inserir > Snippets recentes

Inserir > Snippets recentes

Widget

Inserir > Widget

Inserir > Widget Pgina, Exibio em lista, Grade de layout, Bloco flexvel, Texto, Senha, rea de texto, Selecionar, Caixa de seleo, Boto de opo, Boto, Controle deslizante, Boto de alternncia invertido Regio editvel, Regio repetitiva Conjunto de dados, Regio, Repetir, Lista de repetio, Campo de texto de validao, rea de texto de validao, Caixa de seleo de validao, Seleo de validao, Senha de validao, Confirmao de validao, Grupo de botes de opo de validao, Barra de menus, Painis com guias, Acordeo, Painel flexvel, Dica de ferramenta

jQuery Mobile

Inserir > jQuery Mvel

Inserir > jQuery Mvel

No contexto

Inserir > No Contexto

Inserir > No Contexto

Spry

Inserir > Spry

Inserir > Spry

Objetos de dados Favoritos Obter mais objetos

Inserir > Objetos de dados Inserir > Favoritos Inserir > Obter mais objetos

Inserir > Dados Inserir > Favoritos Inserir > Obter mais objetos

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Inserir udio HTML5


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. O Dreamweaver permite inserir e visualizar udio HTML5 em pginas da Web. O elemento de udio HTML5 fornece um modo padro de incorporar o contedo de udio em pginas da Web. Para obter mais informaes sobre o elemento de udio HTML5, consulte o artigo sobre udio HTML5 em W3schools.com.

Inserir udio HTML5 Visualizar o udio no navegador

Inserir udio HTML5


1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o udio. 2. Selecione Inserir > Mdia > udio HTML5. O arquivo de udio inserido no local especificado. 3. No painel Propriedades, insira as informaes a seguir:

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 Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6

MP3 SIM NO SIM SIM NO

Wav NO SIM SIM SIM SIM

Ogg NO SIM SIM NO SIM

Ttulo: insira um ttulo para o arquivo de udio. Texto de emergncia: insira o texto a ser exibido em navegadores que no fornecem suporte ao HTML5. Controles: selecione se voc deseja exibir os controles de udio como Reproduzir, Pausar e Mudo na pgina HTML. Reproduo automtica: selecione se quiser que a reproduo do udio seja iniciada assim que ela for carregada na pgina da Web. udio de repetio: selecione esta opo se desejar que o udio seja reproduzido continuamente at que o usurio interrompa a reproduo. Mudo: selecione esta opo se desejar silenciar o udio depois do download. Pr-carregar: selecionar Automtico carrega o arquivo de udio inteiro no download da pgina. Se voc selecionar Metadados, o download dos metadados s ser feito aps a concluso do download da pgina.

Painel Propriedades do udio HTML5

Visualizar o udio no navegador

Para o incio

1. Salve a pgina da Web. 2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o udio.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Inserir vdeo HTML5


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. O Dreamweaver permite inserir vdeo HTML5 em pginas da Web. O elemento de vdeo HTML5 fornece um modo padro de incorporar filmes ou vdeos em pginas da Web. Para obter mais informaes sobre o elemento de vdeo HTML5, consulte o artigo sobre vdeo HTML5 em W3schools.com.

Insero de vdeo HTML5 no Dreamweaver Inserir vdeo HTML5 Visualizar o vdeo no navegador

Inserir vdeo HTML5


1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o vdeo. 2. Selecione Inserir> Mdia> Vdeo HTML5. O elemento de vdeo HTML5 inserido no local especificado. 3. No painel Propriedades, especifique valores de vrias opes.

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 Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6

MP4 SIM NO SIM SIM NO

WebM NO SIM SIM NO SIM

Ogg NO SIM SIM NO SIM

Ttulo: especifique um ttulo para o vdeo. Largura (L): insira a largura em pixel do vdeo. Altura (A): insira a altura em pixel do vdeo. Controles: selecione se desejar exibir os controles de vdeo como Reproduzir, Pausar e Mudo na pgina HTML. Reproduo automtica: selecione se desejar que a reproduo do vdeo seja iniciada assim que ela for carregada na pgina da Web. Imagem do pster: insira o local da imagem que ser exibida at que o download do vdeo seja concludo ou at que o usurio clique em Reproduzir. Os valores de Altura e Largura so preenchidos automaticamente quando a imagem inserida. Repetio: selecione esta opo se desejar que o vdeo seja reproduzido continuamente at que o usurio o interrompa. Mudo: selecione esta opo se desejar silenciar o udio do vdeo. Vdeo Flash: selecione um arquivo SWF para navegadores que no suportam vdeo HTML5. Texto de emergncia: fornea o texto a ser exibido se o navegador no suportar HTML5. Pr-carregar: especifica as preferncias do autor em relao a como o vdeo deve ser carregado quando a pgina carregada. Se voc selecionar Automtico, todo o vdeo ser carregado na pgina de download. Se voc selecionar Metadados, o download dos metadados s ser feito aps a concluso do download da pgina.

Painel Propriedades de vdeo HTML5

Visualizar o vdeo no navegador


1. Salve a pgina da Web. 2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o vdeo.

Para o incio

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Importar composies do Edge Animate


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Importar composies do Edge Animate Alterao do local padro dos arquivos extrados Colocao do arquivo inserido entre tags

Importar composies do Edge Animate

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.

Localizao dos arquivos extrados A. A pasta edgeanimate_assets B. A pasta criada com o nome do arquivo OAM C. A pasta Ativos com os arquivos extrados

4. Visualize a composio do Edge Animate em um navegador ou na Visualizao dinmica.

Alterao do local padro dos arquivos extrados


1. Abra a caixa de dilogo Configurao do site do seu site. 2. Em Configuraes avanadas, selecione Ativos do Edge Animate. 3. Em Pasta de ativos, modifique o local para os arquivos extrados.

Para o incio

Colocao do arquivo inserido entre tags


Para colocar o arquivo OAM inserido entre tags, faa o seguinte: 1. Clique com o boto direito do mouse na visualizao de design.

Para o incio

2. Selecione Colocar tag ao redor. 3. Na caixa de dilogo Colocar tag ao redor, especifique a tag a ser usada.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Pesquisa de arquivos com base no nome de arquivo ou no contedo | Mac OS


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. Este recurso est disponvel somente para Mac OS. 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 pesquisa. Se no houver nenhum site selecionado no painel, a opo de pesquisa no aparecer. A Pesquisa dinmica usa a 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. 1. Selecione Editar > Pesquisa dinmica. Como alternativa, voc tambm pode usar CMD+SHIFT+F . O foco definido para a caixa de texto da Pesquisa dinmica no painel Arquivos. 2. Insira a palavra ou frase na caixa de texto. Os resultados so exibidos conforme o texto inserido na caixa de texto. Arquivos correspondentes Exibe um mximo de 10 nomes de arquivos que correspondem a seus critrios de pesquisa. A mensagem Mais de 10 resultados encontrados ser exibida se houver mais de 10 arquivos correspondentes. Refine seus critrios de pesquisa se no encontrar o arquivo desejado nas opes exibidas. Texto correspondente em Exibe um mximo de 10 arquivos que contm o texto que corresponde palavra ou frase que voc inseriu. Para mais opes, clique em Localizar todos. Os resultados so exibidos no painel Pesquisa. 3. Quando voc move o cursor do mouse sobre um resultado de pesquisa, uma dica de ferramenta com o caminho relativo raiz do arquivo exibida. Pressione Enter ou clique no item para abrir o arquivo. Para arquivos que contm texto correspondente, a primeira instncia do texto destacada. Use Cmd+G para navegar a outras instncias. Nota: para fechar o painel de resultados da Pesquisa dinmica, clique fora do painel ou pressione Escape/Esc

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Suporte aprimorado a HTML5 para elementos de formulrio


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Fluxo de trabalho de formulrios revisados no Dreamweaver Novos atributos comuns a elementos de formulrio Elementos de formulrio com atributos modificados Elementos de formulrio HTML5 Em conformidade com o suporte continuado a HTML5 no Dreamweaver, novos atributos foram includos para alguns elementos de formulrio. Alm disso, quatro novos elementos de formulrio HTML5 foram includos. Voc pode localizar os elementos de formulrio no painel Inserir. Selecione Janela > Inserir. No menu do painel Inserir, selecione Formulrios.

Links relacionados
Para o incio

Novos atributos comuns a elementos de formulrio


Os novos atributos a seguir so comuns a todos os elementos de formulrio: Disabled : selecione esta opo se deseja que o navegador desative o elemento. Required : selecione esta opo se deseja que o navegador verifique se um valor foi especificado.

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.

Elementos de formulrio com atributos modificados

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 Campo de texto Boto Caixa de seleo Arquivo

Novos atributos especficos ao elemento List <Nenhum atributo novo especfico> <Nenhum atributo novo especfico> Multiple

Descrio de atributos http://www.w3.org/TR/htmlmarkup/input.text.html http://www.w3.org/wiki/HTML/Elements/but ton http://www.w3.org/TR/htmlmarkup/input.checkbox.html http://www.w3.org/TR/htmlmarkup/input.file.html

Formulrio Oculto Senha Imagem Redefinir Enviar Boto de opo rea do texto Selecionar

No validate , Accept charset <Nenhum atributo novo especfico> <Nenhum atributo novo especfico> Width, Height, Action, Method, Form no Validate, Form Enc Type, Form target <Nenhum atributo novo especfico> Form No Validate, Form Enc type, Form target, Action, Tab Index, Method <Nenhum atributo novo especfico> Rows, Cols, Place Holder, Wrap, Max Length, Tab Index Tamanho

http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/form.html http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/input.hidden.html http://www.w3.org/TR/htmlmarkup/input.password.html http://www.w3.org/TR/htmlmarkup/input.image.html http://dev.w3.org/html5/markup/button.rese t.html http://www.w3.org/TR/htmlmarkup/input.submit.html http://www.w3.org/TR/htmlmarkup/input.radio.html http://www.w3.org/TR/htmlmarkup/textarea.html http://www.w3.org/wiki/HTML/Elements/sel ect

Elementos de formulrio HTML5


Elemento do formulrio Cor Data Disponvel em 12.2 12.2 Descrio Para campos de entrada que devem ter uma cor. Controle que ajuda o usurio a selecionar uma data. Permite que o usurio selecione uma data e hora (com o fuso horrio). Permite que o usurio selecione uma data e hora (sem fuso horrio). Permite que usurio selecione um ms e um ano. Para os campos que devem conter apenas nmeros. Para os campos que devem conter valores de um intervalo de nmeros. Permite que o usurio selecione uma hora. Permite que o usurio selecione uma semana e um ano. Controle de edio de uma lista de endereos de email dados no valor do elemento. Controle de edio de texto simples de uma linha para inserir um ou mais termos de pesquisa. Controle de edio de texto simples de uma linha para inserir um nmero de telefone. Controle de edio de um URL absoluto dado no valor do elemento. Descrio de atributos

Para o incio

http://www.w3.org/TR/htmlmarkup/input.color.html http://www.w3.org/TR/htmlmarkup/input.date.html http://www.w3.org/TR/htmlmarkup/input.datetime.html http://www.w3.org/TR/htmlmarkup/input.datetimelocal.html http://www.w3.org/TR/htmlmarkup/input.month.html http://www.w3.org/TR/htmlmarkup/input.number.html http://www.w3.org/TR/htmlmarkup/input.range.html http://www.w3.org/TR/htmlmarkup/input.time.html http://www.w3.org/TR/htmlmarkup/input.week.html http://www.w3.org/TR/htmlmarkup/input.email.html

Data e hora

12.2

Data e hora locais

12.2

Ms Nmero

12.2 12.2

Faixa

12.2

Tempo

12.2

Semana

12.2

Email

12.1

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 http://www.w3.org/TR/htmlmarkup/input.url.html

URL

12.1

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Novidades no Dreamweaver 12.2 | Creative Cloud


Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Integrao do Edge Web Fonts Melhorias do layout de grade fluida Novos tipos de entrada do formulrio HTML5 Novos elementos de formulrio para jQuery Mobile Visualizao e anlise de pginas da Web em vrios dispositivos Melhorias no fluxo de trabalho do Edge Animate Atualizaes para o fluxo de trabalho do PhoneGap Outras alteraes e melhorias Extenses, Favoritos no painel Inserir e atalhos de teclado so mantidos aps a atualizao das verses 12.0 e 12.1. Se a extenso estiver em um menu Inserir que foi substitudo, voc poder encontrar as extenses em Inserir > Extenses ausentes. Se as extenses tiverem instalado pontos de acesso (itens) no painel Inserir em uma lista que foi removida, voc poder encontrar esses pontos de acesso na categoria "Diversos". Por exemplo, a lista de mdia na Categoria comum do painel Inserir foi removida. Agora ela apresentada diretamente no painel Inserir como uma categoria chamada Mdia. Todos os itens que suas extenses colocaram em Mdia anteriormente esto agora na categoria Diversos.

Integrao do Edge Web Fonts

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.

Melhorias do layout de grade fluida

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.

Novos tipos de entrada do formulrio HTML5

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

Novos elementos de formulrio para jQuery Mobile

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

Visualizao e anlise de pginas da Web em vrios dispositivos

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.

Melhorias no fluxo de trabalho do Edge Animate

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.

Atualizaes para o fluxo de trabalho do PhoneGap

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.

Outras alteraes e melhorias


HTML5 o DocType padro para todos os novos documentos. As configuraes padro para a caixa de dilogo Sincronizao de FTP foram alteradas. Para Sincronizao, a configurao padro Site inteiro. Para Direo, a configurao padro Obter e Colocar arquivos mais recentes.

Para o incio

A visualizao de tabela expandida foi reintroduzida. No entanto, essa opo no est mais presente no painel Layout. Para usar essa opo, insira uma tabela na Dreamweaver, clique com o boto direito do mouse na tabela e selecione a visualizao de tabela expandida.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

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.

Viso geral dos novos recursos CSS Designer Sincronizao de configuraes do Dreamweaver com a Creative Cloud Suporte de plataforma atualizado Interface de usurio simplificada

Viso geral dos novos recursos


Paul Trani, divulgador snior de produtos, Creative Cloud, fornece uma viso geral dos novos recursos na Adobe Dreamweaver CC.

Para o incio

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)

CSS Designer (Dreamweaver CC e posterior)

Tpicos relacionados
Painel CSS Designer Aplicao de gradientes ao plano de fundo

Sincronizao de configuraes do Dreamweaver com a Creative Cloud

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

Suporte de plataforma atualizado


Crie projetos usando estruturas HTML5/CSS3, jQuery e jQuery Mobile. Desenvolva pginas dinmicas em PHP.

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

Interface de usurio simplificada

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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Novidades no Dreamweaver 12.2 | Creative Cloud


Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Integrao do Edge Web Fonts Melhorias do layout de grade fluida Novos tipos de entrada do formulrio HTML5 Novos elementos de formulrio para jQuery Mobile Visualizao e anlise de pginas da Web em vrios dispositivos Melhorias no fluxo de trabalho do Edge Animate Atualizaes para o fluxo de trabalho do PhoneGap Outras alteraes e melhorias Extenses, Favoritos no painel Inserir e atalhos de teclado so mantidos aps a atualizao das verses 12.0 e 12.1. Se a extenso estiver em um menu Inserir que foi substitudo, voc poder encontrar as extenses em Inserir > Extenses ausentes. Se as extenses tiverem instalado pontos de acesso (itens) no painel Inserir em uma lista que foi removida, voc poder encontrar esses pontos de acesso na categoria "Diversos". Por exemplo, a lista de mdia na Categoria comum do painel Inserir foi removida. Agora ela apresentada diretamente no painel Inserir como uma categoria chamada Mdia. Todos os itens que suas extenses colocaram em Mdia anteriormente esto agora na categoria Diversos.

Integrao do Edge Web Fonts

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.

Melhorias do layout de grade fluida

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.

Novos tipos de entrada do formulrio HTML5

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

Novos elementos de formulrio para jQuery Mobile

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

Visualizao e anlise de pginas da Web em vrios dispositivos

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.

Melhorias no fluxo de trabalho do Edge Animate

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.

Atualizaes para o fluxo de trabalho do PhoneGap

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.

Outras alteraes e melhorias


HTML5 o DocType padro para todos os novos documentos. As configuraes padro para a caixa de dilogo Sincronizao de FTP foram alteradas. Para Sincronizao, a configurao padro Site inteiro. Para Direo, a configurao padro Obter e Colocar arquivos mais recentes.

Para o incio

A visualizao de tabela expandida foi reintroduzida. No entanto, essa opo no est mais presente no painel Layout. Para usar essa opo, insira uma tabela na Dreamweaver, clique com o boto direito do mouse na tabela e selecione a visualizao de tabela expandida.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Novidades | Creative Cloud


Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para fazer parte da Adobe Creative Cloud, acesse o site da Adobe Creative Cloud.

Inserir vdeo e udio HTML5 Inserir elementos semnticos HTML5 no painel Inserir Importar composies do Adobe Edge Animate Suporte para tela de desenho HTML5 Melhorias de suporte ao HTML5 para elementos de formulrio Pesquisa dinmica (Mac OS) Melhorias no FTP Melhorias na manipulao de fontes Menu Inserir reorganizado

Inserir udio e vdeo HTML5

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.

Inserir elementos semnticos HTML5 do painel Inserir

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.

Importar composies do Adobe Edge Animate

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.

Suporte para tela de desenho HTML5

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.

Melhorias de suporte ao HTML5 para elementos de formulrio

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.

Pesquisa dinmica (Mac OS)

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.

Melhorias na manipulao de fontes

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.

Caixa de dilogo Pacote de fontes da Web

cones separados de fontes do sistema e fontes da Web

Menu Inserir reorganizado

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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Painel CSS Designer


Na Dreamweaver CC e posterior, o painel CSS Styles foi substitudo pelo CSS Designer.

Criar e anexar folhas de estilo Definir consultas de mdia Definir seletores Propriedades de grupo O CSS Designer (Janelas > CSS Designer) um painel integrado que permite criar visualmente arquivos CSS, regras e propriedades de grupo, junto com consultas de mdia.

Painel CSS Designer O painel CSS Designer consiste nos seguintes painis: Origens Lista todas as folhas de estilo associadas ao documento. Com esse painel, voc pode criar e anexar uma CSS ao documento ou definir estilos no documento. @Mdia Lista todas as consultas de mdia na origem selecionada no painel Origens. Se voc no selecionar uma CSS especfica, esse painel exibir todas as consultas de mdia associadas ao documento. Seletores Lista todos os seletores na origem selecionada no painel Origens. Se voc tambm selecionar uma consulta de mdia, esse painel reduzir a lista de seletores da consulta de mdia em questo. Se nenhuma CSS ou consulta de mdia for selecionada, esse painel exibir todos os seletores no documento. Quando voc seleciona Global no painel @Mdia, todos os seletores no includos em uma consulta de mdia da fonte selecionada so exibidos.

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.

CSS Designer mostrando as propriedades da imagem selecionada na visualizao dinmica

CSS Designer mostrando as propriedades do cabealho selecionado na visualizao dinmica Nota: quando voc seleciona um elemento de pgina, Computado selecionado no painel Seletores. Clique em um seletor para exibir a origem, a consulta de mdia ou as propriedades associadas. Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que no pertencem a consultas de mdia na fonte selecionada, clique em Global no painel @Mdia.

Criar e anexar folhas de estilo


1. No painel Origens do painel CSS Designer, clique em e em uma das seguintes opes:

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.

Definir consultas de mdia


1. No painel CSS Designer, clique em uma origem CSS no painel Origens. 2. Clique em no painel @Mdia para adicionar uma nova consulta de mdia.

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
1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mdia no painel @Mdia.

Para o incio

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
Layout Texto Borda Plano de fundo Outros (lista de propriedades somente texto e no propriedades com controles visuais)

Para o incio

As propriedades so agrupadas nas seguintes categorias e representadas por cones diferentes na parte superior do painel Propriedades:

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

Somente propriedades de grupo

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

As propriedades substitudas so indicadas em formato de tachado.

Formato de tachado para propriedades substitudas

Definir margens, preenchimento e posio


Usando o painel Propriedades do CSS Designer, possvel definir rapidamente as propriedades de margens, preenchimento e posio usando os controles de caixa.

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.

cones de desativar, excluir e vincular das margens

Desativar ou excluir propriedades


O painel do CSS Designer permite desativar ou excluir cada propriedade. A seguinte captura de tela mostra os cones de desativar ( ) e excluir ( ) da propriedade width . Esses cones ficam visveis quando voc passa o mouse na propriedade.

Desativar/excluir propriedade

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Visualizao e anlise de pginas da Web em vrios dispositivos


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. A integrao do Dreamweaver no Edge Inspect permite que voc visualize e inspecione suas pginas da Web em vrios dispositivos conectados usando o Google Chrome. O Edge Inspect um aplicativo da Adobe que pode ser baixado da Adobe Creative Cloud e das lojas de aplicativos Apple e Android OS. Para obter mais informaes sobre o Edge Inspect, consulte Perguntas frequentes do Adobe Edge Inspect. Na verso gratuita do Edge Inspect, voc pode visualizar seus projetos em apenas um dispositivo de cada vez. 1. Instale o Adobe Edge Inspect em dispositivos como descrito no Guia de instalao do Adobe Edge Inspect. 2. No Dreamweaver, crie um site em um servidor de teste. Adicione pginas ao site para visualizao em vrios dispositivos. 3. Abra a pgina que voc deseja visualizar no Dreamweaver. 4. Selecione Arquivo > Visualizar no navegador > Visualizar no Edge Inspect. O Google Chrome aberto e nele voc pode visualizar suas pginas da Web. 5. Nos dispositivos nos quais voc deseja visualizar a pgina, faa o seguinte: a. Certifique-se de que todos os dispositivos estejam conectados a uma rede comum. b. No Google Chrome, clique no plug-in do cone do Adobe Inspect. c. Abra o Edge Inspect em cada um dos dispositivos e clique em +. d. Digite o endereo IP do computador em que voc abriu a pgina de visualizao. e. Clique em Entrar. Quando voc emparelhar com sucesso os dispositivos, poder visualizar a pgina aberta no Google Chrome tambm nos dispositivos conectados. Quando voc visualiza o site no Google Chrome, as alteraes so refletidas nos dispositivos conectados.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Importar composies do Edge Animate


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Importar composies do Edge Animate Alterao do local padro dos arquivos extrados Colocao do arquivo inserido entre tags

Importar composies do Edge Animate

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.

Localizao dos arquivos extrados A. A pasta edgeanimate_assets B. A pasta criada com o nome do arquivo OAM C. A pasta Ativos com os arquivos extrados

4. Visualize a composio do Edge Animate em um navegador ou na Visualizao dinmica.

Alterao do local padro dos arquivos extrados


1. Abra a caixa de dilogo Configurao do site do seu site. 2. Em Configuraes avanadas, selecione Ativos do Edge Animate. 3. Em Pasta de ativos, modifique o local para os arquivos extrados.

Para o incio

Colocao do arquivo inserido entre tags


Para colocar o arquivo OAM inserido entre tags, faa o seguinte: 1. Clique com o boto direito do mouse na visualizao de design.

Para o incio

2. Selecione Colocar tag ao redor. 3. Na caixa de dilogo Colocar tag ao redor, especifique a tag a ser usada.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Adicionar fontes da Web e do Edge lista de fontes


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. 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.

Adio de fontes do Adobe Edge lista de fontes

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 para filtrar as fontes selecionadas.

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.

Adio de fontes locais da Web lista de fontes

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.

2. Na caixa de dilogo exibida, clique na guia Fontes locais da Web. 3. Clique no boto Procurar que corresponda ao tipo de fonte que deseja adicionar. Por exemplo, se a fonte estiver no formato EOT, clique no boto Procurar correspondente Fonte EOT. 4. Navegue at o local no computador que contm a fonte. Selecione o arquivo e abra-o. Se outros formatos para a fonte existirem nesse local, eles sero adicionados automaticamente caixa de dilogo. O campo Nome da fonte tambm escolhido automaticamente a partir do nome da fonte. 5. Selecione a opo que solicita a confirmao de que voc licenciou a fonte para ser usada no site. 6. Clique em Concludo. A lista de fontes exibida na Lista atual de fontes locais. Para remover uma fonte da Web da lista de fontes, selecione a fonte na Lista atual de fontes locais e clique em Remover.

Criao de pilhas de fontes personalizadas

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.

Visualizao de fontes inseridas

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.

Atualizao de tag de script de fonte da Web nos arquivos

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.

Atualizao de tag de script de fonte da Web em uma pgina

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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Uso de efeitos do jQuery no Dreamweaver


Os efeitos do Spry foram substitudos pelos efeitos do jQuery na Dreamweaver CC. Embora ainda possa modificar os efeitos do Spry existentes na pgina, voc no pode adicionar novos efeitos do Spry.

Adicionar efeitos do jQuery Efeitos do jQuery com base no evento Remoo de efeitos do jQuery

Adicionar efeitos do jQuery

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 , clique em Efeitos e clique no efeito desejado.

O painel de personalizao com as configuraes do efeito selecionado exibido. 4. Especifique as configuraes, como o elemento de destino ao qual o efeito deve ser aplicado, e a durao do efeito. O elemento de destino pode ser igual ao elemento selecionado inicialmente ou a um elemento diferente na pgina. Por exemplo, se desejar que os usurios cliquem em um elemento A para ocultar ou mostrar um elemento B, o elemento de destino B. 5. Para adicionar vrios efeitos do jQuery, repita as etapas acima. Ao selecionar vrios efeitos, o Dreamweaver aplica os efeitos na ordem em que so exibidos no painel Comportamentos. Para alterar a ordem dos efeitos, use as teclas de seta na parte superior do painel. O Dreamweaver insere automaticamente o cdigo relevante no documento. Por exemplo, se voc selecionar o efeito Fade, o seguinte cdigo ser inserido: Referncias de arquivos externos para os arquivos dependentes necessrios para que os efeitos do jQuery funcionem: <script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script> O seguinte cdigo aplicado ao elemento na tag de corpo: <li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li> Uma tag de script com o seguinte cdigo adicionada: <script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Efeitos do jQuery com base no evento

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.

Remoo de efeitos do jQuery


1. Selecione o elemento de pgina obrigatrio. O painel Comportamentos lista todos os efeitos aplicados atualmente ao elemento de pgina selecionado. 2. Clique no efeito que deseja excluir e clique em .

Para o incio

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Pesquisa de arquivos com base no nome de arquivo ou no contedo | Mac OS


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. Este recurso est disponvel somente para Mac OS. 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 pesquisa. Se no houver nenhum site selecionado no painel, a opo de pesquisa no aparecer. A Pesquisa dinmica usa a 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. 1. Selecione Editar > Pesquisa dinmica. Como alternativa, voc tambm pode usar CMD+SHIFT+F . O foco definido para a caixa de texto da Pesquisa dinmica no painel Arquivos. 2. Insira a palavra ou frase na caixa de texto. Os resultados so exibidos conforme o texto inserido na caixa de texto. Arquivos correspondentes Exibe um mximo de 10 nomes de arquivos que correspondem a seus critrios de pesquisa. A mensagem Mais de 10 resultados encontrados ser exibida se houver mais de 10 arquivos correspondentes. Refine seus critrios de pesquisa se no encontrar o arquivo desejado nas opes exibidas. Texto correspondente em Exibe um mximo de 10 arquivos que contm o texto que corresponde palavra ou frase que voc inseriu. Para mais opes, clique em Localizar todos. Os resultados so exibidos no painel Pesquisa. 3. Quando voc move o cursor do mouse sobre um resultado de pesquisa, uma dica de ferramenta com o caminho relativo raiz do arquivo exibida. Pressione Enter ou clique no item para abrir o arquivo. Para arquivos que contm texto correspondente, a primeira instncia do texto destacada. Use Cmd+G para navegar a outras instncias. Nota: para fechar o painel de resultados da Pesquisa dinmica, clique fora do painel ou pressione Escape/Esc

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Inserir udio HTML5


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. O Dreamweaver permite inserir e visualizar udio HTML5 em pginas da Web. O elemento de udio HTML5 fornece um modo padro de incorporar o contedo de udio em pginas da Web. Para obter mais informaes sobre o elemento de udio HTML5, consulte o artigo sobre udio HTML5 em W3schools.com.

Inserir udio HTML5 Visualizar o udio no navegador

Inserir udio HTML5


1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o udio. 2. Selecione Inserir > Mdia > udio HTML5. O arquivo de udio inserido no local especificado. 3. No painel Propriedades, insira as informaes a seguir:

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 Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6

MP3 SIM NO SIM SIM NO

Wav NO SIM SIM SIM SIM

Ogg NO SIM SIM NO SIM

Ttulo: insira um ttulo para o arquivo de udio. Texto de emergncia: insira o texto a ser exibido em navegadores que no fornecem suporte ao HTML5. Controles: selecione se voc deseja exibir os controles de udio como Reproduzir, Pausar e Mudo na pgina HTML. Reproduo automtica: selecione se quiser que a reproduo do udio seja iniciada assim que ela for carregada na pgina da Web. udio de repetio: selecione esta opo se desejar que o udio seja reproduzido continuamente at que o usurio interrompa a reproduo. Mudo: selecione esta opo se desejar silenciar o udio depois do download. Pr-carregar: selecionar Automtico carrega o arquivo de udio inteiro no download da pgina. Se voc selecionar Metadados, o download dos metadados s ser feito aps a concluso do download da pgina.

Painel Propriedades do udio HTML5

Visualizar o udio no navegador

Para o incio

1. Salve a pgina da Web. 2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o udio.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Inserir vdeo HTML5


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud. O Dreamweaver permite inserir vdeo HTML5 em pginas da Web. O elemento de vdeo HTML5 fornece um modo padro de incorporar filmes ou vdeos em pginas da Web. Para obter mais informaes sobre o elemento de vdeo HTML5, consulte o artigo sobre vdeo HTML5 em W3schools.com.

Insero de vdeo HTML5 no Dreamweaver Inserir vdeo HTML5 Visualizar o vdeo no navegador

Inserir vdeo HTML5


1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o vdeo. 2. Selecione Inserir> Mdia> Vdeo HTML5. O elemento de vdeo HTML5 inserido no local especificado. 3. No painel Propriedades, especifique valores de vrias opes.

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 Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6

MP4 SIM NO SIM SIM NO

WebM NO SIM SIM NO SIM

Ogg NO SIM SIM NO SIM

Ttulo: especifique um ttulo para o vdeo. Largura (L): insira a largura em pixel do vdeo. Altura (A): insira a altura em pixel do vdeo. Controles: selecione se desejar exibir os controles de vdeo como Reproduzir, Pausar e Mudo na pgina HTML. Reproduo automtica: selecione se desejar que a reproduo do vdeo seja iniciada assim que ela for carregada na pgina da Web. Imagem do pster: insira o local da imagem que ser exibida at que o download do vdeo seja concludo ou at que o usurio clique em Reproduzir. Os valores de Altura e Largura so preenchidos automaticamente quando a imagem inserida. Repetio: selecione esta opo se desejar que o vdeo seja reproduzido continuamente at que o usurio o interrompa. Mudo: selecione esta opo se desejar silenciar o udio do vdeo. Vdeo Flash: selecione um arquivo SWF para navegadores que no suportam vdeo HTML5. Texto de emergncia: fornea o texto a ser exibido se o navegador no suportar HTML5. Pr-carregar: especifica as preferncias do autor em relao a como o vdeo deve ser carregado quando a pgina carregada. Se voc selecionar Automtico, todo o vdeo ser carregado na pgina de download. Se voc selecionar Metadados, o download dos metadados s ser feito aps a concluso do download da pgina.

Painel Propriedades de vdeo HTML5

Visualizar o vdeo no navegador


1. Salve a pgina da Web. 2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o vdeo.

Para o incio

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Suporte aprimorado a HTML5 para elementos de formulrio


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Fluxo de trabalho de formulrios revisados no Dreamweaver Novos atributos comuns a elementos de formulrio Elementos de formulrio com atributos modificados Elementos de formulrio HTML5 Em conformidade com o suporte continuado a HTML5 no Dreamweaver, novos atributos foram includos para alguns elementos de formulrio. Alm disso, quatro novos elementos de formulrio HTML5 foram includos. Voc pode localizar os elementos de formulrio no painel Inserir. Selecione Janela > Inserir. No menu do painel Inserir, selecione Formulrios.

Links relacionados
Para o incio

Novos atributos comuns a elementos de formulrio


Os novos atributos a seguir so comuns a todos os elementos de formulrio: Disabled : selecione esta opo se deseja que o navegador desative o elemento. Required : selecione esta opo se deseja que o navegador verifique se um valor foi especificado.

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.

Elementos de formulrio com atributos modificados

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 Campo de texto Boto Caixa de seleo Arquivo

Novos atributos especficos ao elemento List <Nenhum atributo novo especfico> <Nenhum atributo novo especfico> Multiple

Descrio de atributos http://www.w3.org/TR/htmlmarkup/input.text.html http://www.w3.org/wiki/HTML/Elements/but ton http://www.w3.org/TR/htmlmarkup/input.checkbox.html http://www.w3.org/TR/htmlmarkup/input.file.html

Formulrio Oculto Senha Imagem Redefinir Enviar Boto de opo rea do texto Selecionar

No validate , Accept charset <Nenhum atributo novo especfico> <Nenhum atributo novo especfico> Width, Height, Action, Method, Form no Validate, Form Enc Type, Form target <Nenhum atributo novo especfico> Form No Validate, Form Enc type, Form target, Action, Tab Index, Method <Nenhum atributo novo especfico> Rows, Cols, Place Holder, Wrap, Max Length, Tab Index Tamanho

http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/form.html http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/input.hidden.html http://www.w3.org/TR/htmlmarkup/input.password.html http://www.w3.org/TR/htmlmarkup/input.image.html http://dev.w3.org/html5/markup/button.rese t.html http://www.w3.org/TR/htmlmarkup/input.submit.html http://www.w3.org/TR/htmlmarkup/input.radio.html http://www.w3.org/TR/htmlmarkup/textarea.html http://www.w3.org/wiki/HTML/Elements/sel ect

Elementos de formulrio HTML5


Elemento do formulrio Cor Data Disponvel em 12.2 12.2 Descrio Para campos de entrada que devem ter uma cor. Controle que ajuda o usurio a selecionar uma data. Permite que o usurio selecione uma data e hora (com o fuso horrio). Permite que o usurio selecione uma data e hora (sem fuso horrio). Permite que usurio selecione um ms e um ano. Para os campos que devem conter apenas nmeros. Para os campos que devem conter valores de um intervalo de nmeros. Permite que o usurio selecione uma hora. Permite que o usurio selecione uma semana e um ano. Controle de edio de uma lista de endereos de email dados no valor do elemento. Controle de edio de texto simples de uma linha para inserir um ou mais termos de pesquisa. Controle de edio de texto simples de uma linha para inserir um nmero de telefone. Controle de edio de um URL absoluto dado no valor do elemento. Descrio de atributos

Para o incio

http://www.w3.org/TR/htmlmarkup/input.color.html http://www.w3.org/TR/htmlmarkup/input.date.html http://www.w3.org/TR/htmlmarkup/input.datetime.html http://www.w3.org/TR/htmlmarkup/input.datetimelocal.html http://www.w3.org/TR/htmlmarkup/input.month.html http://www.w3.org/TR/htmlmarkup/input.number.html http://www.w3.org/TR/htmlmarkup/input.range.html http://www.w3.org/TR/htmlmarkup/input.time.html http://www.w3.org/TR/htmlmarkup/input.week.html http://www.w3.org/TR/htmlmarkup/input.email.html

Data e hora

12.2

Data e hora locais

12.2

Ms Nmero

12.2 12.2

Faixa

12.2

Tempo

12.2

Semana

12.2

Email

12.1

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 http://www.w3.org/TR/htmlmarkup/input.url.html

URL

12.1

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

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

Atualizaes da Creative Cloud posteriores CS6


Atualizao 12.1, 24 de setembro de 2012: Para saber quais so as novidades desta verso, consulte Novidades | Creative Cloud. Atualizao 12.2, 14 de fevereiro de 2013: Para saber quais so as novidades desta verso, consulte Novidades | Creative Cloud | Fevereiro de 2013

Para o incio

Tutoriais em vdeo
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

Novo gerenciador de sites

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

Layouts fluidos da CSS com base em grade

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

Seleo de diversas classes CSS

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

Integrao do PhoneGap Build

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

Amostras do jQuery Mobile 1.0 e do jQuery Mobile


jQuery Mobile 1.0

Para o incio

A Dreamweaver CS6 enviada com o jQuery 1.6.4, bem como os arquivos do jQuery Mobile 1.0. As pginas iniciais do jQuery Mobile esto disponveis na caixa de dilogo Novo documento (Arquivo > Novo > Pgina da amostra > Iniciadores de disp. mveis). Voc tambm pode escolher entre dois tipos de arquivos CSS ao criar suas pginas para o jQuery Mobile: arquivos CSS completos ou arquivos CSS divididos em componentes estruturais e temticos. Aplicativos do jQuery Mobile e pginas para usurios iniciantes Adobe TV: Suporte aprimorado ao jQuery Mobile na Dreamweaver CS6 Amostras do jQuery Mobile Visualize todas as amostras (temas) em um arquivo CSS do jQuery Mobile usando o novo painel Amostras do jQuery Mobile (Janela > Amostras do jQuery Mobile). Em seguida, use o painel para aplicar amostras ou remov-las dos vrios elementos na sua pgina do jQuery Mobile. Use esse recurso para aplicar amostras individualmente a cabealhos, listas, botes e outros elementos. Uso de temas do jQuery Mobile na Dreamweaver CS6 (tutorial) Adobe TV: Suporte aprimorado do jQuery Mobile na Dreamweaver CS6

Integrao do Business Catalyst


Novos sites do Business Catalyst

Para o incio

Agora possvel criar um novo site de avaliao do Business Catalyst diretamente do Dreamweaver e explorar todos os recursos que o Business Catalyst pode oferecer aos seus clientes e projetos. Painel do Business Catalyst Depois de efetuar logon no Site do Business Catalyst, ser possvel inserir e criar mdulos diretamente do painel Business Catalyst (Janela > Business Catalyst) no Dreamweaver. Voc ter acesso a diversas funcionalidades, como catlogos de produto, blogs e integrao de mdia social, carrinhos de compras e mais. A integrao fornece uma forma de trabalhar continuamente com seus arquivos locais no Dreamweaver e com o contedo de banco de dados no site do Business Catalyst. Integrao do Dreamweaver e do Business Catalyst (referncia) Reimportao de sites do Business Catalyst na Dreamweaver CS6 (referncia) Personalizao do mdulo do Business Catalyst com o Dreamweaver (referncia)

Adobe TV: Criar e editar site do Business Catalyst

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

Otimizao simplificada de PSD

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

Melhorias transferncia de FTP

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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Alteraes nas opes Inserir


Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud, consulte Adobe Creative Cloud.

Acesso rpido para opes Inserir e suporte avanado a elementos HTML5 Opes obsoletas Opes reorganizadas no painel Inserir e no menu Inserir

Acesso rpido para opes Inserir e suporte avanado a elementos HTML5

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.

Opes reorganizadas no painel Inserir e no menu Inserir

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)

Opes Inserir no Dreamweaver 12.1

Alteraes nas opes Mdia e Formulrio

Opo Div Vdeo HTML5

CS6, CS5.5 Inserir > Objetos de layout > Tag div No disponvel

Creative Cloud Inserir > Div Inserir > Vdeo HTML5

Opes

Tela de desenho

No disponvel

Inserir > Tela de desenho Quebra de linha, espao no separvel, direitos autorais, marca registrada, marca comercial, libra, iene, euro, aspa esquerda, aspa direita, travesso, trao, outro Meta, palavras-chave, descrio, porta de exibio

Caractere

Inserir > HTML > Caracteres especiais

Inserir > Caractere

Cabealho Rgua horizontal

Inserir > HTML > Tags de cabealho No disponvel

Inserir > Cabealho Inserir > Regra horizontal

Dados

Inserir > Objetos de dados

Inserir > Dados

Conjunto de registros, Procedimento armazenado, Dados dinmicos, Regio repetitiva, Mostrar regio, Paginao do conjunto de registros, Ir para, Exibir contagem de registros, Conjunto de pginas mestre/detalhadas, Inserir registro, Atualizar registro, Excluir registro, Autenticao do usurio, Transformao XSLT

Tag Imagem

Inserir > Tag Inserir > Imagem

No disponvel Inserir > Imagem Imagem, Imagem de sobreposio, HTML do Fireworks Composio do Edge Animate, Flash SWF, vdeo em Flash, vdeo HTML5, udio HTML5, Plug-in

Mdia

Inserir > Mdia

Inserir > Mdia

Consultas de mdia Tabela Objetos da tabela

Inserir > Consultas de Mdia Inserir > Tabela Inserir > Objetos da tabela

Inserir > Consultas de Mdia Inserir > Tabela No disponvel Div, Div de layout da grade fluida, Desenhar posio absoluta, Cabealho, HGroup, Navegao, parte, Artigo, Seo, Rodap, Molduras Formulrio, Texto, E-mail, Senha, URL, Telefone, Pesquisar rea do texto, Boto, Enviar, Redefinir, Arquivo, Boto de imagem, Oculto, Selecionar, Boto de opo, Grupo de botes de opo, Caixa de seleo, Grupo de caixas de seleo, Conjuntos de campos, Rtulo

Layout

Inserir > Layout

Inserir > Layout

Formulrio

Inserir > Formulrio

Inserir > Formulrio

Hiperlink Link de e-mail ncora com nome Data O servidor inclui Comentrio HTML

Inserir > Hiperlink Inserir> Link de e-mail Inserir> ncora com nome Inserir > Data Inserir > O servidor inclui Inserir > Comentrio Inserir > HTML

Inserir > Hiperlink Inserir> Link de e-mail Inserir> ncora com nome Inserir > Data No disponvel No disponvel No disponvel Criar modelo, Criar modelo aninhado, Regio editvel, Regio opcional, Regio repetida, Regio opcional editvel, Tabela repetitiva

Modelo

Inserir > Modelo

Inserir > Modelo

Snippets recentes

Inserir > Snippets recentes

Inserir > Snippets recentes

Widget

Inserir > Widget

Inserir > Widget Pgina, Exibio em lista, Grade de layout, Bloco flexvel, Texto, Senha, rea de texto, Selecionar, Caixa de seleo, Boto de opo, Boto, Controle deslizante, Boto de alternncia invertido Regio editvel, Regio repetitiva Conjunto de dados, Regio, Repetir, Lista de repetio, Campo de texto de validao, rea de texto de validao, Caixa de seleo de validao, Seleo de validao, Senha de validao, Confirmao de validao, Grupo de botes de opo de validao, Barra de menus, Painis com guias, Acordeo, Painel flexvel, Dica de ferramenta

jQuery Mobile

Inserir > jQuery Mvel

Inserir > jQuery Mvel

No contexto

Inserir > No Contexto

Inserir > No Contexto

Spry

Inserir > Spry

Inserir > Spry

Objetos de dados Favoritos Obter mais objetos

Inserir > Objetos de dados Inserir > Favoritos Inserir > Obter mais objetos

Inserir > Dados Inserir > Favoritos Inserir > Obter mais objetos

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Arabic and Hebrew text


Bi-directional text flow Tag editor Text direction and Unicode-bidi in CSS Rules Table properties Div properties New and improved features for working in Arabic and Hebrew are available in the Middle East and North African edition of this software.

Bi-directional text flow

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.

Direction attribute in CSS When you enter Arabic, Hebrew, or mixed text, Dreamweaver recognizes the languages as Right-to-left (RTL) and displays it text appropriately.

Tag editor
You can apply direction and language settings using the Tag Editor.

To the top

Tag Editor

Text direction and Unicode-bidi in CSS Rules


You can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicode-bidi options.

To the top

Language options in CSS Rules

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.

To the top

Div direction

Twitter and Facebook posts are not covered under the terms of Creative Commons. Legal Notices | Online Privacy Policy

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.

O que h de novo (CS5.5)


Suporte a vrias telas

Para o incio

Visualize seus designs em resolues de tela padro ou use consultas de mdia para definir a resoluo. Quando testar em dispositivos que alteram a orientao de pgina conforme o dispositivo segurado, use as opes de paisagem ou retrato durante a visualizao. Para obter mais informaes, consulte Design para vrias telas e dispositivos.

Suporte a consulta de mdia


Use as consultas de mdia para personalizar a aparncia do seu site de resolues de tela diferentes. Para obter mais informaes, consulte Criao de consultas de mdia (CS5.5 e posterior).

Aplicativos da Web para dispositivos mveis


Projete rapidamente um aplicativo da Web que funcione na maior parte dos dispositivos mveis usando o widget jQuery Mobile. Para obter mais informaes, consulte Criao de aplicativos da Web para dispositivos mveis (CS5.5).

Empacotar aplicativos da Web para Android, iPhone e iPad


Empacote seus aplicativos da Web no Dreamweaver e implante-os no Android e em dispositivos com base em iOS. Para obter mais informaes , consulte Empacotamento de aplicativos da Web como aplicativos mveis nativos (CS5.5).

Suporte a HTML5, CSS3 e jQuery


O Dreamweaver oferece suporte a dicas de cdigo para HTML5, CSS3 e jQuery. Layouts iniciais tambm esto disponveis para a criao de pginas HTML5 a partir do zero. O Dreamweaver suporta o recurso HTML5 para incorporar vdeos em pginas HTML. Para obter mais informaes, consulte Incorporar vdeos em pginas da Web (HTML5). O painel CSS foi aprimorado para oferecer suporte s propriedades CSS3 mais utilizadas. Para obter mais informaes, consulte Dicas de cdigo e Aprimoramentos no suporte a CSS3 no painel de estilos CSS (CS 5.5).

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).

Suporte a validador de W3C


Crie pginas em HTML e XHTML compatveis com os padres usando o validador de W3C no Dreamweaver. Para obter mais informaes, consulte Validar documentos usando o validador de W3C (CS 5.5).

O que h de novo (CS5)


Adobe BrowserLab

Para o incio

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.

Integrao do Business Catalyst

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.

Arquivos rel. dinamicamente


O recurso Arquivos rel. dinamicamente permite que voc identifique tudo nos arquivos e scripts externos necessrios para montar pginas de Sistema de gerenciamento de contedo (CMS) com base em PHP alm de exibir os nomes dos arquivos na barra de ferramentas Arquivos relacionados. Por padro, o Dreamweaver oferece suporte para identificao de arquivos em estruturas CMS do WordPress, Drupal e Joomla! Estruturas CMS. Consulte Abrir Arquivos rel. dinamicamente.

Navegao de vis. Dinmica


A Navegao de vis. Dinmica ativa links em Visualizao dinmica, permitindo que voc interaja com aplicativos do servidor e dados dinmicos. O recurso permite que voc digite um URL para inspecionar pginas servidas por um servidor dinmico da Web e editar pginas navegadas para verificar se elas existem em um dos sites locais definidos. Consulte Visualizao de pginas no Dreamweaver.

Dicas de cdigo de classe personalizada PHP


As dicas de cdigo de classe personalizada PHP exibe a sintaxe apropriada para funes objetos e constantes de PHP, ajudando-o a digitar um cdigo mais preciso. As dicas de cdigo tambm funcionam com suas prprias funes e classes padro; bem como estruturas de terceiros como a da Zend.

Configurao de sites simplificada


A nova caixa de dilogo redesenhada Definio de sites (que agora a caixa de dilogo Configurao de sites) torna mais fcil configurar um site local do Dreamweaver para que voc possa iniciar a construo de pginas da Web imediatamente. A categoria de servidor remoto permite que voc especifique seus servidores remoto e de teste em uma s visualizao. Consulte Configurao de uma verso local do seu site e Conexo a um servidor remoto.

Dicas de cdigo especficas do site


O recurso Dicas de cdigo especficas do site permite a personalizao do seu ambiente de cdigo quando voc estiver trabalhando com bibliotecas PHP e estruturas CMS de terceiros, tais como WordPress, Drupal,Joomla! ou outras estruturas. Os arquivos de tema para blogs e outros arquivos padro PHP e diretrios podem ser includos ou excludos como fontes para dicas de cdigo. Consulte Dicas de cdigo especficas do site.

Aprimoramentos de suporte do Subversion


O Dreamweaver CS5 aumentou o suporte para o Subversion, permitindo que voc mova, copie e exclua arquivos localmente, e em seguida sincronize alteraes com seu repositrio remoto SVN. O novo comando Reverter permite que voc corrija rapidamente conflitos de rvore ou reverta uma verso anterior de um arquivo. Alm disso, uma nova extenso permite especificar a verso do Subversion com a qual voc deseja trabalhar em um determinado projeto. Consulte Usar o SVN (Subversion) para obter e devolver arquivos.

Recursos obsoletos
Os seguintes recursos se tornaram obsoletos no Dreamweaver CS5: Relatrio de validao de acessibilidade Comportamentos de servidor ASP/JavaScript

Para o incio

Verificar navegador, comportamento JavaScript Conectar-se a um servidor FTP/RDS sem definir um site Controlar Shockwave ou SWF, comportamento JavaScript Criar lbum de fotografias na Web Ocultar menu pop-up, comportamento JavaScript O InContext Editing gerencia classes de CSS disponveis Inserir FlashPaper Inserir/Remover marca da Web Integrao do Microsoft Visual Sourcesafe Barras de navegao Tocar som, comportamento JavaScript Menu Mostrar eventos (painel Comportamentos) Mostrar menu pop-up, comportamento JavaScript Linha do tempo, comportamentos JavaScript Validar tags Visualizao Live Data

Avisos legais | Poltica de privacidade on-line

Tutoriais de introduo do Dreamweaver


Tutoriais em vdeo Aprenda a usar a Dreamweaver Adobe TV (22 de fevereiro de 2013) tutorial Aprenda as noes bsicas da Dreamweaver CS6 com os tutoriais de introduo e novos recursos criados por especialistas no produto.

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.

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.

Construo de pginas mveis com o Dreamweaver CS5.5 David Karlins (3 de agosto de 2011) tutorial David Karlins, autor de "Dicas da Adobe Creative Suite 5 Web Premium: 100 tcnicas essenciais", aborda as tcnicas para criar pginas da Web adaptadas para celular com base em Javascript do jQuery.

Criao de layout de pgina com a Dreamweaver CS6 Adobe Creative Team (19 de julho de 2012) artigo 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 da CSS predefinido e verificar a compatibilidade de navegador.

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, trabalhando com modelos de mdulos dessa 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.

rea de trabalho e fluxo de trabalho


Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Fluxo e rea de trabalho do Dreamweaver


A interface de usurio foi simplificada na Dreamweaver CC e posterior. Como resultado, voc talvez no consiga localizar algumas das opes descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informaes, consulte este artigo.

Viso geral do fluxo de trabalho do Dreamweaver Viso geral do layout da rea de trabalho Viso geral dos elementos da rea de trabalho Viso geral da janela Documento Viso geral da barra de ferramentas de documento Viso geral da barra de ferramentas padro Viso geral da barra de ferramentas Processamento do estilo Viso geral da barra de ferramentas Navegao do navegador Viso geral da barra de ferramentas Codificao Viso geral da barra Status Viso geral do Inspetor de propriedades Viso geral do painel Inserir Viso geral do painel Arquivos Viso geral do painel CSS Styles Viso geral das guias visuais Usurios do GoLive

Viso geral do fluxo de trabalho do Dreamweaver


Voc pode usar vrias abordagens para criar um site. Esta uma delas: Planejar e configurar seu site

Para o incio

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

criar e editar pginas. (Consulte Trabalho com cdigo de pgina.) Configurao de um aplicativo da Web para contedo dinmico Muitos sites contm pginas dinmicas que permitem aos visitantes visualizar as informaes armazenadas nos bancos de dados e que, normalmente, permitem que alguns visitantes adicionem novas informaes e editem as informaes nos bancos de dados. Para criar tais pginas, voc precisa primeiro configurar um servidor da Web e um servidor de aplicativo, criar ou modificar um site do Dreamweaver e conectarse a um banco de dados. (Consulte Preparao para criar sites dinmicos.) Criao de pginas dinmicas No Dreamweaver, voc pode definir uma variedade de fontes de contedo dinmico, incluindo conjuntos de registros extrados de bancos de dados, parmetros de formulrio e componentes JavaBeans. Para adicionar o contedo dinmico a uma pgina, basta arrast-lo at a pgina. Voc pode definir a pgina para exibir um ou vrios registros de uma vez, exibir mais de uma pgina de registros, adicionar links especiais para passar de uma pgina de registros para a prxima (e vice-versa) e criar contadores de registro para ajudar os usurios a rastrearem os registros. Voc pode incluir a lgica de aplicativos ou de negcios usando tecnologias como o Adobe ColdFusion e os servios da Web. Se precisar de mais flexibilidade, voc pode criar comportamentos de servidor personalizados e formulrios interativos. (Consulte Tornar as pginas dinmicas.) Teste e publicao O teste das pginas um processo contnuo que acontece durante todo o ciclo de desenvolvimento. No final do ciclo, o site publicado em um servidor. Muitos desenvolvedores tambm incluem uma manuteno peridica para assegurar que os sites permaneam atualizados e funcionais. (Consultar Envio e recebimento de arquivos do servidor.) Para assistir a um tutorial em vdeo sobre o que voc pode fazer no Dreamweaver, consulte www.adobe.com/go/lrvid4040_dw_br.

Viso geral do layout da rea de trabalho

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

Viso geral dos elementos da rea de trabalho


A rea de trabalho inclui os seguintes elementos.

Para o incio

Observao: o Dreamweaver fornece muitos outros painis, inspetores e janelas. Para abrir os painis, os inspetores e as janelas, use o menu Janela. Tela de boas-vindas Permite abrir um documento recente ou criar um novo documento. Na tela de Boas-vindas, voc tambm pode sabe mais sobre o Dreamweaver fazendo um tour do produto ou obtendo um tutorial. Barra de aplicativos Localizada na parte superior da janela do aplicativo, contm o alternador da rea de trabalho, os menus (apenas no Windows) e outros controles do aplicativo. Barra de ferramentas Documento Contm botes que oferecem opes para as diferentes visualizaes da janela Documento (como a Visualizao de design e a Visualizao de cdigo), vrias opes de visualizao e algumas operaes comuns, como visualizao em um navegador. Barra de ferramentas Padro Para exibir a barra de ferramentas Padro, selecione Visualizar > Barras de ferramentas > Padro. A barra de ferramentas 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.

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

Viso geral da janela Documento


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.

Viso geral da barra de ferramentas de documento

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

Viso geral da barra de ferramentas Padro

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.

Viso geral da barra de ferramentas Processamento do estilo


Observao: a barra de ferramentas Processamento de estilo foi removida da Dreamweaver CC e posterior.

Para o incio

A barra de ferramentas Processamento do estilo (oculta por padro) 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 CSS Styles. Para exibir a barra de ferramentas, selecione Visualizar > Barras de ferramentas > Processamento do estilo.

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.

Viso geral da barra de ferramentas Navegao do navegador

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)

A. Controles do navegador B. Caixa de endereo C. Opes de Visualizao dinmica Barra de ferramentas de navegao do navegador (CC)

A. Controles do navegador B. Caixa de endereo C. Opes de Visualizao dinmica Por padro, os links no esto ativos na Visualizao dinmica. Os links no ativos permitem que voc selecione ou clique no texto de link na janela Documento sem ser levado outra pgina. Para testar links na Visualizao dinmica, voc pode ativar o clique nico ou o clique contnuo selecionando Seguir links ou Seguir links continuamente no menu de opes Visualizar direita da caixa de endereo.

Viso geral da barra de ferramentas Codificao

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)

Barra de ferramentas de codificao (CC)

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 .

Viso geral da barra Status


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)

Para o incio

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.

Viso geral do Inspetor de propriedades

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)

Inspetor de propriedades (CC)

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.

Viso geral do painel Inserir

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)

Painel Inserir (CC)

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.

O painel Inserir est organizado nas seguintes categorias: Categoria Comum Permite criar e inserir os objetos usados com mais frequncia, como imagens e tabelas. Categoria Layout Permite inserir tabelas, elementos de tabelas, tags div , quadros e widgets do Spry. Voc tambm pode escolher duas exibies para tablets: Padro (opo padro) e Tabelas expandidas. Categoria Formulrios Contm botes para criar formulrios e inserir elementos de formulrios, incluindo widgets de validao do Spry. Categoria Dados Permite inserir objetos de dados do Spry e outros elementos dinmicos como conjuntos de registros, regies repetitivas e formulrios de insero e atualizao de registros. Categoria Spry Contm botes para criar pginas do Spry, incluindo objetos de dados e widgets do Spry. Categoria jQuery Mobile Contm botes para construir sites que usem o jQuery Mobile.

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).

Viso geral do painel Arquivos


Use o painel Arquivos para visualizar e gerenciar os arquivos no seu site do Dreamweaver.

Para o incio

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.

Viso geral do painel CSS Styles

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)

Painel CSS Designer (CC)

Para redimensionar qualquer painel, arraste as bordas entre os painis. No modo Atual, o painel CSS Styles exibe trs painis: o painel Resumo para seleo que mostra as propriedades CSS para a seleo atual no documento, o painel Regras que mostra o local das propriedades selecionadas (ou uma cascata de regras para a tag selecionada, dependendo da sua seleo) e o painel Propriedades que permite editar as propriedades CSS para a regra que define a seleo. No modo Todos, o painel CSS Styles 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 definida no documento atual alm de todas as regras definidas nas folhas de estilo anexadas ao documento atual. O painel Propriedades permite editar as propriedades CSS para qualquer regra selecionada no painel Todas as regras. Todas as alteraes feitas no painel Propriedades so aplicadas imediatamente, permitindo a visualizao do seu trabalho em andamento.

Viso geral das guias visuais

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

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade Online

Recolhimento de cdigo
Sobre o recolhimento de cdigo Recolhimento e expanso de fragmentos de cdigo Colagem e movimentao de fragmentos de cdigo recolhidos

Sobre o recolhimento de cdigo

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

Recolhimento e expanso de fragmentos de cdigo

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.

Seleo de um fragmento de cdigo recolhido


Na Visualizao de cdigo, clique no fragmento de cdigo recolhido. Nota: Quando voc faz uma seleo na Visualizao de design que parte de um fragmento de cdigo recolhido, o fragmento automaticamente expandido na Visualizao de cdigo. Quando voc faz uma seleo na Visualizao de design que um fragmento de cdigo completo, o fragmento permanece recolhido na Visualizao de cdigo.

Visualizao do cdigo em um fragmento de cdigo recolhido sem expandi-lo


Mantenha o ponteiro do mouse sobre o fragmento de cdigo recolhido.

Uso de atalhos de teclado para recolher e expandir cdigo


Voc tambm pode usar os seguintes atalhos de teclado: Comando Recolher seleo Recolher seleo expandida Expandir seleo Recolher tag completa Recolher tag completa expandida Expandir tudo Windows Control+Shift+C Control+Alt+C Control+Shift+E Control+Shift+J Control+Alt+J Control+Alt+E Macintosh Command+Shift+C Command+Alt+C Command+Shift+E Command+Shift+J Command+Alt+J Command+Alt+E

Colagem e movimentao de fragmentos de cdigo recolhidos


Voc pode copiar e colar fragmentos de cdigo recolhidos ou mov-los arrastando-os.

Para o incio

Cpia e colagem de um fragmento de cdigo recolhido


1. Selecione o fragmento de cdigo recolhido. 2. Selecione Editar > Copiar. 3. Coloque o ponto de insero no local em que voc deseja colar o cdigo. 4. Selecione Editar > Colar. Nota: Voc pode realizar a colagem em outros aplicativos, mas o recolhimento do fragmento de cdigo no ser preservado.

Arrastar um fragmento de cdigo recolhido


1. Selecione o fragmento de cdigo recolhido. 2. Arraste a seleo para o novo local. Para arrastar uma cpia da seleo, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Alt (Macintosh) e arraste. Nota: No possvel arrastar para outros documentos. Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Personalizao da rea de trabalho do Dreamweaver CS5


Gerenciamento de janelas e painis Salvamento e alternncia de espaos de trabalho Exibir documentos com abas (Dreamweaver Macintosh) Ativao de cones coloridos Ocultar e exibir a tela de boas-vindas do Dreamweaver Sobre a personalizao do Dreamweaver em sistemas de vrios usurios Definir preferncias gerais do Dreamweaver Definir as preferncias de Fontes do Dreamweaver Personalizar cores de realce do Dreamweaver Restaurar preferncias padro

Gerenciamento de janelas e painis

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.

Reorganizar, encaixar e flutuar as janelas de documentos


Quando voc abre mais que um arquivo, as janelas de Documento so tabuladas. Para reorganizar a ordem das janelas de Documento tabuladas, arraste uma guia de janela para o novo local no grupo. Para desencaixar (flutuar ou separar a guia) uma janela de documento de um grupo de janelas, arraste a guia da janela para fora do grupo. Nota: No Photoshop voc tambm pode selecionar Janela > Organizar > Flutuar na janela para flutuar uma nica janela de documento ou Janela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documento de uma vez. Consulte as notas tcnicas kb405298 para obter mais informaes. Nota: o Dreamweaver no oferece suporte a encaixe e desencaixe de janelas de Documento. Use o boto Minimizar da janela do documento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmente para criar janelas de documentos lado a lado. Pesquise Lado a Lado Verticalmente no Ajuda do Dreamweaver para obter mais informaes sobre este tpico. O fluxo de trabalho para os usurios Macintosh difere ligeiramente. Para encaixar uma janela de Documento em um grupo separado de janelas de Documento, arraste a janela para o grupo. Para criar grupos de documentos empilhados ou lado a lado, arraste a janela para uma das zonas de destino nas partes superior, inferior ou laterais de qualquer janela. Voc tambm pode selecionar um layout para o grupo usando o boto Layout na barra de aplicativos. Nota: alguns produtos no tm suporte para essa funcionalidade. No entanto, seu produto pode conter os comandos Cascata ou Lado a lado no menu Janela para ajud-lo na exibio de documentos. Para alternar para outro documento em um grupo tabulado, arraste a seleo sobre a guia do documento por alguns instantes. Nota: alguns produtos no tm suporte para essa funcionalidade.

Encaixe e desencaixe de painis


Um encaixe um conjunto de painis ou grupos de painis exibidos juntos, geralmente em uma orientao vertical. Encaixe e desencaixe painis movendo-os para dentro e para fora de um encaixe. Para encaixar um painel, arraste-o pela guia para dentro do encaixe, na parte superior, na parte inferior ou entre outros painis. Para encaixar um grupo de painis, arraste-o pela barra de ttulo (a barra slida vazia acima das guias) para dentro do encaixe. Para remover um painel ou grupo de painis, arraste-o para fora do encaixe pela guia ou barra de ttulo. possvel arrast-lo para dentro de outro encaixe ou deix-lo flutuando livremente.

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.

Para mover um painel, arraste-o pela guia. Para mover um grupo de painis , arraste a barra de ttulo (a rea acima das guias).

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.

Adio e remoo de painis


Se todos os painis forem removidos de um encaixe, ele desaparecer. possvel criar um encaixe movendo os painis para a borda direita do espao de trabalho at uma zona de destino aparecer. Para remover um painel, clique com o boto direito e selecione Fechar (Windows) ou, com a tecla Control pressionada, selecione Fechar (Mac), ou desmarque-o do menu de Janela. Para adicionar um painel, selecione-o no menu Janela e encaixe-o no local que desejado.

Manipulao de grupos de painis


Para mover um painel em um grupo, arraste a guia do painel para a zona para soltar realada no grupo.

Adio de um painel a um grupo de painis Para reorganizar painis em um grupo, arraste a guia do painel para um novo local no grupo. Para remover um painel de um grupo para que ele flutue livremente, arraste o painel pela guia para fora do grupo. Para mover um grupo, arraste a barra de ttulo (a rea acima das guias).

Empilhamento de painis flutuantes


Se for arrastado para um painel fora de seu encaixe mas no em uma zona para soltar, o painel flutuar livremente. O painel flutuante permite posicion-lo em qualquer lugar no espao de trabalho. possvel empilhar painis flutuantes ou grupos de painis para que eles sejam movidos como uma unidade quando a barra de ttulo superior for arrastada.

Painis empilhados de livre flutuao Para empilhar painis flutuantes, arraste um painel pela guia para a zona para soltar na parte inferior de outro painel. Para alterar a ordem de empilhamento, arraste um painel para cima ou para baixo pela guia. Nota: solte a guia sobre a zona para soltar azul estreita entre os painis, em vez de sobre a zona para soltar abrangente em uma barra de ttulo. Para remover um painel ou grupo de painis da pilha para que ele flutue sozinho, arraste-o para fora pela guia ou pela barra de ttulo.

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.

Contrair e expandir cones do painel


possvel contrair painis em cones para reduzir a desordem no espao de trabalho. Em alguns casos, os painis so contrados em cones no espao de trabalho padro.

Painis recolhidos em cones

Painis expandidos de cones Para contrair ou expandir todos os cones de painis numa coluna, clique na seta dupla na parte superior do encaixe. Para expandir um nico cone do painel, clique nesse cone. Se quiser redimensionar cones de painis para que voc s veja os cones (e no os rtulos), ajuste a largura do encaixe at o texto desaparecer. Para exibir um texto de cone novamente, alargue o encaixe. Para contrair um painel estendido de volta ao cone, clique na guia, no cone ou na seta dupla na barra de ttulo do painel. Em alguns produtos, se voc selecionar Contrair painis de cone automaticamente nas preferncias de Interface ou Opes de interface do usurio, um cone de painel expandido ser contrado automaticamente quando voc clicar fora dele. Para adicionar um painel flutuante ou grupo de painis em um encaixe de cones, arraste-o por sua guia ou barra de ttulo. (Os painis so contrados automaticamente em cones ao serem adicionados a um encaixe de cones.) Para mover um cone de painel (ou grupo de cones de painis), arraste o cone. Voc pode arrastar cones do painel para cima e para baixo no encaixe para outros encaixes (onde aparecem no estilo de painel desse encaixe), ou para fora do encaixe (onde aparecem como cones flutuantes).

Salvamento e alternncia de espaos de trabalho

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.

Salvamento de uma rea de trabalho personalizada


1. Com a rea de trabalho na configurao que voc deseja salvar, siga um destes procedimentos: (Illustrator) Escolha Janela > rea de Trabalho > Salvar rea de Trabalho. (Photoshop, InDesign, InCopy) Escolha Janela > rea de Trabalho > Nova rea de Trabalho.

(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.

Exibio ou alternncia entre espaos de trabalho


Selecione um espao de trabalho no alternador de espaos de trabalho na Barra de aplicativos. No Photoshop, possvel atribuir atalhos de teclado para cada rea de trabalho para navegar entre elas rapidamente.

Excluso de uma rea de trabalho personalizada


Selecione Gerenciar reas de trabalho no alternador de reas de trabalho na Barra de aplicativos, selecione a rea de trabalho e, em seguida, clique em Excluir. (A opo no est disponvel no Fireworks.) (Photoshop, InDesign, InCopy) Selecione Excluir rea de trabalho no alternador de reas de trabalho. (Illustrator) Escolha Janela > rea de trabalho > Gerenciar reas de trabalho, selecione a rea de trabalho e clique no cone Excluir. (Photoshop, InDesign) Escolha Janela > rea de trabalho > Excluir reas de trabalho, selecione a rea de trabalho e clique no cone Excluir.

Restaurao do espao de trabalho padro


1. Selecione a rea de trabalho Padro ou Fundamentos no alternador de rea de trabalho na barra de aplicativos. Para Fireworks, consulte o artigo http://www.adobe/devnet/fireworks/articles/workspace_manager_panel.html. Nota: No Dreamweaver, Designer a rea de trabalho padro. 2. Para Fireworks (Windows), exclua estas pastas: Windows Vista \\Usurios\<nome de usurio>\AppData\Roaming\Adobe\Fireworks CS4\ Windows XP \\Documents and Settings\<nome de usurio>\Application Data\Adobe\Fireworks CS4 3. (Photoshop, InDesign, InCopy) Selecione Janela > Espao de trabalho > Redefinir [Nome do espao de trabalho].

(Photoshop) Restaurao de uma organizao de rea de trabalho salva


No Photoshop, as reas de trabalho aparecem automaticamente conforme voc as organizou da ltima vez, mas possvel restaurar a organizao de painis original e salva. Para restaurar uma rea de trabalho individual, selecione Janela > rea de Trabalho > Redefinir Nome da rea de trabalho. Para restaurar todas as reas de trabalho instaladas com o Photoshop, clique em Restaurar reas de trabalho padro nas preferncias da interface. Para reorganizar a ordem das reas de trabalho na barra de aplicativos, arraste-as.

Exibir documentos com abas (Dreamweaver Macintosh)

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.

Abrir um documento com abas em uma janela separada


Clique com a tecla Control pressionada na aba e selecione Mover para a nova janela, no menu de contexto.

Combinar documentos separados em janelas com abas


Selecione Janela > Combinar como abas.

Alterar a configurao padro do documento com abas


1. Selecione Dreamweaver > Preferncias e, em seguida, selecione a categoria Geral. 2. Marque ou desmarque Abrir documentos em abas e clique em OK. O Dreamweaver no muda a exibio dos documentos que esto atualmente abertos quando as preferncias so alteradas. No entanto, os

documentos abertos depois da seleo de uma nova preferncia so exibidos de acordo com a preferncia selecionada.

Ativao de cones coloridos

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.

Ocultar e exibir a tela de boas-vindas do Dreamweaver

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.

Ocultar a tela de boas-vindas


Na tela de boas-vindas, selecione a opo No mostrar novamente.

Exibir a tela de boas-vindas


1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Na categoria Geral, selecione a opo Mostrar tela de boas-vindas.

Sobre a personalizao do Dreamweaver em sistemas de vrios usurios

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.

Definir preferncias gerais do Dreamweaver


1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).

Para o incio

2. Defina uma das seguintes opes: Abrir documentos em abas Abre todos os documentos em uma nica janela com abas que permitem alternar entre os documentos (somente Macintosh). Mostrar tela de boas-vindas Exibe a tela de boas-vindas do Dreamweaver quando voc inicia o Dreamweaver ou quando no h nenhum documento aberto. Reabrir documentos ao inicializar Abre todos os documentos que estavam abertos quando o Dreamweaver foi fechado. Se essa opo no for selecionada, o Dreamweaver exibir a tela de boas-vindas ou uma tela em branco ao inicializar (dependendo da configurao de Mostrar tela de boas-vindas). Avisar ao abrir arquivos somente leitura Avisa quando um arquivo somente leitura (bloqueado) aberto. Escolha para desbloquear/retirar, visualizar ou cancelar o arquivo. Ativar arquivos relacionados Permite ver quais arquivos esto conectados ao documento atual (por exemplo, arquivos CSS ou

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.

Definir as preferncias de Fontes do Dreamweaver

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).

2. Na lista Categoria esquerda, selecione Fontes. 3. Selecione um tipo de codificao (como Europeu Ocidental ou Japons) na lista Configuraes de fontes. Nota: Para exibir um idioma asitico, voc deve usar um sistema operacional que suporte fontes de bytes duplos. 4. Selecione uma fonte e o tamanho a serem usados para cada categoria da codificao selecionada. Nota: Para aparecer nos menus pop-up, a fonte deve estar instalada no computador. Por exemplo, para ver um texto em japons, voc deve ter uma fonte japonesa instalada. Fonte proporcional A fonte usada pelo Dreamweaver para exibir textos normais (por exemplo, textos de pargrafos, cabealhos e tabelas). O padro depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padro a fonte Times New Roman tamanho 12. (Mdio) no Windows e Times 12 pt. no Mac OS. Fonte fixa A fonte usada pelo Dreamweaver para exibir textos entre as tags pre, code e tt. O padro depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padro a fonte Courier New 10 pt. (Pequeno) no Windows e Monaco 12 pt. no Mac OS. Visualizao de cdigo A fonte usada para todos os textos que aparecem na Visualizao de cdigo e no Inspetor de cdigo. O padro depende das fontes instaladas no seu sistema.

Personalizar cores de realce do Dreamweaver

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.

Alterar uma cor de realce


1. Selecione Editar > Preferncias e selecione a categoria Realce. 2. Ao lado do objeto do qual deseja alterar a cor de realce, clique na caixa Cor e use o seletor de cores para selecionar uma nova cor ou inserir um valor hexadecimal.

Ativar ou desativar o realce de um objeto


1. Selecione Editar > Preferncias e selecione a categoria Realce. 2. Ao lado do objeto para o qual deseja ativar ou desativar a cor de realce, marque ou desmarque a opo Mostrar.

Restaurar preferncias padro


Para saber os procedimentos para restaurar as preferncias padro do Dreamweaver, consulte Tech Note 83912. Mais tpicos da Ajuda Viso geral do layout da rea de trabalho

Para o incio

Avisos legais | Poltica de privacidade on-line

Painis de contedo dinmico


Painel Painel Painel Painel 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

Painel Comportamentos de servidor


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 Comportamentos de servidor para adicionar os comportamentos de servidor do Dreamweaver a uma pgina, editar outros e cri-los.

Painel Bancos de dados

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

Avisos legais | Poltica de privacidade on-line

Aprimoramentos no suporte a CSS3 no painel de estilos CSS (CS 5.5)


Aplicar propriedades CSS3 usando o painel pop-up Especificao de vrios conjuntos de valores Localizar propriedades na exibio de Categoria Verificar compatibilidade com navegadores Visualizar alteraes na Visualizao dinmica Um painel pop-up foi introduzido no Painel CSS das seguintes propriedades: sombra do texto sombra da caixa raio da borda imagem da borda As opes no painel pop-up garantem a aplicao das propriedades corretamente mesmo se voc no estiver familiarizado com a sintaxe W3C.

As opes de exibio do painel pop-up da imagem de borda da propriedade CSS3

Aplicar propriedades CSS3 usando o painel pop-up


Clique no cone "+" correspondente a essas propriedades. Use as opes no painel pop-up para aplicar a propriedade.

Para o incio

Especificao de vrios conjuntos de valores

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.

Localizar propriedades na exibio de Categoria

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.

Verificar compatibilidade com navegadores

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.

Visualizar alteraes na Visualizao dinmica

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

H algum tutorial que voc gostaria de compartilhar?

Suporte aprimorado para CSS3 em DW CS5.5


Preran Kurnool Suporte para Sombra do texto, Sombra da caixa, Raio da borda e Imagem da borda

Avisos legais | Poltica de privacidade on-line

Otimizao da rea de trabalho para desenvolvimento visual


Exibio de painis de desenvolvimento de aplicativo da Web Exibir o banco de dados dentro do Dreamweaver Visualizao de pginas dinmicas em um navegador Restringir informaes de banco de dados exibidas no Dreamweaver Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e comandos do ASP Opes de Entrada

Exibio de painis de desenvolvimento de aplicativo da Web

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.

Exibir o banco de dados dentro do Dreamweaver


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).

Para o incio

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

(Macintosh) no nome da tabela na lista e selecione Exibir dados no menu pop-up.

Visualizao de pginas dinmicas em um navegador

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.

Restringir informaes de banco de dados exibidas no Dreamweaver

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.

Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e comandos do ASP


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.

Para o incio

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

Avisos legais | Poltica de privacidade on-line

Configuraes das preferncias de codificao


Sobre as preferncias de codificao Definio da aparncia do cdigo Alterao do formato de cdigo Definio das preferncias de regravao de cdigo Definio das cores de cdigo Uso de um editor externo

Sobre as preferncias de codificao

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

Definio da aparncia do cdigo

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. na barra de ferramentas na parte superior da Visualizao de cdigo ou no Inspetor de

3. Marque ou desmarque qualquer uma destas opes: Quebra automtica de palavra Quebra automaticamente a linha de cdigo para que voc possa visualiz-lo sem rolar a tela horizontalmente. Esta opo no insere quebras de linha; ela apenas facilita a visualizao de cdigo. Nmeros de linha Exibe nmeros de linha na lateral do cdigo. Caracteres ocultos Exibe caracteres especiais no lugar do espao em branco. Por exemplo, um ponto substitui cada espao, uma divisa dupla substitui cada tabulao e um marcador de pargrafo substitui cada quebra de linha. Nota: As quebras de linha manuais usadas pelo Dreamweaver no so exibidas com um marcador de pargrafo. Realar cdigo invlido Faz com que o Dreamweaver realce em amarelo todo o cdigo HTML invlido. Quando voc selecionar uma tag invlida, o Inspetor de propriedades exibir as informaes sobre como corrigir o erro. Sinalizao da sintaxe por cores Ativa ou desativa a codificao por cores. Para informaes sobre a alterao do esquema de cores, consulte Definio das cores de cdigo. Recuar automaticamente Faz com que o cdigo recue automaticamente quando voc pressiona Enter enquanto escreve o cdigo. A nova linha de cdigo recuada no mesmo nvel da linha anterior. Para obter informaes sobre a alterao do espaamento do recuo, consulte a opo Tamanho da tabulao em Alterao do formato de cdigo.

Alterao do formato de cdigo


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.

Para o incio

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.

Definio das preferncias de regravao de cdigo

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.

Definio das cores de cdigo

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.

Uso de um editor externo

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.

Definio de um editor externo para um tipo de arquivo


1. Selecione Editar > Preferncias. 2. Selecione Tipos de arquivos/editores na lista Categoria esquerda, defina as opes e clique em OK. Abrir na Visualizao de cdigo Especifica as extenses de nome de arquivo abertas automaticamente na Visualizao de cdigo do Dreamweaver.

Editor de cdigo externo Especifica o editor de texto a ser usado. Recarregar arquivos modificados Especifica o comportamento quando o Dreamweaver detecta que as alteraes foram feitas externamente em um documento aberto no Dreamweaver. Salvar ao iniciar Especifica se o Dreamweaver sempre deve salvar o documento atual antes de iniciar o editor, nunca salvar o documento ou perguntar a voc se deseja salvar cada vez que iniciar o editor externo. Fireworks Especifica editores para vrios tipos de arquivo de mdia.

Inicializao de um editor de cdigo externo


Selecione Editar > Editar com editor externo. Mais tpicos da Ajuda Viso geral da barra de ferramentas de codificao Limpar arquivos em HTML do Microsoft Word

Avisos legais | Poltica de privacidade on-line

Configurao do ambiente de codificao


Uso de reas de trabalho orientadas a codificador Visualizao de cdigo Personalizao de atalhos de teclado Abertura de arquivos na Visualizao de cdigo por padro

Uso de reas de trabalho orientadas a codificador

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.

Visualizao de cdigo na janela Documento


Selecione Exibir > Cdigo.

Codificao e edio de uma pgina simultaneamente na janela Documento


1. Selecione Exibir > Cdigo e design. O cdigo aparece no painel superior e a pgina aparece no painel inferior. 2. Para exibir a pgina na parte superior, selecione Visualizao de design visvel, no menu Opes de visualizao da barra de ferramentas Documento. 3. Para ajustar o tamanho dos painis na janela Documento, arraste a barra divisora para a posio desejada. A barra divisora est localizada entre os dois painis. A Visualizao de cdigo atualizada automaticamente quando voc fizer alteraes na Visualizao de design. No entanto, aps fazer alteraes na Visualizao de cdigo, atualize manualmente o documento na Visualizao de design clicando em Visualizao de design ou pressionando F5.

Visualizao de cdigo em uma janela separada com o Inspetor de cdigo


O Inspetor de cdigo permite que voc trabalhe em uma janela de codificao separada, exatamente como na Visualizao de cdigo. Selecione Janela > Inspetor de cdigo. A barra de ferramentas inclui as seguintes opes: Gerenciamento de arquivos Insere ou obtm o arquivo. Visualizar/depurar no navegador Visualiza ou depura o documento em um navegador. Atualizar Visualizao de design Atualiza o documento na Visualizao de design para que ele reflita quaisquer alteraes feitas no cdigo. As alteraes feitas no cdigo s aparecero automaticamente na Visualizao de design depois que voc executar determinadas aes, como salvar o arquivo ou clicar neste boto. Referncia Abre o painel Referncia. Consulte Uso do material de referncia a linguagem. Navegao de cdigo Permite mover-se rapidamente pelo cdigo. Consulte Acessar a uma funo JavaScript ou VBScript. Opes de visualizao Permite que voc determine como o cdigo ser exibido. Consulte Definio da aparncia do cdigo. Para usar a Barra de ferramentas de codificao na lateral esquerda da janela, consulte Inserir cdigo com a Barra de ferramentas de codificao.

Personalizao de atalhos de teclado

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.

Abertura de arquivos na Visualizao de cdigo por padro

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

Avisos legais | Poltica de privacidade on-line

Uso do painel Inserir


Ocultar ou mostrar o painel Inserir Mostrar os botes em uma categoria especfica Exibir o menu pop-up para um boto Inserir um objeto Ignorar a caixa de dilogo de insero de objeto e inserir um objeto de alocador de espao vazio Modificar preferncias do painel Inserir Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir Inserir objetos usando botes na categoria Favoritos Exibir o painel Inserir como uma Barra de insero horizontal Reverter a Barra de insero horizontal para um grupo de painis Mostrar categorias da Barra de insero horizontal como abas Mostrar categorias da Barra de insero horizontal como um menu O painel Inserir contm botes para criar e inserir objetos, tais como tabelas e imagens. Os botes so organizados em categorias.

Ocultar ou mostrar o painel Inserir

Para o incio

Selecione Janela > Inserir. Nota: Se voc estiver trabalhando com determinados tipos de arquivo, como XML, JavaScript, Java e CSS, o painel Inserir e a opo de Visualizao de design estaro desativados, porque no possvel inserir itens nesses arquivos de cdigo.
Para o incio

Mostrar os botes em uma categoria especfica

Selecione o nome da categoria no menu pop-up Categoria. Por exemplo, para mostrar botes da categoria Layout, selecione Layout.
Para o incio

Exibir o menu pop-up para um boto


Clique na seta para baixo ao lado do cone do boto.

Inserir um objeto
1. Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir. 2. Siga um destes procedimentos:

Para o incio

Clique no boto de um objeto ou arraste o cone do boto na janela Documento. Clique na seta em um boto e selecione uma opo no menu. Dependendo do objeto, uma caixa de dilogo de insero de objeto correspondente pode aparecer, solicitando que voc procure um arquivo ou especifique parmetros para um objeto. Se preferir, o Dreamweaver pode inserir o cdigo no documento ou abrir um editor de tag ou um painel para que voc especifique informaes antes que o cdigo seja inserido. Para alguns objetos, nenhuma caixa de dilogo ser exibida se voc inserir o objeto na Visualizao de design, mas um editor de tag aparecer se o objeto for inserido na Visualizao de cdigo. Para alguns objetos, a insero do objeto na Visualizao de design faz com que o Dreamweaver passe para a Visualizao de cdigo antes da insero do objeto. Nota: Alguns objetos, como as ncoras nomeadas, no aparecem quando a pgina visualizada na janela de um navegador. Voc pode exibir cones na Visualizao de design que marcam a localizao desses objetos invisveis.

Ignorar a caixa de dilogo de insero de objeto e inserir um objeto de alocador de espao vazio

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

Modificar preferncias do painel Inserir


1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).

2. Na categoria Geral da caixa de dilogo Preferncias, desmarque Mostrar caixa de dilogo ao inserir objetos para ocultar as caixas de dilogo ao inserir objetos como imagens, tabelas, scripts e elementos de cabealho ou mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) ao criar o objeto. Ao inserir um objeto com essa opo desativada, os valores de atributo padro so aplicados. Use o Inspetor de propriedades para alterar as propriedades de objeto depois de inserir o objeto.

Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir


1. Selecione alguma categoria no painel Inserir.

Para o incio

2. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na rea em que os botes so exibidos; em seguida, selecione Personalizar favoritos. 3. Na caixa de dilogo Personalizar objetos favoritos, faa as alteraes necessrias e clique em OK. Para adicionar um objeto, selecione-o no painel Objetos disponveis esquerda e, em seguida, clique na seta entre os dois painis ou clique duas vezes no objeto no painel Objetos disponveis. Nota: Voc pode adicionar um objeto de cada vez. Voc no pode selecionar o nome de uma categoria, como Comum, para adicionar uma categoria inteira lista de favoritos. Para excluir um objeto ou separador, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique no boto Remover objeto selecionado na lista Objetos favoritos, acima do painel. Para mover um objeto, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique no boto de seta para cima ou para baixo, acima do painel. Para adicionar um separador abaixo de um objeto, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique no boto Adicionar separador, abaixo do painel. 4. Se voc no estiver na categoria Favoritos do painel Inserir, selecione essa categoria para ver suas alteraes.

Inserir objetos usando botes na categoria Favoritos

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

Exibir o painel Inserir como uma Barra de insero horizontal

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

Reverter a Barra de insero horizontal para um grupo de painis

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.

Mostrar categorias da Barra de insero horizontal como abas

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

Mostrar categorias da Barra de insero horizontal como um menu

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

Avisos legais | Poltica de privacidade on-line

Uso de barras de ferramentas, inspetores e menus de contexto


Exibir barras de ferramentas Usar o Inspetor de propriedades Usar menus de contexto

Exibir barras de ferramentas

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.

Usar o Inspetor de propriedades

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.

Mostrar ou ocultar o Inspetor de propriedades


Selecione Janela > Propriedades.

Expandir ou reduzir o Inspetor de propriedades


Clique na seta de expanso no canto inferior direito do Inspetor de propriedades.

Visualizar e alterar propriedades para um elemento de pgina


1. Selecione o elemento de pgina na janela Documento. Talvez seja necessrio expandir o Inspetor de propriedades para visualizar todas as propriedades do elemento selecionado. 2. Altere qualquer propriedade no Inspetor de propriedades. Nota: Para obter informaes sobre propriedades especficas, selecione um elemento na janela Documento e clique no cone de Ajuda no canto superior direito do Inspetor de propriedades. 3. Se as alteraes no forem aplicadas imediatamente na janela Documento, siga um destes procedimentos para aplic-las: Clique fora dos campos de texto de edio de propriedade. Pressione Enter (Windows) ou Return (Macintosh). Pressione Tab para passar para outra propriedade.

Usar menus de contexto

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.

Mais tpicos da Ajuda Viso geral da barra de ferramentas Documento Definir propriedades de texto no Inspetor de propriedades

Avisos legais | Poltica de privacidade on-line

Trabalho na janela Documento


Alternar entre visualizaes na janela Documento Janelas de documento em cascata ou lado a lado Redimensionar a janela Documento Definir o tamanho da janela e a velocidade da conexo Relatrios no Dreamweaver

Alternar entre visualizaes na janela Documento

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.)

Passar para a Visualizao de cdigo


Siga um destes procedimentos: Selecione Exibir > Cdigo. Na barra de ferramentas Documento, clique no boto Mostrar visualizao de cdigo.

Alternar para a visualizao Dividir cdigo


A visualizao Dividir cdigo divide o documento em dois, assim voc pode trabalhar nas duas sees de cdigo de uma vez s. Selecione Exibir > Dividir cdigo.

Passar para a Visualizao de design


Siga um destes procedimentos: Selecione Exibir > Design. Na barra de ferramentas Documento, clique no boto Mostrar visualizao de design.

Mostrar visualizaes de cdigo e de design


Siga um destes procedimentos: Selecione Exibir > Cdigo e design. Na barra de ferramentas Documento, clique no boto Mostrar visualizaes de cdigo e design.

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.

Alternar entre as visualizaes de cdigo e de design


Pressione Control + crase (`). Se as duas visualizaes forem exibidas na janela Documento, esse atalho de teclado mudar o foco do teclado de uma visualizao para a outra.

Dividir verticalmente as visualizaes


Esta opo est disponvel somente na visualizao Dividir cdigo e nas visualizaes de cdigo e de design (Dividir visualizao). Est desabilitado para a Visualizao de cdigo e para a Visualizao de design. 1. Certifique-se de estar na visualizao Dividir cdigo (Exibir > Dividir cdigo) ou nas visualizaes de cdigo e de design (Exibir > Cdigo e design). 2. Selecione Exibir > Dividir verticalmente.

Se voc estiver nas visualizaes de cdigo e design, tem a opo de exibir a Visualizao de design esquerda (Exibir > Visualizao de design esquerda).

Janelas de documento em cascata ou lado a lado


Se houver muitos documentos abertos ao mesmo tempo, voc pode organiz-los em cascata ou lado a lado.

Para o incio

Janelas de documento em cascata


Selecione Janela > Em cascata.

Janelas de documento lado a lado


(Windows) Selecione Janela > Lado a lado horizontalmente ou Janela > Lado a lado verticalmente. (Macintosh) Selecione Janela > Lado a lado.

Redimensionar a janela Documento

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.

Redimensionar a janela Documento para um tamanho predefinido


Selecione um dos tamanhos do menu pop-up Tamanho da janela, na parte inferior da janela Documento. Dreamweaver CS5.5 e posterior oferece uma longa lista de opes, incluindo opes de dispositivos mveis comuns (como exemplificado abaixo).

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

Alterar os valores listados no menu pop-up Tamanho da janela


1. Selecione Editar tamanhos no menu pop-up Tamanho da janela. 2. Clique em qualquer valor de largura ou altura na lista Tamanhos de janela e digite um novo valor. Para ajustar a janela Documento somente a uma largura especfica (sem alterar a altura), selecione um valor de altura e exclua-o. 3. Clique na caixa Descrio para inserir um texto descritivo sobre um tamanho especfico.

Adicionar um novo tamanho ao menu pop-up Tamanho da janela


1. Selecione Editar tamanhos no menu pop-up Tamanho da janela. 2. Clique no espao em branco abaixo do ltimo valor da coluna Largura. 3. Insira valores para Largura e Altura. Para definir somente a Largura ou a Altura, deixe um campo em branco. 4. Clique no campo Descrio para inserir um texto descritivo sobre o tamanho adicionado. Por exemplo, voc pode digitar SVGA ou PC mdio prximo a uma entrada de um monitor de 800 x 600 pixels e Mac de 17 pol. prximo a

uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada para diversas dimenses de pixel.

Definir o tamanho da janela e a velocidade da conexo


1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Selecione a Barra de status (CS5) ou Tamanhos de janela (CS5.5 e posterior) da lista Categoria esquerda. 3. Defina uma das seguintes opes: Tamanhos de janela Permite personalizar os tamanhos de janela que aparecem no menu pop-up da barra de status.

Para o incio

Velocidade de conexo Determina a velocidade de conexo (em quilobits por segundo) usada para calcular o tamanho do download. O tamanho do download da pgina exibido na barra de status. Quando uma imagem selecionada na janela Documento, o tamanho de download da imagem exibido no Inspetor de propriedades.

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

Avisos legais | Poltica de privacidade on-line

Mais zoom e Menos zoom


Mais zoom ou menos zoom em uma pgina Edio de uma pgina aps a aplicao de zoom Panorama de uma pgina aps a aplicao de zoom Preenchimento da janela Documento com uma seleo Preenchimento da janela Documento com uma pgina inteira Preenchimento da janela Documento com a largura inteira de uma pgina O Dreamweaver permite aumentar a ampliao (mais zoom) na janela Documento, a fim de que voc possa verificar a preciso de pixel dos grficos, selecionar itens pequenos com mais facilidade, criar pginas com texto pequeno, criar pginas grandes etc. Nota: As ferramentas de zoom esto disponveis somente na Visualizao de design.

Mais zoom ou menos zoom em uma pgina


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.

Para o incio

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).

Edio de uma pgina aps a aplicao de zoom


Clique na ferramenta Selecionar (o cone de ponteiro) no canto inferior direito da janela Documento e clique dentro da pgina.

Para o incio

Panorama de uma pgina aps a aplicao de zoom


1. Clique na ferramenta Mo (o cone de mo) no canto inferior direito da janela Documento. 2. Arraste a pgina.

Para o incio

Preenchimento da janela Documento com uma seleo


1. Selecione um elemento na pgina. 2. Selecione Exibir > Ajustar seleo.

Para o incio

Preenchimento da janela Documento com uma pgina inteira


Selecione Exibir > Ajustar tudo.

Para o incio

Preenchimento da janela Documento com a largura inteira de uma pgina


Selecione Exibir > Ajustar largura. Mais tpicos da Ajuda Viso geral da barra de status

Para o incio

Avisos legais | Poltica de privacidade on-line

Gerenciamento de site
Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Conexo a um servidor remoto


Especificao de um mtodo de conexo Definio de opes avanadas de servidor Conexo ou desconexo de uma pasta remota com acesso por rede Conexo ou desconexo de uma pasta remota com o acesso por FTP Soluo de problemas de configurao de pasta remota Assim que voc especificar um site local no Dreamweaver, tambm poder especificar um servidor remoto para seu site. O servidor remoto (muitas vezes mencionado como o servidor Web) o local onde voc publica seus arquivos do site de forma que as pessoas possam v-los online. O servidor remoto simplesmente outro computador como o seu computador local com uma coleo de arquivos e pastas. Voc especificar uma pasta para seu site no servidor remoto, assim como especificou uma pasta para seu site local em seu computador local. O Dreamweaver trata a pasta remota especificada como o seu site remoto. Ao configurar uma pasta remota, voc deve selecionar um mtodo de conexo para que o Dreamweaver carregue e baixe arquivos para e do servidor Web. O mtodo de conexo mais tpico o FTP, mas o Dreamweaver tambm suporta os mtodos de rede local, FTPS, SFTP, WebDav e RDS. Se no souber que mtodo de conexo usar, pergunte a seu ISP ou a seu administrador de servidor. Nota: O Dreamweaver tambm oferece suporte a conexes para servidores IPv6 ativados. Os tipos de conexo com suporte incluem FTP, SFTP, WebDav e RDS. Para obter mais informaes, consulte www.ipv6.org/

Especifique um mtodo de conexo


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.

Para o incio

Tela Bsico da categoria Servidor, caixa de dilogo Configurao de site. 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 FTP. 6. Na caixa de texto Endereo FTP, digite o endereo do servidor de FTP no qual voc carrega os arquivos do seu site. O endereo FTP o nome completo na Internet de um sistema de computador, como ftp.mindspring.com. Insira o endereo completo sem qualquer texto adicional. Em particular, no adicione um nome de protocolo frente do endereo. Se no souber o seu endereo FTP, voc dever entrar em contato com a empresa responsvel pela hospedagem na Web.

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.

Conexes FTPS (CS5.5)

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.

Conexes locais ou de rede


Use esta configurao para conectar-se a uma pasta de rede ou se estiver armazenando arquivos ou executando o servidor de teste no computador local. 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 Local/Rede.

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\.

Insira o nome de usurio e a senha do RDS. Nota: Essas opes talvez no apaream se voc definir seu nome de usurio e sua senha nas configuraes de segurana do administrador de ColdFusion. Selecione a opo Salvar se voc deseja que o Dreamweaver lembre de suas configuraes. 7. Clique em OK para fechar a caixa de dilogo Configurar servidor RDS. 8. 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. 9. 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 do Microsoft Visual SourceSafe


O suporte para o Microsoft Visual SourceSafe est obsoleto no Dreamweaver CS5.

Definir Opes avanadas de servidor


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. Especifique as Opes bsicas conforme necessrio e clique no boto Avanado.

Para o incio

5. Selecione Manter informaes sobre sincronizao se quiser sincronizar automaticamente os arquivos locais e remotos. (Essa opo selecionada por padro.) 6. Selecione Carregar automaticamente arquivos no servidor se deseja que o Dreamweaver carregue seu arquivo no site remoto quando voc salv-lo. 7. Selecione Ativar retirada de arquivos se voc deseja ativar o sistema de devoluo/retirada. 8. Se estiver usando um Servidor de teste, voc dever selecionar um modelo de servidor no menu pop-up Modelo de servidor. Para obter mais informaes, consulteConfigurar um servidor de teste.

Conectar-se a uma pasta remota com acesso por rede ou desconectar-se

Para o incio

Voc no precisa se conectar pasta remota, voc est sempre conectado. Clique no boto Atualizar para ver os arquivos remotos.

Conectar-se a uma pasta remota com acesso por FTP ou desconectar-se


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

Solucionar problemas de configurao de pasta remota

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.

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Configurar um servidor de teste


Configurar um servidor de teste Sobre o URL da Web do servidor de teste Se voc planeja desenvolver pginas dinmicas, o Dreamweaver precisa dos servios de um servidor de teste para gerar e exibir contedo dinmico 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. Para obter uma viso geral detalhada sobre os objetivos de um servidor de teste, consulte o artigo de David Powers no Dreamweaver Developer Center, Configurao de servidor de teste local no Dreamweaver CS5.

Configurar um servidor de teste


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 uma das seguintes aes: Clique no boto Adicionar novo servidor para adicionar um novo servidor. Selecione um servidor existente e clique no boto Editar servidor existente. 4. Especifique opes bsicas conforme necessrio e clique no boto Avanado.

Para o incio

Nota: Voc deve especificar um URL da Web na tela Bsico quando determinar um servidor de teste. Para obter mais informaes, consulte a prxima seo. 5. Em Servidor de teste, selecione o modelo de servidor que deseja usar para o aplicativo da web. Nota: A partir do Dreamweaver CS5, o Dreamweaver no instala mais comportamentos de servidor ASP.NET, ASP JavaScript ou JSP. (Voc pode reativar reativao dos comportamentos de servidor substitudos se desejar, mas saiba que o Dreamweaver no oferece mais suporte a eles). Entretanto, se voc est trabalhando em pginas ASP.NET, ASP JavaScript ou JSP, o Dreamweaver ainda compatvel com a Visualizao dinmica, a colorao de cdigos e as dicas de cdigos dessas pginas. No necessrio selecionar ASP.NET, ASP JavaScript ou JSP na caixa de dilogo Definio de sites para que esses recursos funcionem. 6. Clique em Salvar para fechar a tela Avanado. Em seguida, na categoria Servidores, especifique o servidor que voc acabou de adicionar ou editar como um servidor de teste.

Sobre o URL da Web do servidor de teste

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 ColdFusion MX 7 IIS Apache (Windows) Jakarta Tomcat (Windows) URL da Web http://localhost:8500/warehouse/ http://localhost/warehouse/ 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

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Configurar uma verso local do seu site


Para configurar uma verso local do seu site, tudo que voc ter de fazer especificar a pasta local onde armazenar todos os arquivos do site. A pasta local pode estar em seu computador local ou em um servidor de rede. 1. Identifique ou crie a pasta no seu computador onde quiser armazenar a verso local dos seus arquivos do site. (A pasta pode estar em qualquer lugar no seu computador.) Voc especificar esta pasta como seu site local no Dreamweaver. 2. NO Dreamweaver, escolha o Site > Novo Site. 3. Na caixa de dilogo Definio do site, verifique se Categoria do site est selecionada. (Deve estar selecionada por padro.) 4. Na caixa Nome do site, digite um nome para o site. O nome aparece no painel Arquivos e na caixa de dilogo Gerenciar sites; ele no aparece no navegador. 5. Na caixa de texto Pasta de site local, especifique a pasta que voc identificou na etapa um a pasta no seu computador onde quer armazenar a verso local dos seus arquivos do site. Voc pode clicar no cone de pasta direita da caixa de texto para navegar at a pasta. 6. Clique em Salvar para fechar a caixa de dilogo Definio do site. Agora voc pode comear a trabalhar em seus arquivos do site locais no Dreamweaver. Quando estiver pronto, voc pode preencher as outras categorias na caixa de dilogo Configurao de site, incluindo a categoria Servidores em que possvel especificar uma pasta remota no seu servidor remoto. Para assistir a um tutorial em vdeo sobre como configurar um novo site Dreamweaver, consulte www.adobe.com/go/learn_dw_comm08_en.

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Opes da caixa de dilogo Gerenciar sites


Opes da caixa de dilogo Gerenciar sites (CS6) Opes da caixa de dilogo Gerenciar sites (CS5 e CS5.5) A caixa de dilogo Gerenciar sites o seu porto para vrias funes de site do Dreamweaver. Desta caixa de dilogo, voc pode iniciar o processo de criao de um novo site, editando um site existente, duplicando um site, removendo um site ou importando e exportando configuraes de um site. Nota: A caixa de dilogo Gerenciar sites no permite que voc se conecte a um servidor remoto ou publique arquivos nele. Para obter instrues sobre a conexo a um servidor remoto, consulte Conexo a um servidor remoto. Se estiver tentando se conectar a um site existente, consulteEditar um site remoto existente.

Opes da caixa de dilogo Gerenciar sites (CS6)


1. Selecione Site > Gerenciar sites. Uma lista de sites exibida. Se voc ainda no criou um site, a lista estar em branco. 2. Siga um destes procedimentos:

Para o incio

Criar novo site Clique no boto Novo site para criar um novo site Dreamweaver. Em seguida, especifique o nome e o local do novo site na caixa de dilogo Configurao do site. Para obter mais informaes, consulteConfigurar uma verso local do seu site. Importar um site Clique no boto Importar site para importar um site. Para obter mais informaes, consulteImportao e exportao de configuraes do site. Nota: o recurso de importao importa somente configuraes do site que foram exportadas do Dreamweaver 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. Criar novo site do Business Catalyst Clique no boto Novo site do Business Catalyst para criar um site novo do Business Catalyst. Para obter mais informaes, consulte Criao de um site temporrio do Business Catalyst. Importao de um site do Business Catalyst Clique no boto Importar site do Business Catalyst para importar um site existente do Business Catalyst. Para obter mais informaes, consulte Importao de site do Business Catalyst. 3. Para sites existentes, as opes a seguir tambm so disponveis: Excluir Exclui o site selecionado e todas as suas informaes de configurao de sua lista de sites do Dreamweaver; no exclui os arquivos reais do site. Se quiser remover os arquivos do site do seu computador, voc precisar fazer isso manualmente. Para excluir um site do Dreamweaver, selecione-o na lista de sites e clique no boto Excluir. Essa ao no pode ser desfeita. Editar Permite que voc edite informaes como nome de usurio, senha e informaes do servidor para um site do Dreamweaver existente. Para editar o site existente, selecione-o na lista de sites esquerda e clique no boto Editar. A caixa de dilogo Configurao do site aberta ao clicar no boto Editar para um site selecionado. Para obter mais informaes sobre como editar opes de site existentes, clique no boto Ajuda nas vrias telas da caixa de dilogo Configurao do site. Duplicar Cria uma cpia de um site existente. Para duplicar um site, selecione-o 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. Exportar Permite exportar as configuraes do site selecionado como um arquivo XML (*.ste). Para obter mais informaes, consulteImportao e exportao de configuraes do site.

Opes da caixa de dilogo Gerenciar sites (CS5 e CS5.5)


1. Selecione Site > Gerenciar sites e escolha um site na lista esquerda. 2. Clique em um boto para selecionar uma das opes, fazer qualquer alterao necessria e clique em Concludo.

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

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Controle de verso e Configuraes avanadas


Categoria Controle de verso Categoria Configuraes avanadas Para acessar as categorias Controle de verso e Configuraes avanadas na caixa de dilogo Configurao de site, escolha Site > Gerenciar sites, selecione o site que deseja editar e clique em Editar.

Categoria Controle de verso

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.

Categoria Configuraes avanadas


Informaes locais

Para o incio

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.

Encobrimento e outras categorias


Para obter mais informaes sobre Encobrimento, Design Notes, Colunas de visualizao de arquivos, Contribute, Modelos ou categorias de Spry, clique no boto Ajuda na caixa de dilogo.

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Editar um site remoto existente


Voc pode usar o Dreamweaver para copiar um site remoto (ou qualquer ramificao de um site remoto) para o seu disco rgido local para editlo, mesmo que no tenha usado o Dreamweaver para criar o site original. Voc deve ter as informaes de conexo corretas e conecte-se ao servidor remoto do site antes de poder editar o site. 1. Crie uma pasta local para o site existente e configure a pasta como a pasta local do site. (consulteConfigurar uma verso local do seu site). Nota: preciso duplicar localmente a estrutura inteira da ramificao relevante do site remoto. 2. Configure uma pasta remota usando as informaes de acesso remoto sobre o site. Conecte-se ao site remoto para baixar os arquivos para seu computador antes de edit-los. (consulteConexo a um servidor remoto.) Escolha a pasta raiz correta para o site remoto. 3. No painel Arquivos (Janela > Arquivos), clique no boto Conectar host remoto (para acessar o FTP) ou no boto Atualizar (para acessar a rede) na barra de ferramentas para exibir um site remoto. 4. Edite o site: Caso deseje trabalhar com o site todo, selecione a pasta raiz do site remoto no painel Arquivos e clique em Obter arquivo(s) na barra de ferramentas para fazer o download de todo o site no disco rgido local. Caso deseje trabalhar com apenas um dos arquivos ou pastas do site, localize o arquivo ou a pasta na exibio remota do painel Arquivos e clique em Obter arquivo(s) na barra de ferramentas para fazer o download desse arquivo no disco rgido local. O Dreamweaver duplica automaticamente a estrutura do site remoto que necessria para colocar o arquivo obtido por download na parte correta da hierarquia do site. Ao editar somente uma parte do site, voc deve em geral incluir arquivos dependentes, como os arquivos de imagem.
Sobre os sites do Dreamweaver Editando um site existente (blog do Dreamweaver)

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Importar e exportar configuraes do site do Dreamweaver


Exportao de configuraes do site Importao de configuraes do site Voc pode exportar as configuraes do site como um arquivo XML que pode ser posteriormente importado para o Dreamweaver. A exportao/importao de sites permite que voc transfira configuraes do site para outras mquinas e verses de produto, compartilhe configuraes do site com outros usurios e faa backup de configuraes do site. O recurso de importao/exportao no importa ou exporta arquivos do site. S importa/exporta configuraes do site para que voc economize o tempo de recriar sites no Dreamweaver. Para obter informaes sobre criao de um novo site no Dreamweaver, consulteConfigurar uma verso local do seu site. Exporte as configuraes do site regularmente para ter uma cpia de backup caso algo ocorra com o site.

Exporte as suas configuraes do site


1. Selecione Site > Gerenciar sites. 2. Selecione um ou vrios sites cujas configuraes voc deseja exportar e clique em Exportar (CS5/CS5.5) ou no boto Exportar posterior): 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.

Para o incio

(CS6 e

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.

Importar configuraes do site


1. Selecione Site > Gerenciar sites. 2. Clique em Importar (CS5/CS5.5) ou no boto Importar site (CS6 e posterior). 3. Selecione um ou mais sites (definidos em arquivos com extenso .ste) cujas configuraes sero importadas.

Para o incio

Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada arquivo .ste. Para selecionar uma faixa de sites, Shift-clique no primeiro e ltimo arquivo da faixa. 4. Clique em Abrir e Concludo. Depois que o Dreamweaver importar as configuraes de site, os nomes de sites sero exibidos na caixa de dilogo Gerenciar sites.
Sobre os sites do Dreamweaver Fazendo backup e restaurando definies do site

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Sobre sites do Dreamweaver


O que um "site" do Dreamweaver? Noes bsicas sobre a estrutura de pastas locais e remotas

O que um "site" do Dreamweaver?

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.

Noes bsicas sobre a estrutura de pastas locais e remotas

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.

Avisos legais | Poltica de privacidade on-line

Obteno e colocao de arquivos no servidor


Transferncia de arquivo e arquivos dependentes Sobre as transferncias de arquivo em segundo plano Obter arquivos de um servidor remoto Colocar arquivos em um servidor remoto Gerenciar transferncias de arquivo

Transferncia de arquivo e arquivos dependentes

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.

Sobre as transferncias de arquivo em segundo plano

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.

Obter arquivos de um servidor remoto

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.

Obter arquivos de um servidor remoto usando o painel Arquivos


1. No painel Arquivos (Janela > Arquivos), selecione os arquivos desejados para download. Normalmente voc seleciona esses arquivos na Visualizao remota, mas pode selecionar os arquivos correspondentes na Visualizao local se preferir. Caso a Visualizao remota esteja ativa, o Dreamweaver copia os arquivos selecionados para o site local; caso a Visualizao local esteja ativa, o Dreamweaver copia as verses remotas dos arquivos locais selecionados para o site local. Nota: Para obter apenas os arquivos cuja verso remota mais recente do que a verso local, use o comando Sincronizar. 2. Siga um dos seguintes procedimentos para obter o arquivo: Clique no boto Obter na barra de ferramentas do painel Arquivos. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do painel Arquivos e escolha Obter no menu de contexto. 3. Clique em Sim na caixa de dilogo Arquivos dependentes para baixar arquivos dependentes; caso voc j tenha cpias locais dos arquivos dependentes, clique em No. O padro no baixar arquivos dependentes. Voc pode editar essa opo em Editar > Preferncias > Site. O Dreamweaver baixa os arquivos selecionados da seguinte forma: Caso voc esteja usando o sistema de devoluo/retirada, a obteno de um arquivo resulta em uma cpia local somente leitura do arquivo; o arquivo permanece disponvel no site remoto ou no servidor de teste para que os demais membros da equipe retirem. Caso voc no esteja usando o sistema de devoluo/retirada, a obteno de um arquivo resultar em uma cpia com os privilgios de leitura e gravao. Nota: Caso esteja trabalhando em um ambiente colaborativo ou seja, caso outros estejam trabalhando nos mesmos arquivos , voc no deve desativar Ativar devoluo e retirada de arquivos. Caso outras pessoas estejam usando o sistema de devoluo/retirada com o site, voc tambm deve us-lo. Para parar a transferncia de arquivos a qualquer momento, clique no boto Cancelar da caixa de dilogo Atividade de arquivo em segundo plano.

Obter arquivos de um servidor remoto usando a janela Documento


1. Verifique se o documento est ativo na janela Documento. 2. Siga um dos seguintes procedimentos para obter o arquivo: Selecione Site > Obter. Clique no cone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Obter no menu. Nota: Caso o arquivo atual no faa parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido localmente o arquivo atual pertence. Caso o arquivo atual pertena a apenas um site local, o Dreamweaver abre o site e, em seguida, realiza a operao Obter.

Exibir o registro de FTP


1. Clique no menu Opes no canto superior direito do painel Arquivos. 2. Selecione Exibir > Registro de FTP do site. Nota: No painel Arquivos expandido, voc pode clicar no boto Registro de FTP para exibir o registro.
Para o incio

Colocar arquivos em um servidor remoto


Voc pode colocar arquivos do site local no site remoto, normalmente sem alterar o status de retirada do arquivo. H duas situaes comuns em que voc pode usar o comando Colocar em lugar de Devolver: Voc no est em um ambiente colaborativo e no est usando o sistema de devoluo/retirada.

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.

Colocar arquivos em um servidor remoto ou de teste usando o painel Arquivos


1. No painel Arquivos (Janela > Arquivos), selecione os arquivos a serem carregados. Normalmente voc seleciona esses arquivos na Visualizao local, mas pode selecionar os arquivos correspondentes na Visualizao remota se preferir. Nota: Voc s pode colocar esses arquivos cuja verso local mais recente do que a verso remota. 2. Siga um dos seguintes procedimentos para colocar o arquivo no servidor remoto: Clique no boto Colocar na barra de ferramentas do painel Arquivos. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do painel Arquivos e escolha Colocar no menu de contexto. 3. Caso o arquivo no tenha sido salvo, uma caixa de dilogo exibida (caso voc defina essa preferncia na categoria Site da caixa de dilogo Preferncias) permitindo a voc salvar o arquivo antes de coloc-lo no servidor remoto. Clique em Sim para salvar o arquivo ou em No para colocar a verso salva anteriormente no servidor remoto. Nota: Se voc no salvar o arquivo, todas as alteraes que voc fez desde a ltima gravao sero colocadas no servidor remoto. No entanto, como o arquivo permanece aberto, voc pode continuar salvando as alteraes depois de colocar o arquivo no servidor caso desejado. 4. Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em No para evitar o carregamento de arquivos dependentes. O padro no carregar arquivos dependentes. Voc pode editar essa opo em Editar > Preferncias > Site. Nota: Normalmente, uma boa ideia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as verses mais recentes dos arquivos dependentes j estejam no servidor remoto, no h necessidade de carreg-los novamente. Para parar a transferncia de arquivos a qualquer momento, clique no boto Cancelar da caixa de dilogo Atividade de arquivo em segundo plano.

Colocar arquivos em um servidor remoto usando a janela Documento


1. Verifique se o documento est ativo na janela Documento. 2. Siga um dos seguintes procedimentos para colocar o arquivo: Selecione Site > Colocar. Clique no cone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Colocar no menu. Nota: Caso o arquivo atual no faa parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido localmente o arquivo atual pertence. Caso o arquivo atual pertena a apenas um site local, o Dreamweaver abre o site e, em seguida, realiza a operao Colocar.

Exibir o registro de FTP


1. Clique no menu Opes no canto superior direito do painel Arquivos. 2. Selecione Exibir > Registro de FTP do site. Nota: No painel Arquivos expandido, voc pode clicar no boto Registro de FTP para exibir o registro.
Para o incio

Gerenciar transferncias de arquivo

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.

Cancelar uma transferncia de arquivo


Clique no boto Cancelar da caixa de dilogo Atividade de arquivo em segundo plano. Se a caixa de dilogo no estiver em exibio, clique no boto Atividade de arquivo na parte inferior do painel Arquivos.

Mostrar a caixa de dilogo Atividade de arquivo em segundo plano durante transferncias


Clique no boto Atividade de arquivo ou Registro na parte inferior do painel Arquivos. Nota: Voc no pode ocultar ou remover o boto Registro. Trata-se de uma parte permanente do painel.

Exibir detalhes da ltima transferncia de arquivo


1. Clique no boto Registro na parte inferior do painel Arquivos para abrir a caixa de dilogo Atividade de arquivo em segundo plano. 2. Clique na seta de expanso Detalhes.

Salvar um registro da ltima transferncia de arquivo


1. Clique no boto Registro na parte inferior do painel Arquivos para abrir a caixa de dilogo Atividade de arquivo em segundo plano. 2. Clique no boto Salvar registro e salve as informaes como um arquivo de texto. Voc pode examinar a atividade de arquivo abrindo o arquivo de log no Dreamweaver ou em qualquer editor de textos. Mais tpicos da Ajuda Tutorial sobre a colocao de arquivos Tutorial sobre a soluo de problemas de publicao

Avisos legais | Poltica de privacidade on-line

Gerenciamento de sites do Contribute


Gerenciamento de sites do Contribute Design da pgina e estrutura do site do Contribute Transferir arquivos para dentro e fora de um site do Contribute Permisses de arquivos e pastas do Contribute no servidor Arquivos especiais do Contribute Preparar um site para usar com o Contribute Administrar um site do Contribute usando o Dreamweaver Excluir, mover ou renomear um arquivo remoto em um site do Contribute Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz Solucionar problemas em site do Contribute

Gerenciamento de sites do Contribute

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.

Design da pgina e estrutura do site do Contribute


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.

Para o incio

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.

Transferir arquivos para dentro e fora de um site do Contribute

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.

Permisses de arquivos e pastas do Contribute no servidor

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.

Arquivos especiais do Contribute


O Contribute usa uma variedade de arquivos especiais que no devem ser visualizados pelos visitantes do site:

Para o incio

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.

Preparar um site para usar com o Contribute

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.

Administrar um site do Contribute usando o Dreamweaver

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:

Alterar as configuraes administrativas do site. As configuraes administrativas do Contribute so um conjunto de configuraes aplicveis a todos os usurios do seu site. Essas configuraes permitem ajustar o Contribute para melhorar a experincia de uso. Alterar as permisses concedidas s funes de usurio no Contribute. Configurar os usurios do Contribute. Os usurios do Contribute precisam de certas informaes sobre o site para se conectarem a ele. Voc pode reunir todas essas informaes em um arquivo conhecido como chave de conexo e envi-lo aos usurios do Contribute. Nota: Uma chave de conexo no igual a um arquivo de site exportado do Dreamweaver. Antes de oferecer aos usurios do Contribute as informaes de conexo de que eles precisam para editar pginas, use o Dreamweaver para criar a hierarquia de pastas bsicas do seu site e para criar os modelos e as folhas de estilo CSS necessrias ao site. 1. Selecione Site > Gerenciar sites. 2. Selecione um site e clique em Editar. 3. Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Contribute. 4. Clique no boto Administrar site do Contribute. Nota: Esse boto s aparece se voc ativar a compatibilidade do Contribute. 5. Se solicitado, insira a senha de administrador e clique em OK. A caixa de dilogo Administrar site exibida. Para alterar as configuraes administrativas, selecione uma categoria na lista esquerda e altere as configuraes conforme o necessrio. Para alterar as configuraes de funo, na categoria Usurios e funes, clique em Editar configuraes de funo e faa as alteraes necessrias. Para enviar uma chave de conexo para configurar usurios, na categoria Usurios e funes, clique em Enviar chave de conexo e conclua o Assistente de conexo. 6. Clique em Fechar, clique em OK e, em seguida, clique em Concludo. Para obter mais informaes sobre configuraes administrativas, gerenciamento de funes de usurio ou criao de uma chave de conexo, consulte a Ajuda do Contribute.

Excluir, mover ou renomear um arquivo remoto em um site do Contribute

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.

Solucionar problemas em site do Contribute

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.

Desbloquear um arquivo em site do Contribute


Nota: Antes de seguir este procedimento, verifique se o arquivo no foi retirado. Se voc desbloquear um arquivo enquanto um usurio do Contribute o edita, vrios usurios podero editar o arquivo simultaneamente. 1. Siga um destes procedimentos: Abra o arquivo na janela Documento e selecione Site > Desfazer retirada. No painel Arquivos (Janela > Arquivos), clique com o boto direito do mouse (Windows) ou Control -clique (Macintosh) e selecione Desfazer retirada. Ser exibida uma caixa de dilogo indicando quem retirou o arquivo e pedindo que voc confirme se deseja desbloque-lo. 2. Se a caixa de dilogo for exibida, clique em Sim para confirmar. O arquivo desbloqueado no servidor.

Solucionar problemas de conexo de um site do Contribute


1. Marque a opo URL raiz do site na categoria Contribute da caixa de dilogo Definio de sites abrindo o URL que est no navegador para certificar-se de que a pgina correta aberta. 2. Use o boto Testar na categoria Informaes remotas da caixa de dilogo Definio de sites para verificar se possvel conectar-se ao site. 3. Se o URL estiver correto mas o boto Testar apresentar uma mensagem de erro, solicite a ajuda do administrador do sistema.

Solucionar problemas das ferramentas de administrao do Contribute


1. No servidor, verifique se voc tem permisses de leitura e gravao e as permisses executveis, se necessrias, para a pasta _mm. 2. Certifique-se de que a pasta _mm contenha um arquivo de configuraes compartilhadas com uma extenso CSI. 3. Se no tiver, use o Assistente de conexo (Windows) ou o Connection Assistant (Macintosh) para criar uma conexo com o site e tornar-se um administrador do site. O arquivo de configuraes compartilhadas criado automaticamente quando voc se torna um administrador. Para obter mais informaes sobre como tornar-se um administrador de um site do Contribute, consulte Administrao do Contribute na Ajuda do Contribute. Mais tpicos da Ajuda Importar e exportar configuraes do site do Dreamweaver

Avisos legais | Poltica de privacidade on-line

Definir preferncias de site para transferncia de arquivos


Selecione as preferncias para controlar os recursos de transferncia de arquivos exibidos no painel Arquivos. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Na caixa de dilogo Preferncias, selecione Site na lista de categorias esquerda. 3. Defina as opes e clique em OK. Mostrar sempre Especifica qual site (remoto ou local) mostrado sempre e em qual painel Arquivos (esquerda ou direita) os arquivos locais e remotos so exibidos. Por padro, o site local sempre exibido direita. O painel no escolhido ( esquerda por padro) o painel que pode ser alterado: esse painel pode exibir os arquivos no outro site (o site remoto por padro). Arquivos dependentes Exibe um prompt para transferncia de arquivos dependentes (como, por exemplo, imagens, folhas de estilos externas e outros arquivos referenciados no arquivo em HTML) que o navegador carrega ao carregar o arquivo em HTML. Por padro, Avisar na obteno/retirada e Avisar na colocao/devoluo so selecionados. 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 destino. Caso voc desmarque essas opes, os arquivos dependentes no so transferidos. Por isso, para forar a exibio da caixa de dilogo Arquivos dependentes mesmo quando essas opes esto desmarcadas, mantenha a tecla Alt (Windows) ou Option (Macintosh) pressionada enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar. Conexo de FTP Determina se a conexo com o site remoto encerrada aps o nmero especificado de minutos sem nenhuma atividade. Tempo limite do FTP Especifica o nmero de segundos em que o Dreamweaver tenta estabelecer uma conexo com o servidor remoto. Caso no haja nenhuma resposta aps o tempo especificado, o Dreamweaver exibe uma caixa de dilogo de aviso alertando voc para esse fato. Opes de transferncia por FTP Determina se o Dreamweaver seleciona a opo padro, depois de um nmero especificado de segundos, quando uma caixa de dilogo exibida durante uma transferncia de arquivos e sem nenhuma resposta do usurio. Host do proxy Especifica o endereo do servidor de proxy pelo qual voc se conecta a servidores externos caso esteja atrs de um firewall. Caso voc no esteja atrs de um firewall, deixe esse espao em branco. Caso voc esteja atrs de um firewall, selecione a opo Usar proxy na caixa de dilogo Definio de sites (Servidores > Editar servidor existente (cone do lpis) > Mais opes.) Porta do proxy Especifica a porta do proxy ou do firewall pela qual voc passa para se conectar ao servidor remoto. Caso voc se conecte por uma porta que no seja a 21 (a padro para FTP), digite o nmero aqui. Opes de colocao: Salvar os arquivos antes de coloc-los Indica que os arquivos no salvos so salvos automaticamente antes de serem colocados no site remoto. Opes de transferncia: Avisar antes de mover arquivos no servidor Envia alertas quando voc tenta mover arquivos no site remoto. Gerenciar sites Abre a caixa de dilogo Gerenciar sites, onde voc pode editar um site existente ou criar um novo. Voc pode definir se os tipos de arquivo que transfere so transferidos como ASCII (texto) ou binrio, personalizando o arquivo FTPExtensionMap.txt na pasta Dreamweaver/Configurao (no Macintosh, FTPExtensionMapMac.txt). Para obter mais informaes, consulte, Extenso do Dreamweaver.

Avisos legais | Poltica de privacidade on-line

Teste de seu site do Dreamweaver


Diretrizes de teste do site Usar relatrios para testar o site

Diretrizes de teste do site

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.

Usar relatrios para testar o site

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.

Executar relatrios para testar um site


1. Selecione Site > Relatrios. 2. Selecione o que relatar no menu pop-up Relatrio sobre e defina todos os tipos de relatrio a serem executados (fluxo de trabalho ou HTML). Voc no pode executar um relatrio Arquivos selecionados no site, a menos que voc tenha selecionado arquivos no painel Arquivos. 3. Caso voc tenha selecionado um relatrio de fluxo de trabalho, clique em Configuraes de relatrio. Do contrrio, ignore a etapa. Nota: Caso tenha selecionado mais de um relatrio de fluxo de trabalho, voc precisa clicar no boto Configuraes de relatrio de cada relatrio. Selecione um relatrio, clique em Configuraes de relatrio e insira as configuraes; em seguida, repita o processo para todos os demais relatrios de fluxo de trabalho. Retirado por Cria um relatrio listando todos os documentos retirados por um membro de equipe especfico. Digite o nome do membro de uma equipe e, em seguida, clique em OK para retornar caixa de dilogo Relatrios. Design Notes Cria um relatrio listando todas as Design Notes dos documentos selecionados ou do site. Digite um ou mais pares nome/valor e, em seguida, selecione os valores de comparao nos menus pop-up correspondentes. Clique em OK para retornar caixa de dilogo Relatrios. Modificado recentemente Cria um relatrio listando arquivos que foram alterados durante um tempo especfico. Insira faixas de datas e locais para os arquivos que voc deseja exibir. 4. Caso voc tenha selecionado um relatrio em HTML, selecione os seguintes relatrios: Tags de fonte aninhadas combinveis Cria um relatrio que lista todas as tags de fonte aninhadas que podem ser combinadas para limpar o cdigo. Por exemplo, <font color="#FF0000"><font size="4">STOP!</font></font> informado. Texto alternativo ausente Cria um relatrio listando todas as tags img que no tm texto alternativo. O texto alternativo aparece no lugar das imagens nos navegadores somente de texto ou nos navegadores que fazem download manual de imagens. Os leitores de tela indicam texto alternativo, e alguns navegadores exibem texto alternativo quando o usurio massa o mouse pela imagem. Tags aninhadas redundantes Cria um relatrio detalhando tags aninhadas que devem ser limpas. Por exemplo, <i> The rain <i> in</i> Spain stays mainly in the plain</i> relatado. Tags vazias removveis Cria um relatrio detalhando todas as tags vazias que podem ser removidas para limpar o cdigo HTML. Por exemplo, voc pode ter excludo um item ou imagem na Visualizao de cdigo, mas deixado as tags aplicadas ao item. Documentos sem ttulo Cria um relatrio listando todos os documentos sem ttulo encontrados dentro dos parmetros selecionados. Dreamweaver informa todos os documentos com ttulos padro, vrias tags de ttulo ou tags de ttulo ausentes. 5. Clique em Executar para criar o relatrio. Dependendo do tipo de relatrio executado, voc pode ser solicitado a salvar o arquivo, definir o site ou selecionar uma pasta (caso voc ainda no tenha feito isso). Uma lista de resultados exibida no painel Relatrios do site (no grupo de painis Resultados).

Usar e salvar um relatrio


1. Execute um relatrio (consulte o procedimento anterior). 2. No painel Relatrios do site, realize um dos seguintes procedimentos para exibir o relatrio: Clique no cabealho da coluna pelo qual voc classificar os resultados. Voc pode classificar por nome de arquivo, nmero de linha ou descrio. Voc tambm pode executar vrios relatrios diferentes e mant-los abertos. Selecione qualquer linha no relatrio e clique no boto Mais informaes na lateral esquerda do painel Relatrios do site para obter uma descrio do problema. Clique duas vezes em uma linha no relatrio para exibir o cdigo correspondente na janela Documento. Nota: Caso voc esteja na Visualizao de design, o Dreamweaver altera a exibio para dividi-la e mostrar o problema informado no cdigo. 3. Clique em Salvar relatrio para salvar o relatrio.

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

Avisos legais | Poltica de privacidade on-line

CSS
Planejamento de pginas no Dreamweaver com CSS3 Janine Warner (24 de fevereiro de 2011) tutorial

Dreamweaver CS5: Inspeo de CSS Geoff Blake (23 de abril de 2010) tutorial em vdeo

Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Painel CSS Designer


Na Dreamweaver CC e posterior, o painel CSS Styles foi substitudo pelo CSS Designer.

Criar e anexar folhas de estilo Definir consultas de mdia Definir seletores Propriedades de grupo O CSS Designer (Janelas > CSS Designer) um painel integrado que permite criar visualmente arquivos CSS, regras e propriedades de grupo, junto com consultas de mdia.

Painel CSS Designer O painel CSS Designer consiste nos seguintes painis: Origens Lista todas as folhas de estilo associadas ao documento. Com esse painel, voc pode criar e anexar uma CSS ao documento ou definir estilos no documento. @Mdia Lista todas as consultas de mdia na origem selecionada no painel Origens. Se voc no selecionar uma CSS especfica, esse painel exibir todas as consultas de mdia associadas ao documento. Seletores Lista todos os seletores na origem selecionada no painel Origens. Se voc tambm selecionar uma consulta de mdia, esse painel reduzir a lista de seletores da consulta de mdia em questo. Se nenhuma CSS ou consulta de mdia for selecionada, esse painel exibir todos os seletores no documento. Quando voc seleciona Global no painel @Mdia, todos os seletores no includos em uma consulta de mdia da fonte selecionada so exibidos.

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.

CSS Designer mostrando as propriedades da imagem selecionada na visualizao dinmica

CSS Designer mostrando as propriedades do cabealho selecionado na visualizao dinmica Nota: quando voc seleciona um elemento de pgina, Computado selecionado no painel Seletores. Clique em um seletor para exibir a origem, a consulta de mdia ou as propriedades associadas. Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que no pertencem a consultas de mdia na fonte selecionada, clique em Global no painel @Mdia.

Criar e anexar folhas de estilo


1. No painel Origens do painel CSS Designer, clique em e em uma das seguintes opes:

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.

Definir consultas de mdia


1. No painel CSS Designer, clique em uma origem CSS no painel Origens. 2. Clique em no painel @Mdia para adicionar uma nova consulta de mdia.

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
1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mdia no painel @Mdia.

Para o incio

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
Layout Texto Borda Plano de fundo Outros (lista de propriedades somente texto e no propriedades com controles visuais)

Para o incio

As propriedades so agrupadas nas seguintes categorias e representadas por cones diferentes na parte superior do painel Propriedades:

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

Somente propriedades de grupo

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

As propriedades substitudas so indicadas em formato de tachado.

Formato de tachado para propriedades substitudas

Definir margens, preenchimento e posio


Usando o painel Propriedades do CSS Designer, possvel definir rapidamente as propriedades de margens, preenchimento e posio usando os controles de caixa.

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.

cones de desativar, excluir e vincular das margens

Desativar ou excluir propriedades


O painel do CSS Designer permite desativar ou excluir cada propriedade. A seguinte captura de tela mostra os cones de desativar ( ) e excluir ( ) da propriedade width . Esses cones ficam visveis quando voc passa o mouse na propriedade.

Desativar/excluir propriedade

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Definir propriedades da CSS


Na Dreamweaver CC e posterior, o painel CSS Styles foi substitudo pelo CSS Designer. Para obter mais informaes, consulte CSS Designer. 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.

Definio de propriedades do tipo 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:

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.

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.

Definio de propriedades do fundo de estilo CSS

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.

Definio de propriedades do bloco de estilo CSS

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.

Definio de propriedades da caixa de estilo CSS

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.

Definio de propriedades da borda de estilo CSS

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.

Definio de propriedades da lista de estilo CSS

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.

Definio de propriedades do posicionamento de 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 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:

Para o incio

As propriedades de estilo de posicionamento determinam como o contedo relacionado ao estilo CSS selecionado est posicionado na pgina.

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

mais fcil alterar a ordem de empilhamento usando o painel Elementos PA.) Estouro Determina o que acontecer se o contedo de um continer (por exemplo, DIV ou P) ultrapassar seu tamanho. Essas propriedades controlam a expanso da seguinte maneira: Visible aumenta o tamanho do continer a fim de que todo o seu contedo fique visvel. O continer se expande para baixo e para a direita. Hidden mantm o tamanho do continer e recorta qualquer contedo de modo a ajust-lo dentro do continer. Nenhuma barra de rolagem fornecida. Scroll adiciona barras de rolagem ao continer, no importando se o contedo ultrapassa ou no o tamanho do continer. O fornecimento de barras de rolagem evita a confuso ocasionada pelo aparecimento e desaparecimento das barras de rolagem em um ambiente dinmico. Esta opo no exibida na janela Documento. Auto faz com que as barras de rolagem apaream somente quando o contedo do continer exceder seus limites. Esta opo no exibida na janela Documento. Posicionamento Especifica o local e o tamanho do bloco de contedo. A maneira como o navegador interpretar o local depende da configurao de tipo. Os valores de tamanho sero substitudos se o contedo do bloco de contedo exceder o tamanho especificado. As unidades padro de local e tamanho so pixels. Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros), (ems), (exs) ou % (porcentagem do valor do pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm . Corte Define a parte do contedo que est visvel. Se voc especificar uma regio de corte, poder acess-la com uma linguagem de script, como JavaScript, e manipular as propriedades para criar efeitos especiais como borrachas. Essas borrachas podem ser configuradas usando o comportamento Alterar propriedade. 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.

Definio de propriedades da extenso de estilo CSS


As propriedades de estilo Extenses incluem filtros, quebra de pgina e opes de ponteiro.

Para o incio

Nota: H diversas outras propriedades de extenso disponveis no Dreamweaver, mas, para acess-las, voc precisa percorrer o painel CSS Styles. Para ver uma lista das propriedades de extenso disponveis, basta abrir o painel CSS Styles (Janelas > CSS Styles), clicando no boto Mostrar visualizao de categoria, na parte inferior do painel, e expandindo a categoria Extenses. 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 Extenses e defina qualquer uma das propriedades de estilo a seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.) Quebra de pgina antes Fora uma quebra de pgina durante a impresso, antes ou aps o objeto controlado pelo estilo. Selecione a opo desejada no menu pop-up. No h suporte para esta opo em nenhum navegador 4.0, mas os navegadores posteriores podem oferecer suporte a ela. Cursor Altera a imagem de ponteiro quando o ponteiro est sobre o objeto controlado pelo estilo. Selecione a opo desejada no menu pop-up. O Internet Explorer 4.0 e posterior, e o Netscape Navigator 6 oferecem suporte a este atributo. Filtro Aplica efeitos especiais ao objeto controlado pelo estilo, incluindo desfoque e inverso. Selecione um efeito no menu pop-up. 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.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Criar uma regra de CSS


Na Dreamweaver CC e posterior, o painel CSS Styles foi substitudo pelo CSS Designer. Para obter mais informaes, consulte CSS Designer. Voc pode criar uma regra CSS para automatizar a formatao de tags HTML ou uma faixa de texto identificada pelos atributos class ou ID . 1. Coloque o ponto de insero no documento e siga um destes procedimentos para abrir a caixa de dilogo Nova regra CSS: Selecione Formatar > CSS Styles > Novo. No painel CSS Styles (Janela > CSS Styles), clique no boto Nova regra CSS (+) localizado no lado inferior direito do painel. Selecione o texto na janela Documento, selecione Nova regra CSS no menu pop-up Regra-alvo do Inspetor de propriedades CSS (Janela > Propriedades) e clique no boto Editar regra ou selecione uma opo no Inspetor de propriedades (por exemplo, clique no boto Negrito) para iniciar uma nova regra. 2. Na caixa de dilogo Nova regra CSS, especifique o tipo de seletor da regra CSS que deseja criar: Para criar um estilo personalizado que pode ser aplicado como um atributo class a um elemento HTML, selecione a opo Classe no menu pop-up Tipo de seletor e digite um nome para o estilo na caixa de texto Nome de seletor. Nota: Os nomes de classe devem comear com um ponto e podem conter qualquer combinao de letras e nmeros (por exemplo, .myhead1). Se voc no inserir um ponto no incio, o Dreamweaver o far automaticamente. Para definir a formatao de uma tag que contenha um atributo ID especfico, selecione a opo ID no menu pop-up Tipo de seletor e, em seguida, digite a ID exclusiva (por exemplo, containerDIV) na caixa de texto Nome de seletor. Nota: As IDs devem comear com um sinal numrico (#) e conter qualquer combinao de letras e nmeros (por exemplo, #myID1). Se voc no inserir um sinal numrico no incio, o Dreamweaver o far automaticamente. Para redefinir a formatao padro de uma tag HTML especfica, selecione a opo Tag no menu pop-up Tipo de seletor e, em seguida, insira uma tag HTML na caixa de texto Nome de seletor ou selecione uma no menu pop-up. Para definir uma regra de composio que afete simultaneamente duas ou mais tags, classes ou IDs, selecione a opo Composio e insira os seletores da regra de composio. Por exemplo, se voc digitar div p, todos os elementos p nas tags div sero afetados pela regra. Uma rea de texto de descrio explica exatamente que elementos a regra afetar medida que voc adicionar ou excluir seletores. 3. Selecione o local em que deseja definir a regra e clique em OK: Para colocar a regra em uma folha de estilos que j esteja anexada ao documento, selecione a folha de estilos. Para criar uma folha de estilos externa, selecione Novo arquivo de folha de estilos. Para incorporar o estilo no documento atual, selecione Apenas este documento. 4. Na caixa de dilogo Definio de regra CSS, selecione as opes de estilo que voc deseja definir para a nova regra CSS. Para obter mais informaes, consulte a prxima seo. 5. Quando terminar de definir as propriedades de estilo, clique em OK. Nota: Se voc clicar em OK sem definir as opes de estilo, uma nova regra vazia ser criada.

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Layouts de grade fluidos


Uso de layouts de grade fluidos Tutoriais em layouts de grade fluidos Criao de um layout de grade fluido Insero de elementos de grade fluidos Elementos de aninhamento O layout de um site precisa responder e adaptar-se s dimenses do dispositivo em que exibido. Os layouts de grade fluidos oferecem uma maneira visual de criar layouts diferentes que correspondam aos dispositivos em que o site exibido. Por exemplo, o site ser exibido em computadores, tablets e celulares. possvel usar layouts de grade fluidos para especificar layouts para cada um desses dispositivos. Dependendo de onde o site for exibido (computador, tablet ou celular), o layout correspondente usado para exibir o site. Mais informaes: Layout adaptativo versus Layout responsivo O lanamento da Dreamweaver 12.2 Creative Cloud inclui diversas melhorias para layouts de grade fluidos, como o suporte a elementos estruturais HTML5 e a edio facilitada de elementos aninhados. Para obter uma viso geral da lista completa de aprimoramentos, clique aqui.

Tutoriais em layouts de grade fluidos


Como usar layouts de grade fluidos na Dreamweaver CS6 (Tutorial) Adobe TV: Criao de designs adaptativos com layouts de grade fluidos na Dreamweaver CS6 (Vdeo) Introduo s grades fluidas da Dreamweaver CS6 (Tutorial)

Para o incio

Criao de um layout de grade fluido


1. Selecione Arquivo > Novo layout de grade fluido.

Para o incio

2. O valor padro para o nmero de colunas na grade exibido no centro do tipo de mdia. Para personalizar o nmero de colunas para um dispositivo, edite o valor conforme necessrio. 3. Para ajustar a largura de uma pgina de acordo com o tamanho da tela, defina o valor da porcentagem. 4. Alm disso, voc pode mudar a largura da medianiz. A medianiz o espao entre duas colunas. 5. Especifique as opes da CSS para a pgina. Ao clicar em Criar, voc dever especificar um arquivo da CSS. Voc pode executar um dos seguintes procedimentos: Crie um arquivo da CSS. Abra um arquivo da CSS existente. Especifique o arquivo da CSS que est sendo aberto como um arquivo de grade fluida da CSS. A grade fluida para celulares exibida por padro. Alm disso, ser exibido o painel Inserir para a grade fluida. Use as opes no painel Inserir para criar o layout. Para alternar para a criao de layout para outros dispositivos, clique no cone correspondente nas opes abaixo da visualizao de design. 6. Salve o arquivo. Ao salvar o arquivo HTML, voc dever salvar os arquivos dependentes, como boilerplate.css e respond.min.js, em um local no computador. Especifique um local e clique em Copiar. O boilerplate.css baseado no padro estereotipado HTML5. Ele um conjunto de estilos da CSS que garante a consistncia no modo como sua pgina da Web renderizada em vrios dispositivos. O respond.min.js uma biblioteca JavaScript que fornece suporte a consultas de mdia em verses antigas de navegadores.

Para o incio

Insero de elementos de grade fluidos


Os elementos fluidos e no fluidos so listados no painel de estrutura ou nas opes de estrutura (Inserir > Layout). Na Dreamweaver 12.2, trs novos elementos foram inseridos: a lista no ordenada, a lista ordenada e o item de lista. 1. Selecione Inserir > Layout. 2. Selecione o elemento que deseja inserir. 3. (12.2) Na caixa de dilogo exibida, selecione uma classe ou insira um valor para a ID. O menu Classe exibe as classes do arquivo da CSS especificado na criao da pgina. O elemento selecionado inserido no layout. 4. (atualizao 12.2) Quando voc seleciona um elemento inserido, as opes para ocultar, duplicar, bloquear ou excluir o Div so exibidas. Para Divs sobrepostos um em cima do outro, a opo para alternar Divs exibida.

Opo A

Rtulo Alternar Div

Descrio Alterna o elemento selecionado no momento com o elemento acima ou abaixo. Oculta o elemento. Para revelar um elemento, execute um destes procedimentos:

Ocultar

Para revelar seletores de ID, altere a propriedade no arquivo da CSS para block. (display:block ) Para revelar seletores de classe, remova a classe aplicada (hide_<MediaType> ) no cdigo-fonte.

C D

Mover para cima uma linha Duplicar

Move o elemento uma linha para cima. Duplica o elemento selecionado no momento. A CSS vinculada ao elemento tambm duplicada. Para os seletores de ID, exclui o HTML e a CSS. Para excluir apenas HTML, pressione Excluir. Para os seletores de classe, apenas o HTML excludo. Converte o elemento para um elemento absolutamente posicionado. Para os seletores de classe, o boto Alinhar funciona como um boto de margem zero. Para os seletores de ID, o boto Alinhar alinha o elemento na grade.

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).

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Aplicao de layout s pginas com CSS


Sobre o layout da pgina CSS Sobre a estrutura do layout de pgina CSS Criao de uma pgina com um layout de CSS

Sobre o layout da pgina CSS

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.

Sobre a estrutura do layout de pgina CSS


Antes de passar para esta seo, voc deve estar familiarizado com os conceitos bsicos da CSS.

Para o incio

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.

A. Div de container B. Div de barra lateral C. Div de contedo principal Este o cdigo das trs tags div do HTML: <!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Contedo da barra lateral</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Contedo principal </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>cabealho do nvel H2 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div>

</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:

Tag div de continer, 780 pixels, sem margem A. Texto alinhado esquerda B. Fundo branco C. Borda preta slida de 1 pixel A prxima regra CSS cria regras de estilo para a tag div de barra lateral: #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } A regra #sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 pixels, um preenchimento direita de 10 pixels e um preenchimento esquerda de 20 pixels. (A ordem padro de preenchimento da parte superior direita para a parte inferior esquerda.) Alm disso, a regra posiciona a tag div de barra lateral com float: left uma propriedade que coloca a tag div de barra lateral no lado esquerdo da tag div de continer. Estes so os resultados da aplicao da regra tag div de barra lateral:

Div de barra lateral, flutuao esquerda A. Largura 200 pixels B. Preenchimento superior e inferior, 15 pixels Por fim, a regra CSS da tag div de continer principal finaliza o layout: #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } A regra #mainContent dita que a div de contedo principal ter uma margem esquerda de 250 pixels; isso significa que ela colocar 250 pixels de espao entre o lado esquerdo da div de continer e o lado esquerdo da div de contedo principal. Alm disso, a regra fornece 20 pixels de espaamento nos lados direito, inferior e esquerdo da div de contedo principal. Estes so os resultados da aplicao da regra div mainContent: Esta ser a aparncia do cdigo completo:

Div de contedo principal, margem esquerda de 250 pixels A. Preenchimento esquerda de 20 pixels B. Preenchimento direita de 20 pixels C. 20 Preenchimento inferior de 20 pixels

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sem ttulo</title> <style type="text/css"> #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } </style> </head> <body> <!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Contedo da barra lateral</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Contedo principal </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>cabealho do nvel H2 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body> Nota: O cdigo de exemplo acima uma verso simplificada do cdigo que cria o layout de barra lateral fixa de duas colunas quando voc cria um novo documento usando os layouts predefinidos que acompanham o Dreamweaver.

Criao de uma pgina com um layout de CSS

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.

Criar uma pgina com um layout CSS


1. Selecione Arquivo > Novo. 2. Na caixa de dilogo Novo documento, selecione a categoria Pgina em branco. (Essa a seleo padro.) 3. Em Tipo de pgina, selecione o tipo de pgina que voc deseja criar. Nota: Voc deve selecionar um tipo de pgina em HTML para o layout. Por exemplo, voc pode selecionar HTML, ColdFusion, PHP etc. No possvel criar uma pgina ActionScript, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um layout CSS. Alm disso, os tipos de pgina da categoria Outros da caixa de dilogo Novo documento apresentam restrio na incluso de layouts de pgina CSS. 4. Em Layout, selecione o layout CSS que deseja usar. Voc pode escolher entre 16 layouts diferentes. A janela Visualizar mostra o layout e fornece uma breve descrio do layout selecionado. 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. 6. Selecione um local para a CSS do layout em CSS de Layout no menu pop-up.

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.

Adio dos layouts CSS personalizados lista de opes


1. Crie uma pgina HTML que contm o layout CSS que voc gostaria de adicionar lista de opes na caixa de dilogo Novo documento. A CSS do layout deve residir no cabealho da pgina HTML. Para tornar seu layout de CSS personalizado consistente com outros layouts que acompanham o Dreamweaver, voc dever salvar seu arquivo em HTML com a extenso .htm. 2. Adicione a pgina HTML pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. 3. (Opcional) Adicione uma imagem de visualizao do layout (por exemplo, um arquivo .gif ou .png) pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. As imagens padro fornecidas com o Dreamweaver so arquivos PNG de 227 pixels de largura x 193 pixels de altura. Atribua imagem de visualizao o mesmo nome do arquivo HTML, a fim de que voc possa control-la facilmente. Por exemplo, se o arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png imagem de visualizao. 4. (Opcional) Crie um arquivo de anotaes para o layout personalizado, abrindo a pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copiando e colando qualquer arquivo de anotao existente na mesma pasta e renomeando a cpia do layout personalizado. Por exemplo, voc pode copiar o arquivo oneColElsCtr.htm.mno e renome-lo como myCustomLayout.htm.mno. 5. (Opcional) Aps criar um arquivo de anotaes para o layout personalizado, voc poder abrir o arquivo e especificar o nome, a descrio e a imagem de visualizao do layout.
Vinculao a uma folha de estilos CSS externa

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Introduo s folhas de estilo em cascata


Sobre Sobre Sobre Sobre Sobre Folhas de estilos em cascata as regras CSS os estilos em cascata formatao de texto e CSS as Propriedades CSS abreviadas

Sobre Folhas de estilos em cascata

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.

Sobre as regras 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.

Voc pode definir os seguintes tipos de estilos no Dreamweaver: Os estilos de classe permitem que voc aplique as propriedades de estilo a qualquer elemento na pgina. Os estilos de tag HTML redefine a formatao de uma tag especfica, como h1. Quando voc criar ou alterar um estilo CSS para a tag h1, todo o texto formatado com a tag h1 imediatamente atualizado. Os estilos avanados redefinem a formatao de uma determinada combinao de elementos ou de outras formas de seletor conforme permitido pela CSS (por exemplo, o seletor td h2 se aplica sempre que um cabealho h2 aparece em uma clula de tabela.) Os estilos avanados tambm podem redefinir a formatao das tags que contm um atributo id especfico (por exemplo, os estilos definidos por #myStyle se aplicam a todas as tags que contm o par atributo/valor id="myStyle"). As regras CSS podem residir nos seguintes locais: Folhas de estilos CSS externas Conjuntos de regras CSS armazenadas em um arquivo CSS (.css) externo separado (e no em um arquivo HTML). Esse arquivo vinculado a uma ou mais pginas de um site usando um link ou uma regra @import na seo de cabealho de um documento. Folhas de estilos CSS internas (ou incorporadas) Conjuntos de regras CSS includas em uma tag de estilo na parte do cabealho de um documento HTML. Estilos inline Definidas em ocorrncias especficas de tags em um documento HTML. (No recomendvel o uso de Estilos inline.) O Dreamweaver reconhece os estilos definidos nos documentos existentes, contanto que eles estejam em conformidade com as diretrizes do estilo CSS. O Dreamweaver tambm processa a maioria dos estilos aplicados diretamente na Visualizao de design. (A visualizao do documento em uma janela de navegador, no entanto, proporciona a voc o processamento de pgina ao vivo mais preciso.) Alguns estilos CSS so processados de forma diferente no Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou outros navegadores, enquanto outros estilos no so compatveis com nenhum navegador. Para exibir o guia de referncia de CSS da OReilly includo com o Dreamweaver, selecione Ajuda > Referncia e selecione Referncia de CSS da OReilly no menu pop -up no painel Referncia.

Sobre os estilos em cascata

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.

Sobre formatao de texto e CSS

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.

Sobre as Propriedades CSS abreviadas

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

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Efeitos de transio do CSS3


possvel criar, modificar e excluir transies do CSS3 atravs do painel Transies do CSS. Para criar uma transio CSS3, crie uma classe de transio especificando valores das propriedades de transio do elemento. Se voc selecionar um elemento antes de criar uma classe de transio, a classe de transio ser aplicada automaticamente ao elemento selecionado. possvel escolher entre adicionar o cdigo CSS gerado ao documento atual ou especificar um arquivo de CSS externo.

Criar e aplicar o efeito de transio do CSS3

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

para adicionar uma propriedade de CSS transio.

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.

Funo de tempo Selecione um estilo de transio nas opes disponveis. Valor final O valor final do efeito de transio. Por exemplo, para que o tamanho da fonte aumente a 40 px ao final do efeito de transio, especifique 40 px para a propriedade font-size. Escolha do local para criar a transio Para incorporar o estilo no documento atual, selecione Somente este documento. Se voc deseja criar uma folha de estilo externa para o cdigo CSS3, selecione Novo arquivo de folha de estilo. Ao clicar em Criar transio voc dever especificar um local para salvar o novo arquivo CSS. Aps a folha de estilo ter sido criada, ser adicionada ao menu Selecionar local para criar transio.

Editar efeitos de transio do CSS3


1. No painel Transies do CSS, selecione o efeito de transio que deseja editar.

Para o incio

2. Clique em

3. Use a caixa de dilogo Editar transio para alterar valores de transio que foram inseridos anteriormente.

Desativar formato abreviado do CSS para transies


1. Selecione Editar > Preferncias. 2. Selecione Estilos CSS. 3. Em Usar formato abreviado para, cancele a seleo Transio.

Para o incio

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Adio de uma propriedade a uma regra CSS


Voc pode usar o painel Estilos CSS para adicionar propriedades a regras. 1. No painel Estilos CSS (Janela > CSS), selecione uma regra no painel Todas as regras (modo Tudo) ou selecione uma propriedade no painel Resumo para seleo (modo Atual). 2. Siga um destes procedimentos: Se a visualizao Mostrar somente propriedades definidas estiver selecionada no painel Propriedades, clique no link Adicionar propriedades e adicione uma propriedade. Se a visualizao de categoria ou a visualizao de lista estiver selecionada no painel Propriedades, preencha um valor para propriedade a ser adicionada.

Avisos legais | Poltica de privacidade on-line

Aplicao, remoo ou renomeao de estilos de classe CSS


Aplicao de um estilo de classe CSS Remoo de um estilo de classe em uma seleo Renomeao de um estilo de classe Os estilos de classe so o nico de tipo de estilo CSS que pode ser aplicado a qualquer texto em um documento, independentemente de quais tags controlam o texto. Todos os estilos de classe associados ao documento atual so exibidos no painel Estilos CSS (com um ponto [.] precedendo o nome) e no menu pop-up Estilo do Inspetor de propriedades de texto. Voc ver imediatamente a maioria dos estilos atualizados; no entanto, deve visualizar a pgina em um navegador para verificar se um estilo foi aplicado conforme o esperado. Quando voc aplicar dois ou mais estilos ao mesmo texto, eles podero conflitar e produzir resultados inesperados. Ao visualizar os estilos definidos em uma folha de estilos CSS externa, verifique se salvou a folha de estilos para garantir que suas alteraes sero refletidas quando a pgina for visualizada em um navegador.

Aplicao de um estilo de classe CSS


1. No documento, selecione o texto ao qual voc deseja aplicar um estilo CSS. Coloque o ponto de insero em um pargrafo para aplicar o estilo ao pargrafo inteiro. Se voc selecionar uma faixa de texto em um nico pargrafo, o estilo CSS afetar apenas a faixa selecionada.

Para o incio

Para especificar a tag exata ao qual o estilo CSS deve ser aplicado, selecione a tag no seletor de tags localizado no canto inferior esquerdo da janela Documento. 2. Para aplicar um estilo de classe, siga um destes procedimentos: No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo, clique com o boto direito do mouse no nome do estilo a ser aplicado e selecione Aplicar no menu de contexto. No Inspetor de propriedades HTML, selecione o estilo de classe a ser aplicado no menu pop-up Classe. Na janela Documento, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) no texto selecionado e, no menu de contexto, selecione Estilos CSS e, em seguida, selecione o estilo a ser aplicado. Selecione Formatar > Estilos CSS e, no submenu, selecione o estilo a ser aplicado.

Remoo de um estilo de classe em uma seleo


1. Selecione o objeto ou texto do qual deseja remover o estilo. 2. No Inspetor de propriedades HTML (Janela > Propriedades), selecione Nenhum no menu pop-up Classe.

Para o incio

Renomeao de um estilo de classe


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.

Para o incio

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

Avisos legais | Poltica de privacidade on-line

Verificao de problemas de processamento de CSS em vrios navegadores


Verificao de compatibilidade do navegador Seleo do elemento afetado por um problema encontrado Saltar para o problema anterior ou seguinte no cdigo Seleo dos navegadores para verificao do Dreamweaver Excluso de um problema na verificao de compatibilidade de navegador Edio da lista de problemas ignorados Salvar um relatrio de verificao de compatibilidade de navegador Visualizao de um relatrio de verificao de compatibilidade de navegador Abertura do site Adobe CSS Advisor O recurso Verificao de compatibilidade do navegador (VCN) ajuda a localizar combinaes de HTML e CSS que apresentam problemas em determinados navegadores. Quando voc executa uma VCN em um arquivo aberto, o Dreamweaver rastreia o arquivo e reporta quaisquer problemas de processamento de CSS no painel Resultados. Uma classificao de confiana, indicada por um quarto de crculo, meio crculo, trs quarto de crculo ou um crculo completamente preenchido, informa a probabilidade da ocorrncia do bug (um quarto de crculo preenchido indicando uma possvel ocorrncia e um crculo completamente preenchido indicando uma ocorrncia muito provvel). Para cada bug potencial localizado, o Dreamweaver tambm fornece um link direto para a documentao sobre o bug no Adobe CSS Advisor, um site que informa detalhadamente os bugs de processamento de navegador comumente conhecidos, e oferece solues para corrigi-los. Por padro, o recurso VCN executa a verificao nos seguintes navegadores: Firefox 1.5; Internet Explorer (Windows) 6.0 e 7.0; Internet Explorer (Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 e 9.0; Safari 2.0. Esse recurso substitui a antiga Verificao do navegador de destino, mas retm a funcionalidade CSS. Ou seja, o novo recurso VCN ainda testa o cdigo nos documentos para verificar se h suporte para algum valor ou propriedade CSS nos navegadores de destino. Trs nveis de possveis problemas de suporte a navegador podem surgir: Um erro indica o cdigo CSS que possivelmente ocasionar um srio problema visvel em um determinado navegador, como o desaparecimento de partes de uma pgina. (O erro uma designao padro dos problemas de suporte a navegador; portanto, em alguns casos, o cdigo com um efeito desconhecido tambm marcado como erro.) Um aviso indica uma parte do cdigo CSS qual um determinado navegador no oferece suporte, mas no ocasionar nenhum problema grave de exibio. Uma mensagem informativa indica o cdigo ao qual um determinado navegador no oferece suporte, mas que no tem nenhum efeito visvel. As verificaes de compatibilidade de navegador no alteram o documento de forma alguma.

Verificao de compatibilidade do navegador


Selecione Arquivo > Verificar pgina > Compatibilidade do navegador.

Para o incio

Seleo do elemento afetado por um problema encontrado


Clique duas vezes no problema no painel Resultados.

Para o incio

Saltar para o problema anterior ou seguinte no cdigo

Para o incio

Selecione Prximo problema ou Problema anterior no menu Verificao de compatibilidade do navegador na barra de ferramentas Documento.
Para o incio

Seleo dos navegadores para verificao do Dreamweaver


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

7.0 no menu pop-up do Netscape.

Excluso de um problema na verificao de compatibilidade de navegador


1. Execute a verificao de compatibilidade do navegador.

Para o incio

2. No painel Resultados, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) no problema a ser excludo na verificao futura. 3. Selecione Ignorar questo no menu de contexto.

Edio da lista de problemas ignorados


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

Salvar um relatrio de verificao de compatibilidade de navegador


1. Execute a verificao de compatibilidade do navegador. 2. Clique no boto Salvar relatrio no lado esquerdo do painel Resultados. Focalize os botes no painel Resultados para ver as dicas de ferramentas do boto.

Para o incio

Nota: Os relatrios no so salvos automaticamente; se voc deseja manter uma cpia de um relatrio, siga o procedimento acima para salv-la.

Visualizao de um relatrio de verificao de compatibilidade de navegador


1. Execute a verificao de compatibilidade do navegador. 2. Clique no boto Procurar relatrio no lado esquerdo do painel Resultados. Focalize os botes no painel Resultados para ver as dicas de ferramentas do boto.

Para o incio

Abertura do site Adobe CSS Advisor


1. No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador. 2. Clique no texto de link no canto inferior direito do painel. Mais tpicos da Ajuda CSS Advisor

Para o incio

Avisos legais | Poltica de privacidade on-line

Converso da CSS inline em uma regra CSS


Os estilos inline no so prticas recomendadas. Para tornar a CSS mais limpa e organizada, converta os estilos inline em regras CSS que residem no cabealho do documento ou em uma folha de estilos externa. 1. Na Visualizao de cdigo (Exibir > Cdigo), selecione o atributo de estilo inteiro que contenha a CSS inline a ser convertida. 2. Clique com o boto direito do mouse e selecione Estilos CSS > Converter CSS inline em regra. 3. Na caixa de dilogo Converter CSS inline, digite um nome de classe para a nova regra e siga um destes procedimentos: Especifique uma folha de estilos na qual a nova regra CSS deve aparecer e clique em OK. Selecione o cabealho do documento como o local onde a nova regra CSS deve aparecer e clique em OK. Tambm possvel converter as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao est disponvel somente na Visualizao de cdigo. Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

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.

Avisos legais | Poltica de privacidade on-line

Edio de uma regra CSS


Edio de uma regra no painel Estilos CSS (modo Atual) Edio de uma regra no painel Estilos CSS (modo Tudo) Alterao do nome de um seletor CSS Voc pode editar facilmente regras internas e externas que voc aplicou a um documento. Ao editar um folha de estilos CSS que controla o texto no documento, voc reformatar instantaneamente todo o texto controlado por essa folha de estilos. As edies em uma folha de estilos externa afetam todos os documentos vinculados a ela. Voc pode definir um editor externo a ser usado para edio das folhas de estilos.

Edio de uma regra no painel Estilos CSS (modo Atual)


1. Abra o painel Estilos CSS selecionando Janela > Estilos CSS. 2. Clique no boto Atual na parte superior do painel Estilos CSS. 3. Selecione um elemento de texto na pgina atual para exibir suas propriedades. 4. Siga um destes procedimentos:

Para o incio

Clique duas vezes em uma propriedade no painel Resumo para seleo a fim de exibir a caixa de dilogo Definio de regra CSS e faa suas alteraes. Selecione uma propriedade no painel Resumo para seleo e edite a propriedade no painel Propriedades abaixo. Selecione uma regra no painel Regras e edite as propriedades da regra no painel Propriedades abaixo. Nota: Voc pode alterar o comportamento de duplo clique para edio da CSS, bem como outros comportamentos, alterando as preferncias do Dreamweaver.

Edio de uma regra no painel Estilos CSS (modo Tudo)


1. Abra o painel Estilos CSS selecionando Janela > Estilos CSS. 2. Clique no boto Tudo na parte superior do painel Estilos CSS. 3. Siga um destes procedimentos:

Para o incio

Clique duas vezes em uma regra no painel Todas as regras a fim de exibir a caixa de dilogo Definio de regra CSS e faa suas alteraes. Selecione uma regra no painel Todas as regras e edite as propriedades da regra no painel Propriedades abaixo. Selecione uma regra no painel Todas as regras e clique no boto Editar estilo no canto inferior direito do painel Estilos CSS. Nota: Voc pode alterar o comportamento de duplo clique para edio da CSS, bem como outros comportamentos, alterando as preferncias do Dreamweaver.

Alterao do nome de um seletor CSS


1. No painel Estilos CSS (modo Tudo), escolha o seletor que voc deseja alterar. 2. Clique no seletor novamente para tornar o nome editvel. 3. Faa suas alteraes e pressione Enter (Windows) ou Return (Macintosh). Mais tpicos da Ajuda Definir propriedades de texto no Inspetor de propriedades

Para o incio

Avisos legais | Poltica de privacidade on-line

Edio de uma folha de estilos CSS


Uma folha de estilos CSS geralmente inclui uma ou mais regras. Voc pode editar uma regra individual em uma folha de estilos CSS usando o painel Estilos CSS ou, se preferir, pode trabalhar diretamente na folha de estilos CSS. 1. No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo. 2. No painel Todas as regras, clique duas vezes no nome da folha de estilos a ser editada. 3. Na janela Documento, modifique a folha de estilos conforme desejado e salve-a.

Avisos legais | Poltica de privacidade on-line

Aprimoramentos no suporte a CSS3 no painel de estilos CSS (CS 5.5)


Aplicar propriedades CSS3 usando o painel pop-up Especificao de vrios conjuntos de valores Localizar propriedades na exibio de Categoria Verificar compatibilidade com navegadores Visualizar alteraes na Visualizao dinmica Um painel pop-up foi introduzido no Painel CSS das seguintes propriedades: sombra do texto sombra da caixa raio da borda imagem da borda As opes no painel pop-up garantem a aplicao das propriedades corretamente mesmo se voc no estiver familiarizado com a sintaxe W3C.

As opes de exibio do painel pop-up da imagem de borda da propriedade CSS3

Aplicar propriedades CSS3 usando o painel pop-up


Clique no cone "+" correspondente a essas propriedades. Use as opes no painel pop-up para aplicar a propriedade.

Para o incio

Especificao de vrios conjuntos de valores

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.

Localizar propriedades na exibio de Categoria

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.

Verificar compatibilidade com navegadores

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.

Visualizar alteraes na Visualizao dinmica

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

H algum tutorial que voc gostaria de compartilhar?

Suporte aprimorado para CSS3 em DW CS5.5


Preran Kurnool Suporte para Sombra do texto, Sombra da caixa, Raio da borda e Imagem da borda

Avisos legais | Poltica de privacidade on-line

Formatao do cdigo CSS


Definio das preferncias de formatao de cdigo CSS Formatao manual do cdigo CSS em uma folha de estilos CSS Formatao manual do cdigo CSS incorporado Voc pode definir preferncias que controlam o formato do cdigo CSS sempre que cria ou edita uma regra CSS usando a interface do Dreamweaver. Por exemplo, possvel definir preferncias que colocaro todas as propriedades CSS em linhas separadas, inserir uma linha em branco entre as regras CSS etc. Quando voc define preferncias de formatao de cdigo CSS, as preferncias selecionadas so automaticamente aplicadas a todas as novas regras CSS criadas. No entanto, voc tambm pode aplicar essas preferncias manualmente a documentos individuais. Isso poder ser til ser voc tiver um documento HTML ou CSS mais antigo que precise de formatao. Nota: As preferncias de formatao de cdigo CSS se aplicam s regras CSS apenas nas folhas de estilos externas ou incorporadas (e no aos estilos inline).

Definio das preferncias de formatao de cdigo CSS


1. Selecione Editar > Preferncias. 2. Na caixa de dilogo Preferncias, selecione a categoria Formato do cdigo. 3. Ao lado de Formatao avanada, clique no boto CSS.

Para o incio

4. Na caixa de dilogo Opes de formato de origem CSS, selecione as opes a serem aplicadas ao cdigo-fonte CSS. Uma visualizao da CSS de acordo com as opes selecionadas exibida na janela Visualizar abaixo. Recuar propriedades com Define o valor de recuo das propriedades em uma regra. Voc pode especificar tabulaes ou espaos. Cada propriedade em uma linha separada Coloca cada propriedade de uma regra em uma linha separada. Colchete de abertura em linha separada Coloca o colchete de abertura de uma regra em uma linha separada do seletor. Somente se houver mais de 1 propriedade Coloca as regras de propriedade nica na mesma linha do seletor. Todos os seletores de uma regra na mesma linha Coloca todos os seletores da regra na mesma linha. Linha em branco entre regras Insere uma linha em branco entre cada regra. 5. Clique em OK. Nota: A formatao de cdigo CSS tambm herda a preferncia Tipo de quebra de linha definida na categoria Formato do cdigo da caixa de dilogo Preferncias.
Para o incio

Formatao manual do cdigo CSS em uma folha de estilos CSS


1. Abra uma folha de estilos CSS. 2. Selecione Comandos > Aplicar formatao de origem.

As opes de formatao definidas nas preferncias de formatao de cdigo de origem so aplicadas ao documento inteiro. Voc no pode formatar selees individuais.

Formatao manual do cdigo CSS incorporado


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.

Para o incio

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

Avisos legais | Poltica de privacidade on-line

Inspecionar CSS na visualizao ativa


O modo de inspeo funciona junto com a visualizao ativa para ajud-lo a identificar rapidamente os elementos HTML e seus estilos CSS associados. Com o modo Inspeo acionado, voc pode passar com o mouse sobre elementos da pgina para ver os atributos do modelo da caixa CSS para qualquer elemento de nvel de bloqueio. Nota: Para obter mais informaes sobre o modelo de caixa de CSS, consulte a especificao CSS 2.1. Alm de ver uma representao visual do modelo de caixa no modo Inspeo, voc tambm pode usar o painel Estilos CSS, conforme passar o mouse sobre os elementos na janela Documento. Quando voc tem o painel Estilos CSS aberto no modo Atual e passa com o mouse sobre um elemento da pgina, as regras e as propriedades do painel Estilos CSS so atualizadas automaticamente para mostrar as regras e propriedades desse elemento. Alm disso, qualquer visualizao ou painel relacionado ao elemento sobre o qual voc passa o mouse atualizado tambm (por exemplo, Visualizao de cdigo, o Seletor de tags, o Inspetor de propriedades e assim por diante). 1. Com o documento aberto na janela Documento, clique no boto Inspecionar (ao lado do boto Visualizao ativa na barra de ferramentas do documento) Nota: Se ainda no estiver na visualizao Ativa, o modo Inspeo a ativar automaticamente. 2. Passe o mouse sobre elementos da pgina para ver o modelo de caixa de CSS. O modo Inspeo destaca diferentes cores para a borda, a margem, o preenchimento e o contedo. 3. (Opcional) Pressione a seta para a esquerda no teclado do computador para destacar o pai do elemento atualmente destacado. Pressione a seta para a direita para retornar o destaque para o elemento filho. 4. (Opcional) Clique em um elemento para bloquear uma seo destacada. Nota: Clicar em um elemento para bloquear uma seleo destacada desativa o modo Inspeo.

Adobe recomenda

H algum tutorial que voc gostaria de compartilhar?

Dreamweaver CS5 - CSS Inspect


Scott Fegette, gerente de produto Dreamweaver Tutorial de vdeo que mostra o CSS Inspect Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Vinculao a uma folha de estilos CSS externa


Quando voc edita uma folha de estilos CSS externa, todos os documentos vinculados a essa folha de estilos CSS so atualizados para refletir essas edies. possvel exportar os estilos CSS localizados em um documento para criar uma nova folha de estilos CSS, e anexar ou vincularse a uma folha de estilos externa para aplicar os estilos encontrados nesse local. Voc pode anexar s pginas qualquer folha de estilos criada ou copiada no site. Alm disso, o Dreamweaver fornecido com folhas de estilos predefinidas que podem ser movidas automaticamente para o site e anexadas s pginas. 1. Abra o painel Estilos CSS seguindo um destes procedimentos: Selecione Janela > Estilos CSS. Pressione Shift + F11. 2. No painel Estilos CSS, clique no boto Anexar folha de estilos. (Ele est localizado no canto inferior direito do painel.) 3. Siga um destes procedimentos: Clique em Procurar para ir at uma folha de estilos CSS externa. Digite o caminho para a folha de estilos na caixa Arquivo/URL. 4. Em Adicionar como, selecione uma das opes: Para criar um link entre o documento atual e uma folha de estilos externa, selecione Link. Esse procedimento criar uma tag de link href no cdigo HTML e referencia o URL no local em que a folha de estilos publicada est localizada. O Microsoft Internet Explorer e o Netscape Navigator oferecem suporte a esse mtodo. Voc no pode usar uma tag de link para adicionar uma referncia de uma folha de estilos externa a outra. Para aninhar folhas de estilos, use uma diretiva de importao. A maioria dos navegadores tambm reconhece a diretiva de importao em um pgina (e no apenas nas folhas de estilos). H diferenas sutis na maneira como as propriedades conflitantes so resolvidas quando existem regras sobrepostas em folhas de estilos externas vinculadas a uma pgina ou importadas para uma pgina. Para importar uma folha de estilos externa, em vez de vincular-se a ela, selecione Importar. 5. No menu pop-up Mdia, especifique a mdia de destino da folha de estilos. Para obter mais informaes sobre as folhas de estilos dependentes de mdia, consulte o site da World Wide Web Consortium em www.w3.org/TR/CSS21/media.html. 6. Clique no boto Visualizar para verificar se a folha de estilos aplica os estilos desejados pgina atual. Se os estilos aplicados no forem o que voc espera, clique em Cancelar para remover a folha de estilos. A aparncia da pgina ser revertida para o estado anterior. 7. Clique em OK. Mais tpicos da Ajuda Criar uma pgina baseada em um arquivo de amostra do Dreamweaver

Avisos legais | Poltica de privacidade on-line

Movimentao/exportao de regras CSS


Movimentao/exportao de regras CSS para uma nova folha de estilos Movimentao/exportao de regras CSS para uma folha de estilos existente Reorganizao ou movimentao das regras CSS arrastando-as Seleo de vrias regras antes de mov-las Os recursos de gerenciamento de CSS do Dreamweaver facilita a movimentao ou a exportao de regras CSS para diferentes locais. Voc pode mover regras de um documento para outro, do cabealho de um documento para uma folha de estilos externa, entre arquivos CSS externos e muito mais. Nota: Se a regra que voc est tentando mover estiver em conflito com uma regra na folha de estilos de destino, o Dreamweaver exibir a caixa de dilogo J existe regra com nome igual. Se voc optar por mover a regra conflitante, o Dreamweaver colocar a regra movida imediatamente ao lado da regra conflitante na folha de estilos de destino.

Movimentao/exportao de regras CSS para uma nova folha de estilos


1. Siga um destes procedimentos:

Para o incio

No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o boto direito do mouse na seleo e selecione Mover regras CSS no menu de contexto. Para selecionar vrias regras, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a serem selecionadas. Na Visualizao de cdigo, selecione a(s) regra(s) que voc deseja mover. Em seguida, clique com o boto direito do mouse na seleo e selecione Estilos CSS > Mover regras CSS no menu de contexto. Nota: A seleo parcial de uma regra resultar na realocao de toda a regra. 2. Na caixa de dilogo Mover para folha de estilos externa, selecione a opo de nova folha de estilos e clique em OK. 3. Na caixa de dilogo Salvar arquivo de folha de estilos como, digite um nome para a nova folha de estilos e clique em Salvar. Quando voc clica em Salvar, o Dreamweaver salva uma nova folha de estilos com as regras selecionadas e a anexa ao documento atual. Tambm possvel mover as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao est disponvel somente na Visualizao de cdigo.

Movimentao/exportao de regras CSS para uma folha de estilos existente


1. Siga um destes procedimentos:

Para o incio

No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o boto direito do mouse na seleo e selecione Mover regras CSS no menu de contexto. Para selecionar vrias regras, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a serem selecionadas. Na Visualizao de cdigo, selecione a(s) regra(s) que voc deseja mover. Em seguida, clique com o boto direito do mouse na seleo e selecione Estilos CSS > Mover regras CSS no menu de contexto. Nota: A seleo parcial de uma regra resultar na realocao de toda a regra. 2. Na caixa de dilogo Mover para folha de estilos externa, selecione uma folha de estilos existente no menu pop-up ou v at uma folha de estilos existente e clique em OK. Nota: O menu pop-up exibe todas as folhas de estilos vinculadas ao documento atual. Tambm possvel mover as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao est disponvel somente na Visualizao de cdigo.

Reorganizao ou movimentao das regras CSS arrastando-as

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.

Seleo de vrias regras antes de mov-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

Avisos legais | Poltica de privacidade on-line

Definio das preferncias de estilos CSS


As preferncias de estilo CSS determinam como o Dreamweaver gravar o cdigo que define os estilos CSS. Os estilos CSS podem ser escritos em uma forma abreviada mais fcil para algumas pessoas trabalharem. No entanto, algumas verses mais antigas de navegadores no interpretam corretamente esse formato abreviado. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, na lista Categoria, selecione Estilos CSS. 2. Defina as opes de estilo CSS que deseja aplicar: Ao criar regras CSS, use o formato abreviado para Permite que voc selecione quais propriedades de estilo CSS o Dreamweaver escrever no formato abreviado. Ao editar regras CSS, use o formato abreviado Determina se o Dreamweaver reescrever os estilos existentes em formato abreviado. Selecione Se original usou formato abreviado para deixar todos os estilos como esto. Selecione De acordo com as configuraes acima para reescrever os estilos em formato abreviado para as propriedades selecionadas em Usar formato abreviado para. Ao clicar duas vezes em painel CSS Permite que voc selecione uma ferramenta para edio das regras CSS. 3. Clique em OK.

Avisos legais | Poltica de privacidade on-line

Configurar propriedades de ttulo de CSS para uma pgina inteira


Pode especificar fontes, tamanhos da fonte e cores dos ttulos da sua pgina. Por padro, o Dreamweaver cria regras de CSS para seus ttulos e aplica-os a todos os ttulos que voc usa na pgina. (As regras so incorporadas na seo ttulo da pgina.) Os ttulos esto disponveis para seleo no Inspector de propriedades de HTML. 1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto. 2. Escolha a categoria Cabealhos (CSS) e defina as opes. Fonte do cabealho Especifica a famlia de fontes padro a ser usada como cabealhos. O Dreamweaver usar a famlia de fontes especificada, a menos que outra fonte seja definida para um elemento de texto. Cabealho 1 a Cabealho 6 Especifica o tamanho e a cor da fonte a serem usados em at seis nveis de tags de cabealho.

Avisos legais | Poltica de privacidade on-line

Definio de propriedades de link CSS para uma pgina inteira


Voc pode especificar fontes, tamanhos da fonte, cores e outros itens para seus links. Por padro, o Dreamweaver cria regras de CSS para seus links e aplica-os a todos os links que voc usa na pgina. (As regras so incorporadas na seo ttulo da pgina.) Nota: Se quiser personalizar links individuais em uma pgina, voc dever criar regras de CSS individuais e, em seguida, aplic-las aos links separadamente. 1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto. 2. Escolha a categoria Links (CSS) e defina as opes. Fonte do link Especifica a famlia de fontes padro a ser usada como texto do link. Por padro, o Dreamweaver usa a famlia de fontes especificada para a pgina inteira, a menos que voc especifique outra fonte. Tamanho Especifica o tamanho de fonte padro a ser usado no texto do link. Cor do link Especifica a cor a ser aplicada ao texto do link. Links visitados Especifica a cor a ser aplicada aos links visitados. Links de sobreposio Especifica a cor a ser aplicada quando o ponteiro do mouse colocado sobre um link. Links ativos Especifica a cor a ser aplicada quando o mouse clicado em um link. Estilo sublinhado Especifica o estilo de sublinhado a ser aplicado aos links. Se a pgina j tiver um estilo de link sublinhado definido (atravs de uma folha de estilos CSS externa, por exemplo), o valor padro do menu Estilo sublinhado ser a opo no alterar. Esta opo informa sobre um estilo de link no definido. Se voc modificar o estilo de link sublinhado usando a caixa de dilogo Propriedades da pgina, o Dreamweaver alterar a definio de link anterior.

Avisos legais | Poltica de privacidade on-line

O painel Estilos CSS


Painel Estilos CSS no modo Atual Painel Estilos CSS no modo Tudo Botes e visualizaes do painel Estilos CSS Abertura do painel Estilos CSS O painel Estilos CSS permite que voc rastreie as propriedades e regras CSS afetando um elemento de pgina atualmente selecionado (modo Atual) ou todas as propriedades e regras disponibilizadas para o documento (modo Tudo). Um boto de alternncia na parte superior do painel permite que voc alterne entre os dois modos. O painel Estilos CSS tambm permite modificar propriedades CSS no modo Tudo e no modo Atual.

Painel Estilos CSS no modo Atual

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.

Painel Estilos CSS no modo Tudo

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.

Botes e visualizaes do painel Estilos CSS

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. Visualizao de categoria B. Visualizao de lista C. Visualizao de propriedades definidas Visualizao de categoria Divide as propriedades CSS compatveis com o Dreamweaver em oito categorias: fonte, fundo, bloco, borda, caixa, lista, posicionamento e extenses. As propriedades de cada categoria esto contidas em uma lista que voc expande ou reduz clicando no boto de adio (+) ao lado do nome de categoria. As propriedades definidas aparecem (em azul) no topo da lista. Visualizao de lista Exibe todas as propriedades CSS compatveis com o Dreamweaver em ordem alfabtica. As propriedades definidas aparecem (em azul) no topo da lista. Visualizao de propriedades definidas Exibe apenas as propriedades definidas. A visualizao de propriedades definidas a visualizao padro. Nos modos Tudo e Atual, o painel Estilos CSS tambm contm os seguintes botes:

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.

Abertura do painel Estilos CSS


Siga um destes procedimentos: Selecione Janela > Estilos CSS. Pressione Shift+F11. Clique no boto CSS no Inspetor de propriedades.

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.

Avisos legais | Poltica de privacidade on-line

Atualizao das folhas de estilos CSS em um site do Contribute


Os usurios do Adobe Contribute no podem fazer alteraes em uma folha de estilos CSS. Para alterar uma folha de estilos em um site do Contribute, use o Dreamweaver. 1. Edite a folha de estilos usando as ferramentas de edio de folhas de estilos do Dreamweaver. 2. Instrua os usurios do Contribute que esto trabalhando no site a publicar pginas que usam essa folha de estilos e edite novamente essas pginas para visualizar a nova folha de estilos. Veja a seguir os fatores importantes que voc deve ter em mente ao atualizar as folhas de estilos para um site do Contribute: Se voc fizer alteraes em uma folha de estilos enquanto o usurio do Contribute estiver editando uma pgina que a utilize, o usurio s ver as alteraes efetuadas na folha de estilos depois que publicar a pgina. Se voc excluir um estilo de uma folha de estilos, o nome do estilo no ser excludo das pginas que a utilizam. Como o estilo no existe mais, ele no ser exibido da maneira esperada pelo usurio do Contribute. Desse modo, se um usurio informar a voc que nada acontece quando ele aplica um determinado estilo, talvez o estilo tenha sido excludo da folha de estilos.

Avisos legais | Poltica de privacidade on-line

Usar Folhas de estilo em tempo de design


As folhas de estilos em tempo de design permitem mostrar ou ocultar o design aplicado por uma folha de estilos CSS enquanto voc trabalha em um documento do Dreamweaver. Por exemplo, voc pode usar esta opo para incluir ou excluir o efeito de uma folha de estilos apenas Macintosh ou apenas Windows enquanto voc cria uma pgina. As folhas de estilos em tempo de design se aplicam somente enquanto voc est trabalhando no documento; quando a pgina exibida em uma janela de navegador, apenas os estilos que esto anexados ou incorporados ao documento aparecem no navegador. Nota: Voc tambm pode ativar ou desativar os estilos de uma pgina inteira usando a barra de ferramentas Processamento do estilo. Para exibir a barra de ferramentas, selecione Exibir > Barras de ferramentas > Processamento do estilo. O boto Alternar exibio de estilos CSS (o boto da extrema direita) funciona independentemente dos outros botes de mdia da barra de ferramentas. Para usar uma folha de estilos em tempo de design, siga estas etapas. 1. Abra a caixa de dilogo Folhas de estilo em tempo de design seguindo um destes procedimentos: Clique com o boto direito do mouse no painel Estilos CSS e, no menu de contexto, selecione Em tempo de design. Selecione Formatar > Estilos CSS > Em tempo de design. 2. Na caixa de dilogo, defina as opes para mostrar ou ocultar uma folha de estilos selecionada: Para exibir uma folha de estilos CSS em tempo de design, clique no boto de adio (+) acima de Mostrar somente em tempo de design e, na caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja mostrar. Para ocultar uma folha de estilos CSS, clique no boto de adio (+) acima de Ocultar em tempo de design e, na caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja ocultar. Para remover uma folha de estilos na lista, clique na folha de estilos a ser removida e clique no boto de subtrao () apropriado. 3. Clique em OK para fechar a caixa de dilogo. O painel Estilos CSS atualizado com o nome da folha de estilos selecionada, juntamente com o indicador oculto ou design, para refletir o status da folha de estilos. Mais tpicos da Ajuda Viso geral da barra de ferramentas Processamento do estilo

Avisos legais | Poltica de privacidade on-line

Uso de exemplos de folhas de estilos do Dreamweaver


O Dreamweaver fornece exemplos de folhas de estilos que voc pode aplicar s pginas ou usar como pontos de partida para desenvolver seus prprios estilos. 1. Abra o painel Estilos CSS seguindo um destes procedimentos: Selecione Janela > Estilos CSS. Pressione Shift+F11. 2. No painel Estilos CSS, clique no boto Anexar folha de estilos externa. (Ele est localizado no canto inferior direito do painel.) 3. Na caixa de dilogo Anexar folha de estilos externa, clique em Exemplo de folhas de estilo. 4. Na caixa de dilogo Exemplo de folhas de estilo, selecione uma folha de estilos na caixa de listagem. Quando voc selecionar as folhas de estilos na caixa de listagem, o painel Visualizar exibir a formatao de texto e cor da folha de estilos selecionada. 5. Clique no boto Visualizar para aplicar a folha de estilos e verifique se ele aplica os estilos desejados pgina atual. Se os estilos aplicados no estiverem como voc espera, selecione outra folha de estilos na lista e clique em Visualizar ver esses estilos. 6. Por padro, o Dreamweaver salva a folha de estilos em uma pasta chamada CSS imediatamente abaixo da raiz do site definido para a pgina. Se essa pasta no existir, o Dreamweaver a criar. Voc pode salvar o arquivo em outro local clicando em Procurar e mudando de pasta. 7. Quando voc localizar uma folha de estilos cujas regras de formatao atendem aos critrios de design, clique em OK.

Avisos legais | Poltica de privacidade on-line

Trabalho com tags div


Inserir e editar tags div Blocos de layout CSS Trabalho com elementos PA

Inserir e editar tags div

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.

Insero de tags div


Voc pode usar tags div para criar blocos de layout CSS e posicion-los no documento. Isso ser til se voc tiver uma folha de estilos CSS existente com estilos de posicionamento anexados ao documento. O Dreamweaver permite que voc insira rapidamente uma tag div e aplique estilos existentes a ela. 1. Na janela Documento, coloque o ponto de insero no local em que a tag div deve aparecer. 2. Siga um destes procedimentos: Selecione Inserir > Objetos de layout > Tag div. Na categoria Layout do painel Inserir, clique no boto Inserir tag div .

3. Defina uma das seguintes opes: Inserir Permite que voc selecione o local da tag div e o nome da tag caso ela no seja nova. Classe Exibe o estilo de classe atualmente aplicado tag. Se voc anexou uma folha de estilos, as classes definidas nessa folha de estilos aparecero na lista. Use este menu pop-up para selecionar o estilo que voc deseja aplicar tag. ID Permite que voc altere o nome usado para identificar a tag div. Se voc anexou uma folha de estilos, as IDs definidas nessa folha de estilos aparecero na lista. As IDs dos blocos que j esto no documento no so listadas. Nota: O Dreamweaver informar se voc inserir a mesma ID de outra tag no documento. Nova regra CSS Abre a caixa de dilogo Nova regra CSS. 4. Clique em OK. A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o ponteiro sobre a borda da caixa, o Dreamweaver o reala. Se a tag div tiver uma posio absoluta, ela se tornar um elemento PA. (Voc pode editar tags div que no possuem posio absoluta.)

Edio de tags div


Depois que voc inserir uma tag div, poder manipul-la ou adicionar contedo a ela. Nota: As tags div com posio absoluta se tornam elementos PA. Quando voc atribuir bordas a tags div ou quando a opo Contornos do layout CSS estiver selecionada, elas tero bordas visveis. (A opo Contornos do layout CSS selecionada por padro no menu Exibir > Auxlios visuais.) Quando voc move o ponteiro sobre uma tag div, o Dreamweaver reala a tag. possvel alterar a cor do realce ou desativar o realce. Ao selecionar uma tag div, voc poder visualizar e editar regras para ela no painel Estilos CSS. Tambm possvel adicionar contedo tag div colocando o ponto de insero dentro da tag div e adicionando o contedo exatamente como faria ao adicionar contedo a uma pgina. Visualizao e edio das regras aplicadas uma tag div 1. Siga um destes procedimentos para selecionar a tag div: Clique na borda da tag div.

Procure o realce para ver a borda. Clique dentro da tag div e pressione Control+A (Windows) ou Command+A (Macintosh) duas vezes. Clique dentro da tag div e selecione a tag div no seletor de tags na parte inferior da janela Documento. 2. Selecione Janela > Estilos CSS para abrir o painel Estilos CSS caso ele ainda no esteja aberto. As regras aplicadas tag div aparecem no painel. 3. Faa as edies conforme necessrio. Posicionamento do ponto de insero em uma tag div para adicionar contedo Clique em qualquer lugar nas bordas da tag. Alterao do texto do alocador de espao em uma tag div Selecione o texto e digite sobre ele ou pressione Delete. Nota: Voc pode adicionar contedo tag div exatamente como faria ao adicionar um contedo a uma pgina.

Alterar a cor de realce das tags div


Quando voc move o ponteiro sobre a borda de uma tag div na Visualizao de design, o Dreamweaver reala as bordas da tag. Voc pode ativar ou desativar o realce quando necessrio, ou alterar a cor do realce na caixa de dilogo Preferncias. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Selecione Realce na lista de categorias esquerda. 3. Faa uma das seguintes alteraes e clique em OK: Para alterar a cor de realce das tags div, clique na caixa de cor Passar o mouse, selecione a cor de realce usando o seletor de cores (ou digite o valor hexadecimal da cor de realce na caixa de texto). Para ativar ou desativar o realce das tags div, marque ou desmarque a caixa de seleo Mostrar de Passar o mouse. Nota: Essas opes afetam todos os objetos (por exemplo, as tabelas), que o Dreamweaver reala quando voc move o ponteiro sobre elas.

Blocos de layout CSS


Visualizao dos blocos de layout CSS

Para o incio

Voc pode visualizar blocos de layout CSS enquanto trabalha na Visualizao de design. Um bloco de layout CSS um elemento de pgina HTML que voc pode posicionar em qualquer lugar da pgina. Mais especificamente, um bloco de layout CSS uma tag div sem display:inline ou qualquer outro elemento de pgina que inclui as declaraes CSS display:block, position:absolute ou position:relative. Veja a seguir alguns exemplos de elementos considerados blocos de layout CSS no Dreamweaver: Uma tag div Uma imagem com uma posio absoluta ou relativa atribuda a ela Uma tag a com o estilo display:block atribudo a ela Um pargrafo com uma posio absoluta ou relativa atribuda a ele Nota: Para fins de processamento visual, os blocos de layout CSS no incluem elementos inline (ou seja, elementos cujo cdigo esteja em uma linha de texto) ou elementos de bloco simples como pargrafos. O Dreamweaver fornece diversos auxlios visuais para visualizao de blocos de layout CSS. Por exemplo, voc pode ativar contornos, fundos e o modelo de caixa dos blocos de layout CSS ao criar o design. Tambm possvel visualizar dicas de ferramentas que exibem as propriedades de um bloco de layout CSS quando voc flutua o ponteiro do mouse sobre o bloco de layout. A lista de auxlios de bloco de layout CSS a seguir descreve o que o Dreamweaver processa como visvel para cada: Contornos do layout CSS Exibe os contornos de todos os blocos de layout CSS na pgina. Fundos do layout CSS Exibe as cores de fundo temporariamente atribudas de blocos de layout CSS individuais e oculta qualquer cor ou imagem de fundo que normalmente aparece na pgina. Sempre que voc ativar o auxlio visual para visualizar fundos de bloco de layout CSS, o Dreamweaver atribui automaticamente a cada bloco de layout CSS uma cor de fundo distinta. (O Dreamweaver seleciona as cores usando um processo algortmico; no h nenhuma maneira de voc mesmo atribuir as cores.) As cores atribudas so visualmente distintas e foram projetadas para ajudar voc a fazer a distino entre os blocos de layout CSS. Modelo de caixa de layout CSS Exibe o modelo de caixa (ou seja, preenchimento e margens) do bloco de layout CSS selecionado.

Visualizao dos blocos de layout CSS


Voc pode ativar ou desativar os auxlios visuais do bloco de layout CSS quando necessrio.

Visualizao dos contornos de bloco de layout CSS Selecione Exibir > Auxlios visuais > Contornos do layout CSS. Visualizao dos fundos de bloco de layout CSS Selecione Exibir > Auxlios visuais > Fundos do layout CSS. Visualizao dos modelos de caixa de bloco de layout CSS Selecione Exibir > Auxlios visuais > Modelo de caixa de layout CSS. Voc tambm pode acessar as opes de auxlio visual de bloco de layout CSS clicando no boto Auxlios visuais na barra de ferramentas Documento.

Uso dos auxlios visuais com elementos de bloco de layout No CSS


Voc pode usar uma folha de estilos em tempo de design para exibir os fundos, as bordas ou a caixa de modelo dos elementos que normalmente no so considerados blocos de layout CSS. Para fazer isso, primeiro voc deve criar uma folha de estilos em tempo de design que designe o atributo display:block ao elemento de pgina apropriado. 1. Crie uma folha de estilos CSS externa selecionando Arquivo > Novo, selecionando a pgina Bsico na coluna Categoria, selecionando CSS na coluna de pgina Bsico e clicando em Criar. 2. Na nova folha de estilos, crie regras que designem o atributo display:block aos elementos de pgina a ser exibido como blocos de layout CSS. Por exemplo, se voc quisesse exibir uma cor de fundo para pargrafos e itens de lista, poderia criar uma folha de estilos com as seguintes regras: p{ display:block; } li{ display:block; } 3. Salve o arquivo. 4. Na Visualizao de design, abra a pgina qual voc deseja anexar os novos estilos. 5. Selecione Formatar > Estilos CSS > Em tempo de design. 6. Na caixa de dilogo Folhas de estilo em tempo de design, clique no boto de adio (+) acima da caixa de texto Mostrar somente em tempo de design, selecione a folha de estilos recm-criada e clique em OK. 7. Clique em OK para fechar a caixa de dilogo Folhas de estilo em tempo de design. A folha de estilos anexada ao documento. Se voc criou uma folha de estilos usando o exemplo anterior, todos os pargrafos e itens de lista sero formatados com o atributo display:block, permitindo que voc ative ou desative os auxlios visuais de bloco de layout CSS para pargrafos e itens de lista.

Trabalho com elementos PA


Sobre os elementos PA do Dreamweaver

Para o incio

Um elemento PA (elemento com posio absoluta) um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. Os elementos PA podem conter texto, imagens ou qualquer outro contedo inserido no corpo de um documento HTML. Com o Dreamweaver, voc pode usar elementos PA ao criar o layout da pgina. Voc pode dispor os elementos PA um em frente ao outro ou um atrs do outro, ocultar alguns elementos PA e exibir outros, e mover os elementos PA pela tela. possvel inserir uma imagem de fundo em um elemento PA e inserir um segundo elemento PA contendo texto com fundo transparente em frente a ele. Geralmente, os elementos PA so tags div com posio absoluta. (Esses so os tipos de elementos PA que o Dreamweaver insere por padro.) Mas lembre-se que voc pode classificar qualquer elemento HTML (por exemplo, uma imagem) como um elemento PA atribuindo uma posio absoluta a ele. Todos os elementos PA (e no apenas as tags div com posio absoluta) aparecem no painel Elementos PA.

Cdigo HTML para elementos Div PA


O Dreamweaver cria elementos PA usando a tag div. Quando voc desenha um elemento PA usando a ferramenta Desenhar Div PA, o Dreamweaver insere uma tag div no documento e atribui a ela um valor de ID (por padro, apDiv1 para a primeira div desenhada, apDiv2 para a segunda e assim sucessivamente). Posteriormente, voc poder renomear a Div PA para qualquer nome usando o painel Elementos PA ou o Inspetor de propriedades. O Dreamweaver tambm usa a CSS incorporada no cabealho do documento para posicionar a Div PA e atribuir a ela suas dimenses exatas. Este um exemplo de cdigo HTML para uma Div PA:

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

Inserir uma div PA


O Dreamweaver permite que voc crie e posicione facilmente Divs PA na pgina. Tambm possvel criar Divs PA aninhadas. Quando voc insere uma Div PA, o Dreamweaver exibe um contorno da Div PA na Visualizao de design, por padro, e reala o bloco quando voc move o ponteiro sobre ela. Para desativar o auxlio visual que mostra os contornos da Div PA (ou de qualquer elemento PA), desative Contornos do elemento PA e Contornos do layout CSS no menu Exibir > Auxlios visuais. Voc tambm pode ativar fundos e o modelo de caixa dos elementos PA como um auxlio visual enquanto cria a Div PA. Aps criar uma Div PA, adicione o contedo a ela colocando o ponto de insero na Div PA e adicionando o contedo como adicionaria um contedo a uma pgina. Desenho de uma nica Div PA ou de vrias Divs PA consecutivamente 1. Na categoria Layout do painel Inserir, clique no boto Desenhar Div PA .

2. Na Visualizao de design da janela Documento, siga um destes procedimentos: Arraste para desenhar uma Div PA. Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto arrasta para desenhar vrias Divs PA consecutivamente. Voc pode desenhar quantas Divs PA desejar, contanto que no solte a tecla Control ou Command. Insero de uma Div PA em um determinado lugar do documento Coloque o ponto de insero na janela Documento e selecione Inserir > Objetos de layout > Div PA. Nota: Esse procedimento colocar a tag da Div PA no lugar da janela Documento que voc clicou. Desse modo, o processamento visual da Div PA pode afetar outros elementos de pgina (como o texto) que a envolve. Posicionamento do ponto de insero em uma Div PA Clique em qualquer lugar das bordas da Div PA. As bordas da Div PA so realadas e a ala de seleo aparece, mas a prpria Div PA no selecionada. Mostrar bordas da Div PA Selecione Exibir > Auxlios visuais e selecione Contornos da Div PA ou Contornos do layout CSS. Nota: A seleo simultnea das duas opes surte o mesmo efeito Ocultar as bordas da Div PA Selecione Exibir > Auxlios visuais e cancele a seleo de Contornos da Div PA ou Contornos do layout CSS.

Trabalhar com Divs PA aninhadas


Uma Div PA aninhada uma Div PA cuja cdigo est contido nas tags de outra Div PA. Por exemplo, o cdigo a seguir mostra duas Divs PA que no esto aninhadas e duas Divs PA aninhadas:

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

Visualizao ou definio das preferncias de elemento PA


Use a categoria Elementos PA na caixa de dilogo Preferncias para especificar as configuraes padro dos novos elementos PA criados. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Selecione Elementos PA na lista Categoria esquerda, especifique uma das preferncias a seguir e clique em OK. Visibilidade Determina se os elementos PA ficaro visveis por padro. As opes so default, inherit, visible e hidden. Largura e Altura Especifique uma largura e altura padro (em pixels) para os elementos PA que voc cria usando Inserir > Objetos de layout > Div PA. Cor de fundo Especifica uma cor de fundo padro. Selecione uma cor no seletor de cores. Imagem de fundo Especifica uma imagem de fundo padro. Clique em Procurar para localizar o arquivo de imagem no computador. Aninhamento: Aninhar quando criado em uma div PA Especifica se uma Div PA comeando em um ponto dentro dos limites de uma Div PA existente deve ser uma Div PA aninhada. Mantenha pressionada a tecla Alt (Windows) ou a tecla Option (Macintosh) para alterar temporariamente esta configurao enquanto desenha uma Div PA.

Visualizao ou definio das propriedades de um elemento 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.

3. Defina uma das seguintes opes: Elemento CSS-P Especifica uma ID para o elemento PA selecionado. A ID identifica o elemento PA no painel Elementos PA e no cdigo JavaScript. Use apenas caracteres alfanumricos padro; no use caracteres especiais como espaos, hfens, barras ou pontos. Cada elemento PA deve ter sua prpria ID exclusiva. Nota: O Inspetor de propriedades de CSS-P apresenta as mesmas opes para elementos com posio relativa. E e T (esquerda e topo) Especifica a posio do canto superior esquerdo do elemento PA em relao ao canto superior esquerdo da pgina, ou do elemento PA pai caso ele esteja aninhado. L e A Define a largura e altura do elemento PA. Nota: Se o contedo do elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible.) A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros. Z -Index Determina o ndice z ou a ordem de empilhamento do elemento PA. Em um navegador, os elementos PA numerados superiores aparecem em frente aos elementos PA numerados inferiores. Os valores podem ser positivos ou negativos. mais fcil alterar a ordem de empilhamento dos elementos PA usando o painel Elementos PA do que digitar valores de ndice z especficos. Vis Especifica se o elemento PA estar inicialmente visvel ou no. Selecione uma das seguintes opes: Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos navegadores assume Inherit como valor padro. Inherit usa a propriedade de visibilidade do pai do elemento PA. Visible exibe o contedo do elemento PA, independentemente do valor do pai. Hidden oculta o contedo do elemento PA, independentemente do valor do pai. Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo do elemento PA. Imagem de fundo Especifica uma imagem de fundo para o elemento PA. Clique no cone de pasta desejado e selecione um arquivo de imagem. Cor de fundo Especifica uma cor de fundo para o elemento PA. Deixe esta opo em branco para especificar um fundo transparente. Classe Especifica a classe CSS usada para criar o estilo do elemento PA. Estouro Determina como os elementos PA aparecem em um navegador quando o contedo ultrapassa o tamanho especificado do elemento PA. Visible indica que o contedo extra aparecer no elemento PA; efetivamente, o elemento PA alongado para acomod-lo. Hidden especifica que o contedo extra no ser exibido no navegador. Scroll especifica que o navegador deve adicionar barras de rolagem ao elemento quer elas sejam necessrias ou no. Auto faz com que o navegador exiba barras de rolagem para o elemento PA somente quando necessrio (ou seja, quando o contedo do elemento PA ultrapassar seus limites.) Nota: A opo estouro tem suporte instvel entre os navegadores. Corte Define a rea visvel de um elemento PA. Especifica as coordenadas esquerda, superior, direita e inferior para definir um retngulo no espao de coordenada do elemento PA (contando a partir do canto superior esquerdo do elemento PA). O elemento PA recortado para que apenas o retngulo especificado fique visvel. Por exemplo, para tornar o contedo de um elemento PA invisvel, a no ser por um retngulo visvel de 50 pixels de largura e 75 pixels de altura no canto superior esquerdo do elemento PA, defina E para 0, T para 0, D para 50 e B para 75. Nota: Embora a CSS especifique uma semntica diferente para clip, o Dreamweaver interpreta clip como a maioria dos navegadores.

4. Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Visualizao ou definio das propriedades de vrios elementos PA


Quando voc seleciona dois ou mais elementos PA, o Inspetor de propriedades exibe as propriedades de texto e um subconjunto das propriedades do elemento PA completo, permitindo que voc modifique vrios elementos PA de uma s vez. Seleo de vrios elementos PA Mantenha pressionada a tecla Shift enquanto seleciona elementos PA. Visualizao e definio das propriedades de vrios elementos PA 1. Selecione vrios elementos 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.

3. Defina uma das propriedades a seguir de vrios elementos PA: E e T (esquerda e topo) Especifica a posio dos cantos superiores esquerdos do elemento PA em relao ao canto superior esquerdo da pgina, ou do elemento PA pai caso ele esteja aninhado. L e A Define a largura e altura dos elementos PA. Nota: Se o contedo de qualquer elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible.) A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros. Vis Especifica se os elementos PA estaro inicialmente visveis ou no. Selecione uma das seguintes opes: Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos navegadores assume Inherit como valor padro. Inherit usa a propriedade de visibilidade do pai dos elementos PA. Visible exibe o contedo dos elementos PA, independentemente do valor do pai. Hidden oculta o contedo do elemento PA, independentemente do valor do pai. Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo do elemento PA. Tag Especifica a tag HTML usada para definir os elementos PA. Imagem de fundo Especifica uma imagem de fundo para os elementos PA. Clique no cone de pasta desejado e selecione um arquivo de imagem. Cor de fundo Especifica uma cor de fundo para os elementos PA. Deixe esta opo em branco para especificar um fundo transparente. 4. Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Viso geral do painel Elementos PA


Use o painel Elementos PA (Janela > Elementos PA) para gerenciar os elementos PA no documento. Use o painel Elementos PA para evitar sobreposies, alterar a visibilidade dos elementos PA, aninhar ou empilhar elementos PA e selecionar um ou mais elementos PA. Nota: Um elemento PA do Dreamweaver um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. O painel Elementos PA no exibe elementos com posio relativa. Os elementos PA so exibidos como uma lista de nomes, na ordem do ndice z; por padro, o primeiro elemento PA criado (com um ndice z 1) aparece na parte inferior da lista, enquanto o elemento PA criado por ltimo aparece na parte superior. No entanto, voc pode alterar o ndice z de um elemento PA alterando seu lugar na ordem de empilhamento. Por exemplo, se voc criou oito elementos PA e deseja mover o quarto elemento para o topo da lista, atribua a ele um ndice z superior aos outros.

Seleo de elementos PA
Voc pode selecionar um ou mais elementos PA para manipul-los ou alterar suas propriedades.

Seleo de um elemento PA no painel Elementos PA No painel Elementos PA (Janela > Elementos PA), clique no nome do elemento PA. Seleo de um elemento PA na janela Documento Siga um destes procedimentos: Clique na ala de seleo de um elemento PA. Se a ala de seleo no estiver visvel, clique em qualquer lugar dentro do elemento PA para torn-la visvel. Clique na borda de um elemento PA. Mantenha pressionadas as teclas Control e Shift (Windows) ou mantenha pressionadas as teclas Command e Shift (Macintosh) enquanto clica dentro de um elemento PA. Clique dentro de um elemento PA e pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar o contedo do elemento PA. Pressione Control+A ou Command+A novamente para selecionar o elemento PA. Clique dentro de um elemento PA e selecione sua tag no seletor de tags. Seleo de vrios elementos PA Siga um destes procedimentos: No painel Elementos PA (Janela > Elementos PA), mantenha pressionada a tecla Shift enquanto clica em dois ou mais nomes de elemento PA. Na janela Documento, mantenha pressionada a tecla Shift enquanto clica dentro ou na borda de dois ou mais elementos PA.

Alterao da ordem de empilhamento dos elementos PA


Use o Inspetor de propriedades ou o painel Elementos PA para alterar a ordem de empilhamento dos elementos PA. O elemento PA no topo da lista do painel Elementos PA est na parte superior da ordem de empilhamento e aparece na frente dos outros elementos PA. No cdigo HTML, a ordem de empilhamento, ou o ndice z, dos elementos PA determina a ordem em que eles so desenhados em um navegador. Quanto maior o ndice z de um elemento PA, mais alto estar o elemento PA na ordem de empilhamento. (Por exemplo, um elemento com ndice z de 4 aparecer acima de um elemento com ndice z de 3; 1 sempre o nmero mais baixo na ordem de empilhamento.) Voc pode alterar o ndice z de cada elemento PA usando o painel Elementos PA ou o Inspetor de propriedades. Alterao da ordem de empilhamento dos elementos PA usando o painel Elementos PA 1. Selecione Janela > Elementos PA para abrir o painel Elementos PA. 2. Clique duas vezes no nmero de ndice z ao lado do elemento PA cujo ndice z voc deseja alterar. 3. Altere o nmero e pressione Return/Enter. Digite um nmero maior para mover o elemento PA para a parte superior na ordem de empilhamento. Digite um nmero menor para mover o elemento PA para a parte inferior na ordem de empilhamento. Alterao da ordem de empilhamento dos elementos PA usando o Inspetor de propriedades 1. Selecione Janela > Elementos PA para abrir o painel Elementos PA e verificar a ordem de empilhamento atual. 2. No painel de Elementos PA ou na Janela Documento, selecione o elemento PA cujo ndice z voc deseja alterar. 3. No Inspetor de propriedades (Janela > Propriedades), digite um nmero na caixa de texto ndice Z. Digite um nmero maior para mover o elemento PA para a parte superior na ordem de empilhamento. Digite um nmero menor para mover o elemento PA para a parte inferior na ordem de empilhamento.

Mostrar e ocultar elementos PA


Enquanto trabalha no documento, voc pode mostrar e ocultar manualmente os elementos PA, usando o painel Elementos PA, para ver como a pgina aparecer em diferentes condies. Nota: O elemento PA atualmente selecionado sempre fica visvel e aparece na frente de outros elementos PA enquanto est selecionado. Alterao da visibilidade do elemento PA 1. Selecione Janela > Elementos PA para abrir o painel Elementos PA. 2. Clique na coluna de cone de olho de um elemento PA para alterar sua visibilidade. Um olho aberto significa que o elemento PA est visvel. Um olho fechado significa que o elemento PA no est visvel. Se no houver um cone de olho, geralmente o elemento PA herda a visibilidade do seu pai. (Quando os elementos PA no esto aninhados, o pai o corpo do documento, que est sempre visvel.)

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).

Converso de elementos PA em tabelas


Em vez de usar tabelas para criar seu layout, alguns designers da Web preferem trabalhar com elementos PA. O Dreamweaver permite que voc crie um layout usando elementos PA e (se desejar) os converta em tabelas. Por exemplo, talvez voc precise converter os elementos PA em tabelas caso seja necessrio oferecer suporte a navegadores anteriores verso 4.0. No entanto, a converso de elementos PA em tabelas no recomendvel porque pode resultar em tabelas com um nmero maior de clulas vazias, sem mencionar a inchao do cdigo (bloated). Se voc precisar de um layout de pgina que use tabelas, recomendvel cri-lo usando as ferramentas padro de layout de tabela disponveis no Dreamweaver. possvel converter e reconverter tabelas e elementos PA para ajustar o layout e otimizar o design da pgina. (No entanto, quando voc converte novamente uma tabela em elementos PA, o Dreamweaver converte a tabela novamente em Divs PA, independentemente do tipo de elemento PA que voc possa ter na pgina antes da converso em tabelas.) No possvel converter uma tabela ou elemento PA em uma pgina. Voc deve converter elementos PA em tabelas, e tabelas em Divs PA. Nota: Voc no pode converter elementos PA em tabelas ou tabelas em Divs PA em um documento modelo ou em um documento ao qual um modelo tenha sido aplicado. Em vez disso, crie o layout em um documento no modelo e converta-o antes de salv-lo como modelo.

Converso entre elementos PA e tabelas


Voc pode criar o layout usando elementos PA e convert-los em tabelas para que o layout possa ser visualizado nos navegadores mais antigos. Antes de converter em tabelas, verifique se os elementos PA no se sobrepem. Alm disso, certifique-se de estar no modo Padro (Exibir > Modo Tabela > Modo padro). Converso de elementos PA em uma tabela 1. Selecione Modificar > Converter > Divs PA em tabela. 2. Selecione uma das opes a seguir e clique em OK: Mais preciso Cria uma clula para cada elemento PA, alm das clulas adicionais necessrias para preservar o espao entre os elementos PA. Menor: reduzir clulas vazias Especifica que as bordas dos elementos PA devem ser alinhadas caso estejam posicionadas no nmero especificado de pixels. Se voc selecionar esta opo, a tabela resultante ter menos linhas e coluna vazias, mas poder no corresponder precisamente ao layout. Usar GIFs transparentes Preenche a ltima linha da tabela com GIFs transparentes. Isso garante que a tabela ser exibida com as mesmas larguras de coluna em todos os navegadores. Quando esta opo for ativada, voc no poder editar a tabela resultante arrastando suas colunas. Quando esta opo for desativada, a tabela resultante no conter GIFs transparentes, mas as larguras das colunas podero variar de um navegador para outro. Centralizar na pgina Centraliza a tabela resultante na pgina. Se esta opo for desativada, a tabela iniciar na borda esquerda da pgina. Converso de tabelas em Divs PA 1. Selecione Modificar > Converter > Tabelas em Divs PA. 2. Selecione uma das opes a seguir e clique em OK: Impedir sobreposio de elemento AP Restringe as posies dos elementos PA quando eles forem criados, movidos e redimensionados, a fim de que no se sobreponham. Mostrar painel de elementos PA Exibe o painel de elementos PA. Mostrar grade e Encaixar na grade Permite o uso de uma grade para ajudar a posicionar elementos PA. As tabelas so convertidas em Divs PA. As clulas vazias no so convertidas em elementos PA, a menos que tenham cores de fundo. Nota: Os elementos de pgina que estavam fora das tabelas tambm so colocados em Divs PA.

Impedir sobreposio de elemento PA


Como as clulas de tabela no podem se sobrepor, o Dreamweaver no pode criar uma tabela a partir de elementos PA sobrepostos. Se voc pretende converter os elementos PA de um documento em tabelas, use a opo Evitar sobreposies para restringir a movimentao e o posicionamento do elemento PA, a fim de que eles no se sobreponham. Quando esta opo estiver ativada, um elemento PA no poder ser criado em frente a, movido ou redimensionado sobre ou aninhado dentro de um elemento PA existente. Se voc ativar esta opo aps criar elementos PA sobrepostos, arraste cada elemento PA sobreposto para afast-lo de outros elementos PA. O Dreamweaver no corrige automaticamente elementos PA sobrepostos existentes na pgina quando voc ativa Impedir sobreposio de elemento AP. Quando esta opo e encaixe forem ativados, um elemento PA no se encaixar na grade caso dois elementos PA se sobreponham. Em vez disso, ele se encaixar na borda do elemento PA mais prximo. Nota: Determinadas aes permitem a sobreposio de elementos PA at mesmo quando a opo Evitar sobreposies est ativada. Se voc

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

Avisos legais | Poltica de privacidade on-line

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.

Layouts de grade fluidos


Uso de layouts de grade fluidos Tutoriais em layouts de grade fluidos Criao de um layout de grade fluido Insero de elementos de grade fluidos Elementos de aninhamento O layout de um site precisa responder e adaptar-se s dimenses do dispositivo em que exibido. Os layouts de grade fluidos oferecem uma maneira visual de criar layouts diferentes que correspondam aos dispositivos em que o site exibido. Por exemplo, o site ser exibido em computadores, tablets e celulares. possvel usar layouts de grade fluidos para especificar layouts para cada um desses dispositivos. Dependendo de onde o site for exibido (computador, tablet ou celular), o layout correspondente usado para exibir o site. Mais informaes: Layout adaptativo versus Layout responsivo O lanamento da Dreamweaver 12.2 Creative Cloud inclui diversas melhorias para layouts de grade fluidos, como o suporte a elementos estruturais HTML5 e a edio facilitada de elementos aninhados. Para obter uma viso geral da lista completa de aprimoramentos, clique aqui.

Tutoriais em layouts de grade fluidos


Como usar layouts de grade fluidos na Dreamweaver CS6 (Tutorial) Adobe TV: Criao de designs adaptativos com layouts de grade fluidos na Dreamweaver CS6 (Vdeo) Introduo s grades fluidas da Dreamweaver CS6 (Tutorial)

Para o incio

Criao de um layout de grade fluido


1. Selecione Arquivo > Novo layout de grade fluido.

Para o incio

2. O valor padro para o nmero de colunas na grade exibido no centro do tipo de mdia. Para personalizar o nmero de colunas para um dispositivo, edite o valor conforme necessrio. 3. Para ajustar a largura de uma pgina de acordo com o tamanho da tela, defina o valor da porcentagem. 4. Alm disso, voc pode mudar a largura da medianiz. A medianiz o espao entre duas colunas. 5. Especifique as opes da CSS para a pgina. Ao clicar em Criar, voc dever especificar um arquivo da CSS. Voc pode executar um dos seguintes procedimentos: Crie um arquivo da CSS. Abra um arquivo da CSS existente. Especifique o arquivo da CSS que est sendo aberto como um arquivo de grade fluida da CSS. A grade fluida para celulares exibida por padro. Alm disso, ser exibido o painel Inserir para a grade fluida. Use as opes no painel Inserir para criar o layout. Para alternar para a criao de layout para outros dispositivos, clique no cone correspondente nas opes abaixo da visualizao de design. 6. Salve o arquivo. Ao salvar o arquivo HTML, voc dever salvar os arquivos dependentes, como boilerplate.css e respond.min.js, em um local no computador. Especifique um local e clique em Copiar. O boilerplate.css baseado no padro estereotipado HTML5. Ele um conjunto de estilos da CSS que garante a consistncia no modo como sua pgina da Web renderizada em vrios dispositivos. O respond.min.js uma biblioteca JavaScript que fornece suporte a consultas de mdia em verses antigas de navegadores.

Para o incio

Insero de elementos de grade fluidos


Os elementos fluidos e no fluidos so listados no painel de estrutura ou nas opes de estrutura (Inserir > Layout). Na Dreamweaver 12.2, trs novos elementos foram inseridos: a lista no ordenada, a lista ordenada e o item de lista. 1. Selecione Inserir > Layout. 2. Selecione o elemento que deseja inserir. 3. (12.2) Na caixa de dilogo exibida, selecione uma classe ou insira um valor para a ID. O menu Classe exibe as classes do arquivo da CSS especificado na criao da pgina. O elemento selecionado inserido no layout. 4. (atualizao 12.2) Quando voc seleciona um elemento inserido, as opes para ocultar, duplicar, bloquear ou excluir o Div so exibidas. Para Divs sobrepostos um em cima do outro, a opo para alternar Divs exibida.

Opo A

Rtulo Alternar Div

Descrio Alterna o elemento selecionado no momento com o elemento acima ou abaixo. Oculta o elemento. Para revelar um elemento, execute um destes procedimentos:

Ocultar

Para revelar seletores de ID, altere a propriedade no arquivo da CSS para block. (display:block ) Para revelar seletores de classe, remova a classe aplicada (hide_<MediaType> ) no cdigo-fonte.

C D

Mover para cima uma linha Duplicar

Move o elemento uma linha para cima. Duplica o elemento selecionado no momento. A CSS vinculada ao elemento tambm duplicada. Para os seletores de ID, exclui o HTML e a CSS. Para excluir apenas HTML, pressione Excluir. Para os seletores de classe, apenas o HTML excludo. Converte o elemento para um elemento absolutamente posicionado. Para os seletores de classe, o boto Alinhar funciona como um boto de margem zero. Para os seletores de ID, o boto Alinhar alinha o elemento na grade.

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).

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade on-line

Aplicao de layout s pginas com CSS


Sobre o layout da pgina CSS Sobre a estrutura do layout de pgina CSS Criao de uma pgina com um layout de CSS

Sobre o layout da pgina CSS

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.

Sobre a estrutura do layout de pgina CSS


Antes de passar para esta seo, voc deve estar familiarizado com os conceitos bsicos da CSS.

Para o incio

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.

A. Div de container B. Div de barra lateral C. Div de contedo principal Este o cdigo das trs tags div do HTML: <!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Contedo da barra lateral</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Contedo principal </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>cabealho do nvel H2 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div>

</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:

Tag div de continer, 780 pixels, sem margem A. Texto alinhado esquerda B. Fundo branco C. Borda preta slida de 1 pixel A prxima regra CSS cria regras de estilo para a tag div de barra lateral: #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } A regra #sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 pixels, um preenchimento direita de 10 pixels e um preenchimento esquerda de 20 pixels. (A ordem padro de preenchimento da parte superior direita para a parte inferior esquerda.) Alm disso, a regra posiciona a tag div de barra lateral com float: left uma propriedade que coloca a tag div de barra lateral no lado esquerdo da tag div de continer. Estes so os resultados da aplicao da regra tag div de barra lateral:

Div de barra lateral, flutuao esquerda A. Largura 200 pixels B. Preenchimento superior e inferior, 15 pixels Por fim, a regra CSS da tag div de continer principal finaliza o layout: #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } A regra #mainContent dita que a div de contedo principal ter uma margem esquerda de 250 pixels; isso significa que ela colocar 250 pixels de espao entre o lado esquerdo da div de continer e o lado esquerdo da div de contedo principal. Alm disso, a regra fornece 20 pixels de espaamento nos lados direito, inferior e esquerdo da div de contedo principal. Estes so os resultados da aplicao da regra div mainContent: Esta ser a aparncia do cdigo completo:

Div de contedo principal, margem esquerda de 250 pixels A. Preenchimento esquerda de 20 pixels B. Preenchimento direita de 20 pixels C. 20 Preenchimento inferior de 20 pixels

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sem ttulo</title> <style type="text/css"> #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } </style> </head> <body> <!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Contedo da barra lateral</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Contedo principal </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>cabealho do nvel H2 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body> Nota: O cdigo de exemplo acima uma verso simplificada do cdigo que cria o layout de barra lateral fixa de duas colunas quando voc cria um novo documento usando os layouts predefinidos que acompanham o Dreamweaver.

Criao de uma pgina com um layout de CSS

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.

Criar uma pgina com um layout CSS


1. Selecione Arquivo > Novo. 2. Na caixa de dilogo Novo documento, selecione a categoria Pgina em branco. (Essa a seleo padro.) 3. Em Tipo de pgina, selecione o tipo de pgina que voc deseja criar. Nota: Voc deve selecionar um tipo de pgina em HTML para o layout. Por exemplo, voc pode selecionar HTML, ColdFusion, PHP etc. No possvel criar uma pgina ActionScript, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um layout CSS. Alm disso, os tipos de pgina da categoria Outros da caixa de dilogo Novo documento apresentam restrio na incluso de layouts de pgina CSS. 4. Em Layout, selecione o layout CSS que deseja usar. Voc pode escolher entre 16 layouts diferentes. A janela Visualizar mostra o layout e fornece uma breve descrio do layout selecionado. 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. 6. Selecione um local para a CSS do layout em CSS de Layout no menu pop-up.

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.

Adio dos layouts CSS personalizados lista de opes


1. Crie uma pgina HTML que contm o layout CSS que voc gostaria de adicionar lista de opes na caixa de dilogo Novo documento. A CSS do layout deve residir no cabealho da pgina HTML. Para tornar seu layout de CSS personalizado consistente com outros layouts que acompanham o Dreamweaver, voc dever salvar seu arquivo em HTML com a extenso .htm. 2. Adicione a pgina HTML pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. 3. (Opcional) Adicione uma imagem de visualizao do layout (por exemplo, um arquivo .gif ou .png) pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. As imagens padro fornecidas com o Dreamweaver so arquivos PNG de 227 pixels de largura x 193 pixels de altura. Atribua imagem de visualizao o mesmo nome do arquivo HTML, a fim de que voc possa control-la facilmente. Por exemplo, se o arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png imagem de visualizao. 4. (Opcional) Crie um arquivo de anotaes para o layout personalizado, abrindo a pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copiando e colando qualquer arquivo de anotao existente na mesma pasta e renomeando a cpia do layout personalizado. Por exemplo, voc pode copiar o arquivo oneColElsCtr.htm.mno e renome-lo como myCustomLayout.htm.mno. 5. (Opcional) Aps criar um arquivo de anotaes para o layout personalizado, voc poder abrir o arquivo e especificar o nome, a descrio e a imagem de visualizao do layout.
Vinculao a uma folha de estilos CSS externa

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Sobre a estrutura do Spry


A estrutura do Spry uma biblioteca JavaScript que permite aos designers criar pginas da Web que garantam experincias mais interessantes aos visitantes do site. Com o Spry, voc pode usar HTML, CSS e o mnimo de JavaScript para incorporar dados XML aos documentos HTML, criar widgets como acordees e barras de menu, e adicionar diferentes tipos de efeitos a vrios elementos de pgina. A estrutura do Spry foi elaborada para simplificar e facilitar o uso do markup aos que tm conhecimentos bsicos de HTML, CSS e JavaScript. A estrutura do Spry destina-se principalmente aos profissionais de design na Web ou designers no profissionais avanados. Essa no uma estrutura integral de aplicativos da Web para o desenvolvimento de contedo da Web em nvel empresarial (embora ela possa ser usada com outras pginas de nvel empresarial). Para obter mais informaes sobre a estrutura do Spry, consulte www.adobe.com/go/learn_dw_spryframework_br. Mais tpicos da Ajuda Guia do desenvolvedor do Spry

Avisos legais | Poltica de privacidade on-line

Incluso de efeitos do Spry


Viso geral dos efeitos do Spry Aplicar um efeito Aparecer/Desaparecer Aplicar o efeito Persiana Aplicar um efeito Aumentar/Diminuir Aplicar um efeito Realce Aplicar um efeito Espalhar Aplicar o efeito Deslizar Aplicar um efeito Apertar Adicionar um efeito extra Excluir um efeito

Viso geral dos efeitos do Spry

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.

Aplicar um efeito Aparecer/Desaparecer


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.

Para o incio

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.

Aplicar o efeito Persiana

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.

Aplicar um efeito Aumentar/Diminuir


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.

Para o incio

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.

Aplicar um efeito Realce


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.

Para o incio

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.

Aplicar um efeito Espalhar

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

Aplicar o efeito Deslizar

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.

Aplicar um efeito Apertar

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

Adicionar um efeito extra


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.

Para o incio

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

Avisos legais | Poltica de privacidade on-line

Alterar a orientao de pgina para dispositivos mveis (CS5.5 e posterior)


Na maior parte de dispositivos mveis avanados, a orientao de uma pgina alterada com base em como o dispositivo segurado. Quando o usurio mantm o telefone verticalmente, a orientao de retrato exibida. Quando o usurio vira o dispositivo horizontalmente, a pgina reajustase nas dimenses de paisagem. No Dreamweaver, voc pode visualizar uma pgina nas orientaes Retrato ou Paisagem tanto na Visualizao dinmica quanto na Visualizao de design. Use essas opes para testar como sua pgina se adapta a essas configuraes. Assim, voc pode modificar, se necessrio, o arquivo CSS para que a pgina seja exibida conforme desejado em ambas as orientaes. Selecione Exibir > Tamanho da janela > orientao Paisagem ou orientao Retrato.

Avisos legais | Poltica de privacidade on-line

Cores
Cores aceitas pela Web Usar o seletor de cores

Cores aceitas pela Web

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.

Usar o seletor de cores

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

Avisos legais | Poltica de privacidade on-line

Criao de consultas de mdia (CS5.5 e posterior)


Criar consulta de mdia Usar um arquivo de consultas de mdia existente Escolher um arquivo de consultas de mdia para todo o site diferente Visualizao de pginas da Web com base em consulta de mdia Voc pode usar consultas de mdia para especificar arquivos CSS com base nas caractersticas informadas de um dispositivo. O navegador em um dispositivo verifica a consulta de mdia e usa o arquivo CSS correspondente para exibir a pgina da web. Por exemplo, a seguinte consulta de mdia especifica o arquivo phone.css para dispositivos de 300-320 pixels. <link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (maxwidth: 320px)"> Para uma obter introduo extensa s consultas de mdia, leia o artigo de Don Booth no Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_br. Para obter mais informaes sobre consultas de mdia da W3C, consulte www.w3.org/TR/css3-mediaqueries/.

Criar consulta de mdia

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">

Usar um arquivo de consultas de mdia existente


1. Crie uma pgina da Web ou abra uma existente. 2. Selecione Modificar > Consultas de mdia. 3. Selecione o arquivo de consultas de mdia para todo o site. 4. Clique em Especificar. 5. Selecione Usar arquivo existente se voc j tiver criado um arquivo CSS com a Consulta de mdia. 6. Clique no cone de busca para procurar e especifique o arquivo. Clique em OK. 7. Selecione o arquivo de consultas de mdia para todo o site.

Para o incio

8. 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"> 9. Clique em OK.

Escolher um arquivo de consultas de mdia para todo o site diferente


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.

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.

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.

Visualizao de pginas da Web com base em consulta de mdia

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.

Avisos legais | Poltica de privacidade on-line

Criao de pginas dinmicas


Dreamweaver e design de pgina dinmica

Dreamweaver e design de pgina dinmica


Siga estas etapas gerais para projetar e criar com xito um site dinmico. 1. Criar a pgina.

Para o incio

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

Avisos legais | Poltica de privacidade on-line

Exibio de dados com o Spry


Sobre os conjuntos de dados do Spry Criar um conjunto de dados do Spry Criar uma regio do Spry Criar uma regio repetitiva do Spry Criar uma regio de listas de repetio do Spry

Sobre os conjuntos de dados do Spry

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.

Criar um conjunto de dados do Spry


Criar um conjunto de dados HTML do Spry

Para o incio

1. Se voc est apenas criando um conjunto de dados, no precisa se preocupar com o ponto de insero. Mas, se est criando um conjunto de dados e inserindo um layout, verifique se o ponto de insero est onde voc deseja inserir o layout na pgina. 2. Escolha Inserir > Spry > Conjunto de dados do Spry. 3. Na tela Especificar fonte de dados, faa o seguinte: Selecione HTML no menu pop-up Selecionar tipo de dados. (Ele selecionado por padro.) Especifique um nome para o novo conjunto de dados. Da primeira vez que voc criar um conjunto de dados, o nome padro ser ds1. O nome do conjunto de dados pode conter letras, nmeros e sublinhados, mas no pode comear com um nmero. Especifique os elementos HTML na fonte de dados que voc deseja que o Dreamweaver detecte. Por exemplo, se voc tiver organizado seus dados dentro de uma tag div e quiser que o Dreamweaver detecte tags div em vez de tabelas, selecione Divs no menu pop-up Detectar. A opo Personalizar permite digitar qualquer nome de tag que voc deseje selecionar. Especifique o caminho para o arquivo que contm a fonte de dados HTML. Pode ser um caminho relativo para um arquivo local no seu site (por exemplo, dados/dados_html.html), ou ento um URL absoluto para uma pgina da Web ao vivo (usando HTTP ou HTTPS). Voc pode clicar no boto Procurar para navegar at um arquivo local e selecion-lo. O Dreamweaver processa a fonte de dados HTML na janela Seleo de dados e exibe marcadores visuais para os elementos qualificados para serem contineres do conjunto de dados. O elemento que voc deseja usar j deve ter uma ID exclusiva atribuda a ele. Se no tiver, o Dreamweaver exibir uma mensagem de erro, e voc precisar voltar ao arquivo de fonte de dados e atribuir a ele uma ID exclusiva. Alm disso, os elementos qualificados no arquivo de fonte de dados no podem residir em regies do Spry nem conter outras referncias de dados. Como alternativa, voc pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais informaes, consulte Usar um feed em tempo de design. Selecione o elemento para o seu continer de dados clicando em uma das setas amarelas que aparecem na janela Seleo de dados, ou ento escolhendo uma ID no menu pop-up Contineres de dados.

A seleo do elemento para dados de continer do conjunto de dados HTML. No caso de arquivos grandes, voc pode clicar na seta Expandir/reduzir, na parte inferior da janela Seleo de dados, para ver mais dados. Depois que voc selecionar o elemento de continer para o conjunto de dados, o Dreamweaver exibir uma visualizao do conjunto de dados na janela Visualizao de dados. (Opcional) Selecione Seleo avanada de dados se quiser especificar seletores de dados CSS para o conjunto de dados. Por exemplo, se voc especificar .product na caixa de texto Seletores de linha e .boximage na caixa de texto Seletores de coluna, o conjunto de dados incluir somente as linhas com a classe .product atribuda e somente as colunas com a classe .boximage atribuda. Se quiser digitar mais de um seletor em determinada caixa de texto, separe-os com vrgula. Para obter mais informaes, consulte Sobre os seletores de dados do Spry. 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 colunas. Depois de selecionar a coluna, voc poder especificar o uso de ordem crescente ou decrescente. (Opcional: somente tabelas) Desmarque a opo Usar primeira linha como cabealho se quiser usar nomes de colunas genricos (ou seja, column0, column1, column2 etc.) em vez de nomes de colunas especificados na sua fonte de dados HTML. Nota: Se voc tiver selecionado algo diferente de uma tabela como elemento de continer do seu conjunto de dados, essa opo e a prxima no estaro disponveis. O Dreamweaver usa automaticamente column0, column1, column2 etc. como nomes de colunas de conjuntos de dados no baseados em tabelas. (Opcional: somente tabelas) Selecione Usar colunas como linhas para reverter a orientao horizontal e vertical dos dados no conjunto de dados. Se voc selecionar essa opo, as colunas sero usadas como linhas. (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 que os dados sejam atualizados 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 SpryData.js e SpryHTMLDataSet.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.

Criar um conjunto de dados XML do Spry


1. Se voc est apenas criando um conjunto de dados, no precisa se preocupar com o ponto de insero. Mas, se est criando um conjunto de dados e inserindo um layout, verifique se o ponto de insero est onde voc deseja inserir o layout na pgina. 2. Escolha Inserir > Spry > Conjunto de dados do Spry. 3. Na tela Especificar fonte de dados, faa o seguinte: Selecione XML no menu pop-up Selecionar tipo de dados. Especifique um nome para o novo conjunto de dados. Da primeira vez que voc criar um conjunto de dados, o nome padro ser ds1. O nome do conjunto de dados pode conter letras, nmeros e sublinhados, mas no pode comear com um nmero. Especifique o caminho para o arquivo que contm a fonte de dados XML. Pode ser um caminho relativo para um arquivo local no seu site (por exemplo, arquivos_de_dados/dados.xml), ou ento um URL absoluto para uma pgina da Web (usando HTTP ou HTTPS). Voc pode clicar no boto Procurar para navegar at um arquivo local e selecion-lo. O Dreamweaver processa a fonte de dados XML na janela Elementos de linha, exibindo a rvore XML de elementos de dados disponveis para seleo. Os elementos repetidos so marcados com um sinal de adio (+) e os elementos-filho so recuados. Como alternativa, voc pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais informaes, consulte Usar um feed em tempo de design. Selecione o elemento que contm os dados que voc deseja exibir. Geralmente um elemento repetido como <menu_item>, com vrios elementos-filho como <item>, <link>, <description> etc.

A seleo de um elemento repetido para conjuntos de dados XML Depois que voc selecionar o elemento de continer para o conjunto de dados, o Dreamweaver exibir uma visualizao do conjunto de dados na janela Visualizao de dados. A caixa de texto XPath exibe uma expresso que mostra onde o n selecionado est localizado no arquivo XML de origem.

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.

Escolher um layout para o conjunto de dados


A tela Escolher opes de insero permite selecionar diferentes opes de exibio para os valores do conjunto de dados na pgina. Voc pode exibir os dados usando uma tabela dinmica do Spry, um layout mestre/detalhado, um layout de contineres empilhados (uma nica coluna) ou um layout de contineres empilhados com rea de destaque (duas colunas). Uma representao em miniatura da aparncia de cada layout mostrada na tela Escolher opes de insero. Layout de tabela dinmica Selecione essa opo se quiser exibir seus dados em uma tabela dinmica do Spry. As tabelas do Spry permitem a ordenao dinmica de colunas e outros comportamentos interativos. Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir tabela e siga estas etapas: 1. No painel Colunas, ajuste as colunas da tabela seguindo este procedimento: Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da tabela. Clique no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas tabela. Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. A coluna movida para cima fica mais esquerda da tabela exibida, e a coluna movida para baixo aparece direita. 2. Para tornar uma coluna ordenvel, selecione-a no painel Colunas e escolha Ordenar coluna quando o cabealho estiver selecionado. Todas as colunas so ordenveis por padro. Se quiser tornar uma coluna no ordenvel, selecione seu nome no painel Colunas e desmarque Ordenar coluna quando o cabealho estiver selecionado. 3. Se voc tem estilos CSS associados pgina, seja como uma folha de estilos anexada ou como um conjunto de estilos individuais na pgina HTML, pode aplicar uma classe CSS a uma ou mais das seguintes opes:

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

de dados aparecem realadas e entre chaves ({}). Layout de contineres empilhados com rea de destaque Selecione essa opo se quiser exibir seus dados usando uma estrutura de contineres repetidos na pgina, com uma rea de destaque em cada continer. Normalmente, a rea de destaque contm uma imagem. O layout de rea de destaque semelhante ao de contineres empilhados. A diferena que, no layout de rea de destaque, a exibio dos dados dividida em duas colunas separadas (dentro do mesmo continer). Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir layout de rea de destaque e siga estas etapas: 1. No painel Colunas de destaque, ajuste o contedo da sua rea de destaque da seguinte forma: Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da rea de destaque. Clique no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas rea de destaque. Por padro, o Dreamweaver preenche a rea de destaque 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 de destaque define a ordem de aparecimento dos dados na rea de destaque da pgina. 2. (Opcional) Defina diferentes tipos de continer para os dados na rea de destaque. 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. Repita as etapas acima para o painel Colunas empilhadas. Por padro, o Dreamweaver preenche as colunas empilhadas com todos os dados que no aparecem na rea de destaque (ou seja, todas as colunas, exceto a primeira do conjunto de dados). 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 a rea de destaque com os contineres empilhados ao longo dela, preenchida com as referncias de dados selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}). No inserir HTML Selecione essa opo se quiser criar um conjunto de dados, mas no quiser que o Dreamweaver insira nele um layout HTML. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados manualmente do conjunto de dados para a pgina. Mesmo que voc crie um conjunto de dados sem inserir um layout, ainda poder inserir um dos layouts HTML disponveis a qualquer momento. Para fazer isso, clique duas vezes no nome do conjunto de dados no painel Ligaes, continue clicando para chegar tela Escolher opes de insero, selecione o layout e clique em Concludo. Nota: Voc tambm pode arrastar o nome do conjunto de dados do painel Ligaes para o ponto de insero na pgina. Quando voc fizer isso, a tela Escolher opes de insero ser aberta. Selecione o layout e clique em Concludo.

Editar um conjunto de dados


Depois de criar um conjunto de dados do Spry, voc poder edit-lo a qualquer momento. No painel Ligaes (Janela > Ligaes), clique duas vezes no nome do seu conjunto de dados e edite-o. Nota: Quando voc edita um conjunto de dados e seleciona um novo layout na tela Escolher opes de insero, o Dreamweaver no substitui o layout que j est na pgina. Em vez disso, insere um novo.

Usar um feed em tempo de design


Se voc est trabalhando com dados que ainda esto em desenvolvimento, talvez seja til usar um feed em tempo de design. Por exemplo, se o desenvolvedor do servidor ainda estiver finalizando o banco de dados por trs do seu arquivo de dados XML, voc pode usar uma verso de teste do arquivo para criar sua pgina separadamente do desenvolvimento do banco de dados. Quando voc usa um feed em tempo de design, o Dreamweaver preenche seu ambiente de trabalho somente com dados desse feed. As referncias fonte de dados existentes no cdigo da pgina permanecem como referncias fonte de dados real que voc deseja utilizar. 1. Comece criando um conjunto de dados do Spry (consulte os procedimentos anteriores para obter instrues). 2. Na tela Especificar fonte de dados, clique no link Feed em tempo de design. 3. Clique no boto Procurar para localizar o feed em tempo de design e clique em OK.

Sobre os seletores de dados do Spry


Quando voc usa o Dreamweaver para criar um conjunto de dados do Spry, por padro, o Dreamweaver inclui todos os dados em um continer selecionado. Voc pode refinar essa seleo usando seletores de dados CSS. Os seletores de dados CSS permitem incluir somente uma parte dos dados da fonte de dados, possibilitando que voc especifique regras CSS anexadas a determinados dados. Por exemplo, se voc especificar .product na caixa de texto Seletores de linha da tela Especificar fonte de dados, o Dreamweaver criar um conjunto de dados contendo somente linhas com a classe .product atribuda. Voc precisa selecionar a opo Seleo avanada de dados, na tela Especificar fonte de dados, para que as caixas dos seletores de dados se tornem ativas. Se voc inserir seletores de dados e desmarcar essa opo, o Dreamweaver ir reter o que voc digitar nas caixas, mas no os utilizar como filtros para o conjunto de dados.

Sobre tabelas mestre dinmicas do Spry e atualizao de regies de detalhes


Um dos usos mais comuns dos conjuntos de dados do Spry criar uma ou mais tabelas HTML que atualizam dinamicamente outros dados da pgina em resposta a uma ao do usurio. Por exemplo, se um usurio seleciona um produto em uma lista de produtos de uma tabela, o conjunto de dados pode atualizar imediatamente os dados em outra parte da pgina com as informaes detalhadas sobre o produto selecionado. Com o Spry, essas atualizaes no exigem uma atualizao de pgina. Essas regies separadas da pgina so conhecidas como regies mestre e de detalhes. Normalmente, uma rea da pgina (a regio mestre) exibe uma lista de itens categorizados (por exemplo, uma lista de produtos), e outra rea da pgina (a regio de detalhes) exibe mais informaes sobre um registro selecionado. Cada conjunto de dados mantm a noo de uma linha atual e, por padro, a linha atual definida como a primeira linha de dados no conjunto de dados. Quando um usurio faz selees diferentes em uma regio mestre (novamente, adotando o exemplo de uma lista de produtos distintos), na verdade, o Spry altera a linha atual do conjunto de dados. Como a regio de detalhes dependente da regio mestre, todas as alteraes ocorridas a partir da interao do usurio com a regio mestre (por exemplo, a seleo de produtos diferentes) resultam em alteraes nos dados exibidos na regio de detalhes. O Dreamweaver cria layouts mestre/detalhados automaticamente, para que todas as associaes corretas entre regies mestre e de detalhes estejam presentes. Mas, se voc quiser criar uma tabela mestre dinmica por conta prpria, ter a opo de prepar-la para a associao posterior com uma regio de detalhes. Quando voc seleciona a opo Atualizar regies de detalhes quando a linha estiver selecionada (na caixa de dilogo Inserir tabela), o Dreamweaver insere uma tag spry:setrow dentro da tag da linha repetitiva na sua tabela dinmica. Esse atributo prepara a tabela como mestre, com a capacidade de redefinir a linha atual do conjunto de dados medida que o usurio interage com a tabela. Para obter mais informaes sobre a criao manual de regies mestre/de detalhes, consulte o Guia de desenvolvedor do Spry em www.adobe.com/go/learn_dw_sdg_masterdetail_br.

Criar uma regio do Spry

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).

O painel Ligaes exibe os dados disponveis no conjunto de dados. Nota: No painel Ligaes, existem alguns elementos internos do Spry, ds_RowID, ds_CurrentRowID e ds_RowCount, tambm listados. O Spry os utiliza para definir a linha na qual o usurio clicou ao determinar como atualizar as regies de detalhes dinmicas. 7. Para substituir o texto do alocador de espao por um objeto de dados do Spry (por exemplo, uma tabela do Spry), clique no boto apropriado do objeto de dados do Spry, na categoria Spry do painel Inserir. 8. Para substituir o texto do alocador de espao por dados dinmicos, use um dos seguintes mtodos: Arraste um ou mais elementos no painel Ligaes sobre o texto selecionado. Na Visualizao de cdigo, digite o cdigo de um ou mais elementos diretamente. Use este formato: {dataset-name::element-name}, como em {ds1::category}. ou {dsProducts::desc}. Se voc est usando somente um conjunto de dados no arquivo ou elementos de dados do mesmo conjunto de dados definido para a regio, possvel omitir o nome do conjunto de dados e apenas gravar {category} ou {desc}. Independentemente do mtodo que voc usar para definir o contedo de sua regio, estas linhas sero adicionadas ao cdigo HTML: <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Criar uma regio repetitiva do Spry

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).

O painel Ligaes exibe os dados disponveis no conjunto de dados. Nota: No painel Ligaes, existem alguns elementos internos do Spry, ds_RowID, ds_CurrentRowID e ds_RowCount, tambm listados. O Spry os utiliza para definir a linha na qual o usurio clicou ao determinar como atualizar as regies de detalhes dinmicas. 8. Para substituir o texto do alocador de espao por um objeto de dados do Spry, clique no boto apropriado do objeto de dados do Spry no painel Inserir. 9. Para substituir o texto do alocador de espao por um ou mais dados dinmicos, use um dos seguintes mtodos: Arraste um ou mais elementos no painel Ligaes sobre o texto selecionado. Na Visualizao de cdigo, digite o cdigo de um ou mais elementos diretamente. Use este formato: {dataset-name::element-name}, como em {ds1::category}. ou {dsProducts::desc}. Se voc est usando somente um conjunto de dados no arquivo ou elementos de dados do mesmo conjunto de dados definido para a regio, possvel omitir o nome do conjunto de dados e apenas gravar {category} ou {desc}. Independentemente do mtodo que voc usar para definir o contedo de sua regio, estas linhas sero adicionadas ao seu cdigo HTML: <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Criar uma regio de listas de repetio do Spry

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.

Avisos legais | Poltica de privacidade on-line

Exibio de registros de banco de dados


Sobre os registros do banco de dados Comportamentos de servidor e elementos de formatao Aplicao de elementos tipogrficos e de layout de pgina a dados dinmicos Navegao em resultados do conjunto de recursos do banco de dados Criar uma barra de navegao do conjunto de registros Barras de navegao do conjunto de registros personalizadas Tarefas de design da barra de navegao Exibir e ocultar regies com base nos resultados do conjunto de registros Exibir vrios resultados do conjunto de registros Criar uma tabela dinmica Criar contadores de registros Usar formatos de dados predefinidos

Sobre os registros do banco de dados

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.

Comportamentos de servidor e elementos de formatao

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

Aplicao de elementos tipogrficos e de layout de pgina a dados dinmicos

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.

Navegao em resultados do conjunto de recursos do banco de dados

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.

Criar uma barra de navegao do conjunto de registros

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:

A verso em imagem 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.

Barras de navegao do conjunto de registros personalizadas

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

Atribuir comportamentos de servidor individuais a cada link de navegao Esta seo descreve como atribuir comportamentos de servidor individuais aos links de navegao.

Criar e atribuir comportamentos de servidor a um link de navegao


1. Na Visualizao de design, selecione a sequncia de caracteres de texto ou a imagem que voc deseja usar como link para navegao em registros. 2. Abra o painel Comportamentos do servidor (Janela > Comportamentos do servidor) e clique no boto de adio (+). 3. Selecione Paginao do conjunto de registros no menu pop-up e, depois, selecione um comportamento de servidor apropriado no link dos comportamentos de servidor listados. Caso o conjunto contenha vrios registros, o comportamento de servidor Mover para ltimo registro pode demorar muito para ser executado quando o usurio clica no link. 4. No menu pop-up Conjunto de registros, selecione o conjunto que contm os registros e clique em OK. O comportamento de servidor atribudo ao link de navegao.

Definir as opes da caixa de dilogo Mover para (comportamento de servidor)


Adicione links que permitam ao usurio navegar nos registros de um conjunto. 1. Caso voc no tenha selecionado nada na pgina, selecione um link no menu pop-up. 2. Selecione o conjunto que contm os registros a serem percorridos e clique em OK. Nota: Caso o conjunto contenha vrios registros, o comportamento de servidor Mover para ltimo registro pode demorar muito para ser executado quando o usurio clica no link.

Tarefas de design da barra de navegao

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 Ir para primeira pgina Ir para pgina anterior Ir para prxima pgina Ir para ltima pgina Comportamento de servidor Mover para primeira pgina Mover para pgina anterior Mover para prxima pgina Mover para ltima pgina

Exibir e ocultar regies com base nos resultados do conjunto de registros

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

Mostrar se no for ltima pgina 1. Na Visualizao de design, selecione a regio na pgina a ser mostrada ou ocultada. 2. No painel Comportamentos do servidor (Janela > Comportamentos do servidor), clique no boto de adio (+). 3. Selecione Mostrar regio no menu pop -up, selecione um dos comportamentos de servidor listados e clique em OK.

Exibir vrios resultados do conjunto de registros

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.

Modificar regies repetitivas no Inspetor de propriedades


Modifique a regio repetitiva selecionada alterando qualquer uma das seguintes opes: O nome da regio repetitiva. O conjunto que fornece os registros regio repetitiva. O nmero de registros exibidos Quando voc seleciona uma nova opo, o Dreamweaver atualiza a pgina.

Reutilizar conjuntos de registros PHP


Para obter um tutorial sobre como reutilizar os conjuntos de registros PHP, consulte o tutorial de David Powers, Como reutilizar um Conjunto de dados PHP em mais de uma regio de repetio?

Criar uma tabela dinmica

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.

Criar contadores de registros

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.

Criar contadores de registros simples

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:

Quando exibido na Visualizao dinmica, o contador exibido semelhante ao seguinte exemplo:

Criar e adicionar o contador de registros na pgina


Na caixa de dilogo Status de navegao do conjunto de registros, selecione o conjunto de registros a ser controlado e clique em OK.

Criar contadores de registros personalizados


Voc usa comportamentos de contagem de registros para criar contadores de registros personalizados. A criao de um contador de registros personalizado permite criar um contador de registros que vai alm da tabela simples, de linha nica, inserida pelo objeto de servidor Status de navegao do conjunto de registros. Voc pode organizar elementos de design de vrias formas criativas e aplicar um comportamento de servidor apropriado a cada elemento. Os comportamentos de servidor Contagem de registros so: Exibir nmero de registro inicial Exibir nmero de registro final Exibir total de registros Para criar um contador de registros personalizado em uma pgina, voc deve criar inicialmente 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. Este exemplo cria um contador de registros semelhante ao do exemplo em Contadores de registros simples. Nesse exemplo, o texto na fonte sans-serif representa os alocadores de espao da contagem de registros que sero inseridos na pgina. O contador de registros do exemplo exibido da seguinte forma: Exibindo registros de StartRow a EndRow de RecordSet.RecordCount. 1. Na Visualizao de design, digite o texto do contador na pgina. O texto pode ser o que voc quiser, por exemplo: Displaying records thru of . 2. Coloque o ponto de insero ao final da sequncia de caracteres de texto. 3. Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor). 4. Clique no boto de adio (+) no canto superior esquerdo e, depois, clique em Exibir contagem de registros. Nesse submenu, selecione Exibir total de registros. O comportamento Exibir total de registros inserido na pgina, e um alocador de espao inserido onde estava o ponto de insero. A sequncia de caracteres de texto exibida da seguinte forma: Displaying records thru of {Recordset1.RecordCount}. 5. Coloque o ponto de insero depois da palavra records e selecione Exibir nmero de registro inicial no painel Comportamentos de servidor > boto de adio (+) > Contagem de registros. A sequncia de caracteres de texto exibida da seguinte forma: Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}. 6. Agora coloque o ponto de insero entre as palavras thru e of e selecione Exibir nmero de registro inicial no painel Comportamentos de servidor > boto de adio (+) > Contagem de registros. A sequncia de caracteres de texto exibida da seguinte forma: Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}. 7. Confirme se o contador est funcionando corretamente exibindo a pgina na Visualizao dinmica; o contador semelhante ao do seguinte exemplo: Displaying records 1 thru 8 of 40.

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.

Usar formatos de dados predefinidos

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.

Aplicar formatos de dados a contedo dinmico


1. Na janela Documento, selecione o alocador de espao do contedo dinmico. 2. Selecione Janela > Ligaes para exibir o painel Ligaes. 3. Clique no boto de seta para baixo na coluna Formato. Caso a seta para baixo no esteja visvel, expanda o painel. 4. No menu pop-up Formato, selecione a categoria do formato de dados que voc deseja. Verifique se o formato de dados apropriado ao tipo de dado que voc est formatando. Por exemplo, os formatos Moeda s funcionam caso os dados dinmicos consistam em dados numricos. Observe que voc no pode aplicar mais de um formato aos mesmos dados. 5. Verifique se o formato foi aplicado corretamente ao visualizar a pgina na Visualizao dinmica.

Personalizar um formato de dados


1. Abra uma pgina que contenha dados dinmicos na Visualizao de design. 2. Selecione os dados dinmicos cujo formato voc deseja personalizar. O item de dados ligado cujo texto dinmico voc selecionou realado no painel Ligaes (Janela > Ligaes). O painel exibe duas colunas para o item selecionado Ligao e Formato. Caso a coluna Formato no esteja visvel, alargue o painel Ligaes para mostr-la. 3. No painel Ligaes, clique na seta para baixo na coluna Formato para expandir o menu pop-up dos formatos de dados disponveis. Caso a seta para baixo no esteja visvel, alargue ainda mais o painel Ligaes. 4. Selecione Editar lista de formatos no menu pop-up. 5. Complete a caixa de dilogo e clique em OK. a. Selecione o formato na lista e clique em Editar. b. Altere qualquer um dos seguintes parmetros nas caixas Moeda, Nmero ou Porcentagem e clique em OK. O nmero de dgitos a serem exibidos aps a casa decimal Se um zero deve ser colocado antes das fraes Se os parnteses ou um sinal de subtrao devem ser usados em valores negativos Se os dgitos devem ser agrupados c. Para excluir um formato de dados, clique no formato na lista e clique no boto de subtrao (-).

Criar um formato de dados (apenas ASP)


1. Abra uma pgina que contenha dados dinmicos na Visualizao de design. 2. Selecione os dados dinmicos para os quais voc deseja criar um formato personalizado. 3. Selecione Janela > Ligaes para exibir o painel Ligaes e clique na seta para baixo na coluna Formato. Caso a seta para baixo no esteja visvel, expanda o painel. 4. Selecione Editar lista de formatos no menu pop-up. 5. Clique no boto de adio (+) e selecione um tipo de formato. 6. Defina o formato e clique em OK. 7. Digite um nome para o novo formato na coluna Nome e clique em OK. Nota: Embora o Dreamweaver suporte somente a criao de formatos de dados para pginas em ASP, os usurios do ColdFusion e do PHO podem baixar formatos que outros desenvolvedores criaram ou criar formatos de servidor e post-los no Dreamweaver Exchange. Para obter mais informaes sobre a API Formato de servidor, consulte Extenso do Dreamweaver(Ajuda > Extenso do Dreamweaver > Formatos de servidor). Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Apresentao do contedo em tabelas


Sobre as tabelas Precedncia da formatao da tabela em HTML Sobre a diviso e mesclagem das clulas da tabela Inserir uma tabela e adicionar contedo Importao e exportao de dados tabulares Seleo de elementos de tabela Definio das propriedades da tabela Definio das propriedades da clula, linha ou coluna Uso do modo Tabelas expandidas para facilitar a edio da tabela Formatao de tabelas e clulas Redimensionamento de tabelas, colunas e linhas Redimensionamento de tabelas, colunas e linhas Adio e remoo de linhas e colunas Diviso e mesclagem de clulas Cpia, colagem e excluso de clulas Aninhamento de tabelas Ordenao de tabelas

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

Precedncia da formatao da tabela em HTML

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

Sobre a diviso e mesclagem das clulas da tabela

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.

Inserir uma tabela e adicionar contedo

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.

Importao e exportao de dados tabulares

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.

Importao de dados de tabela


1. Siga um destes procedimentos: Selecione Arquivo > Importar > Dados tabulares. Na categoria Dados do painel Inserir, clique no cone Importar dados tabulares Selecione Inserir > Objetos de tabela > Importar dados tabulares. 2. Especifique as opes dos dados tabulares e clique em OK. Arquivo de dados O nome do arquivo a ser importado. Clique no boto Procurar para selecionar um arquivo. Delimitador O delimitador usado no arquivo que voc est importando. Se voc selecionar Outro, uma caixa de texto aparecer direita do menu pop-up. Digite o delimitador usado no arquivo. Nota: Especifique o delimitador usado quando o arquivo de dados foi salvo. Se voc no fizer isso, o arquivo no ser importado corretamente e os dados no sero corretamente formatados em uma tabela. Largura da tabela A largura da tabela. Selecione Ajustar aos dados para aumentar suficientemente cada coluna para que caiba a sequncia de texto mais longa. Selecione Definir para especificar uma largura de tabela fixa em pixels ou como uma porcentagem da largura da janela do navegador. Borda Especifica a largura, em pixels, das bordas da tabela. Preenchimento da clula O nmero de pixels entre o contedo de uma clula e os limites da clula. Espaamento da clula O nmero de pixels entre as clulas de tabela adjacentes. Se voc no atribuir explicitamente valores para bordas, espaamento de clula e preenchimento de clula, a maioria dos navegadores exibir a tabela com as bordas 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 preenchimento ou espaamento, defina Preenchimento da clula e Espaamento da clula 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. Formatar linha superior Determina qual formatao, se houver alguma, est aplicada linha superior da tabela. Selecione entre as quatro opes de formatao: sem formatao, negrito, itlico ou negrito itlico. .

Exportao de uma tabela


1. Coloque o ponto de insero em qualquer clula da tabela. 2. Selecione Arquivo > Exportar > Tabela. 3. Escolha as seguintes opes: Delimitador Especifica qual caractere delimitador deve ser usado para separar itens no arquivo exportado. Quebras de linha Especifica em qual sistema operacional voc estar abrindo o arquivo exportado: Windows, Macintosh ou UNIX. (Diferentes sistemas operacionais tm diferentes formas de indicar o fim de uma linha de texto.) 4. Clique em Exportar. 5. Digite um nome para o arquivo e clique em Salvar.

Seleo de elementos de 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.

Seleo de uma tabela inteira


Siga um destes procedimentos: Clique no canto superior esquerdo da tabela, em qualquer lugar da borda superior ou inferior da tabela, ou na borda de uma linha ou coluna. Nota: O ponteiro altera-se para o cone de grade de tabela borda de linha ou coluna). 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.

Seleo de vrias linhas ou colunas ou de linhas ou colunas individuais


1. Posicione o ponteiro para a borda esquerda de uma linha ou a borda superior de uma coluna. 2. Quando o ponteiro se transformar em uma seta de seleo, clique para selecionar uma linha ou coluna, ou arraste para selecionar vrias linhas ou colunas.

Seleo de uma nica coluna


1. Clique na coluna. 2. Clique no menu de cabealho de coluna e escolha Selecionar coluna.

Seleo de uma nica clula


Siga um destes procedimentos: Clique na clula e selecione a tag <td> no seletor de tags no canto inferior esquerdo da janela Documento. Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) na clula. Clique na clula e selecione Editar> Selecionar tudo. Selecione Editar > Selecionar tudo novamente quando uma clula estiver selecionada a fim de realar a tabela inteira.

Seleo de uma linha ou de um bloco retangular de clulas


Siga um destes procedimentos: Arraste de uma clula para outra clula. Clique em uma clula, mantenha pressionada a tecla Control (Windows) ou a tecla Command (Macintosh) enquanto clica na mesma clula para selecion-la e mantenha pressionada a tecla Shift enquanto clica em outra clula. Todas as clulas da regio linear ou retangular definidas pelas duas clulas so selecionadas.

Seleo de clulas no adjacentes


Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas clulas, linhas ou colunas que voc deseja selecionar. Se cada clula, linha ou coluna em que voc mantm pressionada a tecla Control enquanto clica ou mantm pressionada a tecla Command enquanto clica ainda no estiver selecionada, ela ser adicionada seleo. Se ela j estiver selecionada, ser removida da seleo.

Alterao da cor de realce dos elementos de tabela


1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Selecione Realce na lista de categorias esquerda, faa uma das seguintes alteraes e clique em OK. Para alterar a cor de realce dos elementos de tabela, clique na caixa de cor de Passar o mouse, selecione a cor de realce usando o seletor de cores (ou digite o valor hexadecimal para a cor de realce na caixa de texto). Para ativar ou desativar o realce dos elementos de tabela, marque ou desmarque a opo Mostrar de Passar o mouse.

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.

Definio das propriedades da tabela


Voc pode usar o Inspetor de propriedades para editar tabelas. 1. Selecione uma tabela. 2. Altere propriedades no Inspetor de propriedades (Janela > Propriedades), conforme desejar. Ident. da tabela Uma identificao da tabela. Linhas e colunas O nmero de linhas e colunas da tabela. W A largura da tabela em pixels ou como uma porcentagem da largura da janela do navegador. Nota: Voc normalmente no precisa definir a altura de uma tabela. PreenchClula O nmero de pixels entre o contedo de uma clula e os limites da clula. EspaoClula O nmero de pixels entre as clulas de tabela adjacentes. Alinhar Determina onde a tabela aparecer em relao a outros elementos no mesmo pargrafo, como texto ou imagens.

Para o incio

esquerda alinha a tabela esquerda dos outros elementos (a fim de que o texto no mesmo pargrafo seja disposto ao redor da tabela direita); direita alinha a tabela direita dos outros elementos (com o texto disposto ao redor dela esquerda) e Centralizado centraliza a tabela (com o texto exibido acima e/ou abaixo da tabela). Padro indica que o navegador deve usar o alinhamento padro. Quando o alinhamento for definido como Padro, o outro contedo no ser exibido ao lado da tabela. Para exibir uma tabela ao lado do outro contedo, use o alinhamento esquerda ou direita. Borda Especifica a largura, em pixels, das bordas da tabela. Se voc no atribuir explicitamente valores para a borda, o espaamento de clula e o preenchimento de clula, a maioria dos navegadores exibir a tabela com a borda 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 preenchimento ou espaamento, defina Borda, Preenchimento da clula e Espaamento da clula 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. Classe define a classe CSS na tabela. Nota: Talvez seja necessrio expandir o inspetor Propriedades da tabela para ver as opes a seguir. Para expandir o inspetor Tabela de propriedades, clique na seta de expanso, no canto inferior direito. Limpar larguras das colunas e Limpar alturas das linhas excluem todos os valores de largura de coluna ou altura de linha explicitamente especificados na tabela. Converter larguras da tabela em pixels e Converter alturas da tabela em pixels definem a largura ou altura de cada coluna da tabela para a largura atual em pixels (tambm define a largura da tabela inteira para a largura atual em pixels). Converter larguras da tabela em porcentagem e Converter alturas da tabela em porcentagem definem a largura ou altura de cada coluna da tabela para a largura atual expressa como uma porcentagem da largura da janela Documento (tambm define a largura da tabela inteira para a largura atual como uma porcentagem da largura da janela Documento). Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Definio das propriedades da clula, linha ou coluna


Voc pode usar o Inspetor de propriedades para editar as clulas e linhas de uma tabela. 1. Selecione a coluna ou linha.

Para o incio

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.

Uso do modo Tabelas expandidas para facilitar a edio da tabela

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.

A. Tabela no modo Padro B. Tabela no modo Tabelas expandidas Nota: Aps fazer a seleo ou colocar o ponto de insero, retorne ao modo Padro da Visualizao de design para fazer as edies. Algumas operaes visuais, como redimensionamento, no retornaro os resultados esperados no modo Tabelas expandidas.

Alternncia para o modo Tabelas expandidas


1. Se voc estiver trabalhando na Visualizao de cdigo, selecione Exibir > Design ou Visualizao > Cdigo e design (no possvel alternar para o modo Tabelas expandidas na Visualizao de cdigo). 2. Siga um destes procedimentos: Selecione Exibir > Modo Tabela > Modo Tabelas expandidas. Na categoria Layout do painel Inserir, clique em Modo Tabelas expandidas. Uma barra chamada Modo Tabelas expandidas aparece na parte superior da janela Documento. O Dreamweaver adiciona o preenchimento e o espaamento de clula a todas as tabelas da pgina e aumenta as bordas das tabelas.

Sair do modo Tabelas expandidas


Siga um destes procedimentos: Clique em Sair na barra Modo Tabelas expandidas na parte superior da janela Documento. Selecione Exibir > Modo Tabela > Modo Padro. Na categoria Layout do painel Inserir, clique em Modo Padro.

Formatao de tabelas e clulas

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.

Alterao do formato de uma tabela, linha, clula ou coluna


1. Selecione uma tabela, clula, linha ou coluna. 2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito e altere as propriedades quando necessrio. 3. Altere as propriedades quando necessrio. Para obter mais informaes sobre as opes, clique no cone Ajuda do Inspetor de propriedades. 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 define determinadas propriedades de uma linha, o Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td da 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.

Adio ou edio dos valores de acessibilidade de uma tabela na Visualizao de cdigo


Edite os atributos apropriados no cdigo. Para localizar rapidamente as tags no cdigo, clique na tabela, selecione a tag <table> no seletor de tags, na parte inferior da janela Documento.

Adio ou edio dos valores de acessibilidade de uma tabela na Visualizao de design


Para editar a legenda da tabela, realce a legenda e digite uma nova. Para editar o alinhamento da legenda, coloque o ponto de insero na legenda da tabela, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar cdigo de tag. Para editar o resumo da tabela, selecione a tabela, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar cdigo de tag.

Redimensionamento de tabelas, colunas e linhas

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.

Redimensionamento de tabelas, colunas e linhas


Redimensionamento de uma tabela
Selecione a tabela. Para redimensionar a tabela horizontalmente, arraste a ala de seleo direita. Para redimensionar a tabela verticalmente, arraste a ala de seleo na parte inferior. Para redimensionar a tabela em ambas as dimenses, arraste a ala de seleo no canto inferior direito.

Para o incio

Alterao da largura de uma coluna e manuteno da largura geral da tabela


Arraste a borda direita da coluna que voc deseja alterar. A largura da coluna adjacente tambm alterada. Na verdade, voc redimensiona duas colunas. O feedback visual mostra como as colunas sero ajustadas. A largura geral da tabela no alterada.

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.

Alterao da largura de uma coluna e manuteno do tamanho das outras colunas


Mantenha pressionada a tecla Shift e arraste a borda da coluna. A largura de uma coluna alterada. O feedback visual mostra como as colunas sero ajustadas. A largura geral da tabela alterada para acomodar a coluna que voc est redimensionando.

Alterao visual da altura de uma linha


Arraste a borda inferior da linha.

Torne as larguras de coluna no cdigo consistentes com as larguras visuais


1. Clique em uma clula. 2. Clique no menu de cabealho de tabela e selecione Manter consistncia de todas as larguras.

O Dreamweaver redefine a largura especificada no cdigo para que corresponda largura visual.

Limpeza de todas as larguras ou alturas definidas em uma tabela


1. Selecione a tabela. 2. Siga um destes procedimentos: Selecione Modificar > Limpar larguras das clulas ou Modificar > Tabela > Limpar alturas das clulas. No Inspetor de propriedades, (Janela > Propriedades), clique no boto Limpar alturas das linhas colunas . ou no boto Limpar larguras das

Clique no menu de cabealho de tabela e selecione Limpar todas as alturas ou Limpar todas as larguras.

Limpeza da largura definida de uma coluna


Clique na coluna, clique no menu de cabealho de coluna e selecione Limpar larguras das colunas.

Ativao ou desativao das larguras de tabela e coluna e dos menus


1. Selecione Exibir > Auxlios visuais > Larguras de tabela. 2. Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) na tabela e selecione

Tabela > Larguras de tabela.

Adio e remoo de linhas e colunas


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

Adio de uma nica linha ou coluna


Clique em uma clula e siga um destes procedimentos: Selecione Modificar > Tabela > Inserir linha ou Modificar > Tabela > Inserir coluna. Uma linha aparecer acima do ponto de insero ou uma coluna aparecer esquerda do ponto de insero. Clique no menu de cabealho de coluna e selecione Inserir coluna esquerda ou Inserir coluna direita.

Adio de vrias linhas ou colunas


1. Clique em uma clula. 2. Selecione Modificar > Tabela > Inserir Linhas ou colunas, preencha a caixa de dilogo e clique em OK. Inserir Indica se as linhas ou colunas sero inseridas ou no. Nmero de linhas ou Nmero de colunas O nmero de linhas ou colunas a ser inserido. Onde Especifica se as novas linhas ou colunas devem aparecer antes ou aps a linha ou coluna da clula selecionada.

Excluso de uma linha ou coluna


Siga um destes procedimentos: Clique em uma clula na linha ou coluna a ser excluda e selecione Modificar > Tabela > Excluir linha ou Modificar > Tabela > Excluir coluna. Selecione uma linha ou coluna completa e, em seguida, selecione Editar > Limpar ou pressione Delete.

Adio ou excluso de linhas ou colunas usando o Inspetor de propriedades


1. Selecione a tabela. 2. No Inspetor de propriedades (Janela > Propriedades), siga destes procedimentos: Para adicionar ou excluir linhas, aumente ou diminuir o valor Linhas. Para adicionar ou excluir colunas, aumente ou diminuir o valor Colunas. Nota: O Dreamweaver no avisar se voc estiver excluindo linhas e colunas que contenham dados.

Diviso e mesclagem de clulas


Use o Inspetor de propriedades ou os comandos no submenu Modificar > Tabela para dividir ou mesclar clulas.

Para o incio

Mesclagem de duas ou mais clulas em uma tabela


1. Selecione as clulas em uma linha contgua e sob a forma de um retngulo. Na ilustrao a seguir, a seleo um retngulo de clulas. Portanto, as clulas podem ser mescladas.

Na ilustrao a seguir, a seleo no um retngulo de clulas. Portanto, as clulas no podem ser mescladas.

2. Siga um destes procedimentos: Selecione Modificar > Tabela > Mesclar clulas. No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Mesclar clulas .

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.

Diviso de uma clula


1. Clique na clula e siga um destes procedimentos: Selecione Modificar > Tabela > Dividir clula. No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Dividir clula .

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.

Aumento ou diminuio do nmero de linhas ou colunas ocupadas por uma clula


Siga um destes procedimentos: Selecione Modificar > Tabela > Aumentar extenso da linha ou Modificar > Tabela > Aumentar extenso da coluna. Selecione Modificar > Tabela > Diminuir extenso da linha ou Modificar > Tabela > Diminuir extenso da coluna.

Cpia, colagem e excluso de clulas


Voc pode copiar, colar ou excluir uma nica clula de tabela ou vrias clulas de uma s vez, preservando a formatao da clula.

Para o incio

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.

Recorte ou cpia das clulas de tabela


1. Selecione uma ou mais clulas em uma linha contgua e sob a forma de um retngulo. Na ilustrao a seguir, a seleo um retngulo de clulas. Portanto, as clulas podem ser recortadas ou copiadas.

Na ilustrao a seguir, a seleo no um retngulo. Portanto, as clulas no podem ser recortadas ou copiadas.

2. Selecione Editar > Recortar ou Editar > Copiar. Nota: Se voc selecionou uma linha ou coluna inteira e clicar em Editar > Recortar, toda a linha ou coluna ser removida da tabela (e no apenas o contedo das clulas).

Colagem das clulas de tabela


1. Selecione o local onde voc deseja colar as clulas: Para substituir as clulas existentes pelas clulas que voc est colando, selecione um conjunto de clulas existentes com o mesmo layout das clulas na rea de transferncia. (Por exemplo, se voc copiou ou recortou um bloco de clulas de 3 x 2, poder selecionar outro bloco de clulas de 3 x 2 a ser substitudo pela colagem.) Para colar uma linha completa de clulas acima de uma clula especfica, clique nessa clula. Para colar uma coluna completa de clulas esquerda de uma clula especfica, clique nessa clula. Nota: Se voc tiver menos de uma linha ou coluna completa de clulas na rea de transferncia, e clicar em uma clula e colar as clulas da rea de transferncia, a clula em que voc clicou e suas vizinhas possivelmente sero substitudas (dependendo do local dela na tabela) pelas clulas que esto sendo coladas. Para criar uma nova tabela com as clulas coladas, coloque o ponto de insero fora da tabela. 2. Selecione Editar > Colar. Se voc estiver colando linhas ou colunas inteiras em uma tabela existente, as linhas ou colunas sero adicionadas tabela. Se voc estiver colando uma clula individual, o contedo da clula selecionada ser substitudo. Se voc estiver fazendo a colagem fora de uma tabela, as linhas, colunas ou clulas sero usadas para definir uma nova tabela.

Remoo do contedo da clula mantendo as clulas intactas


1. Selecione uma ou mais clulas. Nota: Assegure que a seleo no inteiramente constituda de linhas ou colunas completas. 2. Selecione Editar > Limpar ou pressione Delete. Nota: Se apenas linhas ou colunas completas estiverem selecionadas quando voc clicar em Editar > Limpar ou pressionar Delete, as linhas ou colunas inteiras, e no apenas seu contedo, sero removidas da tabela.

Excluso de linhas ou colunas que contm clulas mescladas


1. Selecione a linha ou coluna. 2. Selecione Modificar > Tabela > Excluir linha ou Modificar > Tabela > Excluir coluna.

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

Avisos legais | Poltica de privacidade on-line

Configurar propriedades de ttulo de CSS para uma pgina inteira


Pode especificar fontes, tamanhos da fonte e cores dos ttulos da sua pgina. Por padro, o Dreamweaver cria regras de CSS para seus ttulos e aplica-os a todos os ttulos que voc usa na pgina. (As regras so incorporadas na seo ttulo da pgina.) Os ttulos esto disponveis para seleo no Inspector de propriedades de HTML. 1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto. 2. Escolha a categoria Cabealhos (CSS) e defina as opes. Fonte do cabealho Especifica a famlia de fontes padro a ser usada como cabealhos. O Dreamweaver usar a famlia de fontes especificada, a menos que outra fonte seja definida para um elemento de texto. Cabealho 1 a Cabealho 6 Especifica o tamanho e a cor da fonte a serem usados em at seis nveis de tags de cabealho.

Avisos legais | Poltica de privacidade on-line

Configurar propriedades de codificao e ttulo de uma pgina


As opes de Propriedades de codificao/ttulo de pgina permitem especificar o tipo de codificao de documento do idioma usado para criar pginas da Web, bem como especificar qual formulrio de normalizao unicode ser usado com esse tipo de codificao. 1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto. 2. Escolha a categoria Ttulo/codificao e defina as opes. Ttulo Especifica o ttulo de pgina a ser exibido na barra de ttulo da janela Documento e da maioria das janelas de navegador. Tipo de documento (DTD) Especifica uma definio de tipo de documento. 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. Codificao Especifica a codificao usada nos caracteres do documento. Se voc selecionar Unicode (UTF-8) como codificao de documento, a codificao de entidade no ser necessria, pois a codificao 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. Recarregar Converte o documento existente ou abre o documento novamente usando a nova codificao. Formulrio de normalizao unicode Ativado somente se voc selecionar UTF-8 como codificao de documento. H quatro formulrios de normalizao unicode. O mais importante deles o formulrio de normalizao C, pois o formulrio mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros trs para ser mais completa. No Unicode, alguns caracteres so visualmente similares, mas podem ser armazenados no documento de diferentes maneiras. Por exemplo, (e -umlaut) pode ser representado como um caractere nico, e com trema, ou como dois caracteres, e latino regular + trema. O caractere de combinao Unicode aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do e latino. Os dois formulrios tm como resultado a mesma tipografia visual, mas o que salvo no arquivo diferente em cada formulrio. A normalizao o processo que garante que todos os caracteres que podem ser salvos de formas diferentes sero salvos de uma mesma forma. Ou seja, todos os caracteres de um documento sero salvos como um nico e com trema ou como e + trema , e no de duas formas em um documento. Para obter mais informaes sobre a normalizao unicode e as formas especficas que podem ser usadas, consulte o site da Unicode em www.unicode.org/reports/tr15. Incluir assinatura Unicode (BOM) Inclui uma BOM (marca de ordem de bytes) no documento. Uma BOM consiste em 2 a 4 bytes no incio de um arquivo de texto que identifica um arquivo como Unicode, e se assim for, a ordem dos bytes a seguir. Como a codificao UTF-8 no tem ordem de bytes, a adio de um BOM UTF-8 opcional. Na UTF -16 e UTF -32, ela obrigatria.

Avisos legais | Poltica de privacidade on-line

Introduo codificao de documento


A codificao de documento especifica a codificao usada para os caracteres no documento. A codificao de documento especificada em uma tag meta no cabealho do documento. Ela informa ao navegador e ao Dreamweaver como o documento deve ser decodificado e quais fontes devem ser usadas para exibir o texto decodificado. Por exemplo, se voc especificar Europeu Ocidental (Latim1), esta tag meta ser inserida: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. O Dreamweaver exibe o documento usando as fontes especificadas em Preferncias de fontes na codificao Europeu Ocidental (Latim1); um navegador exibe o documento usando as fontes que o usurio especifica para essa codificao. Se voc especificar Japons (Shift JIS), esta tag meta ser inserida: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">. O Dreamweaver exibe o documento usando as fontes especificadas na codificao Japons; um navegador exibe o documento usando as fontes que o usurio especifica para as codificaes Japons. Voc pode alterar a codificao de documento de uma pgina e a codificao padro que o Dreamweaver usa para criar novos documentos, incluindo as fontes usadas para exibir cada codificao. Mais tpicos da Ajuda [imprimir]Definio de tipo e codificao de documento padro

Avisos legais | Poltica de privacidade on-line

Atualizao das folhas de estilos CSS em um site do Contribute


Os usurios do Adobe Contribute no podem fazer alteraes em uma folha de estilos CSS. Para alterar uma folha de estilos em um site do Contribute, use o Dreamweaver. 1. Edite a folha de estilos usando as ferramentas de edio de folhas de estilos do Dreamweaver. 2. Instrua os usurios do Contribute que esto trabalhando no site a publicar pginas que usam essa folha de estilos e edite novamente essas pginas para visualizar a nova folha de estilos. Veja a seguir os fatores importantes que voc deve ter em mente ao atualizar as folhas de estilos para um site do Contribute: Se voc fizer alteraes em uma folha de estilos enquanto o usurio do Contribute estiver editando uma pgina que a utilize, o usurio s ver as alteraes efetuadas na folha de estilos depois que publicar a pgina. Se voc excluir um estilo de uma folha de estilos, o nome do estilo no ser excludo das pginas que a utilizam. Como o estilo no existe mais, ele no ser exibido da maneira esperada pelo usurio do Contribute. Desse modo, se um usurio informar a voc que nada acontece quando ele aplica um determinado estilo, talvez o estilo tenha sido excludo da folha de estilos.

Avisos legais | Poltica de privacidade on-line

Usar Folhas de estilo em tempo de design


As folhas de estilos em tempo de design permitem mostrar ou ocultar o design aplicado por uma folha de estilos CSS enquanto voc trabalha em um documento do Dreamweaver. Por exemplo, voc pode usar esta opo para incluir ou excluir o efeito de uma folha de estilos apenas Macintosh ou apenas Windows enquanto voc cria uma pgina. As folhas de estilos em tempo de design se aplicam somente enquanto voc est trabalhando no documento; quando a pgina exibida em uma janela de navegador, apenas os estilos que esto anexados ou incorporados ao documento aparecem no navegador. Nota: Voc tambm pode ativar ou desativar os estilos de uma pgina inteira usando a barra de ferramentas Processamento do estilo. Para exibir a barra de ferramentas, selecione Exibir > Barras de ferramentas > Processamento do estilo. O boto Alternar exibio de estilos CSS (o boto da extrema direita) funciona independentemente dos outros botes de mdia da barra de ferramentas. Para usar uma folha de estilos em tempo de design, siga estas etapas. 1. Abra a caixa de dilogo Folhas de estilo em tempo de design seguindo um destes procedimentos: Clique com o boto direito do mouse no painel Estilos CSS e, no menu de contexto, selecione Em tempo de design. Selecione Formatar > Estilos CSS > Em tempo de design. 2. Na caixa de dilogo, defina as opes para mostrar ou ocultar uma folha de estilos selecionada: Para exibir uma folha de estilos CSS em tempo de design, clique no boto de adio (+) acima de Mostrar somente em tempo de design e, na caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja mostrar. Para ocultar uma folha de estilos CSS, clique no boto de adio (+) acima de Ocultar em tempo de design e, na caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja ocultar. Para remover uma folha de estilos na lista, clique na folha de estilos a ser removida e clique no boto de subtrao () apropriado. 3. Clique em OK para fechar a caixa de dilogo. O painel Estilos CSS atualizado com o nome da folha de estilos selecionada, juntamente com o indicador oculto ou design, para refletir o status da folha de estilos. Mais tpicos da Ajuda Viso geral da barra de ferramentas Processamento do estilo

Avisos legais | Poltica de privacidade on-line

Uso de exemplos de folhas de estilos do Dreamweaver


O Dreamweaver fornece exemplos de folhas de estilos que voc pode aplicar s pginas ou usar como pontos de partida para desenvolver seus prprios estilos. 1. Abra o painel Estilos CSS seguindo um destes procedimentos: Selecione Janela > Estilos CSS. Pressione Shift+F11. 2. No painel Estilos CSS, clique no boto Anexar folha de estilos externa. (Ele est localizado no canto inferior direito do painel.) 3. Na caixa de dilogo Anexar folha de estilos externa, clique em Exemplo de folhas de estilo. 4. Na caixa de dilogo Exemplo de folhas de estilo, selecione uma folha de estilos na caixa de listagem. Quando voc selecionar as folhas de estilos na caixa de listagem, o painel Visualizar exibir a formatao de texto e cor da folha de estilos selecionada. 5. Clique no boto Visualizar para aplicar a folha de estilos e verifique se ele aplica os estilos desejados pgina atual. Se os estilos aplicados no estiverem como voc espera, selecione outra folha de estilos na lista e clique em Visualizar ver esses estilos. 6. Por padro, o Dreamweaver salva a folha de estilos em uma pasta chamada CSS imediatamente abaixo da raiz do site definido para a pgina. Se essa pasta no existir, o Dreamweaver a criar. Voc pode salvar o arquivo em outro local clicando em Procurar e mudando de pasta. 7. Quando voc localizar uma folha de estilos cujas regras de formatao atendem aos critrios de design, clique em OK.

Avisos legais | Poltica de privacidade on-line

Uso de uma imagem de rastreamento para criar uma pgina


Voc pode inserir um arquivo de imagem que ser usado como guia na criao da pgina. A imagem aparece como uma imagem de plano de fundo, que voc pode projetar sobre enquanto expe a sua pgina. 1. Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de propriedades de texto. 2. Escolha a categoria Imagem de decalque e defina as opes. Imagem de decalque Especifica uma imagem a ser usada como guia na cpia de um design. Essa imagem serve apenas como referncia e no aparece quando o documento exibido em um navegador. Transparncia Determina a opacidade da imagem de decalque, de completamente transparente a completamente opaco.

Avisos legais | Poltica de privacidade on-line

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

Como funcionam os quadros e os conjuntos de 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/.

Decidir se os quadros devem ou no ser usados


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.

Para o incio

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/.

Conjuntos de quadros aninhados

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.

Trabalho com conjuntos de quadros na janela Documento

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.

Criar quadros e conjuntos de quadros

Para o incio

H duas maneiras de criar um conjunto de quadros no Dreamweaver: voc pode selecionar entre vrios conjuntos de quadros predefinidos ou

pode cri-lo por sua prpria conta. A escolha de um conjunto de quadros predefinido configura todos os quadros e conjuntos de quadros necessrios para criar o layout e a maneira mais fcil de criar rapidamente um layout baseado em quadro. Voc pode inserir um conjunto de quadros predefinido somente na Visualizao de design da janela Documento. Tambm possvel criar seu prprio conjunto de quadros no Dreamweaver adicionando divisores janela Documento. Antes de criar um conjunto de quadros ou trabalhar com quadros, torne as bordas do quadro visveis na Visualizao de design da janela Documento selecionando Exibir > Auxlios visuais > Bordas de quadro.

Criao de um conjunto de quadros predefinido e exibio de um documento existente em um quadro


1. Posicione o ponto de insero em um documento e siga um destes procedimentos: Escolha Inserir > HTML > Quadros e selecione um conjunto de quadros predefinido. Na categoria Layout do painel Inserir, clique na seta suspensa no boto Quadros e selecione um conjunto de quadros predefinido. Os cones de conjunto de quadros oferecem uma representao visual de cada conjunto de quadros conforme aplicados ao documento atual. A rea azul de um cone de conjunto de quadros representa o documento atual e as reas brancas representam os quadros que exibiro outros documentos. 2. Se voc tiver configurado o Dreamweaver para solicitar atributos de acessibilidade de quadro, selecione um quadro no menu pop-up, digite um nome para o quadro e clique em OK. (Para os visitantes que usam leitores de tela, o leitor de tela ler esse nome quando encontrar o quadro em uma pgina.) Nota: Se voc clicar em OK sem digitar um novo nome, o Dreamweaver atribuir ao quadro um nome que corresponde sua posio (quadro esquerdo, quadro direito etc.) no conjunto de quadros. Nota: Se voc pressionar Cancelar, o conjunto de quadros aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ele. Selecione Janela > Quadros para visualizar um diagrama dos quadros que voc est nomeando.

Criao de um conjunto de quadros predefinido vazio


1. Selecione Arquivo > Novo. 2. Na caixa de dilogo Novo documento, selecione a categoria Pgina da amostra. 3. Selecione a pasta Conjunto de quadros na coluna Pasta de amostra. 4. Selecione um conjunto de quadros na coluna Pgina de amostra e clique em Criar. 5. Se voc tiver ativado os atributos de acessibilidade de quadro em Preferncias, a caixa de dilogo Atributos de acesso a tag frame aparecer. Preencha a caixa de dilogo de cada quadro e clique em OK. Nota: Se voc pressionar Cancelar, o conjunto de quadros aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ele.

Criao de um conjunto de quadros


Selecione Modificar > Conjunto de quadros e, em seguida, selecione um item de diviso (como Dividir quadro esquerda ou Dividir quadro direita) no submenu. O Dreamweaver divide a janela em quadros. Se houver um documento aberto, ele aparecer em um dos quadros.

Diviso de um quadro em quadros menores


Para dividir o quadro onde est o ponto de insero, selecione um item de diviso no submenu Modificar > Conjunto de quadros. Para dividir um quadro ou conjunto de quadros vertical ou horizontalmente, arraste uma borda de quadro da borda para o meio da Visualizao de design. Para dividir um quadro usando uma borda de quadro que no esteja na borda da Visualizao de design, mantenha pressionada a tecla Alt (Windows) ou mantenha pressionada a tecla Option (Macintosh) enquanto arrasta uma borda de quadro. Para dividir um quadro em quatro, arraste uma borda de quadro de um dos cantos da Visualizao de design para o meio de um quadro. Para criar trs quadros, comece com dois quadros e divida um deles. No fcil mesclar dois quadros adjacentes sem editar o cdigo do conjunto de quadros. Portanto, transformar quatro quadros em trs mais difcil do que transformar dois quadros em trs.

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.

Seleo de quadros e conjuntos de quadros

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.

Seleo de um quadro ou conjunto de quadros no painel Molduras


1. Selecione Janela > Quadros. 2. No painel Molduras: Para selecionar um quadro, clique no quadro. (Um contorno de seleo aparece em torno do quadro no painel Molduras e na Visualizao de design da janela Documento). Para selecionar um conjunto de quadros, clique na borda que envolve o conjunto de quadros.

Seleo de um quadro ou conjunto de quadros na janela Documento


Para selecionar um quadro, clique com as teclas Shift e Alt pressionadas (Windows) ou com as teclas Option e Shift (Macintosh) em um quadro na Visualizao de design. Para selecionar um conjunto de quadros, clique em uma das bordas de quadro internas do conjunto de quadros na Visualizao de design. (As bordas de quadro devem estar visveis para que isso possa ser feito. Selecione Exibir > Auxlios visuais > Bordas de quadro para tornar as bordas visveis, caso elas no estejam.) Nota: geralmente mais fcil selecionar conjuntos de quadros no painel Molduras do que na janela Documento. Para obter mais informaes, consulte os tpicos anteriores.

Seleo de outro quadro ou conjunto de quadros


Para selecionar o quadro ou conjunto de quadros seguinte ou anterior no mesmo nvel hierrquico da seleo atual, pressione Alt+Seta esquerda ou Alt+Seta direita (Windows) ou Command+Seta esquerda ou Command+Seta direita (Macintosh). Usando essas teclas, voc pode percorrer os quadros e conjuntos de quadros na ordem em que esto definidos no arquivo de conjunto de quadros. Para selecionar o conjunto de quadros pai (o conjunto de quadros que contm a seleo atual), pressione Alt+Seta para cima (Windows) ou Command+Seta para cima (Macintosh). Para selecionar o primeiro quadro ou conjunto de quadros filho do conjunto de quadros selecionado (ou seja, o primeiro na ordem em que eles esto definidos no arquivo de conjunto de quadros), pressione Alt+Seta para baixo (Windows) ou Command+Seta para baixo (Macintosh).

Abertura de um documento em 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.

Salvar arquivos de quadro e 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.

Salvar um arquivo de conjunto de quadros


Selecione o conjunto de quadros no painel Molduras ou na janela Documento. Para salvar o arquivo de conjunto de quadros, selecione Arquivo > Salvar conjunto de quadros. Para salvar o arquivo de conjunto de quadros como um novo arquivo, selecione Arquivo > Salvar conjunto de quadros como. Nota: Se o arquivo de conjunto de quadros no tiver sido salvo, esses dois comandos sero equivalentes.

Salvar um documento que aparece em um quadro

Clique no quadro, selecione Arquivo > Salvar quadro ou Arquivo > Salvar quadro como.

Salvar todos os arquivos associados a um conjunto de quadros


Selecione Arquivo > Salvar todos os quadros. Esse procedimento salva todos os documentos abertos no conjunto de quadros, incluindo o arquivo de conjunto de quadros e todos os documentos com quadro. Se o arquivo de conjunto de quadros ainda no tiver sido salvo, uma borda espessa aparecer em torno do conjunto de quadros (ou o quadro no salvo) na Visualizao de design e voc poder selecionar um nome de arquivo. Nota: Se voc usou Arquivo > Abrir no quadro para abrir um documento no quadro, ao salvar o conjunto de quadros, o documento que voc abriu no quadro se tornar o documento padro a ser exibido nesse quadro. Caso no queira que o documento seja o padro, no salve o arquivo de conjunto de quadros.
Para o incio

Exibir e definir propriedades e atributos de quadro

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.

Visualizao ou definio de propriedades de quadro


1. Selecione um quadro seguindo um destes procedimentos: Mantenha pressionada a tecla Alt enquanto clica (Windows) ou mantenha pressionadas a teclas Shift e Option enquanto clica (Macintosh) em um quadro na Visualizao de design da janela Documento. Clique em um quadro no painel Molduras (Janela > Quadros). 2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso, no canto inferior direito, para exibir todas as propriedades de quadro. 3. Defina as opes do Inspetor de propriedades de quadro. Moldura O nome usado pelo atributo target de um link ou por um script para fazer referncia ao quadro. Um nome de quadro deve ser uma nica palavra. So permitidos sublinhados (_), mas no so permitidos hfens (-), pontos (.) e espaos. Um nome de quadro deve iniciar com uma letra (e no com nmeros). Os nomes de quadro diferenciam minsculas de maisculas. No use termos que so palavras reservadas em JavaScript (por exemplo, top ou navigator) como nomes de quadro. Para fazer com que um link altere o contedo de outro quadro, voc deve atribuir um nome ao quadro de destino. Para facilitar a criao de links entre quadros posteriormente, atribua nomes a cada quadro ao cri-los. Origem Especifica o documento de origem a ser exibido no quadro. Clique no cone de pasta desejado e selecione um arquivo. Rolar Especifica se as barras de rolagem aparecem no quadro. Se voc definir esta opo como Padro, um valor no ser definido para o atributo correspondente, permitindo que cada navegador use seu valor padro. A maioria dos navegadores assume Automtico como valor padro, o que significa que as barras de rolagem aparecero apenas quando no houver espao suficiente em uma janela de navegador para exibir o contedo completo do quadro atual. Sem redimensionamento Impede que os visitantes arrastem as bordas de quadro para redimensionar o quadro em um navegador. Nota: Voc sempre poder redimensionar os quadros no Dreamweaver; esta opo se aplica apenas aos visitantes que visualizam os quadros em um navegador. Bordas Mostra ou oculta as bordas do quadro atual quando ele visualizado em um navegador. A seleo da opo Bordas em um quadro substitui as configuraes de borda do conjunto de quadros. As opes de borda so Sim (mostrar bordas), No (ocultar bordas) e Padro. A maioria dos navegadores mostra as bordas, por padro, a menos que o conjunto de quadros pai esteja com as opes de borda definidas para No. Uma borda fica oculta somente quando todos os quadros que compartilham a borda esto com as opes de borda definidas para No, ou quando a propriedade de bordas do conjunto de quadros pai est definida para No e os quadros que compartilham a borda esto com as opes de borda definidas para Padro. Cor da borda Define uma cor para todas as bordas do quadro. Esta cor se aplica a todas as bordas que tocam o quadro e substitui a cor de borda especificada do conjunto de quadros. Largura da margem Define a largura em pixels das margens esquerda e direita (o espao entre as bordas de quadro e o contedo). Altura da margem Define a altura em pixels das margens superior e inferior (o espao entre as bordas de quadro e o contedo). Nota: Definir a largura e altura da margem de um quadro no o mesmo que definir margens na caixa de dilogo Modificar > Propriedades da pgina. Para alterar a cor de fundo de um quadro, defina a cor de fundo do documento no quadro, nas propriedades da pgina.

Definio dos valores de acessibilidade de um quadro

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.

Edio dos valores de acessibilidade de um quadro


1. Exiba a Visualizao de cdigo ou as visualizaes de cdigo e de design do documento, se voc estiver na Visualizao de design. 2. No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de insero em um dos quadros. O Dreamweaver reala a tag frame no cdigo. 3. Clique com o boto direito do mouse no cdigo (Windows) ou mantenha pressionada a tecla Control enquanto clica no cdigo (Macintosh) e selecione Editar tag. 4. No editor de tags, faa as alteraes e clique em OK.

Alterao da cor de fundo de um documento em um quadro


1. Coloque o ponto de insero no quadro. 2. Selecione Modificar > Propriedades da pgina. 3. Na caixa de dilogo Propriedades da pgina, clique no menu Cor do fundo e selecione uma cor.

Visualizao e definio das propriedades do conjunto de quadros

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.

Definio de um ttulo para um documento de conjunto de quadros


1. Selecione um conjunto de quadros seguindo um destes procedimentos: Clique em uma borda entre dois quadros do conjunto de quadros na Visualizao de design da janela Documento. Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros). 2. Na caixa Ttulo da barra de ferramentas Documento, digite um nome para o documento de conjunto de quadros. Quando um visitante visualiza o conjunto de quadros em um navegador, o ttulo aparece na barra de ttulo do navegador.

Visualizao ou definio das propriedades de conjunto de quadros


1. Selecione um conjunto de quadros seguindo um destes procedimentos: Clique em uma borda entre dois quadros do conjunto de quadros na Visualizao de design da janela Documento. Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros). 2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito e defina as opes de conjunto de quadros. Bordas Determina se as bordas devem aparecer em torno dos quadros quando o documento visualizado em um navegador. Para exibir bordas, selecione Sim. Para impedir que o navegador exiba as bordas, selecione No. Para que o navegador determine como as bordas sero exibidas, selecione Padro. Largura da borda Especifica uma largura para todas as bordas no conjunto de quadros. Cor da borda Define uma cor para as bordas. Use o seletor de cores para selecionar uma cor ou digite o valor hexadecimal de uma cor. Seleo de lin./col. Define os tamanhos de quadro para as linhas e colunas do conjunto de quadros selecionado. Clique em uma aba no lado esquerdo ou superior da rea Seleo de lin./col. e digite uma altura ou largura na caixa de texto Valor.

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.

Controle do contedo do quadro com links

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.

Fornecimento de contedo para navegadores sem suporte a quadros

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.

Uso de comportamentos JavaScript com 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

Avisos legais | Poltica de privacidade on-line

Uso de auxlios visuais para layout


Definio de rguas Definio de guias de layout Uso de guias com modelos Uso da grade de layout Uso de uma imagem de decalque

Definio de rguas

Para o incio

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. (no canto superior esquerdo da Visualizao de design da janela Documento)

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.

Definio de guias de layout

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.

Criao de uma guia horizontal ou vertical


1. Arraste na rgua correspondente. 2. Posicione a guia na janela Documento e libere o boto do mouse (reposicione a guia arrastando-a novamente). Nota: Por padro, as guias so registradas como medies de pixel absolutas no lado superior ou esquerdo do documento, e so exibidas em relao origem da rgua. Para registrar a guia como porcentagem, pressione a tecla Shift enquanto cria ou move a guia.

Mostrar ou ocultar guias


Selecione Exibir > Guias > Mostrar guias.

Encaixe dos elementos nas guias


Para encaixar os elementos nas guias, selecione Exibir > Guias > Encaixar nas guias. Para encaixar as guias nos elementos, selecione Exibir > Guias > Encaixe das guias nos elementos. Nota: Quando voc redimensiona elementos, como elementos com posio absoluta (elementos PA), tabelas e imagens, os elementos redimensionados se encaixam nas guias.

Bloqueio e desbloqueio de todas as guias


Selecione Exibir > Guias > Bloquear guias.

Visualizao e movimentao de uma guia para uma posio especfica


1. Mantenha o ponteiro do mouse sobre a guia para visualizar sua posio. 2. Clique duas vezes na guia. 3. Digite a nova posio na caixa de dilogo Mover guia e clique em OK.

Visualizao da distncia entre guias


Pressione Control (Windows) ou Command (Macintosh) e mantenha o ponteiro do mouse em qualquer lugar entre as duas guias. Nota: A unidade de medida a mesma utilizada nas rguas.

Emulao da dobra (rea visvel) de um navegador da Web


Selecione Exibir > Guias e, em seguida, selecione um tamanho de navegador predefinido no menu.

Remoo de uma guia


Arraste a guia para fora do documento.

Alterao das configuraes da guia


Selecione Exibir > Guias > Editar guias, defina as seguintes opes e clique em OK. Cor da guia Especifica a cor das linhas da guia. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um nmero hexadecimal na caixa de texto. Cor da distncia Especifica a cor das linhas que aparecem como indicadores de distncia quando voc mantm o ponteiro do mouse entre as guias. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um nmero hexadecimal na caixa de texto. Mostrar guias Torna as guias visveis na Visualizao de design. Encaixar nas guias Faz com que os elementos da pgina se encaixem nas guias quando voc move os elementos pela pgina. Bloquear guias Bloqueia as guias no lugar. Encaixe das guias nos elementos Encaixa as guias nos elementos na pgina enquanto elas so arrastadas. Limpar tudo Limpa todas as guias da pgina.
Para o incio

Uso de guias com modelos

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.

Uso da grade de layout

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.

Mostrar ou ocultar a grade


Selecione Exibir > Grade > Mostrar grade.

Ativao ou desativao do encaixe


Selecione Exibir > Grade > Encaixar na grade.

Alterao das configuraes da grade


1. Selecione Exibir > Grade > Configuraes da grade. 2. Defina as opes e clique em OK para aplicar as alteraes. Cor Especifica a cor das linhas da grade. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um nmero hexadecimal na caixa de texto. Mostrar grade Torna a grade visvel na Visualizao de design. Encaixar na grade Faz com que os elementos da pgina se encaixem nas linhas da grade. Espaamento Controla a distncia entre as linhas de grade. Digite um nmero e selecione Pixels, Polegadas ou Centmetros no menu. Display Especifica se as linhas de grade aparecero como linhas ou pontos. Nota: Se Mostrar grade no estiver selecionado, a grade no aparecer no documento e nenhuma alterao ficar visvel.

Uso de uma imagem de decalque

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.

Posicionamento de uma imagem de decalque na janela Documento

1. Siga um destes procedimentos: Selecione Exibir > Imagem de decalque > Carregar. Selecione Modificar > Propriedades da pgina e clique em Procurar (ao lado da caixa de texto Imagem de decalque). 2. Na caixa de dilogo Selecionar origem da imagem, selecione um arquivo de imagem e clique em OK. 3. Na caixa de dilogo Propriedades da pgina, especifique a transparncia da imagem arrastando o controle deslizante Transparncia da imagem e clique em OK. Para alternar para outra imagem de decalque ou alterar a transparncia da imagem de rastreamento atual a qualquer momento, selecione Modificar > Propriedades da pgina.

Mostrar ou ocultar a imagem de decalque


Selecione Exibir > Imagem de decalque > Mostrar.

Alterao da posio de uma imagem de decalque


Selecione Exibir > Imagem de decalque > Ajustar posio. Para especificar precisamente a posio da imagem de decalque, digite os valores de coordenada nas caixas de texto X e Y. Para mover a imagem 1 pixel por vez, use as teclas de seta. Para mover a imagem 5 pixels por vez, pressione Shift e uma tecla de seta.

Redefinio da posio da imagem de decalque


Selecione Exibir > Imagem de decalque > Redefinir posio. A imagem de decalque retorna ao canto superior esquerdo da janela Documento (0,0).

Alinhamento da imagem de decalque a um elemento selecionado


1. Selecione um elemento na janela Documento. 2. Selecione Exibir > Imagem de decalque > Alinhar com Seleo. O canto superior esquerdo da imagem de decalque alinhado ao canto superior esquerdo do elemento selecionado. Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Funcionamento dos widgets do Spry (instrues gerais)


Sobre widgets do Spry Recursos e tutoriais dos dispositivos do spry Inserir um widget do Spry Selecionar um widget do Spry Editar um widget do Spry Criar o estilo de um widget do Spry Obter mais widgets Alterar a pasta de ativos padro do Spry

Sobre widgets do Spry

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.

Recursos e tutoriais dos dispositivos do spry


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

Inserir um widget do Spry


Selecione Inserir > Spry e escolha o widget a ser inserido.

Para o incio

Ao inserir um widget, Dreamweaver voc automaticamente inclui os arquivos JavaScript e CSS necessrios do Spry em seu site quando salva a pgina. Nota: Para inserir widgets do Spry, voc tambm pode usar a categoria Spry no painel Inserir.
Para o incio

Selecionar um widget do Spry


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.

Editar um widget do Spry


Selecione o widget para edit-lo e fazer alteraes no Inspetor de propriedades (Janela > Propriedades). Para obter detalhes sobre como efetuar alteraes em determinados widgets, consulte as sees apropriadas a cada widget.

Para o incio

Criar o estilo de um widget do Spry

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.

Obter mais widgets

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.

Alterar a pasta de ativos padro do Spry

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

Avisos legais | Poltica de privacidade on-line

Trabalho com tags div


Inserir e editar tags div Blocos de layout CSS Trabalho com elementos PA

Inserir e editar tags div

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.

Insero de tags div


Voc pode usar tags div para criar blocos de layout CSS e posicion-los no documento. Isso ser til se voc tiver uma folha de estilos CSS existente com estilos de posicionamento anexados ao documento. O Dreamweaver permite que voc insira rapidamente uma tag div e aplique estilos existentes a ela. 1. Na janela Documento, coloque o ponto de insero no local em que a tag div deve aparecer. 2. Siga um destes procedimentos: Selecione Inserir > Objetos de layout > Tag div. Na categoria Layout do painel Inserir, clique no boto Inserir tag div .

3. Defina uma das seguintes opes: Inserir Permite que voc selecione o local da tag div e o nome da tag caso ela no seja nova. Classe Exibe o estilo de classe atualmente aplicado tag. Se voc anexou uma folha de estilos, as classes definidas nessa folha de estilos aparecero na lista. Use este menu pop-up para selecionar o estilo que voc deseja aplicar tag. ID Permite que voc altere o nome usado para identificar a tag div. Se voc anexou uma folha de estilos, as IDs definidas nessa folha de estilos aparecero na lista. As IDs dos blocos que j esto no documento no so listadas. Nota: O Dreamweaver informar se voc inserir a mesma ID de outra tag no documento. Nova regra CSS Abre a caixa de dilogo Nova regra CSS. 4. Clique em OK. A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o ponteiro sobre a borda da caixa, o Dreamweaver o reala. Se a tag div tiver uma posio absoluta, ela se tornar um elemento PA. (Voc pode editar tags div que no possuem posio absoluta.)

Edio de tags div


Depois que voc inserir uma tag div, poder manipul-la ou adicionar contedo a ela. Nota: As tags div com posio absoluta se tornam elementos PA. Quando voc atribuir bordas a tags div ou quando a opo Contornos do layout CSS estiver selecionada, elas tero bordas visveis. (A opo Contornos do layout CSS selecionada por padro no menu Exibir > Auxlios visuais.) Quando voc move o ponteiro sobre uma tag div, o Dreamweaver reala a tag. possvel alterar a cor do realce ou desativar o realce. Ao selecionar uma tag div, voc poder visualizar e editar regras para ela no painel Estilos CSS. Tambm possvel adicionar contedo tag div colocando o ponto de insero dentro da tag div e adicionando o contedo exatamente como faria ao adicionar contedo a uma pgina. Visualizao e edio das regras aplicadas uma tag div 1. Siga um destes procedimentos para selecionar a tag div: Clique na borda da tag div.

Procure o realce para ver a borda. Clique dentro da tag div e pressione Control+A (Windows) ou Command+A (Macintosh) duas vezes. Clique dentro da tag div e selecione a tag div no seletor de tags na parte inferior da janela Documento. 2. Selecione Janela > Estilos CSS para abrir o painel Estilos CSS caso ele ainda no esteja aberto. As regras aplicadas tag div aparecem no painel. 3. Faa as edies conforme necessrio. Posicionamento do ponto de insero em uma tag div para adicionar contedo Clique em qualquer lugar nas bordas da tag. Alterao do texto do alocador de espao em uma tag div Selecione o texto e digite sobre ele ou pressione Delete. Nota: Voc pode adicionar contedo tag div exatamente como faria ao adicionar um contedo a uma pgina.

Alterar a cor de realce das tags div


Quando voc move o ponteiro sobre a borda de uma tag div na Visualizao de design, o Dreamweaver reala as bordas da tag. Voc pode ativar ou desativar o realce quando necessrio, ou alterar a cor do realce na caixa de dilogo Preferncias. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Selecione Realce na lista de categorias esquerda. 3. Faa uma das seguintes alteraes e clique em OK: Para alterar a cor de realce das tags div, clique na caixa de cor Passar o mouse, selecione a cor de realce usando o seletor de cores (ou digite o valor hexadecimal da cor de realce na caixa de texto). Para ativar ou desativar o realce das tags div, marque ou desmarque a caixa de seleo Mostrar de Passar o mouse. Nota: Essas opes afetam todos os objetos (por exemplo, as tabelas), que o Dreamweaver reala quando voc move o ponteiro sobre elas.

Blocos de layout CSS


Visualizao dos blocos de layout CSS

Para o incio

Voc pode visualizar blocos de layout CSS enquanto trabalha na Visualizao de design. Um bloco de layout CSS um elemento de pgina HTML que voc pode posicionar em qualquer lugar da pgina. Mais especificamente, um bloco de layout CSS uma tag div sem display:inline ou qualquer outro elemento de pgina que inclui as declaraes CSS display:block, position:absolute ou position:relative. Veja a seguir alguns exemplos de elementos considerados blocos de layout CSS no Dreamweaver: Uma tag div Uma imagem com uma posio absoluta ou relativa atribuda a ela Uma tag a com o estilo display:block atribudo a ela Um pargrafo com uma posio absoluta ou relativa atribuda a ele Nota: Para fins de processamento visual, os blocos de layout CSS no incluem elementos inline (ou seja, elementos cujo cdigo esteja em uma linha de texto) ou elementos de bloco simples como pargrafos. O Dreamweaver fornece diversos auxlios visuais para visualizao de blocos de layout CSS. Por exemplo, voc pode ativar contornos, fundos e o modelo de caixa dos blocos de layout CSS ao criar o design. Tambm possvel visualizar dicas de ferramentas que exibem as propriedades de um bloco de layout CSS quando voc flutua o ponteiro do mouse sobre o bloco de layout. A lista de auxlios de bloco de layout CSS a seguir descreve o que o Dreamweaver processa como visvel para cada: Contornos do layout CSS Exibe os contornos de todos os blocos de layout CSS na pgina. Fundos do layout CSS Exibe as cores de fundo temporariamente atribudas de blocos de layout CSS individuais e oculta qualquer cor ou imagem de fundo que normalmente aparece na pgina. Sempre que voc ativar o auxlio visual para visualizar fundos de bloco de layout CSS, o Dreamweaver atribui automaticamente a cada bloco de layout CSS uma cor de fundo distinta. (O Dreamweaver seleciona as cores usando um processo algortmico; no h nenhuma maneira de voc mesmo atribuir as cores.) As cores atribudas so visualmente distintas e foram projetadas para ajudar voc a fazer a distino entre os blocos de layout CSS. Modelo de caixa de layout CSS Exibe o modelo de caixa (ou seja, preenchimento e margens) do bloco de layout CSS selecionado.

Visualizao dos blocos de layout CSS


Voc pode ativar ou desativar os auxlios visuais do bloco de layout CSS quando necessrio.

Visualizao dos contornos de bloco de layout CSS Selecione Exibir > Auxlios visuais > Contornos do layout CSS. Visualizao dos fundos de bloco de layout CSS Selecione Exibir > Auxlios visuais > Fundos do layout CSS. Visualizao dos modelos de caixa de bloco de layout CSS Selecione Exibir > Auxlios visuais > Modelo de caixa de layout CSS. Voc tambm pode acessar as opes de auxlio visual de bloco de layout CSS clicando no boto Auxlios visuais na barra de ferramentas Documento.

Uso dos auxlios visuais com elementos de bloco de layout No CSS


Voc pode usar uma folha de estilos em tempo de design para exibir os fundos, as bordas ou a caixa de modelo dos elementos que normalmente no so considerados blocos de layout CSS. Para fazer isso, primeiro voc deve criar uma folha de estilos em tempo de design que designe o atributo display:block ao elemento de pgina apropriado. 1. Crie uma folha de estilos CSS externa selecionando Arquivo > Novo, selecionando a pgina Bsico na coluna Categoria, selecionando CSS na coluna de pgina Bsico e clicando em Criar. 2. Na nova folha de estilos, crie regras que designem o atributo display:block aos elementos de pgina a ser exibido como blocos de layout CSS. Por exemplo, se voc quisesse exibir uma cor de fundo para pargrafos e itens de lista, poderia criar uma folha de estilos com as seguintes regras: p{ display:block; } li{ display:block; } 3. Salve o arquivo. 4. Na Visualizao de design, abra a pgina qual voc deseja anexar os novos estilos. 5. Selecione Formatar > Estilos CSS > Em tempo de design. 6. Na caixa de dilogo Folhas de estilo em tempo de design, clique no boto de adio (+) acima da caixa de texto Mostrar somente em tempo de design, selecione a folha de estilos recm-criada e clique em OK. 7. Clique em OK para fechar a caixa de dilogo Folhas de estilo em tempo de design. A folha de estilos anexada ao documento. Se voc criou uma folha de estilos usando o exemplo anterior, todos os pargrafos e itens de lista sero formatados com o atributo display:block, permitindo que voc ative ou desative os auxlios visuais de bloco de layout CSS para pargrafos e itens de lista.

Trabalho com elementos PA


Sobre os elementos PA do Dreamweaver

Para o incio

Um elemento PA (elemento com posio absoluta) um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. Os elementos PA podem conter texto, imagens ou qualquer outro contedo inserido no corpo de um documento HTML. Com o Dreamweaver, voc pode usar elementos PA ao criar o layout da pgina. Voc pode dispor os elementos PA um em frente ao outro ou um atrs do outro, ocultar alguns elementos PA e exibir outros, e mover os elementos PA pela tela. possvel inserir uma imagem de fundo em um elemento PA e inserir um segundo elemento PA contendo texto com fundo transparente em frente a ele. Geralmente, os elementos PA so tags div com posio absoluta. (Esses so os tipos de elementos PA que o Dreamweaver insere por padro.) Mas lembre-se que voc pode classificar qualquer elemento HTML (por exemplo, uma imagem) como um elemento PA atribuindo uma posio absoluta a ele. Todos os elementos PA (e no apenas as tags div com posio absoluta) aparecem no painel Elementos PA.

Cdigo HTML para elementos Div PA


O Dreamweaver cria elementos PA usando a tag div. Quando voc desenha um elemento PA usando a ferramenta Desenhar Div PA, o Dreamweaver insere uma tag div no documento e atribui a ela um valor de ID (por padro, apDiv1 para a primeira div desenhada, apDiv2 para a segunda e assim sucessivamente). Posteriormente, voc poder renomear a Div PA para qualquer nome usando o painel Elementos PA ou o Inspetor de propriedades. O Dreamweaver tambm usa a CSS incorporada no cabealho do documento para posicionar a Div PA e atribuir a ela suas dimenses exatas. Este um exemplo de cdigo HTML para uma Div PA:

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

Inserir uma div PA


O Dreamweaver permite que voc crie e posicione facilmente Divs PA na pgina. Tambm possvel criar Divs PA aninhadas. Quando voc insere uma Div PA, o Dreamweaver exibe um contorno da Div PA na Visualizao de design, por padro, e reala o bloco quando voc move o ponteiro sobre ela. Para desativar o auxlio visual que mostra os contornos da Div PA (ou de qualquer elemento PA), desative Contornos do elemento PA e Contornos do layout CSS no menu Exibir > Auxlios visuais. Voc tambm pode ativar fundos e o modelo de caixa dos elementos PA como um auxlio visual enquanto cria a Div PA. Aps criar uma Div PA, adicione o contedo a ela colocando o ponto de insero na Div PA e adicionando o contedo como adicionaria um contedo a uma pgina. Desenho de uma nica Div PA ou de vrias Divs PA consecutivamente 1. Na categoria Layout do painel Inserir, clique no boto Desenhar Div PA .

2. Na Visualizao de design da janela Documento, siga um destes procedimentos: Arraste para desenhar uma Div PA. Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto arrasta para desenhar vrias Divs PA consecutivamente. Voc pode desenhar quantas Divs PA desejar, contanto que no solte a tecla Control ou Command. Insero de uma Div PA em um determinado lugar do documento Coloque o ponto de insero na janela Documento e selecione Inserir > Objetos de layout > Div PA. Nota: Esse procedimento colocar a tag da Div PA no lugar da janela Documento que voc clicou. Desse modo, o processamento visual da Div PA pode afetar outros elementos de pgina (como o texto) que a envolve. Posicionamento do ponto de insero em uma Div PA Clique em qualquer lugar das bordas da Div PA. As bordas da Div PA so realadas e a ala de seleo aparece, mas a prpria Div PA no selecionada. Mostrar bordas da Div PA Selecione Exibir > Auxlios visuais e selecione Contornos da Div PA ou Contornos do layout CSS. Nota: A seleo simultnea das duas opes surte o mesmo efeito Ocultar as bordas da Div PA Selecione Exibir > Auxlios visuais e cancele a seleo de Contornos da Div PA ou Contornos do layout CSS.

Trabalhar com Divs PA aninhadas


Uma Div PA aninhada uma Div PA cuja cdigo est contido nas tags de outra Div PA. Por exemplo, o cdigo a seguir mostra duas Divs PA que no esto aninhadas e duas Divs PA aninhadas:

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

Visualizao ou definio das preferncias de elemento PA


Use a categoria Elementos PA na caixa de dilogo Preferncias para especificar as configuraes padro dos novos elementos PA criados. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Selecione Elementos PA na lista Categoria esquerda, especifique uma das preferncias a seguir e clique em OK. Visibilidade Determina se os elementos PA ficaro visveis por padro. As opes so default, inherit, visible e hidden. Largura e Altura Especifique uma largura e altura padro (em pixels) para os elementos PA que voc cria usando Inserir > Objetos de layout > Div PA. Cor de fundo Especifica uma cor de fundo padro. Selecione uma cor no seletor de cores. Imagem de fundo Especifica uma imagem de fundo padro. Clique em Procurar para localizar o arquivo de imagem no computador. Aninhamento: Aninhar quando criado em uma div PA Especifica se uma Div PA comeando em um ponto dentro dos limites de uma Div PA existente deve ser uma Div PA aninhada. Mantenha pressionada a tecla Alt (Windows) ou a tecla Option (Macintosh) para alterar temporariamente esta configurao enquanto desenha uma Div PA.

Visualizao ou definio das propriedades de um elemento 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.

3. Defina uma das seguintes opes: Elemento CSS-P Especifica uma ID para o elemento PA selecionado. A ID identifica o elemento PA no painel Elementos PA e no cdigo JavaScript. Use apenas caracteres alfanumricos padro; no use caracteres especiais como espaos, hfens, barras ou pontos. Cada elemento PA deve ter sua prpria ID exclusiva. Nota: O Inspetor de propriedades de CSS-P apresenta as mesmas opes para elementos com posio relativa. E e T (esquerda e topo) Especifica a posio do canto superior esquerdo do elemento PA em relao ao canto superior esquerdo da pgina, ou do elemento PA pai caso ele esteja aninhado. L e A Define a largura e altura do elemento PA. Nota: Se o contedo do elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible.) A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros. Z -Index Determina o ndice z ou a ordem de empilhamento do elemento PA. Em um navegador, os elementos PA numerados superiores aparecem em frente aos elementos PA numerados inferiores. Os valores podem ser positivos ou negativos. mais fcil alterar a ordem de empilhamento dos elementos PA usando o painel Elementos PA do que digitar valores de ndice z especficos. Vis Especifica se o elemento PA estar inicialmente visvel ou no. Selecione uma das seguintes opes: Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos navegadores assume Inherit como valor padro. Inherit usa a propriedade de visibilidade do pai do elemento PA. Visible exibe o contedo do elemento PA, independentemente do valor do pai. Hidden oculta o contedo do elemento PA, independentemente do valor do pai. Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo do elemento PA. Imagem de fundo Especifica uma imagem de fundo para o elemento PA. Clique no cone de pasta desejado e selecione um arquivo de imagem. Cor de fundo Especifica uma cor de fundo para o elemento PA. Deixe esta opo em branco para especificar um fundo transparente. Classe Especifica a classe CSS usada para criar o estilo do elemento PA. Estouro Determina como os elementos PA aparecem em um navegador quando o contedo ultrapassa o tamanho especificado do elemento PA. Visible indica que o contedo extra aparecer no elemento PA; efetivamente, o elemento PA alongado para acomod-lo. Hidden especifica que o contedo extra no ser exibido no navegador. Scroll especifica que o navegador deve adicionar barras de rolagem ao elemento quer elas sejam necessrias ou no. Auto faz com que o navegador exiba barras de rolagem para o elemento PA somente quando necessrio (ou seja, quando o contedo do elemento PA ultrapassar seus limites.) Nota: A opo estouro tem suporte instvel entre os navegadores. Corte Define a rea visvel de um elemento PA. Especifica as coordenadas esquerda, superior, direita e inferior para definir um retngulo no espao de coordenada do elemento PA (contando a partir do canto superior esquerdo do elemento PA). O elemento PA recortado para que apenas o retngulo especificado fique visvel. Por exemplo, para tornar o contedo de um elemento PA invisvel, a no ser por um retngulo visvel de 50 pixels de largura e 75 pixels de altura no canto superior esquerdo do elemento PA, defina E para 0, T para 0, D para 50 e B para 75. Nota: Embora a CSS especifique uma semntica diferente para clip, o Dreamweaver interpreta clip como a maioria dos navegadores.

4. Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Visualizao ou definio das propriedades de vrios elementos PA


Quando voc seleciona dois ou mais elementos PA, o Inspetor de propriedades exibe as propriedades de texto e um subconjunto das propriedades do elemento PA completo, permitindo que voc modifique vrios elementos PA de uma s vez. Seleo de vrios elementos PA Mantenha pressionada a tecla Shift enquanto seleciona elementos PA. Visualizao e definio das propriedades de vrios elementos PA 1. Selecione vrios elementos 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.

3. Defina uma das propriedades a seguir de vrios elementos PA: E e T (esquerda e topo) Especifica a posio dos cantos superiores esquerdos do elemento PA em relao ao canto superior esquerdo da pgina, ou do elemento PA pai caso ele esteja aninhado. L e A Define a largura e altura dos elementos PA. Nota: Se o contedo de qualquer elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible.) A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros. Vis Especifica se os elementos PA estaro inicialmente visveis ou no. Selecione uma das seguintes opes: Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos navegadores assume Inherit como valor padro. Inherit usa a propriedade de visibilidade do pai dos elementos PA. Visible exibe o contedo dos elementos PA, independentemente do valor do pai. Hidden oculta o contedo do elemento PA, independentemente do valor do pai. Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo do elemento PA. Tag Especifica a tag HTML usada para definir os elementos PA. Imagem de fundo Especifica uma imagem de fundo para os elementos PA. Clique no cone de pasta desejado e selecione um arquivo de imagem. Cor de fundo Especifica uma cor de fundo para os elementos PA. Deixe esta opo em branco para especificar um fundo transparente. 4. Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Viso geral do painel Elementos PA


Use o painel Elementos PA (Janela > Elementos PA) para gerenciar os elementos PA no documento. Use o painel Elementos PA para evitar sobreposies, alterar a visibilidade dos elementos PA, aninhar ou empilhar elementos PA e selecionar um ou mais elementos PA. Nota: Um elemento PA do Dreamweaver um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. O painel Elementos PA no exibe elementos com posio relativa. Os elementos PA so exibidos como uma lista de nomes, na ordem do ndice z; por padro, o primeiro elemento PA criado (com um ndice z 1) aparece na parte inferior da lista, enquanto o elemento PA criado por ltimo aparece na parte superior. No entanto, voc pode alterar o ndice z de um elemento PA alterando seu lugar na ordem de empilhamento. Por exemplo, se voc criou oito elementos PA e deseja mover o quarto elemento para o topo da lista, atribua a ele um ndice z superior aos outros.

Seleo de elementos PA
Voc pode selecionar um ou mais elementos PA para manipul-los ou alterar suas propriedades.

Seleo de um elemento PA no painel Elementos PA No painel Elementos PA (Janela > Elementos PA), clique no nome do elemento PA. Seleo de um elemento PA na janela Documento Siga um destes procedimentos: Clique na ala de seleo de um elemento PA. Se a ala de seleo no estiver visvel, clique em qualquer lugar dentro do elemento PA para torn-la visvel. Clique na borda de um elemento PA. Mantenha pressionadas as teclas Control e Shift (Windows) ou mantenha pressionadas as teclas Command e Shift (Macintosh) enquanto clica dentro de um elemento PA. Clique dentro de um elemento PA e pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar o contedo do elemento PA. Pressione Control+A ou Command+A novamente para selecionar o elemento PA. Clique dentro de um elemento PA e selecione sua tag no seletor de tags. Seleo de vrios elementos PA Siga um destes procedimentos: No painel Elementos PA (Janela > Elementos PA), mantenha pressionada a tecla Shift enquanto clica em dois ou mais nomes de elemento PA. Na janela Documento, mantenha pressionada a tecla Shift enquanto clica dentro ou na borda de dois ou mais elementos PA.

Alterao da ordem de empilhamento dos elementos PA


Use o Inspetor de propriedades ou o painel Elementos PA para alterar a ordem de empilhamento dos elementos PA. O elemento PA no topo da lista do painel Elementos PA est na parte superior da ordem de empilhamento e aparece na frente dos outros elementos PA. No cdigo HTML, a ordem de empilhamento, ou o ndice z, dos elementos PA determina a ordem em que eles so desenhados em um navegador. Quanto maior o ndice z de um elemento PA, mais alto estar o elemento PA na ordem de empilhamento. (Por exemplo, um elemento com ndice z de 4 aparecer acima de um elemento com ndice z de 3; 1 sempre o nmero mais baixo na ordem de empilhamento.) Voc pode alterar o ndice z de cada elemento PA usando o painel Elementos PA ou o Inspetor de propriedades. Alterao da ordem de empilhamento dos elementos PA usando o painel Elementos PA 1. Selecione Janela > Elementos PA para abrir o painel Elementos PA. 2. Clique duas vezes no nmero de ndice z ao lado do elemento PA cujo ndice z voc deseja alterar. 3. Altere o nmero e pressione Return/Enter. Digite um nmero maior para mover o elemento PA para a parte superior na ordem de empilhamento. Digite um nmero menor para mover o elemento PA para a parte inferior na ordem de empilhamento. Alterao da ordem de empilhamento dos elementos PA usando o Inspetor de propriedades 1. Selecione Janela > Elementos PA para abrir o painel Elementos PA e verificar a ordem de empilhamento atual. 2. No painel de Elementos PA ou na Janela Documento, selecione o elemento PA cujo ndice z voc deseja alterar. 3. No Inspetor de propriedades (Janela > Propriedades), digite um nmero na caixa de texto ndice Z. Digite um nmero maior para mover o elemento PA para a parte superior na ordem de empilhamento. Digite um nmero menor para mover o elemento PA para a parte inferior na ordem de empilhamento.

Mostrar e ocultar elementos PA


Enquanto trabalha no documento, voc pode mostrar e ocultar manualmente os elementos PA, usando o painel Elementos PA, para ver como a pgina aparecer em diferentes condies. Nota: O elemento PA atualmente selecionado sempre fica visvel e aparece na frente de outros elementos PA enquanto est selecionado. Alterao da visibilidade do elemento PA 1. Selecione Janela > Elementos PA para abrir o painel Elementos PA. 2. Clique na coluna de cone de olho de um elemento PA para alterar sua visibilidade. Um olho aberto significa que o elemento PA est visvel. Um olho fechado significa que o elemento PA no est visvel. Se no houver um cone de olho, geralmente o elemento PA herda a visibilidade do seu pai. (Quando os elementos PA no esto aninhados, o pai o corpo do documento, que est sempre visvel.)

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).

Converso de elementos PA em tabelas


Em vez de usar tabelas para criar seu layout, alguns designers da Web preferem trabalhar com elementos PA. O Dreamweaver permite que voc crie um layout usando elementos PA e (se desejar) os converta em tabelas. Por exemplo, talvez voc precise converter os elementos PA em tabelas caso seja necessrio oferecer suporte a navegadores anteriores verso 4.0. No entanto, a converso de elementos PA em tabelas no recomendvel porque pode resultar em tabelas com um nmero maior de clulas vazias, sem mencionar a inchao do cdigo (bloated). Se voc precisar de um layout de pgina que use tabelas, recomendvel cri-lo usando as ferramentas padro de layout de tabela disponveis no Dreamweaver. possvel converter e reconverter tabelas e elementos PA para ajustar o layout e otimizar o design da pgina. (No entanto, quando voc converte novamente uma tabela em elementos PA, o Dreamweaver converte a tabela novamente em Divs PA, independentemente do tipo de elemento PA que voc possa ter na pgina antes da converso em tabelas.) No possvel converter uma tabela ou elemento PA em uma pgina. Voc deve converter elementos PA em tabelas, e tabelas em Divs PA. Nota: Voc no pode converter elementos PA em tabelas ou tabelas em Divs PA em um documento modelo ou em um documento ao qual um modelo tenha sido aplicado. Em vez disso, crie o layout em um documento no modelo e converta-o antes de salv-lo como modelo.

Converso entre elementos PA e tabelas


Voc pode criar o layout usando elementos PA e convert-los em tabelas para que o layout possa ser visualizado nos navegadores mais antigos. Antes de converter em tabelas, verifique se os elementos PA no se sobrepem. Alm disso, certifique-se de estar no modo Padro (Exibir > Modo Tabela > Modo padro). Converso de elementos PA em uma tabela 1. Selecione Modificar > Converter > Divs PA em tabela. 2. Selecione uma das opes a seguir e clique em OK: Mais preciso Cria uma clula para cada elemento PA, alm das clulas adicionais necessrias para preservar o espao entre os elementos PA. Menor: reduzir clulas vazias Especifica que as bordas dos elementos PA devem ser alinhadas caso estejam posicionadas no nmero especificado de pixels. Se voc selecionar esta opo, a tabela resultante ter menos linhas e coluna vazias, mas poder no corresponder precisamente ao layout. Usar GIFs transparentes Preenche a ltima linha da tabela com GIFs transparentes. Isso garante que a tabela ser exibida com as mesmas larguras de coluna em todos os navegadores. Quando esta opo for ativada, voc no poder editar a tabela resultante arrastando suas colunas. Quando esta opo for desativada, a tabela resultante no conter GIFs transparentes, mas as larguras das colunas podero variar de um navegador para outro. Centralizar na pgina Centraliza a tabela resultante na pgina. Se esta opo for desativada, a tabela iniciar na borda esquerda da pgina. Converso de tabelas em Divs PA 1. Selecione Modificar > Converter > Tabelas em Divs PA. 2. Selecione uma das opes a seguir e clique em OK: Impedir sobreposio de elemento AP Restringe as posies dos elementos PA quando eles forem criados, movidos e redimensionados, a fim de que no se sobreponham. Mostrar painel de elementos PA Exibe o painel de elementos PA. Mostrar grade e Encaixar na grade Permite o uso de uma grade para ajudar a posicionar elementos PA. As tabelas so convertidas em Divs PA. As clulas vazias no so convertidas em elementos PA, a menos que tenham cores de fundo. Nota: Os elementos de pgina que estavam fora das tabelas tambm so colocados em Divs PA.

Impedir sobreposio de elemento PA


Como as clulas de tabela no podem se sobrepor, o Dreamweaver no pode criar uma tabela a partir de elementos PA sobrepostos. Se voc pretende converter os elementos PA de um documento em tabelas, use a opo Evitar sobreposies para restringir a movimentao e o posicionamento do elemento PA, a fim de que eles no se sobreponham. Quando esta opo estiver ativada, um elemento PA no poder ser criado em frente a, movido ou redimensionado sobre ou aninhado dentro de um elemento PA existente. Se voc ativar esta opo aps criar elementos PA sobrepostos, arraste cada elemento PA sobreposto para afast-lo de outros elementos PA. O Dreamweaver no corrige automaticamente elementos PA sobrepostos existentes na pgina quando voc ativa Impedir sobreposio de elemento AP. Quando esta opo e encaixe forem ativados, um elemento PA no se encaixar na grade caso dois elementos PA se sobreponham. Em vez disso, ele se encaixar na borda do elemento PA mais prximo. Nota: Determinadas aes permitem a sobreposio de elementos PA at mesmo quando a opo Evitar sobreposies est ativada. Se voc

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

Avisos legais | Poltica de privacidade on-line

Trabalho com o contedo de cabealho das pginas


Visualizar e editar o contedo do cabealho Definio das propriedades meta da pgina Definio do ttulo da pgina Especificao das palavras-chave da pgina Especificao das descries da pgina Definio das propriedades de atualizao da pgina Definio das propriedades de URL base da pgina Definio das propriedades de vinculao da pgina As pginas contm elementos que descrevem as informaes na pgina, que usado pelos navegadores de pesquisa. Voc pode definir as propriedades dos elementos head a fim de determinar como as pginas so identificadas.

Visualizar e editar o contedo do cabealho

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.

Visualizao dos elementos na seo de cabealho de um documento


Selecione Exibir > Contedo do cabealho. Para cada elemento do contedo head, exibido um marcador na parte inferior da janela Documento, na Visualizao de design. Nota: Se a janela Documento estiver definida para mostrar somente a Visualizao de cdigo, Exibir > Contedo do cabealho estar esmaecido.

Insero de um elemento na seo de cabealho de um documento


1. Selecione um item no submenu Inserir > HTML > Tags de cabealho. 2. Digite opes para o elemento na caixa de dilogo exibida ou no Inspetor de propriedades.

Edio de um elemento na seo de cabealho de um documento


1. Selecione Exibir > Contedo do cabealho. 2. Clique em um dos cones na seo head para selecion-lo. 3. Defina ou modifique as propriedades do elemento no Inspetor de propriedades.

Definio das propriedades meta da pgina

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.)

Adio de uma meta tag


1. Selecione Inserir > HTML > Tags de cabealho > Meta. 2. Especifique as propriedades na caixa de dilogo exibida.

Edio de uma meta tag existente


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Meta exibido na parte superior da janela Documento. 3. Especifique as propriedades no Inspetor de propriedades.

Propriedades da meta tag


Defina as propriedades da meta tag da seguinte maneira: Atributo Especifica se a tag meta contm informaes descritivas sobre a pgina (name) ou informaes de cabealho HTTP (http-equiv). Valor Especifica o tipo de informaes que voc est fornecendo nesta tag. Alguns valores, como description, keywords e refresh, j esto bem definidos (e tm seus prprios Inspetores de propriedades no Dreamweaver), mas voc pode especificar praticamente qualquer valor (por

exemplo, creationdate, documentID ou level). Contedo Especifica as informaes reais. Por exemplo, se voc especificou level em Valor, poder especificar beginner, intermediate ou advanced em Contedo.
Para o incio

Definio do ttulo da pgina

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.

Especificao do ttulo na janela Documento


Digite o ttulo na caixa de texto Ttulo da barra de ferramentas da janela Documento.

Especificao do ttulo no contedo de cabealho


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Title exibido na parte superior da janela Documento. 3. Especifique o ttulo da pgina no Inspetor de propriedades.

Especificao das palavras-chave da pgina

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.

Adio de uma meta tag Keywords


1. Selecione Inserir > HTML > Tags de cabealho > Palavras-chave. 2. Especifique as palavras-chave, separadas por vrgulas, na caixa de dilogo exibida.

Edio de uma meta tag Keywords


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Keywords exibido na parte superior da janela Documento. 3. No Inspetor de propriedades, visualize, modifique ou exclua palavras-chave. Voc tambm pode adicionar palavras-chave separadas por vrgula.

Especificao das descries da pgina

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).

Adio de uma meta tag Description


1. Selecione Inserir > HTML > Tags de cabealho > Descrio. 2. Digite o texto descritivo na caixa de dilogo exibida.

Edio de uma meta tag Description


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Description exibido na parte superior da janela Documento. 3. No Inspetor de propriedades, visualize, modifique ou exclua o texto descritivo.

Definio das propriedades de atualizao da pgina

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.

Adio de uma meta tag Refresh


1. Selecione Inserir > HTML > Tags de cabealho > Atualizar. 2. Defina as propriedades da meta tag Refresh na caixa de dilogo exibida.

Edio de uma meta tag Refresh


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Refresh exibido na parte superior da janela Documento. 3. No Inspetor de propriedades, defina as propriedades da meta tag Refresh.

Definio das propriedades da meta tag Refresh


Defina as propriedades da meta tag Refresh da seguinte maneira: Atraso O tempo em segundos que deve ser aguardado at que o navegador atualize a pgina. Para que o navegador atualize a pgina imediatamente aps o trmino do carregamento, digite 0 nesta caixa. URL ou Ao Especifica se o navegador deve ir para um URL diferente ou atualizar a pgina atual, aps o atraso especificado. Para abrir outro URL (em vez de atualizar a pgina atual), clique no boto Procurar, v at o item desejado e selecione a pgina a ser carregada.
Para o incio

Definio das propriedades de URL base da pgina

Use o elemento Base para definir um URL base qual todos os caminhos relativos de documento da pgina so considerados relativos.

Adio de uma meta tag Base


1. Selecione Inserir > HTML > Tags de cabealho > Base. 2. Especifique as propriedades da meta tag Base na caixa de dilogo exibida.

Edio de uma meta tag Base


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Base exibido na parte superior da janela Documento. 3. No Inspetor de propriedades, especifique as propriedades da meta tag Base.

Especificao das propriedades da meta tag Base


Especifique as propriedades da meta tag Base da seguinte maneira: Href O URL base. Clique no boto Procurar para navegar at o item desejado e selecione um arquivo, ou digite um caminho na caixa. Alvo Especifica o quadro ou a janela em que todos os documentos vinculados sero abertos. Selecione um dos quadros do conjunto de quadros atual ou um dos seguintes nomes reservados: _blank carrega o documento vinculado em uma nova janela do navegador no nomeada. _parent carrega o documento vinculado no conjunto de quadros pai ou na janela do quadro que contm o link. Se o quadro contendo o link no estiver aninhado, esse ser o equivalente a _top; o documento vinculado ser carregado na janela de navegador em tamanho integral. _self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no necessrio especific-lo. _top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros.

Definio das propriedades de vinculao da pgina


Use a tag link para definir um relacionamento entre o documento atual e outro arquivo. Nota: A tag link da seo head no o mesmo que um link HTML entre documentos na seo body.

Para o incio

Adio de uma meta tag Link


1. Selecione Inserir > HTML > Tags de cabealho > Link. 2. Especifique as propriedades da meta tag Link na caixa de dilogo exibida.

Edio de uma meta tag Link


1. Selecione Exibir > Contedo do cabealho. 2. Selecione o marcador Link exibido na parte superior da janela Documento. 3. No Inspetor de propriedades, especifique as propriedades da meta tag Link.

Especificao das propriedades da meta tag Link

Defina as propriedades da meta tag Link da seguinte maneira: Href O URL do arquivo para o qual voc est definindo um relacionamento. Clique no boto Procurar para navegar at o item desejado e selecione um arquivo, ou digite um caminho na caixa. Observe que, no sentido comum do HTML, esse atributo no indica um arquivo ao qual voc est se vinculando. Os relacionamentos especificados em um elemento Link so mais complexos. ID Especifica um identificador exclusivo para o link. Ttulo Descreve o relacionamento. Este atributo tem relevncia especial para as folhas de estilos vinculadas. Para obter mais informaes, consulte a seo External Style Sheets na especificao HTML 4.0 no site da World Wide Web Consortium em www.w3.org/TR/REChtml40/present/styles.html#style-external. Rel Especifica o relacionamento entre o documento atual e o documento na caixa Href. Os valores possveis incluem Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help e Bookmark. Para especificar mais de um relacionamento, separe os valores com um espao. Rev Especifica um relacionamento reverso (o oposto de Rel) entre o documento atual e o documento na caixa Href. Os valores possveis so os mesmos de Rel.

Avisos legais | Poltica de privacidade on-line

Trabalho com o widget Acordeo do Spry


Sobre o widget Acordeo Inserir e editar o widget Acordeo Personalizar o widget Acordeo

Sobre o widget Acordeo

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:

A. Aba do painel Acordeo B. Contedo do painel Acordeo C. Painel Acordeo (aberto) O HTML padro do widget Acordeo composto de uma tag div externa que contm todos os painis, uma tag div para cada painel, um div de cabealho e um div de contedo dentro da tag de cada painel. Um widget Acordeo pode conter inmeros painis individuais. O HTML do widget Acordeo tambm inclui tags de script no cabealho do documento e aps o markup HTML do acordeo. Para obter uma explicao abrangente sobre como o widget Acordeo funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryaccordion_br. Para ter acesso ao tutorial sobre como trabalhar com widgets Acordeo consulte www.adobe.com/go/vid0167_br.

Inserir e editar o widget Acordeo


Inserir o widget Acordeo
Selecione Inserir > Spry > Acordeo do Spry. Nota: Para inserir um widget Acordeo, voc tambm pode usar a categoria Spry no painel Inserir.

Para o incio

Adicionar um painel a um widget Acordeo


1. Selecione um widget Acordeo na janela Documento. 2. Clique no boto de adio (+) de Painis no Inspetor de propriedades (Janela > Propriedades). 3. (Opcional) Altere o nome do painel selecionando e alterando o texto desejado do painel na Visualizao de design.

Excluir painel de um widget Acordeo


1. Selecione um widget Acordeo na janela Documento. 2. No menu Painis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excludo e clique no boto de subtrao (-).

Abrir painel para edio

Siga um destes procedimentos: Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualizao de design e clique no cone em forma de olho que aparece direita da aba. Selecione um widget Acordeo na janela Documento e clique no nome do painel para edit-lo no menu Painis do Inspetor de propriedades (Janela > Propriedades).

Alterar a ordem dos painis


1. Selecione um widget Acordeo na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel do Acordeo que voc deseja mover. 3. Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.

Personalizar o widget Acordeo

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.

Criar o estilo do texto do widget Acordeo


Para criar o estilo do texto de um widget Acordeo, configure as propriedades do recipiente inteiro do widget Acordeo ou configure as propriedades dos componentes do widget individualmente. Para alterar o estilo do texto de um widget Acordeo, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar os valores e as propriedades de estilo do seu prprio texto: Texto a ser alterado Regra de CSS relevante Exemplo de propriedades e valores a adicionar fonte: Arial; font-size:medium;

Texto no acordeo inteiro (inclui aba e painel de contedo) Texto somente nas abas do painel do acordeo Texto somente nos painis de contedo do acordeo

.Accordion or .AccordionPanel

.AccordionPanelTab

fonte: Arial; font-size:medium;

.AccordionPanelContent

fonte: Arial; font-size:medium;

Alterar as cores de fundo do widget Acordeo


Para alterar as cores de fundo de diversas partes de um widget Acordeo, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicione ou altere os valores e as propriedades da cor de fundo: Parte do widget a alterar Regra de CSS relevante Exemplo de propriedade e valor a adicionar ou alterar cor de fundo: #CCCCCC; (este o valor padro.) cor de fundo: #CCCCCC;

Cor de fundo das abas do painel do acordeo Cor de fundo dos painis de contedo do acordeo Cor de fundo do painel do acordeo aberto

.AccordionPanelTab

.AccordionPanelContent

.AccordionPanelOpen .AccordionPanelTab

cor de fundo: #EEEEEE; (este o valor padro.)

Cor de fundo das abas do painel focalizado Cor de fundo da aba do painel aberto focalizado

.AccordionPanelTabHover

cor: #555555; (este o valor padro.)

.AccordionPanelOpen .AccordionPanelTabHover

cor: #555555; (este o valor padro.)

Restringir a largura de um acordeo


Por padro, o widget Acordeo se expande at ocupar o espao disponvel. Entretanto, voc pode restringir a largura de um widget configurando uma propriedade de largura para o recipiente do acordeo. 1. Abra o arquivo SpryCcordion.css e localize a regra de CSS .Accordion. Essa a regra que define propriedades para o principal elemento recipiente do widget Acordeo. Voc tambm pode localizar a regra selecionando o widget Acordeo e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel est definido no modo Atual. 2. Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;. Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Trabalho com o widget Painel flexvel do Spry


Sobre o widget Painel flexvel Inserir e editar o widget Painel flexvel Personalizar o widget Painel flexvel

Sobre o widget Painel flexvel

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.

Inserir e editar o widget Painel flexvel


Inserir o widget Painel flexvel
Selecione Inserir > Spry > Painel flexvel do Spry. Nota: Para inserir um widget Painel flexvel, voc tambm pode usar a categoria Spry no painel Inserir.

Para o incio

Abrir ou fechar o Painel flexvel na Visualizao de design


Siga um destes procedimentos: Mova o ponteiro do mouse sobre a aba do painel na Visualizao de design e clique no cone em forma de olho que aparece direita da aba. Selecione um widget Painel flexvel na janela Documento e selecione Aberto ou Fechado no menu pop-up Exibir, no Inspetor de propriedades (Janela > Propriedades).

Definir o estado padro de um widget Painel flexvel


Voc pode definir o estado padro (aberto ou fechado) do widget Painel flexvel quando a pgina da Web carregada no navegador. 1. Selecione um widget Painel flexvel na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione Aberto ou Fechado no menu pop-up Estado padro.

Ativar ou desativar a animao do widget Painel flexvel


Por padro, quando voc ativa animao para um widget Painel flexvel, o painel abre e fecha lenta e gradualmente quando o visitante do site clica na aba do painel. Se voc desativa a animao, o painel flexvel abre e fecha abruptamente. 1. Selecione um widget Painel flexvel na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque Ativar animao.

Personalizar o widget Painel flexvel

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.

Criar estilo de texto do widget Painel flexvel


Para criar o estilo do texto de um widget Painel flexvel, configure as propriedades do recipiente inteiro do widget Painel flexvel ou configure as propriedades dos componentes do widget individualmente. Para alterar o formato do texto de um widget Painel flexvel, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar os seus prprios valores e propriedades de estilo do texto: Estilo a alterar Regra de CSS relevante Exemplo de propriedades e valores a adicionar ou alterar fonte: Arial; font-size:medium;

Texto no painel flexvel inteiro

.CollapsiblePanel

Texto na aba do painel apenas

.CollapsiblePanelTab

fonte: bold 0.7em sans-serif; (este o valor padro.) fonte: Arial; font-size:medium;

Texto no painel de contedo apenas

.CollapsiblePanelContent

Alterar as cores de fundo do widget Painel flexvel


Para alterar as cores de fundo de diversas partes de um widget Painel flexvel, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferncia: Cor a alterar Regra de CSS relevante Exemplo de propriedade e valor a adicionar ou alterar cor de fundo: #DDD; (este o valor padro.) cor de fundo: #DDD;

Cor de fundo da aba do painel

.CollapsiblePanelTab

Cor de fundo do painel de contedo

.CollapsiblePanelContent

Cor de fundo da aba quando o painel est aberto

.CollapsiblePanelOpen .CollapsiblePanelTab

cor de fundo: #EEE; (este o valor padro.)

Cor de fundo da aba do painel aberta quando o ponteiro do mouse passa por cima

.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover

cor de fundo: #CCC; (este o valor padro.)

Limitar a largura de um painel flexvel


Por padro, o widget Painel flexvel se expande at ocupar o espao disponvel. Entretanto, voc pode restringir a largura de um widget Painel flexvel configurando uma propriedade de largura para o recipiente do painel flexvel. 1. Localize a regra CSS do arquivo .CollapsiblePanel abrindo o arquivo SpryCollapsible Panel.css. Essa regra define propriedades para o principal elemento recipiente do widget Painel flexvel. Voc tambm pode localizar a regra selecionando o widget Painel flexvel e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel est definido no modo Atual. 2. Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;. Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Trabalho com o widget Painis com aba do Spry


Sobre o widget Painis com aba Inserir e editar o widget Painis com aba Personalizar o widget Painis com aba

Sobre o widget Painis com aba

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:

A. Aba B. Contedo C. Widget Painis com aba D. Painel com aba O cdigo HTML do widget Painis com aba consiste em uma tag div externa que contm todos os painis, uma lista das abas, um div para conter os painis de contedo e um div para cada painel de contedo. O HTML do widget Painis com aba tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget Painel com aba. Para obter uma explicao abrangente sobre como o widget Painis com aba funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_br.

Inserir e editar o widget Painis com aba


Inserir o widget Painis com aba
Selecione Inserir > Spry > Painis com aba do Spry. Nota: Para inserir um widget Painis com aba, voc tambm pode usar a categoria Spry no painel Inserir.

Para o incio

Adicionar um painel em um widget Painis com aba


1. Selecione um widget Painis com aba na janela Documento. 2. Clique no boto de adio de Painis no Inspetor de propriedades (Janela > Propriedades). 3. (Opcional) Altere o nome da aba selecionando o texto da aba na Visualizao de design.

Excluir um painel de um widget Painis com aba


1. Selecione um widget Painis com aba na janela Documento. 2. No menu Painis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excludo e clique no boto de subtrao.

Abrir painel para edio


Siga um destes procedimentos: Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualizao de design e clique no cone em forma de olho que aparece direita da aba. Selecione um widget Painis com aba na janela Documento e clique no nome do painel para edit-lo no menu Painis do Inspetor de propriedades (Janela > Propriedades).

Alterar a ordem dos painis


1. Selecione um widget Painis com aba na janela Documento. 2. No menu Painis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel que voc deseja mover. 3. Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.

Definir o painel aberto padro


Voc pode definir qual painel do widget Painis com aba abre por padro quando a pgina aberta no navegador. 1. Selecione um widget Painis com aba na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o painel que voc deseja abrir por padro no menu pop-up Painel padro.

Personalizar o widget Painis com aba

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.

Criar o estilo do texto do widget Painis com aba


Para criar o estilo do texto de um widget Painis com aba, configure as propriedades do recipiente inteiro do widget Painis com aba ou configure as propriedades dos componentes do widget individualmente. Para alterar o estilo do texto de um widget Painis com aba, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar seus prprios valores e propriedades de estilo do texto: Texto a ser alterado Regra de CSS relevante Exemplo de propriedades e valores a adicionar fonte: Arial; font-size:medium;

Texto no widget inteiro

.TabbedPanels

Texto nas abas do painel apenas

.TabbedPanelsTabGroup or .TabbedPanelsTab

fonte: Arial; font-size:medium;

Texto nos painis de contedo apenas

.TabbedPanelsContentGroup or .TabbedPanelsContent

fonte: Arial; font-size:medium;

Alterar as cores de fundo do widget Painis com aba


Para alterar as cores de fundo de diversas partes de um widget Painis com aba, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferncia: Cor a alterar Regra de CSS relevante Exemplo de propriedade e valor a adicionar ou alterar cor de fundo: #DDD; (este o valor padro.)

Cor de fundo das abas do painel

.TabbedPanelsTabGroup or .TabbedPanelsTab

Cor de fundo dos painis de contedo

.Tabbed PanelsContentGroup or .TabbedPanelsContent

cor de fundo: #EEE; (este o valor padro.)

Cor de fundo da aba selecionada

cor de fundo: #EEE; (este o valor

.TabbedPanelsTabSelected Cor de fundo das abas do painel quando o ponteiro do mouse passa por cima

padro.) cor de fundo: #CCC; (este o valor padro.)

.TabbedPanelsTabHover

Restringir a largura dos painis com aba


Por padro, o widget Painis com aba se expande at ocupar o espao disponvel. Entretanto, voc pode restringir a largura de um widget Painis com aba configurando uma propriedade de largura para o recipiente do acordeo. 1. Abra o arquivo SpryTabbedPanels.css para localizar a regra de CSS .TabbedPanels. Essa regra define propriedades para o principal elemento recipiente do widget Painis com aba. Voc tambm pode localizar a regra selecionando o widget Painis com aba e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel est definido no modo Atual. 2. Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;. Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Trabalho com o widget Dica de ferramentas do Spry


Sobre o widget Dica de ferramenta Inserir o widget Dica de ferramenta Editar opes do widget Dica de ferramenta

Sobre o widget Dica de ferramenta

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.

Inserir o widget Dica de ferramenta


Selecione Inserir > Spry > Dica de ferramenta do Spry. Nota: Para inserir um widget Dica de ferramenta, voc tambm pode usar a categoria Spry no painel Inserir.

Para o incio

Essa ao insere um novo widget Dica de ferramenta com um recipiente para o contedo da dica de ferramenta e uma sentena de alocador de espao que age como o acionador da dica de ferramenta. Voc tambm pode selecionar um elemento existente na pgina (por exemplo, uma imagem) e, em seguida, inserir a dica de ferramenta. Ao fazer isso, o elemento selecionado age como o acionador da nova dica de ferramenta. necessrio selecionar um elemento de tag completa (por exemplo, uma tag img ou p) para que o Dreamweaver possa atribuir uma ID a esse elemento caso ainda no exista uma.

Editar opes do widget Dica de ferramenta


possvel definir opes que permitem personalizar o comportamento do widget Dica de ferramenta. 1. Passe o mouse sobre ou coloque o ponto de insero no contedo da dica de ferramenta na pgina.

Para o incio

2. Clique na aba azul do widget Dica de ferramenta para selecion-lo. 3. Defina as opes como desejar no Inspetor de propriedades do widget Dica de ferramenta. Nome O nome do recipiente da dica de ferramenta. O recipiente armazena o contedo da dica de ferramenta. Por padro, o Dreamweaver usa uma tag div como o recipiente. Acionador O elemento da pgina que ativa a dica de ferramenta. Por padro, o Dreamweaver insere uma sentena de alocador de espao, com as tags span antes e depois, como o acionador, mas possvel selecionar qualquer elemento da pgina que tenha uma ID exclusiva. Seguir o mouse Quando est selecionada, esta opo faz com que a dica de ferramenta siga o mouse enquanto o usurio est passando pelo elemento acionador. Ocultar ao retirar o mouse Quando est selecionada, esta opo mantm a dica de ferramenta aberta enquanto o mouse est passando por ela (mesmo que o mouse saia do elemento acionador). Manter a dica de ferramenta aberta ser til se houver links ou outros elementos interativos na dica de ferramenta. Se essa opo no for selecionada, o elemento de dica de ferramenta ser fechado quando o mouse sair da rea de acionamento. Deslocamento horizontal Calcula a posio horizontal da dica de ferramenta em relao ao mouse. O valor de deslocamento calculado em pixels e o padro equivale a 20 pixels. Deslocamento vertical Calcula a posio vertical da dica de ferramenta em relao ao mouse. O valor de deslocamento calculado em pixels e o padro equivale a 20 pixels. Mostrar atraso O atraso em milissegundos para que a dica de ferramenta aparea depois de ter entrado no elemento acionador. O valor padro 0. Ocultar atraso O atraso em milissegundos para que a dica de ferramenta desaparea depois de ter sado do elemento acionador. O valor padro 0. Efeito O tipo de efeito que deve ser usado quando a dica de ferramenta for exibida. Veneziana simula uma janela veneziana que se move para cima e para baixo para mostrar ou ocultar a dica de ferramenta. Atenuar ativa e desativa a dica de ferramenta. O valor padro Nenhum.

Avisos legais | Poltica de privacidade on-line

Trabalho com o widget Caixa de seleo de validao do Spry


Sobre o widget Caixa de seleo de validao Inserir e editar o widget Caixa de seleo de validao Personalizar mensagens de erro do widget Caixa de seleo de validao

Sobre o widget Caixa de seleo de validao

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.

Inserir e editar o widget Caixa de seleo de validao


Inserir o widget Caixa de seleo de validao
1. Selecione Inserir > Spry > Caixa de seleo de validao do Spry. 2. Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK. Nota: Para inserir um widget Caixa de seleo de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Para o incio

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio. 1. Selecione um widget Caixa de seleo de validao na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve ocorrer. Voc pode selecionar todas as opes ou somente Enviar. Desfocar Valida sempre que o usurio clica fora da caixa de seleo. Alterar Valida quando o usurio faz selees. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Especificar uma faixa mnima e mxima de selees


Por padro, um widget Caixa de seleo de validao definido como obrigatrio. No entanto, se voc inserir inmeras caixas de seleo na pgina, poder especificar uma faixa mnima e mxima de selees. Por exemplo, se voc tem seis caixas de seleo dentro da tag <span> para um nico widget Caixa de seleo de validao e deseja garantir que o usurio selecione ao menos trs, voc pode definir essa preferncia para o widget inteiro. 1. Selecione um widget Caixa de seleo de validao na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione a opo Forar faixa. 3. Insira um nmero mnimo ou mximo (ou ambos) de caixas de seleo que o usurio deve marcar.

Exibir estados do widget na Visualizao de design


1. Selecione um widget Caixa de seleo de validao na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up Estados de visualizao. Por exemplo, selecione Inicial para ver o widget em seu estado inicial.

Personalizar mensagens de erro do widget Caixa de seleo de validao

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:

Texto no qual aplicar o estilo Texto da mensagem de erro

Regra de CSS relevante

Propriedades relevantes a alterar cor: #CC3333; borda: 1px solid #CC3333;

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

Mais tpicos da Ajuda

Avisos legais | Poltica de privacidade on-line

Trabalho com o widget Confirmao de validao do Spry


Sobre o widget Confirmao de validao Inserir e editar o widget Confirmao de validao Personalizar o widget Confirmao

Sobre o widget Confirmao de validao

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:

A. Um campo de senha ou o widget Validao de senha do Spry B. Widget Confirmao O widget Confirmao de validao inclui inmeros estados (por exemplo, vlido, invlido, obrigatrio e assim por diante). Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationConfirm.css), de acordo com os resultados de validao desejados. Um widget Confirmao de validao pode validar em vrios pontos; por exemplo, quando o visitante do site clica fora do widget, digita ou tenta enviar o formulrio. Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio. Estado de foco Quando o usurio coloca o ponto de insero no widget. Estado vlido Quando o usurio insere informaes corretamente e o formulrio pode ser enviado. Estado invlido Quando o usurio insere um texto que no corresponde ao inserido em um campo de texto anterior, no widget Campo de texto de validao ou no widget Senha de validao. Estado obrigatrio Quando o usurio no insere texto obrigatrio no campo de texto. Para obter uma explicao abrangente sobre como os widgets Confirmao de validao funcionam, bem como informaes adicionais sobre a estrutura do widget, consulte www.adobe.com/go/learn_dw_spryconfirm_br.

Inserir e editar o widget Confirmao de validao


Inserir o widget Confirmao de validao
1. Selecione Inserir > Spry > Confirmao de validao do Spry. 2. Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK. Nota: Para inserir um widget Confirmao de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Para o incio

Alterar o status obrigatrio de um widget Confirmao de validao


Por padro, todos os widgets Confirmao de validao inseridos com o Dreamweaver requerem entrada do usurio quando publicados em uma pgina da Web. Contudo, voc pode determinar que o preenchimento dos campos de texto de confirmao pelo usurio seja opcional. 1. Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opo Obrigatrio de acordo com a sua preferncia.

Especificar o campo de texto a ser validado


1. Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul.

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.

Exibir estados do widget na Visualizao de design


1. Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulrio. 1. Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2. No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve ocorrer. Voc pode selecionar todas as opes ou somente Enviar. Desfocar Valida sempre que o usurio clica fora do campo de texto de confirmao. Alterar Valida quando o usurio altera o texto do campo de texto de confirmao. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Personalizar o widget Confirmao

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.

Estilo do widget Confirmao de validao (instrues gerais)


1. Abra o arquivo SpryValidationConfirm.css. 2. Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado obrigatrio do widget Confirmao, edite a regra input.confirmRequiredState no arquivo SpryValidationConfirm.css. 3. Faa alteraes no CSS e salve o arquivo. O arquivo SpryValidationConfirm.css contm comentrios extensos, a explicao do cdigo e a finalidade de determinadas regras. Para obter mais informaes, consulte os comentrios no arquivo.

Estilo do texto das mensagens de erro do widget Confirmao de validao


Por padro, as mensagens de erro do widget Confirmao de validao aparecem em vermelho com uma borda slida de 1 pixel em torno do texto. Para alterar o estilo do texto de um widget Confirmao de validao, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de texto. Texto a ser alterado Texto da mensagem de erro Regra de CSS relevante .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg Propriedades relevantes a alterar cor: #CC3333; borda: 1px solid #CC3333;

Alterar as cores de fundo do widget Confirmao de validao


Para alterar as cores de fundo do widget Confirmao de validao em vrios estados, use esta tabela para localizar a regra de CSS apropriada e alterar os valores da cor de fundo padro.

Cor a alterar Cor de fundo do widget em estado vlido

Regra de CSS relevante .confirmValidState input, input.confirmValidState

Propriedade relevante a alterar cor de fundo: #B8F5B1;

Cor de fundo do widget em estado invlido

input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input

cor de fundo: #FF9F9F;

Cor de fundo quando o widget est em foco

.confirmFocusState input, input.confirmFocusState

cor de fundo: #FFFFCC;

Mais tpicos da Ajuda Amostras do widget Confirmao de validao

Avisos legais | Poltica de privacidade on-line

Contedo de pgina e ativos


Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Arabic and Hebrew text


Bi-directional text flow Tag editor Text direction and Unicode-bidi in CSS Rules Table properties Div properties New and improved features for working in Arabic and Hebrew are available in the Middle East and North African edition of this software.

Bi-directional text flow

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.

Direction attribute in CSS When you enter Arabic, Hebrew, or mixed text, Dreamweaver recognizes the languages as Right-to-left (RTL) and displays it text appropriately.

Tag editor
You can apply direction and language settings using the Tag Editor.

To the top

Tag Editor

Text direction and Unicode-bidi in CSS Rules


You can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicode-bidi options.

To the top

Language options in CSS Rules

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.

To the top

Div direction

Twitter and Facebook posts are not covered under the terms of Creative Commons. Legal Notices | Online Privacy Policy

Trabalho com o Barwidget do menu Spry


Sobre o widget Barra de menus Insero e edio do widget Barra de menus Personalizao do widget Barra de menus

Sobre o widget Barra de menus

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:

Widget Barra de menus (consiste de tags <ul>, <li> e <a>) A. O item de menu tem o submenu B. O item de submenu tem o submenu O HTML do widget Barra de menus composto de uma tag ul externa que contm uma tag li para cada item de menu de nvel superior. Os itens de menu de nvel superior (tags li), por sua vez, contm tags ul e li que definem submenus para cada item; os submenus podem, da mesma forma, conter submenus. Os menus de nvel superior e os submenus podem conter quantos itens de submenu voc desejar. Para obter uma explicao abrangente sobre como o widget Barra de menus funciona, incluindo uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprymenubar. Para ter acesso ao tutorial sobre como criar Barras de menus do Spry, consulte www.adobe.com/go/vid0168.

Inserir e editar o widget Barra de menus


Inserir o widget Barra de menus
1. Selecione Inserir > Spry > Barra de menus do Spry. 2. Selecione Horizontal ou Vertical e clique em OK. Nota: Para inserir um widget Barra de menus, voc tambm pode usar a categoria Spry do painel Inserir.

Para o incio

Nota: O widget Barra de menus do Spry usa camadas de DHTML para exibir sees de HTML sobre as outras sees. Se a pgina tiver contedo criado com o Adobe Flash, isso poder causar problemas, porque os arquivos SWF sempre so exibidos sobre todas as outras camadas de DHTML, de forma que o arquivo SWF seja exibido sobre os submenus. A alternativa para essa situao alterar os parmetros do arquivo SWF e usar wmode="transparent". Voc pode fazer isso facilmente selecionando o arquivo SWF na janela Documento e definindo a opo wmode como transparente no Inspetor de propriedades. Para obter mais informaes, consulte www.adobe.com/go/15523.

Adio ou excluso de menus e submenus


Use o Inspetor de propriedades (Janela > Propriedades) para adicionar ou excluir itens no widget Barra de menus. Adicionar um item de menu principal 1. Selecione um widget Barra de menus na janela Documento. 2. No Inspetor de propriedades, clique no boto de adio acima da primeira coluna. 3. (Opcional) Renomeie o novo item de menu alterando o texto padro na janela Documento ou na caixa Texto do Inspetor de propriedades. Adicionar um item de submenu 1. Selecione um widget Barra de menus na janela Documento.

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.

Alterar a ordem dos itens de menu


1. Selecione um widget Barra de menus na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu que voc deseja reordenar. 3. Clique nas setas para cima e para baixo para mover o item de menu para cima ou para baixo.

Alterar o texto de um item de menu


1. Selecione um widget Barra de menus na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu cujo texto voc deseja alterar. 3. Efetue suas alteraes na caixa Texto.

Vincular um item de menu


1. Selecione um widget Barra de menus na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu ao qual voc deseja aplicar um link. 3. Digite o link na caixa de texto Link ou clique no cone de pasta para ir at um arquivo.

Criar uma dica de ferramenta para um item de menu


1. Selecione um widget Barra de menus na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu para o qual voc deseja criar uma dica de ferramenta. 3. Digite o texto da dica de ferramenta na caixa de texto Ttulo.

Designar um atributo de destino para um item de menu


O atributo de destino especifica onde uma pgina vinculada deve ser aberta. Por exemplo, voc pode designar um atributo de destino a um item de menu para que a pgina vinculada abra em uma nova janela do navegador quando o visitante do site clicar no link. Se voc utiliza conjuntos de molduras, tambm pode especificar o nome de uma moldura onde deseja abrir a pgina vinculada. 1. Selecione um widget Barra de menus na janela Documento. 2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu para o qual voc deseja designar um atributo de destino. 3. Insira um dos quatro atributos na caixa Destino: _blank Abre a pgina vinculada em uma nova janela do navegador. _self Carrega a pgina vinculada na mesma janela do navegador. Esta a opo padro. Se a pgina estiver em uma moldura ou em um conjunto de molduras, ela ser carregada dentro dessa moldura. _parent Carrega o documento vinculado no conjunto de molduras pai imediato do documento. _top Carrega a pgina vinculada na janela na extremidade superior de um conjunto de molduras.

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).

Alterar a orientao de um widget Barra de menus


Voc pode alterar a orientao de um widget Barra de menus de horizontal para vertical, e vice-versa. Tudo o que voc tem a fazer alterar o cdigo HTML da barra de menus e verificar se o arquivo CSS correto est na pasta SpryAssets. O exemplo a seguir altera um widget Barra de menus horizontal em vertical. 1. No Dreamweaver, abra a pgina que contm um widget Barra de menus. 2. Insira um widget Barra de menus vertical (Inserir > Spry > Barra de menus do Spry) e salve a pgina. Essa etapa garante que o arquivo CSS correto de uma barra de menus vertical seja includo no site. Nota: Se o site j tem um widget Barra de menus vertical em alguma parte, no ser preciso inserir um novo. Basta anexar o arquivo SpryMenuBarVertical.css pgina, em vez de clicar no boto Anexar folha de estilos no painel Estilos CSS (Janelas > Estilos CSS). 3. Exclua a Barra de menus vertical. 4. Na Visualizao de cdigo (Exibir > Cdigo), localize a classe MenuBarHorizontal e altere-a para MenuBarVertical. A classe MenuBarHorizontal definida na tag ul do recipiente da barra de menus (<ul id="MenuBar1" classe="MenuBarHorizontal">). 5. Depois do cdigo, localize o construtor de barra de menus: var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 6. Remova a opo imgDown de pr-carregamento (e vrgula) do construtor: var MenuBar1 = novo Spry. Widget. MenuBar ("MenuBar1", {imgRight: "SpryAssets/SpryMenuBarRightHover.gif"}); Nota : se voc converter uma barra de menu vertical para uma horizontal, adicione a opo pr-carreagadaimgDown e vrgula. var MenuBar1 = novo Spry. Widget. MenuBar ("MenuBar1", {imgRight: "SpryAssets/SpryMenuBarRightHover.gif"}); 7. (Opcional) Se sua pgina no tiver outros widgets Barra de menus horizontal, exclua o link do arquivo MenuBarHorizontal.css anterior no cabealho do documento. 8. Salve a pgina.

Personalizao do widget Barra de menus

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.

Alterar o estilo de texto de um item de menu


O CSS anexado tag <a> contm as informaes para o estilo do texto. Existem vrios valores de classe de estilo de texto importantes anexados tag <a> que pertencem a diferentes estados de menu. Para alterar o estilo de texto de um item de menu, use a seguinte tabela para localizar a regra de CSS apropriada e alterar o valor padro:

Estilo a alterar

Regra de CSS para barra de menus vertical ou horizontal ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover

Propriedades relevantes e valores padro cor: #333; text-decoration: none; cor: #FFF;

Texto padro Cor do texto quando o ponteiro do mouse passa por cima Cor do texto em foco

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus

cor: #FFF;

Cor do item da Barra de menus quando o ponteiro do mouse passa por cima

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

cor: #FFF;

Cor do item de submenu quando o ponteiro do mouse passa por cima

cor: #FFF;

Alterar a cor de fundo de um item de menu


O CSS anexado tag <a> contm as informaes para a cor de fundo de um item de menu. Existem vrios valores de classe de cor de fundo importantes anexados tag <a> que pertencem a diferentes estados de menu. Para alterar a cor de fundo de um item de menu, use a seguinte tabela para localizar a regra de CSS apropriada e alterar o valor padro:

Cor a alterar

Regra de CSS para barra de menus vertical ou horizontal ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover

Propriedades relevantes e valores padro cor de fundo: #EEE; cor de fundo: #33C;

Fundo padro Cor de fundo quando o ponteiro do mouse passa por cima Cor de fundo quando em foco Cor do item da Barra de menus quando o ponteiro do mouse passa por cima

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

cor de fundo: #33C; cor de fundo: #33C;

Cor do item de submenu quando o ponteiro do mouse passa por cima

cor de fundo: #33C;

Alterar a dimenso dos itens de menu


Para alterar a dimenso dos itens de menu, mude as propriedades de largura das tags li e ul do item de menu. 1. Localize a regra ul.MenuBarVertical li ou ul.MenuBarHorizontal li. 2. Altere a propriedade de largura para uma largura desejada (ou altere a propriedade para auto para remover uma largura fixa e adicione a propriedade e o valor espao em branco: sem quebra automtica de linha; regra). 3. Localize a regra ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 4. Altere a propriedade de largura para uma largura desejada (ou altere a propriedade para auto para remover uma largura fixa). 5. Localize a regra ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul li. 6. Adicione as seguintes propriedades regra: flutuao: nenhum; e cor do fundo: transparente; . 7. Exclua o valor e a propriedade largura: 8.2em; .

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

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Definio de propriedades do texto no Inspetor de propriedades


Sobre a formatao de texto (CSS versus HTML) Edio de regras CSS no Inspetor de propriedades Definio da formatao HTML no Inspetor de propriedades Renomeao de uma classe do Inspetor de propriedades de HTML Voc pode usar o Inspetor de propriedades de texto para aplicar a formatao HTML ou a formatao da folha de estilos em cascata (CSS). Quando voc aplica formatao HTML, o Dreamweaver adiciona propriedades ao cdigo HTML no corpo da pgina. Quando voc aplica formatao CSS, o Dreamweaver escreve propriedades no cabealho do documento ou em uma folha de estilos distinta. Nota: Quando voc criar estilos inline CSS, o Dreamweaver adicionar o cdigo de atributo de estilo diretamente ao corpo da pgina.

Sobre a formatao de texto (CSS versus HTML)

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.

Editar regras CSS no Inspetor de propriedades


1. Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto, e clique no boto CSS.

Para o incio

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.

Fonte Altera a fonte da regra-alvo. Tamanho Define o tamanho de fonte da regra-alvo. Cor do texto Define a cor selecionada como a cor da fonte na regra-alvo. Selecione uma cor aceita pela Web clicando na caixa de cores ou digite um valor hexadecimal (por exemplo, #FF0000) no campo de texto adjacente. Negrito Adiciona a propriedade de negrito regra-alvo. Itlico Adiciona a propriedade de itlico regra-alvo. Alinhamento esquerda, Centralizao e Alinhamento direita Adiciona as respectivas propriedades de alinhamento regra-alvo. nota : as propriedades Fonte, Tamanho, Cor de texto, Negrito, Itlico e Alinhamento exibem sempre as propriedades da regra que se aplica seleo atual na janela Documento. Quando voc alterar alguma dessas propriedades, afetar a regra-alvo. Para assistir a um tutorial em vdeo sobre como trabalhar com o Inspetor de propriedades CSS, consulte www.adobe.com/go/lrvid4041_dw.

Definio da formatao HTML no Inspetor de propriedades


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:

Para o incio

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.

Renomear classe no Inspetor de propriedades HTML

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

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos Legais | Poltica de Privacidade On-line

Criao e abertura de documentos


A interface de usurio da Dreamweaver CC e posterior foi simplificada. Como resultado, voc talvez no consiga localizar algumas das opes descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informaes, consulte este artigo.

Sobre a criao de documentos do Dreamweaver Tipos de arquivo do Dreamweaver Criao de um layout que usa uma pgina em branco Criao de um modelo em branco Criao de uma pgina baseada em um modelo existente Criao de uma pgina baseada em um arquivo de amostra do Dreamweaver Criao de outros tipos de pgina Como salvar e reverter documentos Definio de tipo e codificao de documento padro Converso de HTML5 para um tipo de documento mais antigo Definio de extenso de arquivo padro de novos documentos em HTML Abertura e edio de documentos existentes Abertura de arquivos relacionados Abertura de arquivos relacionados dinamicamente Limpeza de arquivos em HTML do Microsoft Word

Sobre a criao de documentos do Dreamweaver

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.

Tipos de arquivo do Dreamweaver

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

Criao de um layout que usa uma pgina em branco

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.

Criao de um modelo em branco

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.

Criao de uma pgina baseada em um modelo existente

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.

Criao de um documento com base em um modelo


1. Selecione Arquivo > Novo. 2. Na caixa de dilogo Novo documento, selecione a categoria Pgina de modelo. 3. Na coluna Site, selecione o site do Dreamweaver que contm o modelo que voc deseja usar e, em seguida, selecione um modelo da lista direita. 4. Desmarque Atualizar a pgina quando o modelo for alterado caso voc queira atualizar a pgina sempre que fizer alteraes no modelo no qual a pgina se baseie. 5. Clique em Preferncias se voc deseja configurar as preferncias padro do documento, como um tipo de documento, codificao e uma extenso de arquivo. 6. Clique em Obter mais contedo se deseja abrir o Dreamweaver Exchange onde voc poder baixar mais contedo de design de pgina. 7. Clique em Criar e salve o documento (Arquivo > Salvar).

Criao de um documento de um modelo no painel Ativos


1. Abra o painel Ativos (Janela > Ativos), caso ele ainda no esteja aberto.

2. No painel Ativos, clique no cone Modelos

esquerda para exibir a lista dos modelos no site atual.

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.

Criao de uma pgina baseada em um arquivo de amostra do Dreamweaver

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

Criao de outros tipos de pgina

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).

Como salvar e reverter documentos


Voc pode salvar um documento usando seu nome e local atual, ou salvar uma cpia de um documento usando outro nome e local.

Para o incio

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.

Salvar todos os documentos abertos


1. Selecione Arquivo > Salvar tudo. 2. Se houver documentos no salvos abertos, a caixa de dilogo Salvar como exibida para cada documento no salvo. Na caixa de dilogo exibida, v at a pasta em que deseja salvar o arquivo. 3. Na caixa Nome do arquivo, digite um nome para o arquivo e clique em Salvar.

Reverso para a ltima verso salva de um documento


1. Selecione Arquivo > Reverter. Uma caixa de dilogo pergunta se voc deseja descartar as alteraes e reverter para a verso salva anteriormente. 2. Clique em Sim para reverter para a verso anterior. Clique em No para manter as alteraes. Nota: se voc salvar um documento e, em seguida, sair do Dreamweaver, no ser possvel reverter para a verso anterior do documento quando reiniciar o Dreamweaver.

Definio de tipo e codificao de documento padro


Voc pode definir o tipo de documento usado como documento padro de um site.

Para o incio

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

documento selecionando a opo Incluir assinatura Unicode (BOM). Uma BOM consiste em 2 a 4 bytes no incio de um arquivo de texto que identifica um arquivo como Unicode, bem como a ordem dos bytes a seguir. Como a codificao UTF-8 no tem ordem de bytes, a adio de um BOM UTF-8 opcional. Na UTF-16 e UTF-32, ela obrigatria. Formulrio de normalizao unicode Selecione uma destas opes caso voc escolha Unicode (UTF-8) como codificao padro. H quatro formulrios de normalizao unicode. O mais importante deles o formulrio de normalizao C, pois o formulrio mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros trs para ser mais completa. Mostrar caixa de dilogo Novo documento ao pressionar Control+N Desmarque essa opo (on Command+N para Macintosh) a fim de criar automaticamente um documento do tipo padro quando voc usa o comando de teclado. No Unicode, h caracteres que so visualmente semelhantes, mas que podem ser armazenados no documento de diferentes maneiras. Por exemplo, (e -umlaut) pode ser representado como um caractere nico, e com trema, ou como dois caracteres, e latino regular + trema. O caractere de combinao Unicode aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do e latino. Os dois formulrios tm como resultado a mesma tipografia visual, mas o que salvo no arquivo diferente em cada formulrio. A normalizao o processo que garante que todos os caracteres que podem ser salvos de formas diferentes sero salvos de uma mesma forma. Ou seja, todos os caracteres de um documento sero salvos como um nico e com trema ou como e + trema , e no de duas formas em um documento. Para obter mais informaes sobre a normalizao unicode e as formas especficas que podem ser usadas, consulte o site da Unicode em www.unicode.org/reports/tr15.

Converso de HTML5 para um tipo de documento mais antigo

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.

Definio da extenso de arquivo padro de novos documentos em HTML

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.

Abertura e edio de documentos existentes

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.

1. Selecione Arquivo > Abrir. Voc tambm pode usar o painel Arquivos para abrir arquivos. 2. Navegue at e selecione o arquivo que voc deseja abrir. Nota: se ainda no tiver feito isso, ser uma boa ideia organizar os arquivos que voc planeja abrir e editar em um site do Dreamweaver, em vez de abri-los de outro local. 3. Clique em Abrir. O documento aberto na janela Documento. JavaScript, texto e folhas de estilo CSS so abertos na Visualizao de cdigo por padro. possvel atualizar o documento enquanto voc trabalha no Dreamweaver e salvar as alteraes no arquivo.

Abertura de arquivos relacionados

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.

Abertura de um arquivo relacionado na barra de ferramentas Arquivos relacionados


Siga um destes procedimentos: Na barra de ferramentas Arquivos relacionados, na parte superior do documento, clique no nome do arquivo relacionado que deseja abrir. Na barra de ferramentas Arquivos relacionados, clique com o boto direito do mouse no nome do arquivo relacionado que deseja abrir e selecione Abrir como arquivo separado, no menu de contexto. Ao abrir um arquivo relacionado por este mtodo, o documento principal no permanecer visvel simultaneamente.

Abertura de um arquivo relacionado no Navegador de cdigo


1. Coloque o ponto de insero em uma linha ou uma rea que voc sabe ser afetada por um arquivo relacionado. 2. Espere at que o indicador do Navegador de cdigo seja exibido e, em seguida, clique nele para abrir o Navegador de cdigo. 3. Passe o mouse sobre os itens no Navegador de cdigo para ver mais informaes sobre eles. Por exemplo, se voc deseja alterar uma propriedade de cor CSS especfica mas no sabe em que regra ela est, possvel localizar a propriedade focalizando as regras disponveis no Navegador de cdigo. 4. Clique no item desejado para abrir o arquivo relacionado correspondente.

Retorno ao cdigo-fonte do documento principal


Clique no boto Cdigo-fonte na barra de ferramentas Arquivos relacionados.

Alterao da exibio de arquivos relacionados


Voc pode exibir os arquivos relacionados de diversas maneiras: Ao abrir um arquivo relacionado na Visualizao de design ou nas Visualizaes de cdigo e design (visualizao dividida), o arquivo relacionado exibido na visualizao dividida acima da Visualizao de design do documento principal. Voc poder selecionar Visualizar > Visualizao de design na parte superior se desejar que o arquivo relacionado seja exibido na parte inferior da janela Documento. Ao abrir um arquivo relacionado nas Visualizaes divididas verticalmente de cdigo e design (Visualizar > Dividir verticalmente), o arquivo relacionado exibido na visualizao dividida junto com a Visualizao de design do documento principal. Voc pode marcar ou desmarcar a Visualizao de design esquerda (Visualizar > Visualizao de design esquerda), dependendo do local em que voc deseja a Visualizao de design. Ao abrir um arquivo relacionado na Visualizao de dividir cdigo ou Visualizao de dividir cdigo na vertical (Visualizar > Visualizao de dividir cdigo e Visualizar > dividir verticalmente), o arquivo relacionado ser exibido em uma visualizao dividida abaixo, acima ou ao lado do do cdigo-fonte do documento principal, dependendo das opes selecionadas. A visualizao de cdigo na opo de exibio se refere ao cdigo-fonte do documento principal. Por exemplo, se voc selecionar Visualizar > Visualizao de cdigo na parte superior, o Dreamweaver mostrar o cdigo-fonte do documento principal na metade da parte superior da janela Documento. Se voc selecionar Visualizar > Visualizao de cdigo esquerda, o Dreamweaver mostrar o cdigo-fonte do documento principal esquerda da janela Documento. A Visualizao de cdigo padro no permite exibir Documentos relacionados ao mesmo tempo que o cdigo-fonte do documento principal.

Desativao de arquivos relacionados


1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2. Na categoria Geral, desmarque Ativar arquivos relacionados.

Abertura de Arquivos relacionados dinamicamente

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.

Definio das preferncias de Arquivos relacionados dinamicamente


Quando voc abrir uma pgina associada aos Arquivos relacionados dinamicamente, o Dreamweaver pode identificar os arquivos automaticamente ou permitir a identificao dos arquivos manualmente (o que possvel clicando em um link na barra Informaes acima da pgina). A configurao padro identificao manual. 1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh OS). 2. Na categoria Geral, verifique se a opo Ativar arquivos relacionados est selecionado.

3. Selecione Manualmente ou Automaticamente no menu pop-up Arquivos rel. dinamicamente. Tambm possvel desativar a identificao inteiramente selecionando Desativado.

Identificao de Arquivos relacionados dinamicamente


1. Abra uma pgina que tenha Arquivos relacionados dinamicamente associados a elapor exemplo, pgina raiz do site index.php de um site WordPress, Drupal ou Joomla!. 2. Se a identificao de Arquivos relacionados dinamicamente estiver definida como manual (padro), clique no link Identificar na barra de Informaes que aparece acima da pgina na janela Documento. Se a identificao de Arquivos relacionados dinamicamente estiver ativada automaticamente, uma lista de Arquivos relacionados dinamicamente ser exibida na barra de ferramentas Arquivos relacionados. A ordem dos Arquivos relacionados e Arquivos relacionados dinamicamente na barra de ferramentas Arquivos relacionados a seguinte: Arquivos relacionados estticos (ou seja, arquivos relacionados que no exigem qualquer tipo de processamento dinmico) Arquivos relacionados externos (ou seja, arquivos .css e .js) que esto anexados ao servidor de caminho dinmico que inclui arquivos O servidor de caminho dinmico inclui arquivos (ou seja, arquivos .php, .inc e .module)

Filtro de arquivos relacionados


Como Arquivos relacionados e Arquivos relacionados dinamicamente podem ser com frequncia numerosos, o Dreamweaver permite o filtro de Arquivos relacionados para que seja possvel localizar os arquivos com os quais voc deseja trabalhar. 1. Abra uma pgina que tenha Arquivos relacionados a ela. 2. Identifique os Arquivos relacionados dinamicamente caso seja necessrio. 3. Clique no cone de Filtrar arquivos relacionados no lado direito da barra de ferramentas Arquivos relacionados. 4. Selecione os tipos de arquivos que voc deseja visualizar na barra de ferramentas Arquivos relacionados. Por padro, o Dreamweaver seleciona todos os Arquivos relacionados. 5. Para criar um filtro personalizado, clique no cone de Filtrar arquivos relacionados e selecione Filtro personalizado. A caixa de dilogo Filtro personalizado permite somente filtrar os nomes exatos de arquivos (estilo.css), extenses de arquivos (.php) e expresses curingas usando asteriscos (*menu*). possvel filtrar expresses curingas mltiplas pela separao de cada expresso com um ponto-e-vrgula (por exemplo, estilo.css; *.js; *tpl.php). Nota: as configuraes de filtro no se mantm aps o fechamento do arquivo.

Limpeza de arquivos em HTML do Microsoft Word

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

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Avisos legais | Poltica de privacidade online

Trabalho com o Photoshop e Dreamweaver


Sobre a integrao do Photoshop Sobre os fluxos de trabalho dos Objetos Inteligentes e do Photoshop-Dreamweaver Criao de um Objeto Inteligente Atualizao de um Objeto Inteligente Atualizao de vrios objetos inteligentes Redimensionamento de um Objeto Inteligente Edio de um arquivo original do Photoshop de um Objeto Inteligente Estados do Objeto Inteligente Copiar e colar uma seleo do Photoshop Edio de imagens coladas Configurao das opes da caixa de dilogo Otimizao de imagem

Sobre a integrao do Photoshop

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.

Sobre os fluxos de trabalho dos Objetos Inteligentes e do Photoshop-Dreamweaver

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.

Criar um Objeto Inteligente

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.

Atualizar um Objeto Inteligente

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.

Atualizar vrios Objetos Inteligentes

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.

Redimensionar um Objeto Inteligente


Voc pode redimensionar um Objeto Inteligente na janela Documento como faria com qualquer outra imagem.

Para o incio

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.

Editar o arquivo original do Photoshop de um Objeto Inteligente

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.

2. Clique no boto Editar no Inspetor de propriedades. 3. Faa as alteraes no Photoshop e salve o novo arquivo PSD. 4. No Dreamweaver, selecione novamente o Objeto Inteligente e clique no boto Atualizar do original. Nota: Se voc alterou o tamanho da imagem no Photoshop, precisar redimensionar o tamanho da imagem da Web no Dreamweaver. O Dreamweaver atualiza um Objeto Inteligente somente com base no contedo do arquivo original do Photoshop e no em seu tamanho. Para sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo original do Photoshop, clique com o boto direito do mouse na imagem e selecione Redefinir tamanho para original.

Estados de Objetos Inteligentes


A tabela a seguir lista os vrios estados de Objetos Inteligentes.

Para o incio

Estado de Objeto Inteligente Imagens sincronizadas

Descrio A imagem da Web est em sincronia com o contedo atual do arquivo original do Photoshop. Os atributos de largura e altura do cdigo HTML combinam com as dimenses da imagem da Web. O arquivo original do Photoshop foi modificado aps a criao da imagem da Web no Dreamweaver. Os atributos de largura e altura do cdigo HTML so diferentes das dimenses de largura e altura da imagem da Web que o Dreamweaver criou na insero. Se as dimenses da imagem da Web forem menores que os valores selecionados de largura e altura no HTML, a imagem da Web pode aparecer como pixels. Os atributos de largura e altura do cdigo HTML so diferentes das dimenses de largura e altura do arquivo original do Photoshop. A imagem da Web pode aparecer como pixels. O Dreamweaver no pde localizar o arquivo original do Photoshop especificado na caixa de texto Original do Inspetor de propriedades.

Ao recomendada Nenhum

Ativo original modificado

Use o boto Atualizar do original no Inspetor de propriedades para sincronizar as duas imagens. Use o boto