Webmaster Básico – Dreamweaver CS6 1 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:
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Webmaster Básico – Dreamweaver CS6
1
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:
Webmaster Básico – Dreamweaver CS6
2
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 <div id=”menu” class=”menu”> e </div>
Webmaster Básico – Dreamweaver CS6
3
� Apague o texto menu e digite o código abaixo:
<p>
<a href="index.html"> Home </a>
<a href="quemsomos.html"> Quem Somos </a>
<a href="produtos.html"> Produtos </a>
<a href="contato.html"> Contato </a>
</p>
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 <div> e </div>
� 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:
Webmaster Básico – Dreamweaver CS6
4
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;
}
Nesse código CSS, criamos uma classe com o nome de “BarraMenu” para o seletor <a>, utilizando a
fonte “Tahoma”, no tamanho de 20px na cor preta (#000), sem a utilização de sublinhado – que é o
padrão para links (text-decoration: none) – com o texto alinhado ao centro e com um espaçamento de
5px (padding: 5px).
Agora iremos criar a formatação para quando o ponteiro do mouse estiver em cima do menu.
� Pressione a tecla “ENTER” e digite o código abaixo:
Webmaster Básico – Dreamweaver CS6
5
.BarraMenu a:hover {
color:#FFF;
background: #c07232;
text-decoration: none;
}
Neste código, alteramos a formatação da cor da fonte para branco (#FFF) e o fundo para a cor marrom
(#c07232);
� Pressione o comando CTRL+S, para salvar as alterações.
� Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML do site.
Vamos agora indicar a classe que será utilizada na tag <p>.
� Altere o código de <p> para <p class=”BarraMenu”> como indicado na imagem abaixo:
� Pressione o comando CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o site diretamente no browser.
Observe que agora a formatação dos links está vinculada à classe “CSS” criada:
Webmaster Básico – Dreamweaver CS6
6
Vamos agora colocar esse menu na posição direita do wireframe “menu”.
� Dê um clique sobre o arquivo “estilos.css”, como indicado na imagem abaixo:
� Insira a propriedade text-align:right; na classe “.menu”, conforme indicado na imagem abaixo:
� Pressione o comando CTRL+S, para salvar as alterações.
� Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML do site.
� Pressione a tecla “F12”, para testar o site diretamente no browser.
Observe que agora o menu está posicionado do lado direito do wireframe:
Webmaster Básico – Dreamweaver CS6
7
Capítulo 13: Técnicas de SEO
Uma das formas de otimizar a localização do site pelas páginas de busca como o Google, Yahoo, entre
outras, é utilizar práticas conhecidas como SEO (Search Engine Optimazation) e, uma dessas técnicas, é a
utilização das METATAGS.
13.1. METATAGS
As metatags são utilizadas para etiquetar o conteúdo do website, ou seja, mostrar para as páginas de
busca qual é o conteúdo dele. As metatags devem ser inseridas dentro do código HTML da página, entre
as tags <head></head>.
Antes de dar continuidade ao layout do nosso site, vamos inserir as metatags.
Para isso, inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
Webmaster Básico – Dreamweaver CS6
8
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:
Observe que o arquivo “index.html” foi aberto.
� Clique no botão “Código”, para que seja exibido o código HTML da página. O título de uma página é um dos itens mais importantes para se obter um melhor ranking nas páginas de pesquisa. Nunca se esqueça de definir um título coerente com o conteúdo página. Como essa página será a inicial do site, vamos dar o nome de "Brasil Agricultura – Produtos para o homem do campo”.
� Clique na caixa de texto do item “Título” e digite "Brasil Agricultura – Produtos para o homem do campo”.
Vamos agora inserir as Metatags.
� Posicione o cursor no final da Metatag já existente no código da página, como indicado na
figura abaixo:
� Pressione a tecla “ENTER”, para abrir uma nova linha no código HTML;
� Clique na guia de seleção no painel Inserir:
Webmaster Básico – Dreamweaver CS6
9
� Clique na opção “Comum”:
� Clique sobre a guia de seleção do comando “Título”, conforme indicado na figura abaixo:
� Clique na opção Meta.
Observe que uma nova janela será exibida.
Webmaster Básico – Dreamweaver CS6
10
Indique nessa metatag a função que irá liberar a localização do conteúdo do site, por qualquer página de
busca. Esse comportamento é ativado pela propriedade “robots”.
� Clique na guia de seleção do item “Atributo” e selecione Nome e na caixa do item valor
digite “robots”:
� Clique na caixa do item conteúdo e digite “all”.
� Clique no botão “OK”.
Observe que a nova metatag foi inserida no código:
Insira as metatags que indicarão quais serão as palavras-chaves de busca (keywords) do site. Como
nosso projeto é o de uma loja de produtos para o homem do campo, indicaremos o máximo de
palavras-chaves que possam remeter a esse tema e aos produtos e serviços oferecidos pela empresa.
� Clique na guia de seleção do comando Título e selecione a opção Palavras-chave:
� Digite as palavras-chaves separadas por vírgula: Brasil, agricultura, produtos rurais,
Observe que, ao finalizar de digitar o texto, ele será maior que a área do wireframe.
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que o texto
sobrepõe as demais wireframes do site:
19.1. Exibindo barras de rolagem
Vamos resolver esse problema, limitando o tamanho máximo deste wireframe e exibindo uma barra de
rolagem vertical no mesmo caso seja necessário.
� Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem abaixo:
� Dê um clique no botão “Código”, para que seja exibido somente o código CSS.
Iremos inserir na classe “.principal” as seguintes propriedades:
max-width:625px;
overflow-x:hidden;
As propriedades acima irão limitar a largura máxima do wireframe em 625px, e caso essa largura seja
ultrapassada, a barra de rolagem horizontal não será exibida.
max-height:465px;
overflow-y:auto;
Webmaster Básico – Dreamweaver CS6
50
As propriedades acima irão limitar a altura máxima do wireframe em 465px, e caso essa largura seja
ultrapassada, a barra de rolagem vertical será exibida.
� Digite o as propriedades citadas acima, como indicado na imagem abaixo:
Vamos ver o resultado.
� Pressione CTRL+S para salvar as alterações no arquivo “estilos.css”.
� Dê um clique no “Código-fonte”.
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora a
barra de rolagem vertical é exibida:
Webmaster Básico – Dreamweaver CS6
51
Vamos agora criar uma formatação, que será utilizada nos títulos das notícias.
� 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.
Agora, vamos criar uma nova classe, que chamaremos de “.titulo”.
� Digite o código CSS abaixo no final do arquivo:
.titulo {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
color: #C30;
}
Webmaster Básico – Dreamweaver CS6
52
� Pressione CTRL+S para salvar as alterações no arquivo “estilos.css”.
� Dê um clique no “Código-fonte”.
� Clique no botão “Design”, para que seja exibido o layout da página.
� Selecione o primeiro título do texto.
� Na barra de Propriedades, clique no botão “CSS”:
� Dê um clique na guia de seleção do item “Regra-alvo”:
Webmaster Básico – Dreamweaver CS6
53
� Selecione a classe “titulo”:
Observe que o estilo foi aplicado:
� Selecione agora o texto desta notícia:
� Na barra de Propriedades, clique no botão CSS:
Webmaster Básico – Dreamweaver CS6
54
� Dê um clique na guia de seleção do item “Regra-alvo”:
� Repita esse processo com as demais partes do texto. Utilize o comando SHIFT+ENTER, para
aumentar o espaçamento entre o título e o texto caso seja necessário:
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora é
possível abrir o arquivo “noticias.html”, a partir do link das notícias:
Webmaster Básico – Dreamweaver CS6
55
Capítulo 20: Criando um banner flutuante
Neste capítulo, iremos criar um banner flutuante no arquivo “index.html”. Um banner flutuante é uma
imagem ou uma animação que é exibida em um wireframe, independente da estrutura do site, dando a
possibilidade do usuário fechá-lo. Esse tipo de banner é muito utilizado para a veiculação de propaganda
e promoções.
� 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”.
Webmaster Básico – Dreamweaver CS6
56
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:
Observe que o arquivo “index.html” foi aberto.
� Clique no botão Design, para que seja exibido o layout do site.
20.1. Criando uma wireframe absoluta (div AP) Um wireframe absoluto, ou div AP, como também é chamado no Dreamweaver, é um wireframe (div), que pode ser posicionado em qualquer local da estrutura do site, sem interferir no posicionamento dos demais wireframes. Vamos agora criar um div AP.
� Dê um clique na ferramenta “Desenhar div AP”, posicionada no painel Inserir.
� Vamos agora desenhar o wireframe. Desenhe-o como mostrado na imagem abaixo:
Webmaster Básico – Dreamweaver CS6
57
� Vamos agora definir o tamanho dele. Na barra de propriedades do item L (largura), digite 300px
e, no item A (altura), digite 160px, conforme mostrado na imagem abaixo:
� Vamos agora nomear esse wireframe. No item “Elemento CSS-P”, digite “publicidade”:
� Vamos inserir a imagem que será exibidano wireframe. Dê um clique dentro dele, para
posicionar o cursor:
Webmaster Básico – Dreamweaver CS6
58
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
Webmaster Básico – Dreamweaver CS6
59
� Clique no arquivo “publicidade.png”, para selecioná-lo.
� Clique no botão “OK”.
Observe que uma nova janela será exibida.
� Digite, na caixa de texto do item “Texto alternativo”, o texto “Promoção”.
� Clique no botão “OK”.
Observe que a imagem será inserida dentro do wireframe.
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que a imagem
é exibida:
Webmaster Básico – Dreamweaver CS6
60
Iremos agora mapear a área da imagem, onde está o “botão fechar”, e criar um comportamento que irá
ocultar esta wireframe.
� Clique sobre a imagem dentro do wireframe, para selecioná-la.
� Na barra de propriedades, clique na ferramenta “Ponto ativo retangular”.
� Selecione a área da imagem onde será o botão “fechar”, como indicado abaixo:
Webmaster Básico – Dreamweaver CS6
61
� Observe que será exibida uma mensagem, aconselhando o uso da propriedade “alt”. Dê um
clique no botão OK.
� Na barra de propriedades do item “Alt”, digite “Fechar”.
Vamos agora criar um comportamento para este botão.
20.2. Criando um comportamento
Iremos agora adicionar um comportamento para a área mapeada da imagem. Neste comportamento,
indicaremos que, caso o usuário clique na área “mapeada”, o wireframe “publicidade” deverá ser
oculto.
Para adicionar comportamentos no Dreamweaver, é necessário visualizar a janela “Comportamentos”.
� Dê um clique no menu Janela e, posteriormente, selecione a opção “Comportamentos”.
Observe que o painel Comportamentos será exibido:
Webmaster Básico – Dreamweaver CS6
62
Vamos agora adicionar o comportamento.
� Dê um clique no botão “+”, no painel de comportamentos, e selecione a opção
“Mostrar/ocultar elementos”.
Webmaster Básico – Dreamweaver CS6
63
Observe que uma janela será exibida.
Nesta janela vamos selecionar o wireframe e comportamento do objeto quando o botão “fechar” for
clicado.
� Selecione o wireframe “publicidade” e clique no botão “ocultar”:
� Clique no botão “OK”, para confirmar o comportamento.
Webmaster Básico – Dreamweaver CS6
64
O comportamento padrão adicionado funciona quando o ponteiro do mouse estiver sobre o objeto
(onMouseOver). Vamos trocar esse comportamento inicial para “onClick”, para que o wireframe seja
oculto somente se o usuário clicar sobre o botão.
� No painel de comportamentos, dê um clique no comportamento “Mouseover”:
� Selecione a opção “onClick”.
� Vamos testá-lo.
� Pressione CTRL+S para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Clique no botão
“fechar” e observe que o wireframe será oculto.
Webmaster Básico – Dreamweaver CS6
65
Capítulo 21: Hospedando o seu site na internet
Depois de finalizar o desenvolvimento de um site, é muito provável que você queira hospedá-lo na
internet. Para hospedar um site na internet, você precisará seguir os seguintes passos.
21.1. Adquirindo um domínio
A maioria das empresas que hospedam sites oferece planos de venda conjugada que, além de oferecer a
hospedagem do site na internet, vendem o domínio. Algumas somente oferecem domínios .com / .net
etc. e outras oferecem também o domínio .com.br.
Caso você queira comprar o domínio antes de se cadastrar em uma empesa de hospedagem, ele pode
ser comprado pelos sites. Veja abaixo alguns sites que vendem domínios.
Domínios “.com.br / .edu.br / info.br / ind.br” podem ser adquiridos pelos sites www.registro.br,
http://www.uolhost.com.br/registro-de-dominio.html#rmcl, entre outros.
Domínios “.com / .net /.org .tv” podem ser adquiridos pelos sites http://www.100br.com,
http://www.uolhost.com.br/registro-de-dominio.html#rmcl, entre outros.
21.2. Adquirindo uma conta de hospedagem de site
Você pode adquirir uma conta de hospedagem juntamente com o domínio do seu site, caso você não o
tenha adquirido anteriormente em empresas especializadas. Abaixo, seguem alguns links de empresas
que oferecem esse serviço no Brasil:
http://www.locaweb.com.br
http://www.uolhost.com.br
Após obter uma conta de hospedagem, a empresa irá criar, juntamente com sua conta, um nome de
usuário e um endereço FTP protegidos por uma senha. Por exemplo: vamos supor que o seu domínio é
meusite.com.br.
Nome de usuário: meusite
Endereço FTP: ftp://meusite.com.br
Senha: 123456
É com esse nome de usuário e endereço ftp que você poderá enviar os arquivos para o servidor remoto.
21.3. Enviando os arquivos para o servidor remoto
Com o nome de usuário, senha e endereço ftp, é possível enviar os arquivos para o servidor remoto
diretamente pelo Dreamweaver. Vamos realizar um exemplo prático.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
Webmaster Básico – Dreamweaver CS6
66
� 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:
� No painel Arquivos, dê um clique na guia de seleção indicada na imagem abaixo:
Webmaster Básico – Dreamweaver CS6
67
� Selecione a opção “Servidor Remoto”:
� Dê um clique na opção “Definir um servidor remoto”.
Em seguida, crie uma nova conexão com o servidor remoto.
Obs.: Neste exemplo, iremos utilizar dados fictícios. Para realizar esta operação, você deverá ter uma
conta em uma empresa de hospedagem e estar em posse do nome de usuário, senha e endereço ftp.
� Dê um clique no botão “Adicionar novo servidor” (+).
Webmaster Básico – Dreamweaver CS6
68
Vamos agora preencher os dados da conexão.
� Preencha os dados da conexão ftp:
� Dê um clique no botão “Testar”. Caso a conexão esteja correta, a seguinte mensagem será
exibida:
Webmaster Básico – Dreamweaver CS6
69
� Clique no botão “OK” e clique no botão “Salvar”, para salvar os dados da conexão.
Vamos agora enviar os arquivos para o servidor remoto.
� No painel Arquivos, dê um clique no botão “Conectar ao servidor remoto”.
Você irá observar que as pastas do servidor remoto serão exibidas:
Webmaster Básico – Dreamweaver CS6
70
Seu site deve ser publicado dentro da pasta “public_html” ou “www” (ambas são a mesma, porém,
dependendo da configuração do servidor, ela pode aparecer com nomes diferentes.) Observe que neste
caso o nome da pasta está como “public_html”.
� Dê um clique duplo na pasta “public_html”, para abri-la.
� Feito isso, basta clicar no botão “enviar arquivos para o servidor remoto” que os arquivos da
pasta “site” de seu computador serão enviados para o servidor remoto, podendo ser acessados
de qualquer lugar do mundo pela internet:
Caso você realize alguma alteração no site, basta clicar no botão “sincronizar com o servidor remoto”,
que os arquivos serão atualizados automaticamente.
Webmaster Básico – Dreamweaver CS6
71
Capítulo 22: Agora é com você
Este site em desenvolvimento ainda não está completo. Caso você não tenha observado, é necessário
ainda o desenvolvimento do arquivo “leia-mais.html”. Agora é com você. Utilize a imagem
“leiamais.png” como título e crie um conteúdo ao seu gosto: