Escolar Documentos
Profissional Documentos
Cultura Documentos
Mdulo II
Atenciosamente
Equipe Cursos 24 Horas
Sumrio
Observe que o texto Menu est selecionado entre as tags <div id=menu
class=menu> e </div>
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.
10
13.1. METATAGS
11
12
Pressione a tecla ENTER, para abrir uma nova linha no cdigo HTML;
Clique na guia de seleo no painel Inserir:
13
14
15
16
17
13.2. FAVICON
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
20
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
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.
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.
Neste momento, vamos definir que, quando o ponteiro do mouse estiver sobre o
link, ele aparea apenas sublinhado.
25
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.
27
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.
Inicie o Adobe Dreamweaver CS6.
Clique sobre o menu Site e selecione a opo Gerenciar sites....
28
29
30
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:
31
Na
barra
de
propriedades
no
item
link,
digite
URL
http://www.facebook.com.br.
32
33
34
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
36
37
Clique sobre o wireframe principal, para que o cursor seja posicionado nele.
38
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
40
41
42
43
44
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.
17.1. 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.
47
48
49
50
51
52
53
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.
55
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:
56
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.
57
58
59
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:
61
Na segunda clula desta linha, vamos inserir um campo de texto onde o usurio do
site ir preencher a mensagem que deseja enviar.
D um clique no menu Inserir, aponte para a opo Formulrio e clique em
rea de texto.
Observe que uma nova janela ser exibida.
Nesta janela, iremos preencher somente o item ID.
Digite na caixa de texto do item ID mensagem, conforme indicado na imagem
abaixo:
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.
63
64
65
66
67
68
Pressione a seta para direita do teclado (), para que o cursor fique posicionado
direita da imagem.
Pressione o comando SHIFT+ENTER trs vezes, para criar trs quebras de
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
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 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;
}
74
D um clique no Cdigo-fonte.
75
76
77
78
79
80
81
82
83
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
Selecione a rea da imagem onde ser o boto fechar, como indicado abaixo:
85
86
87
88
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
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.
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.
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.
Inicie o Adobe Dreamweaver CS6.
Clique sobre o menu Site e selecione a opo Gerenciar sites....
92
93
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 (+).
95
96
97
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
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