Dreamweaver MX - Manual Do Curso - Ptbrasil

MACROMEDIA DREAMWEAVER MX
Pgina 2 Manual de Curso

MANUAL DE DREAMWEAVER

ndice

INTRODUO AO AMBIENTE DE TRABALHO ...................................................1
FERRAMENTAS DE TRABALHO ........................................................................................ 2
O VERIFICADOR DE PROPRIEDADES .............................................................................................................2
JANELA DOS OBJECTOS............................................................................................................................2
MODOS DE VISUALIZAO ........................................................................................................................3
DOCUMENTO .........................................................................................4
PROPRIEDADES DA PGINA .......................................................................................... 4
ELEMENTOS............................................................................................................ 5
FORMATAO.......................................................................................................... 6
NCORAS E HIPERLIGAES......................................................................................... 7
HIPERLIGAES INTERNOS .......................................................................................................................7
HIPERLIGAES LOCAIS ..........................................................................................................................8
HIPERLIGAO PARA EMAIL.......................................................................................................................8
HIPERLIGAES EXTERNOS.......................................................................................................................9
ALTERAR AS CORES DAS HIPERLIGAES.......................................................................................................9
IMAGENS............................................................................................................. 10
INSERIR ........................................................................................................................................... 10
PROPRIEDADES ................................................................................................................................... 10
IMAGE MAPS ...................................................................................................................................... 11
ROLLOVER IMAGES ............................................................................................................................... 12
TABELAS ............................................................................................................. 13
INSERIR ........................................................................................................................................... 13
FORMATAR......................................................................................................................................... 13
BARRA DE NAVEGAO.......................................................................................................................... 16
FRAMES .............................................................................................................. 17
FORMULRIOS ....................................................................................................... 19
PLUG-INS...........................................................................................21
FLASH BUTTON...................................................................................................... 21
FASH TEXT........................................................................................................... 22
LAYERS..............................................................................................23
CONVERTER EM TABELAS........................................................................................................................ 24
OCULTAR E MOSTRAR LAYERS.................................................................................................................. 24
CRIAO E GESTO DE SITES..................................................................26
CRIAR UM SITE ................................................................................................................................... 26
CRIAR FICHEIROS E PASTAS.................................................................................................................... 28
ESTRUTURAR O SITE............................................................................................................................. 29
ALTERAR/REMOVER UM SITE ................................................................................................................... 29

Manual de Curso Pgina 1
Dw0702
INTRODUO AO AMBIENTE DE TRABALHO

Dreamweaver um editor html WYSIWYG (What You See Is What You Get) editado pela
Macromediaque se distinge dos outros pela possibilidade de dar dinamismo as pginas,
utilizando o DHTML(Dynamic html).
A construo das pginas faz-se dentro de uma janela com 2 janelas: a 1 serve para
inserir diferentes objectos (Window > Insert) e a 2 permite modificar as propriedades
dos elementos seleccionados (Window > Properties.

Dw0702

FERRAMENTAS DE TRABALHO

O VERIFICADOR DE PROPRIEDADES

Esta janela apresenta sempre as propriedades do objecto que est seleccionado.

Se estiver a trabalhar numa tabela, o verificador de propriedades assumir a seguinte
forma:

JANELA DOS OBJECTOS

(...)

A Paleta dos Objectos contm os objectos mais comuns na criao de sites, assim como: grficos,
tabelas, linhas horizontais, campos de formulrios, links internos, quebras de linha, e muitos outros.

Dw0702
MODOS DE VISUALIZAO

Modo Design (modo predefinido)

Dw0702
DOCUMENTO

PROPRIEDADES DA PGINA

Abra o menu Modify e clique em Page
properties.

Ou

Clique com a tecla direita do rato no documento e
escolha Page properties.

Nesta janela pode definir uma srie de elementos
para a pgina, como ttulo, a cor de fundo, a cor
das vrias hiperligaes, as margens, etc.

necessrio algum cuidado com as alteraes
nesta zona do DreamWeaver, que aqui
estaremos a alterar todo um contedo de uma
pgina, e no de um elemento em particular.

O elemento mais importante o Encoding,
permite alterar o tipo de cdigo usado nas nossas
pginas. Este cdigo o que os browsers lem
quando abrem a pgina, e nele que esto os
caracteres usados no nosso idioma (Portugus),
aconselhvel a no alterao deste elemento.

Dw0702

ELEMENTOS

No DreamWeaver, os elementos (Tag), so designados por Objectos e encontram-se no
painel Insert.

Posicione o cursor onde pretende inserir o objecto e carregue no cone respectivo.

Modificar

Para alterar um objecto, clique com a
tecla direita do rato e seleccione o tipo
de formatao que aplicar.
Ou
Utilize a barra do verificador de
propriedades.

Dw0702

FORMATAO

Para formatar qualquer tipo de Objecto, poderemos utilizar a barra do Verificador de
Propriedades.

Exemplo de quando selecciona texto:

Exemplo de quando selecciona uma imagem:

Exemplo de quando selecciona uma tabela:

Exemplo de quando selecciona uma clula:

Exemplo de quando selecciona uma layer:

Dw0702

NCORAS E HIPERLIGAES

A introduo de ncoras e hiperligaes so o que demonstra a grande vantagem
das pginas Web, que a possibilidade de se navegar entre elas, apenas clicando
em hiperligaes espalhadas por todos os documentos.

HIPERLIGAES INTERNOS
Posicione o cursor no local onde pretende inserir a ncora.
No painel Insert e clique no boto Named Anchor.
Digite o nome que pretende atribuir ncora e clique no boto OK.
Em outro ponto da pgina, seleccione o texto que ir servir de hiperligao para
esta ncora.
Na no painel das propriedades, na caixa Link digite: #nome do ncora.

Exemplo: No incio do documento, inserir uma ncora com o nome topo; no final do
documento, uma hiperligao para o topo do documento.

Dw0702

HIPERLIGAES LOCAIS

Seleccione o objecto (texto ou imagem) que ir servir de ligao.
Na barra do verificador de propriedades, na caixa Link, digite o caminho e nome do
ficheiro a que se destina a hiperligao.
Ou
Clique na pasta amarela Browse for file e seleccione o ficheiro a que se destina
esta hiperligao.

HIPERLIGAO PARA EMAIL

Posicione o cursor no local onde pretende inserir a hiperligao.
Abra o menu Insert/Email link.
Ou
Clique no boto Insert email link, na paleta Common
Escreva o texto e o endereo para a hiperligao.

Dw0702

HIPERLIGAES EXTERNOS

Para criar hiperligaes externas ao site, utilize a caixa Link da barra do verificador de
propriedades e digite o endereo completo.

Exemplos:
http://nomedositio.dominio/directorio/subdirectorio/.../nomeficheiro
ftp://nomedositio.dominio/directorio/subdirectorio/.../nomeficheiro
file://nomedositio.dominio/directorio/subdirectorio/.../nomeficheiro
mailto:nome@servidor.dominio

Escreva o texto que pretende para a hiperligao.
Seleccione o texto.
Na barra das propriedades, na caixa Link, digite a endereo completo.

ALTERAR AS CORES DAS HIPERLIGAES

Abra o menu Modify/Page properties.
Altere as cores de:
Links
Visited Links
Active Links

Dw0702

IMAGENS

O DreamWeaver, sendo um construtor de sites para a Internet, s aceita os mesmos tipos de Imagens
que o HTML aceita, isto significa que apenas poderemos trabalhar com GIFs, JPGs e PNGs.

INSERIR

Posicione o cursor no local onde pretende inserir a imagem.
Clique no boto Insert Image, no painel Insert.

Seleccione a imagem que pretende inserir e clique no boto OK.

PROPRIEDADES

Todas as propriedades da imagem esto visveis na barra do verificador de propriedades. Hiperligao,
texto alternativo, alinhamento, nome do ficheiro (Src), altura, largura e limite.

Dw0702

IMAGE MAPS

Insira a imagem
Seleccione a imagem.
No painel das propriedades, na seco Map,
seleccione o tipo de Hotspot a utilizar (rectngulo,
circular ou forma livre).
Desenhe, sobre o imagem o Hotspot.
Com o Hotspot seleccionado, no painel das
propriedades, na caixa Link, digite a
hiperligao.

Dw0702

ROLLOVER IMAGES

As Imagens Rollover, como o prprio nome indica so imagens que quando o rato passa por cima se
transformam noutra. O que quer dizer que no necessrio utilizar(saber) JavaScript para se fazer um
boto rollover.

Primeiro teremos que criar duas imagens, uma que ser a imagem que est visvel quando o utilizador
abre a pgina e outra que ser a que aparece quando o ponteiro do rato passar sobre ela.

Clique no boto relativo aos rollovers que se encontra Paleta do Objectos Comuns.
Seleccione a imagem original (Original Image) e a imagem para o efeito rollover (Rollover
image).
Se desejar uma hiperligao, escreva-a na caixa When clicked, go to url.

Dw0702

TABELAS

As tabelas em DreamWeaver, so bem mais fceis de inserir e trabalhar do que em programao HTML,
embora ele crie um cdigo exactamente igual ao HTML puro(inserido por ns).

INSERIR

No painel INSERT, clique no respectivo boto.
Indique o n de linhas e de colunas.

FORMATAR

Propriedades da tabela:

Dw0702
Para formatar as clulas utilize a o painel das propriedades.

Teremos acesso aos alinhamentos, cor de fundo, imagem de fundo, ao espao entre clulas, ao
espao entre as clulas e a texto, etc.

Unir clulas

Seleccione as clulas que pretende unir.
Clique no boto Merge cells que se encontra na parte inferior da barra do
verificador de propriedades.

Dw0702

Exemplo: Centrar uma imagem no ecr:

Insira uma tabela com 1 linha, 1 coluna, 100% de largura, sem limite ou qualquer espao entre
clulas.

No painel das propriedades, altere a altura da tabela para 100%.

Insira imagem dentro da clula e alinhe ao centro; nas propriedades da clulas, alinhe
horizontalmente ao centro e verticalmente ao meio.

Dw0702

BARRA DE NAVEGAO

O DreamWeaver, permite a criao de barras de navegao atravs da insero de vrios botes numa
tabela.
Para inserir uma Barra de navegao, efectue um clique no boto que se encontra no painel
INSERT.

D um nome ao elemento (Element name).
Seleccione a imagem (Up image).
Poder ainda, seleccionar uma imagem para o efeito rollover.
Na caixa When clicked, go to url, digite a hiperligao a que se destina este elemento.
Clique no boto + para adicionar novos itens ou no para eliminar itens da barra de navegao.

Dw0702
FRAMES

A utilizao de frames uma tcnica muito interessante para organizar e estruturar o
contedo de uma pgina HTML, na medida em que facilita a criao de documentos
compostos que o utilizador v em janelas diferentes dentro da janela principal do browser.

Isto porque as frames constituem, de facto, uma poderosa ferramenta com vrias
vantagens para os autores de pginas HTML, tais como:
A possibilidade de atribuir a cada frame um URL independente, permitindo que
cada uma tenha um contedo independente das outras.
Atribuindo nomes nicos a cada frame, possvel que cada link do documento
cause a modificao de uma frame especfica.
A facilidade de criar frames estticas compostas pelos elementos que se pretende
que sejam sempre visveis.
A possibilidade de desenvolver layouts mais sofisticados e funcionais.

No painel INSERT, clique em FRAMES.
Seleccione o tipo de Frame que pretende utilizar.

Para inserir outra frame dentro de uma existente:
Posicione o cursor na Frame onde pretende inserir outra.
Abra o menu Insert/Frame/... e clique no tipo de frame que pretende inserir.

Dw0702

Para guardar:
Abra o menu File/Save all frames

Dw0702

FORMULRIOS

Os visitantes tm a possibilidade de responder a uma srie de perguntas que foram elaboradas por ns
e que nos chegam atravs de e-mail. Assim podemos saber quais os pontos bons e maus do site, visto
por aqueles que o usam.

Para inserir um formulrio, clique no separador Forms no painel INSERT.

Quando se insere um formulrio na pgina ficam visveis umas linhas horizontais a tracejado para que
seja possvel identificar o local onde o formulrio foi inserido.

Clique no boto Insert Form

Escreva Nome:

Clique no boto Insert Text Field

Repita para o Email e para todos os outros campos conforme figura a seguir:

Dw0702

Mais uma vez podemos alterar todas as propriedades dos elementos do formulrio atravs da barra do
verificador de propriedades.

Dw0702
PLUG-INS

Os plug-ins so extenses de objectos inseridos nas nossas pginas que no funcionam sem um
programa especfico (plug-ins). Assim existem aplicaes que podemos colocar na net, que no sero
visveis por utilizadores que no possuam o Plug-in necessrio leitura daquele objecto.

Um dos objectos mais usados na net, que precisa de um plug-in, o Flash. Todos os documentos em
flash, inseridos numa pgina, s sero vistos por quem tem o plug-in instalado.
preciso ter ateno e fazer alguns testes para ter a certeza que todos os utilizadores conseguiro ver a
pgina tal e qual como a projectaram.

FLASH BUTTON

No painel INSERT clique no separador Media.
Efectue um clique no boto Insert Flash Button .

Dw0702

FASH TEXT

No painel INSERT clique no separador Media.
Efectue um clique no boto Insert Flash Button .

Dw0702
LAYERS

Uma das grande inovaes dos Browsers foi terem criado a possibilidade de se trabalhar com layers na
internet, assim como se faz em Photoshop para se montar as imagens. Tambm o podemos fazer na
Internet.

1. Para inserir um layer clique no boto do painel INSERT, a que se refere os Layers.

2. Desenhe a rea que o layer deve abranger, podendo depois inserir, dentro do layer, tabelas,
imagens ou texto.

Atravs das propriedades podemos definir a posio do exacta do layer, usando o L(left) e o T(top),
juntamente com o H(height) e W(width).

Tambm podemos definir o fundo, e a sua visibilidade.

A propriedade TAG, deve ser deixada como est, assim usamos o elemento DIV, que o elemento que
o HTML reconhece e aceita como layer, a alterao desta TAG pode dar origem a alguns erros.

Dw0702

CONVERTER EM TABELAS

Como referi atrs, os layers no so reconhecidos por todos os Browsers e todas as suas respectivas
verses, ento existe uma aco no DreamWeaver que permite a transformao dos Layers em Tabelas,
alinhando-os nas pginas atravs de imagens invisveis.

Para fazer essa transformao necessrio que nenhum layer esteja sobre outro. Em seguida abra o
menu Modify/Layout/Convert Layers to Tables.

OCULTAR E MOSTRAR LAYERS.

Escreva o texto e construa o layer.

Seleccione o layer. No painel das propriedades, na caixa Vis escolha Hidden.

Dw0702

Seleccione o texto e active a janela dos comportamentos.
Menu Window/Behaviors ou no painel Design clique no separador Behaviors

Clique no boto + e seleccione Show/Hidden layers.

Seleccione o layer e clique no boto Show.

Na coluna Events, seleccione OnMouseOver

Clique no boto + e seleccione Show/Hidden layers.
Seleccione o layer e clique no boto Hide.
Na coluna Events, seleccione OnMouseOver

Dw0702
CRIAO E GESTO DE SITES

Na criao de sites teremos de ter uma estrutura organizada, caso contrrio o site comear a ficar to
complexo que poder perder ficheiros ou ficar com hiperligaes quebradas

Existe uma janela de estruturao de Sites no DreamWeaver, essa janela pode ser aberta atravs do
menu Site/Site Files. Aqui poder organizar toda a estrutura do seu site, tanto a nvel de ficheiros como
a nvel de pastas.

CRIAR UM SITE

Abra o menu Site/ New Site ou no Painel FILES, no separador Site , clique no menu Site/New Site.

Indique o nome para o site a criar.

Seleccione a primeira opo.

Seleccione a primeira opo para trabalhar com site localmente (no seu computador).

Dw0702
Seleccione o modo como se ir ligar ao servidor que alojar o seu site. Caso contrrio
seleccione None.

Por fim, clique em Done.

No Painel FILES, separador Site ir encontrar todo o contedo
do seu site.

Dw0702

CRIAR FICHEIROS E PASTAS

No Painel Files, separador Site, menu File/New file ou New folder
Ou clique com tecla direita do rato.

Site Layout

Para poder organizar o seu site atravs de um organograma, dever existir um ficheiro com o nome
index. Este ser a sua Home Page.

No painel FILES, separador Site, clique no boto Expand/Collapse.

Dw0702
ESTRUTURAR O SITE

Seleccione o ficheiro no painel Site navigation.
Clique no Point to file e arraste at ao ficheiro pretendido.
Repita quantas vezes forem necessrio.
Ao abrir uma pgina, ir verificar a existncia de hiperligaes para as pginas abaixo da actual.

ALTERAR/REMOVER UM SITE

No painel FILES, separador Site, clique no menu Site/Edit Site.

Dreamweaver MX - Manual Do Curso - Ptbrasil

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Dreamweaver MX - Manual Do Curso - Ptbrasil

Transféré par

Droits d'auteur :

Formats disponibles

MACROMEDIA DREAMWEAVER MX

Pgina 2 Manual de Curso

Vous aimerez peut-être aussi