Criando um menu personalizado no Dreamweaver com HTML e CSS
Tutorial de Dreamweaver
Quando pensamos em criar um site, o primeiro passo que precisamos nos preocupar é com a criação de um banner com menu de links (os famosos botões). Mas para alguns isso pode se transformar em uma dor de cabeça imensa. Existem várias formas diferentes de criarmos esse banner com menu. A seguir, mostrarei uma delas através da codificação HTML e CSS no programa Adobe Dreamweaver. Esse tutorial requer conhecimento mínimo no programa, e com ele você poderá se ambientar ao Dreamweaver. Vamos lá?
Passo a passo
Para começar, inicie o programa Dreamweaver e clique em “HTML” para criar um novo documento inicial.
Iremos criar um código bem simples, utilizando inicialmente apenas HTML.
Nas 10 primeiras linhas, estamos criando o código em HTML. Na linha 6, estamos vinculando o arquivo CSS, que ainda será escrito.
A partir da linha 13, declaramos uma sessão, que terá o id “top”, abriremos também uma div com o id “top2”, a mais uma div com o id ”logotipo” (nesta mesma linha inserimos a imagem do logotipo, que já deverá estar pronta, dentro da pasta “img”).
Na linha 17, estamos criando uma lista não ordenada, e cada botão será um item dessa lista.
Salvem este documento com o nome de “index.html”.
Feito isso, crie um documento novo escolhendo a opção CSS.
E agora vamos criar o código em CSS. Esse código será simples, porém teremos que prestar atenção nos detalhes.
Nesse código CSS, nas 10 primeiras linhas estaremos apenas configurando as margens, cores e fonte utilizada. Da linha 12 a 24, estaremos configurando primeiramente, a parte em que ficarão as configurações do Menu. Da linha 25 a 31, configuramos as opções do logotipo, e a partir da 32, estão as configurações dos botões em si.
Três linhas bem importantes são a linha 30, a linha 40 e a linha 47, onde definimos respectivamente que o logo ficará à direita, a lista não terá estilo, e os botões ficarão à esquerda.
As linhas 51, 52 e 53, estamos utilizando uma opção, para criar uma transição linear quando colocarmos o mouse em cima, ao invés da troca de cor ser na hora, dará um tempo de transição de 0,2 segundos.
Agora salve este arquivo como “main.css” na pasta CSS.
Execute o arquivo “index.html”, ou aperte “F12” no Dreamweaver para visualizar no navegador. O resultado final será assim:
Espero que vocês tenham gostado, fiquem ligados para mais tutoriais.
