apostila web master - 2º. modulo

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:


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>


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:


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:


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 a tecla “F12”, para testar o site diretamente no browser.

Observe que agora a formatação dos links está vinculada à classe “CSS” criada:


6

Vamos agora colocar esse menu na posição direita do wireframe “menu”.


� Insira a propriedade text-align:right; na classe “.menu”, conforme indicado na imagem abaixo:


� 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:


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



8




� 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:


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.


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,

veterinários, rural, agropecuário, pecuária, produtos veterinários online, ecommerce

rural, loja agropecuária.


11

� Clique no botão OK.

Observe que a nova metatag foi inserida no código HTML.

Insira agora a metatag que indicará ao site de busca qual é a descrição do website. A descrição

do website é exibida abaixo do link do site na busca, como mostram alguns exemplos abaixo.

� Clique na guia de seleção do botão “Palavras-chave”, no painel Inserir, e selecione a

opção “Descrição”:


12

Vamos agora indicar a descrição do website.

� Digite, na caixa Descrição: Brasil Agricultura, “aqui você encontra tudo para o homem

do campo: produtos rurais, veterinários, agropecuários e muito mais”.


Observe que uma nova meta tag foi inserida.

13.2. FAVICON

Os Favicon ou “favorite icon” são pequenas figuras (ícones), que definem um logo a ser apresentado ao

lado da URL no navegador e/ou na aba do browser. Veja alguns exemplos abaixo.

Os favicon, além de ajudar o usuário a identificar os sites quando são exibidos, facilitam a localização

dos sites armazenados na opção favoritos do Browser.

A imagem utilizada como favicon deve ter o tamanho de 16px x 16px e deve ter a extensão .ico, .gif,

.png ou .bmp. Utilizaremos o arquivo “favicon.png”, que está salvo dentro da pasta imgs.

� Digite, abaixo da última metatag, a linha de código abaixo:

<link href="imgs/favicon.png" rel="shortcut icon" "image/png"/>

� Pressione o comando CTRL+S para salvar as alterações no arquivo.

� Pressione a tecla “F12” para testar o site.

Observe que o favicon foi exibido na guia da página juntamente com o título:


13


14

Capítulo 14: Criando links

Neste capítulo, criaremos os links da página principal do site.

� Para dar início a este capítulo caso o seu projeto esteja fechado inicie o Adobe Dreamweaver

CS6.






� Clique no botão “Design”, para que seja exibido o layout do site.


15

Vamos iniciar criando um link da imagem “leia mais” para a página “leia-mais.html”, que será criada

futuramente.

� Dê um clique na imagem “leia mais”, para selecioná-la.

� Na barra de propriedade, dê um clique na caixa do item “Link” e digite “leia-mais.html”.

Indique que essa página deverá ser aberta na mesma aba do browser.

� Dê um clique na guia de seleção do item Destino e selecione “_self”:

Repita esse processo com a outra imagem “Leia Mais” dessa página:


16

Vamos agora criar um link entre o texto das “notícias” e o arquivo “noticias.html”.

� Selecione o texto da primeira notícia:

� Na barra de propriedades dê um clique no botão “HTML”.

� Clique na caixa “Link” e digite “noticias.html” e, no item “Destino”, selecione “_self”, para que a

página “noticias.html” seja aberta na mesma janela do browser.

Observe que, ao definir o link, o texto selecionado ficou na cor azul e sublinhado.


17

O texto assumiu este formato que vemos acima, pois esse é o padrão de formatação para links de texto.

Vamos agora alterar essa formatação padrão para a cor preta, para que o texto fique somente

sublinhado quando o ponteiro do mouse estiver sobre o link.

� Dê um clique no menu Modificar e em seguida clique na opção “Propriedades da página”.

� Quando a janela de formatação for exibida clique na opção “Links (CSS)”.

Não iremos alterar o tipo da fonte e nem o tamanho atual da fonte. Iremos apenas alterar a cor do texto

para preto nas opções: Cor do link, links de, links visitados e links ativos.

� Dê um clique na guia de seleção de cor do item “Cor do link”.


18

� Selecione a cor preta:

� Repita esse processo com as demais opções:

Neste momento, vamos definir que, quando o ponteiro do mouse estiver sobre o link, ele

apareça apenas sublinhado.

Dê um clique na guia de seleção do item “Estilo sublinhado” e selecione a opção “Mostrar

sublinhado somente em sobreposição”.


Observe que a cor do link foi alterada.

Vamos agora testar o funcionamento dele.

Pressione o comando CTRL+S para salvar as alterações no site.

� Pressione a tecla “F12”, para testar o site.

Observe que ao posicionar o ponteiro do mouse sobre o link, ele ficará sublinhado.


19

Caso você clique sobre o links criados até agora uma, mensagem de erro será exibida, pois ainda não

criamos os arquivos linkados.

Vamos continuar criando os links para as demais notícias.

� Selecione o texto da segunda notícia.

� Clique na caixa “Link” e digite “noticias.html”. No item “Destino”, selecione “_self”, para que a

página “noticias.html” seja aberta na mesma janela do browser.

� Repita esse processo com a terceira notícia.

� Pressione o comando CTRL+S para salvar as alterações no site.



20

Capítulo 15: Imagens mapeadas

Neste capítulo, iremos criar um link em uma determinada área de uma imagem. Para o nosso projeto,

criaremos links nas áreas indicadas abaixo, na imagem “rodape.png”, que está inserida no wireframe

“rodapé”:

Em uma área mapeada iremos criar um link para o site “twitter.com” e, em outra área mapeada, iremos

criar um link para o site “facebook.com”.





� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, conforme indicado na figura abaixo:


21


� Clique no botão “Design” para que seja exibido o layout do site.

Vamos inicialmente selecionar a imagem que vamos mapear.

� Dê um clique na imagem do wireframe “rodapé”, como indicado na imagem abaixo:

Vamos agora mapear a primeira área da imagem.

� Na barra de propriedades, clique na ferramenta “Ponto ativo retangular”.

� Selecione a primeira área da imagem, conforme indicado abaixo:


22

Observe que uma mensagem aconselhando o uso da propriedade “alt” será exibida. O preenchimento

desta propriedade facilita a “leitura” dos softwares utilizados por deficientes visuais a acessar a internet.


� Na barra de propriedades no item “Alt”, digite “Link do Twitter”.

� Na barra de propriedades no item link digite a URL “http://www.twitter.com.br”.

Este é apenas um exemplo, mas, em uma situação real, o link da conta do twitter da empresa poderia

ser inserido.

Vamos indicar que essa página deve ser aberta em uma nova aba do browser.

� Dê um clique na guia de seleção do item “Destino” e selecione “_blank” com indicado na

imagem abaixo:

Vamos agora criar o próximo mapeamento na imagem.

� Selecione a segunda área da imagem como indicado abaixo:


23

� Clique no botão “OK” na mensagem que será exibida.

� Na barra de propriedades no item “Alt”, digite “Link do Facebook”.

� Na barra de propriedades no item “link”, digite a URL “http://www.facebook.com.br”.

Este é apenas um exemplo, mas, em uma situação real, o link do conta do facebook da empresa poderia

ser inserido.

Vamos indicar que essa página deve ser aberta em uma nova aba do browser.

� Dê um clique na guia de seleção do item “Destino” e selecione “_blank”, como indicado na

imagem abaixo:

Vamos agora criar o próximo mapeamento na imagem.

� Pressione o comando CTRL+S para salvar as alterações no site.


Observe que ao clicar nas áreas mapeadas as páginas serão abertas em novas abas no browser.


24


25

Capítulo 16: Criando o layout da página “Quem Somos”

Neste capítulo, utilizaremos a página “index.html” como base e daremos início à construção da página

“quemsomos.html”.






Observe que o arquivo “index.html” foi aberto. Vamos salvar uma cópia deste arquivo com o nome de “base.html”, pois as alterações que iremos

realizar também serão utilizadas como início dos arquivos “quemsomos.html”, “produtos.html”,

“contato.html”, “leia-mais.html” e “noticias.html”.


26

� Dê um clique no menu Arquivo e, em seguida, clique na opção “Salvar Como...”.

� Salve este arquivo com o nome de “base.html” e clique no botão “Salvar”.

Neste arquivo, que será utilizado como base para os demais, iremos excluir os objetos presentes no

wireframe “principal”.

� Dê um clique sobre a imagem “Tecnologia de ponta”, para selecioná-la.

� Pressione “DELETE”, para excluir a imagem.

Exclua o restante do conteúdo.

� Selecione todo o conteúdo do wireframe “principal”, conforme indicado na imagem abaixo:

� Pressione a tecla “DELETE”, para excluir o conteúdo selecionado.

Obs.: Caso tenha dificuldade em selecionar todo o conteúdo de uma vez, apague o conteúdo aos

poucos.

Vamos agora nos certificar de que o wirefrme “principal” ainda não possui nenhum código HTML.

� Dê um clique no botão “Código”, para que seja exibido o código da página.

� Certifique-se de que entre as tags <div id="principal" class="principal"> e </div> não possuam

nenhum código HTML:


27

Essa será a nossa base a construção dos demais arquivos do site.

� Pressione CTRL+S, para salvar as alterações no arquivo “base.html”.

Vamos agora salvar uma cópia deste arquivo com o nome de “quemsomos.html”.


� Salve esse arquivo com o nome de “quemsomos.html” e clique no botão “Salvar”.

� Dê um clique no botão “Design”, para que seja exibido o layout do site.

� Clique sobre o wireframe “principal”, para que o cursor seja posicionado nele.

Vamos agora inserir a imagem de titulo desta wireframe.

� Dê um clique no menu Inserir:

� Selecione a opção “Imagem”.


28

� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.

� Clique no arquivo “titulo_quesomos.png”, para selecioná-lo.



� Digite, na caixa de texto do item Texto alternativo”, o texto “Quem Somos”.


Observe que a imagem será inserida.

Iremos agora inserir o conteúdo do wireframe.

� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado a direita da

imagem.

� Pressione o comando SHIFT+ENTER três vezes, para criar três quebras de linhas.

� Digite o texto abaixo:

“Fundada em 1980 na cidade de São Paulo SP, a Brasil Agricultura iniciou suas atividades no comércio

varejista de produtos veterinários aos pecuaristas da região. A partir de 1985, já em sua sede própria,

começou a atuar também no mercado atacadista fornecendo produtos veterinários a outras revendas

do estado. Em 1997 a Brasil Agricultura direciona seus trabalhos da mesma forma para o mercado de

insumos agrícolas, gerando assim uma integração entre a agricultura e a pecuária.”

� Pressione SHIFT+ENTER duas vezes, para criar duas quebras de linhas e digite o texto abaixo:


29

“Para oferecer o melhor atendimento a Brasil Agricultura possui um departamento técnico com

profissionais especializados no agronegócio. A comercialização de produtos possui como vantagens

assistência técnica especializada com foco no bem estar animal, uma das exigências do consumidor

moderno, levando ao produtor rural produtos e serviços que se transformam em lucratividade no

campo.”

Vamos agora formatar esse texto.

� Selecione os dois parágrafos que foram digitados.

� Na barra de Propriedades, clique no botão “CSS”:

� Dê um clique na guia de seleção do item “Regra-alvo”:

� Selecione a classe “texto”:


30

Observe que a formatação foi aplicada.

� Pressione CTRL+S para salvar as alterações.

� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que os dois

primeiros links do menu já podem ser acessados normalmente:

� Finalizamos a edição do arquivo “quemsomos.html”. No próximo capítulo, iniciaremos a

construção do arquivo “produtos.html”.


31

Capítulo 17: Criando o layout da página “Produtos”

Neste capítulo, criaremos o arquivo “produtos.html” a partir do arquivo “base.html”.





� No painel Arquivos, dê um clique duplo sobre o arquivo “base.html”, como indicado na figura abaixo:

Observe que o arquivo “base.html” foi aberto. Vamos agora salvar uma cópia deste arquivo com o nome de “produtos.html”.

� Dê um clique no menu Arquivo, e, em seguida, clique na opção “Salvar Como...”.

� Salve esse arquivo com o nome de “produtos.html” e clique no botão “Salvar”.


� Clique sobre o wireframe “principal”, para que o cursor seja posicionado nele.


32





� Clique no arquivo “titulo_produtos.png”, para selecioná-lo.



33


� Digite, na caixa de texto do item “Texto alternativo”, o texto “Produtos”.



Insira o conteúdo do wireframe, seguindo as instruções a seguir.


imagem.


17.1. Tabelas

Neste arquivo, iremos inserir os produtos disponíveis no site. Para facilitar a organização dos textos que

serão inseridos, criaremos uma tabela.

� Para inserir a tabela, dê um clique no menu Inserir e, posteriormente, clique na opção

“Tabelas”.

Iremos criar uma tabela, com 3 colunas e duas linhas, com 80% do tamanho do wireframe e com um

preenchimento e espaçamento de 5px entre as células.

� Indique os dados abaixo na janela “Tabela” e dê um clique no botão “OK”.


34

Observe que a tabela será inserida.

Vamos agora formatar o posicionamento dos dados na primeira linha da tabela.

� Selecione a primeira linha da tabela:

� Na barra de propriedades, dê um clique na guia de seleção do alinhamento horizontal:

� Selecione a opção “Centro”.

Vamos agora alterar o alinhamento vertical da célula.

� Na barra de propriedades, dê um clique na guia de seleção do alinhamento vertical:

� Selecione a opção “Meio”.

Vamos agora inserir os dados da tabela.

� Dê um clique na primeira célula da tabela para posicionar o cursor:


35

� Digite o texto “Produto”.

� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.

� Digite o texto “Marca”.


� Digite o texto “Preço”.

� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima linha.

� Digite o texto “Sementes de milho 1 Kg.”.


� Digite o texto “Marca A”.


� Digite o texto “R$ 50,00”.

� Pressione a tecla “TAB”, para que seja criada uma nova linha automaticamente.

� Digite os demais produtos indicados na imagem abaixo:


36

� Pressione CTRL+S, para salvar as alterações.

� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora os

três primeiros links do menu já podem ser acessados normalmente:

� Finalizamos a edição do arquivo “produtos.html”. No próximo capítulo, iremos iniciar a

construção do arquivo “contato.html”.


37

Capítulo 18: Criando o layout da página “Contato”

Neste capítulo, criaremos o arquivo “contato.html”, a partir do arquivo “base.html”.






Observe que o arquivo “base.html” foi aberto. Vamos agora salvar uma cópia deste arquivo como nome de “contato.html”.


� Salve esse arquivo com o nome de “contato.html” e clique no botão “Salvar”.


� Clique sobre o wireframe “principal”, para que o cursor seja posicionado no mesmo.


38





� Clique no arquivo “titulo_contato.png”, para selecioná-lo.



39


� Digite, na caixa de texto do item “Texto alternativo”, o texto “Contato”.





imagem.


18.1. Criando um formulário

Neste arquivo, criaremos um formulário de contato. Os dados que serão preenchidos no formulário

serão enviados para um arquivo chamado de “envia.php”, que enviará os dados preenchidos para o e-

mail da empresa “Brasil Agricultura”. Neste exemplo, estamos utilizando a tecnologia php para enviar os

dados, mas podem ser utilizadas outras tecnologias como CGI ou ASP, por exemplo.

Neste curso, não criaremos o arquivo “envia.php”, apenas criaremos o link entre o formulário e o

arquivo.

� Vamos agora iniciar o formulário. Dê um clique no menu Inserir, aponte para a opção

“Formulário” e clique em “Formulário”.

Observe que um retângulo em vermelho será exibido no layout do site.

Tudo que estiver entre as linhas vermelhas do retângulo fará parte do formulário.

Vamos agora indicar qual será a ação do formulário. Neste caso, iremos enviar os dados para o arquivo

“envia.php”.

� Na barra de propriedades, digite “envia.php” no item “ação”:


40

Para melhor organizar os dados do formulário, vamos inseri-lo dentro de uma tabela.

� Para inserir a tabela, dê um clique no menu Inserir e, posteriormente, clique na opção

“Tabelas”.

Iremos criar uma tabela, com 2 colunas e 4 linhas, com 80% do tamanho do wireframe e com um

preenchimento e espaçamento de 5px entre as células.

� Indique os dados abaixo na janela “Tabela” e clique no botão “OK”.

Observe que a tabela será inserida.

� Na primeira célula da tabela digite o texto “Nome:”.



41

Nesta segunda célula da tabela, será inserido um campo de texto onde o usuário do site irá preencher o

seu nome.

� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Campo de

texto”.


Nessa janela, iremos preencher somente o item ID.

� Digite na caixa de texto do item ID “nome”, como indicado na imagem abaixo:


Observe que o campo de texto foi criado. Vamos agora indicar que este campo terá o tamanho de 40

caracteres, podendo receber no máximo 50 caracteres.

� Dê um clique no campo de texto para selecioná-lo:

� Na barra de propriedades, digite, nas opções “Larg. em caracteres” e “Caracteres (máx.), os

valores 40 e 50, respectivamente.

Vamos agora indicar o valor inicial deste campo de texto.

� Na opção “Valor inicial”, digite o texto “Digite o seu nome aqui”.


42

Vamos agora preencher a segunda linha da tabela.

� Para posicionar o cursor, dê um clique na primeira célula da segunda linha da tabela.

� Digite o texto “E-mail:”.


Na segunda célula desta linha, iremos inserir um campo de texto onde o usuário do site irá preencher o

seu e-mail de contato.

� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Campo de

texto”.


Nesta janela, iremos preencher somente o item ID.

� Digite na caixa de texto do item ID “e-mail”, conforme indicado na imagem abaixo:


Observe que o campo de texto foi criado. Vamos agora indicar que este campo terá o tamanho de 30

caracteres, podendo receber no máximo 40 caracteres.

� Dê um clique no campo de texto para selecioná-lo:


43

� Na barra de propriedades, digite nas opções “Larg. em caracteres” o valor de 30, e, em

“Caracteres (máx.), o valor de 40. Na caixa valor inicial, digite “Seu e-mail aqui”.

Vamos agora preencher a terceira linha da tabela.

� Dê um clique na primeira célula da terceira linha da tabela, para posicionar o cursor.

� Digite o texto “Mensagem:”.


Na segunda célula desta linha, vamos inserir um campo de texto onde o usuário do site irá preencher a

mensagem que deseja enviar.

� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Área de texto”.


Nesta janela, iremos preencher somente o item ID.

� Digite na caixa de texto do item ID “mensagem”, conforme indicado na imagem abaixo:


Observe que a área de texto foi criada:

� Na barra de propriedades, no item “Valor inicial”, digite “Sua mensagem aqui”.


44

Vamos agora inserir o botão que irá enviar os dados para o arquivo “envia.php”.

� Dê um clique na segunda célula, da quarta linha da tabela, para posicionar o cursor.

� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Botão”.


Nesta janela iremos preencher somente o item ID.

� Digite na caixa de texto do item ID “botao” como indicado na imagem abaixo:


Observe que o botão foi inserido no formulário:


� Pressione a tecla “F12”, para testar o arquivo diretamente no browser.

Observe que agora é possível preencher o formulário:


45

Caso você clique no botão “Enviar”, o arquivo “envia.php” será “chamado”, mas como não iremos criar

o arquivo “envia.php”, pois esse não é foco do curso, uma mensagem de erro será exibida:

� Finalizamos a edição do arquivo “contato.html”. No próximo capítulo, iremos iniciar a

construção do arquivo “notícias.html”.


46

Capítulo 19: Criando o layout da página “Notícias”

Neste capítulo, criaremos o arquivo “contato.html”, a partir do arquivo “base.html”.






Observe que o arquivo “base.html” foi aberto. Vamos agora salvar uma cópia deste arquivo como nome de “contato.html”.

� Dê um clique no menu Arquivo e em seguida clique na opção “Salvar Como...”.

� Salve este arquivo com o nome de “noticias.html” e clique no botão “Salvar”.


� Clique sobre o wireframe “principal”, para que o cursor seja posicionado no mesmo.


47





� Clique no arquivo “titulo_detalhes.png”, para selecioná-lo.



48


� Digite, na caixa de texto do item “Texto alternativo”, o texto “Detalhes”.




� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado à direita da

imagem.


� Digite o texto abaixo e utilize o comando SHIFT+ENTER, para quebrar os parágrafos (é

importante que você digite todo o texto para possamos realizar a próxima atividade).

“Pesquisa com café contribui para a sustentabilidade da produção.

Com as tecnologias geradas pelo Consórcio Pesquisa Café os pequenos produtores vivem uma nova

realidade e estão deixando para traz aquela imagem do pequeno produtor atrelado a técnicas

ultrapassadas. O acesso ao conhecimento e às tecnologias adequadas à pequena propriedade levou a

cafeicultura familiar a um novo patamar. Hoje, o café desses produtores não só gera renda familiar

como, principalmente, tem qualidade reconhecida.

Segundo o Censo Agropecuário 2006 do Instituto Brasileiro de Geografia e Estatística (IBGE), o Brasil

possui mais de 285 mil estabelecimentos rurais de café. A grande maioria das propriedades cafeeiras é

formada por famílias de pequenos produtores. O Simpósio de Cafeicultura Familiar, realizado em 2009

pela Prefeitura Municipal de Poços de Caldas (MG), destacou ainda que 70% delas têm menos de 20

hectares.

Evento no Rio Grande do Norte certifica Organismos de Controle Social

A VIII Semana dos Alimentos Orgânicos, que encerrou no último domingo no Rio Grande do Norte,

entregou certificados para Organismos de Controle Social (OCS) e produtores orgânicos na cidade de

Olho d´Água dos Borges, na região do Oeste do Estado. O Mapa, responsável pelas ações de

desenvolvimento da agricultura orgânica, promoveu a campanha deste ano em parceria com várias

organizações governamentais e não-governamentais que fazem parre das Comissões da Produção

Orgânica nas Unidades da Federação – CPOrgs. Em 2012, o tema se inspira na Conferência Rio + 20, que

aborda o desenvolvimento sustentável e a erradicação da pobreza. Nos demais estados brasileiros,

foram promovidas outras ações durante a Semana dos Orgânicos.

Estudo reforça cultivo de café de base ecológica

Estudo desenvolvido na Embrapa Café, empresa vinculada ao Ministério da Agricultura, Pecuária e

Abastecimento (Mapa), promove o controle de plantas daninhas usando leguminosas herbáceas

consorciadas com a cultura do café. A tese de doutorado foi apresentada pelo pesquisador Julio Cesar

Freitas Santos, na Universidade Federal de Viçosa (UFV).


49

O trabalho confirmou a possibilidade do cultivo de leguminosa, como lablabe, sirato, híbrido de Java ou

amendoim forrageiro, fazer parte do manejo integrado da lavoura cafeeira. A tecnologia consiste em

utilizar uma dessas leguminosas herbáceas como cobertura viva de solo.” (fonte:

http://www.sapc.embrapa.br/index.php/ultimas-noticias/consorcio-pesquisa-cafe-contribui-para-a-

sustentabilidade-da-agricultura-familiar)

Observe que, ao finalizar de digitar o texto, ele será maior que a área do wireframe.


� 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;


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 a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora a

barra de rolagem vertical é exibida:


51

Vamos agora criar uma formatação, que será utilizada nos títulos das notícias.


� 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;

}


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



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:


54


� 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 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:


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.






56



� 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:


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:


58





59

� Clique no arquivo “publicidade.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Promoção”.


Observe que a imagem será inserida dentro do wireframe.


� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que a imagem

é exibida:


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:


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:


62

Vamos agora adicionar o comportamento.

� Dê um clique no botão “+”, no painel de comportamentos, e selecione a opção

“Mostrar/ocultar elementos”.


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.


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.


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.




66




� No painel Arquivos, dê um clique na guia de seleção indicada na imagem abaixo:


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” (+).


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:


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:


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.


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:

apostila web master - 2º. modulo

Documents