Informatica

Webmaster Básico – Dreamweaver CS6

Curso de Webmaster– Dreamweaver CS6
Capítulo 12: Criando um menu CSS
Neste capítulo, iremos utilizar uma técnica bastante simples para a construção de um menu, que consiste em enclausurar os links dentro de um parágrafo. Para isso iremos criar uma classe com a formatação padrão do menu e outra para quando o ponteiro do mouse estiver em cima dele. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a “opção Gerenciar sites...”.

Clique no site “Brasil Agricultura”.

Clique no botão “Concluído”. No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:

1

Webmaster Básico – Dreamweaver CS6

Observe que o arquivo “index.html” foi aberto. Dê um clique no botão “Design”, para visualizar o layout do site:

Selecione o texto presente no wireframe “Menu”.

Dê um clique no botão “Código”, para visualizar o código HTML do site:

Observe que o texto “Menu” está selecionado entre as tags e

2

Webmaster Básico – Dreamweaver CS6

Apague o texto menu e digite o código abaixo: Home Quem Somos Produtos Contato

O código acima irá criar um parágrafo com os links de todas as páginas do site. Certifique-se de que você digitou o código entre as tags e

Pressione o comando CTRL+S, para salvar as alterações, e clique no botão “Design”, para visualizar o layout do site. Observe que os links foram criados, mas ainda utilizam a formatação patrão de links:

3

Webmaster Básico – Dreamweaver CS6

Vamos agora criar o código CSS, que irão formatá-los. Dê um clique sobre o arquivo “estilos.css”, como indicado na imagem abaixo:

Dê um clique no botão “Código” para que seja exibido somente o código CSS. Dê um clique no final da última linha do código CSS pressione a tecla ENTER e digite o código abaixo: .BarraMenu a { font-family:Tahoma, Geneva, sans-serif; font-size:20px; color:#000; text-decoration: none; text-align: center; padding: 5px;

}