Área de trabalho do Dreamweaver

Adaptação ao Dreamweaver

Após instalar o Dreamweaver, quando você inicia o aplicativo pela primeira vez, um menu QuickStart aparece na tela fazendo três perguntas que ajudam a personalizar o espaço de trabalho do Dreamweaver de acordo com suas necessidades.

Com base nas suas respostas a essas perguntas, o Dreamweaver abre em um Workspace de desenvolvedor (um layout mínimo focado em código) ou um Workspace padrão (um layout dividido com ferramentas visuais e uma visualização no app enquanto você programa). 

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

Tela inicial aprimorada

A tela Página inicial do Dreamweaver oferece acesso rápido aos arquivos usados recentemente, tipos de arquivo e modelos iniciais.

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

O Dreamweaver exibe a tela Página inicial na inicialização ou quando nenhum documento está aberto.

Opções da tela inicial do Dreamweaver

Clique em Aprender para acessar instantaneamente os tutoriais do Dreamweaver nesta tela.

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

Abra um dos modelos iniciais incluídos com o Dreamweaver. 

Clique em Página inicial para voltar à tela inicial. 

Os arquivos nos quais você trabalhou recentemente são exibidos na tela inicial. Se não houver arquivos recentes, esta aba fica em branco.

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 do Creative Cloud, links de ajuda e imagens de stock que combinam com a 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 informações sobre criação e abertura de 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

O espaço de trabalho inclui os seguintes elementos:

Fica na parte superior da janela do aplicativo e contém um alternador de Workspace, menus (apenas Windows) e outros controles do aplicativo.

Contém botões que oferecem opções para diferentes visualizações da janela Documento (como visualização Design, visualização Live e visualização 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, Recortar, Copiar, Colar, Desfazer e Refazer.

Fica no lado esquerdo da janela do aplicativo e contém botões específicos da visualização.

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 este painel, você pode extrair CSS, texto, imagens, fontes, cores, gradientes e medidas dos seus comps PSD para seu 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 mais informações, consulte Gerenciar 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 CSS, arquivos e definir propriedades, juntamente com consultas de mídia.

Visão geral da janela Documento

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

Você também pode alternar visualizações usando as opções Visualizar no menu Visualizar.

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 mais informações sobre edição na visualização Live, consulte Editar elementos HTML na visualização Live.

é 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 de codificação manual para escrever e editar HTML, JavaScript e qualquer outro tipo de código.

é uma versão dividida da visualização Código que permite rolar para trabalhar em diferentes seções do documento ao mesmo tempo. 

permite ver a visualização Código e a visualização Ao vivo para o mesmo documento em uma única janela.

permite ver a visualização Código e a visualização Design para o mesmo documento em uma única janela.

mostra o código real que um navegador usa para executar a página e pode mudar dinamicamente conforme você interage com a página na visualização Ao vivo.

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. Dreamweaver exibe um asterisco após o nome do arquivo se você fez alterações que ainda não salvou.

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 mais informações, consulte Visão geral da barra de ferramentas do documento.

Você também pode alternar entre visualizações usando as seguintes opções no menu Visualizar:

• Apenas visualização Código: selecione Código
• Visualização dividida: selecione Dividir e selecione qualquer uma das opções de divisão
• Modo de visualização: alterne entre as visualizações Ao vivo e Design
• Alternar visualizações: para alternar de uma visualização para outra.

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 organizar janelas de documento em cascata: selecione Janela > Organizar > Cascata.

Para organizar janelas de 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 de Documento são tabuladas. Para reorganizar a ordem das janelas de Documento tabuladas, arraste uma guia de janela para o 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 no menu pop-up Tamanho da Janela na parte inferior da janela do 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 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. Esta lista suspensa não está disponível em documentos de grade fluida.

Mostra uma representação do documento demonstrando como o usuário o visualiza em um navegador web. 

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 todos, Imprimir código, Recortar, 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 exibição Ao vivo, você pode habilitar clique único ou cliques contínuos selecionando Exibir > Opções da exibição ao vivo > 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 no modo Ao vivo, as opções específicas do modo Código, como Formatar código-fonte, não ficam visíveis. 

Personalizar barra de ferramentas

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

Para personalizar a barra de ferramentas, faça o seguinte:

Para restaurar os botões padrão da barra de ferramentas, clique em Restaurar padrão na caixa de diálogo Personalizar barra 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 expandir o painel Saída que mostrar erros de código no documento.

Codificação por cores

(Disponível apenas no modo Código)

Selecione uma das linguagens de código neste menu pop-up para alterar a coloração do código de acordo com a linguagem de programação.

Alternar entre Inserir e Substituir

(Disponível apenas no modo Código)

Permite alternar entre os modos Inserir e Substituir enquanto trabalha no modo Código.

Número da linha e da coluna

(Disponível apenas no modo Código.)

Exibe o número da linha e o número da coluna onde 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 da página selecionado, 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 da 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 apenas os comandos 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 de código na visualização Código ou em um objeto nas visualizações Ao Vivo ou Design.

Reorganizar painéis no Dreamweaver

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

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

Movimentação de 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 (a área acima das guias).

Adição e remoção de 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 e selecione Fechar (Windows) ou, com a tecla Control pressionada, selecione Fechar (Mac), ou desmarque-o do menu de Janela.
• Para adicionar um painel, selecione-o no menu Janela e encaixe-o no local que desejado.

Manipulação de 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).

Empilhamento de painéis flutuantes

Se for arrastado para 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.

Redimensionamento de 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 no Workspace salvando para acessar posteriormente no Alternador de workspace 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 um workspace personalizado:

1. Escolha Janela > Layout da área de trabalho > Novo workspace.
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 um workspace personalizado:

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 o workspace e clique em Excluir.

Exibição ou alternância entre espaços de trabalho

Selecione um workspace no alternador de workspace na barra de ferramentas Documento.

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

Você pode personalizar o Dreamweaver para atender às suas necessidades, mesmo em um sistema operacional multiusuário como Windows XP ou 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 você reinstalar ou atualizar o Dreamweaver, o Dreamweaver cria automaticamente cópias de backup dos arquivos de configuração de usuário existentes, então, se você personalizou esses arquivos manualmente, ainda tem 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 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.

Alterar a configuração padrão do documento com abas

1. Selecione Dreamweaver > Preferências e, em seguida, selecione a categoria Geral.
2. Marque ou desmarque Abrir documentos em abas 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 usados 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 você pode alternar selecionando a 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, na próxima vez que clicar no botão Caractere, o Dreamweaver insere 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 os elementos HTML mais usados, como 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 regiões específicas como editáveis, opcionais, repetidas ou regiões opcionais editáveis.

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

Contém botões para criar sites que usam jQuery Mobile.

Permite inserir elementos jQuery UI 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 visualizar 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 mais informações sobre tudo que você pode fazer com o painel Arquivos, consulte Gerenciar arquivos e pastas.

CSS Designer

O painel CSS Designer (Windows > CSS Designer) é um Inspetor de propriedades CSS que permite criar 'visualmente' estilos CSS, arquivos 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. Você também pode 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 associado, consulta de mídia ou CSS 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 exibição Código, todas as propriedades do seletor em foco são exibidas.

Esse modo é sensível ao contexto. Use esta opção para editar as propriedades de 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 @Media, todos os seletores que não estã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 mais informações, consulte Definir 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 visualizar as propriedades de um seletor específico, clique no nome desse seletor no painel.

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

Visão geral das guias visuais

Dreamweaver fornece vários tipos de guias visuais para ajudar você a criar documentos e prever aproximadamente como eles aparecem nos navegadores.Você pode fazer qualquer uma das seguintes ações:

• 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 ampliar ou reduzir uma página, selecione Visualizar > Opções de visualização de design > Ampliação e escolha qualquer 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 optar por:

• Ajustar seleção - Selecione um objeto ou texto e escolha esta 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 do documento com toda a largura 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 como definir uma codificação padrão para 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ódigo no Dreamweaver.

Veja também

• Abrir Arquivos relacionados
• Informações gerais sobre a codificação no Dreamweaver
• Definir preferências de codificação
• Exibir e editar o conteúdo do cabeçalho
• Usar auxílios visuais para layout
• Visualizar páginas
• Trabalhar com arquivos no painel Arquivos