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 MACROMEDIA DREAMWEAVER MX 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.
Pgina 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 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.
Manual de Curso Pgina 3 MACROMEDIA DREAMWEAVER MX Dw0702 MODOS DE VISUALIZAO
Modo Design (modo predefinido)
Pgina 4 Manual de Curso MACROMEDIA DREAMWEAVER MX 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.
Manual de Curso Pgina 5 MACROMEDIA DREAMWEAVER MX 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.
Pgina 6 Manual de Curso MACROMEDIA DREAMWEAVER MX 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:
Manual de Curso Pgina 7 MACROMEDIA DREAMWEAVER MX 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.
Pgina 8 Manual de Curso MACROMEDIA DREAMWEAVER MX 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.
Manual de Curso Pgina 9 MACROMEDIA DREAMWEAVER MX Dw0702
HIPERLIGAES EXTERNOS
Para criar hiperligaes externas ao site, utilize a caixa Link da barra do verificador de propriedades e digite o endereo completo.
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
Pgina 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 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.
Manual de Curso Pgina 11 MACROMEDIA DREAMWEAVER MX 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.
Pgina 12 Manual de Curso MACROMEDIA DREAMWEAVER MX 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.
Manual de Curso Pgina 13 MACROMEDIA DREAMWEAVER MX 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:
Pgina 14 Manual de Curso MACROMEDIA DREAMWEAVER MX 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.
Manual de Curso Pgina 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 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.
Pgina 16 Manual de Curso MACROMEDIA DREAMWEAVER MX 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.
Manual de Curso Pgina 17 MACROMEDIA DREAMWEAVER MX 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.
Pgina 18 Manual de Curso MACROMEDIA DREAMWEAVER MX Dw0702
Para guardar: Abra o menu File/Save all frames
Manual de Curso Pgina 19 MACROMEDIA DREAMWEAVER MX 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:
Pgina 20 Manual de Curso MACROMEDIA DREAMWEAVER MX Dw0702
Mais uma vez podemos alterar todas as propriedades dos elementos do formulrio atravs da barra do verificador de propriedades.
Manual de Curso Pgina 21 MACROMEDIA DREAMWEAVER MX 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 .
Pgina 22 Manual de Curso MACROMEDIA DREAMWEAVER MX Dw0702
FASH TEXT
No painel INSERT clique no separador Media. Efectue um clique no boto Insert Flash Button .
Manual de Curso Pgina 23 MACROMEDIA DREAMWEAVER MX 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.
Pgina 24 Manual de Curso MACROMEDIA DREAMWEAVER MX 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.
Manual de Curso Pgina 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 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
Pgina 26 Manual de Curso MACROMEDIA DREAMWEAVER MX 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).
Manual de Curso Pgina 27 MACROMEDIA DREAMWEAVER MX 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.
Pgina 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 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.
Manual de Curso Pgina 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 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.