Você está na página 1de 84

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Curso de Webmaster– Dreamweaver CS6 Capítulo 1: Introdução ao desenvolvimento

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:

1
1

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Nesse layout, observe que está indicada a localização dos principais componentes

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 ser desenhado à mão livre como o exemplo abaixo: Pode-se criar o layout de todas

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:

2
2

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 No entanto, para que sejam criados todos os layouts do site,
Webmaster Básico – Dreamweaver CS6 No entanto, para que sejam criados todos os layouts do site,

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:

3
3

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Essa será a forma que o usuário navegará pelo site. Agora,
Webmaster Básico – Dreamweaver CS6 Essa será a forma que o usuário navegará pelo site. Agora,

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.

4
4

Webmaster Básico – Dreamweaver CS6

Capítulo 2: Estrutura de Wireframes

– Dreamweaver CS6 Capítulo 2: Estrutura de Wireframes A estrutura do site, também conhecida como 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:

anterior, a, esturura do website ficará da seguinte forma: Observe que em cada uma das caixas

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.

5
5

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Iremos, portanto, distribuir a altura e a largura dos wireframes dentro
Webmaster Básico – Dreamweaver CS6 Iremos, portanto, distribuir a altura e a largura dos wireframes dentro

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

6
6

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 As medidas indicadas na imagem indicam primeiro a largura e posteriormente
Webmaster Básico – Dreamweaver CS6 As medidas indicadas na imagem indicam primeiro a largura e posteriormente

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

7
7

Webmaster Básico – Dreamweaver CS6

CSS

Webmaster Básico – Dreamweaver CS6 CSS As folhas de estilo CSS servem para promover o acabamento

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.

8
8

Webmaster Básico – Dreamweaver CS6

Capítulo 3: Introdução ao Dreamweaver CS6

Dreamweaver CS6 Capítulo 3: Introdução ao Dreamweaver CS6 O Adobe Dreamweaver é um software de desenvolvimento

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

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Na barra de endereços no browser digite a URL www.adobe.com.br e
Webmaster Básico – Dreamweaver CS6 Na barra de endereços no browser digite a URL www.adobe.com.br e

Na barra de endereços no browser digite a URL www.adobe.com.br e pressione a tecla ENTER.

digite a URL www.adobe.com.br e pressione a tecla ENTER. No site da Adobe selecione o link

No site da Adobe selecione o link “Mais produtos” do botão “Produtos”:

o link “Mais produtos” do botão “Produtos”: Até o lançamento deste curso, a versão em português

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

10
10

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Selecione o idioma “Português”. Dê um clique no botão “Faça download
Webmaster Básico – Dreamweaver CS6 Selecione o idioma “Português”. Dê um clique no botão “Faça download

Selecione o idioma “Português”.

– Dreamweaver CS6 Selecione o idioma “Português”. Dê um clique no botão “Faça download agora”. Observe
Dê um clique no botão “Faça download agora”. Observe que será exibida uma mensagem de
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”.
confirmação de download. Clique no botão “Executar”. Aguarde a janela do assistente de download ser exibida.

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

11
11

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Para realizar o download de qualquer programa da Adobe, é necessário
Webmaster Básico – Dreamweaver CS6 Para realizar o download de qualquer programa da Adobe, é necessário

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

conta dê um clique no botão “Criar uma ID da adobe”. Obs. : Caso você já

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:

12
12

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Após você preencher os dados, dê um clique no botão “Criar”.
Webmaster Básico – Dreamweaver CS6 Após você preencher os dados, dê um clique no botão “Criar”.

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.

Selecione a pasta “Área de Trabalho” e clique no botão OK. Aguarde o processo de download

Aguarde o processo de download ser realizado.

13
13

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Após o término do download, os arquivos serão descompactados e a
Webmaster Básico – Dreamweaver CS6 Após o término do download, os arquivos serão descompactados e a

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:

local onde os arquivos de instalação foram descompactados: Quando a janela de boas-vindas da instalação for

Quando a janela de boas-vindas da instalação for exibida, selecione a opção “Avaliar”:

14
14

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Um “Contrato de utilização” será exibido. Clique no botão “Aceitar” para
Webmaster Básico – Dreamweaver CS6 Um “Contrato de utilização” será exibido. Clique no botão “Aceitar” para

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.

selecionamos apenas o software Adobe Dreamweaver CS6. Clique no botão Instalar e aguarde o final da

Clique no botão Instalar e aguarde o final da instalação.

15
15

Webmaster Básico – Dreamweaver CS6

Capítulo 4: Iniciando o Dreamweaver CS6

– Dreamweaver CS6 Capítulo 4: Iniciando o Dreamweaver CS6 Com o programa instalado, vamos agora executá-lo

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

em seguida, clique na opção “Adobe Dreamweaver CS6”. 4.1. Criando um novo arquivo Ao abrir o

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

Arquivo e, em seguida, clique sobre a opção “Novo”: Clique sobre o botão “Página em branco”

Clique sobre o botão “Página em branco” e selecione HTML, na coluna “Tipo da página”, e <nenhum(a)>, na coluna “Layout”.

16
16

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique no botão “Criar”. Observe que a área de trabalho do
Webmaster Básico – Dreamweaver CS6 Clique no botão “Criar”. Observe que a área de trabalho do

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.

dar acesso rápido a outros aplicativos e outros controles. Barra de Ferramentas documento Logo abaixo da

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.

do arquivo e outras operações comuns em um documento. Painéis Os painéis do Dreamweaver são utilizados

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.

17
17

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Barra de Propriedades A barra de Propriedades exibe as opções da
Webmaster Básico – Dreamweaver CS6 Barra de Propriedades A barra de Propriedades exibe as opções da

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.

da ferramenta de edição que está ativa no momento. Agora que já conhecemos os principais elementos

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

sobre o menu Site e selecione a opção “Novo Site”: Observe que uma nova janela será

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.

18
18

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique na caixa do item Nome do site e digite “Brasil

Clique na caixa do item Nome do site e digite “Brasil Agricultura”:

do item Nome do site e digite “Brasil Agricultura”: Agora, vamos indicar a pasta onde serão

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
Dê um clique no botão “Bibliotecas” na janela que será exibida.
Dê um clique duplo na pasta “Documentos”.
19

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Vamos agora criar uma nova pasta com o nome de “Site”.
Webmaster Básico – Dreamweaver CS6 Vamos agora criar uma nova pasta com o nome de “Site”.

Vamos agora criar uma nova pasta com o nome de “Site”.

Dê um clique no botão “Criar nova pasta”.

“Site”. Dê um clique no botão “Criar nova pasta”. Quando for exibida a nova pasta, digite
Quando for exibida a nova pasta, digite o nome “Site” e pressione a tecla ENTER.
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

20
20

”.

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Observe que a janela “Salvar” foi aberta já indicando a pasta
Webmaster Básico – Dreamweaver CS6 Observe que a janela “Salvar” foi aberta já indicando a pasta

Observe que a janela “Salvar” foi aberta já indicando a pasta de trabalho “Site”:

foi aberta já indicando a pasta de trabalho “Site”: Clique na caixa do item Nome e

Clique na caixa do item Nome e digite “index”.

Clique na caixa do item Nome e digite “index”. Obs.: é importante que a primeira página

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.

21
21

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Capítulo 5: Criando o Layout das páginas do Website Vamos desenvolver

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

”.

o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil Agricultura”. Clique

Clique no site “Brasil Agricultura”.

sites ”. Clique no site “Brasil Agricultura”. Clique no botão “Concluído”. No painel Arquivos,

Clique no botão “Concluído”.

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

22
22

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Observe que o arquivo “ index.html ” foi aberto. 5.2. Modos
Webmaster Básico – Dreamweaver CS6 Observe que o arquivo “ index.html ” foi aberto. 5.2. Modos

Observe que o arquivo “index.html” foi aberto.

CS6 Observe que o arquivo “ index.html ” foi aberto. 5.2. Modos de visualização de um

5.2. Modos de visualização de um documento

Na

documento:

barra

de

Modo Código

ferramentas

do

documento,

existem

quatro

botões

de

Modos

de

visualização

do

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

23
23

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Pelo Modo Dinâmica, é possível visualizar atualizações por meio de banco

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.

e posições do wireframe, como visto no capítulo 1. Para criar as divisões sem o uso

Para criar as divisões sem o uso de tabelas iremos utilizar a TAG <DIV>.

24
24

Webmaster Básico – Dreamweaver CS6

TAG <DIV>

Webmaster Básico – Dreamweaver CS6 TAG <DIV> A Tag <div> é utilizada para especificar uma divisão

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

fixada em 1000px. Dê um clique no botão “Código”. Digite entre as tags <body> e </body>

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>

25
25

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Observe que tag da div container foi fechada no final do
Webmaster Básico – Dreamweaver CS6 Observe que tag da div container foi fechada no final do

Observe que tag da div container foi fechada no final do código:

que tag da div container foi fechada no final do código: Dê um clique no botão

Dê um clique no botão “Design” para visualizar o layout da página.

no botão “Design” para visualizar o layout da página. Observe que os wireframes foram criados, mas

Observe que os wireframes foram criados, mas a posição deles, bem como o tamanho, não foi definida:

26
26

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Iremos definir a posição e o tamanho de cada wireframe, utilizando
Webmaster Básico – Dreamweaver CS6 Iremos definir a posição e o tamanho de cada wireframe, utilizando

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

27
27

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Capítulo 6: Iniciando estrutura de wireframes (CSS) No capítulo anterior,

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

”.

o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil Agricultura”. Clique

Clique no site “Brasil Agricultura”.

sites ”. Clique no site “Brasil Agricultura”. Clique no botão “Concluído”. No painel Arquivos,

Clique no botão “Concluído”.

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

arquivo “ index.html” , como indicado na figura abaixo: Observe que o arquivo “ index.html ”

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.

28
28

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique no menu Arquivo e, em seguida, clique sobre a opção

Clique no menu Arquivo e, em seguida, clique sobre a opção “Novo

”.

Arquivo e, em seguida, clique sobre a opção “Novo ”. Clique na guia “Página em branco”

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:

da coluna “Topo de página”, como indicado na imagem: Dê um clique no botão “Criar”. Observe

Dê um clique no botão “Criar”.

Observe que uma nova aba foi aberta para a edição do arquivo CSS:

29
29

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Iremos agora criar um código CSS, que irá indicar uma cor
Webmaster Básico – Dreamweaver CS6 Iremos agora criar um código CSS, que irá indicar uma cor

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.

body {

Digite o código abaixo no local indicado na figura:

por uma imagem. body { Digite o código abaixo no local indicado na figura: Selecione a

Selecione a opção background-color:

30
30

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Vamos agora selecionar a cor do fundo. Dê um clique no
Webmaster Básico – Dreamweaver CS6 Vamos agora selecionar a cor do fundo. Dê um clique no

Vamos agora selecionar a cor do fundo.

Dê um clique no item “Cor

”.

selecionar a cor do fundo. Dê um clique no item “Cor ”. Observe que uma janela

Observe que uma janela de seleção de cor será aberta.

Clique na cor Cinza (#CCC), indicada na imagem:

aberta. Clique na cor Cinza (#CCC), indicada na imagem: Imagem49.jpg Finalize a edição do atributo de

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:

31
31

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Vamos agora salvar este arquivo e vincular o arquivo index.html a
Webmaster Básico – Dreamweaver CS6 Vamos agora salvar este arquivo e vincular o arquivo index.html a

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

”.

no botão Criar nova pasta na janela “Salvar Como ”. Digite o nome “css” para esta

Digite o nome “css” para esta nova pasta.

Como ”. Digite o nome “css” para esta nova pasta. Dê um clique duplo na pasta

Dê um clique duplo na pasta CSS para abri-la.

Digite “estilos.css” na caixa “Nome:”

abri-la. Digite “estilos.css” na caixa “Nome:” Clique no botão Salvar. Vamos agora vincular o arquivo “

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:

32
32

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique na aba do painel Estilos CSS, para que
Webmaster Básico – Dreamweaver CS6 Dê um clique na aba do painel Estilos CSS, para que
Dê um clique na aba do painel Estilos CSS, para que seja exibido o seu
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:
33

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “css” para abri-la. Dê um
Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “css” para abri-la. Dê um

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:

de que a opção “Link” esteja selecionada: Clique no botão “OK”. Observe que a cor de

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

“index.html” Dê um clique no botão “Código”. Observe que uma nova linha de código, vinculando o

Observe que uma nova linha de código, vinculando o arquivo “estilo.css”, foi inserida no código:

o arquivo “ estilo.css ”, foi inserida no código: Clique no botão “Design” para voltarmos à

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

34
34

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique na guia do arquivo “ estilo.css ”, para que seja

Clique na guia do arquivo “estilo.css”, para que seja exibido o conteúdo dele.

“ estilo.css ”, para que seja exibido o conteúdo dele. Vamos criar uma classe com o

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:

35
35

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Utilizado para posicionar o wireframe para esquerda (left) ou direita (right)

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;

}

36
36

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Utilize o comando CTRL+S para salvar as alterações no arquivo. Vamos
Webmaster Básico – Dreamweaver CS6 Utilize o comando CTRL+S para salvar as alterações no arquivo. Vamos

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.

“ index.html ”, para que seja exibido o seu conteúdo. Clique no botão “Código” para que

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:

37
37

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Pressione a tecla “F12”, para testar o funcionamento do código diretamente
Webmaster Básico – Dreamweaver CS6 Pressione a tecla “F12”, para testar o funcionamento do código diretamente

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:

Utilize o comando CTRL+S, para salvar as alterações no arquivo HTML;

comando CTRL+S, para salvar as alterações no arquivo HTML; O alinhamento do wireframe é realizado através

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:

38
38

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Pressione o comando CTRL+S, para salvar as alterações. Clique na guia
Webmaster Básico – Dreamweaver CS6 Pressione o comando CTRL+S, para salvar as alterações. Clique na guia

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:

Observe que agora o wireframe está centralizado no browser: No próximo capítulo, iremos criar as demais

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.

39
39

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Capítulo 7: Finalizando estrutura de wireframes (CSS) Neste capítulo, iremos

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

”.

o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil Agricultura”. Clique

Clique no site “Brasil Agricultura”.

sites ”. Clique no site “Brasil Agricultura”. Clique no botão “Concluído”. No painel Arquivos,

Clique no botão “Concluído”.

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

40
40

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Observe que o arquivo “ index.html ” foi aberto. Agora, vamos
Webmaster Básico – Dreamweaver CS6 Observe que o arquivo “ index.html ” foi aberto. Agora, vamos

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

e o seu posicionamento dentro do wireframe “container”. Digite o código abaixo da classe “.container”:

Digite o código abaixo da classe “.container”:

.logotipo {

z-index: 2;

width: 220px;

height: 160px;

41
41

Webmaster Básico – Dreamweaver CS6

}

float:left;

Webmaster Básico – Dreamweaver CS6 } float:left; Observe que no código acima indicamos o valor 2,
Webmaster Básico – Dreamweaver CS6 } float:left; Observe que no código acima indicamos o valor 2,

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

42
42

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Digite o código abaixo: .imagem { z-index:2; width:960px; height:265px; }
Webmaster Básico – Dreamweaver CS6 Digite o código abaixo: .imagem { z-index:2; width:960px; height:265px; }

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

Agora vamos criar as classes dos wireframes “principal” e “noticias”. Digite o código abaixo: .principal {

Digite o código abaixo:

.principal {

43
43

Webmaster Básico – Dreamweaver CS6

z-index:2;

width:625px;

height:465px;

}

float:left;

.noticias {

z-index:2;

width:335px;

height:465px;

}

float:right;

{ z-index:2; width:335px; height:465px; } float:right; Para finalizar, vamos agora criar a classe do wireframe

Para finalizar, vamos agora criar a classe do wireframe “rodape”.

vamos agora criar a classe do wireframe “rodape”. Digite o código abaixo: .rodape { z-index:2; width:960px;

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.

44
44

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Indique agora nas tags div cada uma das classes dos wireframes:
Webmaster Básico – Dreamweaver CS6 Indique agora nas tags div cada uma das classes dos wireframes:

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

agora nas tags div cada uma das classes dos wireframes: Pressione o comando CTRL+S, para salvar

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:

um dos wireframes está posicionado em seu local definitivo: Utilizando a barra de rolagem do browser,

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.

45
45

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Capítulo 8: Inserindo mídias (Imagens/Animações em flash) Neste capítulo,

Capítulo 8: Inserindo mídias (Imagens/Animações em flash)

Neste capítulo, iremos inserir os primeiros elementos gráficos do projeto.

Os

http://www.cursos24horas.com.br/asp/cursos/videoaulas/site/arquivos.zip

arquivos

deste

projeto

estão

disponíveis

para

download

no

link

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.

que iremos utilizar no desenvolvimento deste projeto. 8.1. Inserindo uma imagem Iremos inserir a imagem

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 sobre o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil

Clique no site “Brasil Agricultura”.

46
46

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique no botão “Concluído”. No painel Arquivos, dê um clique duplo
Webmaster Básico – Dreamweaver CS6 Clique no botão “Concluído”. No painel Arquivos, dê um clique duplo

Clique no botão “Concluído”.

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

arquivo “ index.html” , como indicado na figura abaixo: Observe que o arquivo “ index.html ”

Observe que o arquivo “index.html” foi aberto.

Dê um clique no botão “Design”, para visualizar o site. Posicione o cursor no wireframe
Dê um clique no botão “Design”, para visualizar o site.
Posicione o cursor no wireframe “logotipo” e apague o texto presente nele.
no wireframe “logotipo” e apague o texto presente nele. Com o texto excluído, vamos agora inserir

Com o texto excluído, vamos agora inserir a imagem.

Dê um clique no menu Inserir:

47
47

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Selecione a opção “Imagem”. Dê um clique duplo na pasta “imgs”,
Webmaster Básico – Dreamweaver CS6 Selecione a opção “Imagem”. Dê um clique duplo na pasta “imgs”,
Selecione a opção “Imagem”. Dê um clique duplo na pasta “imgs”, para abrir o seu
Selecione a opção “Imagem”.
Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ logotipo.png ”, para

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

Clique no botão “OK”.

Observe que uma nova janela será exibida.

48
48

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Nessa janela pode-se atribuir um texto alternativo para a imagem que
Webmaster Básico – Dreamweaver CS6 Nessa janela pode-se atribuir um texto alternativo para a imagem que

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

“Texto alternativo”, o texto “Brasil Agricultura”. Clique no botão “OK”. Observe que a imagem foi inserida

Clique no botão “OK”.

Observe que a imagem foi inserida no wireframe:

“OK”. Observe que a imagem foi inserida no wireframe: 8.2. Inserindo uma animação em flash Iremos

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

49
49

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 para apresentações dos mais variados tipos. Nesse exemplo, iremos inserir um

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:

no wireframe “Imagem” e apague o texto presente nele: Com o texto excluído, vamos agora inserir

Com o texto excluído, vamos agora inserir a animação.

Dê um clique no menu Inserir:

agora inserir a animação. Dê um clique no menu Inserir: Aponte o ponteiro do mouse sobre

Aponte o ponteiro do mouse sobre o item “Mídia” e clique na opção “SWF”:

sobre o item “Mídia” e clique na opção “SWF”: Dê um clique duplo na pasta “flash”,

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

50
50

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique no arquivo “ imagens.swf ”, para selecioná-lo. Clique no botão
Webmaster Básico – Dreamweaver CS6 Clique no arquivo “ imagens.swf ”, para selecioná-lo. Clique no botão

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

Clique no botão “OK”.

Observe que uma nova janela será exibida.

botão “OK”. Observe que uma nova janela será exibida. Nessa janela, vamos atribuir um título para

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:

e digite “imagens”, como indicado na imagem abaixo: Clique no botão “OK”. Observe que a animação

Clique no botão “OK”.

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

51
51

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Em seguida, vamos inserir uma imagem no wireframe “rodape”. Posicione o
Webmaster Básico – Dreamweaver CS6 Em seguida, vamos inserir uma imagem no wireframe “rodape”. Posicione o

Em seguida, vamos inserir uma imagem no wireframe “rodape”.

Posicione o cursor no wireframe “rodape” e apague o texto presente nele.

no wireframe “rodape” e apague o texto presente nele. Com o texto excluído, agora é o

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
Selecione a opção “Imagem”.
Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
52

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique no arquivo “ rodape.png ”, para selecioná-lo. Clique no botão
Webmaster Básico – Dreamweaver CS6 Clique no arquivo “ rodape.png ”, para selecioná-lo. Clique no botão

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

Clique no botão “OK”.

Observe que uma nova janela será exibida.

botão “OK”. Observe que uma nova janela será exibida. Digite, na caixa de texto do item

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

9999”.

o texto “Telefone para Contato (99) 9999- 9999”. Clique no botão “OK”. Observe que a imagem

Clique no botão “OK”.

Observe que a imagem foi inserida no wireframe:

53
53

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6
Webmaster Básico – Dreamweaver CS6

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.

54
54

Webmaster Básico – Dreamweaver CS6

Capítulo 9: Mídias (continuação)

– Dreamweaver CS6 Capítulo 9: Mídias (continuação) Neste capítulo, iremos inserir as demais mídias, que

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

”.

o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil Agricultura”. Clique

Clique no site “Brasil Agricultura”.

sites ”. Clique no site “Brasil Agricultura”. Clique no botão “Concluído”. No painel Arquivos,

Clique no botão “Concluído”.

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

arquivo “ index.html” , como indicado na figura abaixo: Observe que o arquivo “ index.html ”

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

55
55

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem
Dê um clique sobre o arquivo “estilos.css”, conforme indicado na imagem abaixo: Dê um clique
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.

selecionar qual imagem será utilizada como fundo do site. Apague o atributo {background-color:#CCC;, deixando somente
Apague o atributo {background-color:#CCC;, deixando somente o seletor “body”. Digite novamente o colchete ( {
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”.
56

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs”. Dê um clique no
Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs”. Dê um clique no

Dê um clique duplo na pasta “imgs”.

– Dreamweaver CS6 Dê um clique duplo na pasta “imgs”. Dê um clique no arquivo “

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

um clique no arquivo “ fundo.jpg ”, para selecioná-lo. Clique no botão “OK”. Vamos digitar o

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;

57
57

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Vamos agora salvar as alterações no código e visualizar o resultado.
Webmaster Básico – Dreamweaver CS6 Vamos agora salvar as alterações no código e visualizar o resultado.

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

para que as partes em branco do site fiquem transparentes: Feche o browser, clicando no botão

Feche o browser, clicando no botão fechar.

No Dreamweaver, dê um clique sobre o arquivo “estilos.css”, como indicado na imagem abaixo:

58
58

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Selecione o atributo background-color:#FFF; da classe .container: Pressione a tecla
Webmaster Básico – Dreamweaver CS6 Selecione o atributo background-color:#FFF; da classe .container: Pressione a tecla
Selecione o atributo background-color:#FFF; da classe .container: Pressione a tecla “DELETE”, para excluir esta linha
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”:

59
59

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Agora, vamos inserir as imagens que serão utilizadas como título no
Webmaster Básico – Dreamweaver CS6 Agora, vamos inserir as imagens que serão utilizadas como título no

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”,
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.
no wireframe “Principal” e apague o texto presente nele. Com o texto excluído, insira a imagem.

Com o texto excluído, insira a imagem.

Dê um clique no menu Inserir:

60
60

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Selecione a opção “Imagem”. Dê um clique duplo na pasta “imgs”,
Webmaster Básico – Dreamweaver CS6 Selecione a opção “Imagem”. Dê um clique duplo na pasta “imgs”,
Selecione a opção “Imagem”. Dê um clique duplo na pasta “imgs”, para abrir o seu
Selecione a opção “Imagem”.
Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ titulo_principal.png ”, para

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

61
61

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Clique no botão “OK”. Observe que a imagem foi inserida no
Webmaster Básico – Dreamweaver CS6 Clique no botão “OK”. Observe que a imagem foi inserida no

Clique no botão “OK”.

Observe que a imagem foi inserida no wireframe:

“OK”. Observe que a imagem foi inserida no wireframe: Vamos agora inserir a imagem que será

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.

no wireframe “Notícias” e apague o texto presente nele. Com o texto excluído, insira a imagem.

Com o texto excluído, insira a imagem.

Dê um clique no menu Inserir:

nele. Com o texto excluído, insira a imagem. Dê um clique no menu Inserir: Selecione a

Selecione a opção “Imagem”.

62
62

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs”, para abrir o seu
Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs”, para abrir o seu

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

duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ titulo_noticias.png ”, para

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

do item “Texto alternativo”, o texto “Notícias”. Clique no botão “OK”. Observe que a imagem foi

Clique no botão “OK”.

Observe que a imagem foi inserida no wireframe:

“OK”. Observe que a imagem foi inserida no wireframe: Em seguida, salve as alterações no arquivo.

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

Pressione o comando CTRL+S.

63
63

Webmaster Básico – Dreamweaver CS6

Capítulo 10: Posicionando imagens e textos

Dreamweaver CS6 Capítulo 10: Posicionando imagens e textos Neste capítulo, daremos continuidade ao layout do site.

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:

64
64

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Observe que a imagem está posicionada à esquerda do wireframe, enquanto

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

”.

o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil Agricultura”. Clique

Clique no site “Brasil Agricultura”.

sites ”. Clique no site “Brasil Agricultura”. Clique no botão “Concluído”. No painel Arquivos,

Clique no botão “Concluído”.

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

arquivo “ index.html” , como indicado na figura abaixo: Observe que o arquivo “i ndex.html ”

Observe que o arquivo “index.html” foi aberto.

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

65
65

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique no botão “Código”, para que seja exibido somente
Webmaster Básico – Dreamweaver CS6 Dê um clique no botão “Código”, para que seja exibido somente
Dê um clique no botão “Código”, para que seja exibido somente o código CSS. Dê
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;

}

66
66

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 No código CSS acima, indicamos que as imagens que indicarem essa
Webmaster Básico – Dreamweaver CS6 No código CSS acima, indicamos que as imagens que indicarem essa

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;

}

67
67

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 No código acima, indicamos que o texto que possuir essa classe
Webmaster Básico – Dreamweaver CS6 No código acima, indicamos que o texto que possuir essa classe

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
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:
no botão “Design”, para visualizar o layout do site: Iremos inserir uma nova imagem, abaixo da

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:

68
68

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Pressione a seta para direita do teclado ( ), para que
Webmaster Básico – Dreamweaver CS6 Pressione a seta para direita do teclado ( ), para que

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
Dê um clique no menu Inserir:
Selecione a opção “Imagem”.
Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ milho.png ”, para

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:

69
69

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Vamos agora selecionar a classe CSS, que será utiliza nesta imagem.
Webmaster Básico – Dreamweaver CS6 Vamos agora selecionar a classe CSS, que será utiliza nesta imagem.

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

dê um clique na guia de seleção do item “Classe”. Selecione a classe “imgs”. Digite o

Selecione a classe “imgs”.

do item “Classe”. Selecione a classe “imgs”. Digite o texto que ficará ao lado direito da

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

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

70
70

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Digite o texto abaixo: “O milho (Zea mays), também chamado abati,
Webmaster Básico – Dreamweaver CS6 Digite o texto abaixo: “O milho (Zea mays), também chamado abati,

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)

(fonte: http://pt.wikipedia.org/wiki/Milho ) Selecione o texto digitado, para que possamos aplicar a

Selecione o texto digitado, para que possamos aplicar a classe “CSS”.

Selecione todo o texto digitado:

aplicar a classe “CSS”. Selecione todo o texto digitado: Na barra de Propriedades, clique no botão

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

71
71

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique na guia de seleção do item “Regra-alvo”: Selecione
Webmaster Básico – Dreamweaver CS6 Dê um clique na guia de seleção do item “Regra-alvo”: Selecione
Dê um clique na guia de seleção do item “Regra-alvo”: Selecione a classe “texto”:
Dê um clique na guia de seleção do item “Regra-alvo”:
Selecione a classe “texto”:
do item “Regra-alvo”: Selecione a classe “texto”: Observe que a formatação foi aplicada. Vamos agora inserir

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:

clique no final do texto digitado para posicionar o cursor: Pressione o comando SHIFT+ENTER para criar

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

72
72

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs” para abrir o seu
Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs” para abrir o seu

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

clique duplo na pasta “imgs” para abrir o seu conteúdo. Clique no arquivo “ leia_mais.png ”,

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.

“OK”. Observe que a imagem foi inserida abaixo do texto. Vamos repetir esse processo com outra

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:

73
73

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Utilize o comando SHIFT+ENTER três vezes, para que sejam criadas 3
Webmaster Básico – Dreamweaver CS6 Utilize o comando SHIFT+ENTER três vezes, para que sejam criadas 3

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
Dê um clique no menu Inserir:
Selecione a opção “Imagem”.
Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ laranja.png ” para

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:

74
74

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Vamos agora selecionar a classe “CSS”, que será utiliza nessa imagem.

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

dê um clique na guia de seleção do item “Classe”. Selecione a classe “imgs”. Vamos agora

Selecione a classe “imgs”.

do item “Classe”. Selecione a classe “imgs”. Vamos agora digitar o texto que ficará ao lado

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

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

clique do lado direito da imagem para posicionar o cursor: Digite o texto abaixo: A laranja

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

75
75

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 da laranja varia do doce ao levemente ácido. Frequentemente, esta fruta

da laranja varia do doce ao levemente ácido. Frequentemente, esta fruta é descascada e comida ao natural, ou espremida para obter sumo.

e comida ao natural, ou espremida para obter sumo. Vamos agora selecionar o texto digitado para

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
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”:
do item “Regra-alvo”: Selecione a classe “texto”: Observe que a formatação foi aplicada. Vamos agora inserir

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:

76
76

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Pressione o comando SHIFT+ENTER para criar uma quebra de linha. Vamos
Webmaster Básico – Dreamweaver CS6 Pressione o comando SHIFT+ENTER para criar uma quebra de linha. Vamos

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
Dê um clique no menu Inserir:
Selecione a opção “Imagem”.
Dê um clique duplo na pasta “imgs”, para abrir o seu conteúdo.
duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ leia_mais.png ”, para

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.

77
77

Webmaster Básico – Dreamweaver CS6

Vamos agora salvar as alterações no site.

Dreamweaver CS6 Vamos agora salvar as alterações no site. Pressione o comando CTRL+S. Pressione a tecla

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:

Clique sobre a imagem indicada abaixo para selecioná-la: Pressione a seta para direita do teclado (

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.

78
78

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Capítulo 11: Finalizando o wireframe “Notícias” Neste capítulo, iremos o

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:

“Principal”, que editamos no capítulo anterior: Iremos utilizar as classes “CSS” já criadas, para

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

”.

o menu Site e selecione a opção “Gerenciar sites ”. Clique no site “Brasil Agricultura”. Clique

Clique no site “Brasil Agricultura”.

sites ”. Clique no site “Brasil Agricultura”. Clique no botão “Concluído”. No painel Arquivos,

Clique no botão “Concluído”.

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

79
79

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Observe que o arquivo “ index.html ” foi aberto. Dê um
Webmaster Básico – Dreamweaver CS6 Observe que o arquivo “ index.html ” foi aberto. Dê um

Observe que o arquivo “index.html” foi aberto.

Dê um clique no botão “Design”, para visualizar o layout do site:

no botão “Design”, para visualizar o layout do site: Iremos inserir uma nova imagem abaixo da

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:

Clique sobre a imagem indicada abaixo para selecioná-la: Pressione a seta para direita do teclado (

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

80
80

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs”, para abrir o seu
Webmaster Básico – Dreamweaver CS6 Dê um clique duplo na pasta “imgs”, para abrir o seu

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

duplo na pasta “imgs”, para abrir o seu conteúdo. Clique no arquivo “ dia_29_mar.png ” para

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:

“OK”. Observe que a imagem foi inserida no wireframe: Vamos agora selecionar a classe “CSS” que

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

81
81

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Selecione a classe “imgs”. Digite o texto que ficará ao lado
Webmaster Básico – Dreamweaver CS6 Selecione a classe “imgs”. Digite o texto que ficará ao lado

Selecione a classe “imgs”.

Básico – Dreamweaver CS6 Selecione a classe “imgs”. Digite o texto que ficará ao lado direito

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

82
82

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Na barra de Propriedades, clique no botão “CSS”: Dê um clique
Webmaster Básico – Dreamweaver CS6 Na barra de Propriedades, clique no botão “CSS”: Dê um clique
Na barra de Propriedades, clique no botão “CSS”: Dê um clique na guia de seleção
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”:
do item “Regra-alvo”: Selecione a classe “texto”: Utilizando esse mesmo processo, insira as imagens “

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

83
83

Webmaster Básico – Dreamweaver CS6

Webmaster Básico – Dreamweaver CS6 Pressione o comando CTRL+S. Pressione a tecla “F12” para testar o
Webmaster Básico – Dreamweaver CS6 Pressione o comando CTRL+S. Pressione a tecla “F12” para testar o

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

84
84