Adobe Dreamweaver

Quando você inicia o desenvolvimento de sites, você provavelmente já encontrou editores WYSIWYG. O que você vê é o que você obtém (traduzido: o que você vê é o que você tem). A tentação de criar um site sem nenhuma habilidade de programação pode ter levado você a procurar um tutorial Dreamweaver completamente na internet.

A primeira vez que você usa o Dreamweaver pode ser intimidante. Não se preocupe, neste artigo abordaremos tudo sobre a criação de um site usando o Dreamweaver. Então pare de falar e vá diretamente ao tutorial mais abrangente do Dreamweaver nesta web!

O que é o Adobe Dreamweaver CC?

Adobe Dreamweaver

O Adobe Dreamweaver CC é um famoso criador de sites e ferramenta de desenvolvimento, que é considerado, entre outras coisas, um editor WYSIWYG perfeito, por exemplo, como um editor convencional. editor HTML, O Dreamweaver foi originalmente desenvolvido pela Macromedia e depois adquirido pela Adobe Inc. em 2005.

Inicialmente, o Dreamweaver usava uma licença única para usar o software, mas logo mudou para um modelo de registro usando a estrutura da Adobe Creative Cloud.

O Adobe Dreamweaver CC é um software de ambiente de desenvolvimento integrado (IDE), ou seja, ferramentas e suportes alinhados com os objetivos dos desenvolvedores. Com o framework Creative Cloud, você pode adicionar outros softwares da Adobe para aumentar sua produtividade.

Com o Dreamweaver, você pode criar e visualizar um site usando o método de arrastar e soltar que permite mover os elementos no painel Designer. Você também pode usá-lo como qualquer outro editor convencional – basta codificar o texto e fazer o upload do site para o seu servidor imediatamente.

Você também terá acesso a diversos materiais e recursos de aprendizado, além de uma comunidade e um fórum dedicados a tópicos da Adobe para responder todas as suas dúvidas sobre o produto. Se você está procurando mais tutoriais do Dreamweaver, você encontrará vários na Web.

Essas funções colocam o Dreamweaver em uma posição entre Sistema de gerenciamento de conteúdo e um editor de código.

De agora em diante, você notará algumas ilustrações em inglês, mas explicaremos tudo em detalhes no artigo.

Características incríveis

Como parte do ecossistema criativo da Adobe, o Dreamweaver já foi destacado por outros editores de código visual. O Dreamweaver tem acesso a benefícios que somente a Adobe pode oferecer. No entanto, aqui estão as duas principais características:

Interface visual amigável para iniciantes

Interface Adobe Dreamweaver

O Adobe Dreamweaver CC é fácil de usar, mas difícil de dominar ao mesmo tempo. Seu site será tão bom quanto suas habilidades. Isso significa que, embora o software tenha muitos recursos de desenvolvimento, conhecimento básico ou limitado, você não pode usar todos os recursos dessas funções.

No entanto, os iniciantes podem começar a construir um site graças ao editor visual. Existem funções de arrastar e soltar para inserir elementos HTML Em seu projeto, você pode ver imediatamente quaisquer alterações feitas no site. Um tutorial simples no Dreamweaver ajudará.

Isso também ajuda você a entender em qual parte do elemento você está trabalhando. Se você clicar no título, o código será destacado no editor como no exemplo.

Dreamweaver e-usabilidade

Editor de código de energia

Outro aspecto importante do Dreamweaver é o editor de código embutido. Se os desenvolvedores profissionais quiserem escrever código em um editor de texto, eles podem. Algumas das principais características são:

  • Syntax Highlighting Para facilitar a leitura do código, elementos como variáveis, ID, classe etc. são realçados.
  • Complete o código, Aumente sua produtividade preenchendo automaticamente o código. Por exemplo, insira img e pressione aba inserir no teclado ””
  • Documentação CSS, Se você precisar de referências a propriedades CSS, há alguns documentos sobre os recursos que são exibidos com informações relevantes no Editor de Códigos.

Outras características importantes são:

  • Bootstrap 4, A última versão do HTML, CSSe moldura JavaScript para o desenvolvimento de um website responsivo.
  • suporte git, Executa todos os comandos operacionais git incluindo imprensa, puxar, cometere obter diretamente do painel de controle do Dreamweaver.
  • visualização do navegador em tempo real, Veja as alterações no seu site durante a edição em tempo real.
  • Bibliotecas de nuvem criativas. Acesse cores, gráficos e outras permissões criativas no banco de dados.
  • Chromium Embedded Framework (CEF), Ajuda os desenvolvedores a integrarem navegadores para usar aplicativos de terceiros.

Nem tudo é perfeito

No entanto, o Adobe Dreamweaver CC também tem desvantagens. Como mencionado acima, este software é bom de acordo com suas habilidades. Enquanto a Live UI ajuda os iniciantes a criar um site, você provavelmente precisará de mais tempo para criar um site realmente sofisticado.

Apesar de todas as informações, o Dreamweaver tem uma curva de aprendizado mais nítida. Você precisa investir muito tempo para entender todos os seus recursos. Portanto, se você espera ler um tutorial do Dreamweaver e se tornar um profissional, teremos que desapontá-lo.

Também é um serviço pago que não é barato. Portanto, o Dreamweaver provavelmente não é a melhor ferramenta para desenvolvedores amadores.

Dica: Se você acha que o Adobe Dreamweaver CC não é para você, não está sozinho. Na verdade, 33% dos proprietários de sites escolhem o WordPress para criar um site. Isso é possível Basta criar seu site também. E se você tiver uma conta no Hostinger, é ainda melhor. Você pode criar um site com o instalador automatizado de um clique que faz o trabalho para você.

Visão geral de preços sobre o Dreamweaver

Com software baseado em registros, o Dreamweaver oferece muitos planos para usuários individuais. O plano pré-pago para o aplicativo único com armazenamento em nuvem de 100 GB portfólio da Adobe, fontes e faísca custa R $ 90,00 por mês e ano.

O plano Todos os Aplicativos inclui a coleção completa de mais de 20 softwares, incluindo Photoshop CC, Illustrator CC e Adobe XD CC vai custar 348,00 R $ por mês e ano.

Aqui você pode ver os planos disponíveis:

Tabela Price-Dreamweaver

Você pode usar o Dreamweaver por sete dias para testar serviços e obter informações. Baixe o aplicativo e registre-se Facebook ou o Google,

Vamos começar com o básico neste tutorial do Dreamweaver e aprender como criar uma página principal para um site.

Tutorial do Dreamweaver: Criando um site

1. Crie um novo site

Mude para o painel de controle do Adobe Dreamweaver CC Site -> Novo Site e uma janela é exibida.

novo site do Dreamweaver

O primeiro passo é dar um nome ao seu site e salvá-lo em uma única pasta. Isso ajuda a organizar seus arquivos e simplificar o processo de upload.

Se você quiser incluir fotos em seu site, poderá fazê-lo navegando Configurações avançadas -> Informações locais , Pastas de imagem também devem ser criadas na pasta do seu site.

informação local

Clique salvar quando terminar

2. Crie um arquivo da página inicial

Neste momento, um espaço de trabalho vazio é exibido. No entanto, observe no canto superior direito do seu painel que os arquivos do site devem estar lá. Agora vamos criar o arquivo de página principal a partir do zero.

Entrar Arquivo> Novo e escolha Novo documento, Selecione o tipo de HTML como o tipo de documento e clique em preparar, Você pode dar ao documento um título, se quiser.

novo documento HTML

Você será redirecionado de volta para a área de trabalho e terá uma página em branco com várias linhas de código HTML. Na verdade, há uma prévia ao vivo do seu site. Salve o arquivo HTML como index.htmle coloque-o na pasta de localização.

3. Crie um cabeçalho

Criamos um cabeçalho para o site. Geralmente, este é o logotipo e o nome do seu site.

Clique na página em branco ou selecione um local específico dentro do elemento no editor Vá para o canto superior direito do painel e clique em inserir, Isso fornecerá uma lista de elementos HTML que você pode adicionar à sua página.

Item de pesquisa cabeçalho,

Clique ou arraste e solte na área de trabalho e ele será adicionado ao seu site junto com o código.

Inserir cabeçalho

Então nós transformamos o cabeçalho em um título marcado

, Isso é para SEO e permitir que os mecanismos de pesquisa saibam qual é o seu site. Selecione o texto nesta seção e vá para inserir no painel de instrumentos. Pesquise e clique cabeçalho: H1,

Em seguida, altere o texto do título do seu site. Deve ser algo que descreve e representa seu site. Aqui nós usamos "Welcome to the Hostinger Test Site".

Exemplo de site de hospedagem

4. Adicione navegação em casa

Para adicionar um botão de navegação, adicione uma linha após o título clicando em Voltar ou Entrar. Agora vá em inserir no painel e procure o navegação, Se você clicar, aparecerá uma janela. escrever navegação como ID e clique oK,

navegação

Isso adiciona um item de navegação ao editor. Pesquise o item de conteúdo hyperlink no painel inserir, Clique e insira os detalhes conforme mostrado abaixo:

Inserir hiperlink

importante: O link é o mesmo que a página que você está navegando no seu site. Agora nós apenas usamos uma hashtag para preencher o espaço vazio.

Quando terminar, clique em oK, Agora você tem um botão "Iniciar" clicável e linhas adicionais de código adicionadas ao editor.

Adicionar botão de navegação

5. Adicionar descrição do local

Vamos adicionar um local de trabalho título secundário, um parágrafo e vários tópicos como uma descrição.

Inserir uma linha após o código de navegação e clique em Cabeçalho: H2 e de vendas no painel inserir, Isso adicionará as tags

e

no editor Preencha o conteúdo que você deseja adicionar.

Website com cabeçalhos e parágrafos

Para adicionar o marcador de lista, adicione outra linha abaixo do parágrafo do código. Entrar inserir e clique Lista desordenada, Isso deve adicionar a tag

    no editor Clique aqui Listar artigos não inserir e depois o dia

  • é adicionado dentro da tag
      ,

      Uma coisa sobre a lista de HTML é que você tem que adicionar manualmente várias tags com os números de marcadores que deseja avaliar. O nosso parecerá assim:

      Site com lista

      Você acabou de criar a estrutura básica de uma página. Você também pode adicionar outros conteúdos, como formulários, vídeos, imagens e assim por diante. Mas para o começo já é muito bom aqui.

      Tudo parece um pouco rústico agora, então vamos adicionar a folha de estilo para tornar a aparência mais atraente.

      6. Crie um arquivo CSS

      Folha de Estilo em Cascata (CSS) é usado para projetar elementos HTML e é muito útil quando os desenvolvedores desejam criar um site. Imagine o HTML como a estrutura do corpo, e CSS é a parte estética que torna o corpo visualmente atraente.

      Primeiro, dê um cabeçalho ao seu cabeçalho. Vá para o botão direito do painel do Dreamweaver e selecione o painel de controle DOM, Lá você terá uma visão geral da estrutura do seu site.

      Clique cabeçalhoe você notará que o texto é destacado em azul junto com a legenda e um sinal de mais.

      Presente para adicionar CSS

      Clique no sinal de mais e digite #header, A hashtag significa que você registrou um ID para este item. Clique em Voltar ou insira. Selecione a fonte no seguinte menu Crie um novo arquivo CSS,

      Uma nova janela será exibida. escolher navegador e localize a pasta do seu site. tipo style.css e clique salvar, Então clique oK, Nota: As impressões dos tópicos 6 a 9 estão em inglês.

      Novo arquivo CSS criado

      Você vai notar um novo style.css na parte superior da visualização ao vivo e um novo link de elemento no editor de código.

      Faça o mesmo para todos os elementos que precisam de estilos. Salve o mesmo arquivo em vez de criar um novo arquivo CSS style.css que você criou anteriormente.

      Agora você pode usar o seletor CSS.

      7. Crie um título CSS para o título do site

      Nós mudamos a fonte e centralizamos o título do seu site.

      Verifique o H1 sob o cabeçalho no painel DOM. Então escolha Designer de CSS o painel acima.

      destacar o design e selecioná-lo

      Clique no sinal de mais diretamente atrás do seletores, Automaticamente ela sugere um nome #header h1, pressione no retorno.

      sugestão: Isso significa que seu alvo é apenas o item chamado h1 dentro do elemento #header, Desta forma, o estilo é aplicado apenas ao texto escrito (o título do seu site) e não ao cabeçalho, o elemento de cabeçalho.

      8. Alterar a fonte do título

      Certifique-se de que o eleitor escolhe #header h1,

      Clique recursos e desmarque a caixa de seleção Mostrar Conj. para desbloquear as opções traçado, texto, borda, fundo e Mais artigos,

      Mostrar propriedades

      Clique texto e passe o mouse sobre ele família da fonte e clique fonte padrão, Isto dá-lhe muitas opções para escolher.

      opções de fonte

      Além disso, o Gerenciar fontes outras possibilidades diretamente do banco de dados Fontes da Web do Adobe Edge,

      Selecione sua fonte preferida clicando nela. Aqui nós usamos a fonte nomeada Karla, Quando terminar, a origem do título do site é alterada e o código é fornecido com o código necessário fonte e style.css,

      Escolha da fonte

      9. Centralize o título

      No textoMova o mouse Alinhar texto e clique centro, Você notará que a alteração foi feita e um código adicional foi adicionado style.css,

      Centralize o código

      Faça as alterações necessárias no conteúdo do seu site. Neste tutorial, também adicionamos mais conteúdo e criamos nosso website. Aqui está o resultado final:

      Página de teste do tutorial

      Se você precisar de nosso código para referências, poderá acessar os códigos HTML aqui e códigos CSS aqui, Divirta-se

      Crie um site com um tema do Dreamweaver

      Você também pode criar um site com um tema predefinido do Dreamweaver. Com um tópico você está um passo à frente e sabe como será o resultado final do site quando o código seguir.

      Vamos para outra parte do nosso tutorial do Dreamweaver e aprender a usar um tema:

      1. Selecione um tópico

      Para fazer isso, vá para Arquivo -> Novo, escolher Modelos de origem -> Layouts básicos, Nós usaremos uma única página neste tutorial. Clique preparar,

      Página única do Dreamweaver

      No Dreamweaver, basicamente todas as estruturas e estilos necessários para o seu site foram criados. Tudo o que você precisa fazer é ajustar o conteúdo e deixar o estilo de acordo com suas necessidades.

      Dreamweaver modelo de página única

      Neste tutorial, apenas fazemos alterações fundamentais, como: Por exemplo, edite o título e a descrição do seu site e altere algumas das cores de fundo do site.

      2. Alterar o logotipo e o texto do cabeçalho

      Para alterar o texto do logotipo, clique em h4 .logo no painel DOM, Isto irá destacar a linha de código no editor e alterá-lo para o nome que você deseja.

      Alternativamente, você pode clicar na caixa do logotipo em tempo real e alterar o texto de lá. Faça o mesmo para o cabeçalho e o slogan do site. Nós mudamos assim:

      Página de amostra no Dreamweaver

      3. Alterar a cor de fundo do cabeçalho

      Para alterar a cor do plano de fundo, acesse o arquivo Css e clique no cabeçalho. Nesse caso, é isso .hero, Procure a cor de fundo e você verá um número enigmático lá.

      Esse número não é nada mais que o código HTML da cor. Cada cor tem seu número, que você pode verificar aqui,

      A coisa interessante sobre o Dreamweaver é que você não precisa ir a outro lugar para encontrar a cor. Basta clicar no número, clicar duas vezes e selecionar Processamento rápido, Uma janela para selecionar a cor é exibida e você pode fazer as configurações a partir dela.

      Alterar a cor de fundo no Dreamweaver

      No nosso caso, mudamos assim:

      Exemplo Alterar cor

      Obviamente, o trabalho ainda precisa ser feito. O conteúdo deve ser estilizado e adaptado. Este tutorial contém apenas as alterações básicas que você pode fazer no tópico.

      Quando você terminar de otimizar seu site, poderá enviá-lo para o servidor. Você logo aprenderá como fazer isso.

      Visualize seu site em dispositivos móveis

      Um site responsivo é imprescindível na era dos smartphones. Caso contrário, os visitantes sairão do seu site. Ao criar um site usando o Dreamweaver, um dos recursos interessantes é que você pode visualizar como seu site ficará imediatamente em dispositivos móveis. É assim que é feito:

      Entrar vista parte inferior à direita na sua área de trabalho. Abra o navegador em seu smartphone e digitalize o código de barras ou insira o URL manualmente.

      importante: Você precisará usar a mesma ID da Adobe no seu Dreamweaver e no dispositivo móvel. E também use a mesma rede WiFi e Javascript e cookies ativados.

      Alternativamente, você pode usar telefone celular embutido no Dreamweaver. Vá para o menu Mostrar no dispositivo e selecione sua opção de dispositivo.

      Você deve saber que os tópicos são principalmente responsivos a dispositivos móveis. No entanto, esse não é o caso se você criar um site a partir do zero sem usar um design pré-fabricado.

      Para fazer isso, você precisará adicionar uma consulta de mídia ao seu código CSS e ajustar o tamanho do pixel e a porcentagem da página de acordo. Nós explicamos em detalhes neste tutorial Para criar um site responsivo,

      Postar um site

      Quando você terminar seu site, poderá publicá-lo diretamente no Dreamweaver. Você só precisa de um hospedagem ativa e um conta FTP, Aqui está um tutorial do Dreamweaver e como fazer isso:

      Faça uma conexão FTP Vá para o Dreamweaver Site -> Gerenciar Sites, Na próxima janela, selecione o site a ser desenvolvido e clique no ícone de lápis abaixo. Uma nova janela será exibida. Ir para servidor,

      1. Crie uma nova conexão FTP

      Clique mais na janela servidore o formulário de conexão FTP é exibido. Você tem que preenchê-lo.

      Se você é um cliente HostingerEncontre os detalhes do seu FTP no seu painel de controle. Acesso ao painel de comando > Gerenciar> tipo conta FTP na barra de pesquisa.

      2. Preencha os detalhes da conexão

      Quando você tiver preenchido o formulário, clique em teste, O Dreamweaver informará se a conexão foi bem-sucedida. Não esqueça de clicar salvar,

      Entre novamente arquivo No Dashboard, você pode se conectar ao servidor com opções como true arquivo e sincronizar A partir daqui você pode enviar seu site para o servidor.

      conclusão

      Ufa! Isso acabou. Neste tutorial, você aprendeu os fundamentos da criação de um site usando o Dreamweaver.

      Você também aprendeu como criar um site a partir do zero, usar temas padrão, exibir o site para dispositivos móveis e publicar seu site no servidor.

      Isso funcionou lá fora? Conte-nos nos comentários abaixo.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

You May Also Like

Como Renomear Arquivo Linux

Este terminal é uma ferramenta insubstituível para administradores de servidores Linux. Os…

Aprenda Como Listar Usuários no MySQL Usando Linux

O MySQL é um dos gerenciadores de banco de dados mais populares…

Aprenda O Que é LocalHost e as Vantagens de Usá-lo

Todo mundo usa uma linguagem para se comunicar com outras pessoas. No…

Como Fazer Uma Intranet Com WordPress

Se você é um desenvolvedor profissional e suas atividades estão aumentando, a…