Apostila Web Master - 1º. Modulo
Transcript of Apostila Web Master - 1º. Modulo
Webmaster Básico – Dreamweaver CS6
1
Curso de Webmaster– Dreamweaver CS6
Capítulo 1: Introdução ao desenvolvimento de sites
Bem-vindo(a) ao curso de Webmaster do Cursos 24 Horas. O objetivo desse curso é ensinar ao aluno
todas as etapas do desenvolvimento de websites, desde o seu planejamento até o envio dos arquivos
para o servidor web, utilizando o aplicativo Dreamweaver CS6. Nesse curso, iremos desenvolver um site
de uma empresa fictícia, chamada Brasil Agricultura, do começo ao fim.
Antes de iniciar o uso do Dreamweaver, é importante projetar o desenvolvimento do site. Uma das
etapas de desenvolvimento do site é a criação de um do layout do site.
1.1. Layout
Layout é um esboço em que é mostrada a distribuição física do website, juntamente com os tamanhos
de elementos que serão utilizados nele,, como imagens, animações e textos. Veja o exemplo do layout
criado para a página inicial do site que será desenvolvido nesse curso:
Webmaster Básico – Dreamweaver CS6
2
Nesse layout, observe que está indicada a localização dos principais componentes do site, como, por
exemplo, a barra de menu, o logotipo, o texto principal, as notícias, o rodapé do site etc. Para o desenho
desse layout, foi utilizado o programa Adobe Photoshop.
Caso você não tenha o domínio da ferramenta Adobe Photoshop, um layout pode ser também criado
em outros programas, como o Corel Draw, o Adobe Illustrator, Gimp, entre outros. Esse mesmo layout
também pode ser desenhado à mão livre como o exemplo abaixo:
Pode-se criar o layout de todas as páginas que serão utilizadas no site, veja o exemplo da página “Quem
Somos” dele:
Webmaster Básico – Dreamweaver CS6
3
No entanto, para que sejam criados todos os layouts do site, é necessário antes conhecer quais páginas
o website irá conter, por isso, é preciso criar um roteiro de navegação do site.
1.2. Roteiro de navegação do site
Uma das primeiras coisas a fazer no desenvolvimento de um site é criar o roteiro de navegação. O
roteiro de navegação, também conhecido como “Mapa do Site”, é a forma que o usuário navegará pelas
informações do website. No site que iremos desenvolver, as páginas serão acessadas por um menu,
conforme indicado no roteiro abaixo:
Webmaster Básico – Dreamweaver CS6
4
Essa será a forma que o usuário navegará pelo site. Agora, com a navegação definida, é importante
saber o que cada página irá conter.
1.3. Conteúdo das páginas
Depois de conhecer o roteiro de navegação e as páginas que o website irá conter, é preciso saber qual
será o conteúdo de cada página. antes de dar inicio ao desenvolvimento do site. Acompanhe abaixo o
nosso exemplo.
Página Home
Na página “Home” estarão informações sobre as tecnologias oferecidas pela empresa e um acesso as
últimas notícias.
Leia Mais
Na página “Leia Mais” acessada somente pela página “Home” o usuário do site terá o texto completo do
conteúdo da seção “Tecnologia de ponto” apresentada na página “Home”.
Página Quem Somos
A página “Quem Somos” conterá um texto com a missão e os valores da empresa.
Página Produtos
Na página “Produtos” serão exibidos os produtos e serviços oferecidos pela empresa.
Página Contato
Esta página apresentará um formulário de contato onde o usuário preencherá informações que serão
enviadas para um e-mail.
Webmaster Básico – Dreamweaver CS6
5
Capítulo 2: Estrutura de Wireframes
A estrutura do site, também conhecida como wireframes ou divs, é utilizada para identificar e dividir
onde se localizarão as informações no site. O Wireframe é o esqueleto do site, é a forma como as
informações irão aparecer na tela para o usuário do website.
2.1. Conhecendo a estrutura do site
Seguindo o layout apresentado no capítulo anterior, a, esturura do website ficará da seguinte forma:
Observe que em cada uma das caixas (divs) estará uma determinada área do website. Observe também
que todas as divs estão posicionadas dentro de uma caixa principal, chamada de “Container”.
2.2. Resolução utilizada no website
Além de conhecer a estrutura de wireframes que será utilizado, é importante definir a resolução final do
website. Nesse projeto, iremos utilizar a resolução de 960 pixels de largura por 1.000 pixels de altura.
Webmaster Básico – Dreamweaver CS6
6
Iremos, portanto, distribuir a altura e a largura dos wireframes dentro dessa resolução, veja como:
Webmaster Básico – Dreamweaver CS6
7
As medidas indicadas na imagem indicam primeiro a largura e posteriormente a altura de cada
wireframe.
2.3. Tecnologia/linguagem utilizadas na construção do website
Antes de iniciar o desenvolvimento do site, você deve conhecer as tecnologias e linguagens que serão
utilizadas para o desenvolvimento do mesmo. Para a construção desse projeto, usaremos as seguintes
tecnologias.
HTML (HYPERTEXT MARKUP LANGUAGE)
O HTML é a linguagem padrão das páginas da internet. É uma linguagem de marcação que é
interpretada pelo browser para dar formatação e posicionamento ao conteúdo do site. As instruções e
atributos da linguagem HTML são declarados em forma de TAGS, iniciados e finalizados pelas TAGS
<comando> e </comando> como, por exemplo: <title> Minha primeira página </title>.
Webmaster Básico – Dreamweaver CS6
8
CSS
As folhas de estilo CSS servem para promover o acabamento visual das páginas web. Elas possuem uma
característica muito importante, que é a de poderem ser compartilhadas entre várias páginas,
permitindo, assim, uma padronização visual muito simplificada e lógica.
Webmaster Básico – Dreamweaver CS6
9
Capítulo 3: Introdução ao Dreamweaver CS6
O Adobe Dreamweaver é um software de desenvolvimento voltado para a internet. O Dreamweaver
utiliza um sistema conhecido como WYSIWYG (What You See Is What You Get) – traduzido para o
português como “O que você vê é o que você obtém” – no qual você pode criar uma página no modo
Design do Dreamweaver, e ela terá a aparência igual ao resultado final, sendo executada em um
browser na internet.
3.1. Instalando o Dreamweaver CS6
Caso você não tenha o software Dreamweaver instalado em seu computador, a Adobe, empresa
criadora do Dreamweaver, oferece uma cópia de avaliação, que pode ser utilizada gratuitamente por 30
dias.
Vamos agora realizar o procedimento de download e instalação desse programa. Inicialmente vamos
executar o browser padrão de navegação na internet. Nesse exemplo, iremos utilizar o Microsoft
Explorer.
� Dê um clique no botão “Iniciar” do Windows.
� Aponte o ponteiro do mouse sobre o item “Todos os Programas”.
� Clique no atalho do programa “Internet Explorer (64 bits)”.
Webmaster Básico – Dreamweaver CS6
10
� Na barra de endereços no browser digite a URL www.adobe.com.br e pressione a tecla ENTER.
� No site da Adobe selecione o link “Mais produtos” do botão “Produtos”:
Até o lançamento deste curso, a versão em português do software Adobe Dreamweaver CS6 somente
está disponível dentro de pacotes de programas Creative Suite 6 Design & Web, Creative Suite Master
Collection ou Adobe Cloud.
Nesse exemplo, iremos baixar e instalar o pacote Creative Suite 6 Design & Web.
� Localize o pacote Creative Suite 6 Design & Web e dê um clique no link “Testar” (localizado no
lado direito da página):
Webmaster Básico – Dreamweaver CS6
11
� Selecione o idioma “Português”.
� Dê um clique no botão “Faça download agora”.
� Observe que será exibida uma mensagem de confirmação de download. Clique no botão
“Executar”.
Aguarde a janela do assistente de download ser exibida.
� Quando a janela do assistente de download for exibida, deixe as configurações padrão dela e
clique no botão “Continuar”.
Webmaster Básico – Dreamweaver CS6
12
� Para realizar o download de qualquer programa da Adobe, é necessário ter um conta chamada
de Adobe ID. Caso você não tenha essa conta dê um clique no botão “Criar uma ID da adobe”.
Obs.: Caso você já tenha uma ID da Adobe, digite o seu e-mail e senha e clique no botão “Conectar-se”.
� Na janela que será exibida, preencha os dados pedidos e crie uma senha para ter acesso ao
Adobe ID:
Webmaster Básico – Dreamweaver CS6
13
� Após você preencher os dados, dê um clique no botão “Criar”.
Observe que agora será pedido para que você selecione uma pasta para onde os arquivos de instalação
serão copiados.
� Selecione a pasta “Área de Trabalho” e clique no botão OK.
Aguarde o processo de download ser realizado.
Webmaster Básico – Dreamweaver CS6
14
Após o término do download, os arquivos serão descompactados e a instalação será iniciada.
Caso a instalação não seja iniciada automaticamente, execute o arquivo “Set-up” da pasta no local onde
os arquivos de instalação foram descompactados:
� Quando a janela de boas-vindas da instalação for exibida, selecione a opção “Avaliar”:
Webmaster Básico – Dreamweaver CS6
15
� Um “Contrato de utilização” será exibido. Clique no botão “Aceitar” para dar inicio a instalação.
� Selecione quais programas serão instalados. Nesse exemplo, selecionamos apenas o software
Adobe Dreamweaver CS6.
� Clique no botão Instalar e aguarde o final da instalação.
Webmaster Básico – Dreamweaver CS6
16
Capítulo 4: Iniciando o Dreamweaver CS6
Com o programa instalado, vamos agora executá-lo pela primeira vez.
Para executar o Dreamweaver, siga os seguintes passos:
� Clique no botão “Iniciar” do Windows e aponte o ponteiro do mouse para “Todos os
Programas”.
� Clique na subpasta “Adobe” (ou na pasta de produtos adobe instalada em seu computador) e,
em seguida, clique na opção “Adobe Dreamweaver CS6”.
4.1. Criando um novo arquivo
Ao abrir o programa, vamos dar início a um novo documento HTML.
� Clique no menu Arquivo e, em seguida, clique sobre a opção “Novo”:
Clique sobre o botão “Página em branco” e selecione HTML, na coluna “Tipo da página”, e <nenhum(a)>,
na coluna “Layout”.
Webmaster Básico – Dreamweaver CS6
17
� Clique no botão “Criar”.
Observe que a área de trabalho do Dreamweaver será exibida.
4.2. Área de trabalho do Dreamweaver
A área de trabalho do Dreamweaver é dividida da seguinte forma:
Barra de menu e aplicativos
Na parte superior da tela, encontra-se a barra de Menu, que dá acesso a todas as funções do software.
À direita da barra de menu, está localizada a barra de aplicativos, que é utilizada para dar acesso rápido
a outros aplicativos e outros controles.
Barra de Ferramentas documento
Logo abaixo da barra de menu, encontra-se a barra de ferramentas Documento. Essa barra de
ferramentas será utilizada para navegar entre os diferentes tipos de visualização do arquivo e outras
operações comuns em um documento.
Painéis
Os painéis do Dreamweaver são utilizados para facilitar a utilização das ferramentas de criação e edição
de um documento. O painel Inserir, apresentado na imagem abaixo, possui as principais ferramentas de
edição e criação de layout. Durante esse curso, utilizaremos uma série de painéis.
Webmaster Básico – Dreamweaver CS6
18
Barra de Propriedades
A barra de Propriedades exibe as opções da ferramenta ativa. Essa barra sempre será modificada,
dependendo da ferramenta de edição que está ativa no momento.
Agora que já conhecemos os principais elementos da área de trabalho do Dreamweaver, vamos criar
uma pasta padrão para todos os arquivos que serão utilizados no website que será desenvolvido.
4.3. Criando a pasta local para o site
Antes de iniciar o desenvolvimento do site, devemos indicar qual será a pasta na qual os arquivos do site
serão salvos.
� Clique sobre o menu Site e selecione a opção “Novo Site”:
Observe que uma nova janela será aberta.
Nesta primeira etapa da definição do novo site, vamos indicar o nome do site e a pasta onde serão
salvos e editados os arquivos.
Webmaster Básico – Dreamweaver CS6
19
� Clique na caixa do item Nome do site e digite “Brasil Agricultura”:
Agora, vamos indicar a pasta onde serão salvos os arquivos. Iremos criar uma pasta com o nome de
“site” dentro da pasta “Meus Documentos”.
� Dê um clique no botão “Localizar Pasta” do item Pasta do site local:
� Dê um clique no botão “Bibliotecas” na janela que será exibida.
� Dê um clique duplo na pasta “Documentos”.
Webmaster Básico – Dreamweaver CS6
20
Vamos agora criar uma nova pasta com o nome de “Site”.
� Dê um clique no botão “Criar nova pasta”.
� Quando for exibida a nova pasta, digite o nome “Site” e pressione a tecla ENTER.
� Dê um clique duplo sobre a pasta “Site” para selecioná-la.
� Clique no botão “Salvar”, para selecionar essa pasta para os arquivos do site.
Desta forma, definimos o nome do site e o local onde os arquivos serão salvos.
� Clique no botão “Salvar”.
4.4. Salvando o arquivo HTML
Vamos agora salvar o arquivo HTML na pasta “Site”, para que estas configurações fiquem salvas e não
seja necessário repeti-las no futuro.
� Clique no menu Arquivo e em seguida clique na opção “Salvar Como...”.
Webmaster Básico – Dreamweaver CS6
21
Observe que a janela “Salvar” foi aberta já indicando a pasta de trabalho “Site”:
� Clique na caixa do item Nome e digite “index”.
Obs.: é importante que a primeira página do site tenha o nome de index.html, pois, após enviar esse
arquivo para um servidor na internet, esta será a primeira página exibida do site.
� Clique no botão “Salvar”.
No próximo capítulo, vamos dar início à construção do layout da página.
Webmaster Básico – Dreamweaver CS6
22
Capítulo 5: Criando o Layout das páginas do Website
Vamos desenvolver o layout deste projeto, utilizando o conceito de Tableless, que é uma forma de
desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página. O não uso de
tabelas deixa o site mais leve, não sobrecarregando o browser. Como consequência, a página será
carregada de uma forma mais rápida. O não uso de tabelas também deixa o conteúdo do site mais
acessível aos sites de busca, como o Google, por exemplo.
5.1. Abrindo o site
� Inicie o Adobe Dreamweaver CS6.
Vamos agora abrir o projeto salvo no capítulo anterior e, em seguida, abrir o projeto.
� 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.php”,, como indicado na figura abaixo:
Webmaster Básico – Dreamweaver CS6
23
Observe que o arquivo “index.html” foi aberto.
5.2. Modos de visualização de um documento
Na barra de ferramentas do documento, existem quatro botões de Modos de visualização do
documento:
Modo Código
O Modo Código ativa a visualização do código HTML / PHP / CSS do arquivo aberto. Com esse modo de
visualização, podemos adicionar novos códigos ou editar o código já existente.
� Clique no botão Código.
Observe que o código HTML do documento foi exibido.
Modo Dividir
O Modo Dividir divide a tela em duas janelas, mostrando na janela da esquerda o código HTML e na
janela da direita a visualização da página.
� Clique no botão “Dividir:”
Como ainda temos um documento em branco, na janela da direita será exibida uma tela em branco.
Modo Dinâmica
Webmaster Básico – Dreamweaver CS6
24
Pelo Modo Dinâmica, é possível visualizar atualizações por meio de banco de dados. Nesse curso, não
iremos utilizar conexões com banco de dados, portanto, não iremos utilizar esse modo de visão.
Modo Design
O Modo Design é o modo padrão de edição de um documento no Dreamweaver. Nesse modo, é
possível editar o documento na forma como ele será exibido na internet.
� Clique no botão Design.
5.3. Iniciando um arquivo HTML Para criar o layout do website, iremos utilizar o código HTML para criar os wireframes e uma formatação
baseada em CSS, para indicar os tamanhos e posições do wireframe, como visto no capítulo 1.
Para criar as divisões sem o uso de tabelas iremos utilizar a TAG <DIV>.
Webmaster Básico – Dreamweaver CS6
25
TAG <DIV>
A Tag <div> é utilizada para especificar uma divisão no documento HTML.
Na estrutura de wireframes desse arquivo, criaremos uma div principal, que irá conter todas as demais,
chamada de container. A div container terá 950 pixels de largura, e a altura fixada em 1000px.
� Dê um clique no botão “Código”.
� Digite entre as tags <body> e </body> a linha de comando indicado na imagem:
<div id="container">
Essa tag será fechada com a tag </div>, somente depois de inseridas as demais divs, que serão criadas
dentro deste container.
Vamos agora criar as demais divs.
� Digite o código abaixo no local indicado na imagem:
<div id="logotipo">Logotipo</div>
<div id="menu">Menu</div>
<div id="imagem">Imagem</div>
<div id="principal">Principal</div>
<div id="noticias">Noticias</div>
<div id="rodape">rodape</div>
</div>
Webmaster Básico – Dreamweaver CS6
26
Observe que tag da div container foi fechada no final do código:
� Dê um clique no botão “Design” para visualizar o layout da página.
Observe que os wireframes foram criados, mas a posição deles, bem como o tamanho, não foi definida:
Webmaster Básico – Dreamweaver CS6
27
Iremos definir a posição e o tamanho de cada wireframe, utilizando o código CSS. Esse assunto será
melhor explorado no próximo capítulo.
Agora, vamos salvar esse arquivo.
� Pressione o comando CTRL+S para salvar as alterações no arquivo “index.html”.
Webmaster Básico – Dreamweaver CS6
28
Capítulo 6: Iniciando estrutura de wireframes (CSS)
No capítulo anterior, indicamos, no código HTML, quais wireframes serão utilizados no layout. Neste
capítulo, iremos dar início ao código CSS, que irá indicar o tamanho e o posicionamento de cada
wireframe.
� Inicie o Adobe Dreamweaver CS6.
Vamos agora abrir o projeto salvo na unidade anterior.
� 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 agora criar o arquivo CSS, que irá indicar o tamanho e a posição de cada um dos wireframes
criados.
Webmaster Básico – Dreamweaver CS6
29
� Clique no menu Arquivo e, em seguida, clique sobre a opção “Novo...”.
� Clique na guia “Página em branco” e posteriormente clique sobre a opção “CSS” da coluna
“Topo de página”, como indicado na imagem:
� Dê um clique no botão “Criar”.
Observe que uma nova aba foi aberta para a edição do arquivo CSS:
Webmaster Básico – Dreamweaver CS6
30
Iremos agora criar um código CSS, que irá indicar uma cor para o fundo do site. Iremos utilizar essa cor
provisoriamente, pois futuramente essa cor será substituída por uma imagem.
� Digite o código abaixo no local indicado na figura:
body {
� Selecione a opção background-color:
Webmaster Básico – Dreamweaver CS6
31
Vamos agora selecionar a cor do fundo.
� Dê um clique no item “Cor...”.
Observe que uma janela de seleção de cor será aberta.
� Clique na cor Cinza (#CCC), indicada na imagem:
Imagem49.jpg
� Finalize a edição do atributo de cor de fundo, utilizando o ponto-e-vírgula (;) para indicar o final
de uma instrução, e feche o colchete, indicando o final da atribuição do seletor body:
Webmaster Básico – Dreamweaver CS6
32
Vamos agora salvar este arquivo e vincular o arquivo index.html a esse arquivo de estilos.
� Pressione o comando CTRL+S, para salvar esse arquivo.
Em seguida, vamos criar uma pasta com o nome de “CSS” dentro da pasta “site”.
� Clique no botão Criar nova pasta na janela “Salvar Como...”.
� Digite o nome “css” para esta nova pasta.
� Dê um clique duplo na pasta CSS para abri-la.
� Digite “estilos.css” na caixa “Nome:”
� Clique no botão Salvar.
Vamos agora vincular o arquivo “estilo.css” ao arquivo “index.html”.
� Clique na guia do arquivo “index.html”, para que seja exibido o seu conteúdo:
Webmaster Básico – Dreamweaver CS6
33
� Dê um clique na aba do painel Estilos CSS, para que seja exibido o seu conteúdo. (O painel
está posicionado do lado direito da tela).
� Dê um clique no botão “Anexar folha de estilos”, do painel Estilos CSS:
� Quando a nova janela for exibida, dê um clique no botão “Procurar”, para selecionarmos o
arquivo de estilo:
Webmaster Básico – Dreamweaver CS6
34
� Dê um clique duplo na pasta “css” para abri-la.
� Dê um clique no arquivo “estilos.css”, para selecioná-lo.
� Clique no botão “OK”.
� Certifique-se de que a opção “Link” esteja selecionada:
� Clique no botão “OK”.
Observe que a cor de fundo do site foi alterada.
Vamos agora visualizar o código que está vinculando o arquivo “estilos.css” ao arquivo “index.html”
� Dê um clique no botão “Código”.
Observe que uma nova linha de código, vinculando o arquivo “estilo.css”, foi inserida no código:
� Clique no botão “Design” para voltarmos à visualização do site.
Iremos agora criar o código para indicar o tamanho e as posições do wireframe “container”.
Webmaster Básico – Dreamweaver CS6
35
� Clique na guia do arquivo “estilo.css”, para que seja exibido o conteúdo dele.
Vamos criar uma classe com o nome de cada uma das divs indicando os seguintes atributos:
width:
Atributo utilizado para indicar a largura do wireframe.
Height:
Atributo utilizado para indicar a altura do wireframe.
z-index:
Atributo utilizado para indicar a posição do wireframe em relação aos outros wireframes no eixo Z,
indicando um valor para a sua posição. Veja a imagem abaixo como exemplo:
float:
Webmaster Básico – Dreamweaver CS6
36
Utilizado para posicionar o wireframe para esquerda (left) ou direita (right) em relação ao wireframe
“container”.
margin:
Atributo utilizado para indicar as margens do wireframe.
clear:
O atributo clear indica quais dos lados do wireframe não poderão ter outros elementos, como, por
exemplo, outro wireframe.
background-color:
Atributo utilizado para indicar a cor do fundo do wireframe.
Para iniciar o código, iremos criar uma classe de estilo com o nome de “container”, que indicará o
tamanho e a posição do wireframe com esse nome. As classes de estilo devem sempre se iniciar por um
ponto (.). Lembre que esse wireframe terá a largura de 960px por 1000px de altura.
Para que você possa identificar o wireframe container, vamos indicar também uma cor provisória para
ele.
� Digite o código abaixo no local indicado na imagem.
.container {
z-index: 1;
width: 960px;
height: 1000px;
background-color:#FFF;
}
Webmaster Básico – Dreamweaver CS6
37
� Utilize o comando CTRL+S para salvar as alterações no arquivo.
Vamos agora vincular esse estilo ao wireframe container.
� Clique na guia do arquivo “index.html”, para que seja exibido o seu conteúdo.
� Clique no botão “Código” para que seja exibido o código HTML do site.
A classe será vinculada ao wireframe através do atributo “class” dentro da tag div.
� Digite a linha de comando class=“container” no local indicado na imagem:
Webmaster Básico – Dreamweaver CS6
38
� Utilize o comando CTRL+S, para salvar as alterações no arquivo HTML;
� Pressione a tecla “F12”, para testar o funcionamento do código diretamente no browser
padrão;
Observe que o wireframe “container” será exibido, mas repare que está posicionado do lado
esquerdo do browser:
O alinhamento do wireframe é realizado através do atributo “margin”. Para centralizar um wireframe,
tanto a margem esquerda quanto a margem direita devem ser indicadas com valor “auto”.
� Feche a janela do Browser.
� Dê um clique na guia do arquivo “estilos.css”, para que seja exibido o seu conteúdo.
� Digite os comandos abaixo, definindo os atributos de margem esquerda e direita:
Webmaster Básico – Dreamweaver CS6
39
� Pressione o comando CTRL+S, para salvar as alterações.
� Clique na guia do arquivo “index.html”, para que seja exibido o seu conteúdo.
� Pressione a tecla “F12”, para testar o site.
Observe que agora o wireframe está centralizado no browser:
No próximo capítulo, iremos criar as demais classes utilizadas nos wireframes, que estão posicionados
dentro do wireframe “container”.
� Feche a janela do browser.
Webmaster Básico – Dreamweaver CS6
40
Capítulo 7: Finalizando estrutura de wireframes (CSS)
Neste capítulo, iremos finalizar o posicionamento da estrutura de wireframes do site.
� 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:
Webmaster Básico – Dreamweaver CS6
41
Observe que o arquivo “index.html” foi aberto.
Agora, vamos criar as classes CSS de cada um dos wireframes do site.
� Como o arquivo de estilos já está vinculado ao arquivo HTML, selecione-o clicando 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 agora criar as classes do wireframe “logotipo” e do wireframe “menu”. Lembre-se que já
sabemos os tamanhos que cada um desses wireframe deverá possuir e o seu posicionamento dentro do
wireframe “container”.
� Digite o código abaixo da classe “.container”:
.logotipo {
z-index: 2;
width: 220px;
height: 160px;
Webmaster Básico – Dreamweaver CS6
42
float:left;
}
Observe que no código acima indicamos o valor 2, para a propriedade “z-index”, e a posição esquerda
(left), pelo atributo float, para o wireframe.
Vamos agora criar a classe do wireframe “menu”.
� Digite o código abaixo:
.menu {
z-index:2;
width:740px;
height:160px;
float:right;
}
Observe que no atributo float foi indicada a posição right (direita).
Vamos agora criar a classe do wireframe “imagem”.
Webmaster Básico – Dreamweaver CS6
43
� Digite o código abaixo:
.imagem {
z-index:2;
width:960px;
height:265px;
clear:both;
}
Observe que nessa classe foi utilizado o atributo “clear:both”, para indicar que esse wireframe não
poderá ter wireframes a sua esquerda ou a direita. Desta forma, o wireframe “imagem” ficará
posicionado no local indicado, ou seja, abaixo dos wireframes “logotipo” e “menu”, conforme podemos
observar na imagem acima.
Agora vamos criar as classes dos wireframes “principal” e “noticias”.
� Digite o código abaixo:
.principal {
Webmaster Básico – Dreamweaver CS6
44
z-index:2;
width:625px;
height:465px;
float:left;
}
.noticias {
z-index:2;
width:335px;
height:465px;
float:right;
}
Para finalizar, vamos agora criar a classe do wireframe “rodape”.
� Digite o código abaixo:
.rodape {
z-index:2;
width:960px;
height:110px;
clear:both;
}
Vamos agora ao código HTML, para indicar as classes de cada um dos wireframes.
� Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML do site.
Webmaster Básico – Dreamweaver CS6
45
� Indique agora nas tags div cada uma das classes dos wireframes:
� Pressione o comando CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para visualizar o resultado. Observe que cada um dos wireframes está
posicionado em seu local definitivo:
Utilizando a barra de rolagem do browser, é possível visualizar o wireframe “rodapé”.
No próximo capítulo, iremos inserir os primeiros elementos gráficos do site em construção.
Webmaster Básico – Dreamweaver CS6
46
Capítulo 8: Inserindo mídias (Imagens/Animações em flash)
Neste capítulo, iremos inserir os primeiros elementos gráficos do projeto.
Os arquivos deste projeto estão disponíveis para download no link
http://www.cursos24horas.com.br/asp/cursos/videoaulas/site/arquivos.zip
� Realize o download do arquivo acima e o descompacte-o dentro da pasta sites (onde o arquivo
“index.html” está salvo).
Você irá observar que as pastas imgs e flash serão criadas. Em cada uma dessas pastas, estão os
arquivos que iremos utilizar no desenvolvimento deste projeto.
8.1. Inserindo uma imagem
Iremos inserir a imagem logotipo.png no wireframe “logotipo” e o arquivo “imagens.swf”, que é uma
animação feita no aplicativo Adobe Flash, no wireframe “imagem”.
� 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”.
Webmaster Básico – Dreamweaver CS6
47
� 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.
� Dê um clique no botão “Design”, para visualizar o site.
� Posicione o cursor no wireframe “logotipo” e apague o texto presente nele.
Com o texto excluído, vamos agora inserir a imagem.
� Dê um clique no menu Inserir:
Webmaster Básico – Dreamweaver CS6
48
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “logotipo.png”, para selecioná-lo.
� Clique no botão “OK”.
Observe que uma nova janela será exibida.
Webmaster Básico – Dreamweaver CS6
49
Nessa janela pode-se atribuir um texto alternativo para a imagem que será exibida. Esse texto será
exibido quando o ponteiro do mouse estiver posicionado sobre a imagem. O texto alternativo também é
utilizado para que programas de leitura de sites para portadores de deficiência visual consigam
“identificar” o conteúdo da imagem inserida e possam narrar para o deficiente visual o que está inserido
no site.
� Digite, na caixa de texto do item “Texto alternativo”, o texto “Brasil Agricultura”.
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
8.2. Inserindo uma animação em flash
Iremos agora inserir uma animação em flash. Costuma-se chamar de flash apenas os arquivos gerados
pelo aplicativo Adobe Flash. Esses arquivos possuem a extensão ".swf" e podem ser visualizados em
uma página web, usando um navegador que o suporta (geralmente com plug-in especial). Segundo a
Adobe, o plugin do Adobe Flash está instalado em mais de 90% dos Browsers. Os arquivos feitos em
Flash são muito utilizados para propaganda animada (banners) em páginas web, para diversos jogos e
Webmaster Básico – Dreamweaver CS6
50
para apresentações dos mais variados tipos. Nesse exemplo, iremos inserir um banner que irá realizar
uma transição em diversas imagens.
� Posicione o cursor no wireframe “Imagem” e apague o texto presente nele:
Com o texto excluído, vamos agora inserir a animação.
� Dê um clique no menu Inserir:
� Aponte o ponteiro do mouse sobre o item “Mídia” e clique na opção “SWF”:
� Dê um clique duplo na pasta “flash”, para abrir o seu conteúdo.
Webmaster Básico – Dreamweaver CS6
51
� Clique no arquivo “imagens.swf”, para selecioná-lo.
� Clique no botão “OK”.
Observe que uma nova janela será exibida.
Nessa janela, vamos atribuir um título para a animação que será inserida. Vamos chamá-la de
“imagens”.
� Dê um clique na caixa de texto do item “Título” e digite “imagens”, como indicado na imagem
abaixo:
� Clique no botão “OK”.
Observe que a animação flash foi inserida no wireframe:
Webmaster Básico – Dreamweaver CS6
52
Em seguida, vamos inserir uma imagem no wireframe “rodape”.
� Posicione o cursor no wireframe “rodape” e apague o texto presente nele.
Com o texto excluído, agora é o momento de inserir a imagem.
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
53
� Clique no arquivo “rodape.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 “Telefone para Contato (99) 9999-
9999”.
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
Webmaster Básico – Dreamweaver CS6
54
Agora, vamos salvar as alterações no site.
� Pressione o comando CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para visualizar o resultado.
Observe que agora o site já está tomando forma.
No próximo capítulo, iremos dar continuidade à edição do site.
Webmaster Básico – Dreamweaver CS6
55
Capítulo 9: Mídias (continuação)
Neste capítulo, iremos inserir as demais mídias, que serão exibidas na página inicial do site.
� Caso 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.
9.1. Imagem de fundo
Iremos trocar a cor de fundo do site por uma imagem. A imagem que será utilizada está salva dentro da
pasta “imgs”.
Webmaster Básico – Dreamweaver CS6
56
� 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 alterar o atributo background-color do seletor “body” para “background-image”, onde podemos
selecionar qual imagem será utilizada como fundo do site.
� Apague o atributo {background-color:#CCC;, deixando somente o seletor “body”.
� Digite novamente o colchete ( { ) e selecione o atributo background-imagem.
� Em seguida, dê um clique na opção “procurar”.
Webmaster Básico – Dreamweaver CS6
57
� Dê um clique duplo na pasta “imgs”.
� Dê um clique no arquivo “fundo.jpg”, para selecioná-lo.
� Clique no botão “OK”.
Vamos digitar o código que irá posicionar a imagem de fundo no centro do browser. Também vamos
digitar um código que irá indicar que esta imagem não deverá se repetir no fundo.
� Digite o código abaixo:
background-position:center;
background-repeat:no-repeat;
Webmaster Básico – Dreamweaver CS6
58
Vamos agora salvar as alterações no código e visualizar o resultado.
� 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 a imagem de fundo passou a ser exibida.
Depois, iremos substituir a cor branca do wireframe “container”, para que as partes em branco do site
fiquem transparentes:
� Feche o browser, clicando no botão fechar.
� No Dreamweaver, dê um clique sobre o arquivo “estilos.css”, como indicado na imagem abaixo:
Webmaster Básico – Dreamweaver CS6
59
� Selecione o atributo background-color:#FFF; da classe .container:
� Pressione a tecla “DELETE”, para excluir esta linha de código.
� 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 os wireframes ficaram “transparentes”:
Webmaster Básico – Dreamweaver CS6
60
Agora, vamos inserir as imagens que serão utilizadas como título no wireframe “Principal” e no
wireframe “Notícias”.
� Feche o browser, clicando no botão fechar.
� No Dreamweaver, dê um clique no botão “Design”, para visualizar o layout do site:
� Posicione o cursor no wireframe “Principal” e apague o texto presente nele.
Com o texto excluído, insira a imagem.
Dê um clique no menu Inserir:
Webmaster Básico – Dreamweaver CS6
61
� Selecione a opção “Imagem”.
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “titulo_principal.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 “Tecnologia de ponta”.
Webmaster Básico – Dreamweaver CS6
62
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
Vamos agora inserir a imagem que será utilizada no wireframe “Notícias”.
� Posicione o cursor no wireframe “Notícias” e apague o texto presente nele.
Com o texto excluído, insira a imagem.
Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
Webmaster Básico – Dreamweaver CS6
63
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “titulo_noticias.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 “Notícias”.
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
Em seguida, salve as alterações no arquivo.
� Pressione o comando CTRL+S.
Webmaster Básico – Dreamweaver CS6
64
Capítulo 10: Posicionando imagens e textos
Neste capítulo, daremos continuidade ao layout do site.
Se você observar o layout do website que estamos construindo, verá que no wireframe “Principal”
haverá imagens e textos:
Webmaster Básico – Dreamweaver CS6
65
Observe que a imagem está posicionada à esquerda do wireframe, enquanto o texto está posicionado à
direita da imagem. Para que este alinhamento ocorra, iremos criar duas classes no código CSS, uma para
imagem, onde indicaremos a sua posição em relação ao texto, e outra para o texto, no qual indicaremos
a sua posição e também a sua formatação, como tipo da fonte, tamanho, cor etc.
� 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.
� Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem abaixo:
Webmaster Básico – Dreamweaver CS6
66
� 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”, para criar uma nova linha.
Vamos agora criar uma classe com o nome de “.imgs”, para indicar as posições das imagens no
wireframe.
� Digite o código abaixo:
.imgs {
float:left;
margin-right:4px;
}
Webmaster Básico – Dreamweaver CS6
67
No código CSS acima, indicamos que as imagens que indicarem essa classe (ver .imgs na figura acima)
estarão posicionadas à esquerda do texto com uma margem de 4px de distância do lado direito.
Em seguida, crie a classe do texto.
� Pressione a tecla ENTER e digite o código abaixo:
.texto {
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
color:#000;
text-align:justify;
}
Webmaster Básico – Dreamweaver CS6
68
No código acima, indicamos que o texto que possuir essa classe terá a fonte “Tahoma”. Também
indicamos que, caso o computador utilizado não tenha a fonte Tahoma, será utilizada a fonte “Geneva”,
e assim por diante.
A fonte utilizada terá o tamanho de 13px na cor preta (#000). e o alinhamento do parágrafo será
justificado.
Com as classes criadas, agora será inserida a imagem e o texto.
� Pressione o comando CTRL+S, para salvar as alterações no código.
� Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML do site.
� Dê um clique no botão “Design”, para visualizar o layout do site:
Iremos inserir uma nova imagem, abaixo da imagem “Tecnologia de ponta”. Desta forma, devemos
posicionar o cursor abaixo da mesma.
� Clique sobre a imagem indicada abaixo para selecioná-la:
Webmaster Básico – Dreamweaver CS6
69
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado à direita da
imagem.
� Para criar uma quebra de linha, pressione o comando SHIFT+ENTER, para que a imagem seja
inserida abaixo da já existente.
Vamos agora inserir a imagem que será utilizada.
� 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 “milho.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 “Milho”.
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
Webmaster Básico – Dreamweaver CS6
70
Vamos agora selecionar a classe CSS, que será utiliza nesta imagem.
� Na barra de Propriedades, dê um clique na guia de seleção do item “Classe”.
� Selecione a classe “imgs”.
Digite o texto que ficará ao lado direito da imagem.
� Dê um clique do lado direito da imagem, para posicionar o cursor:
Webmaster Básico – Dreamweaver CS6
71
� Digite o texto abaixo:
“O milho (Zea mays), também chamado abati, auati e avati, é um conhecido cereal, cultivado em grande
parte do mundo. O milho é extensivamente utilizado como alimento humano ou ração animal, devido às
suas qualidades nutricionais. Todas as evidências científicas levam a crer que seja uma planta de origem
americana, já que aí era cultivada desde o período pré-colombiano.” (fonte:
http://pt.wikipedia.org/wiki/Milho)
Selecione o texto digitado, para que possamos aplicar a classe “CSS”.
� Selecione todo o texto digitado:
� Na barra de Propriedades, clique no botão “CSS”:
Webmaster Básico – Dreamweaver CS6
72
� Dê um clique na guia de seleção do item “Regra-alvo”:
� Selecione a classe “texto”:
Observe que a formatação foi aplicada.
Vamos agora inserir uma imagem abaixo deste texto, que futuramente será utilizada como link.
� Dê um clique no final do texto digitado para posicionar o cursor:
� Pressione o comando SHIFT+ENTER para criar uma quebra de linha.
Vamos agora inserir a imagem.
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
Webmaster Básico – Dreamweaver CS6
73
� Dê um clique duplo na pasta “imgs” para abrir o seu conteúdo.
� Clique no arquivo “leia_mais.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 “Leia Mais”.
� Clique no botão “OK”.
Observe que a imagem foi inserida abaixo do texto.
Vamos repetir esse processo com outra imagem e outro parágrafo de texto.
� Dê um clique do lado direito da imagem “Leia Mais”, para posicionar o cursor:
Webmaster Básico – Dreamweaver CS6
74
� Utilize o comando SHIFT+ENTER três vezes, para que sejam criadas 3 quebras de linhas.
Vamos agora inserir a imagem.
� 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 “laranja.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 “Laranja”.
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
Webmaster Básico – Dreamweaver CS6
75
Vamos agora selecionar a classe “CSS”, que será utiliza nessa imagem.
� Na barra de Propriedades dê um clique na guia de seleção do item “Classe”.
� Selecione a classe “imgs”.
Vamos agora digitar o texto que ficará ao lado direito da imagem.
� Dê um clique do lado direito da imagem para posicionar o cursor:
� Digite o texto abaixo:
A laranja é o fruto produzido pela laranjeira (Citrus x sinensis), uma árvore da família Rutaceae. A laranja
é um fruto híbrido, criado na antiguidade a partir do cruzamento do pomelo com a tangerina. O sabor
Webmaster Básico – Dreamweaver CS6
76
da laranja varia do doce ao levemente ácido. Frequentemente, esta fruta é descascada e comida ao
natural, ou espremida para obter sumo.
Vamos agora selecionar o texto digitado para que possamos aplicar a classe “CSS”.
� Selecione todo o texto digitado.
� 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”:
Observe que a formatação foi aplicada.
Vamos agora inserir uma imagem abaixo deste texto que futuramente será utilizada como link.
� Dê um clique no final do texto digitado para posicionar o cursor:
Webmaster Básico – Dreamweaver CS6
77
� Pressione o comando SHIFT+ENTER para criar uma quebra de linha.
Vamos agora inserir a imagem.
� 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 “leia_mais.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 “Leia Mais”.
� Clique no botão “OK”.
Observe que a imagem foi inserida abaixo do texto.
Webmaster Básico – Dreamweaver CS6
78
Vamos agora salvar as alterações no site.
� Pressione o comando CTRL+S.
� Pressione a tecla “F12”, para testar o site diretamente no Browser.
Observe que o conteúdo do wireframe ficou muito junto da imagem “Tecnologia de ponta”. Vamos
resolver este problema adicionando algumas quebras de linhas após a imagem.
� Dê um clique no botão “Fechar” do browser.
� Clique sobre a imagem indicada abaixo para selecioná-la:
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado à direita da
imagem.
� Pressione o comando SHIFT+ENTER, para criar uma nova quebra de linha. Adicione mais uma
quebra de linha para aumentar o espaço.
� Pressione o comando CTRL+S, para salvar as alterações.
� Pressione a tecla “F12”, para testar o site diretamente no Browser.
Webmaster Básico – Dreamweaver CS6
79
Capítulo 11: Finalizando o wireframe “Notícias”
Neste capítulo, iremos o conteúdo do wireframe “Noticias”.
Se você observar o layout do website que estamos construindo, verá que no wireframe “Noticias”
haverá imagens e textos, como no wireframe “Principal”, que editamos no capítulo anterior:
Iremos utilizar as classes “CSS” já criadas, para alinhar a imagem e formatar o texto desse wireframe.
� 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
80
Observe que o arquivo “index.html” foi aberto.
� Dê um clique no botão “Design”, para visualizar o layout do site:
Iremos inserir uma nova imagem abaixo da imagem “Notícias”. Sendo assim, devemos posicionar o
cursor abaixo dela.
� Clique sobre a imagem indicada abaixo para selecioná-la:
� Pressione a seta para direita do teclado (�), para que o cursor fique posicionado a direita da
imagem.
� Pressione o comando SHIFT+ENTER, para criar uma quebra de linha.
� Pressione esse mesmo comando (SHIFT+ENTER) mais 2 vezes, para criar mais 2 quebras de
linhas.
Vamos agora inserir a imagem que será utilizada.
� Dê um clique no menu Inserir:
� Selecione a opção “Imagem”.
Webmaster Básico – Dreamweaver CS6
81
� Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
� Clique no arquivo “dia_29_mar.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 “Dia 29 de Março”.
� Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:
Vamos agora selecionar a classe “CSS” que será utiliza nesta imagem.
� Na barra de Propriedades dê um clique na guia de seleção do item “Classe”.
Webmaster Básico – Dreamweaver CS6
82
� Selecione a classe “imgs”.
Digite o texto que ficará ao lado direito da imagem.
� Dê um clique do lado direito da imagem, para posicionar o cursor:
� Digite o texto abaixo:
“Pesquisa com café contribui para a sustentabilidade da produção”
Agora selecione o texto digitado para que possamos aplicar a classe “CSS”.
� Selecione todo o texto digitado:
Webmaster Básico – Dreamweaver CS6
83
� 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”:
Utilizando esse mesmo processo, insira as imagens “dia_28_mar.png” e “dia_27_mar.png” e os textos
indicados abaixo:
Webmaster Básico – Dreamweaver CS6
84
� Pressione o comando CTRL+S.
� Pressione a tecla “F12” para testar o site diretamente no Browser.
No próximo capítulo iremos criar o menu que estará posicionado no wireframe “Menu”.