Dreamweaver Avancado Cadex

MATERIAL EXCLUSIVO E-CADEX - WWW.CADEX.COM.BR.
Copyright 2004 CADEX DESING.

Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site.
C A D E X - Todos os direitos reservados.
1

Autora:
MARCIA BUCHI DO NASCIMENTO

DRE/MwE/\ER MX
AANADO - 2. Porte.

2

1.
2.
3.
4.
5.
6.
7.
S.
9.
10.
11.
Introduo
Curso On-Line
Mapeamento de imagem
Template
Criando pginas a partir do Template
Modificando um Template
Formulrio
Imagens interativas
Boto Flash
Texto Flash
Frames
3
3
5
5
6
S
9
16
16
1S
19

3

1 - APRESENTAO:

Esta apostila foi cuidadosamente elaborada pelo Portal E-Learning www.cadex.com.br e
parte didtico do curso http://www2.cadex.com.br/dreamweaver.htm. Material exclusivo com
finalidade de auxiliar o usurio sobre a forma de consulta e acompanhamento do curso On-Line
E-CADEX. O CADEX, tentou abranger o mximo de aproveitamento sobre todo o assunto
relacionado ao DREAMWEAVER MX.
Toda informao referente ao contedo desta apostila de inteira responsabilidade da
autora e administradora do curso. A reproduo do material e circulao ser permitida desde
que citados a fontes e o nome da Autora.

O curso On-Line, foi desenvolvido em 02 (dois) Mdulos com objetivos de levar maiores
conhecimentos e aprendizado a aqueles que querem iniciar a criao de Sites atravs desta
linguagem de marcao de hipertexto.

2. CURSO ON-LINE:

O que :

O Dreamweaver MX um editor profissional desenvolvido pela Macromedia
para a criao e gerenciamento de sites e pginas Web, com diversos recursos
avanados para o desenvolvimento de qualquer tipo de site. Programa completo para
criar documentos HTML, JSP ou ASP.NET. Adapta-se a diversos estilos de trabalhos e
nveis de experincia, sendo muito flexvel.

Pblico alvo:
Destina-se a web designers, web masters, estudantes, com o perfil de
programador visual Web. Familiarizados com a Linguagem HTML e tambm para
principiantes que pretendem construir sites (aconselhvel ter conhecimento dos
cdigos HTML) com um programa inovador. Este curso tem como objetivo levar
conhecimentos tericos e prticos para realizao da construo de pginas Web e
assim proporcionando ao usurio conhecimento e aperfeioamento e com o
conhecimento adquirido aqui, ele estar apto para criar e inovar pginas Web.

4

Durao do Curso:

Um dos benefcios de se utilizar o Portal E-Learning (O CADEX) quanto ao
tempo de durao do curso, onde cada Membro encarrega-se de se programar
conforme sua disponibilidade de tempo e horas nos estudos. Lembrando-se que o
aperfeioamento depender da disponibilidade de horas e pela dedicao de cada
aluno.

Programa:

DREAMWEAVER MX Bsico 1. Parte: Tem como finalidade introduzir a inicializao
do conhecimento do Dreamweaver, trazendo a familiarizao com os comandos mais
simples como: formatao de texto, adicionando imagens e etc.

DREAMWEAVER MX Avanado 2. Parte: Tem como finalidade introduzir os
comandos mais avanados como: mapeamento, criar arquivos templates e etc.

Como funciona:

As aulas esto disponveis on-line de forma gradativamente para membros
cadastrados no www.cadex.com.br.
Cada aluno poder programar o melhor horrio para estudar e realizar os
exerccios, propostos ao longo do curso. Os alunos que possuem algum conhecimento
do Dreamweaver MX, podero pular o cronograma de ensino, mais sempre
respeitando os trabalhos a serem entregues no final do curso para avaliao final do
que desempenhou.
Os Alunos podero tirar as suas dvidas enviando suas perguntas atravs do e-
mail do mabuc@cadex.com.br.
O Grupo poder participar e interagir com outros membros e com profissionais
da rea atravs de nosso frum no http://www.cadex.com.br/forum/index.php
enviando suas mensagens de duvidas e dicas para o frum, onde diariamente
estaremos verificando e respondendo todas as mensagens.
No final do treinamento os alunos podero disponibilizar seus trabalhos
realizados, em nosso MURAL e a Certificao do conceito de reconhecimento virtual
concedido atravs de uma avaliao feita atravs dos trabalhos realizados do inicio at
o fim do curso e est avaliando cada aluno em suas atitudes individuais e em
comparao as atitudes do coletivo. Ao termino do contedo avaliado o aluno
submetido a uma avaliao final para comprovar a avaliao do desempenho dele ao
logo de toda a trajetria do curso.

5

3. MAPEAMENTO DE IMAGEM:

O mapeamento de imagens utilizado quando se deseja efetuar um ou mais
links em apenas uma parte da imagem e no na imagem inteira.
Selecione a imagem e no Inspetor de propriedades no campo Mapa, clique
sobre um dos trs formatos: retangular, oval ou poligonal, v at a parte da
imagem onde deseja mapear. Observe que o ponteiro do mouse se transforma em
uma cruz, com o boto esquerdo do mouse pressionado, desenhe a forma que voc
escolheu,ao soltar o boto observe que esta parte ficou selecionada. No campo link do
Inspetor de propriedades clique na pasta amarela e localize a pgina desejada.
Veja abaixo um exemplo de mapeamento

Escolha um destes trs formatos e desenhe sobre a parte desejada na
imagem.

4. TEMPLATE:

Os templates ou modelos, so utilizados quando se tem um layout padro para
todas as pginas, ou seja, quando todas as pginas forem utilizar as mesmas imagens,
links , textos e etc.
Nestes templates sero criadas regies que sero bloqueadas e regies que
sero editveis (que podem ser alteradas e etc...).
Vamos criar um exemplo de templates. Abra uma nova pgina e crie uma
tabela com 3 linhas e as seguintes configuraes: Preenchimento da clula=0,
Espaamento entre as clulas=0,
Largura=800 e Borda=0.
Vamos supor que nesta primeira linha da tabela , voc ir utilizar uma imagem
de logotipo do seu site, e na terceira linha voc ir utilizar um texto, mas somente
uma parte dele voc deseja que seja editvel e a segunda linha ser o corpo da
pgina, a qual ser deixada como regio editvel da pgina. Selecione esta segunda
linha, pressionando a tecla CTRL e clicando com o mouse sobre a mesma,v em menu
Inserir/Objetos de modelos/Regio editvel. Na caixa de dilogo d um nome a
esta regio editvel, exemplo : corpo, clique em no Boto [OK]. Na terceira linha
selecione o trecho do texto que voc deseja ser editvel e faa o mesmo
procedimento que foi feito para a segunda linha.

6

Observe que a clula e o trecho do texto ficaram demarcados e com os
respectivos nomes.
Voc poder deixar a primeira linha j com a imagem , ou poder adiciona-la
posteriormente. Salve este templates, v em arquivo/salvar como modelo e na
caixa de dilogo no campo salvar como d um nome a este templates, exemplo:
site_modelo.

OBS: O Dreamweaver salva os templates com a extenso .dwt e ficar armazenado
na pasta Templates, que ser criada automaticamente na raiz do site.
Feche este arquivo.

5. CRIANDO PGINAS A PARTIR DO TEMPLATE:

Voc j tem um modelo e poder utiliza-lo para criar outras pginas para o seu
site. V em menu Arquivo/Novo e na caixa de dilogo clique em Modelo, no campo
modelo clique no site "Primeiro Site. No campo ao lado aparecer o templates que
voc salvou como site_modelo. Clique em criar.

7

Observe que a rea de trabalho ficou com uma borda amarela, isto significa que
voc est usando um Templates. Repare que ao passar o mouse sobre a primeira linha
o cursor fica com um smbolo "Pare", isto significa que esta regio est bloqueada e
s poder ser modificada no prprio Templates. Na segunda linha que est demarcada
em azul voc poder edita-la, pois a mesma foi definida como uma regio editvel.
Salve esta pgina normalmente como HTML, v em Arquivo/Salvar como e na caixa
de dilogo de um nome a esta pgina.

8

6. MODIFICANDO UM TEMPLATE:

Como vimos o templates um modelo e ao criarmos novas pginas com o
templates o Dreamweaver pega as informaes do Templates e as projeta no arquivo
HTML. Suponha que voc queira modificar o logotipo do seu site. Usando o templates,
basta voc altera-lo que automaticamente sero feitas a alterao em todas as
pginas.
V ao menu Arquivo/Abrir , clique na pasta Templates e no arquivo
site_modelo. Faa as alteraes desejadas. Salve este templates. Clique em Salvar
tudo e na caixa de dilogo pressione a tecla "Shift" e selecione todas as pginas que
utilizaram este templates.

Clique em atualizar, aparecer uma nova tela informando quantas pginas foram
atualizadas . Clique em fechar

9

7. FORMULRIO:

O Dreamweaver disponibiliza vrios recursos para a criao de formulrios, que
so teis para pesquisas, visitas, e etc...
No painel inserir clique em formulrio.

- insere um contorno tracejado vermelho indicando um formulrio.

Observe que o inspetor de propriedade foi alterado.

- Define o nome do formulrio.

- Inseri a URL, o endereo mailto (e-mail), ou
navegar para um arquivo.

- Define a forma como o navegador e o servidor iro processar o
formulrio

- Define qual quadro ou janela o servidor utilizar ao exibir uma
resposta ao formulrio.

- Define o tipo de codificao (qual formado os dados
so enviados).

- insere um campo e texto .

10

Observe que o inspetor de propriedades foi alterado

- Define o nome do campo.

- Define o comprimento do campo em pixels.

-Define o nmero mximo de caracteres que podem ser inseridos no
campo.

- Define:Linha simples - texto digitado somente em
uma linha;Multi-linha - texto com vrias linhas; Senha - texto aparecer como
asteristicos.

Observe que se voc optar por "Multi-linha, o campo de texto se altera

E no inspetor de propriedades os campos: valor inicial e quebra autom.de linha,
so alterados, onde no campo Valor inicial voc poder colocar algum texto ou deixar
em branco e no campo (Quebra autom. de linhas) voc poder optar por:
Padro - rolagem do campo determinado pelo navegador.
Desativada - o texto digitado s mudar de linha quando o usurio utilizar a tecla
[ENTER]
Virtual - Haver a quebra de linha quando o texto chegar na borda direita da rea de
texto
Fsica - converte as quebras de linha quando os dados so enviados para o Servidor.

11

- Voc poder digitar algum texto ou apenas deixar
em branco.

- Inseri uma rea de texto com multi-linha.

- permite ao usurio escolher vrias opes .

Observe que o inspetor de propriedades alterado.

- Define o nome da caixa de seleo

- indicar nas informaes que ser passada para voc , a
opo que o usurio optou.

- Define se voc deseja que uma ou mais opes fique j
selecionada

- permite ao usurio escolher apenas uma opo .
Observe que o inspetor de propriedades alterado

- Define o nome do boto de opo.

12

- indicar nas informaes que ser passada para voc, a
opo que o usurio optou.

- Define se voc deseja que uma ou mais opes fique j
selecionada.

- Define um grupo de botes.
Ao acionar esta tecla aparecer uma caixa de dilogo.

No campo Nome - d um nome ao boto
No campo Botes de opo - acrescente ou diminua a quantidade de botes utilizando
os sinais + e -
No campo Identificador - clique no primeiro item e digite o nome da opo ( assim
sucessivamente com os outros identificador)
Clique em OK

- Define um boto menu em lista .

13

Observe que o inspetor de propriedade alterado.

- Define o nome da lista de opo.

- Neste campo,
estando a opo Tipo acionado em Menu, para se inserir as opes clique
em e abrir uma caixa de dilogo.

Nesta caixa de dilogo clique logo abaixo do item Identificador do item e v digitando
as opes (clique em + ou - para aumentar ou diminuir as opes) Clique no boto
[OK].

Observe que no inspetor de propriedades o item ficou
com a relao das opes que voc colocou na caixa de dilogo acima.

14
No campo Tipo estando acionado em lista para se inserir as opes, fao o
mesmo que no item anterior (Tipo estando acionado em Menu) e aps clicar no boto
[OK] o inspetor de propriedades ser alterado novamente.

- Define a altura da lista e no item Selees, se estiver
selecionado permiti mltiplas escolhas, para isto o usurio dever selecionar a opo e
manter a tecla CTRL pressionada e ir selecionando as outras opes.

-O browser carrega a opo desejada para uma outra pgina.
Ao acionar este campo aparecer uma caixa de dilogo

No campo Texto d o nome da opo
No campo Itens do menu permite acrescentar ou diminuir as opes utilizando os
botes [+] ou [-].

15

No campo Quando tiver selecionado, v para a URL - Clique em procurar e
localize a URL desejada, ou digite o endereo completo da URL: exemplo -
http://www.cadex.com.br
No campo Nome do menu - d um nome a esta opo.
No campo opes - Voc pode inserir o boto Ir aps o menu.
OBS: Esta opo selecionada caso voc queira ativar a primeira opo clicando no
"Ir, caso queira deixar esta opo apenas como rtulo, no selecione este item.

Selecione o primeiro item aps a alterao da URL.: retorna ao primeiro item aps a
alterao da URL. Clique no boto [OK].

Aparecer na rea de trabalho : ou caso voc tenha optado pelo item
"Inserir o boto Ir.

- Permite o usurio anexar um arquivo .

- Insere um boto.

Observe que logo aps acionar este boto,o inspetor de propriedade alterado

No campo (Denominao) voc digita o texto do boto, ou utilize o campo Ao
escolhendo uma das opes: o item Enviar o formulrio cria o boto o item
Redefinir o formulrio cria o boto e o item Nenhuma cria o boto .

16

8. IMAGENS INTERATIVAS:

A imagem cambivel o conhecido rollover, ou seja, quando se coloca o mouse
em cima de uma imagem , a mesma muda para uma outra imagem.
Clique em Inserir >>Imagens interativas e >>imagem cambivel, ou clique no cone
no Painel Inserir. Abrir a caixa de dilogo.

No campo Nome da imagem: nomeie esta imagem.
No campo Imagem original: clique no boto Procurar e localize a imagem.
No campo Imagem cambivel: clique no boto procurar e localize a outra imagem.
No campo Pr-carregar a imagem cambivel: deixe este item selecionado.
No campo Texto alternativo: Voc poder digitar algum texto que aparecer assim que
o mouse for colocado em cima da imagem.
No campo Quando tiver clicando, v para a URL : clique no boto procurar e selecione
a URL de destino (igual a link).

9. BOTO FLASH:

Boto Flash, so botes animados que voc poder utilizar em suas pginas
Clique em Inserir >>Imagens interativas e no >>Boto Flash, ou clique no cone
no Painel Inserir.

17

Aparecer a caixa e dilogo:

No campo Amostra: viso de vrios tipos de botes.
No campo Estilo: seleciona o tipo de boto desejado.
No campo Texto do boto: digite o texto do boto.
No campo Fonte: tipo de fonte.
No campo Tamanho:tamanho do texto.
No campo Link: clique no boto procurar e localize a URL desejada.
No campo Cor do fundo: adiciona uma cor de fundo.
No campo Salvar como: nomeie o boto deixando a extenso - *.swf.

18

10. TEXTO FLASH:

Texto Flash, so textos animados que voc poder utilizar em suas pginas
Clique em Inserir/Imagens interativas/Texto Flash, ou clique no cone no Painel
Inserir.

Aparecer a caixa e dilogo:

No campo Fonte - define uma fonte.
No campo Tamanho - define o tamanho da fonte.
No campo cor - define a cor do texto.
No campo Cor da imagem cambivel - define a cor do texto.
No campo Texto - digite o texto desejado.
No campo Mostrar a fonte - deixe este item selecionada para ver no campo Texto a
fonte escolhida.
No campo link - clique no boto procurar e localize a URL desejada.
No campo Cor de fundo - define uma cor de fundo.
No campo Salvar como - nomeie o arquivo deixando a extenso - *.swf.

19

11. FRAMES:

Os frames so divises da tela do browser, ou seja, mais de uma pgina em
uma s tela. Para se criar uma pgina com 2 frames ser necessrio 3 pginas, sendo
uma para cada frame e outra para a pgina principal que ter as informaes destes
frames.
Clique em >> Arquivo e >>Novo e abrir a caixa de dilogo:

No campo Geral/Categoria, clique em Conjuntos de molduras.
No campo Conjuntos de molduras escolha a moldura que desejar.

20

Outra opo utilizar o Painel Inserir, clique em molduras e escolha a moldura
desejada.

Observe que o Inspetor de propriedades foi alterado.

- Mostra a quantidade de linhas e colunas que possuem o frame
escolhido.
- Define se a frame ter bordas ou no.
- Define a cor da borda.
- Define a largura da borda.
- Define o tamanho da coluna.
- Define a unidade de medida.
- Mostra qual frame est sendo selecionada na rea de trabalho.
21

Para editar um frame, pressione a tecla "ALT" e com o mouse clique sobre o frame
que deseja editar.
Observe que o Inspetor de propriedades foi alterado:

- Define um nome para o frame.
- Define a URL que abrir no frame.
- Define a cor das bordas.
- Define se o frame ter ou no Barra de rolagem.
- Define se o frame pode ou no ser redimensionada no navegador do
visitante.
- Define a cor da borda.
- Define a largura e altura da margem.

Salvando um conjunto de Frames:
Voc poder salvar cada frame separadamente ou tudo simultaneamente. Para
salvar separadamente clique com o mouse sobre o frame, clique em Arquivo >>Salvar
a moldura como e na caixa de dilogo de um nome a este frame. Para salvar o
conjunto todo, clique sobre a linha que divide os frames v em Arquivo >>Salvar o
conjunto de moldura como e na caixa de dilogo de um nome a este frame.

22

OBS: Caso voc queira fazer um menu com vrios links em um dos frames, mas
deseja que estes links abram na outro frame, voc deve criar os links normalmente,
depois de feito isto, selecione o link e no campo (Destino) defina o frame a qual
deseja ser redirecionada.

Dreamweaver Avancado Cadex

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dreamweaver Avancado Cadex

Enviado por

Direitos autorais:

Formatos disponíveis

MATERIAL EXCLUSIVO E-CADEX - WWW.CADEX.COM.BR.

Copyright 2004 CADEX DESING.

Você também pode gostar