Como Criar Site Parte 2

Webmaster
Mdulo II
Parabns por participar de um curso dos

Cursos 24 Horas.
Voc est investindo no seu futuro!
Esperamos que este seja o comeo de um
grande sucesso em sua carreira.
Desejamos boa sorte e bom estudo!
Em caso de dvidas, contate-nos pelo site

www.Cursos24Horas.com.br
Atenciosamente
Equipe Cursos 24 Horas
Sumrio
Curso de Webmaster Dreamweaver CS6 .................................................................................3

Captulo 12: Criando um menu CSS ...........................................................................................3
Captulo 13: Tcnicas de SEO...................................................................................................11
13.1. METATAGS .................................................................................................................11
13.2. FAVICON ....................................................................................................................18
Captulo 14: Criando links........................................................................................................20
Captulo 15: Imagens mapeadas..............................................................................................28
Captulo 16: Criando o layout da pgina Quem Somos .........................................................34
Captulo 17: Criando o layout da pgina Produtos................................................................43
17.1. Tabelas.......................................................................................................................46
Captulo 18: Criando o layout da pgina Contato .................................................................52
18.1. Criando um formulrio ...............................................................................................55
Captulo 19: Criando o layout da pgina Notcias..................................................................66
19.1. Exibindo barras de rolagem ........................................................................................71
Captulo 20: Criando um banner flutuante ..............................................................................79
20.1 Criando uma wireframe absoluta (div AP)....................................................................80
20.2 Criando um comportamento .......................................................................................86
Captulo 21: Hospedando o seu site na internet ......................................................................91
21.1 Adquirindo um domnio...............................................................................................91
21.2 Adquirindo uma conta de hospedagem de site ............................................................91
21.3 Enviando os arquivos para o servidor remoto ..............................................................92
Captulo 22: Agora com voc ..............................................................................................100
Referncia Bibliogrfica ........................................................................................................101
Curso de Webmaster Dreamweaver CS6

Captulo 12: Criando um menu CSS
Neste captulo, iremos utilizar uma tcnica bastante simples para a construo de
um menu, que consiste em enclausurar os links dentro de um pargrafo.
Para isso iremos criar uma classe com a formatao padro 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 opo Gerenciar sites...
Clique no site Brasil Agricultura.
Clique no boto Concludo.
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.

D um clique no boto Design, para visualizar o layout do site:
Selecione o texto presente no wireframe Menu.
D um clique no boto Cdigo, para visualizar o cdigo 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 cdigo 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 cdigo acima ir criar um pargrafo com os links de todas as pginas do site.

Certifique-se de que voc digitou o cdigo entre as tags <div> e </div>
Pressione o comando CTRL+S, para salvar as alteraes, e clique no boto

Design, para visualizar o layout do site.
Observe que os links foram criados, mas ainda utilizam a formatao patro de
links:
Vamos agora criar o cdigo CSS, que iro format-los.

D um clique sobre o arquivo estilos.css, como indicado na imagem abaixo:
D um clique no boto Cdigo para que seja exibido somente o cdigo CSS.
D um clique no final da ltima linha do cdigo CSS pressione a tecla ENTER e
digite o cdigo abaixo:
.BarraMenu a {
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
color:#000;
text-decoration: none;
text-align: center;
padding: 5px;
}
Nesse cdigo 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
utilizao de sublinhado que o padro para links (text-decoration: none) com o
texto alinhado ao centro e com um espaamento de 5px (padding: 5px).
Agora iremos criar a formatao para quando o ponteiro do mouse estiver em cima do
menu.
Pressione a tecla ENTER e digite o cdigo abaixo:
.BarraMenu a:hover {
color:#FFF;
background: #c07232;
text-decoration: none;
}
Neste cdigo, alteramos a formatao da cor da fonte para branco (#FFF) e o fundo para
a cor marrom (#c07232);
Pressione o comando CTRL+S, para salvar as alteraes.
D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML
do site.
Vamos agora indicar a classe que ser utilizada na tag <p>.

Altere o cdigo 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 formatao dos links est vinculada classe CSS criada:
Vamos agora colocar esse menu na posio direita do wireframe menu.

Insira a propriedade text-align:right; na classe .menu, conforme indicado na

imagem abaixo:

9
D um clique no boto Cdigo-fonte, para que seja exibido o cdigo 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:
10
Captulo 13: Tcnicas de SEO

Uma das formas de otimizar a localizao do site pelas pginas de busca como o
Google, Yahoo, entre outras, utilizar prticas conhecidas como SEO (Search Engine
Optimazation) e, uma dessas tcnicas, a utilizao das METATAGS.
13.1. METATAGS
As metatags so utilizadas para etiquetar o contedo do website, ou seja, mostrar

para as pginas de busca qual o contedo dele. As metatags devem ser inseridas dentro
do cdigo HTML da pgina, 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 opo Gerenciar sites....
11


Clique no boto Cdigo, para que seja exibido o cdigo HTML da pgina.
O ttulo de uma pgina um dos itens mais importantes para se obter um melhor
ranking nas pginas de pesquisa. Nunca se esquea de definir um ttulo coerente com o
contedo pgina. Como essa pgina ser a inicial do site, vamos dar o nome de "Brasil
Agricultura Produtos para o homem do campo.
12
Clique na caixa de texto do item Ttulo 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 cdigo da pgina,
como indicado na figura abaixo:
Pressione a tecla ENTER, para abrir uma nova linha no cdigo HTML;
Clique na guia de seleo no painel Inserir:
13
Clique na opo Comum:
Clique sobre a guia de seleo do comando Ttulo, conforme indicado na

figura abaixo:
Clique na opo Meta.
Observe que uma nova janela ser exibida.
14
Indique nessa metatag a funo que ir liberar a localizao do contedo do site,

por qualquer pgina de busca. Esse comportamento ativado pela propriedade robots.
Clique na guia de seleo do item Atributo e selecione Nome e na caixa do

item valor digite robots:
Clique na caixa do item contedo e digite all.
Clique no boto OK.
Observe que a nova metatag foi inserida no cdigo:
Insira as metatags que indicaro quais sero as palavras-chaves de busca (keywords)

do site. Como nosso projeto o de uma loja de produtos para o homem do campo,
indicaremos o mximo de palavras-chaves que possam remeter a esse tema e aos
produtos e servios oferecidos pela empresa.
15
Clique na guia de seleo do comando Ttulo e selecione a opo Palavraschave:
Digite as palavras-chaves separadas por vrgula: Brasil, agricultura, produtos

rurais, veterinrios, rural, agropecurio, pecuria, produtos veterinrios online,
ecommerce rural, loja agropecuria.
Clique no boto OK.

Observe que a nova metatag foi inserida no cdigo HTML.
Insira agora a metatag que indicar ao site de busca qual a descrio do website. A
descrio do website exibida abaixo do link do site na busca, como mostram alguns
exemplos abaixo.
16
Clique na guia de seleo do boto Palavras-chave, no painel Inserir, e

selecione a opo Descrio:
Vamos agora indicar a descrio do website.

Digite, na caixa Descrio: Brasil Agricultura, aqui voc encontra tudo para o
homem do campo: produtos rurais, veterinrios, agropecurios e muito mais.
17
Clique no boto OK.

Observe que uma nova meta tag foi inserida.
13.2. FAVICON
Os Favicon ou favorite icon so 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, alm de ajudar o usurio a identificar os sites quando so exibidos,

facilitam a localizao dos sites armazenados na opo favoritos do Browser.
18
A imagem utilizada como favicon deve ter o tamanho de 16px x 16px e deve ter
a extenso .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 cdigo abaixo:
<link href="imgs/favicon.png" rel="shortcut icon" "image/png"/>
Pressione o comando CTRL+S para salvar as alteraes no arquivo.
Pressione a tecla F12 para testar o site.
Observe que o favicon foi exibido na guia da pgina juntamente com o ttulo:
19
Captulo 14: Criando links

Neste captulo, criaremos os links da pgina principal do site.
Para dar incio a este captulo caso o seu projeto esteja fechado inicie o Adobe
Dreamweaver CS6.

20

Clique no boto Design, para que seja exibido o layout do site.
Vamos iniciar criando um link da imagem leia mais para a pgina leiamais.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 leiamais.html.
21
Indique que essa pgina dever ser aberta na mesma aba do browser.
D um clique na guia de seleo do item Destino e selecione _self:
Repita esse processo com a outra imagem Leia Mais dessa pgina:
Vamos agora criar um link entre o texto das notcias e o arquivo noticias.html.
22
Selecione o texto da primeira notcia:
Na barra de propriedades d um clique no boto HTML.
Clique na caixa Link e digite noticias.html e, no item Destino, selecione

_self, para que a pgina noticias.html seja aberta na mesma janela do
browser.
Observe que, ao definir o link, o texto selecionado ficou na cor azul e

sublinhado.
23
O texto assumiu este formato que vemos acima, pois esse o padro de formatao
para links de texto. Vamos agora alterar essa formatao padro 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 opo Propriedades da
pgina.
Quando a janela de formatao for exibida clique na opo Links (CSS).
24
No iremos alterar o tipo da fonte e nem o tamanho atual da fonte. Iremos apenas
alterar a cor do texto para preto nas opes: Cor do link, links de, links visitados e links
ativos.
D um clique na guia de seleo de cor do item Cor do link.
Selecione a cor preta:
Repita esse processo com as demais opes:
Neste momento, vamos definir que, quando o ponteiro do mouse estiver sobre o
link, ele aparea apenas sublinhado.
25
D um clique na guia de seleo do item Estilo sublinhado e selecione a opo

Mostrar sublinhado somente em sobreposio.
Clique no boto OK.

Observe que a cor do link foi alterada.
Vamos agora testar o funcionamento dele.

Pressione o comando CTRL+S para salvar as alteraes no site.
Pressione a tecla F12, para testar o site.
Observe que ao posicionar o ponteiro do mouse sobre o link, ele ficar sublinhado.
26
Caso voc clique sobre o links criados at agora uma, mensagem de erro ser
exibida, pois ainda no criamos os arquivos linkados.
Vamos continuar criando os links para as demais notcias.
Selecione o texto da segunda notcia.
Clique na caixa Link e digite noticias.html. No item Destino, selecione

_self, para que a pgina noticias.html seja aberta na mesma janela do
browser.
Repita esse processo com a terceira notcia.

27
Captulo 15: Imagens mapeadas

Neste captulo, 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.
28

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

Clique no boto 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:
29
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:
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.
Clique no boto OK.
30
Na barra de propriedades no item Alt, digite Link do Twitter.
Na
barra
de
propriedades
no
item
link
digite
URL
http://www.twitter.com.br.
Este apenas um exemplo, mas, em uma situao real, o link da conta do twitter
da empresa poderia ser inserido.
Vamos indicar que essa pgina deve ser aberta em uma nova aba do browser.
D um clique na guia de seleo do item Destino e selecione _blank com
indicado na imagem abaixo:
Vamos agora criar o prximo mapeamento na imagem.

Selecione a segunda rea da imagem como indicado abaixo:
31
Clique no boto 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
URL
http://www.facebook.com.br.
Este apenas um exemplo, mas, em uma situao real, o link do conta do

facebook da empresa poderia ser inserido.
Vamos indicar que essa pgina deve ser aberta em uma nova aba do browser.
D um clique na guia de seleo do item Destino e selecione _blank, como
indicado na imagem abaixo:
32
Vamos agora criar o prximo mapeamento na imagem.

Observe que ao clicar nas reas mapeadas as pginas sero abertas em novas abas no
browser.
33
Captulo 16: Criando o layout da pgina Quem Somos
Neste captulo, utilizaremos a pgina index.html como base e daremos incio

construo da pgina quemsomos.html.

34

Vamos salvar uma cpia deste arquivo com o nome de base.html, pois as
alteraes que iremos realizar tambm sero utilizadas como incio dos arquivos
quemsomos.html,
produtos.html,
contato.html,
leia-mais.html
noticias.html.
D um clique no menu Arquivo e, em seguida, clique na opo Salvar
Como....
Salve este arquivo com o nome de base.html e clique no boto 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.
35
Pressione DELETE, para excluir a imagem.

Exclua o restante do contedo.
Selecione todo o contedo do wireframe principal, conforme indicado na
imagem abaixo:
Pressione a tecla DELETE, para excluir o contedo selecionado.

Obs.: Caso tenha dificuldade em selecionar todo o contedo de uma vez, apague o
contedo aos poucos.
Vamos agora nos certificar de que o wirefrme principal ainda no possui nenhum
cdigo HTML.
D um clique no boto Cdigo, para que seja exibido o cdigo da pgina.
36
Certifique-se de que entre as tags <div id="principal" class="principal">
</div> no possuam nenhum cdigo HTML:
Essa ser a nossa base a construo dos demais arquivos do site.

Pressione CTRL+S, para salvar as alteraes no arquivo base.html.
Vamos agora salvar uma cpia deste arquivo com o nome de quemsomos.html.
Como....
Salve esse arquivo com o nome de quemsomos.html e clique no boto
Salvar.
D um clique no boto Design, para que seja exibido o layout do site.
37
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 opo Imagem.
D um clique duplo na pasta imgs, para abrir o seu contedo.
38
Clique no arquivo titulo_quesomos.png, para selecion-lo.

Clique no boto OK.
Digite, na caixa de texto do item Texto alternativo, o texto Quem Somos.
Clique no boto OK.
Observe que a imagem ser inserida.
Iremos agora inserir o contedo do wireframe.
Pressione a seta para direita do teclado (), para que o cursor fique posicionado
a direita da imagem.
Pressione o comando SHIFT+ENTER trs vezes, para criar trs quebras de
linhas.
39
Digite o texto abaixo:

Fundada em 1980 na cidade de So Paulo SP, a Brasil Agricultura iniciou suas
atividades no comrcio varejista de produtos veterinrios aos pecuaristas da regio. A
partir de 1985, j em sua sede prpria, comeou a atuar tambm no mercado atacadista
fornecendo produtos veterinrios a outras revendas do estado. Em 1997 a Brasil
Agricultura direciona seus trabalhos da mesma forma para o mercado de insumos
agrcolas, gerando assim uma integrao entre a agricultura e a pecuria.
Pressione SHIFT+ENTER duas vezes, para criar duas quebras de linhas e digite
o texto abaixo:
Para oferecer o melhor atendimento a Brasil Agricultura possui um departamento
tcnico com profissionais especializados no agronegcio. A comercializao de
produtos possui como vantagens assistncia tcnica especializada com foco no bem
estar animal, uma das exigncias do consumidor moderno, levando ao produtor rural
produtos e servios que se transformam em lucratividade no campo.
Vamos agora formatar esse texto.
Selecione os dois pargrafos que foram digitados.
Na barra de Propriedades, clique no boto CSS:
40
D um clique na guia de seleo do item Regra-alvo:
Selecione a classe texto:
Observe que a formatao foi aplicada.

Pressione CTRL+S para salvar as alteraes.
Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe
que os dois primeiros links do menu j podem ser acessados normalmente:
41
Finalizamos a edio do arquivo quemsomos.html. No prximo captulo,

iniciaremos a construo do arquivo produtos.html.
42
Captulo 17: Criando o layout da pgina Produtos
Neste captulo, criaremos o arquivo produtos.html a partir do arquivo

base.html.

No painel Arquivos, d um clique duplo sobre o arquivo base.html, como
43
Observe que o arquivo base.html foi aberto.

Vamos agora salvar uma cpia deste arquivo com o nome de produtos.html.
D um clique no menu Arquivo, e, em seguida, clique na opo Salvar
Como....
Salve esse arquivo com o nome de produtos.html e clique no boto Salvar.
Clique sobre o wireframe principal, para que o cursor seja posicionado nele.

44
Clique no arquivo titulo_produtos.png, para selecion-lo.

Clique no boto OK.
45

Digite, na caixa de texto do item Texto alternativo, o texto Produtos.
Clique no boto OK.
Insira o contedo do wireframe, seguindo as instrues a seguir.
linhas.
17.1. Tabelas
Neste arquivo, iremos inserir os produtos disponveis no site. Para facilitar a

organizao dos textos que sero inseridos, criaremos uma tabela.
Para inserir a tabela, d um clique no menu Inserir e, posteriormente, clique na
opo Tabelas.
46
Iremos criar uma tabela, com 3 colunas e duas linhas, com 80% do tamanho do
wireframe e com um preenchimento e espaamento de 5px entre as clulas.
Indique os dados abaixo na janela Tabela e d um clique no boto OK.
Observe que a tabela ser inserida.

Vamos agora formatar o posicionamento dos dados na primeira linha da tabela.
47
Selecione a primeira linha da tabela:
Na barra de propriedades, d um clique na guia de seleo do alinhamento

horizontal:
Selecione a opo Centro.

Vamos agora alterar o alinhamento vertical da clula.
Na barra de propriedades, d um clique na guia de seleo do alinhamento
vertical:
Selecione a opo Meio.

Vamos agora inserir os dados da tabela.
D um clique na primeira clula da tabela para posicionar o cursor:
48
Digite o texto Produto.

Pressione a tecla TAB, para que o cursor passe automaticamente para a
prxima clula.
Digite o texto Marca.
prxima clula.
Digite o texto Preo.
prxima linha.
Digite o texto Sementes de milho 1 Kg..
49

prxima clula.
Digite o texto Marca A.
prxima clula.
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:
50
Pressione CTRL+S, para salvar as alteraes.

que agora os trs primeiros links do menu j podem ser acessados normalmente:
Finalizamos a edio do arquivo produtos.html. No prximo captulo, iremos
iniciar a construo do arquivo contato.html.
51
Captulo 18: Criando o layout da pgina Contato
Neste captulo, criaremos o arquivo contato.html, a partir do arquivo

base.html.

52

Vamos agora salvar uma cpia deste arquivo como nome de contato.html.
Como....
Salve esse arquivo com o nome de contato.html e clique no boto Salvar.
Clique sobre o wireframe principal, para que o cursor seja posicionado no
mesmo.

53
Clique no arquivo titulo_contato.png, para selecion-lo.

Clique no boto OK.
54

Digite, na caixa de texto do item Texto alternativo, o texto Contato.
Clique no boto OK.
linhas.
18.1. Criando um formulrio
Neste arquivo, criaremos um formulrio de contato. Os dados que sero

preenchidos no formulrio sero 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, no criaremos o arquivo envia.php, apenas criaremos o link entre o
formulrio e o arquivo.
55
Vamos agora iniciar o formulrio. D um clique no menu Inserir, aponte para a

opo Formulrio e clique em Formulrio.
Observe que um retngulo em vermelho ser exibido no layout do site.
Tudo que estiver entre as linhas vermelhas do retngulo far parte do formulrio.
Vamos agora indicar qual ser a ao do formulrio. Neste caso, iremos enviar os dados
para o arquivo envia.php.
Na barra de propriedades, digite envia.php no item ao:
Para melhor organizar os dados do formulrio, vamos inseri-lo dentro de uma

tabela.
56
Para inserir a tabela, d um clique no menu Inserir e, posteriormente, clique na

opo Tabelas.
Iremos criar uma tabela, com 2 colunas e 4 linhas, com 80% do tamanho do
wireframe e com um preenchimento e espaamento de 5px entre as clulas.
Indique os dados abaixo na janela Tabela e clique no boto OK.
Observe que a tabela ser inserida.
57
Na primeira clula da tabela digite o texto Nome:.

prxima clula.
Nesta segunda clula da tabela, ser inserido um campo de texto onde o usurio do
site ir preencher o seu nome.
D um clique no menu Inserir, aponte para a opo Formulrio 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:
Clique no boto OK.

Observe que o campo de texto foi criado. Vamos agora indicar que este campo ter
o tamanho de 40 caracteres, podendo receber no mximo 50 caracteres.
D um clique no campo de texto para selecion-lo:
58
Na barra de propriedades, digite, nas opes Larg. em caracteres e Caracteres

(mx.), os valores 40 e 50, respectivamente.
Vamos agora indicar o valor inicial deste campo de texto.

Na opo Valor inicial, digite o texto Digite o seu nome aqui.
Vamos agora preencher a segunda linha da tabela.

Para posicionar o cursor, d um clique na primeira clula da segunda linha da
tabela.
59
Digite o texto E-mail:.

prxima clula.
Na segunda clula desta linha, iremos inserir um campo de texto onde o usurio do
site ir preencher o seu e-mail de contato.
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:
Clique no boto OK.
60
Observe que o campo de texto foi criado. Vamos agora indicar que este campo ter
o tamanho de 30 caracteres, podendo receber no mximo 40 caracteres.
D um clique no campo de texto para selecion-lo:
Na barra de propriedades, digite nas opes Larg. em caracteres o valor de 30,

e, em Caracteres (mx.), o valor de 40. Na caixa valor inicial, digite Seu email aqui.
Vamos agora preencher a terceira linha da tabela.

D um clique na primeira clula da terceira linha da tabela, para posicionar o
cursor.
Digite o texto Mensagem:.
prxima clula.
61
Na segunda clula desta linha, vamos inserir um campo de texto onde o usurio do
site ir preencher a mensagem que deseja enviar.
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:
Clique no boto OK.

Observe que a rea de texto foi criada:
Na barra de propriedades, no item Valor inicial, digite Sua mensagem aqui.
62
Vamos agora inserir o boto que ir enviar os dados para o arquivo envia.php.
D um clique na segunda clula, da quarta linha da tabela, para posicionar o
cursor.

Boto.
Nesta janela iremos preencher somente o item ID.
Digite na caixa de texto do item ID botao como indicado na imagem abaixo:
63
Clique no boto OK.

Observe que o boto foi inserido no formulrio:

Pressione a tecla F12, para testar o arquivo diretamente no browser.
Observe que agora possvel preencher o formulrio:
Caso voc clique no boto Enviar, o arquivo envia.php ser chamado,

mas como no iremos criar o arquivo envia.php, pois esse no foco do curso, uma
mensagem de erro ser exibida:
64
Finalizamos a edio do arquivo contato.html. No prximo captulo, iremos

iniciar a construo do arquivo notcias.html.
65
Captulo 19: Criando o layout da pgina Notcias
Neste captulo, criaremos o arquivo contato.html, a partir do arquivo

base.html.

66

Vamos agora salvar uma cpia deste arquivo como nome de contato.html.
D um clique no menu Arquivo e em seguida clique na opo Salvar Como....
Salve este arquivo com o nome de noticias.html e clique no boto Salvar.
Clique sobre o wireframe principal, para que o cursor seja posicionado no
mesmo.

67
Clique no arquivo titulo_detalhes.png, para selecion-lo.

Clique no boto OK.
68

Digite, na caixa de texto do item Texto alternativo, o texto Detalhes.
Clique no boto OK.
direita da imagem.
linhas.
Digite o texto abaixo e utilize o comando SHIFT+ENTER, para quebrar os
pargrafos ( importante que voc digite todo o texto para possamos realizar a
prxima atividade).
Pesquisa com caf contribui para a sustentabilidade da produo.
Com as tecnologias geradas pelo Consrcio Pesquisa Caf os pequenos produtores
vivem uma nova realidade e esto deixando para traz aquela imagem do pequeno
produtor atrelado a tcnicas ultrapassadas. O acesso ao conhecimento e s tecnologias
adequadas pequena propriedade levou a cafeicultura familiar a um novo patamar.
69
Hoje, o caf desses produtores no s gera renda familiar como, principalmente, tem
qualidade reconhecida.
Segundo o Censo Agropecurio 2006 do Instituto Brasileiro de Geografia e
Estatstica (IBGE), o Brasil possui mais de 285 mil estabelecimentos rurais de caf. A
grande maioria das propriedades cafeeiras formada por famlias de pequenos
produtores. O Simpsio de Cafeicultura Familiar, realizado em 2009 pela Prefeitura
Municipal de Poos de Caldas (MG), destacou ainda que 70% delas tm menos de 20
hectares.
Evento no Rio Grande do Norte certifica Organismos de Controle Social
A VIII Semana dos Alimentos Orgnicos, que encerrou no ltimo domingo no Rio
Grande do Norte, entregou certificados para Organismos de Controle Social (OCS) e
produtores orgnicos na cidade de Olho dgua dos Borges, na regio do Oeste do
Estado. O Mapa, responsvel pelas aes de desenvolvimento da agricultura orgnica,
promoveu a campanha deste ano em parceria com vrias organizaes governamentais e
no-governamentais que fazem parre das Comisses da Produo Orgnica nas
Unidades da Federao CPOrgs. Em 2012, o tema se inspira na Conferncia Rio + 20,
que aborda o desenvolvimento sustentvel e a erradicao da pobreza. Nos demais
estados brasileiros, foram promovidas outras aes durante a Semana dos Orgnicos.
Estudo refora cultivo de caf de base ecolgica
Estudo desenvolvido na Embrapa Caf, empresa vinculada ao Ministrio da
Agricultura, Pecuria e Abastecimento (Mapa), promove o controle de plantas daninhas
usando leguminosas herbceas consorciadas com a cultura do caf. A tese de doutorado
foi apresentada pelo pesquisador Julio Cesar Freitas Santos, na Universidade Federal de
Viosa (UFV).
O trabalho confirmou a possibilidade do cultivo de leguminosa, como lablabe,
sirato, hbrido de Java ou amendoim forrageiro, fazer parte do manejo integrado da
lavoura cafeeira. A tecnologia consiste em utilizar uma dessas leguminosas herbceas
70
como cobertura viva de solo. (fonte: http://www.sapc.embrapa.br/index.php/ultimasnoticias/consorcio-pesquisa-cafe-contribui-para-a-sustentabilidade-da-agriculturafamiliar)

Observe que, ao finalizar de digitar o texto, ele ser maior que a rea do wireframe.
que o texto sobrepe as demais wireframes do site:
19.1. Exibindo barras de rolagem
Vamos resolver esse problema, limitando o tamanho mximo deste wireframe e

exibindo uma barra de rolagem vertical no mesmo caso seja necessrio.
D um clique sobre o arquivo estilos.css, conforme indicado na imagem
abaixo:
71
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS.
Iremos inserir na classe .principal as seguintes propriedades:
max-width:625px;
overflow-x:hidden;
As propriedades acima iro limitar a largura mxima do wireframe em 625px, e
caso essa largura seja ultrapassada, a barra de rolagem horizontal no ser exibida.
max-height:465px;
overflow-y:auto;
As propriedades acima iro limitar a altura mxima 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:
72
Vamos ver o resultado.

Pressione CTRL+S para salvar as alteraes no arquivo estilos.css.
D um clique no Cdigo-fonte.

que agora a barra de rolagem vertical exibida:
Vamos agora criar uma formatao, que ser utilizada nos ttulos das notcias.
73
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS.
Agora, vamos criar uma nova classe, que chamaremos de .titulo.
Digite o cdigo CSS abaixo no final do arquivo:
.titulo {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
color: #C30;
}
Pressione CTRL+S para salvar as alteraes no arquivo estilos.css.
74
D um clique no Cdigo-fonte.
Clique no boto Design, para que seja exibido o layout da pgina.

Selecione o primeiro ttulo do texto.
75
Selecione a classe titulo:
Observe que o estilo foi aplicado:
Selecione agora o texto desta notcia:
76
77
Repita esse processo com as demais partes do texto. Utilize o comando

SHIFT+ENTER, para aumentar o espaamento entre o ttulo e o texto caso seja
necessrio:

que agora possvel abrir o arquivo noticias.html, a partir do link das
notcias:
78
Captulo 20: Criando um banner flutuante
Neste captulo, iremos criar um banner flutuante no arquivo index.html. Um

banner flutuante uma imagem ou uma animao que exibida em um wireframe,
independente da estrutura do site, dando a possibilidade do usurio fech-lo. Esse tipo
de banner muito utilizado para a veiculao de propaganda e promoes.

79

Clique no boto Design, para que seja exibido o layout do site.
20.1 Criando uma wireframe absoluta (div AP)
Um wireframe absoluto, ou div AP, como tambm 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.
80
Vamos agora desenhar o wireframe. Desenhe-o como mostrado na imagem

abaixo:
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:
81
Vamos inserir a imagem que ser exibidano wireframe. D um clique dentro

dele, para posicionar o cursor:
82
Clique no arquivo publicidade.png, para selecion-lo.

Clique no boto OK.
Digite, na caixa de texto do item Texto alternativo, o texto Promoo.
Clique no boto OK.
Observe que a imagem ser inserida dentro do wireframe.
83

que a imagem exibida:
Iremos agora mapear a rea da imagem, onde est o boto fechar, e criar um
comportamento que ir ocultar esta wireframe.
Clique sobre a imagem dentro do wireframe, para selecion-la.
84
Na barra de propriedades, clique na ferramenta Ponto ativo retangular.
Selecione a rea da imagem onde ser o boto fechar, como indicado abaixo:
Observe que ser exibida uma mensagem, aconselhando o uso da propriedade

alt. D um clique no boto OK.
Na barra de propriedades do item Alt, digite Fechar.
85
Vamos agora criar um comportamento para este boto.
20.2 Criando um comportamento
Iremos agora adicionar um comportamento para a rea mapeada da imagem.

Neste comportamento, indicaremos que, caso o usurio clique na rea mapeada, o
wireframe publicidade dever ser oculto.
Para adicionar comportamentos no Dreamweaver, necessrio visualizar a janela
Comportamentos.
D um clique no menu Janela e, posteriormente, selecione a opo
Comportamentos.
86
Observe que o painel Comportamentos ser exibido:
Vamos agora adicionar o comportamento.

D um clique no boto +, no painel de comportamentos, e selecione a opo
Mostrar/ocultar elementos.
87
Observe que uma janela ser exibida.

Nesta janela vamos selecionar o wireframe e comportamento do objeto quando o
boto fechar for clicado.
Selecione o wireframe publicidade e clique no boto ocultar:
88
Clique no boto OK, para confirmar o comportamento.

O comportamento padro 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 usurio clicar sobre o boto.
No painel de comportamentos, d um clique no comportamento Mouseover:
Selecione a opo onClick.
89
Vamos test-lo.
Pressione CTRL+S para salvar as alteraes.
Pressione a tecla F12, para testar o arquivo diretamente no browser. Clique no
boto fechar e observe que o wireframe ser oculto.
90
Captulo 21: Hospedando o seu site na internet
Depois de finalizar o desenvolvimento de um site, muito provvel que voc

queira hosped-lo na internet. Para hospedar um site na internet, voc precisar seguir
os seguintes passos.
21.1 Adquirindo um domnio
A maioria das empresas que hospedam sites oferece planos de venda conjugada
que, alm de oferecer a hospedagem do site na internet, vendem o domnio. Algumas
somente oferecem domnios .com / .net etc. e outras oferecem tambm o domnio
.com.br.
Caso voc queira comprar o domnio antes de se cadastrar em uma empesa de
hospedagem, ele pode ser comprado pelos sites. Veja abaixo alguns sites que vendem
domnios.
Domnios .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.
Domnios .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
91
Voc pode adquirir uma conta de hospedagem juntamente com o domnio do seu
site, caso voc no o tenha adquirido anteriormente em empresas especializadas.
Abaixo, seguem alguns links de empresas que oferecem esse servio no Brasil:
http://www.locaweb.com.br
http://www.uolhost.com.br
Aps obter uma conta de hospedagem, a empresa ir criar, juntamente com sua
conta, um nome de usurio e um endereo FTP protegidos por uma senha. Por exemplo:
vamos supor que o seu domnio meusite.com.br.
Nome de usurio: meusite
Endereo FTP: ftp://meusite.com.br
Senha: 123456
com esse nome de usurio e endereo ftp que voc poder enviar os arquivos
para o servidor remoto.
21.3 Enviando os arquivos para o servidor remoto
Com o nome de usurio, senha e endereo ftp, possvel enviar os arquivos para o
servidor remoto diretamente pelo Dreamweaver. Vamos realizar um exemplo prtico.
92

93
No painel Arquivos, d um clique na guia de seleo indicada na imagem

abaixo:
Selecione a opo Servidor Remoto:
D um clique na opo Definir um servidor remoto.
Em seguida, crie uma nova conexo com o servidor remoto.
94
Obs.: Neste exemplo, iremos utilizar dados fictcios. Para realizar esta operao,
voc dever ter uma conta em uma empresa de hospedagem e estar em posse do nome
de usurio, senha e endereo ftp.
D um clique no boto Adicionar novo servidor (+).
Vamos agora preencher os dados da conexo.

Preencha os dados da conexo ftp:
95
D um clique no boto Testar. Caso a conexo esteja correta, a seguinte

mensagem ser exibida:
96
Clique no boto OK e clique no boto Salvar, para salvar os dados da

conexo.
Vamos agora enviar os arquivos para o servidor remoto.
No painel Arquivos, d um clique no boto Conectar ao servidor remoto.
97
Voc ir observar que as pastas do servidor remoto sero exibidas:
Seu site deve ser publicado dentro da pasta public_html ou www (ambas so a
mesma, porm, dependendo da configurao 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 boto enviar arquivos para o servidor remoto que os
arquivos da pasta site de seu computador sero enviados para o servidor
remoto, podendo ser acessados de qualquer lugar do mundo pela internet:
98
Caso voc realize alguma alterao no site, basta clicar no boto sincronizar
com o servidor remoto, que os arquivos sero atualizados automaticamente.
99
Captulo 22: Agora com voc
Este site em desenvolvimento ainda no est completo. Caso voc no tenha

observado, necessrio ainda o desenvolvimento do arquivo leia-mais.html. Agora
com voc. Utilize a imagem leiamais.png como ttulo e crie um contedo ao seu
gosto:
100
Referncia Bibliogrfica
MANZI, Fabrcio. Dreamweaver CS3, criao de sites e loja virtual. So Paulo: rica,
2007.
VIERA, Anderson. Dreamweaver CS5, Guia Prtico e Visual. So Paulo: Alta Books,
2011.
101

Como Criar Site Parte 2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Como Criar Site Parte 2

Diunggah oleh

Hak Cipta:

Format Tersedia

Webmaster

Parabns por participar de um curso dos

Desejamos boa sorte e bom estudo!

Em caso de dvidas, contate-nos pelo site

Curso de Webmaster Dreamweaver CS6 .................................................................................3

Curso de Webmaster Dreamweaver CS6

Inicie o Adobe Dreamweaver CS6.

Clique sobre o menu Site e selecione a opo Gerenciar sites...

Clique no site Brasil Agricultura.

Clique no boto Concludo.

No painel Arquivos, d um clique duplo sobre o arquivo index.html, como

Observe que o arquivo index.html foi aberto.

Selecione o texto presente no wireframe Menu.

D um clique no boto Cdigo, para visualizar o cdigo HTML do site:

Apague o texto menu e digite o cdigo abaixo:

O cdigo acima ir criar um pargrafo com os links de todas as pginas do site.

Pressione o comando CTRL+S, para salvar as alteraes, e clique no boto

Vamos agora criar o cdigo CSS, que iro format-los.

Vamos agora indicar a classe que ser utilizada na tag <p>.

Pressione o comando CTRL+S, para salvar as alteraes.

Pressione a tecla F12, para testar o site diretamente no browser.

Vamos agora colocar esse menu na posio direita do wireframe menu.

Insira a propriedade text-align:right; na classe .menu, conforme indicado na

Pressione o comando CTRL+S, para salvar as alteraes.

D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML

Pressione a tecla F12, para testar o site diretamente no browser.

Captulo 13: Tcnicas de SEO

As metatags so utilizadas para etiquetar o contedo do website, ou seja, mostrar

Clique no site Brasil Agricultura.

Clique no boto Concludo.

Observe que o arquivo index.html foi aberto.

Clique na caixa de texto do item Ttulo e digite "Brasil Agricultura Produtos

Vamos agora inserir as Metatags.

Clique na opo Comum:

Clique sobre a guia de seleo do comando Ttulo, conforme indicado na

Clique na opo Meta.

Observe que uma nova janela ser exibida.

Indique nessa metatag a funo que ir liberar a localizao do contedo do site,

Clique na guia de seleo do item Atributo e selecione Nome e na caixa do

Clique na caixa do item contedo e digite all.

Clique no boto OK.

Observe que a nova metatag foi inserida no cdigo:

Insira as metatags que indicaro quais sero as palavras-chaves de busca (keywords)

Clique na guia de seleo do comando Ttulo e selecione a opo Palavraschave:

Digite as palavras-chaves separadas por vrgula: Brasil, agricultura, produtos

Clique no boto OK.

Clique na guia de seleo do boto Palavras-chave, no painel Inserir, e

Vamos agora indicar a descrio do website.

Clique no boto OK.

Os Favicon ou favorite icon so pequenas figuras (cones), que definem um

Os favicon, alm de ajudar o usurio a identificar os sites quando so exibidos,

Captulo 14: Criando links

Clique no site Brasil Agricultura.

Clique no boto Concludo.

Observe que o arquivo index.html foi aberto.

Na barra de propriedade, d um clique na caixa do item Link e digite leiamais.html.

Selecione o texto da primeira notcia:

Na barra de propriedades d um clique no boto HTML.

Clique na caixa Link e digite noticias.html e, no item Destino, selecione

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

Quando a janela de formatao for exibida clique na opo Links (CSS).

Selecione a cor preta:

Repita esse processo com as demais opes:

D um clique na guia de seleo do item Estilo sublinhado e selecione a opo