You are on page 1of 101

Webmaster

Módulo II

Parabéns por participar de um curso dos
Cursos 24 Horas.
Você está investindo no seu futuro!
Esperamos que este seja o começo de um
grande sucesso em sua carreira.

Desejamos boa sorte e bom estudo!

Em caso de dúvidas, contate-nos pelo site
www.Cursos24Horas.com.br

Atenciosamente
Equipe Cursos 24 Horas

Sumário

Curso de Webmaster– Dreamweaver CS6 .................................................................................3
Capítulo 12: Criando um menu CSS ...........................................................................................3
Capítulo 13: Técnicas de SEO...................................................................................................11
13.1. METATAGS .................................................................................................................11
13.2. FAVICON ....................................................................................................................18
Capítulo 14: Criando links........................................................................................................20
Capítulo 15: Imagens mapeadas..............................................................................................28
Capítulo 16: Criando o layout da página “Quem Somos” .........................................................34
Capítulo 17: Criando o layout da página “Produtos”................................................................43
17.1. Tabelas.......................................................................................................................46
Capítulo 18: Criando o layout da página “Contato” .................................................................52
18.1. Criando um formulário ...............................................................................................55
Capítulo 19: Criando o layout da página “Notícias”..................................................................66
19.1. Exibindo barras de rolagem ........................................................................................71
Capítulo 20: Criando um banner flutuante ..............................................................................79
20.1 Criando uma wireframe absoluta (div AP)....................................................................80
20.2 Criando um comportamento .......................................................................................86
Capítulo 21: Hospedando o seu site na internet ......................................................................91
21.1 Adquirindo um domínio...............................................................................................91
21.2 Adquirindo uma conta de hospedagem de site ............................................................91
21.3 Enviando os arquivos para o servidor remoto ..............................................................92
Capítulo 22: Agora é com você ..............................................................................................100
Referência Bibliográfica ........................................................................................................101

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

3

 Dê um clique no botão “Design”. dê um clique duplo sobre o arquivo “index. No painel Arquivos. 4 .html” foi aberto. como indicado na figura abaixo: Observe que o arquivo “index. para visualizar o layout do site:  Selecione o texto presente no wireframe “Menu”.html”.

html"> Produtos </a> <a href="contato. 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>  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"> Contato </a> </p> 5 .

Observe que os links foram criados. como indicado na imagem abaixo: 6 . Certifique-se de que você digitou o código entre as tags <div> e </div>  Pressione o comando CTRL+S.  Dê um clique sobre o arquivo “estilos. para salvar as alterações. mas ainda utilizam a formatação patrão de links: Vamos agora criar o código CSS. e clique no botão “Design”. para visualizar o layout do site.O código acima irá criar um parágrafo com os links de todas as páginas do site.css”. que irão formatá-los.

criamos uma classe com o nome de “BarraMenu” para o seletor <a>. } Nesse código CSS.BarraMenu a { font-family:Tahoma. Geneva. sans-serif. utilizando a fonte “Tahoma”. Agora iremos criar a formatação para quando o ponteiro do mouse estiver em cima do menu. font-size:20px. 7 . no tamanho de 20px na cor preta (#000).  Dê um clique no final da última linha do código CSS pressione a tecla ENTER e digite o código abaixo: .BarraMenu a:hover { color:#FFF. 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).  Pressione a tecla “ENTER” e digite o código abaixo: . padding: 5px. text-decoration: none. text-align: center. Dê um clique no botão “Código” para que seja exibido somente o código CSS. color:#000.

background: #c07232. para que seja exibido o código HTML do site. text-decoration: none. para salvar as alterações. para salvar as alterações. Vamos agora indicar a classe que será utilizada na tag <p>.  Dê um clique no botão “Código-fonte”. 8 . alteramos a formatação da cor da fonte para branco (#FFF) e o fundo para a cor marrom (#c07232).  Pressione o comando CTRL+S. } Neste código.  Altere o código de <p> para <p class=”BarraMenu”> como indicado na imagem abaixo:  Pressione o comando CTRL+S.

conforme indicado na imagem abaixo:  Pressione o comando CTRL+S. para testar o site diretamente no browser. como indicado na imagem abaixo:  Insira a propriedade text-align:right. na classe “. Pressione a tecla “F12”. 9 . para salvar as alterações.css”.menu”. Observe que agora a formatação dos links está vinculada à classe “CSS” criada: Vamos agora colocar esse menu na posição direita do wireframe “menu”.  Dê um clique sobre o arquivo “estilos.

 Dê um clique no botão “Código-fonte”. Observe que agora o menu está posicionado do lado direito do wireframe: 10 . para que seja exibido o código HTML do site.  Pressione a tecla “F12”. para testar o site diretamente no browser.

”. As metatags devem ser inseridas dentro do código HTML da página.. é utilizar práticas conhecidas como SEO (Search Engine Optimazation) e..  Clique sobre o menu Site e selecione a opção “Gerenciar sites. vamos inserir as metatags.1. METATAGS As metatags são utilizadas para etiquetar o conteúdo do website. é a utilização das METATAGS. Antes de dar continuidade ao layout do nosso site. uma dessas técnicas.  Clique no site “Brasil Agricultura”. ou seja. 11 . mostrar para as páginas de busca qual é o conteúdo dele. inicie o Adobe Dreamweaver CS6. Para isso. 13.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. entre as tags <head></head>. Yahoo. entre outras.

 No painel Arquivos. vamos dar o nome de "Brasil Agricultura – Produtos para o homem do campo”. Clique no botão “Concluído”.html”. dê um clique duplo sobre o arquivo “index. 12 . como indicado na figura abaixo: Observe que o arquivo “index.html” foi aberto. Como essa página será a inicial do site.  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.

 Clique na caixa de texto do item “Título” e digite "Brasil Agricultura – Produtos para o homem do campo”. Vamos agora inserir as Metatags. como indicado na figura abaixo:  Pressione a tecla “ENTER”. para abrir uma nova linha no código HTML.  Posicione o cursor no final da Metatag já existente no código da página.  Clique na guia de seleção no painel Inserir: 13 .

14 . Clique na opção “Comum”:  Clique sobre a guia de seleção do comando “Título”. Observe que uma nova janela será exibida. conforme indicado na figura abaixo:  Clique na opção Meta.

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.

15

 Clique na guia de seleção do comando Título e selecione a opção Palavraschave: 

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. 

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.

16

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

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

17

Veja alguns exemplos abaixo. facilitam a localização dos sites armazenados na opção favoritos do Browser. FAVICON Os Favicon ou “favorite icon” são pequenas figuras (ícones). 18 . Os favicon. Clique no botão “OK”. 13. Observe que uma nova meta tag foi inserida. além de ajudar o usuário a identificar os sites quando são exibidos. que definem um logo a ser apresentado ao lado da URL no navegador e/ou na aba do browser.2.

A imagem utilizada como favicon deve ter o tamanho de 16px x 16px e deve ter a extensão .gif.  Digite.  Pressione a tecla “F12” para testar o site.ico.bmp. abaixo da última metatag. Observe que o favicon foi exibido na guia da página juntamente com o título: 19 . a linha de código abaixo: <link href="imgs/favicon.png ou .png" rel="shortcut icon" "image/png"/>  Pressione o comando CTRL+S para salvar as alterações no arquivo.png”. . que está salvo dentro da pasta imgs. Utilizaremos o arquivo “favicon. .

html”.”.  Clique no botão “Concluído”.  Para dar início a este capítulo caso o seu projeto esteja fechado inicie o Adobe Dreamweaver CS6. dê um clique duplo sobre o arquivo “index. como indicado na figura abaixo: 20 . criaremos os links da página principal do site.  Clique sobre o menu Site e selecione a opção “Gerenciar sites.Capítulo 14: Criando links Neste capítulo...  No painel Arquivos.  Clique no site “Brasil Agricultura”.

html” foi aberto.  Clique no botão “Design”. para selecioná-la. 21 .  Dê um clique na imagem “leia mais”. dê um clique na caixa do item “Link” e digite “leiamais. Vamos iniciar criando um link da imagem “leia mais” para a página “leiamais. para que seja exibido o layout do site.  Na barra de propriedade.Observe que o arquivo “index.html”. que será criada futuramente.html”.

Indique que essa página deverá ser aberta na mesma aba do browser.html”. 22 .  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: Vamos agora criar um link entre o texto das “notícias” e o arquivo “noticias.

ao definir o link. selecione “_self”.html” e. o texto selecionado ficou na cor azul e sublinhado. no item “Destino”.html” seja aberta na mesma janela do browser. 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. 23 . para que a página “noticias. Observe que.

 Dê um clique no menu Modificar e em seguida clique na opção “Propriedades da página”.O texto assumiu este formato que vemos acima. pois esse é o padrão de formatação para links de texto. 24 .  Quando a janela de formatação for exibida clique na opção “Links (CSS)”. para que o texto fique somente sublinhado quando o ponteiro do mouse estiver sobre o link. Vamos agora alterar essa formatação padrão para a cor preta.

vamos definir que. Iremos apenas alterar a cor do texto para preto nas opções: Cor do link.  Dê um clique na guia de seleção de cor do item “Cor do link”.Não iremos alterar o tipo da fonte e nem o tamanho atual da fonte. links visitados e links ativos.  Selecione a cor preta:  Repita esse processo com as demais opções: Neste momento. 25 . links de. quando o ponteiro do mouse estiver sobre o link. ele apareça apenas sublinhado.

Observe que ao posicionar o ponteiro do mouse sobre o link. 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. ele ficará sublinhado.Dê um clique na guia de seleção do item “Estilo sublinhado” e selecione a opção “Mostrar sublinhado somente em sobreposição”. 26 .  Clique no botão “OK”. Observe que a cor do link foi alterada.

 Selecione o texto da segunda notícia. selecione “_self”. No item “Destino”.Caso você clique sobre o links criados até agora uma.html”. para testar o site. pois ainda não criamos os arquivos linkados. para que a página “noticias. Vamos continuar criando os links para as demais notícias.  Pressione a tecla “F12”. mensagem de erro será exibida.html” seja aberta na mesma janela do browser.  Pressione o comando CTRL+S para salvar as alterações no site.  Repita esse processo com a terceira notícia. 27 .  Clique na caixa “Link” e digite “noticias.

com”. que está inserida no wireframe “rodapé”: Em uma área mapeada iremos criar um link para o site “twitter. Para o nosso projeto.  Clique sobre o menu Site e selecione a opção “Gerenciar sites. iremos criar um link em uma determinada área de uma imagem. em outra área mapeada.  Inicie o Adobe Dreamweaver CS6..”.. iremos criar um link para o site “facebook.com” e.png”.  Clique no site “Brasil Agricultura”.Capítulo 15: Imagens mapeadas Neste capítulo. 28 . criaremos links nas áreas indicadas abaixo. na imagem “rodape.

 Dê um clique na imagem do wireframe “rodapé”.  No painel Arquivos. como indicado na imagem abaixo: 29 . conforme 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. Clique no botão “Concluído”.html”. Vamos inicialmente selecionar a imagem que vamos mapear. dê um clique duplo sobre o arquivo “index.

30 .  Clique no botão “OK”. O preenchimento desta propriedade facilita a “leitura” dos softwares utilizados por deficientes visuais a acessar a internet.  Selecione a primeira área da imagem.  Na barra de propriedades. clique na ferramenta “Ponto ativo retangular”. conforme indicado abaixo: Observe que uma mensagem aconselhando o uso da propriedade “alt” será exibida.Vamos agora mapear a primeira área da imagem.

 Selecione a segunda área da imagem como indicado abaixo: 31 .twitter. o link da conta do twitter da empresa poderia ser inserido. em uma situação real.  Na barra de propriedades no item link digite a URL “http://www. Este é apenas um exemplo. Vamos indicar que essa página deve ser aberta em uma nova aba do browser. mas.  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.com. digite “Link do Twitter”.br”. Na barra de propriedades no item “Alt”.

mas.  Na barra de propriedades no item “Alt”.  Na barra de propriedades no item “link”.br”. digite a URL “http://www.com. como indicado na imagem abaixo: 32 .facebook.  Dê um clique na guia de seleção do item “Destino” e selecione “_blank”. Este é apenas um exemplo. Vamos indicar que essa página deve ser aberta em uma nova aba do browser. em uma situação real. Clique no botão “OK” na mensagem que será exibida. digite “Link do Facebook”. o link do conta do facebook da empresa poderia ser inserido.

para testar o site. Observe que ao clicar nas áreas mapeadas as páginas serão abertas em novas abas no browser.  Pressione o comando CTRL+S para salvar as alterações no site.Vamos agora criar o próximo mapeamento na imagem.  Pressione a tecla “F12”. 33 .

Capítulo 16: Criando o layout da página “Quem Somos” Neste capítulo.html”. como indicado na figura abaixo: 34 .  Clique no botão “Concluído”.  Clique no site “Brasil Agricultura”..  No painel Arquivos.html”. dê um clique duplo sobre o arquivo “index..”. utilizaremos a página “index.  Clique sobre o menu Site e selecione a opção “Gerenciar sites.  Inicie o Adobe Dreamweaver CS6.html” como base e daremos início à construção da página “quemsomos.

.  Dê um clique no menu Arquivo e. pois as alterações que iremos realizar também serão utilizadas como início dos arquivos “quemsomos.html” e clique no botão “Salvar”.  Dê um clique sobre a imagem “Tecnologia de ponta”.Observe que o arquivo “index.html”. “contato. “leia-mais. Neste arquivo. para selecioná-la. “produtos.html” e “noticias. Vamos salvar uma cópia deste arquivo com o nome de “base.html” foi aberto.html”. iremos excluir os objetos presentes no wireframe “principal”.  Salve este arquivo com o nome de “base. em seguida.html”. que será utilizado como base para os demais.html”. 35 .”.html”. clique na opção “Salvar Como..

Exclua o restante do conteúdo. Pressione “DELETE”.: Caso tenha dificuldade em selecionar todo o conteúdo de uma vez. para excluir o conteúdo selecionado.  Dê um clique no botão “Código”. para que seja exibido o código da página. 36 . para excluir a imagem. Vamos agora nos certificar de que o wirefrme “principal” ainda não possui nenhum código HTML. apague o conteúdo aos poucos. conforme indicado na imagem abaixo:  Pressione a tecla “DELETE”.  Selecione todo o conteúdo do wireframe “principal”. Obs.

Vamos agora salvar uma cópia deste arquivo com o nome de “quemsomos.  Dê um clique no botão “Design”. clique na opção “Salvar Como. para salvar as alterações no arquivo “base.  Salve esse arquivo com o nome de “quemsomos.html”.html”.”.  Pressione CTRL+S. para que seja exibido o layout do site.  Dê um clique no menu Arquivo e. em seguida. 37 . Certifique-se de que entre as tags <div id="principal" class="principal"> e </div> não possuam nenhum código HTML: Essa será a nossa base a construção dos demais arquivos do site.html” e clique no botão “Salvar”...

para abrir o seu conteúdo.  Dê um clique no menu Inserir:  Selecione a opção “Imagem”. 38 .  Dê um clique duplo na pasta “imgs”. Vamos agora inserir a imagem de titulo desta wireframe. para que o cursor seja posicionado nele. Clique sobre o wireframe “principal”.

o texto “Quem Somos”. Observe que uma nova janela será exibida.  Clique no botão “OK”. Iremos agora inserir o conteúdo do wireframe. Observe que a imagem será inserida. Clique no arquivo “titulo_quesomos.  Pressione a seta para direita do teclado (). para criar três quebras de linhas.  Digite.  Clique no botão “OK”. 39 . na caixa de texto do item Texto alternativo”. para selecioná-lo.  Pressione o comando SHIFT+ENTER três vezes. para que o cursor fique posicionado a direita da imagem.png”.

a Brasil Agricultura iniciou suas atividades no comércio varejista de produtos veterinários aos pecuaristas da região. começou a atuar também no mercado atacadista fornecendo produtos veterinários a outras revendas do estado.  Selecione os dois parágrafos que foram digitados. Digite o texto abaixo: “Fundada em 1980 na cidade de São Paulo SP. já em sua sede própria. A comercialização de produtos possui como vantagens assistência técnica especializada com foco no bem estar animal.” Vamos agora formatar esse texto.  Na barra de Propriedades. gerando assim uma integração entre a agricultura e a pecuária. levando ao produtor rural produtos e serviços que se transformam em lucratividade no campo. A partir de 1985. Em 1997 a Brasil Agricultura direciona seus trabalhos da mesma forma para o mercado de insumos agrícolas. clique no botão “CSS”: 40 . uma das exigências do consumidor moderno. para criar duas quebras de linhas e digite o texto abaixo: “Para oferecer o melhor atendimento a Brasil Agricultura possui um departamento técnico com profissionais especializados no agronegócio.”  Pressione SHIFT+ENTER duas vezes.

para testar o arquivo diretamente no browser.  Pressione a tecla “F12”. Dê um clique na guia de seleção do item “Regra-alvo”:  Selecione a classe “texto”: Observe que a formatação foi aplicada.  Pressione CTRL+S para salvar as alterações. Observe que os dois primeiros links do menu já podem ser acessados normalmente: 41 .

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

.  No painel Arquivos.html” a partir do arquivo “base.html”..”.  Clique no site “Brasil Agricultura”.  Clique no botão “Concluído”.  Inicie o Adobe Dreamweaver CS6. criaremos o arquivo “produtos. como indicado na figura abaixo: 43 .  Clique sobre o menu Site e selecione a opção “Gerenciar sites.html”. dê um clique duplo sobre o arquivo “base.Capítulo 17: Criando o layout da página “Produtos” Neste capítulo.

Vamos agora inserir a imagem de titulo desta wireframe.html” e clique no botão “Salvar”.  Dê um clique no menu Inserir: 44 .Observe que o arquivo “base. para que o cursor seja posicionado nele.html”.  Dê um clique no menu Arquivo. para que seja exibido o layout do site. e..”. clique na opção “Salvar Como.. em seguida.html” foi aberto. Vamos agora salvar uma cópia deste arquivo com o nome de “produtos.  Dê um clique no botão “Design”.  Clique sobre o wireframe “principal”.  Salve esse arquivo com o nome de “produtos.

 Clique no arquivo “titulo_produtos. para selecioná-lo. para abrir o seu conteúdo.  Dê um clique duplo na pasta “imgs”.  Clique no botão “OK”. Selecione a opção “Imagem”.png”. 45 .

o texto “Produtos”.  Pressione o comando SHIFT+ENTER três vezes.  Clique no botão “OK”. dê um clique no menu Inserir e. Tabelas Neste arquivo.  Pressione a seta para direita do teclado (). seguindo as instruções a seguir. Para facilitar a organização dos textos que serão inseridos. Insira o conteúdo do wireframe. posteriormente. 17. clique na opção “Tabelas”. 46 . iremos inserir os produtos disponíveis no site. para que o cursor fique posicionado a direita da imagem.  Digite. criaremos uma tabela.1. na caixa de texto do item “Texto alternativo”. Observe que a imagem será inserida.Observe que uma nova janela será exibida.  Para inserir a tabela. para criar três quebras de linhas.

Iremos criar uma tabela. Observe que a tabela será inserida.  Indique os dados abaixo na janela “Tabela” e dê um clique no botão “OK”. com 3 colunas e duas linhas. 47 . Vamos agora formatar o posicionamento dos dados na primeira linha da tabela. com 80% do tamanho do wireframe e com um preenchimento e espaçamento de 5px entre as células.

dê um clique na guia de seleção do alinhamento vertical:  Selecione a opção “Meio”. Vamos agora alterar o alinhamento vertical da célula. 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 inserir os dados da tabela.  Na barra de propriedades.  Dê um clique na primeira célula da tabela para posicionar o cursor: 48 .

49 . para que o cursor passe automaticamente para a próxima célula.”.  Pressione a tecla “TAB”.  Digite o texto “Sementes de milho 1 Kg.  Pressione a tecla “TAB”. para que o cursor passe automaticamente para a próxima linha.  Pressione a tecla “TAB”.  Digite o texto “Marca”.  Digite o texto “Preço”. Digite o texto “Produto”. para que o cursor passe automaticamente para a próxima célula.

 Digite os demais produtos indicados na imagem abaixo: 50 . para que o cursor passe automaticamente para a próxima célula.00”.  Pressione a tecla “TAB”.  Digite o texto “Marca A”. Pressione a tecla “TAB”.  Pressione a tecla “TAB”. para que o cursor passe automaticamente para a próxima célula.  Digite o texto “R$ 50. para que seja criada uma nova linha automaticamente.

para testar o arquivo diretamente no browser. Pressione CTRL+S.html”. 51 . No próximo capítulo.html”. para salvar as alterações. Observe que agora os três primeiros links do menu já podem ser acessados normalmente:  Finalizamos a edição do arquivo “produtos. iremos iniciar a construção do arquivo “contato.  Pressione a tecla “F12”.

. criaremos o arquivo “contato.html”.  Clique sobre o menu Site e selecione a opção “Gerenciar sites.  Inicie o Adobe Dreamweaver CS6. como indicado na figura abaixo: 52 .Capítulo 18: Criando o layout da página “Contato” Neste capítulo.html”..  Clique no site “Brasil Agricultura”.  No painel Arquivos.  Clique no botão “Concluído”.html”. a partir do arquivo “base. dê um clique duplo sobre o arquivo “base.”.

Vamos agora inserir a imagem de titulo desta wireframe. para que seja exibido o layout do site.  Dê um clique no menu Arquivo e. para que o cursor seja posicionado no mesmo.Observe que o arquivo “base.html”.  Dê um clique no botão “Design”.  Salve esse arquivo com o nome de “contato. Vamos agora salvar uma cópia deste arquivo como nome de “contato.html” foi aberto.  Dê um clique no menu Inserir: 53 .  Clique sobre o wireframe “principal”.”.html” e clique no botão “Salvar”. em seguida.. clique na opção “Salvar Como..

 Selecione a opção “Imagem”.  Dê um clique duplo na pasta “imgs”. para abrir o seu conteúdo.png”. 54 .  Clique no arquivo “titulo_contato. para selecioná-lo.  Clique no botão “OK”.

1. o texto “Contato”. que enviará os dados preenchidos para o e-mail da empresa “Brasil Agricultura”. não criaremos o arquivo “envia.  Pressione o comando SHIFT+ENTER três vezes. Neste exemplo. Observe que a imagem será inserida. mas podem ser utilizadas outras tecnologias como CGI ou ASP. 18. para que o cursor fique posicionado a direita da imagem. criaremos um formulário de contato.  Digite. Iremos agora inserir o conteúdo do wireframe. para criar três quebras de linhas.php”.php”.Observe que uma nova janela será exibida.  Pressione a seta para direita do teclado (). estamos utilizando a tecnologia php para enviar os dados. Os dados que serão preenchidos no formulário serão enviados para um arquivo chamado de “envia. Criando um formulário Neste arquivo. apenas criaremos o link entre o formulário e o arquivo. por exemplo. 55 . na caixa de texto do item “Texto alternativo”. Neste curso.  Clique no botão “OK”.

Neste caso.php”. vamos inseri-lo dentro de uma tabela.php” no item “ação”: Para melhor organizar os dados do formulário. iremos enviar os dados para o arquivo “envia. digite “envia. 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.  Na barra de propriedades. 56 . 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. Vamos agora iniciar o formulário.

 Indique os dados abaixo na janela “Tabela” e clique no botão “OK”. posteriormente. dê um clique no menu Inserir e. 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. Observe que a tabela será inserida. 57 . Para inserir a tabela.

para que o cursor passe automaticamente para a próxima célula.  Digite na caixa de texto do item ID “nome”. podendo receber no máximo 50 caracteres. Vamos agora indicar que este campo terá o tamanho de 40 caracteres. Na primeira célula da tabela digite o texto “Nome:”. Nesta segunda célula da tabela.  Dê um clique no campo de texto para selecioná-lo: 58 . como indicado na imagem abaixo:  Clique no botão “OK”.  Dê um clique no menu Inserir. iremos preencher somente o item ID. Observe que o campo de texto foi criado. aponte para a opção “Formulário” e clique em “Campo de texto”. Nessa janela.  Pressione a tecla “TAB”. será inserido um campo de texto onde o usuário do site irá preencher o seu nome. Observe que uma nova janela será exibida.

Vamos agora indicar o valor inicial deste campo de texto. Na barra de propriedades. digite. 59 . respectivamente. Vamos agora preencher a segunda linha da tabela. dê um clique na primeira célula da segunda linha da tabela.). em caracteres” e “Caracteres (máx.  Para posicionar o cursor. nas opções “Larg. os valores 40 e 50. digite o texto “Digite o seu nome aqui”.  Na opção “Valor inicial”.

para que o cursor passe automaticamente para a próxima célula. 60 . iremos preencher somente o item ID. Nesta janela.  Dê um clique no menu Inserir. Digite o texto “E-mail:”.  Pressione a tecla “TAB”. Observe que uma nova janela será exibida. aponte para a opção “Formulário” e clique em “Campo de texto”. conforme indicado na imagem abaixo:  Clique no botão “OK”. iremos inserir um campo de texto onde o usuário do site irá preencher o seu e-mail de contato.  Digite na caixa de texto do item ID “e-mail”. Na segunda célula desta linha.

e. digite “Seu email aqui”. em caracteres” o valor de 30. para que o cursor passe automaticamente para a próxima célula.). o valor de 40.  Pressione a tecla “TAB”. em “Caracteres (máx.  Dê um clique na primeira célula da terceira linha da tabela. digite nas opções “Larg. podendo receber no máximo 40 caracteres. Vamos agora indicar que este campo terá o tamanho de 30 caracteres. 61 .Observe que o campo de texto foi criado.  Dê um clique no campo de texto para selecioná-lo:  Na barra de propriedades. para posicionar o cursor.  Digite o texto “Mensagem:”. Vamos agora preencher a terceira linha da tabela. Na caixa valor inicial.

Observe que a área de texto foi criada:  Na barra de propriedades. Observe que uma nova janela será exibida. digite “Sua mensagem aqui”. vamos inserir um campo de texto onde o usuário do site irá preencher a mensagem que deseja enviar. Nesta janela.  Dê um clique no menu Inserir. iremos preencher somente o item ID. 62 . no item “Valor inicial”. conforme indicado na imagem abaixo:  Clique no botão “OK”.Na segunda célula desta linha. aponte para a opção “Formulário” e clique em “Área de texto”.  Digite na caixa de texto do item ID “mensagem”.

 Dê um clique no menu Inserir. Nesta janela iremos preencher somente o item ID. Observe que uma nova janela será exibida. para posicionar o cursor.  Dê um clique na segunda célula.  Digite na caixa de texto do item ID “botao” como indicado na imagem abaixo: 63 .Vamos agora inserir o botão que irá enviar os dados para o arquivo “envia. da quarta linha da tabela.php”. aponte para a opção “Formulário” e clique em “Botão”.

php”. pois esse não é foco do curso. mas como não iremos criar o arquivo “envia.php” será “chamado”. Observe que agora é possível preencher o formulário: Caso você clique no botão “Enviar”. Observe que o botão foi inserido no formulário:  Pressione CTRL+S.  Pressione a tecla “F12”. uma mensagem de erro será exibida: 64 . o arquivo “envia. Clique no botão “OK”. para salvar as alterações. para testar o arquivo diretamente no browser.

 Finalizamos a edição do arquivo “contato. 65 .html”. No próximo capítulo.html”. iremos iniciar a construção do arquivo “notícias.

Capítulo 19: Criando o layout da página “Notícias” Neste capítulo.html”.  Clique no botão “Concluído”.html”.  No painel Arquivos.html”.  Clique no site “Brasil Agricultura”. dê um clique duplo sobre o arquivo “base. criaremos o arquivo “contato.  Clique sobre o menu Site e selecione a opção “Gerenciar sites...”. como indicado na figura abaixo: 66 . a partir do arquivo “base.  Inicie o Adobe Dreamweaver CS6.

Observe que o arquivo “base. para que o cursor seja posicionado no mesmo. para que seja exibido o layout do site.  Salve este arquivo com o nome de “noticias. Vamos agora inserir a imagem de titulo desta wireframe.  Dê um clique no botão “Design”.”.html” e clique no botão “Salvar”.  Dê um clique no menu Inserir: 67 .html” foi aberto.  Clique sobre o wireframe “principal”. 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..

para selecioná-lo.png”. 68 .  Dê um clique duplo na pasta “imgs”.  Clique no botão “OK”. para abrir o seu conteúdo.  Clique no arquivo “titulo_detalhes. Selecione a opção “Imagem”.

“Pesquisa com café contribui para a sustentabilidade da produção.  Pressione o comando SHIFT+ENTER três vezes. O acesso ao conhecimento e às tecnologias adequadas à pequena propriedade levou a cafeicultura familiar a um novo patamar.  Digite.Observe que uma nova janela será exibida. 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. Observe que a imagem será inserida. para que o cursor fique posicionado à direita da imagem. na caixa de texto do item “Texto alternativo”. o texto “Detalhes”. para quebrar os parágrafos (é importante que você digite todo o texto para possamos realizar a próxima atividade). 69 . Iremos agora inserir o conteúdo do wireframe. para criar três quebras de linhas.  Pressione a seta para direita do teclado ().  Clique no botão “OK”.  Digite o texto abaixo e utilize o comando SHIFT+ENTER.

promove o controle de plantas daninhas usando leguminosas herbáceas consorciadas com a cultura do café. foram promovidas outras ações durante a Semana dos Orgânicos.Hoje. Evento no Rio Grande do Norte certifica Organismos de Controle Social A VIII Semana dos Alimentos Orgânicos. o Brasil possui mais de 285 mil estabelecimentos rurais de café. O trabalho confirmou a possibilidade do cultivo de leguminosa. na região do Oeste do Estado. O Mapa. o tema se inspira na Conferência Rio + 20. fazer parte do manejo integrado da lavoura cafeeira. A tecnologia consiste em utilizar uma dessas leguminosas herbáceas 70 . Pecuária e Abastecimento (Mapa). o café desses produtores não só gera renda familiar como. Estudo reforça cultivo de café de base ecológica Estudo desenvolvido na Embrapa Café. A tese de doutorado foi apresentada pelo pesquisador Julio Cesar Freitas Santos. Segundo o Censo Agropecuário 2006 do Instituto Brasileiro de Geografia e Estatística (IBGE). A grande maioria das propriedades cafeeiras é formada por famílias de pequenos produtores. híbrido de Java ou amendoim forrageiro. Em 2012. que aborda o desenvolvimento sustentável e a erradicação da pobreza. Nos demais estados brasileiros. como lablabe. tem qualidade reconhecida. empresa vinculada ao Ministério da Agricultura. na Universidade Federal de Viçosa (UFV). 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. responsável pelas ações de desenvolvimento da agricultura orgânica. entregou certificados para Organismos de Controle Social (OCS) e produtores orgânicos na cidade de Olho d´Água dos Borges. destacou ainda que 70% delas têm menos de 20 hectares. O Simpósio de Cafeicultura Familiar. que encerrou no último domingo no Rio Grande do Norte. sirato. realizado em 2009 pela Prefeitura Municipal de Poços de Caldas (MG). principalmente.

ao finalizar de digitar o texto. Observe que o texto sobrepõe as demais wireframes do site: 19.php/ultimasnoticias/consorcio-pesquisa-cafe-contribui-para-a-sustentabilidade-da-agriculturafamiliar) Observe que. limitando o tamanho máximo deste wireframe e exibindo uma barra de rolagem vertical no mesmo caso seja necessário.  Pressione a tecla “F12”.  Pressione CTRL+S.1. conforme indicado na imagem abaixo: 71 .como cobertura viva de solo.  Dê um clique sobre o arquivo “estilos.css”. para salvar as alterações.embrapa.” (fonte: http://www. ele será maior que a área do wireframe.br/index. para testar o arquivo diretamente no browser.sapc. Exibindo barras de rolagem Vamos resolver esse problema.

max-height:465px. a barra de rolagem vertical será exibida. Dê um clique no botão “Código”. As propriedades acima irão limitar a largura máxima do wireframe em 625px.principal” as seguintes propriedades: max-width:625px. Iremos inserir na classe “. para que seja exibido somente o código CSS. overflow-x:hidden. como indicado na imagem abaixo: 72 .  Digite o as propriedades citadas acima. e caso essa largura seja ultrapassada. overflow-y:auto. e caso essa largura seja ultrapassada. a barra de rolagem horizontal não será exibida. As propriedades acima irão limitar a altura máxima do wireframe em 465px.

 Dê um clique no “Código-fonte”.Vamos ver o resultado. para salvar as alterações.  Pressione a tecla “F12”. Observe que agora a barra de rolagem vertical é exibida: Vamos agora criar uma formatação.css”. para testar o arquivo diretamente no browser. 73 .  Pressione CTRL+S.  Pressione CTRL+S para salvar as alterações no arquivo “estilos. que será utilizada nos títulos das notícias.

para que seja exibido somente o código CSS.titulo { font-family: Tahoma. font-size: 18px.  Digite o código CSS abaixo no final do arquivo: .titulo”.css”. color: #C30. 74 . vamos criar uma nova classe.css”. Geneva. Agora. sans-serif. Dê um clique sobre o arquivo “estilos. como indicado na imagem abaixo:  Dê um clique no botão “Código”. que chamaremos de “. }  Pressione CTRL+S para salvar as alterações no arquivo “estilos.

 Na barra de Propriedades. clique no botão “CSS”:  Dê um clique na guia de seleção do item “Regra-alvo”: 75 . para que seja exibido o layout da página.  Selecione o primeiro título do texto.  Clique no botão “Design”. Dê um clique no “Código-fonte”.

 Selecione a classe “titulo”: Observe que o estilo foi aplicado:  Selecione agora o texto desta notícia: 76 .

clique no botão CSS:  Dê um clique na guia de seleção do item “Regra-alvo”: 77 . Na barra de Propriedades.

para salvar as alterações.html”. a partir do link das notícias: 78 . para testar o arquivo diretamente no browser. Repita esse processo com as demais partes do texto.  Pressione a tecla “F12”. Observe que agora é possível abrir o arquivo “noticias. para aumentar o espaçamento entre o título e o texto caso seja necessário:  Pressione CTRL+S. Utilize o comando SHIFT+ENTER.

 No painel Arquivos... dê um clique duplo sobre o arquivo “index.  Clique no site “Brasil Agricultura”. dando a possibilidade do usuário fechá-lo.  Clique sobre o menu Site e selecione a opção “Gerenciar sites.  Inicie o Adobe Dreamweaver CS6. independente da estrutura do site. como indicado na figura abaixo: 79 .”. Um banner flutuante é uma imagem ou uma animação que é exibida em um wireframe.Capítulo 20: Criando um banner flutuante Neste capítulo.html”.html”.  Clique no botão “Concluído”. Esse tipo de banner é muito utilizado para a veiculação de propaganda e promoções. iremos criar um banner flutuante no arquivo “index.

posicionada no painel Inserir.html” foi aberto. ou div AP.  Clique no botão Design. sem interferir no posicionamento dos demais wireframes.  Dê um clique na ferramenta “Desenhar div AP”. é um wireframe (div). 80 . como também é chamado no Dreamweaver.1 Criando uma wireframe absoluta (div AP) Um wireframe absoluto.Observe que o arquivo “index. que pode ser posicionado em qualquer local da estrutura do site. 20. Vamos agora criar um div AP. para que seja exibido o layout do site.

Desenhe-o como mostrado na imagem abaixo:  Vamos agora definir o tamanho dele. Na barra de propriedades do item L (largura). digite “publicidade”: 81 . digite 300px e. no item A (altura). digite 160px. No item “Elemento CSS-P”. Vamos agora desenhar o wireframe. conforme mostrado na imagem abaixo:  Vamos agora nomear esse wireframe.

 Vamos inserir a imagem que será exibidano wireframe. para posicionar o cursor:  Dê um clique no menu Inserir: 82 . Dê um clique dentro dele.

Observe que a imagem será inserida dentro do wireframe. na caixa de texto do item “Texto alternativo”.  Clique no botão “OK”.  Digite.png”. o texto “Promoção”.  Clique no arquivo “publicidade. Selecione a opção “Imagem”. para abrir o seu conteúdo. para selecioná-lo. Observe que uma nova janela será exibida. 83 .  Dê um clique duplo na pasta “imgs”.  Clique no botão “OK”.

para selecioná-la. para testar o arquivo diretamente no browser.  Clique sobre a imagem dentro do wireframe. onde está o “botão fechar”. e criar um comportamento que irá ocultar esta wireframe. Observe que a imagem é exibida: Iremos agora mapear a área da imagem. 84 . para salvar as alterações.  Pressione a tecla “F12”. Pressione CTRL+S.

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

Selecione a área da imagem onde será o botão “fechar”, como indicado abaixo: 

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

85

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

86

Observe que o painel Comportamentos será exibido:

Vamos agora adicionar o comportamento. 
Dê um clique no botão “+”, no painel de comportamentos, e selecione a opção
“Mostrar/ocultar elementos”.

87

Observe que uma janela será exibida.  Selecione o wireframe “publicidade” e clique no botão “ocultar”: 88 . Nesta janela vamos selecionar o wireframe e comportamento do objeto quando o botão “fechar” for clicado.

 Clique no botão “OK”.  No painel de comportamentos. 89 . Vamos trocar esse comportamento inicial para “onClick”. para que o wireframe seja oculto somente se o usuário clicar sobre o botão. dê um clique no comportamento “Mouseover”:  Selecione a opção “onClick”. O comportamento padrão adicionado funciona quando o ponteiro do mouse estiver sobre o objeto (onMouseOver). para confirmar o comportamento.

 Pressione CTRL+S para salvar as alterações.  Pressione a tecla “F12”. 90 . para testar o arquivo diretamente no browser. Vamos testá-lo. Clique no botão “fechar” e observe que o wireframe será oculto.

org . é muito provável que você queira hospedá-lo na internet. além de oferecer a hospedagem do site na internet.edu.br. Domínios “. Veja abaixo alguns sites que vendem domínios. 21.br. ele pode ser comprado pelos sites.com.uolhost.br / . entre outros.com.br / ind.br / info. Algumas somente oferecem domínios .br” podem ser adquiridos pelos sites www.br/registro-de-dominio.net /. http://www.html#rmcl.2 Adquirindo uma conta de hospedagem de site 91 .registro.com / .br/registro-de-dominio. e outras oferecem também o domínio . vendem o domínio. Caso você queira comprar o domínio antes de se cadastrar em uma empesa de hospedagem. Para hospedar um site na internet.1 Adquirindo um domínio A maioria das empresas que hospedam sites oferece planos de venda conjugada que.tv” podem ser adquiridos pelos sites http://www.com. http://www.com.com / . você precisará seguir os seguintes passos.Capítulo 21: Hospedando o seu site na internet Depois de finalizar o desenvolvimento de um site.net etc. Domínios “.100br.com.html#rmcl. 21. entre outros.uolhost.

Você pode adquirir uma conta de hospedagem juntamente com o domínio do seu site. 21. a empresa irá criar. seguem alguns links de empresas que oferecem esse serviço no Brasil: • http://www. um nome de usuário e um endereço FTP protegidos por uma senha. Nome de usuário: meusite Endereço FTP: ftp://meusite.br.br Senha: 123456 É com esse nome de usuário e endereço ftp que você poderá enviar os arquivos para o servidor remoto..br • http://www. Vamos realizar um exemplo prático. juntamente com sua conta. senha e endereço ftp. Por exemplo: vamos supor que o seu domínio é meusite. caso você não o tenha adquirido anteriormente em empresas especializadas.com.  Inicie o Adobe Dreamweaver CS6.br Após obter uma conta de hospedagem. 92 .3 Enviando os arquivos para o servidor remoto Com o nome de usuário..  Clique sobre o menu Site e selecione a opção “Gerenciar sites. é possível enviar os arquivos para o servidor remoto diretamente pelo Dreamweaver.com.com.locaweb.uolhost.com.”. Abaixo.

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

Em seguida. No painel Arquivos. crie uma nova conexão com o servidor remoto. dê um clique na guia de seleção indicada na imagem abaixo:  Selecione a opção “Servidor Remoto”:  Dê um clique na opção “Definir um servidor remoto”. 94 .

Obs. Vamos agora preencher os dados da conexão. senha e endereço ftp. você deverá ter uma conta em uma empresa de hospedagem e estar em posse do nome de usuário. Para realizar esta operação.: Neste exemplo. iremos utilizar dados fictícios.  Preencha os dados da conexão ftp: 95 .  Dê um clique no botão “Adicionar novo servidor” (+).

 Dê um clique no botão “Testar”. a seguinte mensagem será exibida: 96 . Caso a conexão esteja correta.

para salvar os dados da conexão. 97 . Vamos agora enviar os arquivos para o servidor remoto. dê um clique no botão “Conectar ao servidor remoto”. Clique no botão “OK” e clique no botão “Salvar”.  No painel Arquivos.

Você irá observar que as pastas do servidor remoto serão exibidas: Seu site deve ser publicado dentro da pasta “public_html” ou “www” (ambas são a mesma. dependendo da configuração do servidor.  Feito isso.) Observe que neste caso o nome da pasta está como “public_html”. podendo ser acessados de qualquer lugar do mundo pela internet: 98 . porém. 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. ela pode aparecer com nomes diferentes.  Dê um clique duplo na pasta “public_html”. para abri-la.

que os arquivos serão atualizados automaticamente.Caso você realize alguma alteração no site. 99 . basta clicar no botão “sincronizar com o servidor remoto”.

Utilize a imagem “leiamais.png” como título e crie um conteúdo ao seu gosto: 100 .html”. Agora é com você.Capítulo 22: Agora é com você Este site em desenvolvimento ainda não está completo. é necessário ainda o desenvolvimento do arquivo “leia-mais. Caso você não tenha observado.

Anderson. 2007. 101 . Guia Prático e Visual. Fabrício. VIERA. São Paulo: Érica.Referência Bibliográfica MANZI. criação de sites e loja virtual. 2011. Dreamweaver CS3. São Paulo: Alta Books. Dreamweaver CS5.