You are on page 1of 111

Webmaster

Módulo I

Parabéns por participar de um curso dos
Cursos 24 Horas.
Você está investindo no seu futuro!
Esperamos que este seja o começo de um
grande sucesso em sua carreira.

Desejamos boa sorte e bom estudo!

Em caso de dúvidas, contate-nos pelo site
www.Cursos24Horas.com.br

Atenciosamente
Equipe Cursos 24 Horas

Sumário
Curso de Webmaster– Dreamweaver CS6 ..................................................................... 3
Capítulo 1: Introdução ao desenvolvimento de sites ...................................................... 3
1.1 - Layout............................................................................................................... 4
1.2 - Roteiro de navegação do site ............................................................................. 6
1.3. Conteúdo das páginas ......................................................................................... 7
Capítulo 2: Estrutura de Wireframes ............................................................................. 9
2.1. Conhecendo a estrutura do site............................................................................ 9
2.2. Resolução utilizada no website ......................................................................... 10
2.3. Tecnologia/linguagem utilizadas na construção do website ............................... 11
Capítulo 3: Introdução ao Dreamweaver CS6.............................................................. 13
3.1. Instalando o Dreamweaver CS6 ........................................................................ 13
Capítulo 4: Iniciando o Dreamweaver CS6.................................................................. 23
4.1. Criando um novo arquivo ................................................................................. 23
4.2. Área de trabalho do Dreamweaver .................................................................... 24
4.3. Criando a pasta local para o site........................................................................ 26
4.4. Salvando o arquivo HTML ............................................................................... 29
Capítulo 5: Criando o Layout das páginas do Website................................................. 31
5.1. Abrindo o site ................................................................................................... 31
5.2. Modos de visualização de um documento ......................................................... 32
5.3. Iniciando um arquivo HTML ............................................................................ 34
Capítulo 6: Iniciando estrutura de wireframes (CSS) ................................................... 38
Capítulo 7: Finalizando estrutura de wireframes (CSS) ............................................... 53
Capítulo 8: Inserindo mídias (Imagens/Animações em flash)................................... 60
8.1. Inserindo uma imagem...................................................................................... 60
8.2. Inserindo uma animação em flash ..................................................................... 65
Capítulo 9: Mídias (continuação) ................................................................................ 72
9.1. Imagem de fundo.............................................................................................. 73
Capítulo 10: Posicionando imagens e textos ................................................................ 84
Capítulo 11: Finalizando o wireframe “Notícias” ...................................................... 104

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.

3

Para o desenho desse layout.1. foi utilizado o programa Adobe Photoshop. o texto principal.Layout Layout é um esboço em que é mostrada a distribuição física do website.. o logotipo. a barra de menu. 4 . Veja o exemplo do layout criado para a página inicial do site que será desenvolvido nesse curso: Nesse layout. juntamente com os tamanhos de elementos que serão utilizados nele. observe que está indicada a localização dos principais componentes do site.1 . como imagens. as notícias. como. animações e textos. o rodapé do site etc. por exemplo.

o Adobe Illustrator. um layout pode ser também criado em outros programas. veja o exemplo da página “Quem Somos” dele: 5 . entre outros. como o Corel Draw.Caso você não tenha o domínio da ferramenta Adobe Photoshop. Gimp. 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.

No entanto.2 . é necessário antes conhecer quais páginas o website irá conter. também conhecido como “Mapa do Site”. No site que iremos 6 . é a forma que o usuário navegará pelas informações do website. 1. é preciso criar um roteiro de navegação do site. por isso. O roteiro de navegação. para que sejam criados todos os layouts do site.Roteiro de navegação do site Uma das primeiras coisas a fazer no desenvolvimento de um site é criar o roteiro de navegação.

é importante saber o que cada página irá conter. conforme indicado no roteiro abaixo: Essa será a forma que o usuário navegará pelo site. 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”. as páginas serão acessadas por um menu.3. 1. Conteúdo das páginas Depois de conhecer o roteiro de navegação e as páginas que o website irá conter. antes de dar inicio ao desenvolvimento do site. Página Home Na página “Home” estarão informações sobre as tecnologias oferecidas pela empresa e um acesso as últimas notícias. Agora. com a navegação definida. é preciso saber qual será o conteúdo de cada página. Acompanhe abaixo o nosso exemplo. 7 .desenvolver.

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. 8 . Página Produtos Na página “Produtos” serão exibidos os produtos e serviços oferecidos pela empresa.Página Quem Somos A página “Quem Somos” conterá um texto com a missão e os valores da empresa.

O Wireframe é o esqueleto do site. é a forma como as informações irão aparecer na tela para o usuário do website. a. também conhecida como wireframes ou divs. esturura do website ficará da seguinte forma: 9 . 2.Capítulo 2: Estrutura de Wireframes A estrutura do site.1. é utilizada para identificar e dividir onde se localizarão as informações no site. Conhecendo a estrutura do site Seguindo o layout apresentado no capítulo anterior.

Iremos.000 pixels de altura.Observe que em cada uma das caixas (divs) estará uma determinada área do website. iremos utilizar a resolução de 960 pixels de largura por 1.2. portanto. distribuir a altura e a largura dos wireframes dentro dessa resolução. 2. Nesse projeto. é importante definir a resolução final do website. veja como: 10 . Resolução utilizada no website Além de conhecer a estrutura de wireframes que será utilizado. chamada de “Container”. Observe também que todas as divs estão posicionadas dentro de uma caixa principal.

Para a construção desse projeto. você deve conhecer as tecnologias e linguagens que serão utilizadas para o desenvolvimento do mesmo.3. 2.As medidas indicadas na imagem indicam primeiro a largura e posteriormente a altura de cada wireframe. usaremos as seguintes tecnologias. 11 . Tecnologia/linguagem utilizadas na construção do website Antes de iniciar o desenvolvimento do site.

permitindo. As instruções e atributos da linguagem HTML são declarados em forma de TAGS. 12 . assim. CSS As folhas de estilo CSS servem para promover o acabamento visual das páginas web. Elas possuem uma característica muito importante. por exemplo: <title> Minha primeira página </title>. iniciados e finalizados pelas TAGS <comando> e </comando> como.HTML (HYPERTEXT MARKUP LANGUAGE) O HTML é a linguagem padrão das páginas da internet. que é a de poderem ser compartilhadas entre várias páginas. É uma linguagem de marcação que é interpretada pelo browser para dar formatação e posicionamento ao conteúdo do site. uma padronização visual muito simplificada e lógica.

Capítulo 3: Introdução ao Dreamweaver CS6 O Adobe Dreamweaver é um software de desenvolvimento voltado para a internet.1. Vamos agora realizar o procedimento de download e instalação desse programa. iremos utilizar o Microsoft Explorer. Instalando o Dreamweaver CS6 Caso você não tenha o software Dreamweaver instalado em seu computador. oferece uma cópia de avaliação. a Adobe. sendo executada em um browser na internet. e ela terá a aparência igual ao resultado final. Inicialmente vamos executar o browser padrão de navegação na internet. Nesse exemplo. 3. 13 .  Dê um clique no botão “Iniciar” do Windows. empresa criadora do Dreamweaver. que pode ser utilizada gratuitamente por 30 dias. 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.

 Aponte o ponteiro do mouse sobre o item “Todos os Programas”.  Clique no atalho do programa “Internet Explorer (64 bits)”.adobe.com.br e pressione a tecla ENTER. 14 .  Na barra de endereços no browser digite a URL www.

iremos baixar e instalar o pacote Creative Suite 6 Design & Web. Nesse exemplo. 15 . 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. No site da Adobe selecione o link “Mais produtos” do botão “Produtos” Até o lançamento deste curso.

16 .  Dê um clique no botão “Faça download agora”. Localize o pacote Creative Suite 6 Design & Web e dê um clique no link “Testar” (localizado no lado direito da página):  Selecione o idioma “Português”.

Clique no botão “Executar”.  Quando a janela do assistente de download for exibida. 17 . Observe que será exibida uma mensagem de confirmação de download. deixe as configurações padrão dela e clique no botão “Continuar”. Aguarde a janela do assistente de download ser exibida.

Obs.  Na janela que será exibida. Para realizar o download de qualquer programa da Adobe. preencha os dados pedidos e crie uma senha para ter acesso ao Adobe ID:  Após você preencher os dados. dê um clique no botão “Criar”. Caso você não tenha essa conta dê um clique no botão “Criar uma ID da adobe”. é necessário ter um conta chamada de Adobe ID.: Caso você já tenha uma ID da Adobe. 18 . digite o seu e-mail e senha e clique no botão “Conectar-se”.

Aguarde o processo de download ser realizado.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. 19 .

Após o término do download. 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. os arquivos serão descompactados e a instalação será iniciada. Caso a instalação não seja iniciada automaticamente. selecione a opção “Avaliar”: 20 .

selecionamos apenas o software Adobe Dreamweaver CS6. Clique no botão “Aceitar” para dar inicio a instalação.  Selecione quais programas serão instalados. 21 . Nesse exemplo. Um “Contrato de utilização” será exibido.

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

4. vamos dar início a um novo documento HTML. em seguida. clique na opção “Adobe Dreamweaver CS6”.Capítulo 4: Iniciando o Dreamweaver CS6 Com o programa instalado.1. em seguida. Para executar o Dreamweaver. clique sobre a opção “Novo”: 23 .  Clique no menu Arquivo e. 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. vamos agora executá-lo pela primeira vez. Criando um novo arquivo Ao abrir o programa.

está localizada a barra de aplicativos. encontra-se a barra de Menu. 24 . que dá acesso a todas as funções do software. 4.2. À direita da barra de menu. na coluna “Tipo da página”.Clique sobre o botão “Página em branco” e selecione HTML. que é utilizada para dar acesso rápido a outros aplicativos e outros controles. e <nenhum(a)>. Á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. Observe que a área de trabalho do Dreamweaver será exibida. na coluna “Layout”.  Clique no botão “Criar”.

25 . dependendo da ferramenta de edição que está ativa no momento. Essa barra sempre será modificada. Durante esse curso. utilizaremos uma série de painéis. 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. possui as principais ferramentas de edição e criação de layout. O painel Inserir.Barra de Ferramentas documento Logo abaixo da barra de menu. Barra de Propriedades A barra de Propriedades exibe as opções da ferramenta ativa. apresentado na imagem abaixo.

 Clique sobre o menu Site e selecione a opção “Novo Site”: Observe que uma nova janela será aberta.3. vamos criar uma pasta padrão para todos os arquivos que serão utilizados no website que será desenvolvido.  Clique na caixa do item Nome do site e digite “Brasil Agricultura”: 26 .Agora que já conhecemos os principais elementos da área de trabalho do Dreamweaver. vamos indicar o nome do site e a pasta onde serão salvos e editados os arquivos. 4. devemos indicar qual será a pasta na qual os arquivos do site serão salvos. Criando a pasta local para o site Antes de iniciar o desenvolvimento do site. Nesta primeira etapa da definição do novo site.

27 . vamos indicar a pasta onde serão salvos os arquivos.Agora. 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”. para selecionar essa pasta para os arquivos do site.  Dê um clique no botão “Criar nova pasta”.  Dê um clique duplo sobre a pasta “Site” para selecioná-la. 28 . Desta forma.  Quando for exibida a nova pasta. digite o nome “Site” e pressione a tecla ENTER. definimos o nome do site e o local onde os arquivos serão salvos. Vamos agora criar uma nova pasta com o nome de “Site”.  Clique no botão “Salvar”.

Salvando o arquivo HTML Vamos agora salvar o arquivo HTML na pasta “Site”.. Clique no botão “Salvar”.4..  Clique no menu Arquivo e em seguida clique na opção “Salvar Como.”. para que estas configurações fiquem salvas e não seja necessário repeti-las no futuro. 4.  Observe que a janela “Salvar” foi aberta já indicando a pasta de trabalho “Site”: 29 .

html. Obs.: é importante que a primeira página do site tenha o nome de index.  No próximo capítulo. esta será a primeira página exibida do site.  Clique no botão “Salvar”. 30 . pois. após enviar esse arquivo para um servidor na internet. Clique na caixa do item Nome e digite “index”. vamos dar início à construção do layout da página.

Vamos agora abrir o projeto salvo no capítulo anterior e. como o Google. Como consequência. O não uso de tabelas deixa o site mais leve. 5. abrir o projeto . em seguida. por exemplo.”. Abrindo o site  Inicie o Adobe Dreamweaver CS6. não sobrecarregando o browser. que é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página..  Clique sobre o menu Site e selecione a opção “Gerenciar sites.  Clique no site “Brasil Agricultura”.Capítulo 5: Criando o Layout das páginas do Website Vamos desenvolver o layout deste projeto. 31 . utilizando o conceito de Tableless. O não uso de tabelas também deixa o conteúdo do site mais acessível aos sites de busca.1. a página será carregada de uma forma mais rápida..

. Modos de visualização de um documento Na barra de ferramentas do documento. existem quatro botões de Modos de visualização do documento: 32 . 5. Clique no botão “Concluído”. como indicado na figura abaixo: Observe que o arquivo “index. dê um clique duplo sobre o arquivo “index.html” foi aberto.  No painel Arquivos.php”.2.

mostrando na janela da esquerda o código HTML e na janela da direita a visualização da página. Modo Dividir O Modo Dividir divide a tela em duas janelas. é possível editar o documento na forma como ele será exibido na internet. portanto. 33 .  Clique no botão Código.Modo Código O Modo Código ativa a visualização do código HTML / PHP / CSS do arquivo aberto. Modo Design O Modo Design é o modo padrão de edição de um documento no Dreamweaver. Modo Dinâmica Pelo Modo Dinâmica. não iremos utilizar esse modo de visão. é possível visualizar atualizações por meio de banco de dados.  Clique no botão “Dividir:” Como ainda temos um documento em branco. Observe que o código HTML do documento foi exibido. Com esse modo de visualização. podemos adicionar novos códigos ou editar o código já existente. Nesse modo. Nesse curso.  Clique no botão Design. não iremos utilizar conexões com banco de dados. na janela da direita será exibida uma tela em branco.

TAG <DIV> A Tag <div> é utilizada para especificar uma divisão no documento HTML. e a altura fixada em 1000px. iremos utilizar o código HTML para criar os wireframes e uma formatação baseada em CSS. Iniciando um arquivo HTML Para criar o layout do website. Na estrutura de wireframes desse arquivo. para indicar os tamanhos e posições do wireframe.3.5. Para criar as divisões sem o uso de tabelas iremos utilizar a TAG <DIV>. como visto no capítulo 1. 34 . que irá conter todas as demais. A div container terá 950 pixels de largura. criaremos uma div principal.  Dê um clique no botão “Código”. chamada de container.

 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>.  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> Observe que tag da div container foi fechada no final do código: 35 . que serão criadas dentro deste container. Vamos agora criar as demais divs. somente depois de inseridas as demais divs.

bem como o tamanho. mas a posição deles. Dê um clique no botão “Design” para visualizar o layout da página. não foi definida: 36 . Observe que os wireframes foram criados.

Agora. 37 .  Pressione o comando CTRL+S para salvar as alterações no arquivo “index. Esse assunto será melhor explorado no próximo capítulo.Iremos definir a posição e o tamanho de cada wireframe. vamos salvar esse arquivo.html”. utilizando o código CSS.

que irá indicar o tamanho e o posicionamento de cada wireframe. indicamos.  No painel Arquivos.html”. como indicado na figura abaixo: 38 . iremos dar início ao código CSS. Neste capítulo.  Clique sobre o menu Site e selecione a opção “Gerenciar sites. dê um clique duplo sobre o arquivo “index. quais wireframes serão utilizados no layout.  Inicie o Adobe Dreamweaver CS6.. no código HTML.”. Vamos agora abrir o projeto salvo na unidade anterior.Capítulo 6: Iniciando estrutura de wireframes (CSS) No capítulo anterior.  Clique no site “Brasil Agricultura”.  Clique no botão “Concluído”..

. que irá indicar o tamanho e a posição de cada um dos wireframes criados.  Clique na guia “Página em branco” e posteriormente clique sobre a opção “CSS” da coluna “Topo de página”.  Clique no menu Arquivo e. como indicado na imagem: 39 .Observe que o arquivo “index..”. Vamos agora criar o arquivo CSS. em seguida. clique sobre a opção “Novo.html” foi aberto.

40 . pois futuramente essa cor será substituída por uma imagem. que irá indicar uma cor para o fundo do site. Observe que uma nova aba foi aberta para a edição do arquivo CSS: Iremos agora criar um código CSS. Dê um clique no botão “Criar”. Iremos utilizar essa cor provisoriamente.

41 . Digite o código abaixo no local indicado na figura: body {  Selecione a opção background-color: Vamos agora selecionar a cor do fundo.

indicada na imagem: Imagem49. utilizando o ponto-e-vírgula (.”.) para indicar o final de uma instrução.. Observe que uma janela de seleção de cor será aberta. Dê um clique no item “Cor. e feche o colchete..jpg  Finalize a edição do atributo de cor de fundo.  Clique na cor Cinza (#CCC). indicando o final da atribuição do seletor body: 42 .

43 ..Vamos agora salvar este arquivo e vincular o arquivo index.”.html a esse arquivo de estilos. para salvar esse arquivo. vamos criar uma pasta com o nome de “CSS” dentro da pasta “site”..  Digite o nome “css” para esta nova pasta.  Clique no botão Criar nova pasta na janela “Salvar Como.  Pressione o comando CTRL+S. Em seguida.

css” ao arquivo “index. Vamos agora vincular o arquivo “estilo.html”.  Digite “estilos.css” na caixa “Nome:”  Clique no botão Salvar. (O painel está posicionado do lado direito da tela). Dê um clique duplo na pasta CSS para abri-la. 44 .  Clique na guia do arquivo “index. para que seja exibido o seu conteúdo. para que seja exibido o seu conteúdo:  Dê um clique na aba do painel Estilos CSS.html”.

do painel Estilos CSS:  Quando a nova janela for exibida. dê um clique no botão “Procurar”. Dê um clique no botão “Anexar folha de estilos”. para selecionarmos o arquivo de estilo: 45 .

css” ao arquivo “index. Vamos agora visualizar o código que está vinculando o arquivo “estilos. Observe que a cor de fundo do site foi alterada. foi inserida no código:  Clique no botão “Design” para voltarmos à visualização do site.  Clique no botão “OK”. Observe que uma nova linha de código.  Certifique-se de que a opção “Link” esteja selecionada:  Clique no botão “OK”. vinculando o arquivo “estilo.  Dê um clique no arquivo “estilos.css”. para selecioná-lo. Dê um clique duplo na pasta “css” para abri-la.html”  Dê um clique no botão “Código”.css”. 46 .

Iremos agora criar o código para indicar o tamanho e as posições do wireframe “container”. Veja a imagem abaixo como exemplo: 47 .css”.  Clique na guia do arquivo “estilo. z-index: Atributo utilizado para indicar a posição do wireframe em relação aos outros wireframes no eixo Z. 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. para que seja exibido o conteúdo dele. Height: Atributo utilizado para indicar a altura do wireframe. indicando um valor para a sua posição.

clear: O atributo clear indica quais dos lados do wireframe não poderão ter outros elementos. como. por exemplo. background-color: Atributo utilizado para indicar a cor do fundo do wireframe. 48 . outro wireframe. Margin : Atributo utilizado para indicar as margens do wireframe.float: Utilizado para posicionar o wireframe para esquerda (left) ou direita (right) em relação ao wireframe “container”.

vamos indicar também uma cor provisória para ele.  Clique na guia do arquivo “index. height: 1000px. que indicará o tamanho e a posição do wireframe com esse nome. .  Digite o código abaixo no local indicado na imagem.html”. }  Utilize o comando CTRL+S para salvar as alterações no arquivo. width: 960px. para que seja exibido o seu conteúdo. iremos criar uma classe de estilo com o nome de “container”. As classes de estilo devem sempre se iniciar por um ponto (. Para que você possa identificar o wireframe container.). 49 . Lembre que esse wireframe terá a largura de 960px por 1000px de altura.Para iniciar o código. Vamos agora vincular esse estilo ao wireframe container.container { z-index: 1. background-color:#FFF.

50 . A classe será vinculada ao wireframe através do atributo “class” dentro da tag div.  Pressione a tecla “F12”. para testar o funcionamento do código diretamente no browser padrão.  Digite a linha de comando class=“container” no local indicado na imagem:  Utilize o comando CTRL+S. para salvar as alterações no arquivo HTML. Clique no botão “Código” para que seja exibido o código HTML do site.

51 . definindo os atributos de margem esquerda e direita:  Pressione o comando CTRL+S.  Digite os comandos abaixo. para salvar as alterações.  Dê um clique na guia do arquivo “estilos.Observe que o wireframe “container” será exibido. para que seja exibido o seu conteúdo. Para centralizar um wireframe.  Feche a janela do Browser. mas repare que está posicionado do lado esquerdo do browser: O alinhamento do wireframe é realizado através do atributo “margin”.css”. tanto a margem esquerda quanto a margem direita devem ser indicadas com valor “auto”.

html”. 52 .  Pressione a tecla “F12”. Observe que agora o wireframe está centralizado no browser: No próximo capítulo. para testar o site. para que seja exibido o seu conteúdo. iremos criar as demais classes utilizadas nos wireframes. que estão posicionados dentro do wireframe “container”. Clique na guia do arquivo “index.  Feche a janela do browser.

 Clique no site “Brasil Agricultura”. dê um clique duplo sobre o arquivo “index. iremos finalizar o posicionamento da estrutura de wireframes do site. como indicado na figura abaixo: 53 .html”.  Clique sobre o menu Site e selecione a opção “Gerenciar sites. inicie o Adobe Dreamweaver CS6.  Clique no botão “Concluído”..  Caso o seu projeto esteja fechado..Capítulo 7: Finalizando estrutura de wireframes (CSS) Neste capítulo.”.  No painel Arquivos.

Agora.Observe que o arquivo “index.  Como o arquivo de estilos já está vinculado ao arquivo HTML. Lembrese que já sabemos os tamanhos que cada um desses wireframe deverá possuir e o seu posicionamento dentro do wireframe “container”. conforme indicado na imagem abaixo:  Dê um clique no botão “Código”. selecione-o clicando sobre o arquivo “estilos.html” foi aberto.css”. 54 . Iremos agora criar as classes do wireframe “logotipo” e do wireframe “menu”. vamos criar as classes CSS de cada um dos wireframes do site. para que seja exibido somente o código CSS.

para a propriedade “z-index”. float:left. height: 160px.container”: . Vamos agora criar a classe do wireframe “menu”.logotipo { z-index: 2. pelo atributo float. } Observe que no código acima indicamos o valor 2. e a posição esquerda (left). para o wireframe. Digite o código abaixo da classe “. 55 .menu { z-index:2. width: 220px.  Digite o código abaixo: .

width:960px. height:265px. Agora vamos criar as classes dos wireframes “principal” e “noticias”.  Digite o código abaixo: .imagem { z-index:2. Desta forma. abaixo dos wireframes “logotipo” e “menu”. height:160px.width:740px. } Observe que nessa classe foi utilizado o atributo “clear:both”. } Observe que no atributo float foi indicada a posição right (direita). clear:both. 56 . o wireframe “imagem” ficará posicionado no local indicado. Vamos agora criar a classe do wireframe “imagem”. float:right. conforme podemos observar na imagem acima. para indicar que esse wireframe não poderá ter wireframes a sua esquerda ou a direita. ou seja.

} Para finalizar. float:left.  Digite o código abaixo: 57 . width:335px. height:465px.principal { z-index:2. vamos agora criar a classe do wireframe “rodape”. } . Digite o código abaixo: .noticias { z-index:2. height:465px. width:625px. float:right.

para que seja exibido o código HTML do site. para salvar as alterações. clear:both. width:960px. 58 .  Indique agora nas tags div cada uma das classes dos wireframes:  Pressione o comando CTRL+S.rodape { z-index:2.  Dê um clique no botão “Código-fonte”. } Vamos agora ao código HTML.. para indicar as classes de cada um dos wireframes. height:110px.

Observe que cada um dos wireframes está posicionado em seu local definitivo: Utilizando a barra de rolagem do browser. iremos inserir os primeiros elementos gráficos do site em construção. 59 . para visualizar o resultado. No próximo capítulo. Pressione a tecla “F12”. é possível visualizar o wireframe “rodapé”.

. Inserindo uma imagem Iremos inserir a imagem logotipo. no wireframe “imagem”.  Caso o seu projeto esteja fechado.com. Os arquivos deste projeto estão disponíveis para download no link http://www.zip  Realize o download do arquivo acima e o descompacte-o dentro da pasta sites (onde o arquivo “index. Em cada uma dessas pastas.”.png no wireframe “logotipo” e o arquivo “imagens.cursos24horas.swf”.1.html” está salvo). inicie o Adobe Dreamweaver CS6. estão os arquivos que iremos utilizar no desenvolvimento deste projeto. iremos inserir os primeiros elementos gráficos do projeto. 60 ..Capítulo 8: Inserindo mídias (Imagens/Animações em flash) Neste capítulo. que é uma animação feita no aplicativo Adobe Flash. 8.  Clique sobre o menu Site e selecione a opção “Gerenciar sites. Você irá observar que as pastas imgs e flash serão criadas.br/asp/cursos/videoaulas/site/arquivos.

61 .  No painel Arquivos. Clique no site “Brasil Agricultura”.  Clique no botão “Concluído”. dê um clique duplo sobre o arquivo “index.html” foi aberto. como indicado na figura abaixo: Observe que o arquivo “index.html”.

vamos agora inserir a imagem.  Dê um clique no menu Inserir:  Selecione a opção “Imagem”. para visualizar o site. 62 . Com o texto excluído.  Posicione o cursor no wireframe “logotipo” e apague o texto presente nele. Dê um clique no botão “Design”.

63 . para abrir o seu conteúdo. para selecioná-lo.  Clique no botão “OK”. Observe que uma nova janela será exibida.  Clique no arquivo “logotipo. Dê um clique duplo na pasta “imgs”.png”.

na caixa de texto do item “Texto alternativo”. Esse texto será exibido quando o ponteiro do mouse estiver posicionado sobre a imagem.  Digite.  Clique no botão “OK”.Nessa janela pode-se atribuir um texto alternativo para a imagem que será exibida. 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. Observe que a imagem foi inserida no wireframe: 64 . o texto “Brasil Agricultura”.

Os arquivos feitos em Flash são muito utilizados para propaganda animada (banners) em páginas web. Costuma-se chamar de flash apenas os arquivos gerados pelo aplicativo Adobe Flash.swf" e podem ser visualizados em uma página web. para diversos jogos e para apresentações dos mais variados tipos. Inserindo uma animação em flash Iremos agora inserir uma animação em flash. iremos inserir um banner que irá realizar uma transição em diversas imagens. vamos agora inserir a animação. Nesse exemplo.  Posicione o cursor no wireframe “Imagem” e apague o texto presente nele: Com o texto excluído. o plugin do Adobe Flash está instalado em mais de 90% dos Browsers.8. Esses arquivos possuem a extensão ". Segundo a Adobe.  Dê um clique no menu Inserir: 65 .2. usando um navegador que o suporta (geralmente com plug-in especial).

66 . para abrir o seu conteúdo.  Clique no arquivo “imagens. para selecioná-lo.swf”. Aponte o ponteiro do mouse sobre o item “Mídia” e clique na opção “SWF”:  Dê um clique duplo na pasta “flash”.

Nessa janela. como indicado na imagem abaixo:  Clique no botão “OK”. Observe que uma nova janela será exibida. Vamos chamá-la de “imagens”. Observe que a animação flash foi inserida no wireframe: 67 . vamos atribuir um título para a animação que será inserida.  Dê um clique na caixa de texto do item “Título” e digite “imagens”. Clique no botão “OK”.

Dê um clique no menu Inserir:  Selecione a opção “Imagem”. 68 .  Posicione o cursor no wireframe “rodape” e apague o texto presente nele. Com o texto excluído. vamos inserir uma imagem no wireframe “rodape”. agora é o momento de inserir a imagem.Em seguida.

 Dê um clique duplo na pasta “imgs”. para abrir o seu conteúdo. 69 . para selecioná-lo.  Clique no arquivo “rodape. Observe que uma nova janela será exibida.png”.  Clique no botão “OK”.

o texto “Telefone para Contato (99) 9999-9999”. na caixa de texto do item “Texto alternativo”.  Clique no botão “OK”. Digite. Observe que a imagem foi inserida no wireframe: 70 .

para visualizar o resultado. No próximo capítulo.Agora. para salvar as alterações.  Pressione a tecla “F12”. vamos salvar as alterações no site. iremos dar continuidade à edição do site. Observe que agora o site já está tomando forma. 71 .  Pressione o comando CTRL+S.

dê um clique duplo sobre o arquivo “index. que serão exibidas na página inicial do site.html”. iremos inserir as demais mídias.  Caso seu projeto esteja fechado.  Clique no botão “Concluído”.”.  Clique no site “Brasil Agricultura”. como indicado na figura abaixo: 72 .. inicie o Adobe Dreamweaver CS6.  No painel Arquivos.  Clique sobre o menu Site e selecione a opção “Gerenciar sites.Capítulo 9: Mídias (continuação) Neste capítulo..

conforme indicado na imagem abaixo:  Dê um clique no botão “Código”. Imagem de fundo Iremos trocar a cor de fundo do site por uma imagem.html” foi aberto. 9.1. Iremos alterar o atributo background-color do seletor “body” para “background-image”. A imagem que será utilizada está salva dentro da pasta “imgs”.Observe que o arquivo “index. para que seja exibido somente o código CSS.  Dê um clique sobre o arquivo “estilos.css”. 73 . onde podemos selecionar qual imagem será utilizada como fundo do site.

.  Em seguida. 74 . dê um clique na opção “procurar”.  Digite novamente o colchete ( { ) e selecione o atributo background-imagem.  Dê um clique duplo na pasta “imgs”. Apague o atributo {background-color:#CCC. deixando somente o seletor “body”.

Também vamos digitar um código que irá indicar que esta imagem não deverá se repetir no fundo. para selecioná-lo. Vamos digitar o código que irá posicionar a imagem de fundo no centro do browser.  Clique no botão “OK”.  Digite o código abaixo: background-position:center. Dê um clique no arquivo “fundo. background-repeat:no-repeat.jpg”. 75 .

 Pressione a tecla “F12”. para que as partes em branco do site fiquem transparentes: 76 .  Dê um clique no botão “Código-fonte”. para testar o site diretamente no browser. Observe que a imagem de fundo passou a ser exibida.  Pressione o comando CTRL+S. para que seja exibido o código HTML do site.Vamos agora salvar as alterações no código e visualizar o resultado. Depois. para salvar as alterações. iremos substituir a cor branca do wireframe “container”.

da classe .css”.container: 77 . dê um clique sobre o arquivo “estilos. clicando no botão fechar. Feche o browser.  No Dreamweaver. como indicado na imagem abaixo:  Selecione o atributo background-color:#FFF.

para excluir esta linha de código. para testar o site diretamente no browser. Observe que os wireframes ficaram “transparentes”: 78 . para que seja exibido o código HTML do site.  Dê um clique no botão “Código-fonte”.  Pressione a tecla “F12”.  Pressione o comando CTRL+S para salvar as alterações. Pressione a tecla “DELETE”.

para visualizar o layout do site:  Posicione o cursor no wireframe “Principal” e apague o texto presente nele.  Feche o browser. vamos inserir as imagens que serão utilizadas como título no wireframe “Principal” e no wireframe “Notícias”.  No Dreamweaver. 79 .Agora. dê um clique no botão “Design”. clicando no botão fechar.

Dê um clique no menu Inserir:  Selecione a opção “Imagem”.  Dê um clique duplo na pasta “imgs”. 80 . para abrir o seu conteúdo.Com o texto excluído. insira a imagem.

 Digite. Observe que uma nova janela será exibida. Clique no arquivo “titulo_principal. o texto “Tecnologia de ponta”.  Posicione o cursor no wireframe “Notícias” e apague o texto presente nele. 81 .  Clique no botão “OK”. Observe que a imagem foi inserida no wireframe: Vamos agora inserir a imagem que será utilizada no wireframe “Notícias”. na caixa de texto do item “Texto alternativo”. para selecioná-lo.png”.  Clique no botão “OK”.

Com o texto excluído.  Dê um clique duplo na pasta “imgs”. 82 . para abrir o seu conteúdo. Dê um clique no menu Inserir:  Selecione a opção “Imagem”. insira a imagem.

Observe que a imagem foi inserida no wireframe: Em seguida.png”. 83 . na caixa de texto do item “Texto alternativo”.  Digite.  Clique no botão “OK”. para selecioná-lo. Clique no arquivo “titulo_noticias. o texto “Notícias”.  Clique no botão “OK”.  Pressione o comando CTRL+S. Observe que uma nova janela será exibida. salve as alterações no arquivo.

cor etc. e outra para o texto.”.. Se você observar o layout do website que estamos construindo. onde indicaremos a sua posição em relação ao texto. Para que este alinhamento ocorra. verá que no wireframe “Principal” haverá imagens e textos: Observe que a imagem está posicionada à esquerda do wireframe.Capítulo 10: Posicionando imagens e textos Neste capítulo. enquanto o texto está posicionado à direita da imagem. inicie o Adobe Dreamweaver CS6. como tipo da fonte. no qual indicaremos a sua posição e também a sua formatação. daremos continuidade ao layout do site. tamanho. uma para imagem.  Clique sobre o menu Site e selecione a opção “Gerenciar sites. iremos criar duas classes no código CSS.  Clique no site “Brasil Agricultura”.  Caso o seu projeto esteja fechado.. 84 .

 Dê um clique sobre o arquivo “estilos. Clique no botão “Concluído”. dê um clique duplo sobre o arquivo “index.html”.html” foi aberto. como indicado na figura abaixo: Observe que o arquivo “index.  No painel Arquivos.css”. conforme indicado na imagem abaixo: 85 .

 Dê um clique no botão “Código”.imgs”.  Dê um clique no final da última linha do código CSS:  Pressione a tecla “ENTER”. Vamos agora criar uma classe com o nome de “. margin-right:4px.imgs { float:left. para criar uma nova linha. para que seja exibido somente o código CSS.  Digite o código abaixo: . para indicar as posições das imagens no wireframe. } 86 .

font-size:13px. Em seguida. text-align:justify.texto { font-family:Tahoma. indicamos que as imagens que indicarem essa classe (ver . crie a classe do texto. } 87 .  Pressione a tecla ENTER e digite o código abaixo: . Geneva. color:#000. sans-serif.imgs na figura acima) estarão posicionadas à esquerda do texto com uma margem de 4px de distância do lado direito.No código CSS acima.

No código acima, indicamos que o texto que possuir essa classe terá a fonte
“Tahoma”. Também indicamos que, caso o computador utilizado não tenha a fonte
Tahoma, será utilizada a fonte “Geneva”, e assim por diante.
A fonte utilizada terá o tamanho de 13px na cor preta (#000). e o alinhamento do
parágrafo será justificado.
Com as classes criadas, agora será inserida a imagem e o texto. 
Pressione o comando CTRL+S, para salvar as alterações no código. 
Dê um clique no botão “Código-fonte”, para que seja exibido o código HTML
do site. 

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

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: 

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

89

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

Clique no arquivo “milho.png”, para selecioná-lo. 
Clique no botão “OK”.
Observe que uma nova janela será exibida. 
Digite, na caixa de texto do item “Texto alternativo,” o texto “Milho”. 
Clique no botão “OK”.
Observe que a imagem foi inserida no wireframe:

90

Digite o texto que ficará ao lado direito da imagem.  Selecione a classe “imgs”. dê um clique na guia de seleção do item “Classe”.  Na barra de Propriedades. que será utiliza nesta imagem. 91 .Vamos agora selecionar a classe CSS.

92 . auati e avati.wikipedia. cultivado em grande parte do mundo. Todas as evidências científicas levam a crer que seja uma planta de origem americana. Dê um clique do lado direito da imagem. já que aí era cultivada desde o período pré-colombiano.org/wiki/Milho) Selecione o texto digitado. para posicionar o cursor:  Digite o texto abaixo: “O milho (Zea mays). também chamado abati.” (fonte: http://pt. O milho é extensivamente utilizado como alimento humano ou ração animal. devido às suas qualidades nutricionais. para que possamos aplicar a classe “CSS”. é um conhecido cereal.

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

94 .  Dê um clique no final do texto digitado para posicionar o cursor:  Pressione o comando SHIFT+ENTER para criar uma quebra de linha. que futuramente será utilizada como link. Vamos agora inserir uma imagem abaixo deste texto.  Dê um clique no menu Inserir:  Selecione a opção “Imagem”.Observe que a formatação foi aplicada. Vamos agora inserir a imagem.

95 .  Clique no arquivo “leia_mais.  Clique no botão “OK”.  Digite. na caixa de texto do item “Texto alternativo”. Observe que uma nova janela será exibida. Dê um clique duplo na pasta “imgs” para abrir o seu conteúdo. para selecioná-lo. Observe que a imagem foi inserida abaixo do texto. o texto “Leia Mais”.  Clique no botão “OK”.png”.

96 .  Dê um clique do lado direito da imagem “Leia Mais”.  Dê um clique no menu Inserir:  Selecione a opção “Imagem”. Vamos agora inserir a imagem. para posicionar o cursor:  Utilize o comando SHIFT+ENTER três vezes.Vamos repetir esse processo com outra imagem e outro parágrafo de texto. para que sejam criadas 3 quebras de linhas.

97 .png” para selecioná-lo. o texto “Laranja”. Observe que a imagem foi inserida no wireframe: Vamos agora selecionar a classe “CSS”.  Clique no botão “OK”.  Clique no arquivo “laranja.  Na barra de Propriedades dê um clique na guia de seleção do item “Classe”. que será utiliza nessa imagem. Observe que uma nova janela será exibida.  Clique no botão “OK”.  Digite. para abrir o seu conteúdo. na caixa de texto do item “Texto alternativo”. Dê um clique duplo na pasta “imgs”.

 Dê um clique do lado direito da imagem para posicionar o cursor: 98 . Vamos agora digitar o texto que ficará ao lado direito da imagem. Selecione a classe “imgs”.

 Na barra de Propriedades clique no botão CSS: 99 . esta fruta é descascada e comida ao natural. Digite o texto abaixo: A laranja é o fruto produzido pela laranjeira (Citrus x sinensis). criado na antiguidade a partir do cruzamento do pomelo com a tangerina. A laranja é um fruto híbrido. uma árvore da família Rutaceae. Vamos agora selecionar o texto digitado para que possamos aplicar a classe “CSS”.  Selecione todo o texto digitado. Frequentemente. O sabor da laranja varia do doce ao levemente ácido. ou espremida para obter sumo.

 Dê um clique na guia de seleção do item “Regra-alvo”:  Selecione a classe “texto”: Observe que a formatação foi aplicada.  Dê um clique no final do texto digitado para posicionar o cursor: 100 . Vamos agora inserir uma imagem abaixo deste texto que futuramente será utilizada como link.

 Dê um clique no menu Inserir:  Selecione a opção “Imagem”.png”. Vamos agora inserir a imagem. para abrir o seu conteúdo. Pressione o comando SHIFT+ENTER para criar uma quebra de linha.  Dê um clique duplo na pasta “imgs”.  Clique no arquivo “leia_mais. para selecioná-lo. 101 .

Vamos agora salvar as alterações no site.  Dê um clique no botão “Fechar” do browser.  Clique sobre a imagem indicada abaixo para selecioná-la:  Pressione a seta para direita do teclado (). Vamos resolver este problema adicionando algumas quebras de linhas após a imagem. para que o cursor fique posicionado à direita da imagem. Observe que uma nova janela será exibida.  Clique no botão “OK”.  Pressione a tecla “F12”. Observe que o conteúdo do wireframe ficou muito junto da imagem “Tecnologia de ponta”. para testar o site diretamente no Browser. Observe que a imagem foi inserida abaixo do texto.  Digite. 102 . o texto “Leia Mais”.  Pressione o comando CTRL+S. na caixa de texto do item “Texto alternativo”. Clique no botão “OK”.

Adicione mais uma quebra de linha para aumentar o espaço. para testar o site diretamente no Browser.  Pressione a tecla “F12”.  Pressione o comando CTRL+S. 103 . para salvar as alterações. para criar uma nova quebra de linha. Pressione o comando SHIFT+ENTER.

como no wireframe “Principal”.  Clique no site “Brasil Agricultura”.”. iremos o conteúdo do wireframe “Noticias”. 104 .Capítulo 11: Finalizando o wireframe “Notícias” Neste capítulo. verá que no wireframe “Noticias” haverá imagens e textos.  Inicie o Adobe Dreamweaver CS6.. Se você observar o layout do website que estamos construindo.. que editamos no capítulo anterior: Iremos utilizar as classes “CSS” já criadas.  Clique sobre o menu Site e selecione a opção “Gerenciar sites. para alinhar a imagem e formatar o texto desse wireframe.

 No painel Arquivos.html” foi aberto. devemos posicionar o cursor abaixo dela. para visualizar o layout do site: Iremos inserir uma nova imagem abaixo da imagem “Notícias”.html”. conforme indicado na figura abaixo: Observe que o arquivo “index. Clique no botão “Concluído”. Sendo assim.  Dê um clique no botão “Design”. 105 . dê um clique duplo sobre o arquivo “index.

para abrir o seu conteúdo.  Pressione esse mesmo comando (SHIFT+ENTER) mais 2 vezes. para criar uma quebra de linha. Clique sobre a imagem indicada abaixo para selecioná-la:  Pressione a seta para direita do teclado ().  Pressione o comando SHIFT+ENTER. para criar mais 2 quebras de linhas. 106 .  Dê um clique no menu Inserir:  Selecione a opção “Imagem”. Vamos agora inserir a imagem que será utilizada.  Dê um clique duplo na pasta “imgs”. para que o cursor fique posicionado a direita da imagem.

107 . Clique no arquivo “dia_29_mar. Observe que uma nova janela será exibida.  Clique no botão “OK”. na caixa de texto do item “Texto alternativo”.  Digite. Observe que a imagem foi inserida no wireframe: Vamos agora selecionar a classe “CSS” que será utiliza nesta imagem. o texto “Dia 29 de Março”.  Clique no botão “OK”.png” para selecioná-lo.

 Dê um clique do lado direito da imagem. para posicionar o cursor: 108 . Digite o texto que ficará ao lado direito da imagem.  Selecione a classe “imgs”. Na barra de Propriedades dê um clique na guia de seleção do item “Classe”.

 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”. clique no botão “CSS”: 109 .  Selecione todo o texto digitado:  Na barra de Propriedades.

png” e os textos indicados abaixo: 110 . Dê um clique na guia de seleção do item “Regra-alvo”:  Selecione a classe “texto”: Utilizando esse mesmo processo. insira as imagens “dia_28_mar.png” e “dia_27_mar.

No próximo capítulo iremos criar o menu que estará posicionado no wireframe “Menu”. Pressione o comando CTRL+S. 111 .  Pressione a tecla “F12” para testar o site diretamente no Browser.