Junho de 2014

Alguns links podem direcion-lo a contedo em ingls.

Ajuda da Adobe Dreamweaver CC

Novidades

1

Resumo de novos recursosDreamweaver CC verso 2014

Para o incio

A nova verso 2014 do Dreamweaver CC inclui vrios aprimoramentos para a Visualizao dinmica e o CSS Designer para ajudar a criar e aatualizar facilmente o contedo para a Web e dispositivos mveis. O novo recurso Exibio rpida do elemento ajuda a visualizar, navegar eeditar rapidamente o markup HTML.

Este artigo apresenta esses novos recursos e vrios outros aprimoramentos, alm de fornecer links para outros recursos de ajuda e aprendizado.

O que h de novo e o que foi alteradoExibio rpida do elementoNovos recursos de edio na Visualizao dinmicaInsero dinmicaAprimoramentos do CSS DesignerSuporte para conexes SFTP usando o arquivo de identidadeDesfazer/Refazer aprimoramentosAlteraes no fluxo de trabalho do Business Catalyst e do PhoneGap BuildAlteraes em extenses de acesso para DreamweaverAlteraes para sincronizar configuraesEnvio de erros/solicitao de recursos diretamente do DreamweaverHelp CenterAlteraes no menu Ajuda

Exibio rpida do elementoRevise a marcao no documento usando o novo recurso Exibio rpida do elemento, que processa uma rvore de HTML interativa para oscontedos esttico e dinmico. Modifique a estrutura esttica do contedo direto na rvore HTML.

Exibio rpida do elemento

A Exibio rpida do elemento (Exibir > Exibio rpida do elemento) foi criada para ajudar a acelerar o processo de desenvolvimento. Em

2

Para o incio

verses anteriores do Dreamweaver, seria necessrio destacar os elementos HTML na Visualizao dinmica, alternar para a Visualizao decdigo e editar os elementos. Depois da edio, seria necessrio voltar novamente para a Visualizao dinmica a fim de visualizar asalteraes. Agora, com a Exibio rpida do elemento, voc pode visualizar todos os elementos da pgina em uma exibio nica e fcil de ler eeditar o contedo esttico.

Para obter mais informaes, consulte Exibio rpida do elemento.

Novos recursos de edio na Visualizao dinmicaInspecione e altere qualquer um dos direitos de propriedades de elementos HTML na Visualizao dinmica e veja como fica sua aparncia semprecisar atualizar tudo.

Inspetor de propriedades rpidoExibio do elementoEdio de texto dinmicoInspetor de propriedades da visualizao dinmica

Inspetor de propriedades rpidoA visualizao dinmica agora exibe o Inspetor de propriedades rpido para elementos HTML em suas pginas. Com base no elemento HTMLselecionado, o Inspetor de propriedades rpido permite editar atributos ou texto diretamente na Visualizao dinmica.

Inspetor de propriedades rpido para editar atributos de imagem

Inspetor de propriedades rpido para formatar texto

Para obter mais informaes, consulte Inspetor de propriedades da visualizao dinmica.

Exibio do elementoCom a nova Exibio do elemento, agora possvel associar elementos HTML a classes e IDs diretamente na Visualizao dinmica. A Exibiodo elemento indica as classes e IDs disponveis para ajud-lo a visualizar e escolher a opo requerida rapidamente.

3

http://idiom-q-win-1/content/help/br/dreamweaver/using/element-quick-view.htmlhttp://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_5http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_4http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_30http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_4http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_header_7

Para o incio

Exibio do elemento para editar classes e IDs

Para obter mais informaes, consulte Associar elementos HTML a classes e IDs.

Edio de texto dinmicoAgora, voc pode editar texto diretamente na Visualizao dinmica e visualizar as alteraes sem precisar alternar entre visualizaesdiferentes.

Clique duas vezes no elemento de texto na Visualizao dinmica para entrar no modo de edio. Para obter mais informaes, consulte Editartexto diretamente na Visualizao dinmica.

Editar texto diretamente na Visualizao dinmica

Inspetor de propriedades da visualizao dinmicaO Inspetor de propriedades est agora disponvel na Visualizao dinmica de forma que voc pode editar a sua pgina rapidamente semalternar para a Visualizao de cdigo ou de design.

Para obter mais informaes, consulte Inspetor de propriedades da visualizao dinmica.

Inspetor de propriedades da visualizao dinmica

Insero dinmicaNessa verso, voc pode inserir elementos HTML diretamente na Visualizao dinmica usando o painel Inserir. Os elementos so inseridos emtempo real sem a necessidade de alternar os modos. Tambm possvel visualizar as alteraes imediatamente.

Para obter mais informaes, consulte Inserir elementos diretamente na Visualizao dinmica.

4

http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_headerhttp://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_header_1http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_header_1http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_header_3http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_header_4http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html#main-pars_header_4

Para o incio

Arrastar e soltar na Visualizao dinmica do painel Inserir

Aprimoramentos do CSS Designer

Interface de usurio aprimorada para controle de bordasUm controle com guias que ajuda a configurar as quatro propriedades de bordas de maneira fcil e intuitiva.

Controle com guias para evitar que todos os valores sejam exibidos de uma vez, reduzindo a confuso.cones intuitivos e fceis de usar, que qualquer iniciante pode acompanhar.Dois conjuntos de cones para indicar os estados no definido/excludo e desativado.Uma guia Todos os lados nica para definir as propriedades de todas as bordas de uma vez.Linha computada que direciona voc at a guia mais adequada durante a inspeo.

Propriedades de controle de bordas antes do Dreamweaver CC 2014

5

Propriedades de controle de bordas no Dreamweaver CC 2014

Para obter mais informaes, consulte Definio das propriedades de borda.

Copiar e colar estilosAgora possvel copiar estilos de um seletor e col-lo em outro. Voc pode copiar todos os estilos ou copiar apenas a categoria de estilosespecfica como Layout, Texto e Borda.

Clique com o boto direito no mouse em um seletor e escolha entre as opes disponveis:

Copiar estilos usando o CSS Designer

Se um seletor no tiver estilos, as opes Copiar e Copiar todos os estilos estaro desabilitadas.A opo Colar estilos fica desabilitada para sites remotos que no podem ser editados. Mas a opo Copiar e Copiar todos os estilosfica disponvel. possvel colar estilos j existentes parcialmente em um seletor (sobreposio). A uniode todos os seletores colada.Tambm possvel usar Copiar e colar estilos para diferentes integraes de arquivos do CSS Estilos de importao, link e inline.

Caixas de texto de edio rpidaO Dreamweaver agora inclui caixas de texto de edio rpida, onde voc pode especificar o cdigo abreviado para propriedades como margem,preenchimento, borda e raio da borda. Essa alterao foi feita para os usurios que preferem especificar o cdigo em vez de usar o mouse ou oteclado para especificar propriedades.

6

http://idiom-q-win-1/content/help/br/dreamweaver/using/css-designer.html#main-pars_header_8

Aprimoramentos no fluxo de trabalho personalizado de propriedadesAntes, voc precisava clicar em + no painel Propriedades do CSS Designer para adicionar propriedades Other (ou personalizadas). Agora, umgrupo de caixas de texto - nome e valor da propriedade - torna-se prontamente disponvel no final da lista Propriedades. Essas caixas de textopermitem digitar diretamente o nome da propriedade e seu valor sem precisar clicar em +.

Para adicionar linhas de propriedades personalizadas adicionais, pressione Tab.

O nome do grupo de propriedades other alterado para Custom.

7

Atalhos do tecladoAgora, voc pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Tambm possvel navegar entre os grupos depropriedades no painel Propriedades.

Seletores mais especficos/menos especficosCom essa verso, o Dreamweaver oferece at trs (ou menos) sugestes de regra ao adicionar um seletor. Voc pode torn-lo mais ou menosespecfico usando as teclas de seta para cima/para baixo.

Seletores mais especficos/menos especficos

Rolar para a categoriaAntes, quando voc clicava na categoria Fundo ou Outro na parte superior do painel Propriedades do Designer CSS, essas categorias tornavam-se visible no painel. As categorias no eram exibidas na parte superior do painel.

Agora, as categorias Fundo e Outro (renomeadas para Personalizado) so exibidas na parte superior do painel quando voc clica nelas.

Atalho Fluxo de trabalho

CTRL + Alt +[Shift =] Adiciona Seletor (se o controle estiver na seo de seletor)

CTRL + Alt+ S Adiciona Seletor (se o controle estiver em qualquer lugar noaplicativo)

CTRL + Alt +[Shift =] Adiciona Propriedade (se o controle estiver na seo depropriedade)

CTRL + Alt+ P Adiciona Propriedade (se o controle estiver em qualquer lugar noaplicativo)

Select + Delete Exclui o seletor, se ele estiver selecionado

CTRL + Alt + (PgUp/PgDn) Salta entre sees - enquanto estiver no subpainel propriedades

8

Para o incio

Nota:

Para o incio

Nota:

Para o incio

Suporte para conexes SFTP usando o arquivo de identidadeAgora possvel autenticar conexes para um servidor SFTP com base na Identity Key (com ou sem um frase secreta).

o Dreamweaver oferece suporte apenas aos arquivos chave OpenSSH.

Para obter mais informaes, consulte Conexes SFTP.

Desfazer/Refazer aprimoramentosAt aqui, para desfazer/refazer uma operao executada no painel do CSS Designer, era necessrio clicar no arquivo CSS (em arquivosrelacionados) e, em seguida, desfazer/refazer a operao.

Com os aprimoramentos no recurso Desfazer/Refazer, voc pode desfazer/refazer uma operao diretamente da Visualizao dinmica de umdocumento no painel do CSS Designer. Essas alteraes sero refletidas automaticamente no arquivo CSS associado. Para informar a voc queo arquivo relacionado foi alterado, a guia do arquivo afetado destacada por um tempo (aproximadamente 8 segundos).

Quando voc desfaz/refaz uma ao no painel do CSS Designer, a Visualizao dinmica atualizada automaticamente.Ao editar o documento, usando o cdigo-fonte, e desfazer as alteraes na Visualizao dinmica, a exibio muda para Visualizaodividida e o cdigo fonte relacionado colocado em foco.

Todas as aes de desfazer/refazer so registradas no nvel do arquivo HTML. Isso significa que todas as alteraes manuais realizadas em umarquivo CSS podem ser desfeitas de QUALQUER arquivo relacionado. Por exemplo, considere que o style1.css e o style2.css esto relacionadosao index.html. Se voc adicionar estilos ao .h1 em style1.css e, em seguida, os desfizer no style2.css, os estilos adicionados ao .h1 seroexcludos do style1.css.

para desfazer/refazer alteraes em arquivos JavaScript, necessrio alternar para o respectivo arquivo JS e desfazer/refazer.

Alteraes no fluxo de trabalho do Business Catalyst e do PhoneGap BuildO Business Catalyst e o PhoneGap Build so disponibilizados como complementos do Dreamweaver. necessrio instalar primeiro o BusinessCatalyst e o PhoneGap Build como extenses e, em seguida, usar esses servios como antes.

Para instalar as extenses do Business Catalyst e do PhoneGap Build, v para Gerenciar > Buscar complementos, procure as extenses einstale-as.

Consulte tambm:Dreamweaver - Fluxo do trabalho do Business Catalyst

9

http://idiom-q-win-1/content/help/br/dreamweaver/using/connect-remote-server.html#main-pars_heading_2

Para o incio

Compactao de aplicativos para dispositivos mveis

Alteraes em extenses de acesso para DreamweaverAgora possvel exibir e instalar extenses do Dreamweaver usando a Adobe Creative Cloud. Agora, as extenses so denominadasComplementos.

Para procurar complementos na Adobe Creative Cloud, clique em Janela > Buscar complementos no Dreamweaver. A pgina Complementos daAdobe Creative Cloud exibida.

Janela > Extenses no Dreamweaver CC 13.0

Janela > Buscar complementos no Dreamweaver CC 2014

Para obter mais informaes sobre como instalar os complementos, consulte Complementos.

10

http://idiom-q-win-1/content/help/br/dreamweaver/using/extensions.html

Para o incio

Para o incio

Para o incio

Alteraes para sincronizar configuraesO recurso Sincronizar configuraes no Dreamweaver permite manter as configuraes sincronizadas com instncias do Dreamweaver em seuscomputadores e na Creative Cloud. O Dreamweaver CC 2014 detecta automaticamente se voc ativou o recurso Sincronizar configuraes naverso anterior do Dreamweaver e permite importar as configuraes da Creative Cloud.

Quando voc inicia o Dreamweaver CC 2014 pela primeira vez aps a instalao, a seguinte caixa de dilogo exibida:

Importar configuraes de sincronizao

Para importar as configuraes que so armazenadas na Creative Cloud, clique em Importar config. sincr.

Observao: essa opo no estar disponvel posteriormente.

Para sincronizar as configuraes na instncia atual do Dreamweaver com a Creative Cloud, clique em Sincronizao local.Para sincronizar automaticamente as configuraes desse ponto em diante, selecione Sempre sincronizar configuraesautomaticamente.Para exibir as opes avanadas de configuraes de sincronizao, clique em Avanado.

Artigo relacionado:Sincronizao de configuraes do Dreamweaver com a Creative Cloud

Envio de erros/solicitao de recursos diretamente do DreamweaverAgora possvel acessar diretamente ao formulrio de Wishlist e de relatrio de erro no Dreamweaver (Ajuda > Enviar solicitao de erro/recurso.

Enviar solicitao de erro/recurso no menu Ajuda

Help CenterAprenda a usar novos recursos e como abordar tarefas comuns do Dreamweaver com o novo Help Center.

Ao contrrio das verses anteriores, agora voc pode descobrir novos recursos e fluxos de trabalho eficazes ao iniciar o Dreamweaver pelaprimeira vez. possvel ignorar o tour do recurso novo ou desativar a mensagem de ajuda no aplicativo quando desejar. Se necessrio, vocpode ativ-los novamente.

Procedimento de novos recursosMensagens no aplicativoMensagens no produtoDesativar ou redefinir mensagens no aplicativo e no produto

11

http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_8http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_9http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_10http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_23

Procedimento para novos recursosO Dreamweaver agora inclui um minitour dos novos recursos que so fornecidos na verso mais recente.Alm de apresentar os novos recursos, o tour tambm direciona voc at uma galeria de vdeos,onde voc pode ver os novos recursos em ao.

O procedimento para novos recursos ou a opo de minitour so exibidos assim que vocinicia o Dreamweaver. Voc tambm tem a opo de ignorar o tour e ir para aTela de boas-vindas e continuar trabalhando.

Observao: o procedimento para novos recursos exibido durante a instalao ou atualizao doDreamweaver ou quando voc exclui preferncias e reinicia o Dreamweaver.

Tour de novos recursos

Veja um resumo do que exibido no procedimento para novos recursos:

Mensagem de boas-vindas. Voc tambm solicitado a especificar se usou o Dreamweaver CC anteriormente para que a experinciapossa ser personalizada adequadamente.Introduo recurso por recurso e uma breve descrio (com uma opo para ignorar o tour).Galeria de vdeos contendo os vdeos relacionados aos novos recursos.

Galeria de vdeosAo final do procedimento para novos recursos, a galeria de vdeos exibida com vdeosrelacionados aos novos recursos. Quando voc passa o mouse sobre as miniaturas, uma brevedescrio do vdeo exibida.

12

Nota:

Galeria de vdeos

voc pode acessar o procedimento para novos recursos e a galeria de vdeos a qualquer momentoenquanto usa o Dreamweaver. Para fazer isso, v para o menu Ajuda ou a tela Bem-vindo e clique na opo necessria.

Mensagens no aplicativoO Dreamweaver agora apresenta dicas para aumentar a produtividade enquanto voc trabalhaem seus projetos. O objetivo dessas dicas ajudar voc a executar de forma mais eficiente a tarefaque est realizando.

As dicas so baseadas em triggers especficos. Por exemplo, quando voc clica nos seletores Tagem qualquer exibio ou clica com o boto direito do mouse em um elemento para inspecion-lo, o prompt para aVisualizao rpida de elemento exibido. A Visualizao rpida de elemento um recurso novo que ajuda a visualizare editar a marcao HTML de forma mais fcil do que a de outros mtodos que voc j experimentou (acionadores).

Depois que voc tiver utilizado as sugestes apresentadas, o prompt no aplicativo no ser exibido novamentepara o mesmo acionador. Porm, o prompt ser exibido novamente para os outrostriggers identificados.

possvel desativar a exibio de mensagens no aplicativo em Preferncias. Para obtermais informaes, consulte Desativar ou redefinir mensagens no aplicativo e no produto.

Exemplos de mensagens no aplicativo:

Exibio rpida do elementoAcionadores:

Os seletores de tags (todas as exibies) so clicadosDinmico + Inspecionar ou clique com o boto direito do mouse + Inspecionar sobre um elemento

Mensagem:

13

http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_23

Nota:

Inspetor de propriedades da visualizao dinmica para classes e IDs Acionadores:

Editar ID usando PI em Visualizao de design

Mensagem:

Mensagens no produtoO Dreamweaver integra-se perfeitamente com muitos outros aplicativos da Creative Cloude as mensagens no produto apresentam esses fluxos de trabalho de integrao. Usando essesfluxos de trabalho, voc pode utilizar a Adobe Creative Cloud e suas ofertas de uma maneira melhor.

As mensagens no produto so exibidas com base nos triggers identificados. Por exemplo, aotentar usar as Transies do CSS, o fluxo de trabalho do Edge Animate sugerido por meio damensagem no produto.

Uma mensagem no produto contm uma breve descrio dofluxo de trabalho alternativo (ou melhor) que voc pode usar em um cenrio especfico. Ela tambm inclui uma miniatura de vdeo em que vocpode clicar para ver um vdeo que explica o fluxo de trabalho. O boto Mais informaes vincula voca um item/blog que fornece mais informaes.

As mensagens no produto so exibidas somente uma vez quando o acionador identificado ocorre.

para ver as mensagens novamente, redefina a configurao de ajuda no aplicativo em PrefernciasPara obter mais informaes, consulte Desativar ou redefinir mensagens no aplicativo e no produto.

Exemplos de mensagens no produto::

Edge AnimateAcionador:

Clique em Transio do CSS e depois em +

Mensagem:

ParfaitAcionador:

Inserir imagem > Editar configuraes da imagem

Mensagem:

14

http://idiom-q-win-1/content/help/br/dreamweaver/using/whats-new.html#main-pars_header_23

Para o incio

Desativar ou redefinir mensagens no aplicativo e no produtoV para a caixa de dilogo Preferncias > Acessibilidade e faa o seguinte:

Para desativar as mensagens, desmarque a caixa de seleo Mostrar ajuda no aplicativo.

Se voc reativ-las, as mensagensexibidas anteriormente no sero exibidas. Sero exibidas apenas as mensagensque no foram exibidas antes.

Para ver as mensagens exibidas antes, clique em Redefinir.

Preferncias para desativar ou redefinir a ajuda no aplicativo

Alteraes no menu AjudaAgora, o menu Ajuda est reorganizado para fornecer acesso rpido ao procedimento de novos recursos, galeria de vdeo, aos recursos deajuda e aprendizagem e ao formulrio de envio de solicitao de erro/recurso.

15

As publicaes do Twitter e do Facebook no so cobertas pelos termos do Creative Commons.

Avisos legais | Poltica de privacidade on-line

Menu Ajuda antes do Dreamweaver CC 2014

Menu Ajuda do Dreamweaver CC 2014

16

http://creativecommons.org/licenses/by-nc-sa/3.0/http://help.adobe.com/pt_BR/legalnotices/index.htmlhttp://helpx.adobe.com/go/gffooter_online_privacy_policy_br

rea de trabalho e fluxo de trabalho

17

Fluxo e rea de trabalho do Dreamweaver

Para o incio

Viso geral do fluxo de trabalho do DreamweaverViso geral do layout da rea de trabalhoViso geral dos elementos da rea de trabalhoViso geral da janela DocumentoViso geral da barra de ferramentas DocumentoViso geral da barra de ferramentas PadroViso geral da barra de ferramentas Navegao do navegadorViso geral da barra de ferramentas CodificaoViso geral da barra StatusViso geral do Inspetor de propriedadesViso geral do painel InserirViso geral do painel ArquivosCSS DesignerViso geral das guias visuais

Viso geral do fluxo de trabalho do DreamweaverVoc pode usar vrias abordagens para criar um site. Entre elas:

Planejar e configurar seu site

Determine para onde os arquivos so direcionados e examine os requisitos do site, os perfis do pblico-alvo e as metas do site. Alm disso,avalie os requisitos tcnicos, como acesso do usurio, alm de restries de navegador, plug-in e download. Depois de organizar suasinformaes e determinar uma estrutura, voc pode comear a criar seu site. (Consulte Sobre os sites do Dreamweaver.)

Organizar e gerenciar 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. Opainel Arquivos tambm tem muitas ferramentas de gerenciamento de site, transferncia de arquivos de e para um servidor remoto, configuraode um processo de Check-in/Check-out para impedir a substituio e a 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 doDreamweaver. possvel tambm usar o Dreamweaver para gerenciar os aspectos dos seus sites do Adobe Contribute . (ConsulteGerenciamento de arquivos e pastas e Gerenciamento de ativos e bibliotecas.)

Fazer o layout das pginas da Web

Selecione a tcnica de layout mais adequada para voc ou use as opes de layout do Dreamweaver em conjunto para criar a aparncia do seusite. possvel usar layouts de grade fluida do Dreamweaver ou modelos padro para comear. Voc pode criar pginas novas baseadas nomodelo do Dreamweaver e atualizar o layout dessas pginas automaticamente quando o modelo for alterado. Se desejar exibir vrios elementosao mesmo tempo em um navegador, voc pode usar quadros para criar o layout de documentos. (Consulte Criao de pginas com o CSS eAplicao de layout s pginas com HTML.)

Adicionar 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 tambm fornece ferramentas para maximizar odesempenho do site e testar pginas para garantir a compatibilidade com diferentes navegadores da Web. (Consulte Adio de contedo spginas.)

Criar pginas com programao manual

A programao manual de pginas da Web outra abordagem de criao de pginas. O Dreamweaver fornece ferramentas fceis de usar deedio visual, mas tambm oferece um ambiente de programao sofisticado; voc pode usar qualquer uma das abordagens ou as duas paracriar e editar pginas. (Consulte Trabalho com cdigo de pgina.)

Configurar 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 taispginas, voc precisa primeiro configurar um servidor da Web e um servidor de aplicativo, criar ou modificar um site do Dreamweaver e conectar-se a um banco de dados. (Consulte Preparao para criar sites dinmicos.)

18

http://help.adobe.com/pt_BR/dreamweaver/cs/using/WS753df6af718a350a5601124413168b2b12f-8000.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7ed0a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7e6ba.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e32a.htmlhttp://idiom-q-win-1/content/help/br/dreamweaver/using/css-layouts.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7d17a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7d17a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7bf2a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7a31a.html

Para o incio

Para o incio

Nota:

A tela de boas-vindas

A barra de aplicativos

A barra de ferramentas de documento

A barra de ferramentas Padro

Criar pginas dinmicas

No Dreamweaver, voc pode definir uma variedade de fontes de contedo dinmico, incluindo conjuntos de registros extrados de bancos dedados, 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 parapassar de uma pgina de registros para a prxima (e vice-versa) e criar contadores de registro para ajudar os usurios a rastrearem os registros.(Consulte Tornar as pginas dinmicas.)

Testar e publicar

O teste das pginas um processo contnuo que acontece durante todo o ciclo de desenvolvimento. No final do ciclo, o site publicado em umservidor. Muitos desenvolvedores tambm incluem uma manuteno peridica para assegurar que os sites permaneam atualizados e funcionais.(Consulte Envio e recebimento de arquivos do servidor.)

Viso geral do layout da rea de trabalhoA rea de trabalho do Dreamweaver permite visualizar documentos e propriedades de objetos. A rea de trabalho tambm coloca muitasoperaes comuns em barras de ferramentas para que voc possa fazer alteraes rapidamente em seus documentos.

rea de trabalho do Dreamweaver A. Barra de ferramentas Documento B. Barra de aplicativos 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 trabalhoA rea de trabalho inclui os seguintes elementos:

o Dreamweaver fornece muitos outros painis, inspetores e janelas. Para abrir os painis, os inspetores e as janelas, use o menu Janela.

Permite abrir um documento recente ou criar um novo documento. Na tela de Boas-vindas, voc tambm pode sabermais sobre o Dreamweaver fazendo um tour do produto ou acessando o contedo da ajuda e de aprendizagem.

Localizada na parte superior da janela do aplicativo, contm o alternador da rea de trabalho, os menus (apenas noWindows) e outros controles do aplicativo.

Contm botes que oferecem opes para as diferentes visualizaes da janela Documento (como aVisualizao de design e a Visualizao de cdigo), vrias opes de visualizao e algumas operaes comuns, como visualizao em umnavegador.

Para exibir a barra de ferramentas Padro, selecione Visualizar > Barras de ferramentas > Padro. A barra deferramentas contm botes para operaes comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimircdigo, Cortar, Copiar, Colar, Desfazer e Refazer.

19

http://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-79bea.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7eb4a.html

A barra de ferramentas de codificao

A janela do documento

O Inspetor de propriedades

O seletor de tags

Painis

O painel Inserir

O painel Arquivos

Para o incio

Visualizao de design

Visualizao de cdigo

Visualizao Dividir cdigo

Visualizao de cdigo e de design

Visualizao dinmica

Visualizao dinmica de cdigo

Para o incio

(exibida somente na Visualizao de cdigo) Contm botes que permitem executar muitas operaespadro de codificao.

Exibe o documento atual medida que criado e editado.

Permite visualizar e alterar diversas propriedades do objeto ou texto selecionado. Cada objeto tem propriedadesdiferentes.

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.

Ajuda a monitorar e modificar seu trabalho. Os exemplos incluem o painel Inserir, o painel CSS Designer e o painel Arquivos. Paraexpandir um painel, clique duas vezes na guia correspondente.

Contm botes para inserir vrios tipos de objetos em um documento, como imagens, tabelas e elementos de mdia. Cadaobjeto uma parte do cdigo HTML que permite definir vrios atributos medida que so inseridos. Por exemplo, voc pode inserir uma tabelaclicando no boto Tabela no painel Inserir. Se voc preferir, pode inserir objetos usando o menu Inserir em vez do painel Inserir.

Permite gerenciar arquivos e pastas, sejam eles parte de um site do Dreamweaver ou de um servidor remoto. O PainelArquivos tambm permite acesso a todos os arquivos no seu disco local.

Viso geral da janela DocumentoA janela Documento mostra o documento atual. Para acessar um documento, clique na guia correspondente.

possvel selecionar qualquer uma das seguintes visualizaes:

(Visualizar > Design) Um ambiente de design para o layout visual da pgina, a edio visual e o desenvolvimento rpidodo aplicativo. Nessa visualizao, o Dreamweaver exibe uma representao visual totalmente editvel do documento, semelhante ao que vocveria ao exibir a pgina no navegador.

(Visualizar > Cdigo) Um ambiente com codificao manual para gravao e edio em HTML, JavaScript e qualqueroutro tipo de cdigo.

(Visualizar > Dividir cdigo) Uma verso dividida da Visualizao de cdigo que possibilita rolar pelo trabalho emdiferentes sees do documento ao mesmo tempo.

(Visualizar > Cdigo e Design) Permite ver as Visualizaes de cdigo e de Design para o mesmodocumento em uma nica janela.

(Visualizar > Visualizao dinmica) De modo semelhante Visualizao de design, a Visualizao dinmica exibe umarepresentao mais realista de como seu documento ser exibido em um navegador, e permite que voc interaja com o documento exatamenteda maneira como faria em um navegador. Voc pode editar elementos HTML diretamente na Visualizao dinmica e visualizar imediatamente asalteraes na mesma exibio. Para obter mais informaes sobre a edio na Visualizao dinmica, consulte Editar elementos HTML naVisualizao dinmica.

(Visualizar > Cdigo dinmico) Disponvel somente ao visualizar um documento na Visualizao dinmica. AVisualizao dinmica de cdigo exibe o cdigo real que o navegador usa para executar a pgina, e pode alterar dinamicamente medida quevoc 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 dearquivos de todos os documentos abertos. O Dreamweaver mostrar um asterisco aps o nome de arquivo se voc tiver feito alteraes queainda no tinham sido salvas.

O Dreamweaver tambm exibe a barra de ferramentas Arquivos relacionados abaixo da aba do documento (ou abaixo da barra de ttulo dodocumento, se voc estiver exibindo documentos em janelas distintas). Os documentos relacionados esto associados ao arquivo atual, comoarquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na janela Documento, clique no seu nome de arquivo na barra deferramentas Arquivos relacionados.

Viso geral da barra de ferramentas DocumentoA barra de ferramentas Documento contm botes que permitem alternar entre diferentes visualizaes do seu documento rapidamente. A barrade ferramentas tambm contm alguns comandos comuns e opes relacionadas visualizao do documento e sua transferncia entre siteslocais e remotos.

Barra de ferramentas Documento A. Mostrar visualizao de cdigo B. Mostrar visualizao de cdigo e de design C. Mostrar visualizao de design D. Visualizao dinmica E.Visualizar/depurar no navegador F. Ttulo do documento G. Gerenciamento de arquivos

20

http://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.htmlhttp://idiom-q-win-1/content/help/br/dreamweaver/using/live-view-property-inspector.html

Mostrar visualizao de cdigo

Mostrar visualizaes de cdigo e de design

Mostrar Visualizao de design

Visualizao dinmica

Visualizar/depurar no navegador

Gerenciamento de arquivos

Ttulo do documento

Para o incio

Para o incio

Para o incio

Barra de ferramentas Documentos com layout de Grade fluida A. Mostrar visualizao de cdigo B. Mostrar visualizao de cdigo e de design C. Mostrar visualizao de design D. Visualizao dinmica E.Visualizar/depurar no navegador F. Ttulo do documento G. Gerenciamento de arquivos H. Mostrar/ocultar grades fluidas

As opes seguintes aparecem na barra de ferramentas Documento:

Exibe somente a Visualizao de cdigo na janela Documento.

Divide a janela Documento entre as Visualizaes de cdigo e de design. Ao selecionar essavisualizao combinada, a opo Visualizao de design na parte superior torna-se disponvel no menu Opes de visualizao.

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 osarquivos na Visualizao de design e os botes Design e Dividir estaro esmaecidos.

Exibe uma visualizao do documento baseada no navegador e interativa. Voc tambm pode editar elementos HTMLna Visualizao dinmica.

Permite visualizar ou depurar o documento em um navegador. Selecione um navegador no menu pop-up.

Exibe o menu pop-up Gerenciamento de arquivos.

Permite inserir um ttulo para o documento, a ser exibido na barra de ttulo do navegador. Se o documento j tiver umttulo, esse ttulo ser exibido nesse campo.

Viso geral da barra de ferramentas PadroA 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 menuequivalentes.

Viso geral da barra de ferramentas Navegao do navegadorA barra de ferramentas Navegao do navegador torna-se ativa na Visualizao dinmica e mostra o endereo da pgina que voc est vendona janela Documento. A Visualizao dinmica age como um navegador comum, desta forma, mesmo que voc navegue at um site externo aoseu site local (por exemplo, http://www.adobe.com/br), o Dreamweaver carregar a pgina na janela Documento.

Barra de ferramentas de navegao do navegador 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 najanela Documento sem ser levado outra pgina. Para testar links na Visualizao dinmica, voc pode ativar o clique nico ou o cliquecontnuo. Basta selecionar Seguir links ou Seguir links continuamente no menu de opes Visualizar direita da caixa de endereo.

Viso geral da barra de ferramentas CodificaoA barra de ferramentas Codificao contm botes que permitem realizar operaes de codificao padro, como contrair e expandir selees decdigo, realar cdigo invlido, aplicar e remover comentrios, recuar cdigo e inserir snippets de cdigo usados recentemente. A barra deferramentas Codificao aparece verticalmente no lado esquerdo da janela Documento e visvel apenas quando a Visualizao de cdigo exibida.

21

Para o incio

Barra de ferramentas 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 caracteresocultos e Recuar automaticamente) ou ocultar botes que no deseja usar. No entanto, para fazer isso, voc deve editar o arquivo XML que geraa barra de ferramentas. Para obter mais informaes, consulte Extenso do Dreamweaver.

Viso geral da barra StatusA barra Status na parte inferior da janela Documento fornece informaes adicionais sobre o documento que voc est criando.

Barra de status A. Seletor de tags B. Tamanho de dispositivo mvel C. Tamanho de digitalizador 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. Cliqueem para selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag no seletor de tags, clique com oboto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto.

Tamanho de dispositivo mvel

Mostra uma visualizao do documento no tamanho do dispositivo mvel - 480 x 800 por padro. Para alterar o tamanho padro, clique no menupop-up Tamanho da janela > Editar tamanhos.

Tamanho de digitalizador

Mostra uma visualizao do documento no tamanho do digitalizador - 768 x 1024 por padro. Para alterar o tamanho padro, clique no menupop-up Tamanho da janela > Editar tamanhos.

Tamanho de desktop

Mostra uma visualizao do documento no tamanho de desktop - largura 1000 px por padro. Para alterar o tamanho padro, clique no menupop-up Tamanho da janela > Editar tamanhos.

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 visualizaoso modificadas. O tamanho do documento permanece inalterado.

22

Para o incio

Para o incio

Comum

Estrutura

Mdia

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 basena orientao do dispositivo.

Viso geral do Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento selecionado de pgina atual, como texto ou umobjeto inserido. O contedo do Inspetor de propriedades varia dependendo do elemento selecionado. Por exemplo, se voc selecionar umaimagem 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 a altura da imagem, a borda ao redor da imagem, se houver, etc.).

Inspetor de propriedades

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 narea de trabalho.

Viso geral do painel InserirO painel Inserir contm botes para criao e insero de objetos, como tabelas, imagens e links. Os botes so organizados em vriascategorias, que podem ser alternadas pela seleo da categoria desejada na lista suspensa na parte superior.

Painel Inserir

Algumas categorias tm botes com menus pop-up. Ao selecionar uma opo em um menu pop-up, essa opo se transforma na ao padrodo boto. Por exemplo, se voc selecionar Alocador de espao de imagem no menu pop-up do boto Imagem, na prxima vez em que clicar noboto Imagem, o Dreamweaver inserir um alocador de espao de imagem. Sempre que voc seleciona uma nova opo no menu pop-up, aao padro do boto muda.

O painel Inserir est organizado nas seguintes categorias:

Permite criar e inserir elementos usados com mais frequncia como as tags div e objetos, como imagens e tabelas.

Permite inserir elementos estruturais como as tags div, ttulos, listas, pargrafos, cabealhos e rodaps.

Permite inserir elementos de mdia como uma composio do Edge Animate, udio e vdeo HTML5 e udio e vdeo Flash.

23

Formulrio

jQuery Mobile

UI do jQuery

Modelos

Favoritos

Para o incio

Contm botes para criar formulrios e inserir elementos de formulrio, como pesquisa, ms e senha.

Contm botes para construir sites que usem o jQuery Mobile.

Permite inserir elementos de UI do jQuery Mobile como acordeo, controles deslizantes e botes.

Permite salvar o documento como um modelo e marcar reas especficas como editveis, opcionais, repetitivas ou reas opcionaiseditveis.

Permite agrupar e organizar os botes do painel Inserir que voc mais utiliza em um lugar comum.

Viso geral do painel ArquivosUse o painel Arquivos para visualizar e gerenciar os arquivos no seu site do Dreamweaver.

Ao exibir os sites, os arquivos ou as pastas no painel Arquivos, voc pode alterar o tamanho da rea de visualizao e expandir ou contrair opainel Arquivos. Quando o painel Arquivos est contrado, ele exibe os contedos do site local, do site remoto, do servidor de teste ou dorepositrio 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 do site remoto queaparece no painel contrado, por padro.

As pastas no painel Arquivos so exibidas em cores diferentes baseadas na visualizao - local, remota ou teste.

Exibio Local

Windows

Mac

Exibio Servidor remoto

24

Para o incio

Windows

Mac

Exibio Servidor de teste

Windows

Mac

Exibio Repositrio

Windows

Mac

O painel Arquivos interage com o servidor em intervalos regulares para atualizar o contedo. Uma mensagem de erro ser exibida se voc tentarrealizar alguma ao no painel Arquivos quando essas atualizaes automticas estiverem sendo executadas. Para desativar as atualizaesautomticas, 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 atualizado apenas quando as atualizaes automticas esto ativadas.

CSS DesignerPainel do CSS Designer (Janela > CSS Designer) um Inspetor de propriedade do CSS que permite criar visualmente estilos e arquivos doCSS e definir propriedades, junto com consultas de mdia.

25

Origens

@Mdia

Seletores

Propriedades

Para o incio

Painel CSS Designer

O painel CSS Designer consiste nos seguintes painis:

Lista todas as folhas de estilo do CSS associadas ao documento. Com esse painel, voc pode criar e anexar um CSS ao documento oudefinir estilos no documento.

Lista todas as consultas de mdia na origem selecionada no painel Origens. Se voc no selecionar um CSS especfico, esse painelexibir todas as consultas de mdia associadas ao documento.

Lista todos os seletores na origem selecionada no painel Origens. Se voc tambm selecionar uma consulta de mdia, esse painelreduzir a lista de seletores da consulta de mdia em questo. Se nenhum CSS ou consulta de mdia forem selecionados, esse painel exibirtodos 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.

Exibe as propriedades que voc pode definir para o seletor especificado. Para obter mais informaes, consulte Definio depropriedades.

O CSS Designer sensvel ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de pgina selecionado, voc pode exibiras propriedades e os seletores associados. Caso contrrio, quando voc selecionar um seletor no CSS Designer, as consultas de mdia e origemassociadas sero realadas nos respectivos painis.

Para obter mais informaes, consulte painel CSS Designer.

Viso geral das guias visuaisO Dreamweaver fornece vrios tipos de guias visuais para ajudar voc a projetar documentos e a prever sua aparncia nos navegadores. Vocpode 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 deimagens, 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.

26

http://idiom-q-win-1/content/help/br/dreamweaver/using/css-designer.html#main-pars_headerhttp://idiom-q-win-1/content/help/br/dreamweaver/using/css-designer.html#main-pars_headerhttp://idiom-q-win-1/content/help/br/dreamweaver/using/css-designer.html

As publicaes do Twitter e do Facebook no so cobertas pelos termos do Creative Commons.

Avisos legais | Poltica de privacidade on-line

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 encaixamautomaticamente no ponto de grade mais prximo ao serem movidos ou redimensionados. (Outros objetos, como imagens e pargrafos, nose encaixam na grade.) O encaixe funciona independentemente da visibilidade da grade.

Trabalho na janela Documento

Sobre a Visualizao dinmica

Informaes gerais sobre a codificao no Dreamweaver

Visualizao de pginas na Visualizao dinmica

Configuraes das preferncias de codificao

Visualizar e editar o contedo do cabealho

Uso de auxlios visuais para layout

Visualizao de pginas no Dreamweaver

Inserir cdigo com a Barra de ferramentas de codificao

Definir o tamanho da janela e a velocidade da conexo

Mais zoom e Menos zoom

Redimensionar a janela Documento

Definir o tempo de download e as preferncias de tamanho

Gerenciar janelas e painis

Usar o Inspetor de propriedades

Uso do painel Inserir

Trabalhar com arquivos no painel Arquivos

Uso de auxlios visuais para layout

27

http://creativecommons.org/licenses/by-nc-sa/3.0/http://help.adobe.com/pt_BR/legalnotices/index.htmlhttp://helpx.adobe.com/go/gffooter_online_privacy_policy_brhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7fb7a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/extend/WS47CFA49D-C679-4300-9116-32E3B8B65326.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7bf1a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WS753df6af718a350a-43cf1449133aea5253f-8000.html#WS0459F349-E2DC-4d31-ADCF-F954B79D9A77http://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7be0a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WS9B7F5238-39AB-4bab-8A63-BFFB12986AE2a.html#WSc78c5058ca073340dcda9110b1f693f21-7b70ahttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7dbea.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WS753df6af718a350a-43cf1449133aea5253f-8000.html#WS0459F349-E2DC-4d31-ADCF-F954B79D9A77http://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7bd8a.html#WSc78c5058ca073340dcda9110b1f693f21-7bcaahttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7fb7a.html#WScbb6b82af5544594822510a94ae8d65-7faaahttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7cfda.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7fb7a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7ceea.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7f82a.html#WS8599BC5C-3E44-406c-9288-C3B3BBEB5E88http://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7fa8a.html#WScbb6b82af5544594822510a94ae8d65-7f9bahttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7fa6a.htmlhttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7ed0a.html#WSc78c5058ca073340dcda9110b1f693f21-7ecdahttp://help.adobe.com/pt_BR/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7dbea.html

Personalizao da rea de trabalho do Dreamweaver

Para o incio

Gerenciamento de janelas e painisSalvamento e alternncia de espaos de trabalhoExibir documentos com abas (Dreamweaver Macintosh)Ativao de cones coloridosOcultar e exibir a tela de boas-vindas do DreamweaverSobre a personalizao do Dreamweaver em sistemas de vrios usuriosDefinir preferncias gerais do DreamweaverDefinir as preferncias de Fontes do DreamweaverPersonalizar cores de realce do DreamweaverRestaurar preferncias padro

Gerenciamento de janelas e painis possvel criar um espao de trabalho personalizado movendo e manipulando janelas de Documento e painis. Tambm possvel salvarespaos 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 documentosQuando 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 ouJanela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documento de uma vez. Consulte as notas tcnicaskb405298 para obter mais informaes.Nota: o Dreamweaver no oferece suporte a encaixe e desencaixe de janelas de Documento. Use o boto Minimizar da janela dodocumento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmente para criar janelas de documentos ladoa lado. Pesquise Lado a Lado Verticalmente no Ajuda do Dreamweaver para obter mais informaes sobre este tpico. O fluxo de trabalhopara 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 oulaterais 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 alado 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 painisUm encaixe um conjunto de painis ou grupos de painis exibidos juntos, geralmente em uma orientao vertical. Encaixe e desencaixe painismovendo-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 dentrode outro encaixe ou deix-lo flutuando livremente.

Movimentao de painisAo 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 outropainel. 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 omouse para o lugar onde ela deveria estar.

28

http://kb2.adobe.com/cps/405/kb405298.html

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 estivermovendo o painel para cancelar a operao.

Adio e remoo de painisSe todos os painis forem removidos de um encaixe, ele desaparecer. possvel criar um encaixe movendo os painis para a borda direita doespao 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 flutuantesSe for arrastado para um painel fora de seu encaixe mas no em uma zona para soltar, o painel flutuar livremente. O painel flutuante permiteposicion-lo em qualquer lugar no espao de trabalho. possvel empilhar painis flutuantes ou grupos de painis para que eles sejam movidoscomo 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 dettulo.

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.

29

Para o incio

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 duasvezes 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 serredimensionados 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 noespao 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 textodesaparecer. 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 interfacedo 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 socontrados 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 parabaixo no encaixe para outros encaixes (onde aparecem no estilo de painel desse encaixe), ou para fora do encaixe (onde aparecem comocones flutuantes).

Salvamento e alternncia de espaos de trabalhoSalvando o tamanho e a posio atuais dos painis como uma rea de trabalho nomeado, possvel restaurar essa rea de trabalho, caso vocmova 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.

30

Para o incio

(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, emseguida, 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 oartigo 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\\AppData\Roaming\Adobe\Fireworks CS4\

Windows XP \\Documents and Settings\\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 salvaNo Photoshop, as reas de trabalho aparecem automaticamente conforme voc as organizou da ltima vez, mas possvel restaurar aorganizao 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 dainterface.

Para reorganizar a ordem das reas de trabalho na barra de aplicativos, arraste-as.

Exibir documentos com abas (Dreamweaver Macintosh)Voc pode visualizar vrios documentos em uma nica janela usando abas para identificar cada um. Voc tambm pode exibi-los como parte deuma 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 abas1. 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

31

http://www.adobe/devnet/fireworks/articles/workspace_manager_panel.html

Para o incio

Para o incio

Para o incio

Para o incio

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

Ativao de cones coloridosPor 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 DreamweaverA tela de boas-vindas aparece quando voc inicia o Dreamweaver e a qualquer momento quando no h nenhum documento aberto. Voc podeoptar por ocultar a tela de boas-vindas e exibi-la novamente mais tarde. Quando a tela de boas-vindas est oculta e nenhum documento estaberto, 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-vindas1. 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 usuriosVoc pode personalizar o Dreamweaver de acordo com suas necessidades, mesmo em um sistema operacional de vrios usurios como oWindows 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, naprimeira vez em que executado em um dos sistemas operacionais de vrios usurios compatveis, o Dreamweaver cria cpias de diversosarquivos 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 deaplicativo\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 quefica oculta por padro. Para exibir arquivos e pastas ocultos, selecione Ferramentas > Opes de pasta no Windows Explorer, clique na abaExibir 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/ApplicationSupport/Adobe/Dreamweaver 9/Configuration.

Se o Dreamweaver for reinstalado ou atualizado, o Dreamweaver far cpias de backup automaticamente dos arquivos de configurao deusurio existente, de modo que se esses arquivos tiverem sido personalizados manualmente, voc ainda ter acesso s alteraes feitas.

Definir preferncias gerais do Dreamweaver1. Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).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 nenhumdocumento aberto.

Reabrir documentos ao inicializar Abre todos os documentos que estavam abertos quando o Dreamweaver foi fechado. Se essa opono for selecionada, o Dreamweaver exibir a tela de boas-vindas ou uma tela em branco ao inicializar (dependendo da configurao deMostrar tela de boas-vindas).

Avisar ao abrir arquivos somente leitura Avisa quando um arquivo somente leitura (bloqueado) aberto. Escolha paradesbloquear/retirar, visualizar ou cancelar o arquivo.

Ativar arquivos relacionados Permite ver quais arquivos esto conectados ao documento atual (por exemplo, arquivos CSS ou

32

Para o incio

JavaScript). O Dreamweaver exibe um boto para cada arquivo relacionado na parte superior do documento e abre o arquivo quando seclica no boto.

Identificar Arquivos rel. dinamicamente Permite que voc selecione se os Arquivos rel. dinamicamente sero exibidos automaticamentena 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 essapreferncia para atualizar sempre os links automaticamente, para nunca atualizar os links ou para perguntar antes de atualizar. ConsulteAtualizar links automaticamente.

Mostrar caixa de dilogo ao inserir objetos Determina se o Dreamweaver deve perguntar para incluir informaes adicionais ao inseririmagens, tabelas, filmes do Shockwave e alguns outros objetos usando o painel ou o menu Inserir. Se essa opo estiver desativada, acaixa de dilogo no aparecer e voc dever usar o Inspetor de propriedades para especificar o arquivo de origem de imagens, o nmerode linhas de uma tabela, etc. Para imagens de sobreposio e HTML do Fireworks, uma caixa de dilogo sempre aparece quando vocinsere o objeto, independentemente da configurao dessa opo. Para substituir temporariamente essa configurao, clique com a teclaControl (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 umambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como os caracteres japoneses). Quando essaopo 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 umpargrafo de cabealho na Visualizao de design cria um novo pargrafo com uma tag p no incio e no final. Um pargrafo de cabealhotem uma tag de cabealho, como h1 ou h2, no incio e no final do pargrafo. Quando essa opo est desativada, pressionar Enter ouReturn no final de um pargrafo de cabealho cria um novo pargrafo com a mesma tag de cabealho (permitindo que voc digite vrioscabealhos 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 consecutivosque aparecem como vrios espaos no navegador. Por exemplo, voc pode digitar dois espaos entre sentenas, como faria em umamquina 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 espaoscomo espaos nicos).

Usar e em vez de e Especifica que o Dreamweaver aplica a tag strong sempre que voc executa uma ao quenormalmente aplicaria a tag b e aplica a tag em sempre que voc executa uma ao que normalmente aplicaria a tag i. Essas aesincluem 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 doque as tags b e i.

Avisar ao incluir regies editveis entre tags

ou - Especifica se uma mensagem de aviso deve ser exibida sempre queum modelo do Dreamweaver com uma regio editvel em uma tag de pargrafo ou de cabealho for salvo. A mensagem informa que osusurios 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 aocentro, no Inspetor de propriedades.Nota: Esses dois mtodos de centralizao foram oficialmente reprovados na especificao do HTML 4.01; voc deve usar estilos CSSpara centralizar textos. Os dois mtodos ainda so tecnicamente vlidos de acordo com a especificao do XHTML 1.0 Transitional, masno 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 deveser suficiente para a maioria dos usurios.) Se voc ultrapassar o nmero definido de etapas no painel Histrico, as etapas mais antigassero 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 DreamweaverA codificao de um documento determina sua aparncia no navegador. As preferncias de fonte do Dreamweaver permitem visualizar umadeterminada codificao na fonte e no tamanho que voc preferir. Entretanto, as fontes que voc selecionar na caixa de dilogo Preferncias defontes afetam somente a forma que as fontes aparecem no Dreamweaver; elas no afetam a forma que o documento aparece no navegador deum visitante. Para alterar a forma que as fontes aparecem em um navegador, voc precisa alterar o texto usando o Inspetor de propriedades ouaplicando 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).

33

http://helpx.adobe.com/br/dreamweaver/using/creating-opening-documents.html

Para o incio

Para o incio

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, vocdeve ter uma fonte japonesa instalada.Fonte proporcional A fonte usada pelo Dreamweaver para exibir textos normais (por exemplo, textos de pargrafos, cabealhos etabelas). O padro depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padro a fonte Times NewRoman 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 seusistema. 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 padrodepende das fontes instaladas no seu sistema.

Personalizar cores de realce do DreamweaverUse as preferncias de realce para personalizar as cores que identificam regies de modelo, itens de biblioteca, tags de terceiros, elementos delayout e cdigos no Dreamweaver.

Alterar uma cor de realce1. 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 objeto1. 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 padroPara saber os procedimentos para restaurar as preferncias padro do Dreamweaver, consulte Tech Note 83912.

Mais tpicos da AjudaViso geral do layout da rea de trabalho

Avisos legais | Poltica de privacidade on-line

34

http://kb2.adobe.com/cps/839/cpsid_83912.htmlhttp://helpx.adobe.com/br/dreamweaver/using/dreamweaver-workflow-workspace.htmlhttp://creativecommons.org/licenses/by-nc-sa/3.0/http://helpx.adobe.com/br/legal/legal-notices.htmlhttp://helpx.adobe.com/go/gffooter_online_privacy_policy_br

Trabalho na janela Documento

Para o incio

Alternar entre visualizaes na janela DocumentoJanelas de documento em cascata ou lado a ladoRedimensionar a janela DocumentoDefinir o tamanho da janela e a velocidade da conexoRelatrios no Dreamweaver

Alternar entre visualizaes na janela DocumentoVoc 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 visualizaoDividir 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 cdigoA 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. Paraexibir 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 aoutra.

Dividir verticalmente as visualizaesEsta opo est disponvel somente na visualizao Dividir cdigo e nas visualizaes de cdigo e de design (Dividir visualizao). Estdesabilitado 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 edesign).

2. Selecione Exibir > Dividir verticalmente.

35

Para o incio

Para o incio

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

Janelas de documento em cascata ou lado a ladoSe houver muitos documentos abertos ao mesmo tempo, voc pode organiz-los em cascata ou lado a lado.

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 DocumentoA barra de status exibe as dimenses atuais da janela Documento (em pixels). Para projetar uma pgina cuja aparncia fica melhor em umtamanho especfico, voc pode ajustar a janela Documento para qualquer tamanho predefinido, editar esses tamanhos predefinidos ou criarnovos tamanhos.

Quando voc altera o tamanho da visualizao de uma pgina na visualizao de design ou dinmica, somente as dimenses da visualizaoso 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 baseem 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 dispositivomvel listado entre parnteses.

Para um redimensionamento menos preciso, use os mtodos padro de redimensionamento de janelas do seu sistema operacional, comoarrastar o canto inferior direito de uma janela.

Nota: (Apenas Windows) Documentos na janela Documento so, por padro, maximizados, e voc no pode redimensionar um documentoquando ele est maximizado. Para restaurar abaixo o documento, clique no boto Restaurar abaixo no canto superior direito do documento.

Alterar os valores listados no menu pop-up Tamanho da janela1. 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 janela1. 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

36

Para o incio

Para o incio

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

Velocidade de conexo Determina a velocidade de conexo (em quilobits por segundo) usada para calcular o tamanho do download. Otamanho do download da pgina exibido na barra de status. Quando uma imagem selecionada na janela Documento, o tamanho dedownload da imagem exibido no Inspetor de propriedades.Nota: A velocidade de conexo foi removida no Dreamweaver CC e posterior.

Relatrios no DreamweaverVoc pode executar relatrios no Dreamweaver para localizar contedos, solucionar problemas ou testar contedos. Voc pode gerar osseguintes 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 pelosnavegadores de destino.Verificador de links Permite encontrar e corrigir links rompidos, externos e rfosRelatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de trabalho incluem DesignNotes 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.Nota: O suporte para o ColdFusion foi removido no Dreamweaver CC e posterior.Mais tpicos da AjudaViso geral da janela Documento

Avisos legais | Poltica de privacidade on-line

37

http://helpx.adobe.com/br/dreamweaver/using/dreamweaver-workflow-workspace.htmlhttp://creativecommons.org/licenses/by-nc-sa/3.0/http://helpx.adobe.com/br/legal/legal-notices.htmlhttp://helpx.adobe.com/go/gffooter_online_privacy_policy_br

Uso de barras de ferramentas, inspetores e menus de contexto

Para o incio

Para o incio

Para o incio

Exibir barras de ferramentasUsar o Inspetor de propriedadesUsar menus de contexto

Exibir barras de ferramentasUse as barras de ferramentas Documento e Padro para realizar operaes relacionadas a documentos e de edio padro, a barra deferramentas de codificao para inserir o cdigo rapidamente e a barra de ferramentas Processamento do estilo para exibir a pgina exatamentecomo 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 deferramentas 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 deferramentas de codificao no menu pop-up Opes de visualizao, na parte superior do inspetor.

Usar o Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pgina selecionado atualmente, como textoou 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 ouselecione 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 pgina1. 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 nocanto 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 contextoOs menus de contexto fornecem acesso fcil maioria dos comandos teis e das propriedades relacionadas ao objeto ou janela com o qual esttrabalhando. 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.

38

Mais tpicos da AjudaViso geral da barra de ferramentas de documento

Definir propriedades de texto no Inspetor de propriedades

Avisos legais | Poltica de privacidade on-line

39

http://helpx.adobe.com/br/dreamweaver/using/dreamweaver-workflow-workspace.htmlhttp://helpx.adobe.com/br/dreamweaver/using/set-text-properties-property-inspector.htmlhttp://creativecommons.org/licenses/by-nc-sa/3.0/http://helpx.adobe.com/br/legal/legal-notices.htmlhttp://helpx.adobe.com/go/gffooter_online_privacy_policy_br

Uso do painel Inserir

Nota:

Para o incio

Nota:

Para o incio

Para o incio

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 InserirMostrar os botes em uma categoria especficaExibir o menu pop-up para um botoInserir um objetoIgnorar a caixa de dilogo de insero de objeto e inserir um objeto de alocador de espao vazioModificar preferncias do painel InserirAdicionar, excluir ou gerenciar itens na categoria Favoritos do painel InserirInserir objetos usando botes na categoria FavoritosExibir o painel Inserir como uma Barra de insero horizontalReverter a Barra de insero horizontal para um grupo de painisMostrar categorias da Barra de insero horizontal como abasMostrar categorias da Barra de insero horizontal como um menu

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

Ocultar ou mostrar o painel InserirSelecione Janela > Inserir.

Se voc estiver trabalhando com determinados tipos de arquivo, como XML, Jav