DREAMWEAVER CS5DREAMWEAVER CS5

O Dreamweaver CS5 é um editor avançado de páginas para Internet, pois possui ferramentas para usuários que não são familiarizados com as linguagens HTML, Java e PHP.

Com o Dreamweaver CS5, de maneira simples e rápida, é possível elaborar Web Sites pessoais e comerciais. Qualquer pessoa pode criar um site sobre o assunto que desejar. Atualmente, temos inúmeros domínios para páginas, gratuitos e particulares. Domínio é o endereço do site na Internet, como por exemplo, “www.cade.com.br”, que é o domínio do site Cadê.

INTRODUÇÃOINTRODUÇÃO

Dreamweaver CS5

-5-

CAPÍTULO 1..................................................................................

• Iniciando e conhecendo o dreamweaver.................................................8• Interfaces................................................................................................23• Criando e confi gurando sites.................................................................24• Exercícios...............................................................................................29

CAPÍTULO 2.................................................................................

• Criando arquivos....................................................................................32• Utilizando quadros..................................................................................34• Exercícios...............................................................................................42

CAPÍTULO 3..................................................................................

• Defi nir propriedades para a página........................................................44

CAPÍTULO 4.................................................................................

• Inserindo e formatando textos................................................................48• Css (cascading style sheets)..................................................................49• Css avançado..........................................................................................51

CAPÍTULO 5.................................................................................

• Inserir e editar imagens...........................................................................56• Trabalhando com camadas (layers).........................................................66• Comportamento para as camadas.........................................................67• Exercícios...............................................................................................69

CAPÍTULO 6.................................................................................

• Mapas de imagem...................................................................................71• Criar e gerenciar links............................................................................73• Exercícios................................................................................................79

SUMÁRIOSUMÁRIO

CAPÍTULO 7..................................................................................

• Inserir objetos em formulários html........................................................81• Exercícios...............................................................................................86

CAPÍTULO 8..................................................................................

• Introdução ao javascript.........................................................................88• Javascript: open browser window..........................................................89

CAPÍTULO 9.................................................................................

• Tutorial de um site simples – parte 1......................................................95 • Tutorial de um site simples – parte 2......................................................98• Tutorial de um site simples – parte 3....................................................121

-12-

Dreamweaver CS5

A barra fi cará assim:

- Exibe as principais opções para formatar a página, como: Forma de Exibição, Forma, Texto, Inserir Imagens, etc.

- Hiperlink: Insere um link para outra página.

- E-mail Link: Insere um link para mandar um e-mail.

- Âncora: Link para um local específi co da mesma ou outra página.

- Tabela: Para inserir uma tabela.

- Insert Div Tag: Para Inserir e Criar estilos CSS no layout da página.

- Imagem: Inserir uma Imagem.

- Media: Inserir um arquivo de um outro programa, como Flash e Fireworks, por exemplo.

- Data: Para Inserir uma data.

- Server Side-Include: Para inserir o tipo de servidor (IIS ou Apache), para páginas dinâmicas.

- Comentário: Insere um comentário em sua página.

- Modelos: Insere modelos pré-estabelecidos.

- Seletor de tags: Insere comandos das diversas linguagens.

- Horizontal Rule: Insere uma linha na horizontal.

- Widget: Permite visualizar e confi gurar widgets utilizando uma interface visual.

Dreamweaver CS5

-71-

MAPAS DE IMAGEM......................................................................

Essa opção será utilizada se houver a necessidade de fazer algum vínculo apenas em uma parte da imagem e não em toda ela. Assim é defi nido o ponto ativo do link dentro de uma imagem.

Ao selecionar a imagem, observe que no canto esquerdo inferior do Inspetor de Propriedades são exibidas três opções de mapas de imagens.

Dreamweaver CS5

-73-

CRIAR E GERENCIAR LINKS........................................................

É muito importante que um site seja chamativo, interessante, mas que acima de tudo, seja fácil de navegar entre as suas páginas. Para isso, é necessário haver conexões entre as páginas, por meio dos links. Os links podem ser inseridos em textos, imagens ou em outros objetos. Existem seis tipos diferentes de link’s.

RELATIVO OU INTERNO

Onde será especifi cado apenas o nome do arquivo, como por exemplo, nomedoarquivo.HTML. Para isso, selecione o texto, a fi gura ou o objeto e no Inspetor de Propriedades clique no campo Link e digite o nome do arquivo.

Obs: Não esqueça de digitar a extensão do arquivo, como: .doc .jpg .HTML

ABSOLUTO OU EXTERNO

Onde será especifi cado o caminho inteiro do arquivo, por exemplo, www.google.com (irá abrir o site google). Para isso, selecione o texto, fi gura ou objeto e no Inspetor de Propriedades, no campo Link digite o caminho completo do arquivo.

Dreamweaver CS5

-89-

JAVASCRIPT: OPEN BROWSER WINDOW.....................................

MENSAGEM POPUP

Com a janela aberta que foi escolhida para ser exibida, vá ao painel de edição da página, selecione o painel Tag <body> e, em seguida, clique sobre a guia Behaviors. Na guia, clique no botão + e escolha a opção Popup Message.

Onclick – Quando clicar com o mouse (botão esquerdo).Ondbclick – Quando clicar duas vezes.Onmousemove – Quando o mouse passar em cima da camada.Onkey Press – Quando uma tecla for pressionada.

As ações fornecidas são cuidadosamente escritas pelos programadores do Dreamweaver, para proporcionar o máximo de compatibilidade entre os diferentes navegadores.

As funções JavaScript podem ser armazenadas no cabeçalho da página ou em arquivos externos de extensão *.js.

Dreamweaver CS5

-101-

Obs: A primeira janela que aparecer será o arquivo principal e o chamaremos de index.htm. Este é o arquivo que irá conter os frames utilizados. Escolha uma pasta e salve.

Em seguida aparecerá outra janela com a borda destacada. Salve esse arquivo como conteúdo1.

Novamente aparecerá uma janela com o frame destacado. Vamos chamá-lo de links.

-122-

Dreamweaver CS5

INSTALANDO EXTENSÕES

As extensões são inseridas no Dreamweaver através do Extension Manager.

Para abrir o Extension Manager clique no menu Iniciar, vá até Todos os programas, Adobe Master Collection CS5 e, em seguida, clique em Adobe Extension Manager CS5.

Obs: O Extension Manager permite instalar extensões, remover, descobrir mais informações e escrever uma análise de uma extensão instalada.

Ele também fornece uma maneira conveniente de apresentar o Site da Web Dreamweaver Exchange que o ajudará a encontrar mais extensões.

Ao clicar na opção Adobe Extension Manager, uma janela será aberta. Nela, instale uma extensão.