Em um mundo de construtores de sites de arrastar e soltar, o Adobe Dreamweaver fez bem em se manter relevante em meio à concorrência. Embalado com ótimos recursos e muitas ferramentas para facilitar sua vida, este software é uma ótima opção para web designers e desenvolvedores.
Mas como você constrói seu primeiro site usando o Dreamweaver?
Introdução ao Dreamweaver
Você precisa obter uma cópia do Adobe Dreamweaver antes de começar a trabalhar com ele, mas uma avaliação gratuita está disponível.
Dirija-se ao Adobe site, faça login ou registre uma conta e baixe a ferramenta Adobe Creative Cloud para começar. A partir daqui, você pode baixar o Adobe Dreamweaver e começar com o guia completo.
Este guia mostrará como criar um site básico usando os arquivos de modelo do Dreamweaver como base. Você pode encontrar os arquivos completos do projeto em este repositório GitHub.
Etapa 1: criar um site do Dreamweaver
Abra o Adobe Dreamweaver e vá para o Local menu no topo da página. Selecionar Novo site, escolha um nome para seu site e escolha um local de arquivo para ele.
Etapa 2: criar um arquivo de modelo
Em seguida, é hora de criar um arquivo de modelo para seu novo site. Os arquivos de modelo funcionam de maneira semelhante aos temas usados por sistemas CMS como WordPress e Shopify, só que você os cria.
Clique em Crie um novo ou vá para Arquivo > Novo e escolha Modelo HTML de tipo de documento Lista.
Isso criará um modelo básico com algum HTML já instalado. Você usará esse HTML para o seu projeto, então vale a pena mantê-lo para as próximas etapas.
Etapa 3: criar um cabeçalho no modelo
Agora é hora de construir a seção de menu/cabeçalho no site no modelo que você acabou de criar. Vamos para Inserir na parte superior da tela e selecione Cabeçalho da lista.
Uma caixa de diálogo será aberta neste momento. Adicione um nome para a classe do seu novo cabeçalho e clique em OK para adicionar o código ao seu HTML. Ele deve colocar automaticamente o novo código dentro do tags, mas você pode movê-lo se precisar.
Depois disso, você também deve adicionar um elemento div para o logotipo do site e um elemento nav para o menu do site. Vou ao Inserir menu e selecione Divisão, depois volte para o Inserir menu e selecione Navegação. Ambos os elementos precisam de seu próprio nome de classe.
Como última etapa deste processo, adicionamos algumas opções de menu ao nosso elemento de navegação. Para fazer isso, vá para Inserir e selecione Hiperlink. Adicionamos cinco hiperlinks ao cabeçalho do nosso site: Home, Lion, Tiger, Jaguar e House Cat.
As páginas que terão links no cabeçalho ainda não existem, então deixe o href propriedade em branco até que você os crie.
Etapa 4: adicionar uma folha de estilo para CSS
Como você pode ver, este site não parece muito bom como está. Um pouco de CSS resolverá esse problema, e você pode adicionar uma folha de estilo com facilidade no Dreamweaver. Vou ao Designer de CSS no lado direito da tela e clique no botão Mais ícone ao lado de Fontes. Você só precisa escolher um nome para sua folha de estilo e pode deixar o restante das configurações como estão.
A primeira coisa a fazer é transformar o cabeçalho em um flexbox. O Flexbox é apenas uma maneira de criar uma página da Web usando CSS. Além disso, a fonte do site é definida, um fundo preto é definido e várias outras alterações estão em vigor para melhorar a aparência do site. Você pode ver o código CSS completo no final do artigo.
Etapa 5: adicionar regiões editáveis ao modelo
As regiões editáveis criam seções de HTML que são editáveis quando você usa o modelo para criar outras páginas. O conteúdo da nossa página principal se encaixa perfeitamente em uma região como esta. Vamos para Inserir > Modelo > Região editável para adicionar uma região editável à sua página.
Etapa 6: adicionar conteúdo de imagem/texto ao modelo
A região editável que você acabou de adicionar pode ser usada sem nenhum HTML adicional, mas você ainda pode adicionar alguns para editar ao criar páginas individuais. Para começar, acesse Inserir e selecione Divisão para adicionar um novo elemento div ao seu site.
Isso funcionará como o contêiner para o conteúdo de texto na página, bem como um local para adicionar uma imagem de plano de fundo. Este elemento tem uma classe e um ID para que páginas diferentes tenham propriedades CSS diferentes. Esses padrões de fundo CSS exclusivos são ótimos se você quiser levar seu site do Dreamweaver para o próximo nível.
A seguir, vá para Inserir > Títulos > H1 para adicionar um título dentro do elemento div que você acabou de adicionar. Ambos os elementos precisam de algum CSS para funcionar corretamente. A div tem valores de imagem de fundo, tamanho de fundo e altura. Vamos para Arquivo > Salvar tudo para garantir que seu modelo seja atualizado.
Você pode adicionar imagens de qualquer lugar da sua rede local ou da internet, mas é melhor salvar as imagens nos próprios arquivos do site para facilitar o acesso.
Etapa 7: adicionar páginas com o modelo
Agora que você tem um modelo, você pode começar a adicionar algumas páginas. Vamos para Arquivo > Novo e selecione HTML debaixo tipo de documento. Adicionar um Título para cada página que você adiciona antes de clicar Crio.
A nova página é branca e ainda não tem nosso template. Quando sua nova página estiver aberta no Dreamweaver, vá para Ferramentas > Modelos e clique em Aplicar modelo à página. Escolha seu modelo na lista e clique em Selecionar para carregar seu modelo. Finalmente, vá para Arquivo > Salvar como e escolha um nome para sua nova página antes de salvá-la.
Repita esse processo até ter páginas suficientes para atender às suas necessidades. Você não precisa se ater a um único modelo para isso; você pode adicionar novos para diferentes layouts de página.
Etapa 8: adicionar links de página ao modelo
Com suas páginas adicionadas, você pode alterar os links de navegação em seu modelo para que eles sejam vinculados às páginas corretas. Volte ao seu modelo e encontre as tags A que você adicionou anteriormente. Exclua o link do espaço reservado e clique no botão aspas para abrir o Navegar cardápio. A partir daqui, você pode selecionar a página correta para cada um dos seus links.
Etapa 9: corrigir CSS/HTML em novas páginas
Cada uma das páginas terá a mesma aparência no momento. Existem algumas etapas a serem seguidas para garantir que eles tenham seu próprio conteúdo; siga as etapas abaixo para concluir seu novo site.
- Altere o ID do elemento div de conteúdo em cada página para refletir o título da página
- Adicione o código CSS para o novo ID do elemento com uma imagem de plano de fundo diferente
- Alterar o título em cada página
Etapa 10: teste o site em seu navegador
Você pode testar seu novo site no navegador da Web de sua escolha diretamente do Adobe Dreamweaver. Vamos para Arquivo > Visualização em tempo real e selecione o navegador de sua preferência para visualizar seu site. Isso é ótimo para testar CSS ou outro código que não seja compatível com todos os navegadores.
Agora você só precisa de um lugar para hospedar seu site. Hospedando um site estático com AWS S3 é um ótimo lugar para começar.
O código HTML e CSS
<!doctype html>
<html>
<cabeça>
<metacharset="utf-8">
<!-- TemplateBeginEditable name="título" -->
<título>Documento sem título</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="folha de estilo" tipo="texto/css">
</head>
<corpo>
<classe de cabeçalho ="cabeçalho principal">
<classe div="logotipo do site">Site de exemplo MakeUseOf</div>
<classe de navegação ="menu principal">
<a href="../Home.html">Casa</uma><a href="../Lion.html">Leão</uma><a href="../Tiger.html">Tigre</uma><a href="../Jaguar.html">Jaguar</uma><a href="../Casa Cat.html">Gato doméstico</uma>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<classe div="conteúdo principal" id="leão">
<h1>Isso é um leão!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Este HTML cria o site finalizado para nosso projeto. Você pode desmontá-lo para ver como funciona, mas recomendamos que você crie seu próprio HTML para seu site.
@charset "utf-8";
corpo {
margem: 0;
fundo: preto;
família de fontes: Gotham, "Helvética Neue", Helvética, Arial, "sem serifa";
}
.main-header {
exibição: flexível;
fundo: preto;
preenchimento: 20px;
}
.site-logo {
largura: 30%;
cor branca;
intensidade da fonte: Negrito;
transformação de texto: maiúsculas;
}
.menu principal {
largura: 70%;
text-align: direita;
}
.menu principaluma {
preenchimento: 10px;
decoração de texto: nenhuma;
cor branca;
}
.conteúdo principal {
altura: 100vh;
preenchimento: 20px;
tamanho do fundo: capa;
}
.conteúdo principalh1 {
cor branca;
tamanho da fonte: 10rem;
transformação de texto: maiúsculas;
}
#leão {
imagem de fundo: url("Imagens/largelion.png");
}
#tigre {
imagem de fundo: url("Imagens/tiger.png");
}
#onça {
imagem de fundo: url("Imagens/jaguar.png");
}
#gato doméstico {
imagem de fundo: url("Imagens/housecat.png");
}
#allcats {
imagem de fundo: url("Imagens/loadsofcats.png");
}Este CSS também faz parte do projeto finalizado. Assim como o HTML que abordamos, você pode brincar com este código para tornar este site seu.
Criando sites com o Adobe Dreamweaver
O Dreamweaver pode não parecer tão fácil de usar quanto ferramentas como WordPress ou Squarespace, mas oferece muito mais poder. Este guia é um ótimo ponto de partida, mas há muito mais para aprender e vale a pena explorar o Dreamweaver por conta própria.