Apostila dreamweaver-cs5

697
Uso do ADOBE ® DREAMWEAVER ® CS5

Transcript of Apostila dreamweaver-cs5

para selecionar o corpo inteiro do documento. Para definir osatributos class ou ID de uma tag no seletor de tags, clique com o boto direito do mouse (Windows) ou com a teclaControl 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 janelaDocumento para dimenses predefinidas ou personalizadas.Tamanho do documento e tempo de download Mostra o tamanho aproximado do documento e o tempo de downloadestimado 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.Mais tpicos da AjudaDefinir o tamanho da janela e a velocidade da conexo na pgina 20Mais zoom e Menos zoom na pgina 215Redimensionar a janela Documento na pgina 19Definir o tempo de download e as preferncias de tamanho na pgina 217Viso geral do Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pginaselecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordocom o elemento selecionado. Por exemplo, se voc selecionar uma imagem da pgina, o Inspetor de propriedadesmudar para mostrar as propriedades da imagem (como o caminho do arquivo at a imagem, a largura e a altura daimagem, a borda em torno da imagem, se houver, e assim por diante). 20. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 14 rea de trabalhoPor padro, o Inspetor de propriedades fica na borda inferior da rea de trabalho, mas voc pode desencaixar e torn-lo um painel flutuante nessa rea.Mais tpicos da AjudaEncaixe e desencaixe de painis na pgina 24Usar o Inspetor de propriedades na pgina 22Viso geral do painel InserirO painel Inserir contm botes para criar e inserir objetos, como tabelas, imagens e links. Os botes so organizados emvrias categorias, que podem ser alternadas pela seleo da categoria desejada no menu pop-up Categoria. Categoriasadicionais aparecem quando o documento atual contm o cdigo do servidor, como documentos ASP ou CFML.Algumas categorias tm botes com menus pop-up. Ao selecionar uma opo em um menu pop-up, essa opo setransforma 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 que clicar no boto Imagem, o Dreamweaver vai inserir um alocador de espaode 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 freqncia, como imagens e tabelas.Categoria Layout Permite inserir tabelas, elementos de tabelas, tags div, quadros e widgets do Spry. Voc tambmpode escolher duas visualizaes para tabelas: Padro (opo padro) e Tabelas expandidas.Categoria Formulrios Contm botes para criar formulrios e inserir elementos de formulrios, incluindo widgets devalidao 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. 21. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 15rea de trabalhoCategoria Spry Contm botes para criar pginas do Spry, incluindo objetos de dados e widgets do Spry.A categoria do InContext Editing Contm botes para criar pginas do InContext Editing, incluindo botes paraRegies editveis, Regies repetitivas e gerenciamento 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 usados com mais freqncia em um lugarcomum.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 decdigo do servidor que podem ser inseridos na Visualizao de cdigo.Diferente dos outros painis do Dreamweaver, voc pode arrastar o painel Inserir para fora de sua posio de encaixepadro e solt-lo em uma posio horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de umpainel para uma barra de ferramentas (embora voc no possa ocult-lo e exibi-lo da mesma forma que se faz com asoutras barras de ferramentas).Mais tpicos da AjudaUso do painel Inserir na pgina 205Criao visual de pginas do Spry na pgina 423Viso geral do painel ArquivosUse o painel Arquivos para visualizar e gerenciar os arquivos no site do Dreamweaver.Ao visualizar sites, arquivos ou pastas no painel Arquivos, voc pode alterar o tamanho da rea de visualizao eexpandir ou reduzir o painel Arquivos. Quando est reduzido, o painel Arquivos exibe o contedo do site local, o siteremoto, o servidor de teste ou o repositrio SVN como uma lista de arquivos. Quando expandido, ele exibe o site locale o site remoto, o servidor de teste ou o repositrio SVN.Para os sites do Dreamweaver, voc tambm pode personalizar o painel Arquivos alterando a visualizao (site localou remoto) que aparece por padro no painel reduzido. 22. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 16 rea de trabalhoMais tpicos da AjudaTrabalhar com arquivos no painel Arquivos na pgina 76Viso geral do painel Estilos CSSO painel Estilos CSS permite rastrear as regras e propriedades CSS que afetam o elemento de pgina selecionadoatualmente (modo Atual) ou as regras e propriedades que afetam o documento inteiro (modo Tudo). Um boto dealternncia na parte superior do painel Estilos CSS permite alternar entre os dois modos. O painel Estilos CSS tambmpermite modificar propriedades CSS no modo Tudo e no modo Atual.Para redimensionar qualquer painel, arraste as bordas entre os painis.No modo Atual, o painel Estilos CSS exibe trs painis: o painel Resumo para seleo que exibe as propriedades CSSda seleo atual do documento, o painel Regras que exibe o local das propriedades selecionadas (ou regras em cascatapara a tag selecionada, dependendo da seleo) e o painel Propriedades que permite editar propriedades CSS para aregra que define a seleo.No modo Tudo, o painel Estilos CSS exibe dois painis: o painel Todas as regras (na parte superior) e o painelPropriedades (na parte inferior). O painel Todas as regras exibe uma lista de regras definidas no documento atual, bemcomo as regras definidas nas folhas de estilo anexadas ao documento atual. O painel Propriedades permite editarpropriedades CSS para todas as regras selecionadas no painel Todas as regras.Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualizeenquanto trabalha.Mais tpicos da AjudaCriao e gerenciamento de CSS na pgina 128 23. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 17rea de trabalhoViso geral das guias visuaisO Dreamweaver fornece vrios tipos de guias visuais para ajudar voc a projetar documentos e a prever sua aparncianos navegadores. Voc pode executar qualquer um dos seguintes procedimentos: Encaixar instantaneamente a janela Documento no tamanho de janela desejado para ver como os elementos seajustam na pgina. Usar uma imagem de decalque como fundo da pgina para ajudar a duplicar um projeto criado em um aplicativode ilustrao ou edio de imagens, como o Adobe Photoshop ou Adobe Fireworks. Usar rguas e guias para fornecer uma pista visual do posicionamento preciso e do redimensionamento doselementos de pgina. Usar a grade para posicionar com preciso e redimensionar os 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.Mais tpicos da AjudaUso de auxlios visuais para layout na pgina 172Usurios do GoLiveSe estiver usando o GoLive e desejar voltar a trabalhar com o Dreamweaver, voc pode encontrar uma apresentaoon-line da rea de trabalho e do fluxo de trabalho do Dreamweaver, bem como maneiras para migrar seus sites para oDreamweaver. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_golive_br.Mais tpicos da AjudaTutorial do Dreamweaver para usurios do GoLiveTrabalho na janela DocumentoAlternar 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 Visualizaodinmica. Voc tambm tem a opo de exibir a visualizao Dividir cdigo ou as visualizaes de cdigo e de designna 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. 24. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 18 rea de trabalhoAlternar para a visualizao Dividir cdigoA visualizao Dividir cdigo divide o documento em dois, assim voc pode trabalhar nas duas sees de cdigo deuma vez s. Selecione Exibir > Dividir cdigo.Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, oDreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.Passar para a Visualizao de design Siga um destes procedimentos: Selecione Visualizar > 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 dajanela Documento. Para exibir a Visualizao de design na parte superior, selecione Exibir > Visualizao de design naparte superior.Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, oDreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.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 umavisualizao para a outra.Dividir verticalmente as visualizaesEsta opo est disponvel somente na visualizao Dividir cdigo e nas visualizaes de cdigo e de design (Dividirvisualizao). Est desabilitado para a Visualizao de cdigo e para a Visualizao de design.1 Certifique-se de estar na visualizao Dividir cdigo (Visualizao > Dividir cdigo) ou nas visualizaes de cdigo e de design (Visualizao > 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(Visualizao > Visualizao de design esquerda).Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, oDreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis. 25. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 19 rea de trabalhoMais tpicos da AjudaViso geral da janela Documento na pgina 8Visualizao de pginas na Visualizao dinmica na pgina 287Janelas 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.Mais tpicos da AjudaGerenciamento de janelas e painis na pgina 23Exibir documentos com abas (Dreamweaver Macintosh) na pgina 29Janelas 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 aparnciafica melhor em um tamanho especfico, voc pode ajustar a janela Documento para qualquer tamanho predefinido,editar esses tamanhos predefinidos ou criar novos tamanhos.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.Nota: (Apenas Windows) Documentos na janela Documento so, por padro, maximizados, e voc no poderedimensionar um documento quando ele est maximizado. Para restaurar abaixo o documento, clique no botoRestaurar abaixo no canto superior direito do documento.O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem as bordas; o tamanho domonitor listado entre parnteses. Por exemplo, voc usaria o tamanho 536 x 196 (640 x 480, Padro) provavelmentese os visitantes estivessem usando o Microsoft Internet Explorer ou o Netscape Navigator nas configuraes padroem um monitor de 640 x 480. 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. 26. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 20rea de trabalhoAlterar 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 alturae 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 Macde 17 pol. prximo a uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada paradiversas dimenses de pixel.Definir o tamanho da janela e a velocidade da conexo1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).2 Selecione Barra de status na 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 tamanhodo download. O tamanho do download da pgina exibido na barra de status. Quando uma imagem selecionada najanela Documento, o tamanho de download da imagem exibido no Inspetor de propriedades.Mais tpicos da AjudaViso geral da barra de status na pgina 13Redimensionar a janela Documento na pgina 19Relatrios no DreamweaverVoc 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 27. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 21rea de trabalhoRelatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo detrabalho incluem Design Notes verificadas e modificadas recentemente; os relatrios HTML incluem tags de fonteaninhadas que podem ser combinadas, acessibilidade, textos alternativos ausentes, tags aninhadas redundantes, tagsvazias 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 AjudaProcurar tags, atributos ou texto no cdigo na pgina 319Uso do material de referncia a linguagem na pgina 320Teste do site na pgina 106Validar tags na pgina 325Verificar compatibilidade de navegador na pgina 325Encontrar links rompidos, externos e rfos na pgina 284Colocar arquivos em um servidor remoto na pgina 84Obter arquivos de um servidor remoto na pgina 82Usar o depurador do ColdFusion (somente Windows) na pgina 327Uso de barras de ferramentas, inspetores e menus decontextoExibir barras de ferramentasUse as barras de ferramentas Documento e Padro para realizar operaes relacionadas a documentos e de ediopadro, a barra de ferramentas de codificao para inserir o cdigo rapidamente e a barra de ferramentasProcessamento do estilo para exibir a pgina exatamente como apareceria em tipos de mdia diferentes. Voc podeexibir 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 qualqueruma 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.Mais tpicos da AjudaViso geral da barra de ferramentas de documento na pgina 9Viso geral da barra de ferramentas Padro na pgina 10Viso geral da barra de ferramentas de codificao na pgina 12Viso geral da barra de ferramentas Processamento do estilo na pgina 11 28. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 22 rea de trabalhoUsar o Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pginaselecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordocom 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 Inspetorde 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.Mais tpicos da AjudaViso geral do Inspetor de propriedades na pgina 13Definir propriedades de texto no Inspetor de propriedades na pgina 227Encaixe e desencaixe de painis na pgina 24Alterar atributos com o Inspetor de tags na pgina 329Mostrar 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 elementoselecionado.2 Altere qualquer propriedade no Inspetor de propriedades.Nota: Para obter informaes sobre propriedades especficas, selecione um elemento na janela Documento e clique nocone 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 contextoOs menus de contexto fornecem acesso fcil maioria dos comandos teis e das propriedades relacionadas ao objetoou janela com o qual est trabalhando. Os menus de contexto listam somente os comandos que pertencem seleoatual.1 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no objeto ou janela. 29. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 23 rea de trabalho2 Selecione um comando no menu de contexto.Personalizao da rea de trabalho do CS4Gerenciamento de janelas e painis 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 trabalhopersonalizadas pode levar a um comportamento inesperado.Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A rea de trabalho funciona da mesma formaem 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 nogrupo. Para desencaixar (flutuar ou separar a guia) uma janela de documento de um grupo de janelas, arraste a guia dajanela para fora do grupo. 30. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 24 rea de trabalho 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. Para encaixar uma janela de Documento em um grupo separado de janelas de Documento, arraste a janela para ogrupo. Para criar grupos de documentos empilhados ou lado a lado, arraste a janela para uma das zonas de destino naspartes superior, inferior ou laterais de qualquer janela. Voc tambm pode selecionar um layout para o grupousando 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 algunsinstantes. 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 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 entreoutros painis. Para encaixar um grupo de painis, arraste-o pela barra de ttulo (a barra slida vazia acima das guias) para dentrodo encaixe. Para remover um painel ou grupo de painis, arraste-o para fora do encaixe pela guia ou barra de ttulo. possvelarrast-lo para dentro de outro encaixe ou deix-lo flutuando livremente.Painel de navegao arrastado para um novo encaixe, indicado pelo realce vertical azul 31. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 25rea de trabalhoPainel de navegao no encaixe possvel evitar que os painis preencham todo o espao no encaixe. Arraste a borda inferior do encaixe para cimade modo que ele no corresponda mais borda do espao de trabalho.Movimentao de painisAo mover painis, voc visualizar zonas para soltar realadas em azul, que so reas nas quais possvel mover opainel. Por exemplo, possvel mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona parasoltar azul estreita, acima ou abaixo de outro painel. Se for arrastado para uma rea que no uma zona para soltar, opainel 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 dedestino, 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).ABCA 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 soltarPressione 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 painisSe todos os painis forem removidos de um encaixe, ele desaparecer. possvel criar um encaixe movendo os painispara 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 Controlpressionada, 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. 32. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 26rea de trabalhoManipulao 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. Opainel flutuante permite posicion-lo em qualquer lugar no espao de trabalho. possvel empilhar painis flutuantesou 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 outropainel. 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 oupela barra de ttulo.Redimensionamento de painis Para minimizar ou maximizar um painel, grupo de painis ou pilha de painis, clique duas vezes na guia. Voctambm 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 socontrados em cones no espao de trabalho padro. 33. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 27 rea de trabalhoPainis recolhidos em conesPainis expandidos de cones Para contrair ou expandir todos os cones de painis numa coluna, clique na seta dupla na parte superior doencaixe. 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 doencaixe 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 dopainel. 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 barrade 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 painelpara cima e para baixo no encaixe para outros encaixes (onde aparecem no estilo de painel desse encaixe), ou parafora do encaixe (onde aparecem como cones 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 reade trabalho, caso voc mova ou feche um painel. Os nomes dos espaos de trabalho salvos aparecem no alternador deespaos de trabalho na Barra de aplicativos. 34. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 28rea de trabalhoSalvamento de uma rea de trabalho personalizada1 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 do 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 reade 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, emseguida, clique no cone Excluir. (Photoshp, InDesign) Escolha Janela > rea de Trabalho > Excluir rea de Trabalho, selecione a rea de trabalhoe, em seguida, clique em Excluir.Restaurao do espao de trabalho padro1 Selecione a rea de trabalho Padro ou Fundamentos no alternador de rea de trabalho na barra de aplicativos. Nota: No Dreamweaver, Designer a rea de trabalho padro.2 (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 a organizao de painis original e salva. Para restaurar uma rea de trabalho individual, selecione Janela > rea de Trabalho > Redefinir Nome da rea detrabalho. Para restaurar todas as reas de trabalho instaladas com o Photoshop, clique em Restaurar reas de trabalho padronas preferncias da interface. Para reorganizar a ordem das reas de trabalho na barra de aplicativos, arraste-as. 35. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 29rea de trabalhoExibir documentos com abas (Dreamweaver Macintosh)Voc pode visualizar vrios documentos em uma nica janela usando abas para identificar cada um. Voc tambmpode 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 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 soalteradas. No entanto, os documentos abertos depois da seleo de uma nova preferncia so exibidos de acordo coma preferncia selecionada.Ativao de cones coloridosPor padro, o Dreamweaver CS4 e posterior usa cones em preto e branco que se tornam coloridos quando voc passao mouse sobre eles. Voc pode deixar os cones coloridos ativados de modo permanente, para que no seja necessriopassar 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 reade trabalho diferente.Mais tpicos da AjudaExibio ou alternncia entre espaos de trabalho na pgina 28Ocultar 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 nenhumdocumento aberto. Voc pode optar por ocultar a tela de boas-vindas e exibi-la novamente mais tarde. Quando a telade 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-vindas1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).2 Na categoria Geral, selecione a opo Mostrar tela de boas-vindas. 36. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 30 rea de trabalhoSobre a personalizao do Dreamweaver em sistemas de vrios usuriosVoc pode personalizar o Dreamweaver de acordo com suas necessidades, mesmo em um sistema operacional devrios 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 outrousurio. Para fazer isso, na primeira vez em que executado em um dos sistemas operacionais de vrios usurioscompatveis, o Dreamweaver cria cpias de diversos arquivos de configurao. Esses arquivos de configurao deusurio so armazenados em uma pasta que pertence a voc.Por exemplo, no Windows XP, eles so armazenados em C:Documents and Settingsnome de usurioDados deaplicativoAdobeDreamweaverpt_BRConfiguration, que est oculta por padro. Para exibir arquivos e pastasocultos, selecione Ferramentas > Opes de pasta no Windows Explorer, clique na aba Exibir e selecione a opoMostrar arquivos e pastas ocultos.No Windows Vista, eles so armazenados em C:Usersnome de usurioAppDataRoamingAdobeDreamweaverpt_BRConfiguration, 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 ocultos.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 arquivosde configurao de usurio existente, de modo que se esses arquivos tiverem sido personalizados manualmente, vocainda 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 osdocumentos (somente Macintosh).Mostrar tela de boas-vindas Exibe a tela de boas-vindas do Dreamweaver quando voc inicia o Dreamweaver ouquando no h nenhum documento aberto.Reabrir documentos ao inicializar Abre todos os documentos que estavam abertos quando o Dreamweaver foifechado. Se essa opo no for selecionada, o Dreamweaver exibir a tela de boas-vindas ou uma tela em branco aoinicializar (dependendo da configurao de Mostrar tela de boas-vindas).Avisar ao abrir arquivos somente leitura Avisa quando um arquivo somente leitura (bloqueado) aberto. Escolhapara desbloquear/retirar, visualizar ou cancelar o arquivo.Ativar arquivos relacionados Permite ver quais arquivos esto conectados ao documento atual (por exemplo, arquivosCSS ou JavaScript). O Dreamweaver exibe um boto para cada arquivo relacionado na parte superior do documentoe abre o arquivo quando se clica no boto.Identificar Arquivos rel. dinamicamente Permite que voc selecione se os Arquivos rel. dinamicamente sero exibidosautomaticamente na barra de ferramentas de Arquivos relacionados ou aps interao manual. Tambm possveldesabilitar a identificao de Arquivos rel. dinamicamente.Atualizar links ao mover arquivos Determina o que acontece ao mover, renomear ou excluir um documento do seusite. Defina essa preferncia para atualizar sempre os links automaticamente, para nunca atualizar os links ou paraperguntar antes de atualizar. Consulte Atualizar links automaticamente na pgina 278. 37. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 31 rea de trabalhoMostrar caixa de dilogo ao inserir objetos Determina se o Dreamweaver deve perguntar para incluir informaesadicionais 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 paraespecificar o arquivo de origem de imagens, o nmero de linhas de uma tabela, etc. Para imagens de sobreposio eHTML do Fireworks, uma caixa de dilogo sempre aparece quando voc insere o objeto, independentemente daconfigurao 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 seestiver usando um ambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como oscaracteres japoneses). Quando essa opo no est selecionada, uma janela de entrada de texto aparece para a inseroe 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 nofinal. Um pargrafo de cabealho tem uma tag de cabealho, como h1 ou h2, no incio e no final do pargrafo. Quandoessa opo est desativada, pressionar Enter ou Return no final de um pargrafo de cabealho cria um novo pargrafocom a mesma tag de cabealho (permitindo que voc digite vrios cabealhos em uma linha e, em seguida, volte parapreencher os detalhes).Permitir vrios espaos consecutivos Especifica que digitar dois ou mais espaos na Visualizao de design criaespaos consecutivos que aparecem como vrios espaos no navegador. Por exemplo, voc pode digitar dois espaosentre sentenas, como faria em uma mquina de escrever. Essa opo foi desenvolvida principalmente para pessoasque esto acostumadas a digitar em editores de texto. Quando essa opo est desativada, vrios espaos so tratadoscomo um nico espao (porque os navegadores tratam vrios espaos como espaos nicos).Usar e em vez de e Especifica que o Dreamweaver aplica a tag strong sempre que vocexecuta uma ao que normalmente aplicaria a tag b e aplica a tag em sempre que voc executa uma ao quenormalmente aplicaria a tag i. Essas aes incluem o clique nos botes Negrito ou Itlico no Inspetor de propriedadesde texto, no modo HTML, e a seleo de Formatar > Estilo > Negrito ou Formatar > Estilo > Itlico. Para usar as tagsb 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 informaesmais semnticas do que as tags b e i.Avisar ao incluir regies editveis entre tags

ou

- Especifica se uma mensagem de aviso deve serexibida sempre que um modelo do Dreamweaver com uma regio editvel em uma tag de pargrafo ou de cabealhofor salvo. A mensagem informa que os usurios no podero criar mais pargrafos na regio. A opo est ativada porpadro.Centralizao Especifica se voc deseja centralizar elementos usando a tag divalign="center" ou center ao clicarno 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 usarestilos CSS para centralizar textos. Os dois mtodos ainda so tecnicamente vlidos de acordo com a especificao doXHTML 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. (Ovalor padro deve ser suficiente para a maioria dos usurios.) Se voc ultrapassar o nmero definido de etapas nopainel Histrico, as etapas mais antigas sero descartadas.Para obter mais informaes, consulte Automao de tarefa na pgina 265.Dicionrio de ortografia Lista os dicionrios de ortografia disponveis. Se um dicionrio tiver vrios dialetos ouconvenes de ortografia (como ingls americano e ingls britnico), os dialetos sero listados separadamente nomenu pop-up Dicionrio. 38. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 32 rea de trabalhoMais tpicos da AjudaViso geral do layout da rea de trabalho na pgina 5Atualizar links automaticamente na pgina 278Definir as preferncias de Fontes do DreamweaverA codificao de um documento determina sua aparncia no navegador. As preferncias de fonte do Dreamweaverpermitem visualizar uma determinada codificao na fonte e no tamanho que voc preferir. Entretanto, as fontes quevoc selecionar na caixa de dilogo Preferncias de fontes afetam somente a forma que as fontes aparecem noDreamweaver; elas no afetam a forma que o documento aparece no navegador de um visitante. Para alterar a formaque as fontes aparecem em um navegador, voc precisa alterar o texto usando o Inspetor de propriedades ou aplicandouma regra de CSS.Para obter informaes sobre como definir uma codificao padro para novos documentos, consulte Criao eabertura de documentos na pgina 59.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 emjapons, 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, opadro 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 dasfontes 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 decdigo. O padro depende das fontes instaladas no seu sistema.Mais tpicos da AjudaIntroduo codificao de documento na pgina 211Personalizar cores de realce do DreamweaverUse as preferncias de realce para personalizar as cores que identificam regies de modelo, itens de biblioteca, tags deterceiros, elementos de layout e cdigos no Dreamweaver.Mais tpicos da AjudaUsar o seletor de cores na pgina 215Alterar a cor de realce das tags div na pgina 158 39. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 33 rea de trabalhoAlterar 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.Atalhos do tecladoCriar uma folha de referncia para o conjunto de atalhos atualUma folha de referncia um registro do conjunto de atalhos atual. As informaes so armazenadas em uma tabelaHTML. Voc pode visualizar a folha de referncia em um navegador da Web ou imprimi-la.1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).2 Clique no boto Exportar conjunto como HTML, que o terceiro boto na parte superior da caixa de dilogo.3 Na caixa de dilogo Salvar exibida, insira o nome da folha de referncia e selecione o local adequado para salvar o arquivo.Personalizar atalhos de tecladoUse o Editor de atalho de teclado para criar suas prprias teclas de atalho, incluindo atalhos para snippets de cdigo.Voc tambm pode remover atalhos, editar atalhos existentes e selecionar um conjunto predefinido de atalhos noEditor de atalho de teclado.Mais tpicos da AjudaTrabalho com snippets de cdigo na pgina 318Criar um atalho de tecladoCrie suas prprias teclas de atalho, edite os atalhos existentes ou selecione um conjunto predefinido de atalhos.1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).2 Selecione uma das opes a seguir e clique em OK:Conjunto atual Permite escolher um conjunto de atalhos predefinidos includo no Dreamweaver ou qualquerconjunto personalizado que voc tenha definido. Os conjuntos predefinidos esto listados na parte superior do menu.Por exemplo, se voc estiver familiarizado com os atalhos encontrados no HomeSite ou BBEdit, poder usar essesatalhos escolhendo o conjunto predefinido correspondente.Comandos Permite selecionar uma categoria de comandos para edio. Por exemplo, voc pode editar comandos demenu, como o comando Abrir, ou comandos de edio de cdigo, como Ajustar chaves. Para adicionar ou editar um atalho do teclado para um snippet de cdigo, selecione Snippet no menu pop-up Comandos. 40. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 34 rea de trabalhoLista de comandos Exibe os comandos associados categoria selecionada no menu pop-up Comandos, junto com osatalhos designados. A categoria Comandos de menu exibe essa lista como uma exibio em rvore que mostra aestrutura dos menus. As outras categorias listam os comandos por nome (como Sair do aplicativo), em uma listasimples.Atalhos Exibe todos os atalhos atribudos ao comando selecionado.Adicionar item (+) Adiciona um novo atalho ao comando atual. Clique nesse boto para adicionar uma nova linha embranco a Atalhos. Insira uma nova combinao de teclas e clique em Alterar para adicionar um novo atalho do tecladopara esse comando. Voc pode atribuir dois atalhos diferentes para cada comando; se j houver dois atalhos atribudosa um comando, o boto Adicionar item no ter nenhum efeito.Remover item (-) Remove o atalho selecionado da lista de atalhos.Pressionar tecla Exibe a combinao de teclas inserida ao adicionar ou alterar um atalho.Alterar Adiciona a combinao de teclas mostrada em Pressionar tecla lista de atalhos ou altera o atalho selecionadopara a combinao de teclas especificada.Conjunto duplicado Duplica o conjunto atual. D um nome ao novo conjunto; o nome padro o nome do conjuntoatual com a palavra copy anexada.Renomear conjunto Renomeia o conjunto atual.Exportar como arquivo HTML Salva o conjunto atual em uma tabela HTML para facilitar a visualizao e a impresso.Voc pode abrir o arquivo HTML no seu navegador e imprimir os atalhos para facilitar a referncia.Excluir conjunto Exclui um conjunto. Voc no pode excluir o conjunto ativo.Remover um atalho de um comando1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).2 No menu pop-up Comandos, selecione uma categoria de comando.3 Na lista Comandos, selecione um comando e, em seguida, selecione um atalho.4 Clique no boto Remover item (-).Adicionar um atalho a um comando1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).2 No menu pop-up Comandos, selecione uma categoria de comando.3 Na lista Comandos, selecione um comando. Para adicionar um atalho do teclado para um snippet de cdigo, selecione Snippet no menu pop-up Comandos.Os atalhos atribudos ao comando aparecem em Atalhos.4 Prepare-se para adicionar um atalho seguindo um destes procedimentos: Se houver menos de dois atalhos j atribudos ao comando, clique no boto Adicionar item (+). Uma nova linhaem branco exibida em Atalhos e o ponto de insero movido at Pressionar tecla. Se j houver dois atalhos atribudos ao comando, selecione um deles (que ser substitudo pelo novo atalho). Emseguida, clique em Pressionar tecla.5 Pressione uma combinao de teclas. A combinao de teclas exibida em Pressionar tecla. 41. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 35rea de trabalhoNota: Se houver um problema com a combinao de teclas (por exemplo, se a combinao de teclas j tiver sido atribudaa outro comando), uma mensagem explicativa ser exibida abaixo de Atalhos e voc talvez no consiga adicionar oueditar o atalho.6 Clique em Alterar. A nova combinao de teclas atribuda ao comando.Editar um atalho existente1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh).2 No menu pop-up Comandos, selecione uma categoria de comando.3 Na lista Comandos, selecione um comando e, em seguida, selecione um atalho a ser alterado.4 Clique em Pressionar tecla e insira uma nova combinao de teclas.5 Clique no boto Alterar para alterar o atalho.Nota: Se houver um problema com a combinao de teclas (por exemplo, se a combinao de teclas j tiver sido atribudaa outro comando), uma mensagem explicativa ser exibida abaixo do campo Atalhos e voc talvez no consiga adicionarou editar o atalho.Sobre atalhos de teclado e teclados que no so do alfabeto ingls (EUA)Os atalhos de teclado padro do Dreamweaver funcionam principalmente em teclados padro do alfabeto ingls(EUA). Os teclados de outros pases (incluindo os produzidos no Reino Unido) talvez no forneam a funcionalidadenecessria para utilizar esses atalhos. Se seu teclado no der suporte a alguns atalhos ativados pelo Dreamweaver, suafuncionalidade ser desativada.Para personalizar atalhos do teclado que funcionam com teclados que no so padro do alfabeto ingls (EUA),consulte Alterao dos mapeamentos de atalho de teclado em Extenso do Dreamweaver.ExtensesAdicionar e gerenciar extenses no DreamweaverAs extenses so novos recursos que podem ser adicionados facilmente ao Dreamweaver. Voc pode usar muitos tiposde extenses; por exemplo, existem extenses que permitem reformatar tabelas, conectar-se com bancos de dadosback-end ou ajudar a gravar scripts para navegadores.Nota: Para instalar extenses s quais todos os usurios tenham acesso em um sistema operacional de vrios usurios,voc deve estar conectado como Administrador (Windows) ou root (Mac OS X).Para encontrar as extenses mais recentes para o Dreamweaver, acesse o site do Adobe Exchange emwww.adobe.com/go/dreamweaver_exchange_br. No site, voc poder acessar e baixar extenses (muitas sogratuitas), participar de grupos de discusso, visualizar classificaes e comentrios de usurios e instalar e usar oGerente de extenso. necessrio instalar o Gerente de extenso antes de instalar as extenses.O Gerente de extenso um aplicativo separado que permite instalar e gerenciar extenses nos aplicativos da Adobe.Inicie o Gerente de extenso a partir do Dreamweaver escolhendo Comandos > Gerenciar extenses.1 No site do Adobe Exchange, clique no link de download de uma extenso.O navegador talvez pergunte se voc deseja abrir e instalar o aplicativo diretamente do site ou salv-lo no disco. Se voc optar por abrir a extenso diretamente do site, o Gerente de extenso far a instalao automaticamente. 42. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 36rea de trabalho Se voc optar por salvar a extenso no disco, um bom local para salvar o arquivo do pacote de extenso (.mxp) apasta Downloaded Extensions na pasta do aplicativo Dreamweaver no seu computador.2 Clique duas vezes no arquivo do pacote de extenso ou abra o Gerente de extenso e selecione Arquivo > Instalar extenso. Algumas extenses s podero ser acessadas quando o aplicativo for reiniciado.Nota: Use o Gerente de extenso para remover extenses ou obter mais informaes sobre uma extenso.Mais tpicos da AjudaSobre a personalizao do Dreamweaver em sistemas de vrios usurios na pgina 30 43. ltima atualizao em 28/4/201037Captulo 3: Trabalho com sites doDreamweaverUm site do Adobe Dreamweaver CS5 um conjunto de todos os arquivos e ativos existentes no site. Voc pode criarpginas da Web no computador, carreg-las em um servidor Web e manter o site transferindo arquivos atualizadossempre que os salvar. Voc tambm pode editar e manter sites criados sem o Dreamweaver.Configurao de um site do DreamweaverSobre sites do DreamweaverNo Dreamweaver, o termo site refere-se a um armazenamento local ou remoto para os documentos que pertencema um site. Um site do Dreamweaver facilita a organizao e o gerenciamento de todos os documentos da Web, ocarregamento do seu site em um servidor Web, o rastreamento e a manuteno de links, alm do gerenciamento e ocompartilhamento 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 paraum servidor Web ou desenvolver aplicativos da Web, voc tambm precisa adicionar informaes para um site remoto eum servidor de teste.Um site do Dreamweaver consiste em at trs partes, ou pastas, dependendo do seu ambiente de desenvolvimento edo tipo de site em desenvolvimento:Pasta raiz local Armazena os arquivos nos quais voc est trabalhando. O Dreamweaver refere-se a essa pasta como seusite 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 emque 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 depoisos 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, consultewww.adobe.com/go/learn_dw_comm08_br.Noes bsicas sobre a estrutura de pastas locais e remotasAo usar o Dreamweaver para conectar-se a uma pasta remota, voc especifica a pasta remota na categoria Informaesremotas da caixa de dilogo Definio de sites. A pasta remota especificada (tambm conhecida como diretrio dohost) deve corresponder pasta raiz local do site do Dreamweaver. (A pasta raiz local a pasta de nvel superior dosite do Dreamweaver.) Pastas remotas, como as pastas locais, podem ter qualquer ttulo, mas normalmente, osprovedores de servio da Internet nomeiam as pastas remotas de nvel superior das contas de usurios individuaiscomo public_html, pub_html ou algo parecido. Se voc responsvel pelo seu prprio servidor remoto e pode nomeara pasta remota como desejar, aconselhvel que a pasta raiz local e a pasta remota tenham o mesmo nome. 44. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 38 Trabalho com sites do DreamweaverO exemplo a seguir mostra uma pasta raiz local esquerda e uma pasta remota direita. A pasta raiz local na mquinalocal mapeia diretamente para a pasta remota no servidor Web, e no para as subpastas da pasta remota nem para aspastas localizadas acima da pasta remota na estrutura de diretrios. no Diretrio de logon (No deve ser pasta remota neste caso) Pasta local simpblico_html (pasta raiz) (Deve ser pastaremota)Ativos no Ativos (No deve ser pasta remota)HTML HTMLNota: O exemplo acima ilustra uma pasta raiz local na mquina local e uma pasta remota de nvel superior no servidorWeb remoto. Se, entretanto, voc mantm diversos sites do Dreamweaver em sua mquina local, ser necessrio umnmero 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 locaiscorrespondentes 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 preenchecom 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 osarquivos 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. Almdisso, os caminhos de imagens e links podem ser facilmente rompidos se as estruturas de pastas e arquivos noestiverem sincronizadas.A pasta remota j deve existir para que o Dreamweaver possa conectar-se a ela. Se voc no tem uma pasta designadaque atue como sua pasta remota no servidor Web, crie uma ou pea ao administrador do servidor que crie uma paravoc.Configurar um novo siteA configurao de um site do Dreamweaver uma maneira de organizar todos os documentos associados a um site. Acaixa de dilogo Configurao de site o local em que voc especifica as configuraes para o site do DreamweaverPara abrir a caixa de dilogo Configurao de site, escolha Site > Novo sitePara assistir a um tutorial em vdeo sobre como configurar um novo site Dreamweaver, consultewww.adobe.com/go/learn_dw_comm08_br.Categoria SiteA categoria Site da caixa de dilogo Configurao de site a nica categoria que voc precisa preencher para iniciar otrabalho no site do Dreamweaver. Essa categoria permite que voc especifique a pasta local em que os arquivos do sitesero armazenados. A pasta local pode estar em seu computador local ou em um servidor de redeQuando estiver pronto, voc pode preencher as outras categorias na caixa de dilogo Configurao de site, incluindoa categoria Servidores em que possvel especificar uma pasta remota no seu servidor remoto. 45. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 39Trabalho com sites do DreamweaverNota: No preciso especificar uma pasta remota se a pasta raiz local est no sistema que executa o servidor Web. Issosugere que o servidor Web est em execuo no computador local.Nome do site O nome que aparece no painel Arquivos e na caixa de dilogo Gerenciar sites; ele no aparece nonavegador.Pasta do site local O nome da pasta no disco local onde voc armazena arquivos de site, modelos e itens de biblioteca.Crie uma pasta no disco rgido ou clique no cone de pasta para ir at a pasta. Quando o Dreamweaver resolve linksrelativos raiz do site, ele faz isso com relao a essa pasta.Categoria ServidoresA categoria Servidores permite que voc especifique servidores remoto e de teste.O servidor remoto o local em que voc especifica a pasta remota que ir armazenar arquivos para produo,colaborao, implementao ou diversas outras situaes. Normalmente, a pasta remota est no computador em queo servidor Web est em execuo.No painel Arquivos do Dreamweaver, a pasta remota conhecida como site remoto. Ao configurar uma pasta remota,voc deve selecionar um mtodo de conexo para que o Dreamweaver carregue e baixe arquivos no servidor Web.Nota: O Dreamweaver aceita conexes com servidores ativados por IPv6. Os tipos de conexo permitidos incluem FTP,SFTP, WebDav e RDS. Para obter mais informaes, consulte www.ipv6.org/Definir opes para conexes FTPUse 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 existente 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 existenteA ilustrao a seguir mostra a tela Bsico da categoria Servidor com os campos de texto j preenchidos. 46. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 40 Trabalho com sites do DreamweaverTela 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 oendereo completo sem qualquer texto adicional. Em particular, no adicione um nome de protocolo frente doendereo.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 editandoa caixa de texto direita. O resultado quando voc salva as configuraes um caractere de dois pontos e o novo nmerode 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 daempresa que hospeda seu site. Ningum mais tem acesso a essas informaes. Digite as informaes exatamente comoforem 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 toda vez que voc se conectar ao 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 doservidor ou deixe a caixa de texto em branco. Em alguns servidores, o diretrio raiz igual ao diretrio ao qual vocprimeiro se conectou com FTP. Para saber, conecte-se ao servidor. Se uma pasta chamada public_html, ou www, ouseu nome de usurio, aparecer na Visualizao arquivo remoto do painel Arquivos, provvel que este seja o diretrioa ser especificado na caixa de texto Diretrio raiz. 47. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 41 Trabalho com sites do Dreamweaver11 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 obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de CategoriaConfiguraes avanadas na pgina 45.12 Expandir a seo Mais opes se ainda for necessrio definir mais opes.13 Selecione Usar FTP passivo se a configurao de proxy exibir 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 remotoconfigure. Se no tiver certeza quanto ao uso de FTP passivo, verifique com o administrador do sistema ou tentemarcar e desmarcar a opo Usar FTP passivo.Para obter mais informaes, consulte o TechNote 15220 no site da Adobe em www.adobe.com/go/tn_15220_br.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 ePASV, respectivamente. Portanto, se voc est tentando conectar-se a um servidor FTP ativado por IPv6, use oscomandos 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 botoAjuda 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 Adobeem www.adobe.com/go/kb405912_br.Definir opes para conexes SFTPUse FTP seguro (SFTP) se a configurao de firewall exigir o uso de um FTP seguro. O SFTP usa criptografia e chavespblicas 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 nosouber 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 existente 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 existente4 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 aseo acima.Nota: A porta 22 a porta padro para receber conexes de SFTP. 48. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 42 Trabalho com sites do DreamweaverDefinir opes para conexes de rede ou localUse esta configurao para conectar-se a uma pasta de rede ou se estiver armazenando arquivos ou executando oservidor 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 existente 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 existente4 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 obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de CategoriaConfiguraes avanadas na pgina 45.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.Definir opes para conexes WebDAVUse esta configurao se voc se conectar ao servidor Web usando o protocolo Web-based Distributed Authoring andVersioning (WebDav).Para este mtodo de conexo, voc deve ter um servidor que aceite esse protocolo, como o Microsoft InternetInformation Server (IIS) 5.0 ou uma instalao corretamente configurada do servidor Web Apache.Nota: Se voc selecionar WebDAV como o mtodo de acesso e estiver usando o Dreamweaver em um ambientemultiusurio, certifique-se de que todos os usurios selecionem o mtodo de acesso WebDAV. Se alguns usuriosselecionarem WebDAV e outros optarem por mtodos diferentes de acesso (por exemplo, FTP), o recurso dedevoluo/retirada do Dreamweaver no funcionar como o esperado, pois o WebDAV usa seu prprio sistema debloqueio.1 Selecione Site > Gerenciar sites.2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente 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 existente4 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. 49. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 43 Trabalho com sites do DreamweaverEsse 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 destinam-se autenticao do servidor e no esto relacionadas ao Dreamweaver. Se voc nosouber 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 voc quiser que o Dreamweaver memorize a senha toda vez 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 obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de CategoriaConfiguraes avanadas na pgina 45.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.Definir opes para conexes RDSVoc 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 existente 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 existente4 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:inetpubwwwrootmyHostDir. 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 seguranado administrador de ColdFusion. Selecione a opo Salvar se quiser que o Dreamweaver memorize 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. 50. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 44Trabalho com sites do DreamweaverPara obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de CategoriaConfiguraes avanadas na pgina 45.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.Configurar as opes para conexes do Microsoft Visual SourceSafeO suporte para o Microsoft Visual SourceSafe est obsoleto no Dreamweaver CS5.Configurar Opes avanadas1 Selecione Site > Gerenciar sites.2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente 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 existente4 Especifique as Opes bsicas conforme necessrio e clique no boto Avanado.5 Selecione Manter informaes sobre sincronizao se quiser sincronizar automaticamente os arquivos locais e remotos. (Essa opo selecionada por padro.)6 Selecione Carregar automaticamente os arquivos no servidor ao salvar se voc quiser que o Dreamweaver carregue o arquivo no site remoto ao 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, consulte Configurar um servidor de teste na pgina 46.Solucionar problemas da configurao de pastas remotasEsta lista contm informaes sobre problemas comuns encontrados durante a configurao de pastas remotas e sobrecomo solucion-los.Tambm h uma nota tcnica extensa que fornece especificamente informaes sobre soluo de problemas de FTPno site da Adobe em www.adobe.com/go/kb405912_br. A implementao por FTP do Dreamweaver pode no funcionar corretamente com certos servidores proxy,firewalls de vrios nveis e outras formas de acesso indireto ao servidor. Se ocorrerem problemas com o acesso aoFTP, solicite ajuda ao administrador de sistema local. Para uma implementao por FTP do Dreamweaver, conecte-se pasta raiz do sistema remoto. Certifique-se deindicar a pasta raiz do sistema remoto como o diretrio do host. Se voc especificou o diretrio do host usando umabarra nica (/), talvez seja necessrio especificar um caminho relativo do diretrio ao qual voc est se conectandoe a pasta raiz remota. Por exemplo, se a pasta raiz remota for um diretrio de nvel superior, pode ser necessrioespecificar 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 nopodem ter mais de 31 caracteres. 51. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 45 Trabalho com sites do Dreamweaver Muitos servidores usam links simblicos (UNIX), atalhos (Windows) ou alias (Macintosh) para conectar uma pastaem uma parte do disco do servidor a outra pasta em outro local. Esses alias em geral no afetam a capacidade deconexo com a pasta ou o diretrio apropriado, porm, se voc puder se conectar a uma parte do servidor e no aoutra, 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 napasta remota. Para obter informaes mais detalhadas, verifique o registro de FTP.Nota: Em geral, quando ocorrer algum problema com uma transferncia por FTP, selecione Janela > Resultados(Windows) ou Site > FTP Log (Macintosh) e clique na tag de registro de FTP para examinar esse registro.Categoria Controle de versoVoc pode retirar e devolver arquivos usando o Subversion. Para obter mais informaes , consulte Usar o SVN(Subversion) para obter e devolver arquivos na pgina 89.Categoria Configuraes avanadasInformaes locaisPasta padro de imagens A pasta em que voc deseja armazenar imagens para o seu site. Digite o caminho para a pastaou clique no cone de pasta para ir at ela. O Dreamweaver usa o caminho para a pasta quando voc adiciona imagensnos documentos.Links relativos a Especifique o tipo de links que o Dreamweaver cria quando voc criar links para outros recursos oupginas no site. O Dreamweaver pode criar dois tipos de links: relativo a documento e relativo a raiz do site. Para obtermais informaes sobre as diferenas entre os dois tipos, consulte Caminhos absolutos, relativos a documentos erelativos raiz do site na pgina 271.Por padro, o Dreamweaver cria links relativos a documentos. Se alterar a configurao padro e selecionar a opoRaiz 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 seraplicada somente aos novos links que voc criar visualmente com o Dreamweaver.Nota: O contedo vinculado a links relativos raiz do site no aparece quando voc visualiza documentos em umnavegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o arquivotemporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no reconhecemrazes 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 verificarlinks 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 emque 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 aodocumento, portanto se voc mover o documento para outro local, o caminho para os recursos permanecerocorretos.Por exemplo, vamos dizer que voc especificou http://www.mysite.com/mycoolsite (o diretrio raiz do site do servidorremoto) como o URL da Web e que tambm voc tem uma pasta de imagens no diretrio mycoolsite no servidorremoto (http://www.mysite.com/mycoolsite/images). Vamos tambm dizer que seu arquivo index.html est nodiretrio mycoolsite.Quando voc criar um link relativo raiz do site no arquivo index.html para uma imagem no diretrio de imagens, olink ter a seguinte aparncia: 52. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 46 Trabalho com sites do Dreamweaver diferente de um link relativo a documento, que seria simplesmente: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 outrodiretrio.Para obter mais informaes, consulte Caminhos absolutos, relativos a documentos e relativos raiz do site napgina 271.Considerando-se a verificao de link, o URL da Web ser necessrio para determinar se um link interno ou externoao site. Por exemplo, se o URL da Web http://www.mysite.com/mycoolsite e o verificador de link encontra um linkcom o URL http://www.yoursite.com na sua pgina, o verificador determina que o ltimo link externo e o registracomo tal. Similarmente, o verificador de link usa o URL da Web para determinar se os links so internos para o site eem seguida verifica se eles esto interrompidos.Verificao de links com distino de maisc./minsc. Verifica se as letras maisculas e minsculas dos linkscorrespondem s dos nomes de arquivo quando o Dreamweaver verifica os links. Essa opo til em sistemas UNIXem 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. Sevoc no selecionar esta opo, o Dreamweaver perguntar se voc deseja criar um cache novamente antes que ele crieo site. recomendvel selecionar esta opo porque o painel Ativos (no grupo de painis Arquivos) funciona somentese um cache for criado.Encobrimento e outras categoriasPara 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.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.Conectar-se a uma pasta remota com acesso por rede ou desconectar-se Voc no precisa se conectar pasta remota, voc est sempre conectado. Clique no boto Atualizar para ver os arquivos remotos.Configurar um servidor de testeSe voc pretende desenvolver pginas dinmicas, o Dreamweaver precisa que os servios de um servidor de teste gereme exibam contedo dinmico enquanto voc trabalha. O servidor de teste pode ser o computador local, um servidorde desenvolvimento, um servidor de teste ou um servidor de produo.1 Selecione Site > Gerenciar sites.2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente 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 53. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 47 Trabalho com sites do Dreamweaver Selecione um servidor existente e clique no boto Editar servidor existente4 Especifique as Opes bsicas conforme necessrio e clique no boto Avanado.Nota: Voc deve especificar um URL da Web na tela Bsico quando determinar um servidor de teste. Para obter maisinformaes, consulte a prxima seo.5 No Servidor de Teste, selecione o modelo do servidor que voc deseja usar para seu aplicativo da Web.Nota: A partir do Dreamweaver CS5, o Dreamweaver no instala mais comportamentos de servidor ASP.NET, ASPJavaScript ou JSP. Entretanto, se voc est trabalhando em pginas ASP.NET, ASP JavaScript ou JSP, o Dreamweaverainda 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 recursosfuncionem.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.Mais tpicos da AjudaEscolha do servidor de aplicativo na pgina 531Preparao para criao de sites dinmicos na pgina 521Sobre o URL da Web do servidor de testeVoc precisa especificar um URL da Web para que o Dreamweaver possa usar os servios de um servidor de teste paraexibir dados e conectar-se a bancos de dados enquanto voc trabalha. O Dreamweaver usa a conexo em tempo dedesign para fornecer informaes teis sobre o banco de dados, como os nomes das tabelas no banco de dados e osnomes das colunas nas tabelas.O URL da Web para um servidor de teste compreende o nome de domnio e os diretrios virtuais ou subdiretrios dodiretrio 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 desejausar para processar pginas dinmicas esteja em c:sitescompany, 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 prefixode URL http://www.mystartup.com/.Se a pasta que voc deseja usar para processar pginas dinmicas uma subpasta do seu diretrio inicial, bastaadicionar a subpasta ao URL. Se seu diretrio inicial c:sitescompany, o nome de domnio do seu site www.mystartup.com, e a pasta usada para processar pginas dinmicas c:sitescompanyinventory. Insira o seguinteURL da Web:http://www.mystartup.com/inventory/Se a pasta que voc deseja usar para processar pginas dinmicas no seu diretrio inicial ou qualquer um de seussubdiretrios, crie um diretrio virtual.Um diretrio virtual Uma pasta que est contida fisicamente no diretrio inicial do servidor, ainda que ela parea estarno URL. Para criar um diretrio virtual, especifique um alias para o caminho da pasta no URL. Suponha que seudiretrio inicial c:sitescompany, sua pasta de processamento d:appsinventory e voc define um alias para essapasta chamado warehouse. Insira o seguinte URL da Web:http://www.mystartup.com/warehouse/ 54. ltima atualizao em 28/4/2010USO DO DREAMWEAVER CS5 48Trabalho com sites do DreamweaverHost local Refere-se ao diretrio inicial nos seus URLs quando o cliente (em geral um navegador, mas neste casoDreamweaver) executado no mesmo sistema do servidor Web. Suponha que o Dreamweaver est em execuo nomesmo sistema Windows do servidor Web, seu diretrio inicial c:sitescompany, e voc definiu um diretrio virtualchamado warehouse para referir-se pasta a ser usada para processar pginas dinmicas. Estes so os URLs da Webque devem ser inseridos para os servidores Web selecionados:Servidor WebURL da WebColdFusion MX 7 http://localhost:8500/warehouse/IIS http://localhost/warehouse/Apache (Windows)http://localhost:80/warehouse/Jakarta Tomcat (Windows)http://localhost:8080/warehouse/Nota: Por padro, o servidor Web ColdFusion MX 7 executado na porta 8500, o servidor Web Apache executado naporta 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/MeuNomeDeUsurio/Sites, em que MeuNomeDeUsurio o nome de usurio do Macintosh. Um aliaschamado ~MeuNomeDeUsurio automaticamente definido para essa pasta quando voc instala o Mac OS 10.1 ousuperior. Portanto, o URL da Web padro Dreamweaver, como:http://localhost/~MeuNomeDeUsurio/Se a pasta que voc deseja usar para processar pginas dinmicas Users:MeuNomeDeUsurio:Sites:inventory, o URLda Web o seguinte:http://localhost/~MeuNomeDeUsurio/inventory/Gerenciar e editar sitesUse a caixa de dilogo Gerenciar sites para criar um novo site e editar, duplicar, remover sites e importar ou exportaras configuraes de um site.1 Selecione Site > Gerenciar sites e escolha um site na lista esquerda.2 Clique em um boto para selecionar uma das opes e clique em Concludo.Novo Permite a criao de um novo site.Editar Permite a edio de um site existente.Duplicar Cria uma cpia do site selecionado. A cpia aparece na janela da lista de sites.Remover Exclui o site selecionado. Esta ao no pode ser desfeita.Exportar Permite a exportao das configuraes de um site como um arquivo XML (*.ste).Importar Permite a seleo de um arquivo de configuraes do site (*.ste) para importao.Mais tpicos da AjudaImportar e exportar configuraes de site na pgina 49 55. ltima atualizao em 28/4/2010 USO DO DREAMWEAVER CS5 49Trabalho com sites do DreamweaverEditar um site remoto no DreamweaverVoc pode usar o Dreamweaver para copiar um site remoto (ou uma ramificao de um site remoto) para o disco locale edit-lo nesse disco, mesmo que voc no tenha utilizado o Dreamweaver para criar o site original.1 Crie uma pasta local para o site existente e configure a pasta como a pasta local do 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.Escolha a pasta raiz correta para o site remoto.3 No painel Arquivos (Janela > Arquivos), clique no boto Estabelece conexo com host remoto (para acesso por FTP) ou o boto Atualizar para acesso por rede) na barra de ferramentas para visualizar o site remoto.4 Edite o site: Para trabalhar com o site inteiro, selecione a pasta raiz do site remoto no painel Arquivos e clique em Obterarquivo(s) na barra de ferramentas para baixar o site inteiro para o disco local. Para trabalhar apenas com um dos arquivos ou pastas do site, localize o arquivo ou a pasta na Visualizao remotado painel Arquivos e clique em Obter arquivo(s) na barra de ferramentas para baixar esse arquivo para o disco local.O Dreamweaver automaticamente duplica quanto da estrutura do site remoto for necessrio para colocar o arquivobaixado na parte correta da hierarquia de sites. Ao editar somente uma parte do site, voc deve em geral incluirarquivos dependentes, como os arquivos de imagem.Remover um site do Dreamweaver da lista de sitesA remoo de um site do Dreamweaver e todas as respectivas informaes de configurao da lista de sites no removeos arquivos do site do computador.1 Selecione Site > Gerenciar sites.2 Selecion