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:


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:


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:


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.


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.


6

Iremos, portanto, distribuir a altura e a largura dos wireframes dentro dessa resolução, veja como:


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>.


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.


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)”.


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):


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”.


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:


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.


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”:


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.


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”.


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.


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.


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”.


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...”.


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.


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:


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


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>.


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>


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:


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”.


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.


Vamos agora abrir o projeto salvo na unidade anterior.




� No painel Arquivos, dê um clique duplo sobre o arquivo “index.html”, como indicado na figura abaixo:


Vamos agora criar o arquivo CSS, que irá indicar o tamanho e a posição de cada um dos wireframes

criados.


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:


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:


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:


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:


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:


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:


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”.


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:


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;

}


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:


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:


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.


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.






41


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;


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”.


43


.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”.


.principal {


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”.


.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.


45

� Indique agora nas tags div cada uma das classes dos wireframes:


� 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.


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”.





47




� 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:


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.


Observe que uma nova janela será exibida.


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”.


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


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.


� 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.


51

� Clique no arquivo “imagens.swf”, para selecioná-lo.



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:


Observe que a animação flash foi inserida no wireframe:


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:




53

� Clique no arquivo “rodape.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Telefone para Contato (99) 9999-

9999”.




54

Agora, vamos salvar as alterações no site.


� 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.


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.






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”.


56

� Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem abaixo:


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”.


57

� Dê um clique duplo na pasta “imgs”.

� Dê um clique no arquivo “fundo.jpg”, para selecioná-lo.


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.


background-position:center;

background-repeat:no-repeat;


58

Vamos agora salvar as alterações no código e visualizar o resultado.



� 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:


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.


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

Observe que os wireframes ficaram “transparentes”:


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.



61



� Clique no arquivo “titulo_principal.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Tecnologia de ponta”.


62



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.




63


� Clique no arquivo “titulo_noticias.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Notícias”.



Em seguida, salve as alterações no arquivo.

� Pressione o comando CTRL+S.


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:


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.







� Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem abaixo:


66


� 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.


.imgs {

float:left;

margin-right:4px;

}


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;

}


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 “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:


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.




� Clique no arquivo “milho.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo,” o texto “Milho”.




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:


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”:


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.




73

� Dê um clique duplo na pasta “imgs” para abrir o seu conteúdo.

� Clique no arquivo “leia_mais.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Leia Mais”.


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:


74

� Utilize o comando SHIFT+ENTER três vezes, para que sejam criadas 3 quebras de linhas.





� Clique no arquivo “laranja.png” para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Laranja”.




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”.


Vamos agora digitar o texto que ficará ao lado direito da imagem.

� Dê um clique do lado direito da imagem para posicionar o cursor:


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


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:



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:


77

� Pressione o comando SHIFT+ENTER para criar uma quebra de linha.





� Clique no arquivo “leia_mais.png”, para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Leia Mais”.


Observe que a imagem foi inserida abaixo do texto.


78

Vamos agora salvar as alterações no site.


� 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.


� 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 a tecla “F12”, para testar o site diretamente no Browser.


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.





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


80


� 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.


� 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.




81


� Clique no arquivo “dia_29_mar.png” para selecioná-lo.



� Digite, na caixa de texto do item “Texto alternativo”, o texto “Dia 29 de Março”.



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”.


82


Digite o texto que ficará ao lado direito da imagem.

� Dê um clique do lado direito da imagem, para posicionar o cursor:


“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:


83

� Na barra de Propriedades, clique no botão “CSS”:



Utilizando esse mesmo processo, insira as imagens “dia_28_mar.png” e “dia_27_mar.png” e os textos

indicados abaixo:


84


� 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”.

apostila web master - 1º. modulo

Documents