Dreamweaver Mx (pt-br)

Prévia do material em texto

MACROMEDIA DREAMWEAVER MX 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Página 2 Manual de Curso 
MANUAL DE DREAMWEAVER
 
Índice 
 
INTRODUÇÃO AO AMBIENTE DE TRABALHO ...................................................1 
FERRAMENTAS DE TRABALHO ........................................................................................ 2 
O VERIFICADOR DE PROPRIEDADES .............................................................................................................2 
JANELA DOS OBJECTOS............................................................................................................................2 
MODOS DE VISUALIZAÇÃO ........................................................................................................................3 
DOCUMENTO .........................................................................................4 
PROPRIEDADES DA PÁGINA .......................................................................................... 4 
ELEMENTOS............................................................................................................ 5 
FORMATAÇÃO .......................................................................................................... 6 
ÂNCORAS E HIPERLIGAÇÕES......................................................................................... 7 
HIPERLIGAÇÕES INTERNOS .......................................................................................................................7 
HIPERLIGAÇÕES LOCAIS ..........................................................................................................................8 
HIPERLIGAÇÃO PARA EMAIL.......................................................................................................................8 
HIPERLIGAÇÕES EXTERNOS.......................................................................................................................9 
ALTERAR AS CORES DAS HIPERLIGAÇÕES .......................................................................................................9 
IMAGENS ............................................................................................................. 10 
INSERIR ........................................................................................................................................... 10 
PROPRIEDADES ................................................................................................................................... 10 
IMAGE MAPS ...................................................................................................................................... 11 
ROLLOVER IMAGES ...............................................................................................................................12 
TABELAS ............................................................................................................. 13 
INSERIR ........................................................................................................................................... 13 
FORMATAR......................................................................................................................................... 13 
BARRA DE NAVEGAÇÃO.......................................................................................................................... 16 
FRAMES .............................................................................................................. 17 
FORMULÁRIOS ....................................................................................................... 19 
PLUG-INS...........................................................................................21 
FLASH BUTTON ...................................................................................................... 21 
FASH TEXT........................................................................................................... 22 
LAYERS..............................................................................................23 
CONVERTER EM TABELAS........................................................................................................................ 24 
OCULTAR E MOSTRAR LAYERS.................................................................................................................. 24 
CRIAÇÃO E GESTÃO DE SITES ..................................................................26 
CRIAR UM SITE ................................................................................................................................... 26 
CRIAR FICHEIROS E PASTAS.................................................................................................................... 28 
ESTRUTURAR O SITE............................................................................................................................. 29 
ALTERAR/REMOVER UM SITE ................................................................................................................... 29 
 
 
 
Manual de Curso Página 1 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
INTRODUÇÃO 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 páginas, 
utilizando o DHTML(Dynamic html). 
A construção das páginas 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. 
 
 
 
 
 
Página 2 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
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 contém os objectos mais comuns na criação de sites, assim como: gráficos, 
tabelas, linhas horizontais, campos de formulários, links internos, quebras de linha, e muitos outros. 
 
 
Manual de Curso Página 3 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
MODOS DE VISUALIZAÇÃO 
 
 
 
 
 
 
 
 Modo Design (modo predefinido) 
 
 
Página 4 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
DOCUMENTO 
 
PROPRIEDADES DA PÁGINA 
 
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 série de elementos 
para a página, como título, a cor de fundo, a cor 
das várias hiperligações, as margens, etc. 
 
É necessário algum cuidado com as alterações 
nesta zona do DreamWeaver, é que aqui 
estaremos a alterar todo um conteúdo de uma 
página, e não de um elemento em particular. 
 
O elemento mais importante é o Encoding, 
permite alterar o tipo de código usado nas nossas 
páginas. Este código é o que os browsers lêem 
quando abrem a página, e é nele que estão os 
caracteres usados no nosso idioma (Português), é 
aconselhável a não alteração deste elemento. 
 
 
 
 
 
 
 
 
Manual de Curso Página 5 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
ELEMENTOS 
 
No DreamWeaver, os elementos (Tag), são 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 formatação que aplicar. 
Ou 
Utilize a barra do verificador de 
propriedades. 
 
 
 
 
 
 
 
 
Página 6 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
 
FORMATAÇÃO 
 
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 quandoselecciona uma célula: 
 
 
 Exemplo de quando selecciona uma layer: 
 
Manual de Curso Página 7 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
ÂNCORAS E HIPERLIGAÇÕES 
 
A introdução de âncoras e hiperligações são o que demonstra a grande vantagem 
das páginas Web, que é a possibilidade de se navegar entre elas, apenas clicando 
em hiperligações espalhadas por todos os documentos. 
 
 
HIPERLIGAÇÕES INTERNOS 
 Posicione o cursor no local onde pretende inserir a âncora. 
 No painel Insert e clique no botão Named Anchor. 
 Digite o nome que pretende atribuir à âncora e clique no botão OK. 
 Em outro ponto da página, seleccione o texto que irá “servir” de hiperligação para 
esta âncora. 
 Na no painel das propriedades, na caixa Link digite: #nome do âncora. 
 
Exemplo: No início do documento, inserir uma âncora com o nome topo; no final do 
documento, uma hiperligação para o topo do documento. 
 
 
 
 
 
Página 8 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
HIPERLIGAÇÕES LOCAIS 
 
 Seleccione o objecto (texto ou imagem) que irá “servir” de ligação. 
 Na barra do verificador de propriedades, na caixa Link, digite o caminho e nome do 
ficheiro a que se destina a hiperligação. 
Ou 
Clique na pasta amarela – Browse for file – e seleccione o ficheiro a que se destina 
esta hiperligação. 
 
 
 
 
HIPERLIGAÇÃO PARA EMAIL 
 
 Posicione o cursor no local onde pretende inserir a hiperligação. 
 Abra o menu Insert/Email link. 
Ou 
Clique no botão Insert email link, na paleta Common 
 Escreva o texto e o endereço para a hiperligação. 
 
 
Manual de Curso Página 9 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
 
 
HIPERLIGAÇÕES EXTERNOS 
 
Para criar hiperligações externas ao site, utilize a caixa Link da barra do verificador de 
propriedades e digite o endereço 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 hiperligação. 
 Seleccione o texto. 
 Na barra das propriedades, na caixa Link, digite a endereço completo. 
 
 
ALTERAR AS CORES DAS HIPERLIGAÇÕES 
 
 Abra o menu Modify/Page properties. 
 Altere as cores de: 
Links 
Visited Links 
Active Links 
 
 
 
 
Página 10 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
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 GIF’s, JPG’s e PNG’s. 
 
 
INSERIR 
 
 
 Posicione o cursor no local onde pretende inserir a imagem. 
 Clique no botão Insert Image, no painel Insert. 
 
 Seleccione a imagem que pretende inserir e clique no botão OK. 
 
 
 
 
PROPRIEDADES 
 
Todas as propriedades da imagem estão visíveis na barra do verificador de propriedades. Hiperligação, 
texto alternativo, alinhamento, nome do ficheiro (Src), altura, largura e limite. 
 
 
 
 
Manual de Curso Página 11 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
 
 
IMAGE MAPS 
 
 Insira a imagem 
 Seleccione a imagem. 
 No painel das propriedades, na secção Map, 
seleccione o tipo de Hotspot a utilizar (rectângulo, 
circular ou forma livre). 
 Desenhe, sobre o imagem o Hotspot. 
 Com o Hotspot seleccionado, no painel das 
propriedades, na caixa Link, digite a 
hiperligação. 
 
 
 
 
 
 
 
 
 
 
 
Página 12 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
ROLLOVER IMAGES 
 
 
As Imagens Rollover, como o próprio nome indica são imagens que quando o rato passa por cima se 
transformam noutra. O que quer dizer que não é necessário utilizar(saber) JavaScript para se fazer um 
botão rollover. 
 
Primeiro teremos que criar duas imagens, uma que será a imagem que está visível quando o utilizador 
abre a página e outra que será a que aparece quando o ponteiro do rato passar sobre ela. 
 
 Clique no botão 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 hiperligação, escreva-a na caixa When clicked, go to url. 
 
 
 
 
 
 
 
 
Manual de Curso Página 13 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
 
TABELAS 
 
 
 
As tabelas em DreamWeaver, são bem mais fáceis de inserir e trabalhar do que em programação HTML, 
embora ele crie um código exactamente igual ao HTML puro(inserido por nós). 
 
INSERIR 
 
 No painel INSERT, clique no respectivo botão. 
 Indique o nº de linhas e de colunas. 
 
 
 
 
FORMATAR 
 
Propriedades da tabela: 
 
 
 
Página 14 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
Para formatar as células utilize a o painel das propriedades. 
 
 
 
 
Teremos acesso aos alinhamentos, à cor de fundo, à imagem de fundo, ao espaço entre células, ao 
espaço entre as células e a texto, etc. 
 
 
Unir células 
 
 Seleccione as células que pretende unir. 
 Clique no botão Merge cells que se encontra na parte inferior da barra do 
verificador de propriedades. 
 
 
 
 
 
 
Manual de Curso Página 15 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
Exemplo: Centrar uma imagem no ecrã: 
 
 Insira uma tabela com 1 linha, 1 coluna, 100% de largura, sem limite ou qualquer espaço entre 
células. 
 
 No painel das propriedades, altere a altura da tabela para 100%. 
 
 
 
 
 
 
 
 
 Insira imagem dentro da célula e alinhe ao centro; nas propriedades da células, alinhe 
horizontalmente ao centro e verticalmente ao meio. 
 
 
 
 
 
Página 16 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
BARRA DE NAVEGAÇÃO 
 
O DreamWeaver, permite a criação de barras de navegação através da inserção de vários botões numa 
tabela. 
Para inserir uma “Barra de navegação”, efectue um clique no botão 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 hiperligação a que se destina este elemento. 
 Clique no botão + para adicionar novos itens ou no – para eliminar itens da barra de navegação. 
 
 
 
 
 
Manual de Curso Página 17 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
FRAMES 
 
A utilização de frames é uma técnica muito interessante para organizar e estruturar o 
conteúdo de uma página HTML, na medida em que facilita a criação 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 várias 
vantagens para os autores de páginas HTML, tais como: 
• A possibilidade de atribuir a cada frame um URL independente, permitindo que 
cada uma tenha um conteúdo independente das outras. 
• Atribuindo nomes únicos a cada frame, é possível que cada link do documento 
cause a modificação de uma frame específica. 
• A facilidade de criar frames estáticas compostas pelos elementos que se pretende 
que sejam sempre visíveis. 
• 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. 
 
 
Página 18 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
 
 
Para guardar: 
 Abra o menu File/Save all frames 
 
 
 
Manual de Curso Página 19 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
FORMULÁRIOS 
 
 
Os visitantes têm a possibilidade de responder a uma série de perguntas que foram elaboradas por nós 
e que nos chegam através de e-mail. Assim podemos saber quais os pontos bons e maus do site, visto 
por aqueles que o usam. 
 
Para inserir um formulário, clique no separador Forms no painel INSERT.Quando se insere um formulário na página ficam visíveis umas linhas horizontais a tracejado para que 
seja possível identificar o local onde o formulário foi inserido. 
 
 
 
 Clique no botão Insert Form 
 
 
 
 Escreva Nome: 
 
 Clique no botão Insert Text Field 
 
 
 
 Repita para o Email e para todos os outros campos conforme figura a seguir: 
 
 
Página 20 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
 
Mais uma vez podemos alterar todas as propriedades dos elementos do formulário através da barra do 
verificador de propriedades. 
 
 
 
 
 
Manual de Curso Página 21 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
PLUG-INS 
 
 
Os plug-ins são extensões de objectos inseridos nas nossas páginas que não funcionam sem um 
programa específico (plug-ins). Assim existem aplicações que podemos colocar na net, que não serão 
visíveis por utilizadores que não possuam o “Plug-in” necessário à 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 página, só serão vistos por quem tem o plug-in instalado. 
É preciso ter atenção e fazer alguns testes para ter a certeza que todos os utilizadores conseguirão ver a 
página tal e qual como a projectaram. 
 
 
 
FLASH BUTTON 
 
 No painel INSERT clique no separador Media. 
 Efectue um clique no botão Insert Flash Button . 
 
 
 
Página 22 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
FASH TEXT 
 
 No painel INSERT clique no separador Media. 
 Efectue um clique no botão Insert Flash Button . 
 
 
 
 
 
 
Manual de Curso Página 23 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
LAYERS 
 
 
 
Uma das grande inovações 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. Também o podemos fazer na 
Internet. 
 
 
1. Para inserir um layer clique no botão 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. 
 
 
 
 
 
 
 
Através das propriedades podemos definir a posição do exacta do layer, usando o L(left) e o T(top), 
juntamente com o H(height) e W(width). 
 
Também 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 alteração desta TAG pode dar origem a alguns erros. 
 
Página 24 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
 
 
CONVERTER EM TABELAS 
 
Como referi atrás, os layers não são reconhecidos por todos os Browsers e todas as suas respectivas 
versões, então existe uma acção no DreamWeaver que permite a transformação dos Layers em Tabelas, 
alinhando-os nas páginas através de imagens invisíveis. 
 
Para fazer essa transformação é necessário 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. 
 
 
Manual de Curso Página 25 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 
 Seleccione o texto e active a janela dos comportamentos. 
Menu Window/Behaviors ou no painel Design clique no separador Behaviors 
 
 Clique no botão + e seleccione Show/Hidden layers. 
 
 Seleccione o layer e clique no botão Show. 
 
 
 
 Na coluna Events, seleccione OnMouseOver 
 
 
 
 Clique no botão + e seleccione Show/Hidden layers. 
 Seleccione o layer e clique no botão Hide. 
 Na coluna Events, seleccione OnMouseOver 
 
 
 
 
 
Página 26 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
Dw0702 
CRIAÇÃO E GESTÃO DE SITES 
 
Na criação de sites teremos de ter uma estrutura organizada, caso contrário o site começará a ficar tão 
complexo que poderá perder ficheiros ou ficar com hiperligações quebradas 
 
Existe uma janela de estruturação de Sites no DreamWeaver, essa janela pode ser aberta através do 
menu Site/Site Files. Aqui poderá organizar toda a estrutura do seu site, tanto a nível de ficheiros como 
a nível 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 opção. 
 
 
 Seleccione a primeira opção para trabalhar com site localmente (no seu computador). 
 
 
Manual de Curso Página 27 
MACROMEDIA DREAMWEAVER MX 
Dw0702 
 Seleccione o modo como se irá ligar ao servidor que alojará o seu site. Caso contrário 
seleccione None. 
 
 
 Por fim, clique em Done. 
 
 
No Painel FILES, separador Site irá encontrar todo o conteúdo 
do seu site. 
 
 
 
 
Página 28 Manual de Curso 
MACROMEDIA DREAMWEAVER MX
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 através de um organograma, deverá existir um ficheiro com o nome 
index. Este será a sua Home Page. 
 
No painel FILES, separador Site, clique no botão Expand/Collapse. 
 
 
 
 
 
 
 
 
Manual de Curso Página 29 
MACROMEDIA DREAMWEAVER MX 
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 necessário. 
 Ao abrir uma página, irá verificar a existência de hiperligações para as páginas abaixo da actual. 
 
 
 
 
 
ALTERAR/REMOVER UM SITE 
 
 No painel FILES, separador Site, clique no menu Site/Edit Site.