© 1997–1998 Macromedia, Inc. Todos os direitos reservados. Macromedia, o logotipo da Macromedia, Dreamweaver, Director, Fireworks, Flash, Fontographer,

FreeHand e Xtra são marcas comerciais ou registradas da Macromedia, Inc. Os demais nomes de marcas também podem ser marcas comerciais ou registradas

pertencentes a outras empresas.

Imagem do Dreamweaver desenvolvida no FreeHand pela Research Studios de Londres. Fonte desenvolvida no Fontographer pela Font Bureau, Inc.

CURRÍCULO DO DREAMWEAVER

êNDICE

Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

Lição 1: Familiarizando-se

Configure uma pasta Raiz Local para acomodar seu site

da Web e familiarize-se com a interface, as paletas e os

inspetores do Dreamweaver. Crie um novo documento,

faça algumas formatações básicas de texto, mude formatos

de cabeçalho e parágrafos e alinhe o texto em uma página.

Crie e formate mais páginas e comece a construir um site.

Aprenda a importar texto e a reformatá-lo, a trabalhar com

imagens e a criar linhas, listas horizontais e hyperlinks entre

Crie um mapa de imagem e adicione links, aprenda a

incorporar arquivos de multimídia e a criar e incorporar

Aprenda a inserir, configurar e modificar uma tabela, de

modo a atender a suas necessidades. Aprenda também a

criar um conjunto de quadros para facilitar a navegação e a

Aprenda a usar páginas de estilo para obter um maior controle

sobre a formatação de documentos. Use o Dreamweaver para

configurar estilos de documentos e para criar e modificar uma

Aprenda a usar os efeitos rollover para tornar as páginas mais

dinâmicas. Trabalhe com camadas, comportamentos e linhas

de tempo para criar efeitos rollover e animação. Use os

recursos FTP do Dreamweaver para acessar seu servidor Web

e transferir arquivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

ii

iii

INTRODU.ÌO

O Dreamweaver é um programa profissional destinado à criação de sites da Web com recursos

inovadores e recursos abrangentes de planejamento, úteis tanto para os iniciantes como para

desenvolvedores da Web experientes.

Você pode usá-lo para criar visualmente sites da Web, graças a sua interface gráfica de fácil utilização

que mostra as modificações à medida que são efetuadas. Além disso, terá a certeza de que o HTML

gerado nos bastidores sairá consistentemente limpo, conciso e editável.

Ao contrário da maioria dos programas visuais de criação na Web, o Dreamweaver não altera o código

HTML quando importa documentos de um outro programa HTML.

O Dreamweaver oferece muitos recursos que facilitam o design de uma página. Você poderá testar

suas páginas virtualmente usando diferentes navegadores da Web, inserir uma variedade de tipos de

arquivos de multimídia clicando em um botão, selecionar cores de uma paleta apropriada à Web

apresentando convenções de nomeação hexadecimal e até mesmo arquivos FTP para um servidor de

arquivos remoto a partir do programa. Entre os recursos mais avançados, está incluído o suporte para

as últimas inovações da Web, incluindo Páginas de Estilo Cascata e HTML Dinâmico.

Neste curso, você irá aprender fazendo, usando o Dreamweaver para desenvolver passo-a-passo

exemplos de projetos da Web. Aprenderá a criar páginas HTML, formatar texto, inserir imagens e

objetos multimídia, definir links e trabalhar com tabelas e quadros, páginas de estilo e recursos HTML

Dinâmico.

O Dreamweaver acompanha um sistema extensivo de Ajuda on-line, incluindo tutoriais e arquivos de

Ajuda que podem ser pesquisados. A maioria das paletas também tem Dicas de Tela que descrevem a

função de ícones quando o cursor é mantido sobre eles.

O CD-ROM que acompanha as lições contém exemplos de arquivos que facilitam o acompanhamento

dos exercícios passo-a-passo, à medida que se passa de uma lição para outra.

iv CURRÍCULO DO DREAMWEAVER

LI.ÌO 1: FAMILIARIZANDO-SE

OBJETIVOS

Ao final desta lição, você será capaz de:

• definir uma pasta Raiz Local para seu site da Web

• entender a interface, as paletas e os inspetores do Dreamweaver

• criar um novo documento e executar formatações básicas de texto

• alterar formatos de cabeçalhos e parágrafos e alinhar o texto na página

• visualizar páginas em um navegador

SUMçRIO

A melhor maneira de conhecer o Dreamweaver é utilizando-o. Nesta lição, você irá aprender a configurar

um site, usar as janelas e paletas do Dreamweaver para a criação de uma página, adicionar texto e

inserir uma imagem. Você também irá aprender a acessar o inspetor HTML e a visualizar sua página em

um navegador.

Antes de abrir o programa, abra o CD-ROM que acompanha estas lições e copie a pasta denominada

“Examples” na pasta Dreamweaver para seu disco rígido. Coloque-a na érea de trabalho ou em um local

em que ela possa ser facilmente encontrada.

EXERCêCIOS

O Dreamweaver facilita a construção de um site da Web em seu computador local e sua transferência

posterior para um servidor Web. Antes de começar a criação de páginas, convém estabelecer um local

para seu site para que o programa possa manter o controle de seus arquivos quando mais páginas,

gráficos e outros elementos forem adicionados.

Defina uma Pasta Raiz Local

Web. Seu site local funcionará como um “espelho” do site que está realmente on-line.

do site.

3. Clique no botão Browse (PC) ou Choose (Mac) para definir uma pasta de seu disco rígido como a

pasta Raiz Local deste site. Nesta pasta serão armazenados os arquivos do site. Abra a pasta

“Examples” que foi copiada do CD-ROM e selecione a pasta “bookstore”.

4. As demais opções da caixa de diálogo servem para estabelecer a conexão entre seu site local e um

servidor remoto. Se um servidor remoto ainda não foi estabelecido, você pode deixar estas opções

em branco e retornar mais tarde para preenchê-las.

5. Clique em OK. Você verá um diretório do site. Voltaremos a esta tela quando explicarmos como se

carrega arquivos em um servidor remoto. Por enquanto, feche a janela e volte ao espaço de trabalho

do Dreamweaver para construir a primeira página.

1 CURRÍCULO DO DREAMWEAVER

será mostrado em um navegador da Web. Uma página em branco é aberta automaticamente quando o

Definindo as Propriedades da Página de sua Primeira Página

1. Com a página aberta, clique com o botão direito do mouse (PC) ou clique pressionando Control

menus.

2. Digite um título na caixa de texto. Este título irá aparecer na lista Marcadores ou Favoritos do

navegador e, por isso, deve ser descritivo. Chame esta página de “Mythical Bookstore”.

selecionar uma amostra de cor. A melhor cor para este exercício é branco, a cor padrão. Se quiser

mais sobre os links na próxima lição.

Essa será a “página de entrada” do site que está sendo construído.

CURRÍCULO DO DREAMWEAVER 2

O inspetor Property

1. Depois de fechar a janela Page Properties, clique na página e digite as palavras “Mythical

2. Realce as palavras digitadas para modificar o formato e a fonte usando os menus do inspetor

Modifique a fonte padrão para “Arial”. Mude o tamanho da fonte para “7” e depois retorne ao

centralizar o texto na página.

3. Coloque o cursor após o cabeçalho e pressione Enter (PC) ou Return (Mac) e digite seu endereço.

Realce a nova linha e altere o tamanho da fonte para “5”. Altere a cor da fonte clicando na caixa

cinza embaixo da janela de tamanho de texto. Observe que as alterações de cor efetuadas no

inspetor Property são válidas apenas para o item selecionado e não para toda a página. Deixe a

janela aberta. Mais tarde, examinaremos outras opções.

3 CURRÍCULO DO DREAMWEAVER

CURRÍCULO DO DREAMWEAVER

A paleta Objects

ferramenta contém botões para a

inserção de vários tipos de objetos,

como imagens, tabelas, camadas,

applets e outros elementos de

multimídia.  Manter

o cursor sobre cada um dos ícones da

paleta abre uma caixa que explica a

função de cada botão.

2. Agora, vamos inserir uma figura entre

o cabeçalho e o endereço. Coloque o

cursor logo após o cabeçalho e

pressione Enter (PC) ou Return (Mac)

para abrir um espaço.

3. Clique no botão superior da Paleta

Objects para escolher uma imagem,

na caixa de diálogo Insert Image clique

no botão Browser e passe para a

pasta “images” localizada na pasta

Raiz Local (“bookstore”). Clique no

arquivo jpeg denominado books.jpg,

selecione-o e clique no botão Select

e, em seguida, clique em OK. A figura

deve aparecer embaixo do cabeçalho.

4. Coloque o cursor junto à imagem sem

irá para o lado direito da página.

para retorná-la ao centro da página.

5. Clique na figura e observe que o

inspetor Property automaticamente

muda para exibir as propriedades da

imagem, inclusive suas dimensões e

localização. (Observe que a opção

junto a um bloco de texto e não para

alinhá-la na página. Vamos deixá-la de

lado por enquanto e examiná-la na

próxima lição.

6. Se você não gostar da combinação de

cores, modifique as cores na janela

Page Properties ou no inspetor

Property de texto.

7. Lembre-se de salvar as alterações

feitas.

O Launcher

O Inspetor HTML

<h1 align=”center”><font face=”Arial” color=”#9933FF”>Mythical Bookstore </font></h1>

Estes elementos são instruções que informam ao navegador como a página deve ser exibida. Observe

que cada conjunto de instruções requer uma marca inicial e uma final. A instrução align=“CENTER” é

as palavras “Mythical Bookstore”.

Se você é um iniciante em HTML, convém dedicar algum tempo estudando o código para as marcas

criadas para que possa entendê-las e editar o código diretamente, quando necessário. Existem no

mercado muitos livros bons que podem ajudá-lo a conhecer HTML.

O Dreamweaver permite que a janela de documento e o inspetor HTML permaneçam abertos ao mesmo

tempo para possibilitar o acompanhamento das alterações feitas nas duas visualizações. Quando se

realça o texto na janela de documento, este também aparece realçado no inspetor HTML, conforme

visto na Figura.

Observe que o inspetor HTML pode ser acessado de quatro maneiras diferentes: a partir do Launcher,

5 CURRÍCULO DO DREAMWEAVER

CURRÍCULO DO DREAMWEAVER

É aconselhável testar o trabalho em diferentes navegadores para garantir a boa apresentação das

páginas criadas.

Configurando um Navegador de Visualização

O Dreamweaver facilita a configuração de links de visualização com diferentes navegadores. Trata-se de

deve ser configurado.

3. Clique no arquivo do programa no navegador ou selecione e clique em Abrir (Open) e depois em

OK. Clique em OK para fechar a caixa de diálogo Preferences.

Agora o navegador foi adicionado à lista nas opções Preview in Browser. Você pode adicionar

outros navegadores da mesma maneira e designar um deles como seu navegador principal.

página no navegador principal. Compare-a à página que aparece na janela Document e no inspetor

HTML.

Mais tarde, aprenderemos como o Dreamweaver também pode testar seus documentos nos diferentes

navegadores, “virtualmente” sem uma visualização, e fornecer um relatório dos eventuais problemas ou

• Examine as várias opções de menu e procure se sentir à vontade no programa. Explore as

diferentes paletas e inspetores, bem como seus diversos acessos e utilizações.

• Acompanhe o exercício desta lição para criar uma outra página, usando diferentes textos e

imagens (ou faça uma cópia da página que acabou de criar) e teste outras definições de cor e

alinhamento contidas nas Janelas dos inspetores Page Properties e Property.

• Com a nova página aberta, abra e feche o inspetor HTML com a tecla F10 e verifique como as

alterações feitas na janela de documento se refletem no código HTML. Faça alterações no

código HTML e veja o que acontece com a janela de documento.

• Explore os tutoriais e a seção Ajuda do programa.