Crie uma página da web.
- Guia do usuário do Dreamweaver
- Introdução
- Dreamweaver e Creative Cloud
- Áreas de trabalho e exibições do Dreamweaver
- Configurar sites
- Sobre sites do Dreamweaver
- Configurar uma versão local do site
- Conectar-se a um servidor de publicação
- Configurar um servidor de teste
- Importar e exportar configurações de site do Dreamweaver
- Trazer sites existentes de um servidor remoto para a raiz do site local
- Recursos de acessibilidade do Dreamweaver
- Configurações avançadas
- Definir preferências de site para transferência de arquivos
- Especificar configurações do servidor proxy no Dreamweaver
- Sincronizar as configurações do Dreamweaver com a Creative Cloud
- Como usar o Git no Dreamweaver
- Gerenciar arquivos
- Criar e abrir arquivos
- Gerenciamento de arquivos e pastas
- Obter e colocar arquivos no servidor
- Devolver e retirar arquivos
- Sincronizar arquivos
- Comparar arquivos em busca de diferenças
- Encobrir arquivos e pastas em seu site do Dreamweaver
- Ativar as Design Notes para sites do Dreamweaver
- Impedir possível ataque ao Gatekeeper
- Layout e design
- CSS
- Noções sobre as folhas de estilos em cascata
- Aplicar layout às páginas usando o CSS Designer
- Usar pré-processadores de CSS no Dreamweaver
- Como definir preferências de estilo CSS no Dreamweaver
- Mover regras de CSS no Dreamweaver
- Converter CSS inline em uma regra de CSS no Dreamweaver
- Trabalhar com tags div
- Aplicação de degradês ao fundo
- Criar e editar efeitos de transição do CSS3 no Dreamweaver
- Formatar código
- Conteúdo e ativos de página
- Definir propriedades da página
- Configurar propriedades de cabeçalho e propriedades de link de CSS
- Trabalhar com texto
- Localizar e substituir texto, tags e atributos
- Painel DOM
- Editar na Visualização dinâmica
- Codificar documentos do Dreamweaver
- Selecionar e exibir os elementos na janela Documento
- Definir propriedades de texto no Inspetor de propriedades
- Verificar ortografia de uma página Web
- Usar regras horizontais no Dreamweaver
- Adicionar e modificar combinações de fontes no Dreamweaver
- Trabalhar com ativos
- Inserir e atualizar datas no Dreamweaver
- Criar e gerenciar ativos favoritos no Dreamweaver
- Inserir e editar imagens no Dreamweaver
- Adicionar objetos de mídia
- Adição de vídeos no Dreamweaver
- Inserir vídeo HTML5
- Inserir arquivos SWF
- Adicionar efeitos de áudio
- Inserir áudio HTML5 no Dreamweaver
- Trabalhar com itens da biblioteca
- Usar texto em árabe e hebraico no Dreamweaver
- Vinculação e navegação
- Efeitos e widgets do jQuery
- Programar sites
- Sobre codificação no Dreamweaver
- Ambiente de codificação no Dreamweaver
- Definir preferências de codificação
- Personalizar codificação por cores
- Escrever e editar código
- Dicas de código e preenchimento de código
- Recolher e expandir código
- Reutilizar código com snippets
- Linting de código
- Otimizar código
- Editar código na Visualização de design
- Trabalhar com conteúdo do cabeçalho das páginas
- Inserir inclusões de servidor no Dreamweaver
- Usar bibliotecas de tags no Dreamweaver
- Importar tags personalizadas para o Dreamweaver
- Usar comportamentos JavaScript (instruções gerais)
- Aplicar comportamentos internos do JavaScript
- Sobre XML e XSLT
- Executar transformações XSL do servidor no Dreamweaver
- Executar transformações XSL do cliente no Dreamweaver
- Adicionar entidades de caracteres para XSLT no Dreamweaver
- Formatar código
- Fluxos de trabalho entre produtos
- Instalar e usar extensões no Dreamweaver
- Atualizações dentro do aplicativo no Dreamweaver
- Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
- Trabalho com o Fireworks e o Dreamweaver
- Editar conteúdo em sites do Dreamweaver usando o Contribute
- Integração do Business Catalyst ao Dreamweaver
- Criar campanhas de email personalizadas
- Modelos
- Sobre os modelos do Dreamweaver
- Reconhecimento de modelos e documentos baseados em modelo
- Criar um modelo do Dreamweaver
- Criar regiões editáveis nos modelos
- Criar regiões e tabelas repetitivas no Dreamweaver
- Usar regiões opcionais em modelos
- Definir atributos de tag editáveis no Dreamweaver
- Como criar modelos aninhados no Dreamweaver
- Editar, atualizar e excluir modelos
- Exportar e importar conteúdo xml no Dreamweaver
- Aplicar ou remover um modelo em um documento
- Editar conteúdo em modelos do Dreamweaver
- Regras de sintaxe para tags de modelo no Dreamweaver
- Definir preferências de realce para regiões de modelo
- Vantagens de usar modelos no Dreamweaver
- Dispositivo móvel e multitela
- Sites dinâmicos, páginas e formulários Web
- Noções sobre aplicativos Web
- Configurar o computador para desenvolvimento de aplicativos
- Solucionar problemas de conexões de banco de dados
- Remover scripts de conexão no Dreamweaver
- Criar páginas dinâmicas
- Visão geral das fontes de conteúdo dinâmico
- Definir origens de conteúdo dinâmico
- Adicionar conteúdo dinâmico a páginas
- Alterar conteúdo dinâmico no Dreamweaver
- Exibir registros de banco de dados
- Fornecer e solucionar problemas de live data no Dreamweaver
- Adicionar comportamentos personalizados de servidor no Dreamweaver
- Criar formulários usando o Dreamweaver
- Usar formulários para reunir informações de usuários
- Criar e ativar formulários do ColdFusion no Dreamweaver
- Criar formulários Web
- Suporte aprimorado a HTML5 para elementos de formulário
- Desenvolver um formulário usando o Dreamweaver
- Criação visual de aplicativos
- Criar páginas mestre e detalhadas no Dreamweaver
- Criar páginas de pesquisa e de resultados
- Criar uma página de inserção de registro
- Criar uma página de registro de atualização no Dreamweaver
- Criar páginas de exclusão de registro no Dreamweaver
- Usar comandos ASP para modificar um banco de dados no Dreamweaver
- Criar uma página de registro
- Criar uma página de logon
- Criar uma página que apenas usuários autorizados podem acessar
- Proteger pastas no ColdFusion usando o Dreamweaver
- Usar componentes do ColdFusion no Dreamweaver
- Testar, visualizar e publicar sites
- Solução de problemas
Você pode usar consultas de mídia para especificar arquivos CSS com base nas características informadas de um dispositivo (design responsivo). O navegador em um dispositivo verifica a consulta de mídia e usa o arquivo CSS correspondente para exibir a página da web.
Por exemplo, a seguinte consulta de mídia especifica o arquivo phone.css para dispositivos de 300-320 pixels.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
Para uma obter introdução extensa às consultas de mídia, leia o artigo de Don Booth no Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_br.
Para obter mais informações sobre consultas de mídia da W3C, consulte www.w3.org/TR/css3-mediaqueries/.
Criar consulta de mídia
No Dreamweaver, você pode criar um arquivo de consulta de mídia para todo o site ou uma consulta de mídia para um documento específico.
Arquivo de consulta de mídia para todo o site
Especifica configurações de exibição de todas as páginas em seu site que incluem o arquivo.
O arquivo de consulta de mídia para todo o site age como repositório central de todas as consultas de mídia em seu site. Depois de criar o arquivo, vincule-o a páginas em seu site que precisem usar consultas de mídia para a exibição do arquivo.
Consulta de mídia para documento específico
A consulta de mídia é inserida diretamente no documento, e a página é exibida com base na consulta de mídia inserida.
-
-
Selecione Modificar > Consultas de mídia.
-
Siga um destes procedimentos:
Para criar um arquivo de consulta de mídia para todo o site, selecione Arquivo de consultas de mídia para todo o site.
Para criar uma consulta de mídia específica de um documento, selecione Este documento.
-
Para fazer uma consulta de mídia para todo o site, faça o seguinte:
-
Clique em Especificar.
-
Selecione Criar novo arquivo.
-
Especifique um nome para o arquivo e clique em OK.
-
-
É possível que alguns dispositivos não informem a largura real. Para forçar dispositivos a informar a largura real, verifique se a opção Forçar dispositivos a informar largura real está ativada.
O seguinte código é inserido no arquivo quando você escolhe essa opção.
<meta name="viewport" content="width=device-width">
-
Siga um destes procedimentos:
Clique em "+" para definir as propriedades do arquivo de consulta de mídia.
Clique em Predefinições Padrão se quiser começar com predefinições padrão.
-
Selecione linhas na tabela e edite as respectivas propriedades usando as opções em Propriedades.
Descrição
A descrição do dispositivo para o qual o arquivo CSS deve ser usado. Por exemplo, telefone, televisão, mesa digitalizadora etc.
Largura mínima e máxima
O arquivo CSS é usado para dispositivos cuja largura informada está dentro dos valores especificados.
Observação:deixe a Largura mínima ou a Largura máxima em branco se não desejar especificar um intervalo explícito para um dispositivo. Por exemplo, é comum deixar a Largura mínima em branco para telefones, cuja largura é de 320px ou menos.
Arquivo CSS
Selecione Usar arquivo existente e navegue até o arquivo CSS do dispositivo.
Se deseja especificar um arquivo CSS que ainda será criado, selecione Criar novo arquivo. Digite o nome do arquivo CSS. O arquivo é criado quando você pressiona OK.
-
Clique em OK.
-
Um novo arquivo é criado para um consulta de mídia para todo o site. Salve-o.
Consulta de mídia para todo o site: Em páginas existentes, verifique se você incluiu o arquivo de consulta de mídia em todas as páginas na tag <head>.
Exemplo de um link de consulta de mídia onde mediaquery_adobedotcom.css é o arquivo de consulta de mídia para todo o site www.adobe.com/br de site:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Usar um arquivo de consultas de mídia existente
-
Crie uma página da Web ou abra uma existente.
-
Selecione Modificar > Consultas de mídia.
-
Selecione o arquivo de consultas de mídia para todo o site.
-
Clique em Especificar.
-
Selecione Usar arquivo existente se você já tiver criado um arquivo CSS com a Consulta de mídia.
-
Clique no ícone de busca para procurar e especifique o arquivo. Clique em OK.
-
Selecione o arquivo de consultas de mídia para todo o site.
-
Para forçar dispositivos a informar a largura real, verifique se a opção Forçar dispositivos a informar largura real está ativada. O seguinte código é inserido no arquivo quando você escolhe essa opção.
<meta name="viewport" content="width=device-width">
-
Clique em OK.
Escolher um arquivo de consultas de mídia para todo o site diferente
Use este procedimento para alterar o arquivo de consultas de mídia para todo o site que você definiu na caixa de diálogo Consultas de mídia.
-
Selecione Site > Gerenciar sites.
-
Na caixa de diálogo Gerenciar sites, selecione o seu site.
-
Clique em Editar. A caixa de diálogo Configuração de site é exibida.
-
Em Configurações avançadas no painel esquerdo, selecione Informações locais.
-
No arquivo de consulta de mídia para todo o site, no painel direito, clique em Procurar para selecionar o arquivo CSS da consulta de mídia.
Observação:a alteração do arquivo de consulta de mídia para todo o site não afeta documentos vinculados a um arquivo de consulta de mídia para todo o site diferente ou anterior.
-
Clique em Salvar.
Exibir páginas da Web com base em consulta de mídia
As dimensões especificadas em uma consulta de mídia aparecem nas opções de tamanho de botão/janela de várias telas. Quando você seleciona uma dimensão do menu, as seguintes modificações são vistas:
O tamanho da visualização muda para refletir as dimensões especificadas. O tamanho do quadro de documento permanece inalterado.
O arquivo CSS especificado na consulta de mídia é usado para exibir a página.