anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Criando um menu personalizado no Dreamweaver com HTML e CSS

capa

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.

img1

 

Iremos criar um código bem simples, utilizando inicialmente apenas HTML.

img2

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”.

 

img3

img4

 

Feito isso, crie um documento novo escolhendo a opção CSS.

img5

 

E agora vamos criar o código em CSS. Esse código será simples, porém teremos que prestar atenção nos detalhes.

img6

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.

img7

 

Execute o arquivo “index.html”, ou aperte “F12” no Dreamweaver para visualizar no navegador. O resultado final será assim:

img8

 

Espero que vocês tenham gostado, fiquem ligados para mais tutoriais.


Instrutor Marcelo Abbate

Próximo

Postado por

Postagem Relacionada

Photoshop: laranja ou maçã?
Fotomontagem no Photoshop Hoje preparei um tutorial de fotomontagem bem interessante: é de uma maçã