Saiba mais sobre a área de trabalho do Dreamweaver, as diferentes visualizações e áreas de trabalho disponíveis para você e todos os painéis e barras de ferramentas do Dreamweaver.

Adaptação ao Dreamweaver

Após a instalação do Dreamweaver, quando você inicia o aplicativo pela primeira vez, um menu de início rápido aparece na tela. Nesse menu, há três perguntas que ajudam você a personalizar sua área de trabalho do Dreamweaver de acordo com as suas necessidades.

Com base nas respostas, o Dreamweaver abrirá uma área de trabalho de desenvolvedor (um layout minimalista focado no código) ou uma área de trabalho padrão (um layout dividido com ferramentas visuais e uma exibição em aplicativo enquanto você realiza a programação). 

Após escolher uma área de trabalho, você escolhe o tema de cores de sua preferência. Em seguida, você poderá começar.

Observação:

é possível alterar essas preferências da área de trabalho a qualquer momento pela caixa de diálogo Editar > Preferências.

Tela inicial aprimorada

Na tela inicial do Dreamweaver, você tem acesso rápido a arquivos usados recentemente, tipos de arquivo e modelos iniciais.

Dependendo do status da assinatura, essa área de trabalho também pode exibir conteúdo adaptado às suas exigências.

O Dreamweaver exibe a tela inicial ao ser aberto ou quando não há documentos abertos.

Área de trabalho inicial do Dreamweaver
Área de trabalho inicial do Dreamweaver

Opções da tela inicial do Dreamweaver

Aprendizagem

Clique em Aprendizagem para acessar rapidamente os tutoriais do Dreamweaver por meio desta tela.

Início rápido

Comece a criar documentos no Dreamweaver clicando em qualquer um dos tipos de arquivo exibidos.

Modelos iniciais

Abra um dos modelos iniciais integrados usando o Dreamweaver. 

Início

Clique em Início para voltar à tela inicial. 

Os arquivos nos quais você trabalhou recentemente são exibidos na tela inicial. Se você não tiver arquivos recentes, a tela estará vazia.

Você também pode usar a funcionalidade de pesquisa usando o ícone Pesquisa no canto superior direito desta tela. Quando você digita uma consulta de pesquisa, o aplicativo exibe seus arquivos recentes, ativos da Creative Cloud, links de ajuda e imagens que correspondem à consulta de pesquisa.

Observação:

A tela Iniciar está ativada e é aberta por padrão. 

Se você não precisa da tela Iniciar, desmarque a opção Mostrar tela Iniciar na caixa de diálogo Preferências > Geral.

Você pode clicar em Criar novo para começar a criar arquivos do Dreamweaver. Se você já tiver arquivos no sistema, clique em Abrir. Para obter mais informações sobre como criar e abrir documentos no Dreamweaver, consulte Criar e abrir arquivos.

Visão geral da área de trabalho

A área de trabalho do Dreamweaver permite exibir documentos e propriedades de objetos. A área de trabalho também coloca muitas operações comuns em barras de ferramentas para que você possa fazer alterações rapidamente em seus documentos.

Área de trabalho do Dreamweaver (CC)
Área de trabalho do Dreamweaver

A. Barra de aplicativos B. Barra de ferramentas Documento C. Janela do documento D. Alternador da área de trabalho E. Painéis F. Visualização de código G. Barra Status H. Seletor de tags I. Visualização dinâmica J. Barra de ferramentas 

Visão geral dos elementos da área de trabalho

A área de trabalho inclui os seguintes elementos:

A barra de aplicativos

Localizada na parte superior da janela do aplicativo, contém o alternador da área de trabalho, os menus (apenas no Windows) e outros controles do aplicativo.

A barra de ferramentas Documento

Contém botões que fornecem opções para diferentes visualizações da janela Documento (como a Visualização de design, dinâmica e de código).

A barra de ferramentas Padrão

Para exibir a barra de ferramentas Padrão, selecione Janela > Barras de ferramentas > Padrão. A barra de ferramentas contém botões para operações comuns dos menus Arquivo e Editar: Novo, Abrir, Salvar, Salvar tudo, Imprimir código, Cortar, Copiar, Colar, Desfazer e Refazer.

A barra de ferramentas

Está à esquerda da janela do aplicativo e contém botões específicos a visualizações.

A janela do documento

Exibe o documento atual à medida que é criado e editado.

O Inspetor de propriedades

Permite exibir e alterar diversas propriedades do objeto ou texto selecionado. Cada objeto tem propriedades diferentes.

O seletor de tags

Localizado na barra Status na parte inferior da janela Documento. Mostra a hierarquia de tags em torno da seleção atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu conteúdo.

Painéis

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

O painel Extract

Permite fazer o upload e exibir os arquivos PSD na Creative Cloud. Usando esse painel, você pode extrair CSS, texto, imagens, fontes, cores, gradientes e medidas das composições de PSD no documento.

O painel Inserir

Contém botões para inserir vários tipos de objetos em um documento, como imagens, tabelas e elementos de mídia. Cada objeto é uma parte do código HTML que permite definir vários atributos à medida que são inseridos. Por exemplo, você pode inserir uma tabela clicando no botão Tabela no painel Inserir. Se você preferir, pode inserir objetos usando o menu Inserir em vez do painel Inserir.

O painel Arquivos

Permite gerenciar arquivos e pastas, sejam eles parte de um site do Dreamweaver ou de um servidor remoto. Com o painel Arquivos você também tem acesso a todos os arquivos no seu disco local. Para obter mais informações, consulte Gerenciamento de arquivos e pastas.

O painel Snippets

Permite salvar e reutilizar seus snippets de código em diferentes páginas da Web, sites e instalações do Dreamweaver (usando a sincronização de configurações). Para obter mais informações, consulte Reutilizar códigos com snippets.

O painel CSS Designer

é um Inspetor de propriedades CSS que permite criar “visualmente” estilos e arquivos CSS e definir propriedades juntamente com consultas de mídia.

Observação:

O Dreamweaver fornece muitos outros painéis, inspetores e janelas. Para abrir os painéis, os inspetores e as janelas, use o menu Janela.

Visão geral da janela Documento

A janela Documento mostra o documento atual. Para alternar entre as visualizações do documento, use as opções de visualização na barra de ferramentas Documento. 

Também é possível alternar entre as visualizações usando as opções de visualização no menu Exibir.

Visualização dinâmica

exibe a maneira como seu documento será exibido em um navegador de maneira realista e permite que você interaja com ele exatamente como faria em um navegador. Além de editar elementos HTML diretamente na Visualização dinâmica, também é possível visualizar imediatamente as alterações por ela. Para obter mais informações sobre a edição na Visualização dinâmica, consulte Editar elementos HTML na Visualização dinâmica.

Visualização de design

é um ambiente de design para o layout visual da página, a edição visual e o desenvolvimento rápido do aplicativo. Nessa visualização, o Dreamweaver exibe uma representação visual totalmente editável do documento, semelhante ao que você veria ao exibir a página no navegador.

Visualização de código

é um ambiente com codificação manual para gravação e edição em HTML, JavaScript e qualquer outro tipo de código.

Código - Código

é uma versão dividida de Visualização de código que permite navegar para trabalhar em diversas seções do documento ao mesmo tempo. 

Código - Dinâmica

permite ver as Visualizações de código e dinâmica do mesmo documento em uma única janela.

Código - Design

permite ver as Visualizações de código e de design do mesmo documento em uma única janela.

Código ativo

exibe o código real que o navegador usa para executar a página e pode alterar dinamicamente à medida que você interagir com a página na Visualização dinâmica.

Quando a janela Documento é maximizada (o padrão), as guias aparecem na parte superior da janela Documento mostrando os nomes de arquivos de todos os documentos abertos. O Dreamweaver mostrará um asterisco após o nome de arquivo se você tiver feito alterações que ainda não tenham sido salvas.

O Dreamweaver também exibe a barra de ferramentas Arquivos relacionados abaixo da guia do documento (ou abaixo da barra de título do documento, se você estiver exibindo documentos em janelas distintas). Os documentos relacionados estão associados ao arquivo atual, como arquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na janela Documento, clique no seu nome de arquivo na barra de ferramentas Arquivos relacionados.

Alternar entre as visualizações

Use a barra de ferramentas Documento para alternar rapidamente entre as diferentes visualizações. Para obter mais informações, consulte Visão geral da barra de ferramentas Documento.

Também é possível alterar entre as visualizações usando as opções a seguir no menu Exibir:

  • Apenas a Visualização de código: selecione Código
  • Visualização dividida: selecione Dividir e qualquer uma das opções de divisão
  • Modo de visualização: alterne entre as Visualizações dinâmica e de design
  • Alternar visualizações: para alternar entre as visualizações.
Alternar visualizações usando as opções do menu Exibir
Alternar visualizações usando as opções do menu Exibir

Reorganizar as janelas do documento ou exibi-las em cascata ou lado a lado

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

Para exibir as janelas do documento em cascata, selecione Janela > Organizar > Em cascata.

Janelas do documento lado a lado: 

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

Quando você abre mais que um arquivo, as janelas do documento são abertas em guias. Para reorganizar a ordem das janelas do documento abertas em guias, arraste uma guia da janela para um novo local no grupo.

Redimensionar a janela do documento

A barra de status exibe as dimensões atuais da janela Documento (em pixels). Para projetar uma página cuja aparência fica melhor em um tamanho específico, você pode ajustar a janela Documento para qualquer tamanho predefinido, editar esses tamanhos predefinidos ou criar novos tamanhos.

Quando você altera o tamanho da visualização de uma página na visualização de design ou dinâmica, somente as dimensões da visualização são modificadas. O tamanho do documento permanece inalterado.

Além de tamanhos predeterminados e personalizados, o Dreamweaver também enumera os tamanhos especificados em uma consulta de mídia. Quando você seleciona um tamanho que corresponde a uma consulta de mídia, o Dreamweaver usa a consulta de mídia para exibir a página. Você também pode alterar a orientação de página para visualizar a página de dispositivos móveis onde o layout da página é alterado com base na orientação do dispositivo.

Para redimensionar a janela do documento, selecione um dos tamanhos disponíveis no menu pop-up Tamanho da janela, localizado na parte inferior da janela Documento.

Opções para redimensionar o documento
Opções para redimensionar o documento

O tamanho da janela mostrado reflete as dimensões internas da janela do navegador, sem as bordas; o tamanho do monitor ou o dispositivo móvel é listado entre parênteses.

Observação:

Para um redimensionamento menos preciso, use os métodos padrão de redimensionamento de janelas do seu sistema operacional, como arrastar o canto inferior direito de uma janela.

Observação:

(Apenas Windows) Documentos na janela Documento são maximizados por padrão. Nesse caso, não é possível redimensioná-los. Para restaurar o documento, clique no botão de restaurar no canto superior direito do documento.

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

  1. Selecione Editar tamanhos no menu pop-up Tamanho da janela.

  2. Clique em qualquer valor de largura ou altura na lista Tamanhos de janela e insira um novo valor. Para ajustar a janela documento somente a uma largura específica (sem alterar a altura), selecione um valor de altura e exclua-o.

  3. Clique na caixa Descrição para inserir um texto descritivo sobre um tamanho específico.

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

  1. Selecione Editar tamanhos no menu pop-up Tamanho da janela.

    Adicionar tamanhos de janela ao menu pop-up Tamanho da janela
    Adicionar tamanhos de janela ao menu pop-up Tamanho da janela

  2. Clique no espaço 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 Descrição para inserir um texto descritivo sobre o tamanho adicionado.

    Por exemplo, você pode digitar SVGA ou PC médio próximo a uma entrada de um monitor de 800 x 600 pixels e Mac de 17 pol. próximo a uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada para diversas dimensões de pixel.

  5. Clique em Aplicar e feche a caixa de diálogo.

    O novo tamanho da janela agora está disponível para uso no menu pop-up Tamanho da janela.

Visão geral da barra de ferramentas Documento

A barra de ferramentas Documento contém botões que permitem alternar entre diferentes visualizações do seu documento rapidamente. A barra de ferramentas também contém alguns comandos comuns e opções relacionadas à visualização do documento e à sua transferência entre sites locais e remotos.

Barra de ferramentas Documento (CC)
Barra de ferramentas Documento

As opções seguintes aparecem na barra de ferramentas Documento:

Visualização de código

Exibe somente a Visualização de código na janela Documento.

Visualização dividida

Divide a janela Documento entre as Visualizações de código e a dinâmica/design. A opção de Visualização de design não está disponível para documentos de grade fluida.

Visualização dinâmica

É uma visualização interativa que processa exatamente os projetos HTML5 e é atualizada em tempo real de modo a mostrar as alterações à medida que você as faz. Também é possível editar elementos HTML na Visualização dinâmica. A lista suspensa adjacente às opções dinâmicas permite que você alterne entre as Visualizações dinâmica e de design. Essa lista suspensa não está disponível em documentos de grade fluida.

Visualização de design

Exibe uma representação do documento da maneira como um usuário o veria em um navegador. 

Visão geral da barra de ferramentas Padrão

Barra de ferramentas Padrão

Para exibir a barra de ferramentas Padrão, selecione Janela > Barras de ferramentas > Padrão. A barra de ferramentas contém botões para operações comuns dos menus Arquivo e Editar: Novo, Abrir, Salvar, Salvar tudo, Imprimir código, Cortar, Copiar, Colar, Desfazer e Refazer.

Visão geral da barra de ferramentas Navegação do navegador

A barra de ferramentas Navegação do navegador fica ativa na Visualização dinâmica (somente se você a ativou selecionando Janela -> Barras de ferramentas -> Padrão) e exibe o endereço da página em que você está navegando na janela Documento. A Visualização dinâmica age como um navegador comum, desta forma, mesmo que você navegue até um site externo ao seu site local (por exemplo, http://www.adobe.com/br), o Dreamweaver carregará a página na janela Documento.

Barra de ferramentas de navegação do navegador (CC)
Barra de ferramentas de navegação do navegador

A. Controles do navegador B. Caixa de endereço 

Por padrão, os links não estão ativos na Visualização dinâmica. Os links não ativos permitem que você selecione ou clique no texto de link na janela Documento sem ser levado a outra página. Para testar links na Visualização dinâmica, ative o clique único ou o clique contínuo selecionando Exibir > Opções de visualização dinâmica > Seguir links (Ctrl + Clique no link) ou Seguir links continuamente.

Visão geral da barra de ferramentas

A barra de ferramentas aparece verticalmente à esquerda da janela Documento e é visível em todas as visualizações: código, dinâmica e design. A barra de ferramentas contém botões de visualização específicos e eles são exibidos apenas se forem aplicáveis à visualização na qual você está trabalhando. Por exemplo, se você estiver trabalhando na Visualização dinâmica, as opções específicas da Visualização de código, como Formatar código de origem, não serão visíveis. 

Personalizar barra de ferramentas

É possível personalizar essa barra de ferramentas de acordo com as suas necessidades. Por exemplo, adicionando opções de menu ou removendo aquelas indesejadas.

Para personalizar a barra de ferramentas, siga estas etapas:

  1. Clique em  na barra de ferramentas para abrir a caixa de diálogo Personalizar barra de ferramentas.

    Personalizar barras de ferramentas
    Personalizar barras de ferramentas

  2. Marque ou desmarque as opções de menu que você deseja que estejam disponíveis na barra de ferramentas e clique em Concluído para salvá-la.

Para restaurar os botões da barra de ferramentas padrão, clique em Restaurar padrão na caixa de diálogo Personalizar painel de ferramentas.

Visão geral da barra Status

A barra Status na parte inferior da janela Documento fornece informações adicionais sobre o documento que você está criando.

Barra de status (CC)
Barra Status

A. Seletor de tags B. Painel Saída C. Codificação por cores D. Alternar entre Inserir e Substituir E. Número da linha e da coluna 

Seletor de tags

Mostra a hierarquia de tags em torno da seleção atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu conteúdo. Clique em <body> para selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag no seletor de tags, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto.

Painel Saída

Clique neste ícone para exibir o painel Saída que mostra erros de codificação no seu documento.

Codificação por cores

(Disponível apenas na Visualização de código)

Selecione um dos idiomas de codificação do menu pop-up para alterar a cor do código e exibi-lo de acordo com a linguagem de programação.

Alterar entre Inserir e Substituir

(Disponível apenas na Visualização de código)

Permite alternar entre o modo Inserir e Substituir ao trabalhar na Visualização de código.

Número da linha e da coluna

(Disponível apenas na Visualização de código.)

Exibe o número da linha e da coluna na qual o cursor está localizado.

Visão geral do Inspetor de propriedades

O Inspetor de propriedades (Janela > Propriedades) permite examinar e editar as propriedades mais comuns do elemento selecionado da página atual, como texto ou um objeto inserido.

O conteúdo do Inspetor de propriedades varia dependendo do elemento selecionado. Por exemplo, se você selecionar uma imagem na sua página, 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 (CC)
Inspetor de propriedades

O Inspetor de propriedades está na borda inferior da área de trabalho por padrão, mas você pode desencaixá-lo e torná-lo um painel flutuante na área de trabalho.

Observação:

Use o Inspetor de tags para exibir e editar todos os atributos associados às propriedades de uma determinada tag.

Para obter ajuda para um determinado Inspetor de propriedades, clique no botão de ajuda no canto superior direito do Inspetor de propriedades ou selecione Ajuda no menu Opções do Inspetor de propriedades.

Exibir e alterar propriedades de um elemento de página

  1. Selecione o elemento de página na janela Documento.

    Recomendamos expandir o Inspetor de propriedades para visualizar todas as propriedades do elemento selecionado.

  2. Altere qualquer propriedade no Inspetor de propriedades.

    Observação:

    Para obter informações sobre propriedades específicas, selecione um elemento na janela Documento e clique no ícone de ajuda no canto superior direito do Inspetor de propriedades.

  3. Se as alterações não forem aplicadas imediatamente na janela Documento, siga um destes procedimentos para aplicá-las:

    • Clique fora dos campos de texto de edição de propriedade.
    • Pressione Enter (Windows) ou Return (Macintosh).
    • Pressione Tab para passar para outra propriedade.

Os menus de contexto fornecem acesso fácil à maioria dos comandos úteis e das propriedades relacionadas ao objeto ou janela com o qual está trabalhando. Os menus de contexto listam somente os comandos que são aplicáveis à seleção atual.

Para abrir um menu de contexto, clique com o botão direito (Windows) ou Ctrl + Clique (Mac) em uma seção do código, na Visualização de código, ou em um objeto, na Visualização dinâmica ou de design.

Reorganizar painéis no Dreamweaver

É possível personalizar a posição e a aparência de todos os painéis do Dreamweaver de acordo com as suas necessidades.

Encaixar e desencaixar painéis

  • Para encaixar um painel, arraste-o pela guia para dentro do encaixe, na parte superior, na parte inferior ou entre outros painéis.
  • Para encaixar um grupo de painéis, arraste-o pela barra de título (a barra sólida vazia acima das guias) para dentro do encaixe.
  • Para remover um painel ou grupo de painéis, arraste-o para fora do encaixe pela guia ou barra de título. É possível arrastá-lo para dentro de outro encaixe ou deixá-lo flutuando livremente.

Mover painéis

Ao mover painéis, zonas para soltar destacadas em azul serão exibidas. Essas são áreas nas quais é possível mover o painel. Por exemplo, é possível mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona para soltar azul estreita, acima ou abaixo de outro painel. Se for arrastado para uma área que não é uma zona para soltar, o painel flutuará livremente na área de trabalho.

  • Para mover um painel, arraste-o pela guia.
  • Para mover um grupo de painéis, arraste a barra de título.

Observação:

Pressione Ctrl (Windows) ou Command (Mac OS) enquanto estiver movendo um painel para não encaixá-lo. Pressione Esc enquanto estiver movendo o painel para cancelar a operação.

Adicionar e remover painéis

Se todos os painéis forem removidos de um encaixe, ele desaparecerá. É possível criar um encaixe movendo os painéis para a borda direita do espaço de trabalho até uma zona de destino aparecer.

  • Para remover um painel, clique com o botão direito (Windows) ou com a tecla Control pressionada (Mac) e selecione Fechar ou desmarque-o do menu de Janela.
  • Para inserir um painel, selecione-o no menu Janela e encaixe-o no local que desejado.

Manipular grupos de painéis

  • Para mover um painel em um grupo, arraste a guia do painel para a zona para soltar realçada no grupo.
  • Para reorganizar painéis 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 título (a área acima das guias).

Empilhar painéis flutuantes

Se você arrastar um painel fora de seu encaixe mas não em uma zona para soltar, o painel flutuará livremente. O painel flutuante permite posicioná-lo em qualquer lugar na área de trabalho. É possível empilhar painéis flutuantes ou grupos de painéis para que eles sejam movidos como uma unidade quando a barra de título superior for arrastada.

  • Para empilhar painéis 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.
  • Para remover um painel ou grupo de painéis da pilha para que ele flutue sozinho, arraste-o para fora pela guia ou pela barra de título.

Redimensionar painéis

  • Para minimizar ou maximizar um painel, grupo de painéis ou pilha de painéis, clique duas vezes na guia. Você também pode clicar duas vezes na área da guia (no espaço vazio próximo às guias).
  • Para redimensionar um painel, arraste qualquer lado do painel. 

Contrair e expandir ícones do painel

É possível contrair painéis em ícones para reduzir a desordem no espaço de trabalho. Em alguns casos, os painéis são contraídos em ícones no espaço de trabalho padrão.

  • Para contrair ou expandir todos os ícones de painéis 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 painéis para que você só veja os ícones (e não os rótulos), ajuste a largura do encaixe até o texto desaparecer. Para exibir um texto de ícone novamente, alargue o encaixe.
  • Para contrair um painel estendido de volta ao ícone, clique na guia, no ícone ou na seta dupla na barra de título do painel.

Criar áreas de trabalho personalizadas

É possível personalizar a área de trabalho adicionando ou removendo painéis de acordo com as suas necessidades. Em seguida, você pode salvar essas alterações à sua área de trabalho e acessá-las posteriormente no Alternador da área de trabalho na barra de ferramentas Documento.

Ao salvar o tamanho e a posição atuais dos painéis como uma área de trabalho nomeado, é possível restaurá-la caso você mova ou feche um painel.

Para salvar uma área de trabalho personalizada:

  1. Selecione Janela > Layout da área de trabalho > Nova área de trabalho.
  2. Digite um nome para a área de trabalho.

A área de trabalho foi salva e está visível no Alternador de áreas de trabalho na barra de ferramentas Documento.

Para excluir uma área de trabalho personalizada:

Selecione Gerenciar áreas de trabalho no alternador de áreas de trabalho na barra Aplicativos para abrir a caixa de diálogo Gerenciar áreas de trabalho. Selecione a área de trabalho e clique em Excluir.

Exibir ou alternar áreas de trabalho

Selecione uma área de trabalho do alternador de áreas de trabalho na barra de ferramentas Documento.

Personalizar o Dreamweaver em sistemas de vários usuários

Você pode personalizar o Dreamweaver de acordo com suas necessidades, mesmo em um sistema operacional de vários usuários como o Windows XP ou o Mac OS X.

O Dreamweaver impede que a configuração personalizada de um usuário afete a configuração personalizada de outro usuário. Para fazer isso, na primeira vez em que você executar o Dreamweaver em um dos sistemas operacionais de vários usuários compatíveis, o aplicativo criará cópias de diversos arquivos de configuração. Esses arquivos de configuração de usuário são armazenados em uma pasta que pertence a você.

Se o Dreamweaver for reinstalado ou atualizado, ele automaticamente fará cópias de backup dos arquivos de configuração de usuário existentes, de modo que se esses arquivos tiverem sido personalizados manualmente, você ainda terá acesso às alterações feitas.

Exibir documentos em guias (apenas no Mac)

Você pode exibir vários documentos em uma única janela usando guias para identificar cada um. Você também pode exibi-los como parte de uma área de trabalho flutuante, na qual cada documento aparece em sua própria janela.

Abrir um documento em guias em uma janela separada

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

Alterar a configuração padrão do documento em guias

  1. Selecione Dreamweaver > Preferências e selecione a categoria Geral.
  2. Marque ou desmarque Abrir documentos em guias e clique em OK.

O Dreamweaver não muda a exibição dos documentos que estão atualmente abertos quando as preferências são alteradas. No entanto, os documentos abertos depois da seleção de uma nova preferência são exibidos de acordo com a preferência selecionada.

A tela de boas-vindas aparece quando você inicia o Dreamweaver e quando não há nenhum documento aberto. Você pode optar por ocultar a tela de boas-vindas e exibi-la novamente mais tarde. Quando a tela de boas-vindas está oculta e nenhum documento está aberto, a janela Documento fica em branco.

Painéis comuns do Dreamweaver

É possível trabalhar com uma variedade de painéis no Dreamweaver. Alguns dos painéis mais utilizados são descritos aqui.

Visão geral do painel Inserir

O painel Inserir (Janela > Inserir) contém botões para criação e inserção de objetos, como tabelas, imagens e links. Os botões são organizados em várias categorias, que podem ser alternadas pela seleção da categoria desejada na lista suspensa na parte superior.

Painel Inserir
Painel Inserir

Algumas categorias têm botões com menus pop-up. Ao selecionar uma opção em um menu pop-up, essa opção se transforma na ação padrão do botão. Por exemplo, se você selecionar Quebra de linha no menu pop-up do botão Caractere, da próxima vez que clicar no botão Caractere, o Dreamweaver fará a inserção de uma quebra de linha. Sempre que você seleciona uma nova opção no menu pop-up, a ação padrão do botão muda.

O painel Inserir está organizado nas seguintes categorias:

HTML

Permite criar e inserir elementos HTML usados com mais frequência, como as tags div, e objetos, como imagens e tabelas.

Formulário

Contém botões para criar formulários e inserir elementos de formulário, como pesquisa, mês e senha.

Modelos

Permite salvar o documento como um modelo e marcar áreas específicas como editáveis, opcionais, repetitivas ou áreas opcionais editáveis.

Componentes do Bootstrap

Contém componentes do Bootstrap para fornecer navegação, contêineres, menus suspensos e muito mais para você usar em projetos responsivos.

jQuery Mobile

Contém botões para construir sites que usem o jQuery Mobile.

UI do jQuery

Permite inserir elementos de UI do jQuery Mobile como acordeão, controles deslizantes e botões.

Favoritos

Permite agrupar e organizar os botões do painel Inserir que você mais utiliza em um lugar comum.

Observação:

 Se você estiver trabalhando com determinados tipos de arquivo, como XML, JavaScript, Java e CSS, o painel Inserir e a opção de Visualização de design estarão desativados, porque não é possível inserir itens nesses arquivos de código.

Inserir objeto

Para inserir um objeto usando o painel Inserir:

  1. Selecione a categoria apropriada no menu pop-up Categoria do painel Inserir.

  2. Siga um destes procedimentos:

    • Clique no botão de um objeto ou arraste o ícone do botão na janela Documento (na Visualização de design, dinâmica ou de código).

    • Clique na seta em um botão e selecione uma opção no menu.

      Dependendo do objeto, uma caixa de diálogo de inserção de objeto correspondente pode aparecer, solicitando que você procure um arquivo ou especifique parâmetros para um objeto. Ou o Dreamweaver pode inserir o código no documento ou abrir um editor de tag ou um painel para que você especifique informações antes do código ser inserido.

      Para alguns objetos, nenhuma caixa de diálogo será exibida se você inserir o objeto na Visualização de design, mas um editor de tag aparecerá se o objeto for inserido na Visualização de código. Para alguns objetos, a inserção do objeto na Visualização de design faz com que o Dreamweaver passe para a Visualização de código antes da inserção do objeto.

Editar preferências do painel Inserir

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).

  2. Na categoria Geral da caixa de diálogo Preferências, desmarque Mostrar caixa de diálogo ao inserir objetos para ocultar as caixas de diálogo ao inserir objetos como imagens, tabelas, scripts e elementos de cabeçalho ou mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) ao criar o objeto.

Observação:

Ao inserir um objeto com essa opção desativada, os valores de atributo padrão são aplicados. Use o Inspetor de propriedades para alterar as propriedades de objeto depois de inserir o objeto.

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

  1. Selecione alguma categoria no painel Inserir.

  2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na área em que os botões são exibidos; em seguida, selecione Personalizar favoritos.

  3. Na caixa de diálogo Personalizar objetos favoritos, faça as alterações necessárias e clique em OK.

    Para adicionar um objeto, selecione-o no painel Objetos disponíveis à esquerda e clique na seta entre os dois painéis ou clique duas vezes no objeto no painel Objetos disponíveis.

    Personalizar favoritos do painel Inserir
    Personalizar favoritos do painel Inserir

    Observação:

    Você pode adicionar um objeto de cada vez. Você não pode selecionar o nome de uma categoria, como Comum, para adicionar uma categoria inteira à lista de favoritos.

    • Para excluir um objeto ou separador, selecione um objeto no painel Objetos favoritos à direita e clique no botão Remover objeto selecionado na lista Objetos favoritos, acima do painel.
    • Para mover um objeto, selecione um objeto no painel Objetos favoritos à direita e clique no botão de seta para cima ou para baixo, acima do painel.
    • Para adicionar um separador abaixo de um objeto, selecione um objeto no painel Objetos favoritos à direita e clique no botão Adicionar separador, abaixo do painel.
  4. Se você não estiver na categoria Favoritos do painel Inserir, selecione essa categoria para ver suas alterações.

Visão geral do painel Arquivos

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

É possível usar o painel Arquivos para exibir arquivos e pastas, verificar se estão associados ou não a um site do Dreamweaver e realizar operações de manutenção de arquivo padrão como abrir e mover arquivos.

O painel Arquivos também auxilia no gerenciamento e transferência de arquivos para e de um servidor remoto. 

Painel Arquivos
Painel Arquivos

Para obter mais informações sobre tudo o que você pode fazer no painel Arquivos, consulte Gerenciamento de arquivos e pastas.

CSS Designer

Painel do CSS Designer (Janela > CSS Designer) é um Inspetor de propriedade do CSS que permite criar “visualmente” estilos e arquivos do CSS e definir propriedades, junto com consultas de mídia.

Use Ctrl/Cmd+ Z para desfazer ou Ctrl/Cmd + Y para refazer todas as ações executadas no CSS Designer. As alterações são automaticamente refletidas na Visualização dinâmica, e o arquivo CSS relevante também é atualizado. Para informar a você que o arquivo relacionado foi alterado, a guia do arquivo afetado é destacada por um tempo (aproximadamente 8 segundos).

Painel CSS Designer (CC)
Painel CSS Designer

O painel CSS Designer consiste nos seguintes painéis e opções:

Todos: lista todos os CSS, as consultas de mídia e os seletores associados ao documento atual. É possível filtrar pelas regras CSS necessárias e modificar as propriedades. Também é possível usar esse modo para começar a criar seletores ou consultas de mídia.

Esse modo não é sensível à seleção. Isso significa que, quando você seleciona um elemento na página, o seletor, consulta de mídia ou CSS associado não são destacados no CSS Designer.

Atual: lista todos os estilos computados de qualquer elemento selecionado na Visualização dinâmica ou de design do documento atual. Quando você usa esse modo para um arquivo CSS na Visualização de código, todas as propriedades do seletor em foco são exibidas.

Esse modo é sensível ao contexto. Use essa opção para editar as propriedades dos seletores associados aos elementos selecionados no documento.

Origens: lista todas as folhas de estilo CSS associadas ao documento. Com esse painel, você pode criar e anexar um CSS ao documento ou definir estilos no documento.

@Mídia: lista todas as consultas de mídia na origem selecionada no painel Origem. Se você não selecionar um CSS específico, esse painel exibirá todas as consultas de mídia associadas ao documento.

Seletores: lista todos os seletores na origem selecionada no painel Origem. Se você também selecionar uma consulta de mídia, esse painel reduzirá a lista de seletores da consulta de mídia em questão. Se nenhum CSS ou consulta de mídia forem selecionados, esse painel exibirá todos os seletores no documento.

Quando você seleciona Global no painel @Mídia, todos os seletores não incluídos em uma consulta de mídia da origem selecionada são exibidos.

Propriedades: exibe as propriedades que você pode definir para o seletor definido. Para obter mais informações, consulte Definição de propriedades.

Se você recolhe ou expande os painéis no CSS Designer, os tamanhos dos painéis são lembrados em uma sessão. Os painéis Origem e Mídia continuam com os tamanhos personalizados até que você os altere novamente.

Observação: ao selecionar um elemento da página, o seletor mais específico é selecionado no painel Seletores. Para exibir as propriedades de um seletor específico, clique no nome dele no painel.

Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que não pertencem a consultas de mídia na origem selecionada, clique em Global no painel @Mídia.

Visão geral das guias visuais

O Dreamweaver fornece vários tipos de guias visuais para ajudar você a projetar documentos e a prever sua aparência nos navegadores. Você pode executar qualquer um dos seguintes procedimentos:

  • Ajuste imediatamente a janela Documento para um tamanho de janela desejado e veja como os elementos se ajustam na página.

  • Use uma imagem de decalque como fundo da página para ajudar a duplicar um projeto criado em um aplicativo de ilustração ou edição de imagens, como o Adobe® Photoshop® ou o Adobe® Fireworks®.

  • Use réguas e guias para fornecer uma pista visual do posicionamento preciso e do redimensionamento dos elementos de página.

  • Use a grade para posicionamento e redimensionamento preciso dos elementos absolutamente posicionados (elementos PA).

    As marcas de grade na página ajudam a alinhar os elementos PA e, quando o encaixe está ativado, os elementos PA se encaixam automaticamente no ponto de grade mais próximo ao serem movidos ou redimensionados. (Outros objetos, como imagens e parágrafos, não se encaixam na grade.) O encaixe funciona independentemente da visibilidade da grade.

Aumentar ou diminuir o zoom de uma página

O Dreamweaver permite aumentar a ampliação (mais zoom) na janela Documento, para que você possa verificar a precisão de pixel dos gráficos, selecionar itens pequenos com mais facilidade, criar páginas com texto pequeno, criar páginas grandes etc.

Para aumentar ou diminuir o zoom de uma página, selecione Exibir > Opções de visualização de design > Ampliação e escolha uma das opções de ampliação disponíveis.

Há uma grande variedade de opções de ampliação para você escolher. Você também pode escolher:

  • Ajustar seleção: selecionar um objeto ou texto e escolha essa opção para preencher a janela Documento com a seleção.
  • Ajustar tudo: preencher a janela Documento com uma página inteira.
  • Ajustar largura: preencher a janela Documento com a largura inteira de uma página.

Observação:

Você também pode aplicar mais zoom sem usar a ferramenta Zoom. Para isso, pressione Control+= (Windows) ou Command+= (Macintosh). Você também pode aplicar menos zoom sem usar a ferramenta Zoom. Para isso, pressione Control+- (Windows) ou Command+- (Macintosh).

Definir preferências gerais do Dreamweaver

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).

  2. Defina uma das seguintes opções:

    Abrir documentos em guias: abre todos os documentos em uma única janela com guias que permitem alternar entre os documentos (somente Macintosh).

    Mostrar tela Iniciar: exibe a tela de boas-vindas do Dreamweaver ao iniciar o aplicativo ou quando não há documentos abertos.

    Reabrir documentos ao inicializar: abre todos os documentos que estavam abertos quando você fechou o Dreamweaver. Se essa opção não for selecionada, o Dreamweaver exibirá a tela de boas-vindas ou uma tela em branco ao inicializar (dependendo da configuração Mostrar tela de boas-vindas).

    Avisar ao abrir arquivos somente leitura: alerta você ao abrir um arquivo somente leitura (bloqueado). Escolha desbloquear/retirar, exibir o arquivo ou cancelar.

    Ativar arquivos relacionados: permite ver quais arquivos estão conectados ao documento atual (por exemplo, arquivos CSS ou JavaScript). O Dreamweaver exibe um botão para cada arquivo relacionado na parte superior do documento e abre o arquivo quando se clica no botão.

    Identificação de Arquivos relacionados dinamicamente: permite definir se os Arquivos relacionados dinamicamente serão exibidos automaticamente na barra de ferramentas Arquivos relacionados ou após a interação manual. Também é possível desabilitar a identificação de Arquivos rel. dinamicamente.

    Atualizar links ao mover arquivos: determina o que acontece ao mover, renomear ou excluir um documento do seu site. Defina essa preferência para atualizar sempre os links automaticamente, para nunca atualizar os links ou para perguntar antes de atualizar. (Consulte Atualizar links automaticamente.)

    Mostrar caixa de diálogo ao inserir objetos: determina se o Dreamweaver deve perguntar para incluir informações adicionais ao inserir imagens, tabelas, filmes do Shockwave e alguns outros objetos usando o painel ou o menu Inserir. Se essa opção estiver desativada, a caixa de diálogo não aparecerá e você deverá usar o Inspetor de propriedades para especificar o arquivo de origem de imagens, o número de linhas de uma tabela, etc. Para imagens de sobreposição e HTML do Fireworks, uma caixa de diálogo sempre aparece quando você insere o objeto, independentemente da configuração dessa opção. Para substituir temporariamente essa configuração, clique com a tecla Control (Windows) ou a tecla Command (Macintosh) pressionada ao criar e inserir objetos.

    Ativar entrada inline de bytes duplos: permite inserir textos de bytes duplos diretamente na janela Documento se estiver usando um ambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como os caracteres japoneses). Quando essa opção não está selecionada, uma janela de entrada de texto aparece para a inserção e a conversão de textos de bytes duplos. O texto é exibido na janela Documento depois de ser aceito.

    Alternar para parágrafo simples após cabeçalho: especifica que, ao pressionar Enter (Windows) ou Return (Macintosh) no final de um parágrafo de cabeçalho na Visualização dinâmica ou de design, um novo parágrafo é criado com uma tag p. (Um parágrafo de cabeçalho tem uma tag de cabeçalho, como h1 ou h2, no início e no final.) Quando essa opção está desativada, pressionar Enter ou Return no final de um parágrafo de cabeçalho cria um novo parágrafo com a mesma tag de cabeçalho (permitindo que você digite vários cabeçalhos em uma linha e, em seguida, volte para preencher os detalhes).

    Permitir vários espaços consecutivos: especifica que digitar dois ou mais espaços na Visualização dinâmica ou de design cria espaços consecutivos que aparecem como vários espaços no navegador. Por exemplo, você pode digitar dois espaços entre sentenças, como faria em uma máquina de escrever. Essa opção foi desenvolvida principalmente para pessoas que estão acostumadas a digitar em editores de texto. Quando essa opção está desativada, vários espaços são tratados como um único espaço (porque os navegadores tratam vários espaços como espaços únicos).

    Usar <strong> e <em> no lugar de <b> e <i>: especifica que o Dreamweaver aplica a tag strong sempre que você executa uma ação que normalmente aplicaria a tag b e aplica a tag em sempre que você executa uma ação que normalmente aplicaria a tag i. Essas ações incluem o clique nos botões Negrito ou Itálico no Inspetor de propriedades de texto, no modo HTML, e a seleção de Formatar > Estilo > Negrito ou Formatar > Estilo > Itálico. Para usar as tags b e i nos documentos, desmarque essa opção.

    Observação: o World Wide Web Consortium não recomenda o uso das tags b e i. As tags strong e em fornecem informações mais semânticas do que as tags b e i.

    Avisar ao incluir regiões editáveis entre tags <p> ou <h1> - <h6>: especifica se uma mensagem de aviso deve ser exibida sempre que um modelo do Dreamweaver contendo uma região editável em uma tag de parágrafo ou de cabeçalho for salvo. A mensagem informa que os usuários não poderão criar mais parágrafos na região. A opção está ativada por padrão.

    Limitar ações de desfazer no documento ativo Limita as ações de desfazer no arquivo atual que está sendo editado. Por exemplo, se estiver editando um arquivo CSS, você pode desfazer alterações feitas apenas no arquivo CSS.

    No entanto, se está caixa de seleção estiver desmarcada, o arquivo fonte HTML e todos os arquivos CSS relacionados usam o mesmo histórico de ações de desfazer, e você pode desfazer as ações se estiver trabalhando no código HTML ou no arquivo CSS relacionado.

    Número máximo de etapas no histórico Determina o número de etapas que são relembradas pelo Dreamweaver. (O valor padrão deve ser suficiente para a maioria dos usuários.) Se você ultrapassar o número definido de etapas, as etapas mais antigas serão descartadas.

    Dicionário de ortografia: lista os dicionários de ortografia disponíveis. Se um dicionário tiver vários dialetos ou convenções de ortografia (como inglês americano e inglês britânico), os dialetos serão listados separadamente no menu pop-up Dicionário.

Definir as preferências de fontes do Dreamweaver

A codificação de um documento determina sua aparência no navegador. As preferências de fonte do Dreamweaver permitem ver determinada codificação na fonte e no tamanho que você preferir. Entretanto, as fontes que você selecionar na caixa de diálogo Preferências de fontes afetam somente a forma que as fontes aparecem no Dreamweaver; elas não afetam a forma que o documento aparece no navegador de um visitante. Para alterar a forma que as fontes aparecem em um navegador, você precisa alterar o texto usando o Inspetor de propriedades ou aplicando uma regra de CSS.

Para obter informações sobre a configuração de uma codificação padrão de novos documentos, consulte Criação e abertura de documentos.

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Mac).

  2. Na lista Categoria à esquerda, selecione Fontes.

  3. Selecione um tipo de codificação (como Europeu Ocidental ou Japonês) na lista Configurações de fontes.

    Observação:

    Para exibir um idioma asiático, 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 codificação selecionada.

    Observação:

    Para aparecer nos menus pop-up, a fonte deve estar instalada no computador. Por exemplo, para ver um texto em japonês, você deve ter uma fonte japonesa instalada.

    Fonte proporcional

    A fonte usada pelo Dreamweaver para exibir textos normais (por exemplo, textos de parágrafos, cabeçalhos e tabelas). O padrão depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padrão é a fonte Times New Roman tamanho 12. (Médio) 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 padrão depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padrão é a fonte Courier New 10 pt. (Pequeno) no Windows e Monaco 12 pt. no Mac OS.

    Visualização de código

    A fonte usada para todos os textos que aparecem na Visualização de código e no Inspetor de código. O padrão depende das fontes instaladas no seu sistema.

Personalizar cores de realce do Dreamweaver

Use as preferências de realce para personalizar as cores que identificam regiões de modelo, itens de biblioteca, tags de terceiros, elementos de layout e códigos no Dreamweaver.

  1. Selecione Editar > Preferências 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.

  3. Para ativar ou desativar o realce de uma opção específica, marque ou desmarque a opção Mostrar.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online