Clique em Arquivo > Novo.
- 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
Para obter um site responsivo para dispositivos móveis, use modelos iniciais de Bootstrap e arraste e solte componentes de Bootstrap no Dreamweaver.
O Bootstrap é uma estrutura HTML, CSS e JavaScript gratuita e popular para o desenvolvimento de sites responsivos que priorizam os dispositivos móveis (“mobile-first”). A estrutura inclui modelos CSS e HTML responsivos para botões, tabelas, navegação, carrosséis de imagens e outros elementos que você pode usar na sua página da web. Estão disponíveis alguns plug-ins JavaScript opcionais, que permitem que mesmo os desenvolvedores com conhecimento básico de programação desenvolvam sites excelentes e responsivos.
O Dreamweaver permite criar documentos do Bootstrap e também editar páginas da Web existentes criadas com o Bootstrap. Sejam arquivos do Bootstrap totalmente desenvolvidos ou trabalhos em andamento, você pode editá-los no Dreamweaver não apenas para editar código, mas também para usar recursos de edição visual como a edição na Visualização dinâmica, o CSS Designer visual, as Consultas de mídia visual e o Extract para fazer alterações no design.
As versões do Bootstrap que têm suporte atualmente incluem v4.4.1 e v3.4.1.
Perguntas frequentes
Estou usando grades fluidas no Dreamweaver. Como posso começar a usar o Bootstrap?
Quando você criou documentos de grade fluida, o Dreamweaver tornou suas páginas da Web responsivas aplicando classes apropriadas automaticamente. Tudo o que você teve de fazer foi se concentrar no conteúdo e decidir como ele refluiria nos diferentes fatores de forma.
Da mesma forma, nos documentos do Bootstrap, você só precisa se concentrar no conteúdo e no design e a capacidade de resposta da sua página da Web será administrada pelo Dreamweaver, que está integrado com a estrutura do Bootstrap.
No momento, o Dreamweaver é compatível com as versões 3.4.1 e 4.4.1 do Bootstrap:
“O Bootstrap 3.4.1 inclui um sistema para dispositivos móveis responsivo de grade fluida que se expande corretamente até 12 colunas conforme o tamanho do dispositivo ou da janela de visualização aumenta. Ele inclui classes predefinidas para opções fáceis de layout, bem como mixins avançados para gerar mais layouts semânticos.” - Documentação do Bootstrap.
“O Bootstrap 4.4.1, com alterações importantes, inclui grades de flexbox avançadas para dispositivos móveis para criar layouts em todas as formas e escalas graças a um sistema de doze colunas, cinco níveis responsivos padrão, variáveis Sass e mixins, além de dezenas de classes predefinidas.” - Documentação do Bootstrap.
Para começar a trabalhar com documentos do Bootstrap no Dreamweaver, considere o uso de modelos iniciais do Bootstrap. O Dreamweaver inclui vários modelos voltados para diferentes tipos de sites, como comércio eletrônico ou portfólio.
Se deseja criar do zero um documento do Bootstrap, siga as etapas descritas na seção Criar documentos do Bootstrap.Posso migrar documentos existentes de grade fluida para documentos do Bootstrap no Dreamweaver?
Não, não há uma maneira direta de converter seus documentos de grade fluida existentes em documentos do Bootstrap. No entanto, a experiência do usuário no Dreamweaver ao criar e construir documentos do Bootstrap é semelhante a de documentos de grade fluida. Por exemplo, você pode começar criando um documento do Bootstrap direto na caixa de diálogo Novo documento. Enquanto você cria documentos de grade fluida para três fatores de forma básicos, como dispositivos móveis, tablets e desktop, para Bootstrap, você começa criando um documento para tamanhos básicos de tela: pequenos, médios, grandes e extra grandes. As opções de edição de layout que são exibidas quando você clica em elementos nos documentos do Bootstrap também são semelhantes aos documentos de grade fluida.
Posso importar sites antigos na versão mais recente do Dreamweaver?
Sim, você pode importar sites antigos na versão mais recente do Dreamweaver. Ao fazer isso, o Dreamweaver procura o arquivo Bootstrap CSS na pasta site root/css/.
- Se o site tiver um arquivo Bootstrap v3 CSS, a versão do Bootstrap em Gerenciar site > Configurações avançadas > Bootstrap será definida para 3.4.1.
- Se o site tiver um arquivo Bootstrap v4 CSS, a versão do Bootstrap em Gerenciar site > Configurações avançadas > Bootstrap será definida para 4.4.1.
- Se o site não tiver o arquivo Bootstrap CSS no caminho site root/css, a versão do Bootstrap em Gerenciar site > Configurações avançadas > Bootstrap será definida como 4.4.1.
Criar documentos do Bootstrap
Você pode começar a criar seu site Bootstrap usando uma das seguintes opções na caixa de diálogo Novo documento:
- Modelos iniciais de Bootstrap (Modelos iniciais > Modelos de Bootstrap): use esta opção se quiser começar a trabalhar rapidamente, sem ter de dispor as páginas do zero. Basta editar o texto e substituir os ativos, se necessário, e o site responsivo estará pronto. Consulte Usar modelos iniciais de Bootstrap para obter mais informações.
- Criar um documento HTML com base na estrutura do Bootstrap (Novo documento > HTML > Bootstrap): use esta opção se quiser criar seu site bloco a bloco usando componentes de CSS e de Bootstrap no Dreamweaver. Para saber mais informações, consulte Criar documentos HTML com base na estrutura do Bootstrap.
Usar modelos iniciais de Bootstrap
Os modelos iniciais de Bootstrap permitem que você crie páginas da Web para temas populares sem demora. Todos os arquivos dependentes na estrutura são salvos automaticamente.
-
-
Na caixa de diálogo Novo documento, clique em Modelos iniciais e selecione o modelo solicitado na lista de modelos do Bootstrap.
-
Clique em Criar.
Será criada uma página HTML com base no modelo que você escolheu. Agora você pode modificar a página adicionando ou excluindo componentes ou editando textos ou ativos conforme necessário.
Criando documentos HTML com base na estrutura do Bootstrap
Para começar a fazer um site responsivo, crie um documento HTML com base na estrutura do Bootstrap. Você pode optar por criar um conjunto de arquivos de estruturas do Bootstrap ou usar os arquivos existentes. Depois que o documento for criado, você poderá adicionar componentes de Bootstrap, como acordeões e carrosséis, usando o painel Inserir no Dreamweaver. Ou, se você tiver composições do Photoshop, você pode usar o Extract para levar imagens, fontes, estilos, texto e muito mais para o seu documento do Bootstrap.
-
Clique em Arquivo > Novo.
-
Na caixa de diálogo Novo documento, clique em Novo documento > HTML e clique na guia Bootstrap.
-
Para criar um arquivo bootstrap.css (e os outros arquivos do bootstrap), faça o seguinte:
Especifique se você deseja criar um Bootstrap CSS ou usar um CSS existente.
Se você optar por criar um CSS, uma pasta “css“ será criada na raiz do site e o arquivo bootstrap.css será copiado para a nova pasta. Se você optar por usar um CSS existente, especifique o caminho ou navegue até o local do CSS.
-
Clique em Criar novo.
-
(Opcional) Se você quiser anexar qualquer outro CSS ao documento, clique em na seção Anexar CSS. A caixa de diálogo Anexar folha de estilos externa aparecerá. Especifique as configurações e clique em OK.
-
A opção de incluir um layout previamente criado fornece uma estrutura de documento do Bootstrap básica.
Se você não quer a estrutura básica e deseja começar com um documento em branco, desmarque a opção Incluir um layout previamente criado.
-
(Opcional) O layout padrão contém 12 colunas com medianiz de 30 px. Os tamanhos de tela padrão são 576 px, 768 px, 992 px e 1200 px.
Se você quiser modificar essas configurações, clique em Personalizar. O arquivo bootstrap.css será modificado conforme necessário.
Observação:Para o Bootstrap v3.4.0, os tamanhos de tela padrão são 768 px, 992 px e 1200 px.
-
Selecione Usar Extract para criar sua página das composições do Photoshop se deseja que o painel Extract seja aberto (caso esteja fechado). Dessa maneira, você pode começar a extração de ativos das composições do Photoshop imediatamente.
Por padrão, o novo site é criado usando o Bootstrap 4.4.1. Depois de criar o documento, você encontrará as pastas css e js na pasta raiz do site. No entanto, se você deseja criar o site usando a versão 3.4.1 do Bootstrap, selecione Site > Gerenciar sites. Selecione a pasta raiz do site. Clique em Configurações avançadas > Bootstrap. No campo da lista suspensa de Versão do Bootstrap, selecione 3.4.1. Na versão 3.4.1 do Bootstrap, as pastas css, js e fontes estarão na pasta raiz do site.
A versão 3.4.1 do jQuery é compatível com páginas criadas no Bootstrap 4.4.1. Os modelos iniciais do Bootstrap serão atualizados para a versão 4.4.1 do Bootstrap.
Ao adicionar componentes do Bootstrap a uma página Bootstrap, você pode atualizar as páginas Bootstrap 4.0.0 para a versão 4.4.1 e a versão do jQuery para 3.4.1. Clique em Sim na caixa de diálogo exibida ao inserir os componentes do Bootstrap na página.
Quando você importa um site do Bootstrap 4.0.0 ou migra um site de versões anteriores para a próxima versão do Dreamweaver, a versão do Bootstrap é definida como 4.4.1 em Configuração do site > Configurações avançadas > Bootstrap.
Observação:Com o Bootstrap 4.3.1, a altura de uma coluna da linha da grade é alterada de 1 px a 0 px. Portanto, para torná-la visível na visualização dinâmica, você precisa adicionar qualquer conteúdo na coluna da linha da grade.
-
-
Para usar os arquivos de estrutura do Bootstrap existentes, faça o seguinte:
-
Clique em Usar existente e especifique o caminho do arquivo bootstrap.css. Você também pode navegar até o local onde foi salvo o CSS.
-
(Opcional) Se você quiser anexar qualquer outro CSS ao documento, clique em na seção Anexar CSS. Na caixa de diálogo Anexar folha de estilo externa, especifique as configurações e clique em OK.
-
A opção Incluir um layout previamente criado fornece uma estrutura de documento do Bootstrap básica. Se você não quer a estrutura básica e deseja começar com um documento em branco, desmarque a opção Incluir um layout previamente criado.
-
-
Clique em Criar.
O arquivo bootstrap.css criado é somente para leitura. Por isso, você não poderá editar esses estilos usando o CSS Designer; o painel Propriedades no CSS Designer está desabilitado nos arquivos do Bootstrap.
Se quiser modificar o estilo do documento do Bootstrap, crie outro arquivo CSS para substituir os estilos existentes e anexe-o ao documento.
Abrir arquivos do Bootstrap
É recomendável abrir e editar os documentos criados apenas na versão 3 ou posterior do Bootstrap no Dreamweaver.
Você pode abrir arquivos do Bootstrap de uma das seguintes maneiras:
- Clique em Arquivo > Abrir e navegue até o arquivo HTML de Bootstrap.
- (Recomendado) Crie um site do Dreamweaver e aponte a pasta do site para a pasta que contém todos os arquivos do Bootstrap.
Ao abrir um arquivo HTML de Bootstrap no Dreamweaver:
- As linhas são realçadas em linhas tracejadas em cinza com cantos arredondados.
- As colunas são realçadas em linhas tracejadas em azul.
O Dreamweaver reconhecerá os arquivos CSS associados a qualquer arquivo HTML de Bootstrap se o termo “bootstrap” fizer parte do nome do arquivo CSS. A referência ao arquivo CSS pode ser qualquer um destes itens ou todos:
- Caminho local:
O arquivo CSS minificado ou não minificado está presente localmente. Por exemplo:
<link href="css/bootstrap.css" rel="stylesheet"> ou
<link href="css/bootstrap.min.css" rel="stylesheet"> - Caminho remoto:
- CDN
Um arquivo CSS minificado ou não minificado remoto. Por exemplo:
<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">
As folhas de estilo Bootstrap nas tags link e import são aceitas no Dreamweaver. No entanto, não há suporte para a importação aninhada - um link para uma folha de estilo que por sua vez importa outra folha de estilo.
Ocultar, reexibir e gerenciar elementos ocultos do Bootstrap
Às vezes, você pode precisar que um elemento seja exibido em um visor ao passo que, em outro visor, talvez prefira ocultar o elemento por uma questão de design.
Para ocultar um elemento do Bootstrap, clique com o botão direito do mouse e selecione Ocultar elemento. O elemento fica temporariamente oculto.
Para exibir e reexibir elementos ocultos, clique com o botão direito do mouse e selecione Gerenciar elementos ocultos. Os elementos ocultos aparecem com fundo cinza hachurado. Clique no ícone de olho para reexibir o elemento.
Adicionar componentes do Bootstrap
A opção Componentes do Bootstrap no painel Inserir relaciona todos os componentes de Bootstrap que você pode adicionar à sua página da Web no Dreamweaver. De acordo com a versão do Bootstrap no arquivo bootstrap.css vinculado à página HTML, os componentes respectivos estão listados no painel Inserir. Por exemplo, no Bootstrap v4.0.0, você vê componentes adicionais, como Cartões, Emblemas. Da mesma forma, os componentes Glyphicons, Painel, Wells e Miniaturas estão disponíveis apenas no Bootstrap v3.3.7. Dependendo da versão do Bootstrap, você verá os respectivos componentes no painel Inserir. Além disso, o componente Spinners está disponível apenas no Bootstrap v4.4.1.
Os componentes no painel Inserir são dispostos de acordo com os critérios a seguir:
- O documento em foco: os componentes no painel Inserir são dispostos de acordo com a versão do Bootstrap no arquivo Bootstrap vinculado ao documento.
- Versão nas preferências do site: para um documento não-bootstrap, o Dreamweaver procura a versão em Preferências do site > Avançado > Bootstrap. Dependendo da versão nessa opção, os componentes apropriados são populados. Por padrão, para sites novos, a versão é 4.4.1.
- Onde os arquivos são salvos: para um documento não bootstrap que não faz parte de um site, o painel Inserir reflete os componentes 4.4.1.
Para adicionar um componente, arraste-o do painel para a página da Web. Antes de soltar o componente, observe os auxílios visuais como Guias dinâmicos, Inserção com precisão (usando o DOM) e Assistente de posição. Use esses recursos para colocar os componentes em sua página com rapidez e precisão. Para obter mais informações sobre como inserir elementos na página da Web, consulte Visão geral do painel Inserir.
Adicionar linhas
Clique na linha após a qual você deseja adicionar a nova linha. Em seguida, clique no ícone Adicionar nova linha. É adicionada uma linha de Bootstrap, juntamente com dois elementos-filho de coluna com seis colunas cada.
Este é o código da linha adicionada:
<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>
onde * representa o tamanho da tela atual no Dreamweaver.
Adicionar colunas
Selecione a coluna desejada e clique no ícone Adicionar nova coluna. A coluna selecionada é duplicada sem seus filhos.
Todas as colunas vazias têm uma altura mínima de 20 px. No entanto, essa altura não é realmente adicionada à página; ela só é mostrada na Visualização dinâmica para facilitar a inserção de elementos nas colunas.
Duplicar linhas e colunas
Clique na linha ou na coluna que deseja duplicar e clique no ícone de duplicação no canto inferior direito. A linha ou a coluna inteira são duplicadas juntamente com seu conteúdo.
A opção Adicionar linha ou Adicionar coluna duplica a linha ou a coluna com classes, mas sem o conteúdo.
Redimensionar e deslocar colunas
Redimensionar e deslocar colunas tornam-se ações essenciais especialmente quando você está criando designs responsivos para diversos visores.
Redimensionar colunas
Clique na coluna necessária e arraste a alça à direita para redimensioná-la. Em um documento Bootstrap v4.0.0, quando você redimensiona uma coluna, é adicionada a classe col-*-n, onde * representa a consulta de mídia atual (sm, md, ld, xl) e n representa o número de colunas que ela ocupa. Para os tamanhos de tela Extrapequeno, a classe col-n é adicionada.
Em um documento Bootstrap v3.3.7, quando você redimensiona uma coluna, é adicionada a classe col-*-n, onde * representa a consulta de mídia atual (xs, sm, md ou lg) e n representa o número de colunas que ela ocupa.
O Dreamweaver detecta o tamanho atual da tela e adiciona a classe apropriada. Para redimensionar colunas da forma adequada a visores específicos, altere o tamanho do visor usando as opções no canto inferior direito ou o depurador. Em seguida, redimensione as colunas conforme apropriado.
Deslocar colunas
Clique na coluna necessária e arraste a alça à esquerda para deslocar a coluna. O deslocamento é mostrado como uma área hachurada. Em um documento Bootstrap v4.0.0, quando você desloca uma coluna, é adicionada a classe offset-*-n, onde * representa a consulta de mídia atual (sm, md, lg ou xl) e n representa o número de colunas que ela ocupa.
Em um documento Bootstrap v3.3.7, quando você desloca a coluna, é adicionada a classe col-*-offset-n, onde * representa a consulta de mídia atual (xs, sm, md ou lg) e n representa o número de colunas que compõem o deslocamento.
O Dreamweaver detecta o tamanho atual da tela e adiciona a classe adequada. Para deslocar colunas da forma adequada a visores específicos, altere o tamanho do visor usando as opções no canto inferior direito ou o depurador. Em seguida, desloque as colunas conforme apropriado.