Área de trabalho do 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 a personalizar sua área de trabalho do Dreamweaver de acordo com as suas necessidades.

De acordo com as 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.

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.

Opções da tela inicial do Dreamweaver

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

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

Abra um dos modelos iniciais integrados usando o Dreamweaver. 

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.

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.

Visão geral dos elementos da área de trabalho

A área de trabalho inclui os seguintes elementos:

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.

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

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.

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

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

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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

é um ambiente com codificação manual para gravação e edição em HTML, JavaScript e qualquer outro tipo de 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. 

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

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

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.

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.
• (macOS) 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.

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.

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

Adicionar um novo tamanho ao 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.

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

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

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.

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

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

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), o Dreamweaver carregará a página na janela Documento.

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:

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.

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

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.

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

Menus de contexto

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.

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

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:

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

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

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

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

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

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

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

Inserir objeto

Para inserir um objeto usando o painel Inserir:

Editar preferências do painel Inserir

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

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. 

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

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.

Definir preferências gerais do Dreamweaver

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.

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.