Apostila Web Master - 2º. Modulo
Transcript of Apostila Web Master - 2º. Modulo
Webmaster Básico – Dreamweaver CS6
1
Curso de Webmaster– Dreamweaver CS6
Capítulo 12: Criando um menu CSS
Neste capítulo, iremos utilizar uma técnica bastante simples para a construção de um menu, que
consiste em enclausurar os links dentro de um parágrafo.
Para isso iremos criar uma classe com a formatação padrão do menu e outra para quando o ponteiro do
mouse estiver em cima dele.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a “opção Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:
Webmaster Básico – Dreamweaver CS6
2
Observe que o arquivo “index.html” foi aberto.
� Dê um clique no botão “Design”, para visualizar o layout do site:
� Selecione o texto presente no wireframe “Menu”.
� Dê um clique no botão “Código”, para visualizar o código HTML do site:
Observe que o texto “Menu” está selecionado entre as tags <div id=”menu” class=”menu”> e </div>
Webmaster Básico – Dreamweaver CS6
3
� Apague o texto menu e digite o código abaixo:
<p>
<a href="index.html"> Home </a>
<a href="quemsomos.html"> Quem Somos </a>
<a href="produtos.html"> Produtos </a>
<a href="contato.html"> Contato </a>
</p>
O código acima irá criar um parágrafo com os links de todas as páginas do site. Certifique-se de que você
digitou o código entre as tags <div> e </div>
� Pressione o comando CTRL+S, para salvar as alterações, e clique no botão “Design”, para
visualizar o layout do site.
Observe que os links foram criados, mas ainda utilizam a formatação patrão de links:
Webmaster Básico – Dreamweaver CS6
4
Vamos agora criar o código CSS, que irão formatá-los.
� Dê um clique sobre o arquivo “estilos.css”, como indicado na imagem abaixo:
� Dê um clique no botão “Código” para que seja exibido somente o código CSS.
� Dê um clique no final da última linha do código CSS pressione a tecla ENTER e digite o código
abaixo:
.BarraMenu a {
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
color:#000;
text-decoration: none;
text-align: center;
padding: 5px;
}
Nesse código CSS, criamos uma classe com o nome de “BarraMenu” para o seletor <a>, utilizando a
fonte “Tahoma”, no tamanho de 20px na cor preta (#000), sem a utilização de sublinhado – que é o
padrão para links (text-decoration: none) – com o texto alinhado ao centro e com um espaçamento de
5px (padding: 5px).
Agora iremos criar a formatação para quando o ponteiro do mouse estiver em cima do menu.
� Pressione a tecla “ENTER” e digite o código abaixo:
Webmaster Básico – Dreamweaver CS6
5
.BarraMenu a:hover {
color:#FFF;
background: #c07232;
text-decoration: none;
}
Neste código, alteramos a formatação da cor da fonte para branco (#FFF) e o fundo para a cor marrom
(#c07232);
� Pressione o comando CTRL+S, para salvar as alterações.
� Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML do site.
Vamos agora indicar a classe que será utilizada na tag <p>.
� Altere o código de <p> para <p class=”BarraMenu”> como indicado na imagem abaixo:
� Pressione o comando CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o site diretamente no browser.
Observe que agora a formatação dos links está vinculada à classe “CSS” criada:
Webmaster Básico – Dreamweaver CS6
6
Vamos agora colocar esse menu na posição 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 alterações.
� Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML do site.
� Pressione a tecla “F12”, para testar o site diretamente no browser.
Observe que agora o menu está posicionado do lado direito do wireframe:
Webmaster Básico – Dreamweaver CS6
7
Capítulo 13: Técnicas de SEO
Uma das formas de otimizar a localização do site pelas páginas de busca como o Google, Yahoo, entre
outras, é utilizar práticas conhecidas como SEO (Search Engine Optimazation) e, uma dessas técnicas, é a
utilização das METATAGS.
13.1. METATAGS
As metatags são utilizadas para etiquetar o conteúdo do website, ou seja, mostrar para as páginas de
busca qual é o conteúdo dele. As metatags devem ser inseridas dentro do código HTML da página, entre
as tags <head></head>.
Antes de dar continuidade ao layout do nosso site, vamos inserir as metatags.
Para isso, inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
Webmaster Básico – Dreamweaver CS6
8
� Clique no botão “Concluído”.
� 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 botão “Código”, para que seja exibido o código HTML da página. O título de uma página é um dos itens mais importantes para se obter um melhor ranking nas páginas de pesquisa. Nunca se esqueça de definir um título coerente com o conteúdo página. Como essa página será a inicial do site, vamos dar o nome de "Brasil Agricultura – Produtos para o homem do campo”.
� Clique na caixa de texto do item “Título” e digite "Brasil Agricultura – Produtos para o homem do campo”.
Vamos agora inserir as Metatags.
� Posicione o cursor no final da Metatag já existente no código da página, como indicado na
figura abaixo:
� Pressione a tecla “ENTER”, para abrir uma nova linha no código HTML;
� Clique na guia de seleção no painel Inserir:
Webmaster Básico – Dreamweaver CS6
9
� Clique na opção “Comum”:
� Clique sobre a guia de seleção do comando “Título”, conforme indicado na figura abaixo:
� Clique na opção Meta.
Observe que uma nova janela será exibida.
Webmaster Básico – Dreamweaver CS6
10
Indique nessa metatag a função que irá liberar a localização do conteúdo do site, por qualquer página de
busca. Esse comportamento é ativado pela propriedade “robots”.
� Clique na guia de seleção do item “Atributo” e selecione Nome e na caixa do item valor
digite “robots”:
� Clique na caixa do item conteúdo e digite “all”.
� Clique no botão “OK”.
Observe que a nova metatag foi inserida no código:
Insira as metatags que indicarão quais serão as palavras-chaves de busca (keywords) do site. Como
nosso projeto é o de uma loja de produtos para o homem do campo, indicaremos o máximo de
palavras-chaves que possam remeter a esse tema e aos produtos e serviços oferecidos pela empresa.
� Clique na guia de seleção do comando Título e selecione a opção Palavras-chave:
� Digite as palavras-chaves separadas por vírgula: Brasil, agricultura, produtos rurais,
veterinários, rural, agropecuário, pecuária, produtos veterinários online, ecommerce
rural, loja agropecuária.
Webmaster Básico – Dreamweaver CS6
11
� Clique no botão OK.
Observe que a nova metatag foi inserida no código HTML.
Insira agora a metatag que indicará ao site de busca qual é a descrição do website. A descrição
do website é exibida abaixo do link do site na busca, como mostram alguns exemplos abaixo.
� Clique na guia de seleção do botão “Palavras-chave”, no painel Inserir, e selecione a
opção “Descrição”:
Webmaster Básico – Dreamweaver CS6
12
Vamos agora indicar a descrição do website.
� Digite, na caixa Descrição: Brasil Agricultura, “aqui você encontra tudo para o homem
do campo: produtos rurais, veterinários, agropecuários e muito mais”.
� Clique no botão “OK”.
Observe que uma nova meta tag foi inserida.
13.2. FAVICON
Os Favicon ou “favorite icon” são pequenas figuras (ícones), que definem um logo a ser apresentado ao
lado da URL no navegador e/ou na aba do browser. Veja alguns exemplos abaixo.
Os favicon, além de ajudar o usuário a identificar os sites quando são exibidos, facilitam a localização
dos sites armazenados na opção favoritos do Browser.
A imagem utilizada como favicon deve ter o tamanho de 16px x 16px e deve ter a extensão .ico, .gif,
.png ou .bmp. Utilizaremos o arquivo “favicon.png”, que está salvo dentro da pasta imgs.
� Digite, abaixo da última metatag, a linha de código abaixo:
<link href="imgs/favicon.png" rel="shortcut icon" "image/png"/>
� Pressione o comando CTRL+S para salvar as alterações no arquivo.
� Pressione a tecla “F12” para testar o site.
Observe que o favicon foi exibido na guia da página juntamente com o título:
Webmaster Básico – Dreamweaver CS6
13
Webmaster Básico – Dreamweaver CS6
14
Capítulo 14: Criando links
Neste capítulo, criaremos os links da página principal do site.
� Para dar início a este capítulo caso o seu projeto esteja fechado inicie o Adobe Dreamweaver
CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:
Observe que o arquivo “index.html” foi aberto.
� Clique no botão “Design”, para que seja exibido o layout do site.
Webmaster Básico – Dreamweaver CS6
15
Vamos iniciar criando um link da imagem “leia mais” para a página “leia-mais.html”, que será criada
futuramente.
� Dê um clique na imagem “leia mais”, para selecioná-la.
� Na barra de propriedade, dê um clique na caixa do item “Link” e digite “leia-mais.html”.
Indique que essa página deverá ser aberta na mesma aba do browser.
� Dê um clique na guia de seleção do item Destino e selecione “_self”:
Repita esse processo com a outra imagem “Leia Mais” dessa página:
Webmaster Básico – Dreamweaver CS6
16
Vamos agora criar um link entre o texto das “notícias” e o arquivo “noticias.html”.
� Selecione o texto da primeira notícia:
� Na barra de propriedades dê um clique no botão “HTML”.
� Clique na caixa “Link” e digite “noticias.html” e, no item “Destino”, selecione “_self”, para que a
página “noticias.html” seja aberta na mesma janela do browser.
Observe que, ao definir o link, o texto selecionado ficou na cor azul e sublinhado.
Webmaster Básico – Dreamweaver CS6
17
O texto assumiu este formato que vemos acima, pois esse é o padrão de formatação para links de texto.
Vamos agora alterar essa formatação padrão para a cor preta, para que o texto fique somente
sublinhado quando o ponteiro do mouse estiver sobre o link.
� Dê um clique no menu Modificar e em seguida clique na opção “Propriedades da página”.
� Quando a janela de formatação for exibida clique na opção “Links (CSS)”.
Não iremos alterar o tipo da fonte e nem o tamanho atual da fonte. Iremos apenas alterar a cor do texto
para preto nas opções: Cor do link, links de, links visitados e links ativos.
� Dê um clique na guia de seleção de cor do item “Cor do link”.
Webmaster Básico – Dreamweaver CS6
18
� Selecione a cor preta:
� Repita esse processo com as demais opções:
Neste momento, vamos definir que, quando o ponteiro do mouse estiver sobre o link, ele
apareça apenas sublinhado.
Dê um clique na guia de seleção do item “Estilo sublinhado” e selecione a opção “Mostrar
sublinhado somente em sobreposição”.
� Clique no botão “OK”.
Observe que a cor do link foi alterada.
Vamos agora testar o funcionamento dele.
Pressione o comando CTRL+S para salvar as alterações no site.
� Pressione a tecla “F12”, para testar o site.
Observe que ao posicionar o ponteiro do mouse sobre o link, ele ficará sublinhado.
Webmaster Básico – Dreamweaver CS6
19
Caso você clique sobre o links criados até agora uma, mensagem de erro será exibida, pois ainda não
criamos os arquivos linkados.
Vamos continuar criando os links para as demais notícias.
� Selecione o texto da segunda notícia.
� Clique na caixa “Link” e digite “noticias.html”. No item “Destino”, selecione “_self”, para que a
página “noticias.html” seja aberta na mesma janela do browser.
� Repita esse processo com a terceira notícia.
� Pressione o comando CTRL+S para salvar as alterações no site.
� Pressione a tecla “F12”, para testar o site.
Webmaster Básico – Dreamweaver CS6
20
Capítulo 15: Imagens mapeadas
Neste capítulo, iremos criar um link em uma determinada área de uma imagem. Para o nosso projeto,
criaremos links nas áreas indicadas abaixo, na imagem “rodape.png”, que está inserida no wireframe
“rodapé”:
Em uma área mapeada iremos criar um link para o site “twitter.com” e, em outra área mapeada, iremos
criar um link para o site “facebook.com”.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, conforme indicado na figura abaixo:
Webmaster Básico – Dreamweaver CS6
21
Observe que o arquivo “index.html” foi aberto.
� Clique no botão “Design” para que seja exibido o layout do site.
Vamos inicialmente selecionar a imagem que vamos mapear.
� Dê um clique na imagem do wireframe “rodapé”, como indicado na imagem abaixo:
Vamos agora mapear a primeira área da imagem.
� Na barra de propriedades, clique na ferramenta “Ponto ativo retangular”.
� Selecione a primeira área da imagem, conforme indicado abaixo:
Webmaster Básico – Dreamweaver CS6
22
Observe que uma mensagem aconselhando o uso da propriedade “alt” será exibida. O preenchimento
desta propriedade facilita a “leitura” dos softwares utilizados por deficientes visuais a acessar a internet.
� Clique no botão “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 situação real, o link da conta do twitter da empresa poderia
ser inserido.
Vamos indicar que essa página deve ser aberta em uma nova aba do browser.
� Dê um clique na guia de seleção do item “Destino” e selecione “_blank” com indicado na
imagem abaixo:
Vamos agora criar o próximo mapeamento na imagem.
� Selecione a segunda área da imagem como indicado abaixo:
Webmaster Básico – Dreamweaver CS6
23
� Clique no botão “OK” na mensagem que será exibida.
� Na barra de propriedades no item “Alt”, digite “Link do Facebook”.
� Na barra de propriedades no item “link”, digite a URL “http://www.facebook.com.br”.
Este é apenas um exemplo, mas, em uma situação real, o link do conta do facebook da empresa poderia
ser inserido.
Vamos indicar que essa página deve ser aberta em uma nova aba do browser.
� Dê um clique na guia de seleção do item “Destino” e selecione “_blank”, como indicado na
imagem abaixo:
Vamos agora criar o próximo mapeamento na imagem.
� Pressione o comando CTRL+S para salvar as alterações no site.
� Pressione a tecla “F12”, para testar o site.
Observe que ao clicar nas áreas mapeadas as páginas serão abertas em novas abas no browser.
Webmaster Básico – Dreamweaver CS6
24
Webmaster Básico – Dreamweaver CS6
25
Capítulo 16: Criando o layout da página “Quem Somos”
Neste capítulo, utilizaremos a página “index.html” como base e daremos início à construção da página
“quemsomos.html”.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:
Observe que o arquivo “index.html” foi aberto. Vamos salvar uma cópia deste arquivo com o nome de “base.html”, pois as alterações que iremos
realizar também serão utilizadas como início dos arquivos “quemsomos.html”, “produtos.html”,
“contato.html”, “leia-mais.html” e “noticias.html”.
Webmaster Básico – Dreamweaver CS6
26
� Dê um clique no menu Arquivo e, em seguida, clique na opção “Salvar Como...”.
� Salve este arquivo com o nome de “base.html” e clique no botão “Salvar”.
Neste arquivo, que será utilizado como base para os demais, iremos excluir os objetos presentes no
wireframe “principal”.
� Dê um clique sobre a imagem “Tecnologia de ponta”, para selecioná-la.
� Pressione “DELETE”, para excluir a imagem.
Exclua o restante do conteúdo.
� Selecione todo o conteúdo do wireframe “principal”, conforme indicado na imagem abaixo:
� Pressione a tecla “DELETE”, para excluir o conteúdo selecionado.
Obs.: Caso tenha dificuldade em selecionar todo o conteúdo de uma vez, apague o conteúdo aos
poucos.
Vamos agora nos certificar de que o wirefrme “principal” ainda não possui nenhum código HTML.
� Dê um clique no botão “Código”, para que seja exibido o código da página.
� Certifique-se de que entre as tags <div id="principal" class="principal"> e </div> não possuam
nenhum código HTML:
Webmaster Básico – Dreamweaver CS6
27
Essa será a nossa base a construção dos demais arquivos do site.
� Pressione CTRL+S, para salvar as alterações no arquivo “base.html”.
Vamos agora salvar uma cópia deste arquivo com o nome de “quemsomos.html”.
� Dê um clique no menu Arquivo e, em seguida, clique na opção “Salvar Como...”.
� Salve esse arquivo com o nome de “quemsomos.html” e clique no botão “Salvar”.
� Dê um clique no botão “Design”, para que seja exibido o layout do site.
� Clique sobre o wireframe “principal”, para que o cursor seja posicionado nele.
Vamos agora inserir a imagem de titulo desta wireframe.
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
Webmaster Básico – Dreamweaver CS6
28
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “titulo_quesomos.png”, para selecioná-lo.
� Clique no botão “OK”.
Observe que uma nova janela será exibida.
� Digite, na caixa de texto do item Texto alternativo”, o texto “Quem Somos”.
� Clique no botão “OK”.
Observe que a imagem será inserida.
Iremos agora inserir o conteúdo do wireframe.
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado a direita da
imagem.
� Pressione o comando SHIFT+ENTER três vezes, para criar três quebras de linhas.
� Digite o texto abaixo:
“Fundada em 1980 na cidade de São Paulo SP, a Brasil Agricultura iniciou suas atividades no comércio
varejista de produtos veterinários aos pecuaristas da região. A partir de 1985, já em sua sede própria,
começou a atuar também no mercado atacadista fornecendo produtos veterinários a outras revendas
do estado. Em 1997 a Brasil Agricultura direciona seus trabalhos da mesma forma para o mercado de
insumos agrícolas, gerando assim uma integração entre a agricultura e a pecuária.”
� Pressione SHIFT+ENTER duas vezes, para criar duas quebras de linhas e digite o texto abaixo:
Webmaster Básico – Dreamweaver CS6
29
“Para oferecer o melhor atendimento a Brasil Agricultura possui um departamento técnico com
profissionais especializados no agronegócio. A comercialização de produtos possui como vantagens
assistência técnica especializada com foco no bem estar animal, uma das exigências do consumidor
moderno, levando ao produtor rural produtos e serviços que se transformam em lucratividade no
campo.”
Vamos agora formatar esse texto.
� Selecione os dois parágrafos que foram digitados.
� Na barra de Propriedades, clique no botão “CSS”:
� Dê um clique na guia de seleção do item “Regra-alvo”:
� Selecione a classe “texto”:
Webmaster Básico – Dreamweaver CS6
30
Observe que a formatação foi aplicada.
� Pressione CTRL+S para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que os dois
primeiros links do menu já podem ser acessados normalmente:
� Finalizamos a edição do arquivo “quemsomos.html”. No próximo capítulo, iniciaremos a
construção do arquivo “produtos.html”.
Webmaster Básico – Dreamweaver CS6
31
Capítulo 17: Criando o layout da página “Produtos”
Neste capítulo, criaremos o arquivo “produtos.html” a partir do arquivo “base.html”.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “base.html”, como indicado na figura abaixo:
Observe que o arquivo “base.html” foi aberto. Vamos agora salvar uma cópia deste arquivo com o nome de “produtos.html”.
� Dê um clique no menu Arquivo, e, em seguida, clique na opção “Salvar Como...”.
� Salve esse arquivo com o nome de “produtos.html” e clique no botão “Salvar”.
� Dê um clique no botão “Design”, para que seja exibido o layout do site.
� Clique sobre o wireframe “principal”, para que o cursor seja posicionado nele.
Webmaster Básico – Dreamweaver CS6
32
Vamos agora inserir a imagem de titulo desta wireframe.
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “titulo_produtos.png”, para selecioná-lo.
� Clique no botão “OK”.
Webmaster Básico – Dreamweaver CS6
33
Observe que uma nova janela será exibida.
� Digite, na caixa de texto do item “Texto alternativo”, o texto “Produtos”.
� Clique no botão “OK”.
Observe que a imagem será inserida.
Insira o conteúdo do wireframe, seguindo as instruções a seguir.
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado a direita da
imagem.
� Pressione o comando SHIFT+ENTER três vezes, para criar três quebras de linhas.
17.1. Tabelas
Neste arquivo, iremos inserir os produtos disponíveis no site. Para facilitar a organização dos textos que
serão inseridos, criaremos uma tabela.
� Para inserir a tabela, dê um clique no menu Inserir e, posteriormente, clique na opção
“Tabelas”.
Iremos criar uma tabela, com 3 colunas e duas linhas, com 80% do tamanho do wireframe e com um
preenchimento e espaçamento de 5px entre as células.
� Indique os dados abaixo na janela “Tabela” e dê um clique no botão “OK”.
Webmaster Básico – Dreamweaver CS6
34
Observe que a tabela será inserida.
Vamos agora formatar o posicionamento dos dados na primeira linha da tabela.
� Selecione a primeira linha da tabela:
� Na barra de propriedades, dê um clique na guia de seleção do alinhamento horizontal:
� Selecione a opção “Centro”.
Vamos agora alterar o alinhamento vertical da célula.
� Na barra de propriedades, dê um clique na guia de seleção do alinhamento vertical:
� Selecione a opção “Meio”.
Vamos agora inserir os dados da tabela.
� Dê um clique na primeira célula da tabela para posicionar o cursor:
Webmaster Básico – Dreamweaver CS6
35
� Digite o texto “Produto”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
� Digite o texto “Marca”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
� Digite o texto “Preço”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima linha.
� Digite o texto “Sementes de milho 1 Kg.”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
� Digite o texto “Marca A”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
� 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:
Webmaster Básico – Dreamweaver CS6
36
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora os
três primeiros links do menu já podem ser acessados normalmente:
� Finalizamos a edição do arquivo “produtos.html”. No próximo capítulo, iremos iniciar a
construção do arquivo “contato.html”.
Webmaster Básico – Dreamweaver CS6
37
Capítulo 18: Criando o layout da página “Contato”
Neste capítulo, criaremos o arquivo “contato.html”, a partir do arquivo “base.html”.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “base.html”, como indicado na figura abaixo:
Observe que o arquivo “base.html” foi aberto. Vamos agora salvar uma cópia deste arquivo como nome de “contato.html”.
� Dê um clique no menu Arquivo e, em seguida, clique na opção “Salvar Como...”.
� Salve esse arquivo com o nome de “contato.html” e clique no botão “Salvar”.
� Dê um clique no botão “Design”, para que seja exibido o layout do site.
� Clique sobre o wireframe “principal”, para que o cursor seja posicionado no mesmo.
Webmaster Básico – Dreamweaver CS6
38
Vamos agora inserir a imagem de titulo desta wireframe.
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “titulo_contato.png”, para selecioná-lo.
� Clique no botão “OK”.
Webmaster Básico – Dreamweaver CS6
39
Observe que uma nova janela será exibida.
� Digite, na caixa de texto do item “Texto alternativo”, o texto “Contato”.
� Clique no botão “OK”.
Observe que a imagem será inserida.
Iremos agora inserir o conteúdo do wireframe.
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado a direita da
imagem.
� Pressione o comando SHIFT+ENTER três vezes, para criar três quebras de linhas.
18.1. Criando um formulário
Neste arquivo, criaremos um formulário de contato. Os dados que serão preenchidos no formulário
serão enviados para um arquivo chamado de “envia.php”, que enviará os dados preenchidos para o e-
mail da empresa “Brasil Agricultura”. Neste exemplo, estamos utilizando a tecnologia php para enviar os
dados, mas podem ser utilizadas outras tecnologias como CGI ou ASP, por exemplo.
Neste curso, não criaremos o arquivo “envia.php”, apenas criaremos o link entre o formulário e o
arquivo.
� Vamos agora iniciar o formulário. Dê um clique no menu Inserir, aponte para a opção
“Formulário” e clique em “Formulário”.
Observe que um retângulo em vermelho será exibido no layout do site.
Tudo que estiver entre as linhas vermelhas do retângulo fará parte do formulário.
Vamos agora indicar qual será a ação do formulário. Neste caso, iremos enviar os dados para o arquivo
“envia.php”.
� Na barra de propriedades, digite “envia.php” no item “ação”:
Webmaster Básico – Dreamweaver CS6
40
Para melhor organizar os dados do formulário, vamos inseri-lo dentro de uma tabela.
� Para inserir a tabela, dê um clique no menu Inserir e, posteriormente, clique na opção
“Tabelas”.
Iremos criar uma tabela, com 2 colunas e 4 linhas, com 80% do tamanho do wireframe e com um
preenchimento e espaçamento de 5px entre as células.
� Indique os dados abaixo na janela “Tabela” e clique no botão “OK”.
Observe que a tabela será inserida.
� Na primeira célula da tabela digite o texto “Nome:”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
Webmaster Básico – Dreamweaver CS6
41
Nesta segunda célula da tabela, será inserido um campo de texto onde o usuário do site irá preencher o
seu nome.
� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Campo de
texto”.
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 botão “OK”.
Observe que o campo de texto foi criado. Vamos agora indicar que este campo terá o tamanho de 40
caracteres, podendo receber no máximo 50 caracteres.
� Dê um clique no campo de texto para selecioná-lo:
� Na barra de propriedades, digite, nas opções “Larg. em caracteres” e “Caracteres (máx.), os
valores 40 e 50, respectivamente.
Vamos agora indicar o valor inicial deste campo de texto.
� Na opção “Valor inicial”, digite o texto “Digite o seu nome aqui”.
Webmaster Básico – Dreamweaver CS6
42
Vamos agora preencher a segunda linha da tabela.
� Para posicionar o cursor, dê um clique na primeira célula da segunda linha da tabela.
� Digite o texto “E-mail:”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
Na segunda célula desta linha, iremos inserir um campo de texto onde o usuário do site irá preencher o
seu e-mail de contato.
� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Campo de
texto”.
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 botão “OK”.
Observe que o campo de texto foi criado. Vamos agora indicar que este campo terá o tamanho de 30
caracteres, podendo receber no máximo 40 caracteres.
� Dê um clique no campo de texto para selecioná-lo:
Webmaster Básico – Dreamweaver CS6
43
� Na barra de propriedades, digite nas opções “Larg. em caracteres” o valor de 30, e, em
“Caracteres (máx.), o valor de 40. Na caixa valor inicial, digite “Seu e-mail aqui”.
Vamos agora preencher a terceira linha da tabela.
� Dê um clique na primeira célula da terceira linha da tabela, para posicionar o cursor.
� Digite o texto “Mensagem:”.
� Pressione a tecla “TAB”, para que o cursor passe automaticamente para a próxima célula.
Na segunda célula desta linha, vamos inserir um campo de texto onde o usuário do site irá preencher a
mensagem que deseja enviar.
� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Área de texto”.
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 botão “OK”.
Observe que a área de texto foi criada:
� Na barra de propriedades, no item “Valor inicial”, digite “Sua mensagem aqui”.
Webmaster Básico – Dreamweaver CS6
44
Vamos agora inserir o botão que irá enviar os dados para o arquivo “envia.php”.
� Dê um clique na segunda célula, da quarta linha da tabela, para posicionar o cursor.
� Dê um clique no menu Inserir, aponte para a opção “Formulário” e clique em “Botão”.
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 botão “OK”.
Observe que o botão foi inserido no formulário:
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser.
Observe que agora é possível preencher o formulário:
Webmaster Básico – Dreamweaver CS6
45
Caso você clique no botão “Enviar”, o arquivo “envia.php” será “chamado”, mas como não iremos criar
o arquivo “envia.php”, pois esse não é foco do curso, uma mensagem de erro será exibida:
� Finalizamos a edição do arquivo “contato.html”. No próximo capítulo, iremos iniciar a
construção do arquivo “notícias.html”.
Webmaster Básico – Dreamweaver CS6
46
Capítulo 19: Criando o layout da página “Notícias”
Neste capítulo, criaremos o arquivo “contato.html”, a partir do arquivo “base.html”.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “base.html”, como indicado na figura abaixo:
Observe que o arquivo “base.html” foi aberto. Vamos agora salvar uma cópia deste arquivo como nome de “contato.html”.
� Dê um clique no menu Arquivo e em seguida clique na opção “Salvar Como...”.
� Salve este arquivo com o nome de “noticias.html” e clique no botão “Salvar”.
� Dê um clique no botão “Design”, para que seja exibido o layout do site.
� Clique sobre o wireframe “principal”, para que o cursor seja posicionado no mesmo.
Webmaster Básico – Dreamweaver CS6
47
Vamos agora inserir a imagem de titulo desta wireframe.
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “titulo_detalhes.png”, para selecioná-lo.
� Clique no botão “OK”.
Webmaster Básico – Dreamweaver CS6
48
Observe que uma nova janela será exibida.
� Digite, na caixa de texto do item “Texto alternativo”, o texto “Detalhes”.
� Clique no botão “OK”.
Observe que a imagem será inserida.
Iremos agora inserir o conteúdo do wireframe.
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado à direita da
imagem.
� Pressione o comando SHIFT+ENTER três vezes, para criar três quebras de linhas.
� Digite o texto abaixo e utilize o comando SHIFT+ENTER, para quebrar os parágrafos (é
importante que você digite todo o texto para possamos realizar a próxima atividade).
“Pesquisa com café contribui para a sustentabilidade da produção.
Com as tecnologias geradas pelo Consórcio Pesquisa Café os pequenos produtores vivem uma nova
realidade e estão deixando para traz aquela imagem do pequeno produtor atrelado a técnicas
ultrapassadas. O acesso ao conhecimento e às tecnologias adequadas à pequena propriedade levou a
cafeicultura familiar a um novo patamar. Hoje, o café desses produtores não só gera renda familiar
como, principalmente, tem qualidade reconhecida.
Segundo o Censo Agropecuário 2006 do Instituto Brasileiro de Geografia e Estatística (IBGE), o Brasil
possui mais de 285 mil estabelecimentos rurais de café. A grande maioria das propriedades cafeeiras é
formada por famílias de pequenos produtores. O Simpósio de Cafeicultura Familiar, realizado em 2009
pela Prefeitura Municipal de Poços de Caldas (MG), destacou ainda que 70% delas têm menos de 20
hectares.
Evento no Rio Grande do Norte certifica Organismos de Controle Social
A VIII Semana dos Alimentos Orgânicos, que encerrou no último domingo no Rio Grande do Norte,
entregou certificados para Organismos de Controle Social (OCS) e produtores orgânicos na cidade de
Olho d´Água dos Borges, na região do Oeste do Estado. O Mapa, responsável pelas ações de
desenvolvimento da agricultura orgânica, promoveu a campanha deste ano em parceria com várias
organizações governamentais e não-governamentais que fazem parre das Comissões da Produção
Orgânica nas Unidades da Federação – CPOrgs. Em 2012, o tema se inspira na Conferência Rio + 20, que
aborda o desenvolvimento sustentável e a erradicação da pobreza. Nos demais estados brasileiros,
foram promovidas outras ações durante a Semana dos Orgânicos.
Estudo reforça cultivo de café de base ecológica
Estudo desenvolvido na Embrapa Café, empresa vinculada ao Ministério da Agricultura, Pecuária e
Abastecimento (Mapa), promove o controle de plantas daninhas usando leguminosas herbáceas
consorciadas com a cultura do café. A tese de doutorado foi apresentada pelo pesquisador Julio Cesar
Freitas Santos, na Universidade Federal de Viçosa (UFV).
Webmaster Básico – Dreamweaver CS6
49
O trabalho confirmou a possibilidade do cultivo de leguminosa, como lablabe, sirato, híbrido de Java ou
amendoim forrageiro, fazer parte do manejo integrado da lavoura cafeeira. A tecnologia consiste em
utilizar uma dessas leguminosas herbáceas como cobertura viva de solo.” (fonte:
http://www.sapc.embrapa.br/index.php/ultimas-noticias/consorcio-pesquisa-cafe-contribui-para-a-
sustentabilidade-da-agricultura-familiar)
Observe que, ao finalizar de digitar o texto, ele será maior que a área do wireframe.
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que o texto
sobrepõe as demais wireframes do site:
19.1. Exibindo barras de rolagem
Vamos resolver esse problema, limitando o tamanho máximo deste wireframe e exibindo uma barra de
rolagem vertical no mesmo caso seja necessário.
� Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem abaixo:
� Dê um clique no botão “Código”, para que seja exibido somente o código CSS.
Iremos inserir na classe “.principal” as seguintes propriedades:
max-width:625px;
overflow-x:hidden;
As propriedades acima irão limitar a largura máxima do wireframe em 625px, e caso essa largura seja
ultrapassada, a barra de rolagem horizontal não será exibida.
max-height:465px;
overflow-y:auto;
Webmaster Básico – Dreamweaver CS6
50
As propriedades acima irão limitar a altura máxima do wireframe em 465px, e caso essa largura seja
ultrapassada, a barra de rolagem vertical será exibida.
� Digite o as propriedades citadas acima, como indicado na imagem abaixo:
Vamos ver o resultado.
� Pressione CTRL+S para salvar as alterações no arquivo “estilos.css”.
� Dê um clique no “Código-fonte”.
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora a
barra de rolagem vertical é exibida:
Webmaster Básico – Dreamweaver CS6
51
Vamos agora criar uma formatação, que será utilizada nos títulos das notícias.
� Dê um clique sobre o arquivo “estilos.css”, como indicado na imagem abaixo:
� Dê um clique no botão “Código”, para que seja exibido somente o código CSS.
Agora, vamos criar uma nova classe, que chamaremos de “.titulo”.
� Digite o código CSS abaixo no final do arquivo:
.titulo {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
color: #C30;
}
Webmaster Básico – Dreamweaver CS6
52
� Pressione CTRL+S para salvar as alterações no arquivo “estilos.css”.
� Dê um clique no “Código-fonte”.
� Clique no botão “Design”, para que seja exibido o layout da página.
� Selecione o primeiro título do texto.
� Na barra de Propriedades, clique no botão “CSS”:
� Dê um clique na guia de seleção do item “Regra-alvo”:
Webmaster Básico – Dreamweaver CS6
53
� Selecione a classe “titulo”:
Observe que o estilo foi aplicado:
� Selecione agora o texto desta notícia:
� Na barra de Propriedades, clique no botão CSS:
Webmaster Básico – Dreamweaver CS6
54
� Dê um clique na guia de seleção do item “Regra-alvo”:
� Repita esse processo com as demais partes do texto. Utilize o comando SHIFT+ENTER, para
aumentar o espaçamento entre o título e o texto caso seja necessário:
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que agora é
possível abrir o arquivo “noticias.html”, a partir do link das notícias:
Webmaster Básico – Dreamweaver CS6
55
Capítulo 20: Criando um banner flutuante
Neste capítulo, iremos criar um banner flutuante no arquivo “index.html”. Um banner flutuante é uma
imagem ou uma animação que é exibida em um wireframe, independente da estrutura do site, dando a
possibilidade do usuário fechá-lo. Esse tipo de banner é muito utilizado para a veiculação de propaganda
e promoções.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
Webmaster Básico – Dreamweaver CS6
56
� 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 botão Design, para que seja exibido o layout do site.
20.1. Criando uma wireframe absoluta (div AP) Um wireframe absoluto, ou div AP, como também é chamado no Dreamweaver, é um wireframe (div), que pode ser posicionado em qualquer local da estrutura do site, sem interferir no posicionamento dos demais wireframes. Vamos agora criar um div AP.
� Dê um clique na ferramenta “Desenhar div AP”, posicionada no painel Inserir.
� Vamos agora desenhar o wireframe. Desenhe-o como mostrado na imagem abaixo:
Webmaster Básico – Dreamweaver CS6
57
� Vamos agora definir o tamanho dele. Na barra de propriedades do item L (largura), digite 300px
e, no item A (altura), digite 160px, conforme mostrado na imagem abaixo:
� Vamos agora nomear esse wireframe. No item “Elemento CSS-P”, digite “publicidade”:
� Vamos inserir a imagem que será exibidano wireframe. Dê um clique dentro dele, para
posicionar o cursor:
Webmaster Básico – Dreamweaver CS6
58
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
Webmaster Básico – Dreamweaver CS6
59
� Clique no arquivo “publicidade.png”, para selecioná-lo.
� Clique no botão “OK”.
Observe que uma nova janela será exibida.
� Digite, na caixa de texto do item “Texto alternativo”, o texto “Promoção”.
� Clique no botão “OK”.
Observe que a imagem será inserida dentro do wireframe.
� Pressione CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Observe que a imagem
é exibida:
Webmaster Básico – Dreamweaver CS6
60
Iremos agora mapear a área da imagem, onde está o “botão fechar”, e criar um comportamento que irá
ocultar esta wireframe.
� Clique sobre a imagem dentro do wireframe, para selecioná-la.
� Na barra de propriedades, clique na ferramenta “Ponto ativo retangular”.
� Selecione a área da imagem onde será o botão “fechar”, como indicado abaixo:
Webmaster Básico – Dreamweaver CS6
61
� Observe que será exibida uma mensagem, aconselhando o uso da propriedade “alt”. Dê um
clique no botão OK.
� Na barra de propriedades do item “Alt”, digite “Fechar”.
Vamos agora criar um comportamento para este botão.
20.2. Criando um comportamento
Iremos agora adicionar um comportamento para a área mapeada da imagem. Neste comportamento,
indicaremos que, caso o usuário clique na área “mapeada”, o wireframe “publicidade” deverá ser
oculto.
Para adicionar comportamentos no Dreamweaver, é necessário visualizar a janela “Comportamentos”.
� Dê um clique no menu Janela e, posteriormente, selecione a opção “Comportamentos”.
Observe que o painel Comportamentos será exibido:
Webmaster Básico – Dreamweaver CS6
62
Vamos agora adicionar o comportamento.
� Dê um clique no botão “+”, no painel de comportamentos, e selecione a opção
“Mostrar/ocultar elementos”.
Webmaster Básico – Dreamweaver CS6
63
Observe que uma janela será exibida.
Nesta janela vamos selecionar o wireframe e comportamento do objeto quando o botão “fechar” for
clicado.
� Selecione o wireframe “publicidade” e clique no botão “ocultar”:
� Clique no botão “OK”, para confirmar o comportamento.
Webmaster Básico – Dreamweaver CS6
64
O comportamento padrão adicionado funciona quando o ponteiro do mouse estiver sobre o objeto
(onMouseOver). Vamos trocar esse comportamento inicial para “onClick”, para que o wireframe seja
oculto somente se o usuário clicar sobre o botão.
� No painel de comportamentos, dê um clique no comportamento “Mouseover”:
� Selecione a opção “onClick”.
� Vamos testá-lo.
� Pressione CTRL+S para salvar as alterações.
� Pressione a tecla “F12”, para testar o arquivo diretamente no browser. Clique no botão
“fechar” e observe que o wireframe será oculto.
Webmaster Básico – Dreamweaver CS6
65
Capítulo 21: Hospedando o seu site na internet
Depois de finalizar o desenvolvimento de um site, é muito provável que você queira hospedá-lo na
internet. Para hospedar um site na internet, você precisará seguir os seguintes passos.
21.1. Adquirindo um domínio
A maioria das empresas que hospedam sites oferece planos de venda conjugada que, além de oferecer a
hospedagem do site na internet, vendem o domínio. Algumas somente oferecem domínios .com / .net
etc. e outras oferecem também o domínio .com.br.
Caso você queira comprar o domínio antes de se cadastrar em uma empesa de hospedagem, ele pode
ser comprado pelos sites. Veja abaixo alguns sites que vendem domínios.
Domínios “.com.br / .edu.br / info.br / ind.br” podem ser adquiridos pelos sites www.registro.br,
http://www.uolhost.com.br/registro-de-dominio.html#rmcl, entre outros.
Domínios “.com / .net /.org .tv” podem ser adquiridos pelos sites http://www.100br.com,
http://www.uolhost.com.br/registro-de-dominio.html#rmcl, entre outros.
21.2. Adquirindo uma conta de hospedagem de site
Você pode adquirir uma conta de hospedagem juntamente com o domínio do seu site, caso você não o
tenha adquirido anteriormente em empresas especializadas. Abaixo, seguem alguns links de empresas
que oferecem esse serviço no Brasil:
http://www.locaweb.com.br
http://www.uolhost.com.br
Após obter uma conta de hospedagem, a empresa irá criar, juntamente com sua conta, um nome de
usuário e um endereço FTP protegidos por uma senha. Por exemplo: vamos supor que o seu domínio é
meusite.com.br.
Nome de usuário: meusite
Endereço FTP: ftp://meusite.com.br
Senha: 123456
É com esse nome de usuário e endereço ftp que você poderá enviar os arquivos para o servidor remoto.
21.3. Enviando os arquivos para o servidor remoto
Com o nome de usuário, senha e endereço ftp, é possível enviar os arquivos para o servidor remoto
diretamente pelo Dreamweaver. Vamos realizar um exemplo prático.
� Inicie o Adobe Dreamweaver CS6.
� Clique sobre o menu Site e selecione a opção “Gerenciar sites...”.
Webmaster Básico – Dreamweaver CS6
66
� Clique no site “Brasil Agricultura”.
� Clique no botão “Concluído”.
� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:
� No painel Arquivos, dê um clique na guia de seleção indicada na imagem abaixo:
Webmaster Básico – Dreamweaver CS6
67
� Selecione a opção “Servidor Remoto”:
� Dê um clique na opção “Definir um servidor remoto”.
Em seguida, crie uma nova conexão com o servidor remoto.
Obs.: Neste exemplo, iremos utilizar dados fictícios. Para realizar esta operação, você deverá ter uma
conta em uma empresa de hospedagem e estar em posse do nome de usuário, senha e endereço ftp.
� Dê um clique no botão “Adicionar novo servidor” (+).
Webmaster Básico – Dreamweaver CS6
68
Vamos agora preencher os dados da conexão.
� Preencha os dados da conexão ftp:
� Dê um clique no botão “Testar”. Caso a conexão esteja correta, a seguinte mensagem será
exibida:
Webmaster Básico – Dreamweaver CS6
69
� Clique no botão “OK” e clique no botão “Salvar”, para salvar os dados da conexão.
Vamos agora enviar os arquivos para o servidor remoto.
� No painel Arquivos, dê um clique no botão “Conectar ao servidor remoto”.
Você irá observar que as pastas do servidor remoto serão exibidas:
Webmaster Básico – Dreamweaver CS6
70
Seu site deve ser publicado dentro da pasta “public_html” ou “www” (ambas são a mesma, porém,
dependendo da configuração do servidor, ela pode aparecer com nomes diferentes.) Observe que neste
caso o nome da pasta está como “public_html”.
� Dê um clique duplo na pasta “public_html”, para abri-la.
� Feito isso, basta clicar no botão “enviar arquivos para o servidor remoto” que os arquivos da
pasta “site” de seu computador serão enviados para o servidor remoto, podendo ser acessados
de qualquer lugar do mundo pela internet:
Caso você realize alguma alteração no site, basta clicar no botão “sincronizar com o servidor remoto”,
que os arquivos serão atualizados automaticamente.
Webmaster Básico – Dreamweaver CS6
71
Capítulo 22: Agora é com você
Este site em desenvolvimento ainda não está completo. Caso você não tenha observado, é necessário
ainda o desenvolvimento do arquivo “leia-mais.html”. Agora é com você. Utilize a imagem
“leiamais.png” como título e crie um conteúdo ao seu gosto: