Webmaster Básico no Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6
Curso de Webmaster Dreamweaver CS6
Captulo 1: Introduo 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 fictcia, chamada Brasil Agricultura, do comeo ao fim. Antes de iniciar o uso do Dreamweaver, importante projetar o desenvolvimento do site. Uma das etapas de desenvolvimento do site a criao de um do layout do site.
1.1. Layout
Layout um esboo em que mostrada a distribuio fsica do website, juntamente com os tamanhos de elementos que sero utilizados nele,, como imagens, animaes e textos. Veja o exemplo do layout criado para a pgina inicial do site que ser desenvolvido nesse curso:
Nesse layout, observe que est indicada a localizao dos principais componentes do site, como, por exemplo, a barra de menu, o logotipo, o texto principal, as notcias, o rodap do site etc. Para o desenho desse layout, foi utilizado o programa Adobe Photoshop. Caso voc no tenha o domnio da ferramenta Adobe Photoshop, um layout pode ser tambm criado em outros programas, como o Corel Draw, o Adobe Illustrator, Gimp, entre outros. Esse mesmo layout tambm pode ser desenhado mo livre como o exemplo abaixo:
Pode-se criar o layout de todas as pginas que sero utilizadas no site, veja o exemplo da pgina Quem Somos dele:
No entanto, para que sejam criados todos os layouts do site, necessrio antes conhecer quais pginas o website ir conter, por isso, preciso criar um roteiro de navegao do site.
1.2. Roteiro de navegao do site

Uma das primeiras coisas a fazer no desenvolvimento de um site criar o roteiro de navegao. O roteiro de navegao, tambm conhecido como Mapa do Site, a forma que o usurio navegar pelas informaes do website. No site que iremos desenvolver, as pginas sero acessadas por um menu, conforme indicado no roteiro abaixo:
Essa ser a forma que o usurio navegar pelo site. Agora, com a navegao definida, importante saber o que cada pgina ir conter.
1.3. Contedo das pginas

Depois de conhecer o roteiro de navegao e as pginas que o website ir conter, preciso saber qual ser o contedo de cada pgina. antes de dar inicio ao desenvolvimento do site. Acompanhe abaixo o nosso exemplo. Pgina Home Na pgina Home estaro informaes sobre as tecnologias oferecidas pela empresa e um acesso as ltimas notcias. Leia Mais Na pgina Leia Mais acessada somente pela pgina Home o usurio do site ter o texto completo do contedo da seo Tecnologia de ponto apresentada na pgina Home. Pgina Quem Somos A pgina Quem Somos conter um texto com a misso e os valores da empresa. Pgina Produtos Na pgina Produtos sero exibidos os produtos e servios oferecidos pela empresa. Pgina Contato Esta pgina apresentar um formulrio de contato onde o usurio preencher informaes que sero enviadas para um e-mail.
Captulo 2: Estrutura de Wireframes

A estrutura do site, tambm conhecida como wireframes ou divs, utilizada para identificar e dividir onde se localizaro as informaes no site. O Wireframe o esqueleto do site, a forma como as informaes iro aparecer na tela para o usurio do website.
2.1. Conhecendo a estrutura do site

Seguindo o layout apresentado no captulo anterior, a, esturura do website ficar da seguinte forma:
Observe que em cada uma das caixas (divs) estar uma determinada rea do website. Observe tambm que todas as divs esto posicionadas dentro de uma caixa principal, chamada de Container.
2.2. Resoluo utilizada no website

Alm de conhecer a estrutura de wireframes que ser utilizado, importante definir a resoluo final do website. Nesse projeto, iremos utilizar a resoluo de 960 pixels de largura por 1.000 pixels de altura.
Iremos, portanto, distribuir a altura e a largura dos wireframes dentro dessa resoluo, veja como:
As medidas indicadas na imagem indicam primeiro a largura e posteriormente a altura de cada wireframe.
2.3. Tecnologia/linguagem utilizadas na construo do website

Antes de iniciar o desenvolvimento do site, voc deve conhecer as tecnologias e linguagens que sero utilizadas para o desenvolvimento do mesmo. Para a construo desse projeto, usaremos as seguintes tecnologias.
HTML (HYPERTEXT MARKUP LANGUAGE) O HTML a linguagem padro das pginas da internet. uma linguagem de marcao que interpretada pelo browser para dar formatao e posicionamento ao contedo do site. As instrues e atributos da linguagem HTML so declarados em forma de TAGS, iniciados e finalizados pelas TAGS <comando> e </comando> como, por exemplo: <title> Minha primeira pgina </title>.

CSS As folhas de estilo CSS servem para promover o acabamento visual das pginas web. Elas possuem uma caracterstica muito importante, que a de poderem ser compartilhadas entre vrias pginas, permitindo, assim, uma padronizao visual muito simplificada e lgica.
Captulo 3: Introduo ao Dreamweaver CS6

O Adobe Dreamweaver um software de desenvolvimento voltado para a internet. O Dreamweaver utiliza um sistema conhecido como WYSIWYG (What You See Is What You Get) traduzido para o portugus como O que voc v o que voc obtm no qual voc pode criar uma pgina no modo Design do Dreamweaver, e ela ter a aparncia igual ao resultado final, sendo executada em um browser na internet.
3.1. Instalando o Dreamweaver CS6

Caso voc no tenha o software Dreamweaver instalado em seu computador, a Adobe, empresa criadora do Dreamweaver, oferece uma cpia de avaliao, que pode ser utilizada gratuitamente por 30 dias. Vamos agora realizar o procedimento de download e instalao desse programa. Inicialmente vamos executar o browser padro de navegao na internet. Nesse exemplo, iremos utilizar o Microsoft Explorer. D um clique no boto Iniciar do Windows.
Aponte o ponteiro do mouse sobre o item Todos os Programas.
Clique no atalho do programa Internet Explorer (64 bits).
Na barra de endereos no browser digite a URL www.adobe.com.br e pressione a tecla ENTER.
No site da Adobe selecione o link Mais produtos do boto Produtos:
At o lanamento deste curso, a verso em portugus do software Adobe Dreamweaver CS6 somente est disponvel 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 pgina):
10
Selecione o idioma Portugus.
D um clique no boto Faa download agora.
Observe que ser exibida uma mensagem de confirmao de download. Clique no boto Executar.
Aguarde a janela do assistente de download ser exibida. Quando a janela do assistente de download for exibida, deixe as configuraes padro dela e clique no boto Continuar.
11
Para realizar o download de qualquer programa da Adobe, necessrio ter um conta chamada de Adobe ID. Caso voc no tenha essa conta d um clique no boto Criar uma ID da adobe.
Obs.: Caso voc j tenha uma ID da Adobe, digite o seu e-mail e senha e clique no boto Conectar-se. Na janela que ser exibida, preencha os dados pedidos e crie uma senha para ter acesso ao Adobe ID:
12
Aps voc preencher os dados, d um clique no boto Criar. Observe que agora ser pedido para que voc selecione uma pasta para onde os arquivos de instalao sero copiados. Selecione a pasta rea de Trabalho e clique no boto OK.
Aguarde o processo de download ser realizado.
13
Aps o trmino do download, os arquivos sero descompactados e a instalao ser iniciada. Caso a instalao no seja iniciada automaticamente, execute o arquivo Set-up da pasta no local onde os arquivos de instalao foram descompactados:
Quando a janela de boas-vindas da instalao for exibida, selecione a opo Avaliar:
14
Um Contrato de utilizao ser exibido. Clique no boto Aceitar para dar inicio a instalao. Selecione quais programas sero instalados. Nesse exemplo, selecionamos apenas o software Adobe Dreamweaver CS6.
Clique no boto Instalar e aguarde o final da instalao.
15
Captulo 4: Iniciando o Dreamweaver CS6

Com o programa instalado, vamos agora execut-lo pela primeira vez. Para executar o Dreamweaver, siga os seguintes passos: Clique no boto 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 opo Adobe Dreamweaver CS6.
4.1. Criando um novo arquivo

Ao abrir o programa, vamos dar incio a um novo documento HTML. Clique no menu Arquivo e, em seguida, clique sobre a opo Novo:
Clique sobre o boto Pgina em branco e selecione HTML, na coluna Tipo da pgina, e <nenhum(a)>, na coluna Layout.
16
Clique no boto 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 funes do software. direita da barra de menu, est localizada a barra de aplicativos, que utilizada para dar acesso rpido a outros aplicativos e outros controles.
Barra de Ferramentas documento Logo abaixo da barra de menu, encontra-se a barra de ferramentas Documento. Essa barra de ferramentas ser utilizada para navegar entre os diferentes tipos de visualizao do arquivo e outras operaes comuns em um documento.
Painis Os painis do Dreamweaver so utilizados para facilitar a utilizao das ferramentas de criao e edio de um documento. O painel Inserir, apresentado na imagem abaixo, possui as principais ferramentas de edio e criao de layout. Durante esse curso, utilizaremos uma srie de painis.
17
Barra de Propriedades A barra de Propriedades exibe as opes da ferramenta ativa. Essa barra sempre ser modificada, dependendo da ferramenta de edio que est ativa no momento.
Agora que j conhecemos os principais elementos da rea de trabalho do Dreamweaver, vamos criar uma pasta padro para todos os arquivos que sero 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 sero salvos. Clique sobre o menu Site e selecione a opo Novo Site:
Observe que uma nova janela ser aberta. Nesta primeira etapa da definio do novo site, vamos indicar o nome do site e a pasta onde sero salvos e editados os arquivos.
18

Clique na caixa do item Nome do site e digite Brasil Agricultura:
Agora, vamos indicar a pasta onde sero salvos os arquivos. Iremos criar uma pasta com o nome de site dentro da pasta Meus Documentos. D um clique no boto Localizar Pasta do item Pasta do site local:
D um clique no boto Bibliotecas na janela que ser exibida.
D um clique duplo na pasta Documentos.
19
Vamos agora criar uma nova pasta com o nome de Site. D um clique no boto Criar nova pasta.
Quando for exibida a nova pasta, digite o nome Site e pressione a tecla ENTER.
D um clique duplo sobre a pasta Site para selecion-la. Clique no boto Salvar, para selecionar essa pasta para os arquivos do site. Desta forma, definimos o nome do site e o local onde os arquivos sero salvos. Clique no boto Salvar.
4.4. Salvando o arquivo HTML

Vamos agora salvar o arquivo HTML na pasta Site, para que estas configuraes fiquem salvas e no seja necessrio repeti-las no futuro. Clique no menu Arquivo e em seguida clique na opo Salvar Como....
20
Observe que a janela Salvar foi aberta j indicando a pasta de trabalho Site:
Clique na caixa do item Nome e digite index.
Obs.: importante que a primeira pgina do site tenha o nome de index.html, pois, aps enviar esse arquivo para um servidor na internet, esta ser a primeira pgina exibida do site. Clique no boto Salvar. No prximo captulo, vamos dar incio construo do layout da pgina.
21
Captulo 5: Criando o Layout das pginas do Website

Vamos desenvolver o layout deste projeto, utilizando o conceito de Tableless, que uma forma de desenvolvimento de sites que no utiliza tabelas para disposio de contedo na pgina. O no uso de tabelas deixa o site mais leve, no sobrecarregando o browser. Como consequncia, a pgina ser carregada de uma forma mais rpida. O no uso de tabelas tambm deixa o contedo do site mais acessvel 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 captulo anterior e, em seguida, abrir o projeto. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Clique no site Brasil Agricultura.
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.php,, como indicado na figura abaixo:
22
Observe que o arquivo index.html foi aberto.
5.2. Modos de visualizao de um documento

Na barra de ferramentas do documento, existem quatro botes de Modos de visualizao do documento: Modo Cdigo O Modo Cdigo ativa a visualizao do cdigo HTML / PHP / CSS do arquivo aberto. Com esse modo de visualizao, podemos adicionar novos cdigos ou editar o cdigo j existente. Clique no boto Cdigo.
Observe que o cdigo HTML do documento foi exibido. Modo Dividir O Modo Dividir divide a tela em duas janelas, mostrando na janela da esquerda o cdigo HTML e na janela da direita a visualizao da pgina. Clique no boto Dividir:
Como ainda temos um documento em branco, na janela da direita ser exibida uma tela em branco. Modo Dinmica
23

Pelo Modo Dinmica, possvel visualizar atualizaes por meio de banco de dados. Nesse curso, no iremos utilizar conexes com banco de dados, portanto, no iremos utilizar esse modo de viso. Modo Design O Modo Design o modo padro de edio de um documento no Dreamweaver. Nesse modo, possvel editar o documento na forma como ele ser exibido na internet. Clique no boto Design.
5.3. Iniciando um arquivo HTML

Para criar o layout do website, iremos utilizar o cdigo HTML para criar os wireframes e uma formatao baseada em CSS, para indicar os tamanhos e posies do wireframe, como visto no captulo 1.
Para criar as divises sem o uso de tabelas iremos utilizar a TAG <DIV>.
24

TAG <DIV> A Tag <div> utilizada para especificar uma diviso 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 boto Cdigo.
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 sero criadas dentro deste container. Vamos agora criar as demais divs. Digite o cdigo 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
Observe que tag da div container foi fechada no final do cdigo:
D um clique no boto Design para visualizar o layout da pgina.
Observe que os wireframes foram criados, mas a posio deles, bem como o tamanho, no foi definida:
26
Iremos definir a posio e o tamanho de cada wireframe, utilizando o cdigo CSS. Esse assunto ser melhor explorado no prximo captulo. Agora, vamos salvar esse arquivo. Pressione o comando CTRL+S para salvar as alteraes no arquivo index.html.
27
Captulo 6: Iniciando estrutura de wireframes (CSS)

No captulo anterior, indicamos, no cdigo HTML, quais wireframes sero utilizados no layout. Neste captulo, iremos dar incio ao cdigo 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 opo Gerenciar sites....
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
Vamos agora criar o arquivo CSS, que ir indicar o tamanho e a posio de cada um dos wireframes criados.
28

Clique no menu Arquivo e, em seguida, clique sobre a opo Novo....
Clique na guia Pgina em branco e posteriormente clique sobre a opo CSS da coluna Topo de pgina, como indicado na imagem:
D um clique no boto Criar. Observe que uma nova aba foi aberta para a edio do arquivo CSS:
29
Iremos agora criar um cdigo CSS, que ir indicar uma cor para o fundo do site. Iremos utilizar essa cor provisoriamente, pois futuramente essa cor ser substituda por uma imagem. Digite o cdigo abaixo no local indicado na figura: body {
Selecione a opo background-color:
30
Vamos agora selecionar a cor do fundo. D um clique no item Cor....
Observe que uma janela de seleo de cor ser aberta. Clique na cor Cinza (#CCC), indicada na imagem:
Imagem49.jpg Finalize a edio do atributo de cor de fundo, utilizando o ponto-e-vrgula (;) para indicar o final de uma instruo, e feche o colchete, indicando o final da atribuio do seletor body:
31
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 boto Criar nova pasta na janela Salvar Como....
Digite o nome css para esta nova pasta.
D um clique duplo na pasta CSS para abri-la. Digite estilos.css na caixa Nome:
Clique no boto 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 contedo:
32
D um clique na aba do painel Estilos CSS, para que seja exibido o seu contedo. (O painel est posicionado do lado direito da tela).
D um clique no boto Anexar folha de estilos, do painel Estilos CSS:
Quando a nova janela for exibida, d um clique no boto Procurar, para selecionarmos o arquivo de estilo:
33
D um clique duplo na pasta css para abri-la. D um clique no arquivo estilos.css, para selecion-lo. Clique no boto OK. Certifique-se de que a opo Link esteja selecionada:
Clique no boto OK. Observe que a cor de fundo do site foi alterada. Vamos agora visualizar o cdigo que est vinculando o arquivo estilos.css ao arquivo index.html D um clique no boto Cdigo.
Observe que uma nova linha de cdigo, vinculando o arquivo estilo.css, foi inserida no cdigo:
Clique no boto Design para voltarmos visualizao do site. Iremos agora criar o cdigo para indicar o tamanho e as posies do wireframe container.
34

Clique na guia do arquivo estilo.css, para que seja exibido o contedo dele.
Vamos criar uma classe com o nome de cada uma das divs indicando os seguintes atributos: width: Atributo utilizado para indicar a largura do wireframe. Height: Atributo utilizado para indicar a altura do wireframe. z-index: Atributo utilizado para indicar a posio do wireframe em relao aos outros wireframes no eixo Z, indicando um valor para a sua posio. Veja a imagem abaixo como exemplo:
float:
35

Utilizado para posicionar o wireframe para esquerda (left) ou direita (right) em relao ao wireframe container. margin: Atributo utilizado para indicar as margens do wireframe.
clear: O atributo clear indica quais dos lados do wireframe no podero ter outros elementos, como, por exemplo, outro wireframe.
background-color: Atributo utilizado para indicar a cor do fundo do wireframe.
Para iniciar o cdigo, iremos criar uma classe de estilo com o nome de container, que indicar o tamanho e a posio 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 tambm uma cor provisria para ele. Digite o cdigo abaixo no local indicado na imagem.
.container { z-index: 1; width: 960px; height: 1000px; background-color:#FFF;
36
Utilize o comando CTRL+S para salvar as alteraes no arquivo. Vamos agora vincular esse estilo ao wireframe container. Clique na guia do arquivo index.html , para que seja exibido o seu contedo.
Clique no boto Cdigo para que seja exibido o cdigo HTML do site. A classe ser vinculada ao wireframe atravs do atributo class dentro da tag div. Digite a linha de comando class=container no local indicado na imagem:
37
Utilize o comando CTRL+S, para salvar as alteraes no arquivo HTML; Pressione a tecla F12, para testar o funcionamento do cdigo diretamente no browser padro; Observe que o wireframe container ser exibido, mas repare que est posicionado do lado esquerdo do browser:
O alinhamento do wireframe realizado atravs 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 contedo. Digite os comandos abaixo, definindo os atributos de margem esquerda e direita:
38
Pressione o comando CTRL+S, para salvar as alteraes. Clique na guia do arquivo index.html, para que seja exibido o seu contedo. Pressione a tecla F12, para testar o site. Observe que agora o wireframe est centralizado no browser:
No prximo captulo, iremos criar as demais classes utilizadas nos wireframes, que esto posicionados dentro do wireframe container. Feche a janela do browser.
39
Captulo 7: Finalizando estrutura de wireframes (CSS)

Neste captulo, 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 opo Gerenciar sites....
40
Agora, vamos criar as classes CSS de cada um dos wireframes do site. Como o arquivo de estilos j est vinculado ao arquivo HTML, selecione-o clicando sobre o arquivo estilos.css, conforme indicado na imagem abaixo:
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS. Iremos agora criar as classes do wireframe logotipo e do wireframe menu. Lembre-se que j sabemos os tamanhos que cada um desses wireframe dever possuir e o seu posicionamento dentro do wireframe container.
Digite o cdigo abaixo da classe .container:
.logotipo { z-index: 2; width: 220px; height: 160px;
41

float:left; }
Observe que no cdigo acima indicamos o valor 2, para a propriedade z-index, e a posio esquerda (left), pelo atributo float, para o wireframe. Vamos agora criar a classe do wireframe menu. Digite o cdigo abaixo:
.menu { z-index:2; width:740px; height:160px; float:right; }
Observe que no atributo float foi indicada a posio right (direita). Vamos agora criar a classe do wireframe imagem.
42
Digite o cdigo 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 no poder ter wireframes a sua esquerda ou a direita. Desta forma, o wireframe imagem ficar posicionado no local indicado, ou seja, abaixo dos wireframes logotipo e menu, conforme podemos observar na imagem acima. Agora vamos criar as classes dos wireframes principal e noticias.
.principal {
43

z-index:2; width:625px; height:465px; float:left; }
.noticias { z-index:2; width:335px; height:465px; float:right; }
Para finalizar, vamos agora criar a classe do wireframe rodape.
.rodape { z-index:2; width:960px; height:110px; clear:both; }
Vamos agora ao cdigo HTML, para indicar as classes de cada um dos wireframes. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
44
Indique agora nas tags div cada uma das classes dos wireframes:
Pressione o comando CTRL+S, para salvar as alteraes. Pressione a tecla F12, para visualizar o resultado. Observe que cada um dos wireframes est posicionado em seu local definitivo:
Utilizando a barra de rolagem do browser, possvel visualizar o wireframe rodap. No prximo captulo, iremos inserir os primeiros elementos grficos do site em construo.
45
Captulo 8: Inserindo mdias (Imagens/Animaes em flash)

Neste captulo, iremos inserir os primeiros elementos grficos do projeto. Os arquivos deste projeto esto disponveis para http://www.cursos24horas.com.br/asp/cursos/videoaulas/site/arquivos.zip 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 sero criadas. Em cada uma dessas pastas, esto os arquivos que iremos utilizar no desenvolvimento deste projeto.
8.1. Inserindo uma imagem

Iremos inserir a imagem logotipo.png no wireframe logotipo e o arquivo imagens.swf, que uma animao 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 opo Gerenciar sites....
46
Observe que o arquivo index.html foi aberto. D um clique no boto Design, para visualizar o site.
Posicione o cursor no wireframe logotipo e apague o texto presente nele.
Com o texto excludo, vamos agora inserir a imagem. D um clique no menu Inserir:
47
Selecione a opo Imagem.
D um clique duplo na pasta imgs, para abrir o seu contedo.
Clique no arquivo logotipo.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
48
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 tambm utilizado para que programas de leitura de sites para portadores de deficincia visual consigam identificar o contedo da imagem inserida e possam narrar para o deficiente visual o que est inserido no site.
Digite, na caixa de texto do item Texto alternativo, o texto Brasil Agricultura.
Clique no boto OK. Observe que a imagem foi inserida no wireframe:
8.2. Inserindo uma animao em flash

Iremos agora inserir uma animao em flash. Costuma-se chamar de flash apenas os arquivos gerados pelo aplicativo Adobe Flash. Esses arquivos possuem a extenso ".swf" e podem ser visualizados em uma pgina 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 so muito utilizados para propaganda animada (banners) em pginas web, para diversos jogos e
49

para apresentaes dos mais variados tipos. Nesse exemplo, iremos inserir um banner que ir realizar uma transio em diversas imagens. Posicione o cursor no wireframe Imagem e apague o texto presente nele:
Com o texto excludo, vamos agora inserir a animao. D um clique no menu Inserir:
Aponte o ponteiro do mouse sobre o item Mdia e clique na opo SWF:
D um clique duplo na pasta flash, para abrir o seu contedo.
50
Clique no arquivo imagens.swf, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
Nessa janela, vamos atribuir um ttulo para a animao que ser inserida. Vamos cham-la de imagens. D um clique na caixa de texto do item Ttulo e digite imagens, como indicado na imagem abaixo:
Clique no boto OK. Observe que a animao flash foi inserida no wireframe:
51
Em seguida, vamos inserir uma imagem no wireframe rodape. Posicione o cursor no wireframe rodape e apague o texto presente nele.
Com o texto excludo, agora o momento de inserir a imagem.
D um clique no menu Inserir:
52
Clique no arquivo rodape.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
Digite, na caixa de texto do item Texto alternativo, o texto Telefone para Contato (99) 99999999.
53
Agora, vamos salvar as alteraes no site. Pressione o comando CTRL+S, para salvar as alteraes. Pressione a tecla F12, para visualizar o resultado. Observe que agora o site j est tomando forma. No prximo captulo, iremos dar continuidade edio do site.
54
Captulo 9: Mdias (continuao)

Neste captulo, iremos inserir as demais mdias, que sero exibidas na pgina inicial do site. Caso seu projeto esteja fechado, inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
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

D um clique sobre o arquivo estilos.css, conforme indicado na imagem abaixo:
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS. Iremos alterar o atributo background-color do seletor body para background-image, onde podemos selecionar qual imagem ser utilizada como fundo do site.
Apague o atributo {background-color:#CCC;, deixando somente o seletor body. Digite novamente o colchete ( { ) e selecione o atributo background-imagem.
Em seguida, d um clique na opo procurar.
56
D um clique duplo na pasta imgs.
D um clique no arquivo fundo.jpg, para selecion-lo.
Clique no boto OK. Vamos digitar o cdigo que ir posicionar a imagem de fundo no centro do browser. Tambm vamos digitar um cdigo que ir indicar que esta imagem no dever se repetir no fundo. Digite o cdigo abaixo: background-position:center; background-repeat:no-repeat;
57
Vamos agora salvar as alteraes no cdigo e visualizar o resultado. Pressione o comando CTRL+S, para salvar as alteraes. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
Pressione a tecla F12, para testar o site diretamente no browser. Observe que a imagem de fundo passou a ser exibida. Depois, iremos substituir a cor branca do wireframe container, para que as partes em branco do site fiquem transparentes:
Feche o browser, clicando no boto fechar. No Dreamweaver, d um clique sobre o arquivo estilos.css, como indicado na imagem abaixo:
58
Selecione o atributo background-color:#FFF; da classe .container:
Pressione a tecla DELETE, para excluir esta linha de cdigo. Pressione o comando CTRL+S para salvar as alteraes. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
Pressione a tecla F12, para testar o site diretamente no browser. Observe que os wireframes ficaram transparentes:
59
Agora, vamos inserir as imagens que sero utilizadas como ttulo no wireframe Principal e no wireframe Notcias. Feche o browser, clicando no boto fechar. No Dreamweaver, d um clique no boto Design, para visualizar o layout do site:
Posicione o cursor no wireframe Principal e apague o texto presente nele.
Com o texto excludo, insira a imagem.
60
Clique no arquivo titulo_principal.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
Digite, na caixa de texto do item Texto alternativo, o texto Tecnologia de ponta.
61
Vamos agora inserir a imagem que ser utilizada no wireframe Notcias. Posicione o cursor no wireframe Notcias e apague o texto presente nele.
Com o texto excludo, insira a imagem.
62
Clique no arquivo titulo_noticias.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Notcias.
Em seguida, salve as alteraes no arquivo. Pressione o comando CTRL+S.
63
Captulo 10: Posicionando imagens e textos

Neste captulo, 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

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 cdigo CSS, uma para imagem, onde indicaremos a sua posio em relao ao texto, e outra para o texto, no qual indicaremos a sua posio e tambm a sua formatao, 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 opo Gerenciar sites....
Observe que o arquivo index.html foi aberto. D um clique sobre o arquivo estilos.css, conforme indicado na imagem abaixo:
65
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS. D um clique no final da ltima linha do cdigo CSS:
Pressione a tecla ENTER, para criar uma nova linha. Vamos agora criar uma classe com o nome de .imgs, para indicar as posies das imagens no wireframe. Digite o cdigo abaixo: .imgs { float:left; margin-right:4px; }
66
No cdigo CSS acima, indicamos que as imagens que indicarem essa classe (ver .imgs na figura acima) estaro posicionadas esquerda do texto com uma margem de 4px de distncia do lado direito. Em seguida, crie a classe do texto. Pressione a tecla ENTER e digite o cdigo abaixo:
.texto { font-family:Tahoma, Geneva, sans-serif; font-size:13px; color:#000; text-align:justify; }
67
No cdigo acima, indicamos que o texto que possuir essa classe ter a fonte Tahoma. Tambm indicamos que, caso o computador utilizado no 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 pargrafo ser justificado. Com as classes criadas, agora ser inserida a imagem e o texto. Pressione o comando CTRL+S, para salvar as alteraes no cdigo. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
D um clique no boto Design, para visualizar o layout do site:
Iremos inserir uma nova imagem, abaixo da imagem Tecnologia de ponta. Desta forma, devemos posicionar o cursor abaixo da mesma. Clique sobre a imagem indicada abaixo para selecion-la:
68
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 opo Imagem.
Clique no arquivo milho.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Milho. Clique no boto OK. Observe que a imagem foi inserida no wireframe:
69
Vamos agora selecionar a classe CSS, que ser utiliza nesta imagem. Na barra de Propriedades, d um clique na guia de seleo do item Classe.
Selecione a classe imgs.
Digite o texto que ficar ao lado direito da imagem. D um clique do lado direito da imagem, para posicionar o cursor:
70
Digite o texto abaixo: O milho (Zea mays), tambm chamado abati, auati e avati, um conhecido cereal, cultivado em grande parte do mundo. O milho extensivamente utilizado como alimento humano ou rao animal, devido s suas qualidades nutricionais. Todas as evidncias cientficas levam a crer que seja uma planta de origem americana, j que a era cultivada desde o perodo pr-colombiano. (fonte:
http://pt.wikipedia.org/wiki/Milho)
Selecione o texto digitado, para que possamos aplicar a classe CSS. Selecione todo o texto digitado:
Na barra de Propriedades, clique no boto CSS:
71
D um clique na guia de seleo do item Regra-alvo:
Selecione a classe texto:
Observe que a formatao foi aplicada. Vamos agora inserir uma imagem abaixo deste texto, que futuramente ser utilizada como link. D um clique no final do texto digitado para posicionar o cursor:
Pressione o comando SHIFT+ENTER para criar uma quebra de linha. Vamos agora inserir a imagem. D um clique no menu Inserir: Selecione a opo Imagem.
72
D um clique duplo na pasta imgs para abrir o seu contedo.
Clique no arquivo leia_mais.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Leia Mais. Clique no boto OK. Observe que a imagem foi inserida abaixo do texto.
Vamos repetir esse processo com outra imagem e outro pargrafo de texto. D um clique do lado direito da imagem Leia Mais, para posicionar o cursor:
73
Utilize o comando SHIFT+ENTER trs vezes, para que sejam criadas 3 quebras de linhas. Vamos agora inserir a imagem. D um clique no menu Inserir: Selecione a opo Imagem.
Clique no arquivo laranja.png para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Laranja. Clique no boto OK. Observe que a imagem foi inserida no wireframe:
74

Vamos agora selecionar a classe CSS, que ser utiliza nessa imagem. Na barra de Propriedades d um clique na guia de seleo do item Classe.
Vamos agora digitar o texto que ficar ao lado direito da imagem. D um clique do lado direito da imagem para posicionar o cursor:
Digite o texto abaixo: A laranja o fruto produzido pela laranjeira (Citrus x sinensis), uma rvore da famlia Rutaceae. A laranja um fruto hbrido, criado na antiguidade a partir do cruzamento do pomelo com a tangerina. O sabor
75

da laranja varia do doce ao levemente cido. Frequentemente, esta fruta descascada e comida ao natural, ou espremida para obter sumo.
Vamos agora selecionar o texto digitado para que possamos aplicar a classe CSS. Selecione todo o texto digitado. Na barra de Propriedades clique no boto CSS:
Observe que a formatao 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
Pressione o comando SHIFT+ENTER para criar uma quebra de linha. Vamos agora inserir a imagem. D um clique no menu Inserir: Selecione a opo Imagem.
Clique no arquivo leia_mais.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Leia Mais. Clique no boto OK. Observe que a imagem foi inserida abaixo do texto.
77

Vamos agora salvar as alteraes no site. Pressione o comando CTRL+S. Pressione a tecla F12, para testar o site diretamente no Browser. Observe que o contedo do wireframe ficou muito junto da imagem Tecnologia de ponta. Vamos resolver este problema adicionando algumas quebras de linhas aps a imagem. D um clique no boto Fechar do browser. Clique sobre a imagem indicada abaixo para selecion-la:
Pressione a seta para direita do teclado ( ), para que o cursor fique posicionado direita da imagem. Pressione o comando SHIFT+ENTER, para criar uma nova quebra de linha. Adicione mais uma quebra de linha para aumentar o espao. Pressione o comando CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o site diretamente no Browser.
78
Captulo 11: Finalizando o wireframe Notcias

Neste captulo, iremos o contedo 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 captulo anterior:
Iremos utilizar as classes CSS j criadas, para alinhar a imagem e formatar o texto desse wireframe. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, conforme indicado na figura abaixo:
79
Observe que o arquivo index.html foi aberto. D um clique no boto Design, para visualizar o layout do site:
Iremos inserir uma nova imagem abaixo da imagem Notcias. Sendo assim, devemos posicionar o cursor abaixo dela. Clique sobre a imagem indicada abaixo para selecion-la:
Pressione a seta para direita do teclado ( ), para que o cursor fique posicionado a direita da imagem. Pressione o comando SHIFT+ENTER, para criar uma quebra de linha. Pressione esse mesmo comando (SHIFT+ENTER) mais 2 vezes, para criar mais 2 quebras de linhas. Vamos agora inserir a imagem que ser utilizada. D um clique no menu Inserir: Selecione a opo Imagem.
80
Clique no arquivo dia_29_mar.png para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Dia 29 de Maro. Clique no boto OK. Observe que a imagem foi inserida no wireframe:
Vamos agora selecionar a classe CSS que ser utiliza nesta imagem. Na barra de Propriedades d um clique na guia de seleo do item Classe.
81
Digite o texto que ficar ao lado direito da imagem. D um clique do lado direito da imagem, para posicionar o cursor:
Digite o texto abaixo: Pesquisa com caf contribui para a sustentabilidade da produo Agora selecione o texto digitado para que possamos aplicar a classe CSS. Selecione todo o texto digitado:
82
Na barra de Propriedades, clique no boto CSS:
Utilizando esse mesmo processo, insira as imagens dia_28_mar.png e dia_27_mar.png e os textos indicados abaixo:
83
Pressione o comando CTRL+S. Pressione a tecla F12 para testar o site diretamente no Browser. No prximo captulo iremos criar o menu que estar posicionado no wireframe Menu.
84

Webmaster Básico no Dreamweaver CS6

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Webmaster Básico no Dreamweaver CS6

Diunggah oleh

Hak Cipta:

Format Tersedia

Webmaster Bsico Dreamweaver CS6

Curso de Webmaster Dreamweaver CS6

Captulo 1: Introduo ao desenvolvimento de sites

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

1.2. Roteiro de navegao do site

Webmaster Bsico Dreamweaver CS6

1.3. Contedo das pginas

Webmaster Bsico Dreamweaver CS6

Captulo 2: Estrutura de Wireframes

2.1. Conhecendo a estrutura do site

2.2. Resoluo utilizada no website

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

2.3. Tecnologia/linguagem utilizadas na construo do website

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Captulo 3: Introduo ao Dreamweaver CS6

3.1. Instalando o Dreamweaver CS6

Aponte o ponteiro do mouse sobre o item Todos os Programas.

Clique no atalho do programa Internet Explorer (64 bits).

Webmaster Bsico Dreamweaver CS6

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

No site da Adobe selecione o link Mais produtos do boto Produtos:

Webmaster Bsico Dreamweaver CS6

Selecione o idioma Portugus.

D um clique no boto Faa download agora.

Webmaster Bsico Dreamweaver CS6

Webmaster Bsico Dreamweaver CS6

Aguarde o processo de download ser realizado.

Webmaster Bsico Dreamweaver CS6

Quando a janela de boas-vindas da instalao for exibida, selecione a opo Avaliar:

Webmaster Bsico Dreamweaver CS6

Clique no boto Instalar e aguarde o final da instalao.

Webmaster Bsico Dreamweaver CS6

Captulo 4: Iniciando o Dreamweaver CS6

4.1. Criando um novo arquivo

Webmaster Bsico Dreamweaver CS6

4.2. rea de trabalho do Dreamweaver

Webmaster Bsico Dreamweaver CS6

4.3. Criando a pasta local para o site

Webmaster Bsico Dreamweaver CS6

D um clique no boto Bibliotecas na janela que ser exibida.

D um clique duplo na pasta Documentos.

Webmaster Bsico Dreamweaver CS6

4.4. Salvando o arquivo HTML

Webmaster Bsico Dreamweaver CS6

Clique na caixa do item Nome e digite index.

Webmaster Bsico Dreamweaver CS6

Captulo 5: Criando o Layout das pginas do Website

5.1. Abrindo o site

Clique no site Brasil Agricultura.

Webmaster Bsico Dreamweaver CS6

Observe que o arquivo index.html foi aberto.

5.2. Modos de visualizao de um documento

Webmaster Bsico Dreamweaver CS6

5.3. Iniciando um arquivo HTML

Webmaster Bsico Dreamweaver CS6

Digite entre as tags <body> e </body> a linha de comando indicado na imagem:

Webmaster Bsico Dreamweaver CS6

Observe que tag da div container foi fechada no final do cdigo:

D um clique no boto Design para visualizar o layout da pgina.

Webmaster Bsico Dreamweaver CS6