Apostila Web Master - 2º. Modulo

Webmaster Bsico Dreamweaver CS6
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 o comando CTRL+S, para salvar as alteraes. 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. D um clique sobre o arquivo estilos.css, como indicado na imagem abaixo:
Insira a propriedade text-align:right; na classe .menu, conforme indicado na imagem abaixo:
Pressione o comando CTRL+S, para salvar as alteraes. 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:
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....

Observe que o arquivo index.html foi aberto. 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. 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:
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.

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. Clique na guia de seleo do comando Ttulo e selecione a opo Palavras-chave:
Digite as palavras-chaves separadas por vrgula: Brasil, agricultura, produtos rurais,
veterinrios, rural, agropecurio, pecuria, produtos veterinrios online, ecommerce rural, loja agropecuria.
10
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.
Clique na guia de seleo do boto Palavras-chave, no painel Inserir, e selecione a opo Descrio:
11
Webmaster Bsico Dreamweaver CS6 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.
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. 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:
12
13
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. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Observe que o arquivo index.html foi aberto. Clique no boto Design, para que seja exibido o layout do site.
14

Vamos iniciar criando um link da imagem leia mais para a pgina leia-mais.html, que ser criada futuramente. D um clique na imagem leia mais, para selecion-la.
Na barra de propriedade, d um clique na caixa do item Link e digite leia-mais.html.
Indique que essa 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:
15
Vamos agora criar um link entre o texto das notcias e o arquivo noticias.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 _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.
16
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).
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.
17

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. 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.
18
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. Pressione o comando CTRL+S para salvar as alteraes no site. Pressione a tecla F12, para testar o site.
19
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. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, conforme indicado na figura abaixo:
20
Observe que o arquivo index.html foi aberto. 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:
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:
21

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. Na barra de propriedades no item Alt, digite Link do Twitter.
Na barra de propriedades no item link digite a URL http://www.twitter.com.br.
Este apenas um exemplo, mas, em uma 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:
22
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 a 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:
Vamos agora criar o prximo mapeamento na imagem. Pressione o comando CTRL+S para salvar as alteraes no site. Pressione a tecla F12, para testar o site. Observe que ao clicar nas reas mapeadas as pginas sero abertas em novas abas no browser.
23
24
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. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Observe que o arquivo index.html foi aberto. 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 e noticias.html.
25

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.
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.
Certifique-se de que entre as tags <div id="principal" class="principal"> e </div> no possuam nenhum cdigo HTML:
26
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. D um clique no menu Arquivo e, em seguida, clique na opo Salvar 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. 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.
27
D um clique duplo na pasta imgs, para abrir o seu contedo.
Clique no arquivo titulo_quesomos.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. 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. 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:
28

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:
D um clique na guia de seleo do item Regra-alvo:
Selecione a classe texto:
29

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:
Finalizamos a edio do arquivo quemsomos.html. No prximo captulo, iniciaremos a construo do arquivo produtos.html.
30
Captulo 17: Criando o layout da pgina Produtos

Neste captulo, criaremos o arquivo produtos.html a partir do arquivo base.html . Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo base.html, como indicado na figura abaixo:
Observe que o arquivo base.html foi aberto. Vamos agora salvar uma 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. D um clique no boto Design, para que seja exibido o layout do site. Clique sobre o wireframe principal, para que o cursor seja posicionado nele.
31
Clique no arquivo titulo_produtos.png, para selecion-lo. Clique no boto OK.
32

Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Produtos. Clique no boto OK. Observe que a imagem ser inserida. Insira o contedo do wireframe, seguindo as instrues a seguir.
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
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.
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.
33
Observe que a tabela ser inserida. Vamos agora formatar o posicionamento dos dados na primeira linha da tabela. Selecione a primeira linha da tabela:
Na barra de propriedades, d um clique na guia de 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:
34
Digite o texto Produto. Pressione a tecla TAB, para que o cursor passe automaticamente para a prxima clula. Digite o texto Marca. Pressione a tecla TAB, para que o cursor passe automaticamente para a prxima clula. Digite o texto Preo. Pressione a tecla TAB, para que o cursor passe automaticamente para a prxima linha.
Digite o texto Sementes de milho 1 Kg.. Pressione a tecla TAB, para que o cursor passe automaticamente para a prxima clula. Digite o texto Marca A. Pressione a tecla TAB, para que o cursor passe automaticamente para 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:
35
Pressione CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe 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.
36
Captulo 18: Criando o layout da pgina Contato

Neste captulo, criaremos o arquivo contato.html, a partir do arquivo base.html. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Observe que o arquivo base.html foi aberto. 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 esse arquivo com o nome de contato.html e clique no boto Salvar. D um clique no boto Design, para que seja exibido o layout do site. Clique sobre o wireframe principal, para que o cursor seja posicionado no mesmo.
37
Clique no arquivo titulo_contato.png, para selecion-lo. Clique no boto OK.
38

Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Contato. 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.
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 email 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. 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:
39
Para melhor organizar os dados do formulrio, vamos inseri-lo dentro de uma tabela. 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. Na primeira clula da tabela digite o texto Nome:. Pressione a tecla TAB, para que o cursor passe automaticamente para a prxima clula.
40

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. Observe que uma nova janela ser exibida. 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:
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.
41
Vamos agora preencher a segunda linha da tabela. Para posicionar o cursor, d um clique na primeira clula da segunda linha da tabela.
Digite o texto E-mail:. Pressione a tecla TAB, para que o cursor passe automaticamente para a 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. D um clique no menu Inserir, aponte para a opo Formulrio e clique em Campo 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 e-mail, conforme 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 30 caracteres, podendo receber no mximo 40 caracteres. D um clique no campo de texto para selecion-lo:
42

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 e-mail 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:. Pressione a tecla TAB, para que o cursor passe automaticamente para a prxima clula. 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:
Clique no boto OK. Observe que a rea de texto foi criada:
Na barra de propriedades, no item Valor inicial, digite Sua mensagem aqui.
43

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.
D um clique no menu Inserir, aponte para a opo Formulrio e clique em Boto. Observe que uma nova janela ser exibida. Nesta janela iremos preencher somente o item ID. Digite na caixa de texto do item ID botao como indicado na imagem abaixo:
Clique no boto OK. Observe que o boto foi inserido no formulrio:
Pressione CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe que agora possvel preencher o formulrio:
44
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:
Finalizamos a edio do arquivo contato.html . No prximo captulo, iremos iniciar a construo do arquivo notcias.html .
45
Captulo 19: Criando o layout da pgina Notcias

Neste captulo, criaremos o arquivo contato.html, a partir do arquivo base.html. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Observe que o arquivo base.html foi aberto. 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. D um clique no boto Design, para que seja exibido o layout do site. Clique sobre o wireframe principal, para que o cursor seja posicionado no mesmo.
46
Clique no arquivo titulo_detalhes.png, para selecion-lo. Clique no boto OK.
47

Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Detalhes. 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 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. 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).
48
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 como cobertura viva de solo. (fonte:
http://www.sapc.embrapa.br/index.php/ultimas-noticias/consorcio-pesquisa-cafe-contribui-para-asustentabilidade-da-agricultura-familiar)
Observe que, ao finalizar de digitar o texto, ele ser maior que a rea do wireframe. Pressione CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe 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:
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;
49

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:
Vamos ver o resultado. Pressione CTRL+S para salvar as alteraes no arquivo estilos.css. D um clique no Cdigo-fonte.
Pressione CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe que agora a barra de rolagem vertical exibida:
50
Vamos agora criar uma formatao, que ser utilizada nos ttulos das notcias. 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. 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; }
51
Pressione CTRL+S para salvar as alteraes no arquivo estilos.css. D um clique no Cdigo-fonte.
Clique no boto Design, para que seja exibido o layout da pgina. Selecione o primeiro ttulo do texto.
52
Selecione a classe titulo:
Observe que o estilo foi aplicado:
Selecione agora o texto desta notcia:
53

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:
Pressione CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe que agora possvel abrir o arquivo noticias.html, a partir do link das notcias:
54
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. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Clique no boto Concludo.
55

No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
Observe que o arquivo index.html foi aberto. Clique no 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.
Vamos agora desenhar o wireframe. Desenhe-o como mostrado na imagem abaixo:
56
Vamos agora definir o tamanho dele. Na barra de propriedades do item L (largura), digite 300px e, no item A (altura), digite 160px, conforme mostrado na imagem abaixo:
Vamos agora nomear esse wireframe. No item Elemento CSS-P, digite publicidade:
Vamos inserir a imagem que ser exibidano wireframe. D um clique dentro dele, para posicionar o cursor:
57
D um clique no menu Inserir:
58
Clique no arquivo publicidade.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. 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.
Pressione CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o arquivo diretamente no browser. Observe que a imagem exibida:
59
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.
Na barra de propriedades, clique na ferramenta Ponto ativo retangular.
Selecione a rea da imagem onde ser o boto fechar, como indicado abaixo:
60
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.
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.
Observe que o painel Comportamentos ser exibido:
61
Vamos agora adicionar o comportamento. D um clique no boto +, no painel de comportamentos, e selecione a opo Mostrar/ocultar elementos.
62
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:
Clique no boto OK, para confirmar o comportamento.
63

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.
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.
64
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 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. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
65
No painel Arquivos, d um clique na guia de seleo indicada na imagem abaixo:
66
Selecione a opo Servidor Remoto:
D um clique na opo Definir um servidor remoto.
Em seguida, crie uma nova conexo com o servidor remoto. 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 (+).
67
Vamos agora preencher os dados da conexo. Preencha os dados da conexo ftp:
D um clique no boto Testar. Caso a conexo esteja correta, a seguinte mensagem ser exibida:
68
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.
Voc ir observar que as pastas do servidor remoto sero exibidas:
69
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:
Caso voc realize alguma alterao no site, basta clicar no boto sincronizar com o servidor remoto, que os arquivos sero atualizados automaticamente.
70
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:
71

Apostila Web Master - 2º. Modulo

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Web Master - 2º. Modulo

Enviado por

Direitos autorais:

Formatos disponíveis

Webmaster Bsico Dreamweaver CS6

Curso de Webmaster Dreamweaver CS6

Clique no site Brasil Agricultura.

Webmaster Bsico Dreamweaver CS6

Selecione o texto presente no wireframe Menu.

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

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

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

Webmaster Bsico Dreamweaver CS6

Captulo 13: Tcnicas de SEO

Para isso, inicie o Adobe Dreamweaver CS6.

Clique no site Brasil Agricultura.

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Clique na opo Comum:

Clique na opo Meta.

Observe que uma nova janela ser exibida.

Webmaster Bsico Dreamweaver CS6

Clique na caixa do item contedo e digite all.

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

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Captulo 14: Criando links

Clique no site Brasil Agricultura.

Webmaster Bsico Dreamweaver CS6

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

Webmaster Bsico Dreamweaver CS6

Na barra de propriedades d um clique no boto HTML.

Webmaster Bsico Dreamweaver CS6

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

Webmaster Bsico Dreamweaver CS6

Repita esse processo com as demais opes:

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.

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Captulo 15: Imagens mapeadas

Clique no site Brasil Agricultura.

Webmaster Bsico Dreamweaver CS6

Selecione a primeira rea da imagem, conforme indicado abaixo:

Webmaster Bsico Dreamweaver CS6

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

Webmaster Bsico Dreamweaver CS6

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

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Captulo 16: Criando o layout da pgina Quem Somos

Clique no site Brasil Agricultura.

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Selecione a opo Imagem.

Webmaster Bsico Dreamweaver CS6

D um clique duplo na pasta imgs, para abrir o seu contedo.

Webmaster Bsico Dreamweaver CS6

Na barra de Propriedades, clique no boto CSS:

D um clique na guia de seleo do item Regra-alvo:

Selecione a classe texto:

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6