(Parte 1 de 4)

Tutorial Macromedia Dreamweaver 2

Tutorial Macromedia Dreamweaver 2

Tutorial Macromedia Dreamweaver 2

1) INTRODUÇÃO3
OVERVIEW3
VISUALIZANDO A VERSÃO COMPLETA DO SITE4
COMO AS PÁGINAS DO TUTORIAL ESTÃO AGRUPADAS5
2) DEFININDO UM SITE LOCAL6
FAZENDO O UPLOADING DE UM SITE8
3) EDITANDO A HOMEPAGE OLIVEBRANCH10
DEFININDO A COR E A IMAGEM DO BACKGROUND10
DEFININDO O TÍTULO DA PÁGINA12
CRIANDO UM MAPA DO SITE12
CRIANDO LINKS15
4) CRIANDO UM LAY-OUT DE PÁGINA COMPLEXO18
CONVERTENDO UMA TABELA EM CAMADAS (LAYERS)19
ADICIONANDO UMA TACING IMAGE (IMAGEM DE TRAÇADO) PARA GUIAR O LAY-OUT20
POSICIONANDO AS CAMADAS21
ADICIONANDO NOVAS CAMADAS2
ADICIONANDO IMAGENS2
CONVERTENDO CAMADAS EM TABELAS23
5) EDITANDO UMA TABELA26
FORMATANDO A TABELA26
ORDENANDO A TABELA27
6) FORMATANDO TEXTOS USANDO ESTILOS29
7) APLICANDO UM MODELO (TEMPLATE)32
EDITANDO O MODELO3
APLICANDO UM MODELO DIFERENTE A UMA PÁGINA35
8) UNINDO “BEHAVIORS” A ELEMENTOS DA PÁGINA39
9) ADICIONANDO UM FILME FLASH4

Tutorial Macromedia Dreamweaver 2

1. Introdução

Para facilitar o seu trabalho e o meu, neste tutorial nós vamos usar os arquivos criados pela Macromedia assim o que basicamente eu fiz foi traduzir o tutorial que já vem com o Dreamweaver 2, melhorar as explicações quando elas pareciam confusas, eu espero ter conseguido, e adicionar algumas novas informações. Você de estar pensando, no que isso facilita o meu trabalho? Eu respondo: Você já tem todos os arquivos necessários em seu computador, sejam páginas HTML, imagens ou Flash movies.

Atenção: eu não tornei explicito no texto os locais em que faço comentários ou acrescento informações ao tutorial Macromedia. Salvo algumas exceções.

depois issosem dizer o porquê deste monte de coisas. Infelizmente os tutoriais da Macromedia são

Se você for como eu não deve gostar daqueles tutoriais que ficam dizendo, faça isso, depois faça isso, e mais ou menos assim. Por isso eu acrescentei, quando possível, mais informações sobre a razão de se fazer deste, e não do outro modo.

Overview

Neste tutorial, você vai editar um Web Site para uma companhia fictícia, Olivebranch Gourmet Foods, uma fazenda que vende produtos alimentícios. Quando alguém visitar seu site, ele poderá ler sobre a oferta do dia ver o catálogo online, os fregueses também poderão saber mais sobre a Olivebranch e sobre seus eventos.

Você vai aprender como:

• Visualizar as páginas em um browser

• Definir um site local

• Escolher propriedades das páginas como background (imagem de fundo) e cores dos links

• Criar um mapa do site

• Criar links

• Criar um layout com layers (camadas) e converter as camadas em tabelas

• Usar uma “tracing image”

• Editar uma tabela

• Formatar textos aplicando estilos

• Aplicar um modelo

• Adicionar “behaviors”

• Inserir arquivos Flash

; Para o Dreamweaver as layers são como as caixas de texto para o Word.

Nota: Neste tutorial as páginas terão certas características que só serão visualizadas em browsers 4.0 ou superiores (Netscape Communicator, Microsoft Internet Explorer).

Tutorial Macromedia Dreamweaver 2

Visualizando a versão completa do Site. Vamos dar uma olhada na versão final do site para termos um idéia do que vamos fazer.

1. No Dreamweaver, escolha File > Open. Encontre a pasta do Dreamweaver, abra a pasta tutorial, e depois a pasta Olivebranch_site, se você não mudou o caminho na hora de instalar ele deve estar em: C:\Arquivos de Programa\Macromedia\Dreamweaver 2\Tutorial\ Olivebranch_site.

2. Selecione index.htm para abrir a home page na janela Document. Não edite esta página, pois ela já está completa. Nós vamos trabalhar em uma outra versão.

3. Escolha File > Preview in Browser, e então selecione um browser para visualizar. (Lembre-se de usar um browser 4.0 ou superior).

; Para conseguir visualizar o site completamente você vai precisar do Flash Player, um plug-in da Macromedia, instalado em seu browser. Para saber se você tem ele instalado vá para Help > About plug-ins e procure por Shockwave Flash. Se você não encontrou pode fazer o download em: http://www.macromedia.com/shockwave/download/

4. Passe o mouse sobre os quatro itens no lado esquerdo da página (about, events, e catalog) e note que os itens mudam indicando que eles são links ativos. Click em qualquer um deles para explorar as outras páginas. Nota: A seção gift basket não será usada.

5. Feche o browser quando você enjoar de ver o site.

Tutorial Macromedia Dreamweaver 2

Como as páginas do tutorial estão agrupadas

Tanto as páginas HTML completas como as parcialmente completas usadas neste tutorial estão na pasta Olivebranch_site. Imagens e outros arquivos associados estão em um diretório abaixo.

Cada arquivo tem um nome significativo – por exemplo, o arquivo HTML para a página de eventos é nomeada events_main.htm. Os arquivos parcialmente completos possuem os mesmos nomes mas com o sufixo DW2_; dessa forma o arquivos de eventos parcialmente completo chama-se DW2_events_main.htm.

Tutorial Macromedia Dreamweaver 2

1) Definindo Um site local

Para começar a trabalhar com o Dreamweaver, você precisa criar um site local. Este site define a estrutura das páginas que você está criando. Um site é um local de armazenamento para todos os documentos (páginas HTML) e arquivos (imagens, sons, etc.) pertencentes ao site na web, em outras palavras é um local no seu disco onde ficará um cópia do seu site na web. Dessa forma você vai trabalhar como se estivesse criando um texto e colocando figuras nele, depois de pronto é só carregar este site local para o seu provedor na web.

Precisamos então definir um nome e uma pasta (root folder), para que o Dreamweaver saiba onde você planeja armazenar todos os arquivos deste site. Você deve criar um site local para cada site da web que você trabalhar.

Neste tutorial vamos escolher a pasta Olivebranch_site para ser usada pelo site local.

/ Se até hoje, a única coisa que você costuma fazer na Internet é navegar com seu browser, então talvez você esteja um pouco confuso com estes conceitos sobre site local, site web. Este tutorial não tem a pretensão de ensinar estes conceitos, apenas mostrar como eles funcionam no Dreamweaver, mas para você não sair por aí dizendo que eu te deixei na mão, você pode encontrar várias informações sobre estes conceitos em: http://nib.unicamp.br/~richard ou http://www.efuse.com/

Para criar um site local:

Agora nós vamos dar um nome para nosso site local e depois escolher o diretório em que ele estará localizado:

1. Abra a caixa de diálogo Site Definition (Definição do Site) no Dreamweaver: escolha File > New Site.

2. Na caixa de diálogo Site Definition, certifique-se de que Local Info está selecionada na lista Category

3. No campo Site Name, escreva My_Tutorial, este será o nome de nosso site. Este nome é basicamente um apelido que direciona diretamente para a pasta que definimos como nosso site local.

4. Click na pasta à direita do campo Local Root Folder e navegue até a pasta Olivebranch_site e click Select.

Tutorial Macromedia Dreamweaver 2

Nota: O caminho completo para a pasta Olivebranch_site irá variar dependendo de onde você instalou o Dreamweaver 2. Por isso não se preocupe se o caminho mostrado na figura for diferente do seu.

5. Observe que existe um Check Box chamado Cache. Deixe ele como está, quando você for criar o site, o Dreamweaver vai perguntar se você quer criar um cache. Você pode marcá-la agora ou depois. Se você marcar agora o Dreamweaver vai mostrar uma janela dizendo que irá criar o cache, e você vai ter que confirmar mais uma vez, quando estiver criando o site.

6. Click OK. Uma nova janela aparece perguntando se você gostaria de criar um arquivo de cache para este site. Criando um cache para os arquivos do nosso site, cria-se um registro de todos os arquivos existentes neste site, assim o Dreamweaver pode atualizar os links mais rapidamente se você mover, renomear ou apagar um arquivo. A janela Site mostra uma lista de todas as pastas e arquivos que o site local My_Tutorial contém. Esta lista também funciona como um gerenciador de arquivos (como o Windows Explorer), permitindo que você copie, cole, apague, mova e abra arquivos da mesma forma que você faz com o Windows Explorer.

Atenção: Sempre que você quiser apagar, mover, renomear, criar, ou qualquer outra ação deste tipo com os arquivos do seu site, use a janela Site. Dessa forma o Dreamweaver gerencializa estas mudanças, evitando desastres! Por exemplo, se você mover uma imagem que esta em várias páginas através da janela Site, o Dreamweaver muda automaticamente os links de todas estas páginas para encontrar a figura neste novo local. Vai por mim, depois não diga que eu não avisei.

Tutorial Macromedia Dreamweaver 2

7. Estamos com duas janelas abertas, certo? Pois, bem feche a janela Document, aquela que está com o arquivo index.htm. Mas deixe a janela Site aberta!

Quanto à criação do site local o tutorial da Macromedia para por aqui. Talvez você me pergunte: Como é que eu vou colocar este Site na Internet? Vou ter que usar um daqueles programas de ftp e copiar os arquivos?

Para aqueles que quiserem saber como fazer com que o Dreamweaver faça o upload do nosso site leia a próxima seção. Se isto não te interessar vá para o próximo capítulo, se você decidir ler a próxima seção, lembre-se: Ela não está no tutorial da Macromedia.

Fazendo o Uploading de um site

Primeiro deixe-me explicar o que é upload. É simples, você está fazendo um site para colocar na Internet, ou qualquer outra “net” que use HTML. Você criou o site em seu computador e agora vai copiá-lo o disco que está no computador de um provedor. Assim ele estará acessível para todos que têm acesso a internet. Isso é upload, copiar seu site do seu computador para o computador do provedor através da própria internet.

Para definir as opções do servidor:

1. Na janela Site, abra o menu Site > Define Sites. Na caixa com os nomes dos sites clique em

My_Tutorial, para selecioná-lo. Então clique no botão Edit.

2. Na caixa Category clique em Web Server Info. No menu Server Access selecione FTP. Vou demonstrar apenas o acesso via ftp pois este é a forma mais comum, e é um pouco mais complicada, já que na Local/Network é só localizar a pasta.

Tutorial Macromedia Dreamweaver 2

3. No campo FTP Host digite o endereço do ftp do provedor no qual ficará a sua página. Para exemplificar vou usar um nome qualquer, mas você deve entrar em contato com seu provedor para saber o endereço correto. Por exemplo: usuarios.provendo.com.br.

4. Em Host Directory, você deve colocar o nome de seu diretório público. A advertência sobre o exemplo no passo 3 serve também para agora. Por exemplo: public_html.

5. Para o campo Login, você deve digitar o seu login, isto é o nome que você usa para ser identificado no provedor que dará lugar às suas páginas. Em password você deve colocar a sua senha, mas para ter maior segurança deixe em branco. Na hora de fazer o upload o Dreamweaver vai requisitá-la.

6. Clique OK e depois Done.

Pronto! Quando estivemos com o tutorial completo nós vamos fazer o upload!

Tutorial Macromedia Dreamweaver 2

2) Editando a Homepage Olivebranch

Agora de você já tem a estrutura do site Olivebranch preparada, vamos abrir a versão incompleta da homepage. Vamos criar links e escolher uma cor e uma imagem para o background (de fundo), e um título para a página de tal forma que ela fica como a versão completa.

Para abrir a homepage parcialmente completa no Dreamweaver:

1. Na janela Site, dê um duplo clique em DW2_index.htm.

2. Feche a janela Site.

Definindo a cor e a imagem do Background

Se você usar tanto uma imagem como uma cor para o background, a cor aparecerá enquanto a imagem estiver sendo baixada, criando um background mais atrativos para os usuários enquanto eles esperam a imagem ser baixada. Se a imagem do background tiver pixels transparentes, a cor do background será mostrada através deles.

Para definir uma cor de background para a página:

1. Escolha Modify > Page Properties para abrir a caixa de diálogo Page Properties.

2. Altere a cor padrão do background digitando #FC no campo Background. Neste caso, você sabe a cor exata que você deseja. Mas você também pode escolher uma cor da paleta ou usar o “conta gotas” para escolher uma cor de um objeto qualquer na página.

3. Clique Apply para aplicar a cor do backgorund. Assim que você clicar Apply na caixa de diálogo

Page Properties, a página é atualizada na janela Document.

Agora, vamos especificar uma imagem para o backgrund da página:

1. Próximo ao campo Background Image, clique em Browse.

2. Selecione home_bg.jpg na pasta Assets da pasta Olivebranch_site.

Tutorial Macromedia Dreamweaver 2

3. Clique Apply para adicionar a imagem do background à página.

4. Deixe a caixa de diálogo Page Properties aberta por enquanto.

Depois destes passos, a nossa página deve estar assim:

Tutorial Macromedia Dreamweaver 2

Definindo o título da página.

; O título de uma página HTML é uma de suas partes mais importantes. O título deve ajudar ao usuário, dizendo a ele o que está prestes a aparecer enquanto o resto da página carrega no browser, além disso, é este título que identificará a página no histórico e na lista de bookmarks. Se você não nomear uma página, ela aparecerá na janela do browser e nas listas de histórico e bookmark como Untitled Document, ou Sem Nome se seu browser estiver em português.

Para definir um título para a página:

1. No campo Title da caixa de diálogo Page Properties, digite Olivebranch Gourmet Foods, como título da página, e então clique OK. A barra de título é atualizada para refletir o nome que você deu ao arquivo.

2. Escolha File > Save para salvar as alterações feitas.

Criando um mapa do site.

Uma mapa do site provê uma representação de alto nível da estrutura do site. Além disso você pode usar o mapa para adicionar novos arquivos para o site, para adicionar, remover e alterar links. Outro recurso muito interessante é que você pode transformar este mapa em uma imagem bitmap, para usar no próprio site ou imprimir.

O homepage de um site sempre aparece no topo do mapa; abaixo dela estão as páginas para as quais ela possui links. Se a pasta que você definiu como caminho do site tiver um arquivo chamado index.htm, o Dreamweaver irá automaticamente usá-la como homepage; como a homepage de nosso site My_Tutorial é chamada DW2_index.htm, iremos redefinir a homepage enquanto alteramos a aparência do mapa do site.

Tutorial Macromedia Dreamweaver 2

Para criar um mapa do site:

1. Na janela Site, pressione e mantenha o ícone Site Map que está no canto superior esquerdo e escolha Map and Files do menu pop-up.

A janela Site agora aparece dividida em dois “views” de seu local site: na esquerda a árvore do mapa do site representando a estrutura completa do site Olivebanch (com index.htm como a homepage), e na direita está a lista de arquivos que nós já conhecemos.

Agora vamos redefinir a homepage do site para que seja usada a versão do tutorial ao invés da versão completa.

Para trocar a homepage e modificar a aparência do mapa do site:

1. Escolha View > Layout no menu da janela Site para abrir a caixa de diálogo Site Definition.

2. Selecione Site Map Layout na lista Category da caixa de diálogo Site Definition.

3. Especifique a nova homepage do site clicando na pasta próxima ao campo Home Page e navegando para DW2_index.htm na pasta Olivebranch_site da pasta Tutorial.

Tutorial Macromedia Dreamweaver 2

4. Para termos 3 colunas digite 3 em Number of Columns.

5. Clique OK para fechar a caixa de diálogo Site Definition e retorne à janela Site.

O mapa do site é atualizado para refletir as mudanças, com a versão do tutorial como homepage no início do mapa.

Por enquanto, a versão tutorial da homepage contém apenas um link. Logo vamos estar adicionando mais links a ela.

6. Deixe a janela Site aberta por enquanto, assim você pode ver como o mapa do site é atualizado a medida que você vai adicionando links à homepage.

Tutorial Macromedia Dreamweaver 2

Criando Links

As imagens na coluna esquerda da homepage guiam os visitantes através do site Oliverbranch. A imagem do topo, about, já “linka” (permitam-me o aportuguesar esta palavra como sinônimo de “tem um link para”) para a página apropriada do site. Você adicionará links para os outros gráficos, events e catalog para que eles também linkem para as páginas apropriadas. ( Nós não vamos trabalhar com a imagem gift basket.)

(Parte 1 de 4)

Comentários